@tscircuit/schematic-viewer 1.0.12 → 1.0.14

package/dist/index.js

@@ -1276,6 +1276,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/Schematic.tsx
 var import_react4 = require("react");
+var import_react_supergrid = require("react-supergrid");
 var import_builder3 = require("@tscircuit/builder");
 var import_react_fiber = require("@tscircuit/react-fiber");
 
@@ -1284,10 +1285,18 @@ var collectElementRefs = (elm, allElms) => {
   const source_component = allElms.find(
     (e) => e.type === "source_component" && e.source_component_id === elm.source_component_id
   );
-  if (["schematic_component", "schematic_trace", "schematic_port"].includes(
-    elm.type
-  )) {
+  if ([
+    "schematic_component",
+    "schematic_trace",
+    "schematic_port",
+    "schematic_box",
+    "schematic_line"
+  ].includes(elm.type)) {
+    const schematic_children = allElms.filter(
+      (e) => "schematic_component_id" in e && e.schematic_component_id === elm.schematic_component_id
+    );
     return {
+      schematic_children,
       schematic: elm,
       source: source_component
     };
@@ -2103,29 +2112,82 @@ var SchematicComponent = ({ component }) => {
 };
 var SchematicComponent_default = SchematicComponent;
 
-// src/schematic-components/SchematicElement.tsx
+// src/schematic-components/SchematicBox.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var SchematicBox = ({ box: { schematic } }) => {
+  const { width: w, height: h } = schematic;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SVGPathComponent, {
+    rotation: 0,
+    center: schematic,
+    size: { width: schematic.width, height: schematic.height },
+    paths: [
+      {
+        stroke: "red",
+        strokeWidth: 0.2,
+        d: `M 0 0 l ${w} 0 l 0 ${h} l -${w} 0 z`
+      }
+    ]
+  });
+};
+var SchematicBox_default = SchematicBox;
+
+// src/schematic-components/SchematicLine.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SchematicLine = ({ line: { schematic } }) => {
+  const { x1, x2, y1, y2 } = schematic;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const width = Math.abs(dx) + 0.1;
+  const height = Math.abs(dy) + 0.1;
+  const center = { x: x1 + dx / 2, y: y1 + dy / 2 };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SVGPathComponent, {
+    rotation: 0,
+    center,
+    size: { width, height },
+    paths: [
+      {
+        stroke: "red",
+        strokeWidth: 10,
+        d: `M 0 0 l ${dx * 100} ${dy * 100}`
+      }
+    ]
+  });
+};
+var SchematicLine_default = SchematicLine;
+
+// src/schematic-components/SchematicElement.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicComponent_default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicComponent_default, {
       component: collectElementRefs(element, allElements)
     });
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicTrace_default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicTrace_default, {
       trace: collectElementRefs(element, allElements)
     });
   }
   if (element.type === "schematic_port") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicPort_default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicPort_default, {
       port: collectElementRefs(element, allElements)
     });
   }
+  if (element.type === "schematic_box") {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicBox_default, {
+      box: collectElementRefs(element, allElements)
+    });
+  }
+  if (element.type === "schematic_line") {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicLine_default, {
+      line: collectElementRefs(element, allElements)
+    });
+  }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicText_default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SchematicText_default, {
       schematic_text: element
     });
   }
@@ -2135,9 +2197,9 @@ var SchematicElement = ({
 // src/Schematic.tsx
 var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
 var import_react_error_boundary = require("react-error-boundary");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", {
     style: { color: "red" },
     children: [
       "error rendering ",
@@ -2147,6 +2209,7 @@ var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
     ]
   });
 };
+var toMMSINeg = (v, z) => v >= 0 ? (0, import_react_supergrid.toMMSI)(v, z) : `-${(0, import_react_supergrid.toMMSI)(-v, z)}`;
 var Schematic = ({
   children,
   elements: initialElements,
@@ -2157,6 +2220,8 @@ var Schematic = ({
   const [elements, setElements] = (0, import_react4.useState)(initialSoup ?? []);
   const [project, setProject] = (0, import_react4.useState)(null);
   const setCameraTransform = useRenderContext((s) => s.setCameraTransform);
+  const cameraTransform = useRenderContext((s) => s.camera_transform);
+  const [boundsRef, bounds] = useMeasure();
   const { ref, setTransform } = (0, import_use_mouse_matrix_transform.useMouseMatrixTransform)({
     onSetTransform: (transform2) => {
       setCameraTransform(transform2);
@@ -2191,7 +2256,7 @@ var Schematic = ({
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", {
     style: {
       width: "100%",
       backgroundColor: "rgba(255,255,255,0)",
@@ -2201,14 +2266,29 @@ var Schematic = ({
       cursor: "grab",
       ...style
     },
-    ref,
-    children: elements == null ? void 0 : elements.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_error_boundary.ErrorBoundary, {
-      fallbackRender: fallbackRender(elm),
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SchematicElement, {
-        element: elm,
-        allElements: elements
-      }, JSON.stringify(elm))
-    }, i))
+    ref: (el) => {
+      ref.current = el;
+      boundsRef(el);
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_supergrid.SuperGrid, {
+        stringifyCoord: (x, y, z) => {
+          if (z === 0)
+            return "";
+          return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`;
+        },
+        width: bounds.width,
+        height: bounds.height,
+        transform: cameraTransform
+      }),
+      elements == null ? void 0 : elements.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_error_boundary.ErrorBoundary, {
+        fallbackRender: fallbackRender(elm),
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicElement, {
+          element: elm,
+          allElements: elements
+        }, JSON.stringify(elm))
+      }, i))
+    ]
   });
 };
 // Annotate the CommonJS export names for ESM import in node: