@tscircuit/schematic-viewer 1.0.12 → 1.0.13

package/dist/index.js

@@ -1284,10 +1284,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 +2111,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 +2196,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 ",
@@ -2191,7 +2252,7 @@ var Schematic = ({
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
     style: {
       width: "100%",
       backgroundColor: "rgba(255,255,255,0)",
@@ -2202,9 +2263,9 @@ var Schematic = ({
       ...style
     },
     ref,
-    children: elements == null ? void 0 : elements.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_error_boundary.ErrorBoundary, {
+    children: 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_runtime16.jsx)(SchematicElement, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SchematicElement, {
         element: elm,
         allElements: elements
       }, JSON.stringify(elm))