In-IDE proof-of-concept!

tmr232 · Jan 17, 2025 · 1d318bf · 1d318bf
1 parent 6fa6f5d
commit 1d318bf
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 27 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "graphology": "^0.25.4",
     "graphology-operators": "^1.6.0",
     "graphology-traversal": "^0.3.1",
+    "object-hash": "^3.0.0",
     "svgdom": "^0.1.19",
     "web-tree-sitter": "^0.23.2"
   },
@@ -28,6 +29,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/bun": "latest",
     "@types/eslint__js": "^8.42.3",
+    "@types/object-hash": "^3.0.6",
     "@types/svgdom": "^0.1.2",
     "eslint": "^9.12.0",
     "graphology-utils": "^2.5.2",

diff --git a/src/components/WebviewRenderer.svelte b/src/components/WebviewRenderer.svelte
@@ -3,12 +3,15 @@
   import { functionNodeTypes, type Language } from "../control-flow/cfg";
   import { Graphviz } from "@hpcc-js/wasm-graphviz";
   import { initialize as initializeUtils, type Parsers } from "./utils";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { type ColorList, getLightColorList } from "../control-flow/colors";
   import { Renderer, type RenderOptions } from "./renderer.ts";
+  import Panzoom, { type PanzoomObject } from "@panzoom/panzoom";
+  import objectHash from "object-hash";
 
   type CodeAndOffset = { code: string; offset: number; language: Language };
 
+  let resultHash: string = "";
   let parsers: Parsers;
   let graphviz: Graphviz;
   let dot: string;
@@ -70,6 +73,13 @@
     dot = renderResult.dot;
     getNodeOffset = renderResult.getNodeOffset;
 
+    // TODO: Only reset when we move between functions
+    const newHash = objectHash(functionSyntax.startPosition);
+    if (newHash !== resultHash) {
+      panzoom.reset();
+      resultHash = newHash;
+    }
+
     return renderResult.svg;
   }
 
@@ -123,28 +133,73 @@
       node: target.id,
       offset: getNodeOffset(target.id),
     });
+    console.log(target.id);
+    panToNode(target.id);
+  }
+
+  let zoomable: Element;
+  let parent: Element;
+  let panzoom: PanzoomObject;
+  function initPanzoom() {
+    panzoom = Panzoom(zoomable, { maxScale: 100, minScale: 1 });
+    zoomable.parentElement.addEventListener("wheel", panzoom.zoomWithWheel);
+  }
+
+  function panToNode(nodeId: string) {
+    const node = zoomable.querySelector(`#${nodeId}`);
+    // Find the midpoint for the screen and the node to center on
+    const findMidpoint = (el: Element) => {
+      const boundingClientRect = el.getBoundingClientRect();
+      return {
+        x: boundingClientRect.x + boundingClientRect.width / 2,
+        y: boundingClientRect.y + boundingClientRect.height / 2,
+      };
+    };
+    const parentMidpoint = findMidpoint(parent);
+    const nodeMidpoint = findMidpoint(node);
+
+    // Find the diff between them - that is our relative pan
+    const panDiff = {
+      x: parentMidpoint.x - nodeMidpoint.x,
+      y: parentMidpoint.y - nodeMidpoint.y,
+    };
+    // Relative movement is scaled by the scale, so we need to undo that scaling.
+    const scale = panzoom.getScale();
+    panzoom.pan(panDiff.x / scale, panDiff.y / scale, {
+      animate: true,
+      relative: true,
+    });
+    console.log(parentMidpoint, nodeMidpoint, panDiff, scale);
   }
+
+  onMount(() => {
+    initPanzoom();
+  });
 </script>
 
-{#await initialize() then}
-  <!-- I don't know how to make this part accessible. PRs welcome! -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="graph" on:click={onClick}>
-    {@html renderWrapper(
-      codeAndOffset,
-      {
-        simplify,
-        verbose,
-        trim,
-        flatSwitch,
-        highlight,
-        showRegions,
-      },
-      colorList,
-    )}
+<div id="parent" bind:this={parent}>
+  <div id="zoomable" bind:this={zoomable}>
+    {#await initialize() then}
+      <!-- I don't know how to make this part accessible. PRs welcome! -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div class="graph" on:click={onClick}>
+        {@html renderWrapper(
+          codeAndOffset,
+          {
+            simplify,
+            verbose,
+            trim,
+            flatSwitch,
+            highlight,
+            showRegions,
+          },
+          colorList,
+        )}
+      </div>
+    {/await}
   </div>
-{/await}
+</div>
 
 <style>
   .graph {

diff --git a/src/render/src/App.svelte b/src/render/src/App.svelte
@@ -26,7 +26,7 @@
   import { onMount } from "svelte";
   import { MultiDirectedGraph } from "graphology";
   import { Lookup } from "../../control-flow/ranges";
-  import {SVG} from "@svgdotjs/svg.js"
+  import { SVG } from "@svgdotjs/svg.js";
 
   let codeUrl: string | undefined;
 
@@ -269,19 +269,28 @@
     const node = svg.querySelector(`#${nodeId}`);
 
     // Find the midpoint for the screen and the node to center on
-    const findMidpoint = (el:Element)=>{
+    const findMidpoint = (el: Element) => {
       const boundingClientRect = el.getBoundingClientRect();
-      return {x:boundingClientRect.x + boundingClientRect.width/2, y:boundingClientRect.y + boundingClientRect.height/2}
-    }
+      return {
+        x: boundingClientRect.x + boundingClientRect.width / 2,
+        y: boundingClientRect.y + boundingClientRect.height / 2,
+      };
+    };
     const containerMidpoint = findMidpoint(container);
-    const nodeMidpoint = findMidpoint(node)
+    const nodeMidpoint = findMidpoint(node);
 
     // Find the diff between them - that is our relative pan
-    const panDiff = {x: containerMidpoint.x -nodeMidpoint.x, y: containerMidpoint.y -nodeMidpoint.y};
+    const panDiff = {
+      x: containerMidpoint.x - nodeMidpoint.x,
+      y: containerMidpoint.y - nodeMidpoint.y,
+    };
 
     // Relative movement is scaled by the scale, so we need to undo that scaling.
     const scale = panzoom.getScale();
-    panzoom.pan(panDiff.x / scale, panDiff.y / scale, {animate:true, relative:true});
+    panzoom.pan(panDiff.x / scale, panDiff.y / scale, {
+      animate: true,
+      relative: true,
+    });
   }
 
   onMount(() => {
@@ -299,7 +308,7 @@
       >Open Code</button
     >
     <button on:click={saveSVG}>Download SVG</button>
-    <button on:click={()=>panToNode("node19")}>Pan to node</button>
+    <button on:click={() => panToNode("node19")}>Pan to node</button>
   </div>
 </div>
 <div class="svgContainer">