@tscircuit/schematic-viewer 1.2.8 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -58,7 +58,7 @@
     "zustand": "^4.0.0"
   },
   "dependencies": {
-    "@tscircuit/soup": "^0.0.7",
+    "@tscircuit/soup": "^0.0.16",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",

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,16 +34,10 @@ 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 */
+  /** @deprecated use soup */
   elements?: any
 
   soup?: any
@@ -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/lib/utils/collect-element-refs.ts

@@ -1,6 +1,9 @@
-import { AnyElement, SourcePort } from "@tscircuit/builder"
+import { AnySoupElement, SourcePort } from "@tscircuit/soup"
 
-export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
+export const collectElementRefs = (
+  elm: AnySoupElement,
+  allElms: AnySoupElement[]
+) => {
   const source_port = allElms.find(
     (e) =>
       e.type === "source_port" &&

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/SchematicElement.tsx

@@ -1,4 +1,4 @@
-import { AnyElement } from "@tscircuit/builder"
+import { AnySoupElement } from "@tscircuit/soup"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicComponent from "./SchematicComponent"
 import SchematicPort from "./SchematicPort"
@@ -8,6 +8,7 @@ import SchematicTrace from "./SchematicTrace"
 import SchematicLine from "./SchematicLine"
 import RenderError from "./RenderError"
 import SchematicPath from "./SchematicPath"
+import { SchematicNetLabel } from "./SchematicNetLabel"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -16,8 +17,8 @@ export const SchematicElement = ({
   element,
   allElements,
 }: {
-  element: AnyElement
-  allElements: AnyElement[]
+  element: AnySoupElement
+  allElements: AnySoupElement[]
 }) => {
   // A lot of the split logic for element types into a project is here:
   // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13
@@ -63,6 +64,10 @@ export const SchematicElement = ({
     return <SchematicText schematic_text={element} />
   }
 
+  if (element.type === "schematic_net_label") {
+    return <SchematicNetLabel net_label={element} />
+  }
+
   if (element.type === "source_error") {
     // TODO use the ids on the source error to put this in the right place
     return <RenderError text={element.message} />

package/src/schematic-components/SchematicNetLabel.tsx

@@ -0,0 +1,47 @@
+import type { SchematicNetLabel as SchematicNetLabelObject } from "@tscircuit/soup"
+import SVGPathComponent from "./SVGPathComponent"
+import SchematicText from "./SchematicText"
+
+export const SchematicNetLabel = ({
+  net_label,
+}: {
+  net_label: SchematicNetLabelObject
+}) => {
+  console.log({ net_label })
+  const text_width = net_label.text.length * 0.15
+  // TODO add text
+  const path_width = 31 + net_label.text.length * 5
+  return (
+    <>
+      <SVGPathComponent
+        rotation={0}
+        center={net_label.center}
+        // fixed size?
+        size={{
+          width: 0.05 + text_width,
+          height: 0.175,
+        }}
+        paths={[
+          {
+            stroke: "gray",
+            strokeWidth: 0.75,
+            d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`,
+          },
+        ]}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "left",
+          position: {
+            x: net_label.center.x - text_width / 4 + 0.025,
+            y: net_label.center.y,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: net_label.text,
+          type: "schematic_text",
+        }}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,190 @@
+import { Schematic } from "../../Schematic"
+
+export const SchematicNetLabel = () => {
+  return (
+    <Schematic
+      style={{ height: 500 }}
+      soup={
+        {
+          elements: [
+            {
+              type: "source_component",
+              source_component_id: "simple_resistor_0",
+              name: "R1",
+              supplier_part_numbers: {},
+              ftype: "simple_resistor",
+              resistance: 100,
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "schematic_component",
+              source_component_id: "simple_resistor_0",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              rotation: 0,
+              size: {
+                width: 1,
+                height: 0.3,
+              },
+              center: {
+                x: 0,
+                y: 0,
+              },
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "source_port",
+              name: "left",
+              source_port_id: "source_port_0",
+              source_component_id: "simple_resistor_0",
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "schematic_port",
+              schematic_port_id: "schematic_port_0",
+              source_port_id: "source_port_0",
+              center: {
+                x: -0.5,
+                y: 0,
+              },
+              facing_direction: "left",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              source: {
+                type: "source_port",
+                name: "left",
+                source_port_id: "source_port_0",
+                source_component_id: "simple_resistor_0",
+              },
+            },
+            {
+              type: "source_port",
+              name: "right",
+              source_port_id: "source_port_1",
+              source_component_id: "simple_resistor_0",
+              source: {
+                type: "source_component",
+                source_component_id: "simple_resistor_0",
+                name: "R1",
+                supplier_part_numbers: {},
+                ftype: "simple_resistor",
+                resistance: 100,
+              },
+            },
+            {
+              type: "schematic_port",
+              schematic_port_id: "schematic_port_1",
+              source_port_id: "source_port_1",
+              center: {
+                x: 0.5,
+                y: 0,
+              },
+              facing_direction: "right",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              source: {
+                type: "source_port",
+                name: "right",
+                source_port_id: "source_port_1",
+                source_component_id: "simple_resistor_0",
+              },
+            },
+            {
+              type: "schematic_text",
+              text: "R1",
+              schematic_text_id: "schematic_text_0",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              anchor: "left",
+              position: {
+                x: -0.2,
+                y: -0.5,
+              },
+              rotation: 0,
+              source: null,
+            },
+            {
+              type: "schematic_text",
+              text: 100,
+              schematic_text_id: "schematic_text_1",
+              schematic_component_id: "schematic_component_simple_resistor_0",
+              anchor: "left",
+              position: {
+                x: -0.2,
+                y: -0.3,
+              },
+              rotation: 0,
+              source: null,
+            },
+            {
+              type: "source_net",
+              member_source_group_ids: [],
+              source_net_id: "net_0",
+              name: "N1",
+              source: null,
+            },
+            {
+              type: "source_trace",
+              connected_source_port_ids: ["source_port_1"],
+              connected_source_net_ids: ["net_0"],
+              source_trace_id: "source_trace_0",
+              source: null,
+            },
+            {
+              type: "schematic_net_label",
+              source_net_id: "net_0",
+              text: "N1",
+              anchor_side: "left",
+              center: {
+                x: 1.5,
+                y: 0,
+              },
+              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
+      }
+    />
+  )
+}
+
+export default {
+  title: "Basics/SchematicNetLabel",
+  component: SchematicNetLabel,
+}

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,
+}