@tscircuit/schematic-viewer 2.0.0 → 2.0.2

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

@@ -0,0 +1,24 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Publish to npm
+on:
+  push:
+    branches:
+      - main
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install -g pver
+      - run: bun install --frozen-lockfile
+      - run: pver release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/bun-typecheck.yml

@@ -0,0 +1,26 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Type Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  type-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun i
+
+      - name: Run type check
+        run: bunx tsc --noEmit

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 tscircuit Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/examples/resistor-and-capacitor.fixture.tsx

@@ -10,5 +10,6 @@ export default () => (
         <trace from=".R1 .pin2" to=".C1 .pin1" />
       </board>,
     )}
+    containerStyle={{ height: "100%" }}
   />
 )

package/lib/components/SchematicViewer.tsx

@@ -5,9 +5,10 @@ import { toString as transformToString } from "transformation-matrix"
 
 interface Props {
   circuitJson: Array<{ type: string }>
+  containerStyle?: React.CSSProperties
 }
 
-export const SchematicViewer = ({ circuitJson }: Props) => {
+export const SchematicViewer = ({ circuitJson, containerStyle }: Props) => {
   const svgDivRef = useRef<HTMLDivElement>(null)
   const { ref: containerRef } = useMouseMatrixTransform({
     onSetTransform(transform) {
@@ -61,7 +62,7 @@ export const SchematicViewer = ({ circuitJson }: Props) => {
         overflow: "hidden",
         cursor: "grab",
         minHeight: "300px",
-        height: "100%",
+        ...containerStyle,
       }}
     >
       <div

package/lib/dev/render-to-circuit-json.ts

@@ -1,5 +1,4 @@
 import * as Core from "@tscircuit/core"
-console.log(Core)
 
 export const renderToCircuitJson = (board: React.ReactElement) => {
   const circuit = new Core.Circuit()

package/package.json

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

package/src/main.tsx

@@ -14,6 +14,7 @@ root.render(
             <resistor name="R1" resistance={1000} />
           </board>,
         )}
+        containerStyle={{ height: "100%" }}
       />
     </div>
   </React.StrictMode>,

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,68 +0,0 @@
-// 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 }) => {
-  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",
-        height: "100%"
-      },
-      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

@@ -1 +0,0 @@
-{"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}\n\nexport const SchematicViewer = ({ circuitJson }: 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        height: \"100%\",\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;AA+DxC;AAzDC,IAAM,kBAAkB,CAAC,EAAE,YAAY,MAAa;AACzD,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,QAAQ;AAAA,MACV;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":[]}