support polygon regions in hypergraph

Abse2001 · Abse2001 · commit 4bd6ddbf48ac · 2026-02-08T16:34:15.000+02:00
diff --git a/lib/JumperGraphSolver/visualizeJumperGraph.ts b/lib/JumperGraphSolver/visualizeJumperGraph.ts
@@ -50,6 +50,8 @@ export const visualizeJumperGraph = (
       graphics.polygons.push({
         points,
         fill,
+        stroke: "rgba(128, 128, 128, 0.5)",
+        strokeWidth: 0.03,
       })
     } else {
       graphics.rects.push({
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.15",
-    "graphics-debug": "^0.0.82",
+    "graphics-debug": "^0.0.83",
     "react-cosmos": "^7.1.0",
     "react-cosmos-plugin-vite": "^7.1.0",
     "transformation-matrix": "^3.1.0",
diff --git a/tests/topology/__snapshots__/topology19.snap.svg b/tests/topology/__snapshots__/topology19.snap.svg
@@ -1,4 +1,4 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="2,2 3,2 4,2" data-type="line" data-label="" points="180,320 320,320 460,320" fill="none" stroke="rgba(100, 100, 100, 0.3)" stroke-width="1px"/></g><g><polygon data-type="polygon" data-label="" data-points="1,2 1.5,0.866 2.5,0.866 3,2 2.5,3.134 1.5,3.134" points="40,320 110,478.76 250,478.76 320,320 250,161.24 110,161.24" fill="rgba(200, 200, 255, 0.1)" stroke="black" stroke-width="0.007142857142857143"/></g><g><polygon data-type="polygon" data-label="" data-points="3,2 3.5,0.866 4.5,0.866 5,2 4.5,3.134 3.5,3.134" points="320,320 390,478.76 530,478.76 600,320 530,161.24 390,161.24" fill="rgba(200, 200, 255, 0.1)" stroke="black" stroke-width="0.007142857142857143"/></g><circle data-type="circle" data-label="" data-x="3" data-y="2" cx="320" cy="320" r="7" fill="rgba(128, 128, 128, 0.5)" stroke="black" stroke-width="0.007142857142857143"/><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="2,2 3,2 4,2" data-type="line" data-label="" points="180,320 320,320 460,320" fill="none" stroke="rgba(100, 100, 100, 0.3)" stroke-width="1px"/></g><g><polygon data-type="polygon" data-label="" data-points="1,2 1.5,0.866 2.5,0.866 3,2 2.5,3.134 1.5,3.134" points="40,320 110,478.76 250,478.76 320,320 250,161.24 110,161.24" fill="rgba(200, 200, 255, 0.1)" stroke="rgba(128, 128, 128, 0.5)" stroke-width="4.2"/></g><g><polygon data-type="polygon" data-label="" data-points="3,2 3.5,0.866 4.5,0.866 5,2 4.5,3.134 3.5,3.134" points="320,320 390,478.76 530,478.76 600,320 530,161.24 390,161.24" fill="rgba(200, 200, 255, 0.1)" stroke="rgba(128, 128, 128, 0.5)" stroke-width="4.2"/></g><circle data-type="circle" data-label="" data-x="3" data-y="2" cx="320" cy="320" r="7" fill="rgba(128, 128, 128, 0.5)" stroke="black" stroke-width="0.007142857142857143"/><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
               document.currentScript.parentElement.addEventListener('mousemove', (e) => {
                 const svg = e.currentTarget;
                 const rect = svg.getBoundingClientRect();
