@tscircuit/schematic-viewer 1.3.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": {
@@ -9,6 +9,7 @@
   },
   "scripts": {
     "start": "storybook dev -p 6006",
+    "format": "biome format . --write",
     "typecheck": "tsc --noEmit",
     "build": "tsup",
     "yalc": "npm run build && yalc push",
@@ -17,13 +18,12 @@
     "chromatic": "npx chromatic --project-token=chpt_d88a6beb0734bbe"
   },
   "peerDependencies": {
-    "@tscircuit/builder": "*",
-    "@tscircuit/react-fiber": "*",
     "@tscircuit/table-viewer": "*",
     "react": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
+    "@biomejs/biome": "^1.8.3",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@semantic-release/changelog": "^6.0.3",
@@ -35,8 +35,6 @@
     "@storybook/nextjs": "^8.1.3",
     "@storybook/react": "^8.1.3",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.5.126",
-    "@tscircuit/react-fiber": "^1.1.29",
     "@tscircuit/routing": "^1.3.0",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
@@ -44,7 +42,7 @@
     "@vitejs/plugin-react": "^4.3.0",
     "ava": "^4.3.1",
     "chromatic": "^11.5.5",
-    "circuit-json": "^0.0.82",
+    "circuit-json": "^0.0.92",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "next": "^14.2.3",
@@ -67,12 +65,15 @@
   },
   "dependencies": {
     "@storybook/react-vite": "^8.1.3",
+    "@tscircuit/core": "^0.0.132",
     "@tscircuit/layout": "^0.0.25",
     "@tscircuit/props": "^0.0.23",
-    "@tscircuit/soup-util": "^0.0.13",
+    "@tscircuit/soup-util": "^0.0.38",
+    "circuit-to-svg": "^0.0.54",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",
+    "schematic-symbols": "^0.0.78",
     "use-mouse-matrix-transform": "^1.1.12"
   },
   "bugs": {

package/src/Schematic.tsx

@@ -1,20 +1,21 @@
-import {
-  AnyElement,
-  createProjectBuilder,
-  createProjectFromElements,
-  findBoundsAndCenter,
-} from "@tscircuit/builder"
-import TscReactFiber, { createRoot } from "@tscircuit/react-fiber"
-import { AnyCircuitElement } from "circuit-json"
+import { useRenderedCircuit } from "@tscircuit/core"
+import { findBoundsAndCenter } from "@tscircuit/soup-util"
+import type { AnyCircuitElement } from "circuit-json"
 import { useGlobalStore } from "lib/render-context"
-import { useCallback, useEffect, useState } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
 import { SuperGrid, toMMSI } from "react-supergrid"
 import useMeasure from "react-use-measure"
 import { ContextProviders } from "schematic-components"
 import { SchematicElement } from "schematic-components/SchematicElement"
-import { compose, scale, translate } from "transformation-matrix"
-import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import {
+  applyToPoint,
+  compose,
+  inverse,
+  Matrix,
+  scale,
+  translate,
+} from "transformation-matrix"
 import { TableViewer } from "./schematic-components/TableViewer"
 
 const ErrorBoundary = TypedErrorBoundary as any
@@ -34,16 +35,9 @@ const toMMSINeg = (v: number, z: number) =>
 
 export interface SchematicProps {
   children?: any
-
-  /** @deprecated use soup */
-  elements?: any
-
   soup?: AnyCircuitElement[]
-
-  style?: any
-
+  style?: React.CSSProperties
   showTable?: boolean
-
   _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[]
 }
 
@@ -57,28 +51,54 @@ export const Schematic = (props: SchematicProps) => {
 
 export const SchematicWithoutContext = ({
   children,
-  elements: initialElements,
-  soup: initialSoup,
+  soup,
   style,
   showTable = false,
   _soupPostProcessor,
 }: SchematicProps) => {
-  initialSoup = initialSoup ?? initialElements ?? []
-
-  const [elements, setElements] = useState<any>(initialSoup ?? [])
-  const [project, setProject] = useState<any>(null)
-  const { setCameraTransform, camera_transform: cameraTransform } =
-    useGlobalStore()
+  const {
+    circuitJson: circuitJsonFromChildren,
+    error: errorFromChildren,
+    isLoading,
+  } = useRenderedCircuit(children)
+
+  const [elements, setElements] = useState<AnyCircuitElement[]>([])
+  const { setCameraTransform } = useGlobalStore()
   const [boundsRef, bounds] = useMeasure()
-  const { ref, setTransform } = useMouseMatrixTransform({
-    onSetTransform: (transform) => {
-      setCameraTransform(transform)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const transformRef = useRef<Matrix>(compose(translate(0, 0), scale(1, 1)))
+  const isDraggingRef = useRef(false)
+  const lastMousePosRef = useRef({ x: 0, y: 0 })
+  const [, forceUpdate] = useState({})
+
+  const updateTransform = useCallback(
+    (newTransform: Matrix) => {
+      transformRef.current = newTransform
+      setCameraTransform(newTransform)
+      forceUpdate({})
     },
-    // initialTransform: compose(scale(100, 100, 0, 0)),
-  })
-  const setElementsAndCamera = useCallback(
-    (elements: Array<AnyElement>) => {
-      const elmBounds = (ref.current as HTMLDivElement).getBoundingClientRect()
+    [setCameraTransform],
+  )
+
+  useEffect(() => {
+    let processedElements: AnyCircuitElement[] = []
+    if (circuitJsonFromChildren && (!soup || soup.length === 0)) {
+      processedElements = circuitJsonFromChildren as AnyCircuitElement[]
+    } else if (soup && soup.length > 0) {
+      processedElements = soup
+    }
+
+    if (processedElements.length > 0) {
+      if (_soupPostProcessor) {
+        processedElements = _soupPostProcessor(processedElements)
+      }
+      setElements(processedElements)
+    }
+  }, [circuitJsonFromChildren, soup, _soupPostProcessor])
+
+  useEffect(() => {
+    if (elements.length > 0 && containerRef.current) {
+      const elmBounds = containerRef.current.getBoundingClientRect()
 
       const { center, width, height } = elements.some((e) =>
         e.type.startsWith("schematic_"),
@@ -93,38 +113,88 @@ export const SchematicWithoutContext = ({
         (elmBounds.height ?? 0) / height,
         100,
       )
-      setElements(elements)
-      setProject(createProjectFromElements(elements))
-      setTransform(
-        compose(
-          translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-          scale(scaleFactor, -scaleFactor, 0, 0),
-          translate(-center.x, -center.y),
-        ),
+
+      const newTransform = compose(
+        translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+        scale(scaleFactor, -scaleFactor, 0, 0),
+        translate(-center.x, -center.y),
       )
+
+      updateTransform(newTransform)
+    }
+  }, [elements, bounds.width, bounds.height, updateTransform])
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    isDraggingRef.current = true
+    lastMousePosRef.current = { x: e.clientX, y: e.clientY }
+  }, [])
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDraggingRef.current) return
+
+      const dx = e.clientX - lastMousePosRef.current.x
+      const dy = e.clientY - lastMousePosRef.current.y
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY }
+
+      const scale = transformRef.current.a // Assuming uniform scaling
+      const dragSensitivity = 150 / scale // Adjust this value to change drag speed
+
+      const newTransform = compose(
+        translate(dx * dragSensitivity, dy * dragSensitivity),
+        transformRef.current,
+      )
+      updateTransform(newTransform)
     },
-    [setElements, setTransform],
+    [updateTransform],
+  )
+
+  const handleMouseUp = useCallback(() => {
+    isDraggingRef.current = false
+  }, [])
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault()
+      const scaleMultiplier = Math.pow(0.999, e.deltaY)
+
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect()
+        const mouseX = e.clientX - rect.left
+        const mouseY = e.clientY - rect.top
+
+        const inverseTransform = inverse(transformRef.current)
+        const transformedPoint = applyToPoint(inverseTransform, {
+          x: mouseX,
+          y: mouseY,
+        })
+
+        const newTransform = compose(
+          transformRef.current,
+          translate(transformedPoint.x, transformedPoint.y),
+          scale(scaleMultiplier, scaleMultiplier),
+          translate(-transformedPoint.x, -transformedPoint.y),
+        )
+
+        updateTransform(newTransform)
+      }
+    },
+    [updateTransform],
   )
 
   useEffect(() => {
-    if (initialSoup.length > 0) {
-      setElementsAndCamera(initialSoup as any)
-      return
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener("wheel", handleWheel, { passive: false })
+      return () => {
+        container.removeEventListener("wheel", handleWheel)
+      }
     }
-    const projectBuilder = createProjectBuilder()
-    ;((createRoot ?? TscReactFiber.createRoot) as any)()
-      .render(children, projectBuilder as any)
-      .then(async (elements) => {
-        if (_soupPostProcessor) {
-          elements = _soupPostProcessor(elements)
-        }
-        setElementsAndCamera(elements)
-      })
-      .catch((e) => {
-        console.error("ERROR RENDERING CIRCUIT")
-        throw e
-      })
-  }, [children])
+  }, [handleWheel])
+
+  if (errorFromChildren) {
+    return <div>Error: {errorFromChildren.message}</div>
+  }
 
   return (
     <>
@@ -136,13 +206,17 @@ export const SchematicWithoutContext = ({
           overflow: "hidden",
           position: "relative",
           isolation: "isolate",
-          cursor: "grab",
+          cursor: isDraggingRef.current ? "grabbing" : "grab",
           ...style,
         }}
         ref={(el) => {
-          ref.current = el
+          containerRef.current = el
           boundsRef(el)
         }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
       >
         <SuperGrid
           stringifyCoord={(x, y, z) => {
@@ -151,7 +225,7 @@ export const SchematicWithoutContext = ({
           }}
           width={bounds.width}
           height={bounds.height}
-          transform={cameraTransform}
+          transform={transformRef.current}
         />
         {elements?.map((elm, i) => (
           <ErrorBoundary key={i} fallbackRender={fallbackRender(elm)}>
@@ -163,7 +237,9 @@ export const SchematicWithoutContext = ({
           </ErrorBoundary>
         ))}
       </div>
-      {showTable !== false && elements && <TableViewer elements={elements} />}
+      {showTable !== false && elements && (
+        <TableViewer elements={elements as any} />
+      )}
     </>
   )
 }

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

@@ -20,7 +20,7 @@ export const createRenderContextStore = () =>
   }))
 
 export const useGlobalStore = <T = RenderContextState>(
-  s?: (state: RenderContextState) => T
+  s?: (state: RenderContextState) => T,
 ): T => {
   const store = useContext(StoreContext)
 

package/src/lib/types/core.ts

@@ -1,19 +1,17 @@
 import { AnySourceComponent, SourceComponent } from "./source-component"
+import {
+  Size,
+  Point,
+  PcbTrace,
+  PcbComponent,
+  PcbPort,
+  SourceGroup,
+} from "circuit-json"
 
 export interface SchematicConfig {
   type: "schematic_config"
 }
 
-export interface Point {
-  x: number
-  y: number
-}
-
-export interface Size {
-  width: number
-  height: number
-}
-
 export interface SourceConfig {
   type: "source_config"
 }
@@ -111,32 +109,6 @@ export interface SchematicPort {
   facing_direction?: "up" | "down" | "left" | "right"
 }
 
-export interface PCBTrace {
-  type: "pcb_trace"
-  source_trace_id: string
-  pcb_trace_id: string
-  route: Array<{
-    x: number
-    y: number
-    strokeWidth: number
-    cap: "butt" | "round" | "square"
-    start_pcb_port_id?: string
-    end_pcb_port_id?: string
-  }>
-}
-
-export interface PCBComponent {
-  type: "pcb_component"
-  pcb_component_id: string
-  source_component_id: string
-}
-
-export interface PCBPort {
-  type: "pcb_port"
-  pcb_port_id: string
-  source_port_id: string
-}
-
 export interface PCBGroup {
   type: "pcb_group"
   source_group_id: string
@@ -153,13 +125,6 @@ export interface SourceTrace {
   connected_source_port_ids: string[]
 }
 
-export interface SourceGroup {
-  type: "source_group"
-  source_group_id: string
-  name: string
-  children_source_component_ids: string[]
-}
-
 export interface SourcePort {
   type: "source_port"
   name: string
@@ -178,9 +143,9 @@ export interface Project {
   schematic_ports: SchematicPort[]
   pcb_config: PCBConfig
   pcb_groups: PCBGroup[]
-  pcb_components: PCBComponent[]
-  pcb_traces: PCBTrace[]
-  pcb_ports: PCBPort[]
+  pcb_components: PcbComponent[]
+  pcb_traces: PcbTrace[]
+  pcb_ports: PcbPort[]
   source_config: SourceConfig
   source_traces: SourceTrace[]
   source_groups: SourceGroup[]
@@ -195,11 +160,11 @@ export type AnyElement =
   | SourceGroup
   | SourceTrace
   | SourcePort
-  | PCBTrace
-  | PCBComponent
+  | PcbTrace
+  | PcbComponent
   | PCBGroup
   | PCBConfig
-  | PCBPort
+  | PcbPort
   | SchematicGroup
   | SchematicComponent
   | SchematicTrace

package/src/lib/types/source-component.ts

@@ -38,6 +38,10 @@ export interface SimpleBug extends SourceComponentBase {
   manufacturerPartNumber: any
   ftype: "simple_bug"
 }
+export interface SimpleChip extends SourceComponentBase {
+  manufacturerPartNumber: any
+  ftype: "simple_chip"
+}
 
 export interface SimplePowerSource extends SourceComponentBase {
   ftype: "simple_power_source"
@@ -52,6 +56,7 @@ export type AnySourceComponent =
   | SimpleResistor
   | SimpleCapacitor
   | SimpleBug
+  | SimpleChip
   | SimpleInductor
   | SimplePowerSource
   | SimpleGround
@@ -64,5 +69,5 @@ export type SourceComponentFType = Extract<
   { ftype: string }
 >["ftype"]
 export type SourceComponent<
-  T extends SourceComponentFType = SourceComponentFType
+  T extends SourceComponentFType = SourceComponentFType,
 > = Extract<AnySourceComponent, { ftype: T }>

package/src/lib/utils/collect-element-refs.ts

@@ -2,19 +2,19 @@ import { AnyCircuitElement, SourcePort } from "circuit-json"
 
 export const collectElementRefs = (
   elm: AnyCircuitElement,
-  allElms: AnyCircuitElement[]
+  allElms: AnyCircuitElement[],
 ) => {
   const source_port = allElms.find(
     (e) =>
       e.type === "source_port" &&
-      e.source_port_id === (elm as any).source_port_id
+      e.source_port_id === (elm as any).source_port_id,
   ) as SourcePort | null
   const source_component_id: string =
     (elm as any).source_component_id ?? source_port?.source_component_id
   const source_component = allElms.find(
     (e) =>
       e.type === "source_component" &&
-      e.source_component_id === source_component_id
+      e.source_component_id === source_component_id,
   )
   if (
     [
@@ -29,7 +29,7 @@ export const collectElementRefs = (
     const schematic_children = allElms.filter(
       (e) =>
         "schematic_component_id" in e &&
-        e.schematic_component_id === (elm as any).schematic_component_id
+        e.schematic_component_id === (elm as any).schematic_component_id,
     )
 
     return {
@@ -38,6 +38,7 @@ export const collectElementRefs = (
       source: source_component,
       source_component,
       source_port,
+      allElements: allElms,
     }
   }
   return null