manually relayout ui
This commit is contained in:
Skyler Lehmkuhl
parent
d85da1c3a3
commit
e3f40b9ac2
|
|
@ -12,7 +12,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- <main class="container"> -->
|
||||
<!-- <h1>Welcome to Tauri</h1>
|
||||
|
||||
<div class="row">
|
||||
|
|
@ -42,6 +42,6 @@
|
|||
<!-- <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" /> -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!-- </main> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
73
src/main.js
73
src/main.js
|
|
@ -33,7 +33,6 @@ let tools = {
|
|||
}
|
||||
|
||||
let mouseEvent;
|
||||
console.log(fitCurve)
|
||||
|
||||
let context = {
|
||||
mouseDown: false,
|
||||
|
|
@ -203,7 +202,7 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||
// greetInputEl = document.querySelector("#greet-input");
|
||||
// greetMsgEl = document.querySelector("#greet-msg");
|
||||
rootPane = document.querySelector("#root")
|
||||
rootPane.appendChild(toolbar())
|
||||
rootPane.appendChild(createPane(toolbar()))
|
||||
rootPane.addEventListener("mousemove", (e) => {
|
||||
mouseEvent = e;
|
||||
})
|
||||
|
|
@ -211,9 +210,14 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||
// e.preventDefault();
|
||||
// greet();
|
||||
// });
|
||||
splitPane(rootPane, 10, true)
|
||||
let [_toolbar, panel] = splitPane(rootPane, 10, true)
|
||||
let [_stage, _infopanel] = splitPane(panel, 70, false, createPane(infopanel()))
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
updateLayout(rootPane)
|
||||
})
|
||||
|
||||
function stage() {
|
||||
let stage = document.createElement("canvas")
|
||||
let scroller = document.createElement("div")
|
||||
|
|
@ -342,10 +346,18 @@ function toolbar() {
|
|||
return tools_scroller
|
||||
}
|
||||
|
||||
function createPane() {
|
||||
function infopanel() {
|
||||
let panel = document.createElement("div")
|
||||
|
||||
return panel
|
||||
}
|
||||
|
||||
function createPane(content=undefined) {
|
||||
let div = document.createElement("div")
|
||||
let header = document.createElement("div")
|
||||
let content = stage() // TODO: change based on type
|
||||
if (!content) {
|
||||
content = stage() // TODO: change based on type
|
||||
}
|
||||
header.className = "header"
|
||||
|
||||
let button = document.createElement("button")
|
||||
|
|
@ -362,15 +374,15 @@ function createPane() {
|
|||
// header.style.gridArea = "1 / 1 / 2 / 2"
|
||||
// content.style.gridArea = "1 / 2 / 2 / 3"
|
||||
|
||||
div.classList = ["vertical-grid", "pane"]
|
||||
header.style.flex = "0 0 var(--lineheight)"
|
||||
content.style.flex = "1 1 100%"
|
||||
div.className = "vertical-grid"
|
||||
header.style.height = "calc( 2 * var(--lineheight))"
|
||||
content.style.height = "calc( 100% - 2 * var(--lineheight) )"
|
||||
div.appendChild(header)
|
||||
div.appendChild(content)
|
||||
return div
|
||||
}
|
||||
|
||||
function splitPane(div, percent, horiz) {
|
||||
function splitPane(div, percent, horiz, newPane=undefined) {
|
||||
let content = div.firstElementChild
|
||||
let div1 = document.createElement("div")
|
||||
let div2 = document.createElement("div")
|
||||
|
|
@ -378,8 +390,13 @@ function splitPane(div, percent, horiz) {
|
|||
div1.className = "panecontainer"
|
||||
div2.className = "panecontainer"
|
||||
|
||||
console.log(div)
|
||||
div1.appendChild(content)
|
||||
div2.appendChild(createPane())
|
||||
if (newPane) {
|
||||
div2.appendChild(newPane)
|
||||
} else {
|
||||
div2.appendChild(createPane())
|
||||
}
|
||||
div.appendChild(div1)
|
||||
div.appendChild(div2)
|
||||
|
||||
|
|
@ -398,15 +415,43 @@ function splitPane(div, percent, horiz) {
|
|||
if (horiz) {
|
||||
div.className = "horizontal-grid"
|
||||
} else {
|
||||
div.className = "verical-grid"
|
||||
div.className = "vertical-grid"
|
||||
}
|
||||
div1.style.flex = `0 0 ${percent}%`
|
||||
div2.style.flex = `1 1 auto`
|
||||
div.setAttribute("lb-percent", percent) // TODO: better attribute name
|
||||
// div1.style.flex = `0 0 ${percent}%`
|
||||
// div2.style.flex = `1 1 auto`
|
||||
Coloris({el: ".color-field"})
|
||||
updateUI()
|
||||
updateLayout(rootPane)
|
||||
return [div1, div2]
|
||||
}
|
||||
|
||||
|
||||
function updateLayout(element) {
|
||||
let rect = element.getBoundingClientRect()
|
||||
let percent = element.getAttribute("lb-percent")
|
||||
percent ||= 50
|
||||
let children = element.children
|
||||
if (children.length != 2) return;
|
||||
if (element.className == "horizontal-grid") {
|
||||
console.log(rect)
|
||||
children[0].style.width = `${rect.width * percent / 100}px`
|
||||
children[1].style.width = `${rect.width * (100 - percent) / 100}px`
|
||||
children[0].style.height = `${rect.height}px`
|
||||
children[1].style.height = `${rect.height}px`
|
||||
} else if (element.className == "vertical-grid") {
|
||||
console.log("vert")
|
||||
children[0].style.height = `${rect.height * percent / 100}px`
|
||||
children[1].style.height = `${rect.height * (100 - percent) / 100}px`
|
||||
children[0].style.width = `${rect.width}px`
|
||||
children[1].style.width = `${rect.width}px`
|
||||
}
|
||||
if (children[0].getAttribute("lb-percent")) {
|
||||
updateLayout(children[0])
|
||||
}
|
||||
if (children[1].getAttribute("lb-percent")) {
|
||||
updateLayout(children[1])
|
||||
}
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
for (let canvas of canvases) {
|
||||
|
|
|
|||
|
|
@ -137,44 +137,32 @@ button {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.horizontal-grid {
|
||||
/* display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
max-height: 100%; */
|
||||
.horizontal-grid, .vertical-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
background-color: #0f0f0f;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.horizontal-grid {
|
||||
flex-direction: row;
|
||||
}
|
||||
.vertical-grid {
|
||||
/* display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
max-height: 100%; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background-color: #0f0f0f;
|
||||
height: 100%;
|
||||
}
|
||||
/* I don't fully understand this selector but it works for now */
|
||||
.horizontal-grid:hover:not(:has(*:hover)) {
|
||||
background: red;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.vertical-grid:hover:not(:has(*:hover)) {
|
||||
background: red;
|
||||
cursor: ns-resize
|
||||
}
|
||||
.scroll {
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* display: block;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
overflow: scroll; */
|
||||
}
|
||||
.stage {
|
||||
width: 1500px;
|
||||
|
|
@ -188,8 +176,8 @@ button {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
.toolbtn {
|
||||
/* width: var(--lineheight);
|
||||
height: var(--lineheight); */
|
||||
width: calc( 3 * var(--lineheight) );
|
||||
height: calc( 3 * var(--lineheight) );
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
|
|
@ -199,8 +187,20 @@ button {
|
|||
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
.clr-field {
|
||||
width: 100%;
|
||||
}
|
||||
.clr-field button {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
width: 50% !important;
|
||||
/* height: 100% !important; */
|
||||
/* margin: 100px; */
|
||||
border-radius: 5px;
|
||||
}
|
||||
.clr-field input {
|
||||
width: 50%;
|
||||
}
|
||||
.infopanel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
Loading…
Reference in New Issue