@tscircuit/schematic-viewer 1.4.2 → 2.0.0

package/src/Schematic.tsx

@@ -1,246 +0,0 @@
-import { useRenderedCircuit } from "@tscircuit/core"
-import { findBoundsAndCenter } from "@tscircuit/soup-util"
-import type { AnyCircuitElement } from "circuit-json"
-import { useGlobalStore } from "lib/render-context"
-import type React from "react"
-import { 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 {
-  type Matrix,
-  applyToPoint,
-  compose,
-  inverse,
-  scale,
-  translate,
-} from "transformation-matrix"
-import { TableViewer } from "./schematic-components/TableViewer"
-
-const ErrorBoundary = TypedErrorBoundary as any
-
-const fallbackRender: any =
-  (elm) =>
-  ({ error, resetErrorBoundary }: any) => {
-    return (
-      <div style={{ color: "red" }}>
-        error rendering {elm.type}: {error.toString()}
-      </div>
-    )
-  }
-
-const toMMSINeg = (v: number, z: number) =>
-  v >= 0 ? toMMSI(v, z) : `-${toMMSI(-v, z)}`
-
-export interface SchematicProps {
-  children?: any
-  soup?: AnyCircuitElement[]
-  style?: React.CSSProperties
-  showTable?: boolean
-  _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[]
-}
-
-export const Schematic = (props: SchematicProps) => {
-  return (
-    <ContextProviders>
-      <SchematicWithoutContext {...props} />
-    </ContextProviders>
-  )
-}
-
-export const SchematicWithoutContext = ({
-  children,
-  soup,
-  style,
-  showTable = false,
-  _soupPostProcessor,
-}: SchematicProps) => {
-  const {
-    circuitJson: circuitJsonFromChildren,
-    error: errorFromChildren,
-    isLoading,
-  } = useRenderedCircuit(children)
-
-  const [elements, setElements] = useState<AnyCircuitElement[]>([])
-  const { setCameraTransform } = useGlobalStore()
-  const [boundsRef, bounds] = useMeasure()
-  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({})
-    },
-    [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_"),
-      )
-        ? findBoundsAndCenter(
-            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,
-      )
-
-      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, 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)
-    },
-    [updateTransform],
-  )
-
-  const handleMouseUp = useCallback(() => {
-    isDraggingRef.current = false
-  }, [])
-
-  const handleWheel = useCallback(
-    (e: WheelEvent) => {
-      e.preventDefault()
-      const scaleMultiplier = 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(() => {
-    const container = containerRef.current
-    if (container) {
-      container.addEventListener("wheel", handleWheel, { passive: false })
-      return () => {
-        container.removeEventListener("wheel", handleWheel)
-      }
-    }
-  }, [handleWheel])
-
-  if (errorFromChildren) {
-    return <div>Error: {errorFromChildren.message}</div>
-  }
-
-  return (
-    <>
-      <div
-        style={{
-          width: "100%",
-          backgroundColor: "rgba(255,255,255,0)",
-          minHeight: 200,
-          overflow: "hidden",
-          position: "relative",
-          isolation: "isolate",
-          cursor: isDraggingRef.current ? "grabbing" : "grab",
-          ...style,
-        }}
-        ref={(el) => {
-          containerRef.current = el
-          boundsRef(el)
-        }}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-      >
-        <SuperGrid
-          stringifyCoord={(x, y, z) => {
-            if (z === 0) return ""
-            return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`
-          }}
-          width={bounds.width}
-          height={bounds.height}
-          transform={transformRef.current}
-        />
-        {elements?.map((elm, i) => (
-          <ErrorBoundary key={`${elm}`} fallbackRender={fallbackRender(elm)}>
-            <SchematicElement
-              element={elm}
-              allElements={elements}
-              key={JSON.stringify(elm)}
-            />
-          </ErrorBoundary>
-        ))}
-      </div>
-      {showTable !== false && elements && (
-        <TableViewer elements={elements as any} />
-      )}
-    </>
-  )
-}

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./Schematic"

package/src/lib/hooks/index.ts

@@ -1 +0,0 @@
-export * from "./use-maybe-promise"

package/src/lib/hooks/use-maybe-promise.ts

@@ -1,14 +0,0 @@
-import { useEffect, useState } from "react"
-
-export const useMaybePromise = <T>(promise: Promise<T> | T): T | null => {
-  const [state, setState] = useState<T | null>(null)
-  useEffect(() => {
-    if (promise instanceof Promise) {
-      promise.then(setState)
-    } else {
-      setState(promise)
-    }
-  }, [promise])
-  return state
-}
-export default useMaybePromise

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

@@ -1,28 +0,0 @@
-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 createRenderContextStore = () =>
-  createZustandStore<RenderContextState>((set) => ({
-    camera_transform: compose(scale(100, 100, 0, 0)),
-    setCameraTransform: (transform: Matrix) =>
-      set({ camera_transform: 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/types/core.ts

@@ -1,181 +0,0 @@
-import { AnySourceComponent, SourceComponent } from "./source-component"
-import {
-  Size,
-  Point,
-  PcbTrace,
-  PcbComponent,
-  PcbPort,
-  SourceGroup,
-} from "circuit-json"
-
-export interface SchematicConfig {
-  type: "schematic_config"
-}
-
-export interface SourceConfig {
-  type: "source_config"
-}
-
-export interface SchematicGroup {
-  type: "schematic_group"
-  schematic_group_id: string
-  source_group_id: string
-  center: Point
-  size: Size
-  children_schematic_component_ids: string[]
-  children_schematic_trace_ids: string[]
-}
-
-export interface SchematicComponent {
-  type: "schematic_component"
-  rotation: number
-  size: Size
-  center: Point
-  source_component_id: string
-  schematic_component_id: string
-
-  // TODO only for schematic-bug
-  port_arrangement?: {
-    left_size: number
-    right_size: number
-    top_size?: number
-    bottom_size?: number
-  }
-  port_labels?: {
-    [port_number: string]: string
-  }
-}
-
-export interface SchematicBox {
-  type: "schematic_box"
-  drawing_type: "box"
-  schematic_box_id: string
-  schematic_component_id: string
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export interface SchematicLine {
-  type: "schematic_line"
-  drawing_type: "line"
-  schematic_component_id: string
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-}
-
-export interface SchematicPath {
-  type: "schematic_path"
-  drawing_type: "path"
-  schematic_component_id: string
-  points: Array<{
-    x: number
-    y: number
-  }>
-  is_filled: boolean
-  is_closed: boolean
-  fill_color?: "red" | "blue"
-}
-
-export interface SchematicTrace {
-  type: "schematic_trace"
-  schematic_trace_id: string
-  source_trace_id: string
-  edges: Array<{
-    from: { x: number; y: number }
-    to: { x: number; y: number }
-    from_schematic_port_id?: string
-    to_schematic_port_id?: string
-  }>
-}
-
-export interface SchematicText {
-  type: "schematic_text"
-  schematic_component_id: string
-  schematic_text_id: string
-  text: string
-  position: Point
-  anchor: "center" | "left" | "right" | "top" | "bottom"
-}
-
-export interface SchematicPort {
-  type: "schematic_port"
-  schematic_port_id: string
-  source_port_id: string
-  center: Point
-  facing_direction?: "up" | "down" | "left" | "right"
-}
-
-export interface PCBGroup {
-  type: "pcb_group"
-  source_group_id: string
-}
-
-export interface PCBConfig {
-  type: "pcb_config"
-  dimension_unit: "mm"
-}
-
-export interface SourceTrace {
-  type: "source_trace"
-  source_trace_id: string
-  connected_source_port_ids: string[]
-}
-
-export interface SourcePort {
-  type: "source_port"
-  name: string
-  pin_number?: number
-  source_port_id: string
-  source_component_id: string
-}
-
-export interface Project {
-  type: "project"
-  schematic_config: SchematicConfig
-  schematic_components: SchematicComponent[]
-  schematic_groups: SchematicGroup[]
-  schematic_traces: SchematicTrace[]
-  schematic_texts: SchematicText[]
-  schematic_ports: SchematicPort[]
-  pcb_config: PCBConfig
-  pcb_groups: PCBGroup[]
-  pcb_components: PcbComponent[]
-  pcb_traces: PcbTrace[]
-  pcb_ports: PcbPort[]
-  source_config: SourceConfig
-  source_traces: SourceTrace[]
-  source_groups: SourceGroup[]
-  source_components: SourceComponent[]
-  source_ports: SourcePort[]
-}
-
-export type AnyElement =
-  | Project
-  | SourceConfig
-  | AnySourceComponent
-  | SourceGroup
-  | SourceTrace
-  | SourcePort
-  | PcbTrace
-  | PcbComponent
-  | PCBGroup
-  | PCBConfig
-  | PcbPort
-  | SchematicGroup
-  | SchematicComponent
-  | SchematicTrace
-  | SchematicConfig
-  | SchematicPort
-  | SchematicText
-  | SchematicLine
-  | SchematicPath
-
-export type ElementType = AnyElement["type"]
-export type ElementOfType<T extends ElementType> = Extract<
-  AnyElement,
-  { type: T }
->

package/src/lib/types/index.ts

@@ -1,4 +0,0 @@
-export * from "./core"
-export * from "./source-component"
-export * from "./util"
-export * from "./route-solver"

package/src/lib/types/route-solver.ts

@@ -1,10 +0,0 @@
-export type RouteSolver = (params: {
-  terminals: Array<{
-    x: number
-    y: number
-    facing_direction?: "up" | "down" | "left" | "right"
-  }>
-  obstacles: Array<{ cx: number; cy: number; w: number; h: number }>
-}) => Promise<
-  Array<{ from: { x: number; y: number }; to: { x: number; y: number } }>
->

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

@@ -1,73 +0,0 @@
-import { NumberWithUnit } from "./util"
-
-export interface SourceComponentBase {
-  type: "source_component"
-  /** The functional type of this component, e.g. resistor, capacitor etc. */
-  ftype?: string
-  source_component_id: string
-  name: string
-}
-
-export interface SimpleResistor extends SourceComponentBase {
-  ftype: "simple_resistor"
-  // Resistance measured in ohms
-  resistance: NumberWithUnit<"ohm">
-}
-
-export interface SimpleCapacitor extends SourceComponentBase {
-  ftype: "simple_capacitor"
-  // Capacitance measured in farads
-  capacitance: NumberWithUnit<"farad">
-}
-
-export interface SimpleInductor extends SourceComponentBase {
-  ftype: "simple_inductor"
-  // Inductance measured in henries
-  inductance: NumberWithUnit<"henry">
-}
-
-export interface SimpleDiode extends SourceComponentBase {
-  ftype: "simple_diode"
-}
-
-export type LightEmittingDiode = SimpleDiode & {
-  ftype: "led"
-}
-
-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"
-  voltage: NumberWithUnit<"volt">
-}
-
-export interface SimpleGround extends SourceComponentBase {
-  ftype: "simple_ground"
-}
-
-export type AnySourceComponent =
-  | SimpleResistor
-  | SimpleCapacitor
-  | SimpleBug
-  | SimpleChip
-  | SimpleInductor
-  | SimplePowerSource
-  | SimpleGround
-  | SimpleDiode
-  | LightEmittingDiode
-  | Omit<SourceComponentBase, "ftype">
-
-export type SourceComponentFType = Extract<
-  AnySourceComponent,
-  { ftype: string }
->["ftype"]
-export type SourceComponent<
-  T extends SourceComponentFType = SourceComponentFType,
-> = Extract<AnySourceComponent, { ftype: T }>

package/src/lib/types/util.ts

@@ -1,52 +0,0 @@
-// Currently, removing uncommon SI Prefixes for type simplicity.
-export type SIPrefix =
-  // | "y"
-  // | "yocto"
-  // | "z"
-  // | "zepto"
-  // | "atto"
-  // | "a"
-  | "femto"
-  | "f"
-  | "u"
-  | "micro"
-  // | "d"
-  // | "deci"
-  | "c"
-  | "centi"
-  | "m"
-  | "milli"
-  | "k"
-  | "kilo"
-  | "M"
-  | "mega"
-// | "G"
-// | "T"
-// | "P"
-// | "E"
-// | "Z"
-// | "Y"
-
-export type UnitAbbreviations = {
-  farad: "F"
-  ohm: "Ω"
-  henry: "H"
-  meter: "m"
-  volt: "V"
-}
-
-export type Unit = "ohm" | "farad" | "henry" | "meter" | "volt"
-
-export type UnitOrAbbreviation = UnitAbbreviations[Unit] | Unit
-
-export type NumberWithAnyUnit =
-  | `${number}${UnitOrAbbreviation}`
-  | `${number} ${UnitOrAbbreviation}`
-  | `${number}${SIPrefix}${UnitOrAbbreviation}`
-  | `${number} ${SIPrefix}${UnitOrAbbreviation}`
-
-export type NumberWithUnit<T extends Unit> =
-  | `${number}${T | UnitAbbreviations[T]}`
-  | `${number} ${T | UnitAbbreviations[T]}`
-  | `${number}${SIPrefix}${T | UnitAbbreviations[T]}`
-  | `${number} ${SIPrefix}${T | UnitAbbreviations[T]}`

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

@@ -1,45 +0,0 @@
-import { AnyCircuitElement, SourcePort } from "circuit-json"
-
-export const collectElementRefs = (
-  elm: AnyCircuitElement,
-  allElms: AnyCircuitElement[],
-) => {
-  const source_port = allElms.find(
-    (e) =>
-      e.type === "source_port" &&
-      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,
-  )
-  if (
-    [
-      "schematic_component",
-      "schematic_trace",
-      "schematic_port",
-      "schematic_box",
-      "schematic_line",
-      "schematic_path",
-    ].includes(elm.type)
-  ) {
-    const schematic_children = allElms.filter(
-      (e) =>
-        "schematic_component_id" in e &&
-        e.schematic_component_id === (elm as any).schematic_component_id,
-    )
-
-    return {
-      schematic_children,
-      schematic: elm,
-      source: source_component,
-      source_component,
-      source_port,
-      allElements: allElms,
-    }
-  }
-  return null
-}