@tscircuit/schematic-viewer 1.0.11 → 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
     };
@@ -1590,9 +1598,6 @@ var SVGPathComponent = ({ size, center, rotation, paths }) => {
   const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
   const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
   if (badRatio) {
-    console.warn(
-      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
-    );
   }
   pathBounds.height = Math.max(pathBounds.height, 1);
   pathBounds.width = Math.max(pathBounds.width, 1);
@@ -1943,14 +1948,18 @@ var import_range = __toESM(require_range());
 var import_builder2 = require("@tscircuit/builder");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
-  const ports_arrangement = {
+  const port_arrangement = {
     top_size: 0,
     bottom_size: 0,
     ...schematic.port_arrangement
   };
-  const bugw = schematic.size.width;
-  const bugh = schematic.size.height;
-  const { total_ports } = (0, import_builder2.getPortArrangementSize)(ports_arrangement);
+  let bugw = schematic.size.width;
+  let bugh = schematic.size.height;
+  const { total_ports, width, height } = (0, import_builder2.getPortArrangementSize)(port_arrangement);
+  if (isNaN(bugw))
+    bugw = width;
+  if (isNaN(bugh))
+    bugh = height;
   const paths = [
     {
       stroke: "red",
@@ -1958,7 +1967,7 @@ var SchematicBug = ({ component: { source, schematic } }) => {
       d: `M ${-bugw / 2} ${-bugh / 2} L ${bugw / 2} ${-bugh / 2} L ${bugw / 2} ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`
     },
     ...(0, import_range.default)(1, total_ports + 1).map((portNum) => {
-      const pos = (0, import_builder2.getPortPosition)(ports_arrangement, portNum);
+      const pos = (0, import_builder2.getPortPosition)(port_arrangement, portNum);
       const x2 = pos.side === "left" ? -bugw / 2 : pos.side === "right" ? bugw / 2 : pos.x;
       const y2 = pos.side === "top" ? -bugh / 2 : pos.side === "bottom" ? bugh / 2 : pos.y;
       return {
@@ -2102,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
     });
   }
@@ -2134,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 ",
@@ -2167,7 +2229,6 @@ var Schematic = ({
       const { center, width, height } = (0, import_builder3.findBoundsAndCenter)(elements2);
       setElements(elements2);
       setProject((0, import_builder3.createProjectFromElements)(elements2));
-      console.log(elmBounds.width);
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
@@ -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))