@tscircuit/schematic-viewer 1.2.14 → 1.4.0

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.14",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "license": "MIT",
-  "repository": "tscircuit/schematic-viewer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tscircuit/schematic-viewer.git"
+  },
   "scripts": {
     "start": "storybook dev -p 6006",
     "typecheck": "tsc --noEmit",
     "build": "tsup",
     "yalc": "npm run build && yalc push",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_d88a6beb0734bbe"
   },
   "peerDependencies": {
-    "@tscircuit/builder": "*",
-    "@tscircuit/react-fiber": "*",
     "@tscircuit/table-viewer": "*",
     "react": "*"
   },
@@ -31,15 +33,14 @@
     "@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/soup": "^0.0.34",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",
     "@types/react": "^18.0.15",
     "@vitejs/plugin-react": "^4.3.0",
     "ava": "^4.3.1",
+    "chromatic": "^11.5.5",
+    "circuit-json": "^0.0.82",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "next": "^14.2.3",
@@ -54,7 +55,7 @@
     "transformation-matrix": "^2.12.0",
     "tsup": "^6.7.0",
     "type-fest": "^2.17.0",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2",
     "zod": "^3.23.8",
@@ -62,11 +63,19 @@
   },
   "dependencies": {
     "@storybook/react-vite": "^8.1.3",
-    "@tscircuit/layout": "^0.0.17",
-    "@tscircuit/props": "^0.0.15",
+    "@tscircuit/core": "^0.0.125",
+    "@tscircuit/layout": "^0.0.25",
+    "@tscircuit/props": "^0.0.23",
+    "@tscircuit/soup-util": "^0.0.38",
+    "circuit-to-svg": "^0.0.40",
     "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": {
+    "url": "https://github.com/tscircuit/schematic-viewer/issues"
+  },
+  "homepage": "https://github.com/tscircuit/schematic-viewer#readme"
 }

package/renovate.json

@@ -1,6 +1,17 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
-    "config:recommended"
+    "config:base"
+  ],
+  "packageRules": [
+    {
+      "packagePatterns": ["*"],
+      "excludePackagePatterns": ["@tscircuit/*"],
+      "enabled": false
+    },
+    {
+      "matchUpdateTypes": ["major", "minor", "patch"],
+      "automerge": true
+    }
   ]
 }

package/src/Schematic.tsx

@@ -1,24 +1,22 @@
-import { useCallback, useEffect, useState } from "react"
-import { ContextProviders, ProjectComponent } from "schematic-components"
-import { SuperGrid, toMMSI } from "react-supergrid"
-import {
-  AnyElement,
-  createProjectBuilder,
-  createProjectFromElements,
-  findBoundsAndCenter,
-  transformSchematicElement,
-} from "@tscircuit/builder"
-import * as builder1 from "@tscircuit/builder"
-import TscReactFiber, { createRoot } from "@tscircuit/react-fiber"
-import { SchematicElement } from "schematic-components/SchematicElement"
-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 { useRenderedCircuit } from "@tscircuit/core"
+import { findBoundsAndCenter } from "@tscircuit/soup-util"
+import type { AnyCircuitElement } from "circuit-json"
 import { useGlobalStore } from "lib/render-context"
+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 {
+  applyToPoint,
+  compose,
+  inverse,
+  Matrix,
+  scale,
+  translate,
+} from "transformation-matrix"
 import { TableViewer } from "./schematic-components/TableViewer"
-import { AnySoupElement } from "@tscircuit/soup"
 
 const ErrorBoundary = TypedErrorBoundary as any
 
@@ -37,17 +35,10 @@ const toMMSINeg = (v: number, z: number) =>
 
 export interface SchematicProps {
   children?: any
-
-  /** @deprecated use soup */
-  elements?: any
-
-  soup?: AnySoupElement[]
-
-  style?: any
-
+  soup?: AnyCircuitElement[]
+  style?: React.CSSProperties
   showTable?: boolean
-
-  _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[]
+  _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[]
 }
 
 export const Schematic = (props: SchematicProps) => {
@@ -60,74 +51,150 @@ 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_")
+        e.type.startsWith("schematic_"),
       )
         ? findBoundsAndCenter(
-            elements.filter((e) => e.type.startsWith("schematic_"))
+            elements.filter((e) => e.type.startsWith("schematic_")),
           )
         : { center: { x: 0, y: 0 }, width: 0.001, height: 0.001 }
 
       const scaleFactor = Math.min(
         (elmBounds.width ?? 0) / width,
         (elmBounds.height ?? 0) / height,
-        100
+        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 (
     <>
@@ -139,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) => {
@@ -154,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)}>
@@ -166,7 +237,7 @@ export const SchematicWithoutContext = ({
           </ErrorBoundary>
         ))}
       </div>
-      {showTable !== false && elements && <TableViewer elements={elements} />}
+      {showTable !== false && elements && <TableViewer elements={elements as any} />}
     </>
   )
 }

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

@@ -35,8 +35,13 @@ export type LightEmittingDiode = SimpleDiode & {
 }
 
 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"
@@ -51,6 +56,7 @@ export type AnySourceComponent =
   | SimpleResistor
   | SimpleCapacitor
   | SimpleBug
+  | SimpleChip
   | SimpleInductor
   | SimplePowerSource
   | SimpleGround

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

@@ -1,8 +1,8 @@
-import { AnySoupElement, SourcePort } from "@tscircuit/soup"
+import { AnyCircuitElement, SourcePort } from "circuit-json"
 
 export const collectElementRefs = (
-  elm: AnySoupElement,
-  allElms: AnySoupElement[]
+  elm: AnyCircuitElement,
+  allElms: AnyCircuitElement[]
 ) => {
   const source_port = allElms.find(
     (e) =>
@@ -38,6 +38,7 @@ export const collectElementRefs = (
       source: source_component,
       source_component,
       source_port,
+      allElements: allElms,
     }
   }
   return null