ParkerTenBroeck/automata
1
0
Fork 0
mirror of https://github.com/ParkerTenBroeck/automata.git synced 2026-06-07 05:28:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleaning up SCSS and JS

Browse source
This commit is contained in:
Parker TenBroeck 2026-01-07 12:37:58 -05:00
parent 7629bdab6d
commit 806545aba6
10 changed files with 242 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

73
web/root/src/editor.ts
View file

@ -307,75 +307,4 @@ const state = EditorState.create({
const editor = new EditorView({
state,
parent: document.getElementById("editor")!,
});
function setDefaultLayoutWeights() {
const vh = globalThis.window.innerHeight;
const vw = globalThis.window.innerWidth;
// Canvas: 30% of screen height
const canvasH = Math.round(vh * 0.60);
// Terminal: 35% of width
const termW = Math.round(vw * 0.30);
const app = document.getElementById("app")!;
app.style.setProperty("--canvasH", `${canvasH}px`);
app.style.setProperty("--termW", `${termW}px`);
}
setDefaultLayoutWeights();
(function enableLayoutSplitters() {
const app = document.getElementById("app")!;
const hSplit = document.getElementById("hSplit")!;
const vSplit = document.getElementById("vSplit")!;
// const canvas = document.getElementById("canvas");
const canvasPane = document.getElementById("canvasPane");
let draggingH = false;
let draggingV = false;
hSplit.addEventListener("mousedown", (e) => {
draggingH = true;
document.body.style.cursor = "row-resize";
e.preventDefault();
});
vSplit.addEventListener("mousedown", (e) => {
draggingV = true;
document.body.style.cursor = "col-resize";
e.preventDefault();
});
globalThis.window.addEventListener("mousemove", (e) => {
const rect = app.getBoundingClientRect();
if (draggingH) {
const y = e.clientY - rect.top;
const minCanvas = 80;
const minBottom = 180;
const maxCanvas = rect.height - 8 - minBottom;
const canvasH = Math.max(minCanvas, Math.min(maxCanvas, y));
app.style.setProperty("--canvasH", `${canvasH}px`);
}
if (draggingV) {
const bottomPane = document.getElementById("bottomPane")!;
const r = bottomPane.getBoundingClientRect();
const x = e.clientX - r.left;
const minTerm = 220;
const maxTerm = r.width - 8 - 220;
const termW = Math.max(minTerm, Math.min(maxTerm, r.width - x));
app.style.setProperty("--termW", `${termW}px`);
}
});
globalThis.window.addEventListener("mouseup", () => {
draggingH = false;
draggingV = false;
document.body.style.cursor = "";
});
})();
});