@tscircuit/hypergraph 0.0.19 → 0.0.20

package/dist/index.d.ts

@@ -110,6 +110,10 @@ interface JRegion extends Region {
             x: number;
             y: number;
         };
+        polygon?: {
+            x: number;
+            y: number;
+        }[];
         isPad: boolean;
         isThroughJumper?: boolean;
         isConnectionRegion?: boolean;
@@ -458,6 +462,10 @@ type SharedBoundary = {
 type RegionData = {
     id: string;
     bounds: Bounds | null;
+    polygon: {
+        x: number;
+        y: number;
+    }[] | null;
     center: {
         x: number;
         y: number;
@@ -495,6 +503,10 @@ declare class RegionBuilder implements RegionRef {
     constructor(id: string);
     get id(): string;
     rect(b: Bounds): this;
+    polygon(points: {
+        x: number;
+        y: number;
+    }[]): this;
     center(x: number, y: number): this;
     size(w: number, h: number, anchor?: "center" | "min"): this;
     pad(isPad?: boolean): this;

package/dist/index.js

@@ -2117,10 +2117,11 @@ var visualizeJumperGraph = (graph, options) => {
     points: [],
     rects: [],
     texts: [],
+    polygons: [],
     coordinateSystem: "cartesian"
   };
   for (const region of graph.regions) {
-    const { bounds, isPad, isThroughJumper, isConnectionRegion } = region.d;
+    const { bounds, isPad, isThroughJumper, isConnectionRegion, polygon } = region.d;
     const centerX = (bounds.minX + bounds.maxX) / 2;
     const centerY = (bounds.minY + bounds.maxY) / 2;
     const width = bounds.maxX - bounds.minX;
@@ -2135,12 +2136,22 @@ var visualizeJumperGraph = (graph, options) => {
     } else {
       fill = "rgba(200, 200, 255, 0.1)";
     }
-    graphics.rects.push({
-      center: { x: centerX, y: centerY },
-      width: width - 0.1,
-      height: height - 0.1,
-      fill
-    });
+    if (polygon && polygon.length >= 3) {
+      const points = polygon;
+      graphics.polygons.push({
+        points,
+        fill,
+        stroke: "rgba(128, 128, 128, 0.5)",
+        strokeWidth: 0.03
+      });
+    } else {
+      graphics.rects.push({
+        center: { x: centerX, y: centerY },
+        width: width - 0.1,
+        height: height - 0.1,
+        fill
+      });
+    }
   }
   if (!options?.hidePortPoints) {
     for (const port of graph.ports) {
@@ -2590,6 +2601,7 @@ var RegionBuilder = class {
     this.data = {
       id,
       bounds: null,
+      polygon: null,
       center: null,
       width: null,
       height: null,
@@ -2606,6 +2618,35 @@ var RegionBuilder = class {
   // Geometry methods
   rect(b) {
     this.data.bounds = { ...b };
+    this.data.polygon = null;
+    this.data.center = null;
+    this.data.width = null;
+    this.data.height = null;
+    return this;
+  }
+  polygon(points) {
+    if (points.length < 3) {
+      throw new TopologyError(
+        `Region "${this.data.id}" has invalid polygon: at least 3 points required`,
+        {
+          regionIds: [this.data.id],
+          suggestion: "Provide at least three polygon vertices"
+        }
+      );
+    }
+    for (const point of points) {
+      if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+        throw new TopologyError(
+          `Region "${this.data.id}" has invalid polygon point`,
+          {
+            regionIds: [this.data.id],
+            suggestion: "Use finite numeric x/y values"
+          }
+        );
+      }
+    }
+    this.data.polygon = points.map((p) => ({ x: p.x, y: p.y }));
+    this.data.bounds = null;
     this.data.center = null;
     this.data.width = null;
     this.data.height = null;
@@ -2614,6 +2655,7 @@ var RegionBuilder = class {
   center(x, y) {
     this.data.center = { x, y };
     this.data.bounds = null;
+    this.data.polygon = null;
     return this;
   }
   size(w, h, anchor = "center") {
@@ -2630,6 +2672,7 @@ var RegionBuilder = class {
     this.data.height = h;
     this.data.anchor = anchor;
     this.data.bounds = null;
+    this.data.polygon = null;
     return this;
   }
   // Semantic methods
@@ -2665,6 +2708,20 @@ function computeBoundsFromRegionData(data) {
   if (data.bounds) {
     return data.bounds;
   }
+  if (data.polygon && data.polygon.length > 0) {
+    let minX = data.polygon[0].x;
+    let maxX = data.polygon[0].x;
+    let minY = data.polygon[0].y;
+    let maxY = data.polygon[0].y;
+    for (let i = 1; i < data.polygon.length; i++) {
+      const point = data.polygon[i];
+      minX = Math.min(minX, point.x);
+      maxX = Math.max(maxX, point.x);
+      minY = Math.min(minY, point.y);
+      maxY = Math.max(maxY, point.y);
+    }
+    return { minX, maxX, minY, maxY };
+  }
   if (data.center && data.width !== null && data.height !== null) {
     const halfW = data.width / 2;
     const halfH = data.height / 2;
@@ -3277,6 +3334,7 @@ ${errors.map((e) => `  - ${e}`).join("\n")}`
           bounds,
           center,
           isPad: data.isPad,
+          ...data.polygon && { polygon: data.polygon },
           ...data.isThroughJumper && { isThroughJumper: true },
           ...data.isConnectionRegion && { isConnectionRegion: true },
           ...data.meta

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tscircuit/hypergraph",
   "main": "dist/index.js",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "start": "cosmos",
@@ -19,7 +19,7 @@
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.15",
-    "graphics-debug": "^0.0.76",
+    "graphics-debug": "^0.0.83",
     "react-cosmos": "^7.1.0",
     "react-cosmos-plugin-vite": "^7.1.0",
     "transformation-matrix": "^3.1.0",