skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

manually relayout ui

This commit is contained in:
Skyler Lehmkuhl 2024-11-16 04:14:49 -05:00
parent d85da1c3a3
commit e3f40b9ac2
3 changed files with 91 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -12,7 +12,7 @@
</head> </head>
<body> <body>
<main class="container"> <!-- <main class="container"> -->
<!-- <h1>Welcome to Tauri</h1> <!-- <h1>Welcome to Tauri</h1>
<div class="row"> <div class="row">
@ -42,6 +42,6 @@
<!-- <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" /> --> <!-- <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" /> -->
</div> </div>
</main> <!-- </main> -->
</body> </body>
</html> </html>

71
src/main.js
View File

@ -33,7 +33,6 @@ let tools = {
} }
let mouseEvent; let mouseEvent;
console.log(fitCurve)
let context = { let context = {
mouseDown: false, mouseDown: false,
@ -203,7 +202,7 @@ window.addEventListener("DOMContentLoaded", () => {
// greetInputEl = document.querySelector("#greet-input"); // greetInputEl = document.querySelector("#greet-input");
// greetMsgEl = document.querySelector("#greet-msg"); // greetMsgEl = document.querySelector("#greet-msg");
rootPane = document.querySelector("#root") rootPane = document.querySelector("#root")
rootPane.appendChild(toolbar()) rootPane.appendChild(createPane(toolbar()))
rootPane.addEventListener("mousemove", (e) => { rootPane.addEventListener("mousemove", (e) => {
mouseEvent = e; mouseEvent = e;
}) })
@ -211,9 +210,14 @@ window.addEventListener("DOMContentLoaded", () => {
// e.preventDefault(); // e.preventDefault();
// greet(); // 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() { function stage() {
let stage = document.createElement("canvas") let stage = document.createElement("canvas")
let scroller = document.createElement("div") let scroller = document.createElement("div")
@ -342,10 +346,18 @@ function toolbar() {
return tools_scroller return tools_scroller
} }
function createPane() { function infopanel() {
let panel = document.createElement("div")
return panel
}
function createPane(content=undefined) {
let div = document.createElement("div") let div = document.createElement("div")
let header = 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" header.className = "header"
let button = document.createElement("button") let button = document.createElement("button")
@ -362,15 +374,15 @@ function createPane() {
// header.style.gridArea = "1 / 1 / 2 / 2" // header.style.gridArea = "1 / 1 / 2 / 2"
// content.style.gridArea = "1 / 2 / 2 / 3" // content.style.gridArea = "1 / 2 / 2 / 3"
div.classList = ["vertical-grid", "pane"] div.className = "vertical-grid"
header.style.flex = "0 0 var(--lineheight)" header.style.height = "calc( 2 * var(--lineheight))"
content.style.flex = "1 1 100%" content.style.height = "calc( 100% - 2 * var(--lineheight) )"
div.appendChild(header) div.appendChild(header)
div.appendChild(content) div.appendChild(content)
return div return div
} }
function splitPane(div, percent, horiz) { function splitPane(div, percent, horiz, newPane=undefined) {
let content = div.firstElementChild let content = div.firstElementChild
let div1 = document.createElement("div") let div1 = document.createElement("div")
let div2 = document.createElement("div") let div2 = document.createElement("div")
@ -378,8 +390,13 @@ function splitPane(div, percent, horiz) {
div1.className = "panecontainer" div1.className = "panecontainer"
div2.className = "panecontainer" div2.className = "panecontainer"
console.log(div)
div1.appendChild(content) div1.appendChild(content)
if (newPane) {
div2.appendChild(newPane)
} else {
div2.appendChild(createPane()) div2.appendChild(createPane())
}
div.appendChild(div1) div.appendChild(div1)
div.appendChild(div2) div.appendChild(div2)
@ -398,15 +415,43 @@ function splitPane(div, percent, horiz) {
if (horiz) { if (horiz) {
div.className = "horizontal-grid" div.className = "horizontal-grid"
} else { } else {
div.className = "verical-grid" div.className = "vertical-grid"
} }
div1.style.flex = `0 0 ${percent}%` div.setAttribute("lb-percent", percent) // TODO: better attribute name
div2.style.flex = `1 1 auto` // div1.style.flex = `0 0 ${percent}%`
// div2.style.flex = `1 1 auto`
Coloris({el: ".color-field"}) Coloris({el: ".color-field"})
updateUI() 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() { function updateUI() {
for (let canvas of canvases) { for (let canvas of canvases) {

60
src/styles.css
View File

@ -137,44 +137,32 @@ button {
height: 100%; height: 100%;
} }
.horizontal-grid { .horizontal-grid, .vertical-grid {
/* display: grid;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
min-width: 0px;
min-height: 0px;
max-height: 100%; */
display: flex; display: flex;
flex-direction: row;
gap: 10px; gap: 10px;
background-color: #0f0f0f; background-color: #0f0f0f;
width: 100%; width: 100%;
height: 100%;
}
.horizontal-grid {
flex-direction: row;
} }
.vertical-grid { .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; flex-direction: column;
gap: 10px; }
background-color: #0f0f0f; /* I don't fully understand this selector but it works for now */
height: 100%; .horizontal-grid:hover:not(:has(*:hover)) {
background: red;
cursor: ew-resize;
}
.vertical-grid:hover:not(:has(*:hover)) {
background: red;
cursor: ns-resize
} }
.scroll { .scroll {
overflow: scroll; overflow: scroll;
width: 100%; width: 100%;
height: 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 { .stage {
width: 1500px; width: 1500px;
@ -188,8 +176,8 @@ button {
flex-wrap: wrap; flex-wrap: wrap;
} }
.toolbtn { .toolbtn {
/* width: var(--lineheight); width: calc( 3 * var(--lineheight) );
height: var(--lineheight); */ height: calc( 3 * var(--lineheight) );
background-color: #2f2f2f; background-color: #2f2f2f;
} }
@ -199,8 +187,20 @@ button {
background-color: #2f2f2f; background-color: #2f2f2f;
} }
.clr-field {
width: 100%;
}
.clr-field button { .clr-field button {
width: 100% !important; width: 50% !important;
height: 100% !important; /* height: 100% !important; */
/* margin: 100px; */
border-radius: 5px; border-radius: 5px;
} }
.clr-field input {
width: 50%;
}
.infopanel {
width: 100%;
height: 100%;
background-color: #3f3f3f;
}