@tscircuit/schematic-viewer 0.0.1

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tscircuit/schematic-viewer",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "next dev",
+    "typecheck": "tsc --noEmit",
+    "build": "tsup ./src --dts --sourcemap",
+    "yalc": "npm run build && yalc push"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/node": "^18.6.0",
+    "@types/react": "^18.0.15",
+    "ava": "^4.3.1",
+    "babel-loader": "^8.2.5",
+    "esbuild": "^0.15.10",
+    "esbuild-register": "^3.3.3",
+    "next": "^12.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^6.2.3",
+    "type-fest": "^2.17.0",
+    "typescript": "^4.8.4"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.2.4",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@tscircuit/react-fiber": "^0.0.5",
+    "framer-motion": "^6",
+    "parse-svg-path": "^0.1.2",
+    "parsel-js": "^1.0.2",
+    "react-no-ssr": "^1.1.0",
+    "react-use-measure": "^2.1.1",
+    "rectilinear-router": "^1.0.1",
+    "svg-path-bounds": "^1.0.2",
+    "svg-path-generator": "^1.1.0",
+    "transformation-matrix": "^2.12.0",
+    "tscircuit": "^0.0.3",
+    "zustand": "^4.0.0"
+  }
+}

package/parsel.d.ts

@@ -0,0 +1,81 @@
+declare module "parsel-js" {
+  export interface Tokens {
+    type:
+      | "class"
+      | "attribute"
+      | "id"
+      | "type"
+      | "pseudo-element"
+      | "pseudo-class"
+      | "comma"
+      | "combinator"
+    content: string
+    name: string
+    namespace?: string
+    value?: string
+    pos: [number, number]
+    operator?: string
+    argument?: string
+    subtree?: AST
+    caseSensitive?: "i"
+  }
+
+  export interface Complex {
+    type: "complex"
+    combinator: string
+    right: AST
+    left: AST
+  }
+
+  export interface Compound {
+    type: "compound"
+    list: Tokens[]
+  }
+
+  export interface List {
+    type: "list"
+    list: AST[]
+  }
+
+  export interface ParserOptions {
+    recursive?: boolean
+    list?: boolean
+  }
+
+  export interface SpecificityOptions {
+    format?: string
+  }
+
+  export type AST = Complex | Compound | List | Tokens
+
+  /**
+   * Get AST:
+   */
+  export function parse(selector: string, options?: ParserOptions): AST
+
+  /**
+   * Get list of tokens as a flat array:
+   */
+  export function tokenize(selector: string): Tokens[]
+
+  /**
+   * Traverse all tokens of a (sub)tree:
+   */
+  export function walk(node: AST, cb: (node: AST, parentNode: AST) => {}): void
+
+  /**
+   * Calculate specificity (returns an array of 3 numbers):
+   */
+  export function specificity(
+    selector: string | AST,
+    options?: SpecificityOptions
+  ): number[]
+
+  /**
+   *  To convert the specificity array to a number
+   */
+  export function specificityToNumber(
+    specificity: number[],
+    base?: number
+  ): number
+}

package/src/Schematic.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react"
+import { ProjectComponent } from "schematic-components"
+import {
+  createProjectBuilder,
+  createProjectFromElements,
+} from "@tscircuit/builder"
+import { createRoot } from "@tscircuit/react-fiber"
+
+export const Schematic = ({
+  children,
+  elements: initialElements = [],
+}: {
+  children?: any
+  elements?: any
+}) => {
+  const [elements, setElements] = useState<any>(initialElements)
+  const [project, setProject] = useState<any>(null)
+
+  useEffect(() => {
+    if (initialElements.length > 0) {
+      setProject(createProjectFromElements(initialElements))
+      return
+    }
+    const projectBuilder = createProjectBuilder()
+    createRoot()
+      .render(children, projectBuilder as any)
+      .then(async (elements) => {
+        setElements(elements)
+        setProject(createProjectFromElements(elements))
+      })
+      .catch((e) => {
+        console.error("ERROR RENDERING CIRCUIT")
+        throw e
+      })
+  }, [children])
+
+  if (elements.length === 0) return null
+
+  return <ProjectComponent project={project} />
+}

package/src/lib/hooks/index.ts

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,15 @@
+import createStore from "zustand"
+import { Matrix, compose, scale } from "transformation-matrix"
+
+interface RenderContextState {
+  camera_transform: Matrix
+}
+
+export const useRenderContext = createStore<RenderContextState>()(
+  (set, get) => ({
+    camera_transform: compose(scale(100, 100, 0, 0)),
+  })
+)
+
+export const useCameraTransform = () =>
+  useRenderContext((s) => s.camera_transform)

package/src/lib/types/core.ts

@@ -0,0 +1,179 @@
+import { SourceComponent } from "./source-component"
+
+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"
+}
+
+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 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 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
+}
+
+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 SourceGroup {
+  type: "source_group"
+  source_group_id: string
+  name: string
+  children_source_component_ids: string[]
+}
+
+export interface SourcePort {
+  type: "source_port"
+  name: string
+  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
+  | SourceComponent
+  | SourceGroup
+  | SourceTrace
+  | SourcePort
+  | PCBTrace
+  | PCBComponent
+  | PCBGroup
+  | PCBConfig
+  | PCBPort
+  | SchematicGroup
+  | SchematicComponent
+  | SchematicTrace
+  | SchematicConfig
+  | SchematicPort
+  | SchematicText
+
+export type ElementType = AnyElement["type"]
+export type ElementOfType<T extends ElementType> = Extract<
+  AnyElement,
+  { type: T }
+>

package/src/lib/types/index.ts

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

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,63 @@
+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 {
+  ftype: "simple_bug"
+}
+
+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
+  | SimpleInductor
+  | SimplePowerSource
+  | SimpleGround
+  | SimpleDiode
+  | LightEmittingDiode
+
+export type SourceComponentFType = AnySourceComponent["ftype"]
+export type SourceComponent<
+  T extends SourceComponentFType = SourceComponentFType
+> = Extract<AnySourceComponent, { ftype: T }>

package/src/lib/types/util.ts

@@ -0,0 +1,52 @@
+// 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/direction-to-vec.ts

@@ -0,0 +1,50 @@
+export const directionToVec = (direction: "up" | "down" | "left" | "right") => {
+  if (direction === "up") return { x: 0, y: -1 }
+  else if (direction === "down") return { x: 0, y: 1 }
+  else if (direction === "left") return { x: -1, y: 0 }
+  else if (direction === "right") return { x: 1, y: 0 }
+  else throw new Error("Invalid direction")
+}
+
+export const vecToDirection = ({ x, y }: { x: number; y: number }) => {
+  if (x > y) y = 0
+  if (y > x) x = 0
+  if (x > 0 && y === 0) return "right"
+  else if (x < 0 && y === 0) return "left"
+  else if (x === 0 && y > 0) return "down"
+  else if (x === 0 && y < 0) return "up"
+  else throw new Error(`Invalid vector for direction conversion (${x}, ${y})`)
+}
+
+export const rotateClockwise = (
+  direction: "up" | "down" | "left" | "right"
+) => {
+  if (direction === "up") return "right"
+  else if (direction === "right") return "down"
+  else if (direction === "down") return "left"
+  else if (direction === "left") return "up"
+}
+
+export const rotateCounterClockwise = (
+  direction: "up" | "down" | "left" | "right"
+) => {
+  if (direction === "up") return "left"
+  else if (direction === "left") return "down"
+  else if (direction === "down") return "right"
+  else if (direction === "right") return "up"
+}
+
+export const rotateDirection = (
+  direction: "up" | "down" | "left" | "right",
+  num90DegreeClockwiseTurns: number
+) => {
+  while (num90DegreeClockwiseTurns > 0) {
+    direction = rotateClockwise(direction)
+    num90DegreeClockwiseTurns--
+  }
+  while (num90DegreeClockwiseTurns < 0) {
+    direction = rotateCounterClockwise(direction)
+    num90DegreeClockwiseTurns++
+  }
+  return direction
+}

package/src/lib/utils/get-svg-path-bounds.ts

@@ -0,0 +1,22 @@
+import svgPathBounds from "svg-path-bounds"
+
+export function getSVGPathBounds(ds: string[] | string) {
+  if (typeof ds === "string") ds = [ds]
+  let minX = Infinity,
+    maxX = -Infinity,
+    minY = Infinity,
+    maxY = -Infinity
+
+  for (const d of ds) {
+    const [left, top, right, bottom] = svgPathBounds(d)
+
+    minX = Math.min(left, minX)
+    maxX = Math.max(right, maxX)
+    minY = Math.min(top, minY)
+    maxY = Math.max(bottom, maxY)
+  }
+
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }
+}
+
+export default getSVGPathBounds

package/src/lib/utils/point-math.ts

@@ -0,0 +1,26 @@
+export type Point = { x: number; y: number }
+
+export function sub(p1: Point, p2: Point) {
+  return { x: p1.x - p2.x, y: p1.y - p2.y }
+}
+
+export function mult(p1: Point, p2: Point) {
+  return { x: p1.x * p2.x, y: p1.y * p2.y }
+}
+
+export function mag(p1: Point, p2: Point) {
+  const dx = p1.x - p2.x
+  const dy = p1.y - p2.y
+  return Math.sqrt(dx ** 2 + dy ** 2)
+}
+
+export function componentSum(p1: Point) {
+  return p1.x + p1.y
+}
+
+export function norm(p1: Point) {
+  return {
+    x: Math.sign(p1.x),
+    y: Math.sign(p1.y),
+  }
+}

package/src/pages/_app.tsx

@@ -0,0 +1,23 @@
+import Head from "next/head"
+
+export const App = ({ Component }) => {
+  return (
+    <>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <Component />
+    </>
+  )
+}
+
+export default App

package/src/pages/index.tsx

@@ -0,0 +1,10 @@
+import "@tscircuit/react-fiber/dist/types/intrinsic-jsx.d"
+import { Schematic } from "Schematic"
+
+export default () => {
+  return (
+    <Schematic>
+      <resistor name="R1" resistance="10 ohm" />
+    </Schematic>
+  )
+}