changing layout

2026-06-06 21:24:06 -04:00 · 2026-01-13 19:38:35 -05:00 · 2026-01-13 19:38:35 -05:00 · e3a0370025
commit e3a0370025
parent 2b96dd420f
4 changed files with 90 additions and 54 deletions
--- a/web/root/index.html
+++ b/web/root/index.html
@ -26,7 +26,54 @@
                <div id="graph" class="graph"></div>
            </section>

-            <div class="vSplit" style="--split-default: 20%" title="Drag to resize canvas width"></div>
+            <div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas width"></div>
+
+            <div class="flexCol">
+                <div class="controls" style="background: var(--bg-0)">
+                    <button id="togglePhysics" class="btn btn-red btn-toggle active" title="Toggle physics layout">
+                        Physics: ON
+                    </button>
+
+                    <button id="resetLayout" class="btn btn-grey" title="Re-enable physics on nodes and reset layout">
+                        Reset Layout
+                    </button>
+
+                    <span class="spacer"></span>
+
+                    <button id="reloadSim" class="btn btn-blue" title="Stop and Reload simulation">
+                        ⟲ Reload
+                    </button>
+                    <button id="clearSim" class="btn btn-red" title="Stop and Clear simulation">
+                        ✖ Clear
+                    </button>
+
+
+                    <button id="stepSim" class="btn btn-yellow" title="Advance one step">
+                        ⏭ Step
+                    </button>
+                    <button id="playPauseSim" class="btn btn-green" title="Run / pause simulation">
+                        ▶ Play
+                    </button>
+
+                    <label class="speed">
+                        Speed
+                        <input id="speedSim" type="range" min="1" max="60" value="1" />
+                        <span id="speedSimLabel">10x</span>
+                    </label>
+                </div>
+                <div class="hSplit styleOnly"></div>
+                <div class="vscroll">
+                    <div id="editor" class="editor"></div>
+                </div>
+
+            </div>
+
+
+        </section>
+
+        <div class="vSplit" style="--split-default: 40%" title="Drag to resize canvas height"></div>
+
+        <div class="flexCol">

            <section class="flexCol gap marginTop">
                <div class="flexCenter sidePadding gap">
@ -56,7 +103,7 @@
                </div>

                <div class="hSplit styleOnly" title="Drag to resize canvas height"></div>
-                
+
                <div class="sidePadding scroll">
                    <div class="pathsGrid">

@ -88,52 +135,11 @@
                </div>

            </section>
-        </section>
-
-        <div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas height"></div>
-
-        <div class="flexCol">
-            <div class="controls" style="background: var(--bg-0)">
-                <button id="togglePhysics" class="btn btn-red btn-toggle active" title="Toggle physics layout">
-                    Physics: ON
-                </button>
-
-                <button id="resetLayout" class="btn btn-grey" title="Re-enable physics on nodes and reset layout">
-                    Reset Layout
-                </button>
-
-                <span class="spacer"></span>
-
-                <button id="reloadSim" class="btn btn-blue" title="Stop and Reload simulation">
-                    ⟲ Reload
-                </button>
-                <button id="clearSim" class="btn btn-red" title="Stop and Clear simulation">
-                    ✖ Clear
-                </button>


-                <button id="stepSim" class="btn btn-yellow" title="Advance one step">
-                    ⏭ Step
-                </button>
-                <button id="playPauseSim" class="btn btn-green" title="Run / pause simulation">
-                    ▶ Play
-                </button>
-
-                <label class="speed">
-                    Speed
-                    <input id="speedSim" type="range" min="1" max="60" value="1" />
-                    <span id="speedSimLabel">10x</span>
-                </label>
-            </div>
-            <div class="hSplit styleOnly" title="Drag to resize canvas height"></div>
+            <div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas width"></div>

            <div style="height:100%">
-                <div class="vscroll">
-                    <div id="editor" class="editor"></div>
-                </div>
-
-                <div class="vSplit" style="--split-default: 40%" title="Drag to resize terminal/editor width"></div>
-
                <div id="terminal" class="terminal"></div>
            </div>
        </div>
--- a/web/root/src/highlight.ts
+++ b/web/root/src/highlight.ts
@ -109,7 +109,35 @@ bus.on("highlight/all/remove", (_) => {
    }
 });

+globalThis.document.addEventListener("mouseover", (e) => {
+  const target = (e.target instanceof Element)
+    ? e.target.closest("[highlight-span]")
+    : null;

-export function highlightable(span: Span, text: string): string{
-  return `<span class = "cm-highlight" highlight-span="${span[0]}:${span[1]}">${text}</span>`
+  if (!target) return;
+
+  const kind = (target.getAttribute("highlight-kind") ?? "focus") as unknown as HighlightKind;
+  const span = target.getAttribute("highlight-span")!.split(":").map(Number) as unknown as Span;
+  
+  bus.emit("highlight/one/add", {span, kind});
+});
+
+document.addEventListener("mouseout", (e) => {
+  if (!(e.target instanceof Element)) return;
+
+  const from = e.target.closest("[highlight-span]");
+  const to = e.relatedTarget instanceof Element
+    ? e.relatedTarget.closest("[highlight-span]")
+    : null;
+
+  if (!from || from === to) return;
+
+  const kind = (from.getAttribute("highlight-kind") ?? "focus") as unknown as HighlightKind;
+  const span = from.getAttribute("highlight-span")!.split(":").map(Number) as unknown as Span;
+  
+  bus.emit("highlight/one/remove", {span, kind});
+});
+
+export function highlightable(span: Span, text: string, kind?: HighlightKind): string{
+  return `<span class = "cm-highlight" ${kind ? `highlight-kind="${kind}"`:""} highlight-span="${span[0]}:${span[1]}">${text}</span>`
 }
--- a/web/root/src/paths.ts
+++ b/web/root/src/paths.ts
@ -30,9 +30,9 @@ function renderFaPath(state: FaState, index: number) {
    const step = state.path[i];
    
    div.innerHTML = `${i + 1}. ` 
-      + highlightable(step.function, `${DELTA}(${step.from_state})`) 
+      + highlightable(step.function, `${DELTA}(${step.from_state})`, "focus") 
      + " = " 
-      + highlightable(step.transition, step.state);
+      + highlightable(step.transition, step.state, "warning");
    steps.appendChild(div);
  }

@ -63,9 +63,9 @@ function renderPdaPath(state: PdaState, index: number) {
    const step = state.path[i];

    div.innerHTML = `${i + 1}. ` 
-      + highlightable(step.function, `${DELTA}(${step.from_state}, ${step.from_letter}, , ${step.from_stack})`) 
+      + highlightable(step.function, `${DELTA}(${step.from_state}, ${step.from_letter}, , ${step.from_stack})`, "focus") 
      + " = " 
-      + highlightable(step.transition, `(${step.state}, [ ${step.stack.join(" ")} ])`);
+      + highlightable(step.transition, `(${step.state}, [ ${step.stack.join(" ")} ])`, "warning");
    steps.appendChild(div);
  }

@ -97,9 +97,9 @@ function renderTmPath(state: TmState, index: number) {
    div.setAttribute("highlight-span", "${}")

    div.innerHTML = `${i + 1}. ` 
-      + highlightable(step.function, `${DELTA}(${step.from_state}, ${step.from_symbol})`) 
+      + highlightable(step.function, `${DELTA}(${step.from_state}, ${step.from_symbol})`, "focus") 
      + " = " 
-      + highlightable(step.transition, `(${step.state}, ${step.symbol}, ${step.direction})`);
+      + highlightable(step.transition, `(${step.state}, ${step.symbol}, ${step.direction})`, "warning");
    console.log(div.innerHTML);
    steps.appendChild(div);
  }
--- a/web/root/src/splitters.ts
+++ b/web/root/src/splitters.ts
@ -91,13 +91,14 @@ function enableFlexSplitters() {
    // --split-min-a: 80px
    // --split-min-b: 180px
    const defPct = getVarPct(splitter, "--split-default", 60);
-    const minA = getVarPx(splitter, "--split-min-a", 80);
-    const minB = getVarPx(splitter, "--split-min-b", 180);
+    const minA = getVarPx(splitter, "--split-min-a", 220);
+    const minB = getVarPx(splitter, "--split-min-b", 220);

    // Set initial size (A is fixed)
    {
      const r = parent.getBoundingClientRect();
      const px = clamp((defPct / 100) * r.height, minA, r.height - gap - minB);
+      console.log(r.height, px)
      setFixedSize(a, "y", px);
    }

@ -199,4 +200,5 @@ function enableFlexSplitters() {
    });
  }
 }
+enableFlexSplitters();
 enableFlexSplitters();