changing layout

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">
+            <div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas width"></div>
-                    ⏭ 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 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>

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{
+  if (!target) return;
-  return `<span class = "cm-highlight" highlight-span="${span[0]}:${span[1]}">${text}</span>`
+
+  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>`
 }

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);
   }

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 minA = getVarPx(splitter, "--split-min-a", 220);
-    const minB = getVarPx(splitter, "--split-min-b", 180);
+    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();