@tscircuit/schematic-viewer 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",

package/src/Schematic.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react"
-import { ProjectComponent } from "schematic-components"
+import { ContextProviders, ProjectComponent } from "schematic-components"
 import { SuperGrid, toMMSI } from "react-supergrid"
 import {
   AnyElement,
@@ -15,7 +15,7 @@ import { collectElementRefs } from "lib/utils/collect-element-refs"
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
 import { identity, compose, scale, translate } from "transformation-matrix"
-import { useRenderContext } from "lib/render-context"
+import { useGlobalStore } from "lib/render-context"
 import useMeasure from "react-use-measure"
 import { TableViewer } from "./schematic-components/TableViewer"
 
@@ -34,13 +34,7 @@ const fallbackRender: any =
 const toMMSINeg = (v: number, z: number) =>
   v >= 0 ? toMMSI(v, z) : `-${toMMSI(-v, z)}`
 
-export const Schematic = ({
-  children,
-  elements: initialElements,
-  soup: initialSoup,
-  style,
-  showTable = false,
-}: {
+export interface SchematicProps {
   children?: any
 
   /** @deprecated use soup */
@@ -51,13 +45,29 @@ export const Schematic = ({
   style?: any
 
   showTable?: boolean
-}) => {
+}
+
+export const Schematic = (props: SchematicProps) => {
+  return (
+    <ContextProviders>
+      <SchematicWithoutContext {...props} />
+    </ContextProviders>
+  )
+}
+
+export const SchematicWithoutContext = ({
+  children,
+  elements: initialElements,
+  soup: initialSoup,
+  style,
+  showTable = false,
+}: SchematicProps) => {
   initialSoup = initialSoup ?? initialElements ?? []
 
   const [elements, setElements] = useState<any>(initialSoup ?? [])
   const [project, setProject] = useState<any>(null)
-  const setCameraTransform = useRenderContext((s) => s.setCameraTransform)
-  const cameraTransform = useRenderContext((s) => s.camera_transform)
+  const { setCameraTransform, camera_transform: cameraTransform } =
+    useGlobalStore()
   const [boundsRef, bounds] = useMeasure()
   const { ref, setTransform } = useMouseMatrixTransform({
     onSetTransform: (transform) => {
@@ -82,13 +92,11 @@ export const Schematic = ({
         (elmBounds.height ?? 0) / height,
         100
       )
-      // console.log(elements)
       setElements(elements)
       setProject(createProjectFromElements(elements))
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-          // translate(100, 0),
           scale(scaleFactor, -scaleFactor, 0, 0),
           translate(-center.x, -center.y)
         )

package/src/lib/render-context/index.ts

@@ -1,16 +1,28 @@
-import createStore from "zustand"
+import {
+  createStore as createZustandStore,
+  useStore as useZustandStore,
+  UseBoundStore,
+} from "zustand"
 import { Matrix, compose, scale } from "transformation-matrix"
+import { useContext } from "react"
+import { StoreContext } from "schematic-components/"
 
 interface RenderContextState {
   camera_transform: Matrix
   setCameraTransform: (transform: Matrix) => void
 }
 
-export const useRenderContext = createStore<RenderContextState>((set, get) => ({
-  camera_transform: compose(scale(100, 100, 0, 0)),
-  setCameraTransform: (transform: Matrix) =>
-    set({ camera_transform: transform }),
-}))
+export const createRenderContextStore = () =>
+  createZustandStore<RenderContextState>((set) => ({
+    camera_transform: compose(scale(100, 100, 0, 0)),
+    setCameraTransform: (transform: Matrix) =>
+      set({ camera_transform: transform }),
+  }))
 
-export const useCameraTransform = () =>
-  useRenderContext((s) => s.camera_transform)
+export const useGlobalStore = <T = RenderContextState>(
+  s?: (state: RenderContextState) => T
+): T => {
+  const store = useContext(StoreContext)
+
+  return useZustandStore(store as any, s as any)
+}

package/src/schematic-components/ContextProviders.tsx

@@ -0,0 +1,15 @@
+import { createRenderContextStore } from "lib/render-context"
+import { useMemo } from "react"
+import { createContext } from "react"
+
+export const StoreContext = createContext(null)
+
+export const ContextProviders = ({ children }: { children?: any }) => {
+  const store = useMemo(() => createRenderContextStore(), [])
+
+  return (
+    <StoreContext.Provider value={store as any}>
+      {children}
+    </StoreContext.Provider>
+  )
+}

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,4 +1,4 @@
-import { useCameraTransform } from "lib/render-context"
+import { useGlobalStore } from "lib/render-context"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 import { useCallback, useState } from "react"
 
@@ -37,7 +37,7 @@ export const SVGPathComponent = ({
   shiftToBottom,
   hoverContent,
 }: Props) => {
-  const ct = useCameraTransform()
+  const ct = useGlobalStore((s) => s.camera_transform)
   const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
   // Margin in SVG Space
   const badRatio =

package/src/schematic-components/SVGPathComponent2.tsx

@@ -1,4 +1,4 @@
-import { useCameraTransform } from "lib/render-context"
+import { useGlobalStore } from "lib/render-context"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 import { useCallback, useState } from "react"
 
@@ -37,7 +37,7 @@ export const SVGPathComponent2 = ({
   shiftToBottom,
   hoverContent,
 }: Props) => {
-  const ct = useCameraTransform()
+  const ct = useGlobalStore((c) => c.camera_transform)
   const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
   // Margin in SVG Space
 

package/src/schematic-components/SchematicComponent.tsx

@@ -37,9 +37,7 @@ export const SchematicComponent = ({ component }: Props) => {
       return <Component.SchematicBug component={{ source, schematic }} />
     }
     case "simple_diode": {
-      // Replaced by builder
-      return null
-      // return <Component.SimpleDiode component={{ source, schematic }} />
+      return <Component.SimpleDiode component={{ source, schematic }} />
     }
     default: {
       return <div>unknown ftype: {component.source.ftype}</div>

package/src/schematic-components/SchematicText.tsx

@@ -2,7 +2,7 @@ import * as Type from "lib/types"
 import SVGPathComponent from "./SVGPathComponent"
 import Path from "svg-path-generator"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import { useCameraTransform } from "lib/render-context"
+import { useGlobalStore } from "lib/render-context"
 import { applyToPoint } from "transformation-matrix"
 import useMeasure from "react-use-measure"
 
@@ -11,7 +11,7 @@ interface Props {
 }
 
 export const SchematicText = ({ schematic_text }: Props) => {
-  const ct = useCameraTransform()
+  const ct = useGlobalStore((s) => s.camera_transform)
   const { text, position, anchor } = schematic_text
   const tPos = applyToPoint(ct, position)
   const [boundsRef, bounds] = useMeasure()

package/src/schematic-components/index.tsx

@@ -14,3 +14,4 @@ export * from "./SimpleGround"
 export * from "./SimpleInductor"
 export * from "./RenderError"
 export * from "./SimpleDiode"
+export * from "./ContextProviders"

package/src/stories/basics/schematic-net-label.stories.tsx

@@ -137,7 +137,7 @@ export const SchematicNetLabel = () => {
               type: "source_net",
               member_source_group_ids: [],
               source_net_id: "net_0",
-              name: "GND",
+              name: "N1",
               source: null,
             },
             {
@@ -150,7 +150,7 @@ export const SchematicNetLabel = () => {
             {
               type: "schematic_net_label",
               source_net_id: "net_0",
-              text: "GND",
+              text: "N1",
               anchor_side: "left",
               center: {
                 x: 1.5,
@@ -158,6 +158,25 @@ export const SchematicNetLabel = () => {
               },
               source: null,
             },
+            {
+              type: "schematic_trace",
+              schematic_trace_id: "schematic_trace_0",
+              source_trace_id: "source_trace_0",
+              edges: [
+                {
+                  from: {
+                    x: 0.5,
+                    y: 0,
+                  },
+                  to: {
+                    x: 1.5,
+                    y: 0,
+                  },
+                  from_schematic_port_id: "schematic_port_1",
+                },
+              ],
+              source: null,
+            },
           ],
         }.elements
       }

package/src/stories/bugs/bug7-multiple-schematic-panning.stories.tsx

@@ -0,0 +1,23 @@
+import { Schematic } from "../../Schematic"
+
+export const Bug7MultipleSchematicPanning = () => {
+  return (
+    <div>
+      <Schematic style={{ height: 500 }}>
+        <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
+        <resistor resistance="1k" schX={1} schY={2} name="main_power" />
+        <trace path={[".main_power > port.right", ".R1 > port.left"]} />
+      </Schematic>
+      <Schematic style={{ height: 500 }}>
+        <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
+        <resistor resistance="1k" schX={1} schY={2} name="main_power" />
+        <trace path={[".main_power > port.right", ".R1 > port.left"]} />
+      </Schematic>
+    </div>
+  )
+}
+
+export default {
+  title: "Bugs/Bug7MultipleSchematicPanning",
+  component: Bug7MultipleSchematicPanning,
+}

package/src/stories/circuit-components/diode.stories.tsx

@@ -0,0 +1,14 @@
+import { Schematic } from "../../Schematic"
+
+export const Diode = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <diode name="D1" schX={2} schY={1} />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Circuit Components/Diode",
+  component: Diode,
+}

package/src/stories/{resistor.stories.tsx → circuit-components/resistor.stories.tsx}

@@ -1,4 +1,4 @@
-import { Schematic } from "../Schematic"
+import { Schematic } from "../../Schematic"
 
 export const Resistor = () => {
   return (
@@ -9,6 +9,6 @@ export const Resistor = () => {
 }
 
 export default {
-  title: "Resistor",
+  title: "Circuit Components/Resistor",
   component: Resistor,
 }