@tscircuit/schematic-viewer 2.0.2 → 2.0.3

package/.github/workflows/bun-pver-release.yml

@@ -19,6 +19,7 @@ jobs:
           registry-url: https://registry.npmjs.org/
       - run: npm install -g pver
       - run: bun install --frozen-lockfile
+      - run: bun run build
       - run: pver release
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    circuitJson: Array<{
+        type: string;
+    }>;
+    containerStyle?: React.CSSProperties;
+}
+declare const SchematicViewer: ({ circuitJson, containerStyle }: Props) => react_jsx_runtime.JSX.Element;
+
+export { SchematicViewer };

package/dist/index.js

@@ -0,0 +1,68 @@
+// lib/components/SchematicViewer.tsx
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
+import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toString as transformToString } from "transformation-matrix";
+import { jsx } from "react/jsx-runtime";
+var SchematicViewer = ({ circuitJson, containerStyle }) => {
+  const svgDivRef = useRef(null);
+  const { ref: containerRef } = useMouseMatrixTransform({
+    onSetTransform(transform) {
+      if (!svgDivRef.current) return;
+      svgDivRef.current.style.transform = transformToString(transform);
+    }
+  });
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const updateDimensions = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      setContainerWidth(rect?.width || 0);
+      setContainerHeight(rect?.height || 0);
+    };
+    updateDimensions();
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(containerRef.current);
+    window.addEventListener("resize", updateDimensions);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateDimensions);
+    };
+  }, []);
+  const svg = useMemo(() => {
+    if (!containerWidth || !containerHeight) return "";
+    return convertCircuitJsonToSchematicSvg(circuitJson, {
+      width: containerWidth,
+      height: containerHeight || 720
+    });
+  }, [circuitJson, containerWidth, containerHeight]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        backgroundColor: "#F5F1ED",
+        overflow: "hidden",
+        cursor: "grab",
+        minHeight: "300px",
+        ...containerStyle
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: svgDivRef,
+          style: {
+            pointerEvents: "auto",
+            transformOrigin: "0 0"
+          },
+          dangerouslySetInnerHTML: { __html: svg }
+        }
+      )
+    }
+  );
+};
+export {
+  SchematicViewer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/components/SchematicViewer.tsx"],"sourcesContent":["import { useMouseMatrixTransform } from \"use-mouse-matrix-transform\"\nimport { convertCircuitJsonToSchematicSvg } from \"circuit-to-svg\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { toString as transformToString } from \"transformation-matrix\"\n\ninterface Props {\n  circuitJson: Array<{ type: string }>\n  containerStyle?: React.CSSProperties\n}\n\nexport const SchematicViewer = ({ circuitJson, containerStyle }: Props) => {\n  const svgDivRef = useRef<HTMLDivElement>(null)\n  const { ref: containerRef } = useMouseMatrixTransform({\n    onSetTransform(transform) {\n      if (!svgDivRef.current) return\n      svgDivRef.current.style.transform = transformToString(transform)\n    },\n  })\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [containerHeight, setContainerHeight] = useState(0)\n\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const updateDimensions = () => {\n      const rect = containerRef.current?.getBoundingClientRect()\n\n      setContainerWidth(rect?.width || 0)\n      setContainerHeight(rect?.height || 0)\n    }\n\n    // Set initial dimensions\n    updateDimensions()\n\n    // Add resize listener\n    const resizeObserver = new ResizeObserver(updateDimensions)\n    resizeObserver.observe(containerRef.current)\n\n    // Fallback to window resize\n    window.addEventListener(\"resize\", updateDimensions)\n\n    return () => {\n      resizeObserver.disconnect()\n      window.removeEventListener(\"resize\", updateDimensions)\n    }\n  }, [])\n\n  const svg = useMemo(() => {\n    if (!containerWidth || !containerHeight) return \"\"\n\n    return convertCircuitJsonToSchematicSvg(circuitJson as any, {\n      width: containerWidth,\n      height: containerHeight || 720,\n    })\n  }, [circuitJson, containerWidth, containerHeight])\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        backgroundColor: \"#F5F1ED\",\n        overflow: \"hidden\",\n        cursor: \"grab\",\n        minHeight: \"300px\",\n        ...containerStyle,\n      }}\n    >\n      <div\n        ref={svgDivRef}\n        style={{\n          pointerEvents: \"auto\",\n          transformOrigin: \"0 0\",\n        }}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>\n        dangerouslySetInnerHTML={{ __html: svg }}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,+BAA+B;AACxC,SAAS,wCAAwC;AACjD,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD,SAAS,YAAY,yBAAyB;AAgExC;AAzDC,IAAM,kBAAkB,CAAC,EAAE,aAAa,eAAe,MAAa;AACzE,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,EAAE,KAAK,aAAa,IAAI,wBAAwB;AAAA,IACpD,eAAe,WAAW;AACxB,UAAI,CAAC,UAAU,QAAS;AACxB,gBAAU,QAAQ,MAAM,YAAY,kBAAkB,SAAS;AAAA,IACjE;AAAA,EACF,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,CAAC;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAS;AAE3B,UAAM,mBAAmB,MAAM;AAC7B,YAAM,OAAO,aAAa,SAAS,sBAAsB;AAEzD,wBAAkB,MAAM,SAAS,CAAC;AAClC,yBAAmB,MAAM,UAAU,CAAC;AAAA,IACtC;AAGA,qBAAiB;AAGjB,UAAM,iBAAiB,IAAI,eAAe,gBAAgB;AAC1D,mBAAe,QAAQ,aAAa,OAAO;AAG3C,WAAO,iBAAiB,UAAU,gBAAgB;AAElD,WAAO,MAAM;AACX,qBAAe,WAAW;AAC1B,aAAO,oBAAoB,UAAU,gBAAgB;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,QAAQ,MAAM;AACxB,QAAI,CAAC,kBAAkB,CAAC,gBAAiB,QAAO;AAEhD,WAAO,iCAAiC,aAAoB;AAAA,MAC1D,OAAO;AAAA,MACP,QAAQ,mBAAmB;AAAA,IAC7B,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,gBAAgB,eAAe,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,GAAG;AAAA,MACL;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,eAAe;AAAA,YACf,iBAAiB;AAAA,UACnB;AAAA,UAEA,yBAAyB,EAAE,QAAQ,IAAI;AAAA;AAAA,MACzC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {