@tscircuit/schematic-viewer 0.0.1

package/src/pages/led-circuit-react.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from "react"
+import { Schematic } from "Schematic"
+
+export const ExampleCircuit = () => {
+  return (
+    <Schematic>
+      <resistor name="R1" resistance="10 ohm" center={[2, 1]} />
+      <capacitor
+        name="C1"
+        capacitance="10 uF"
+        center={[4, 2]}
+        rotation="90deg"
+      />
+      <resistor
+        name="R2"
+        resistance="10 ohm"
+        center={[6, 1]}
+        rotation="90deg"
+      />
+      <trace
+        path={[".R1 > port.right", ".C1 > port.left", ".R2 > port.left"]}
+      />
+      <powersource voltage="5V" center={[1, 2]} name="main_power" />
+      <trace path={[".main_power > port.positive", ".R1 > port.left"]} />
+      <trace
+        path={["power > port.negative", ".C1 > port.right", ".R2 > port.right"]}
+      />
+      <bug
+        name="B1"
+        port_arrangement={{ left_size: 3, right_size: 3 }}
+        center={[8, 3]}
+        port_labels={{
+          1: "PWR",
+          2: "NC",
+          3: "RG",
+          4: "D0",
+          5: "D1",
+          6: "GND",
+        }}
+      />
+      <trace path={[".B1 > port.PWR", ".R2 > port.left"]} />
+      <ground name="GND" center={[11, 3]} />
+      <trace from=".B1 > port.GND" to=".GND" />
+      <diode name="D1" center={[6, 3.5]} rotation="180deg" />
+      <trace from=".D1 > .left" to=".B1 > .RG" />
+      <trace from=".D1 > .right" to=".C1> .right" />
+    </Schematic>
+  )
+}
+
+export default ExampleCircuit

package/src/pages/led-circuit.tsx

@@ -0,0 +1,91 @@
+import { createProjectBuilder } from "@tscircuit/builder"
+import { useMaybePromise } from "lib/hooks"
+import { Schematic } from "../Schematic"
+
+const pb = createProjectBuilder()
+const $elements = pb
+  .addGroup((gb) =>
+    gb
+      .addResistor((rb) =>
+        rb
+          .setSourceProperties({
+            resistance: "10 ohm",
+            name: "R1",
+          })
+          .setSchematicCenter(2, 1)
+      )
+      .addCapacitor((cb) =>
+        cb
+          .setSourceProperties({
+            name: "C1",
+            capacitance: "10 uF",
+          })
+          .setSchematicCenter(4, 2)
+          .setSchematicRotation("90deg")
+      )
+      .addResistor((cb) =>
+        cb
+          .setSourceProperties({
+            resistance: "10 ohm",
+            name: "R2",
+          })
+          .setSchematicCenter(6, 1)
+          .setSchematicRotation("90deg")
+      )
+      .addTrace([".R1 > port.right", ".C1 > port.left", ".R2 > port.left"])
+      .addPowerSource((cb) =>
+        cb
+          .setSourceProperties({
+            voltage: "5V",
+            name: "main_power",
+          })
+          .setSchematicCenter(1, 2)
+      )
+      .addTrace(["power > port.positive", ".R1 > port.left"])
+      .addTrace([
+        "power > port.negative",
+        ".C1 > port.right",
+        ".R2 > port.right",
+      ])
+      .addBug((cb) =>
+        cb
+          .setSourceProperties({ name: "B1" })
+          .setSchematicProperties({
+            port_arrangement: {
+              left_size: 3,
+              right_size: 3,
+            },
+          })
+          .labelPort(1, "PWR")
+          .labelPort(2, "NC")
+          .labelPort(3, "RG")
+          .labelPort(4, "D0")
+          .labelPort(5, "D1")
+          .labelPort(6, "GND")
+          .setSchematicCenter(8, 3)
+      )
+      .addTrace([".B1 > port.PWR", ".R2 > port.left"])
+      .addGround((cb) =>
+        cb
+          .setSourceProperties({
+            name: "GND",
+          })
+          .setSchematicCenter(11, 3)
+      )
+      .addTrace([".B1 > port.GND", ".gnd"])
+      .addDiode((db) =>
+        db
+          .setSourceProperties({ name: "D1" })
+          .setSchematicCenter(6, 3.5)
+          .setSchematicRotation("180deg")
+      )
+      .addTrace([".D1 > .left", ".B1 > .RG"])
+      .addTrace([".D1 > .right", ".C1 > .right"])
+  )
+  .build(pb.createBuildContext())
+
+export default () => {
+  const elements = useMaybePromise($elements)
+  if (!elements) return null
+  return <Schematic elements={elements} />
+}

package/src/schematic-components/MovableGrid/MovableGrid.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { ComponentStory, ComponentMeta } from "@storybook/react"
+
+import { MovableGrid } from "./"
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "MovableGrid",
+  component: MovableGrid,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} as ComponentMeta<typeof MovableGrid>
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof MovableGrid> = (args: any) => (
+  <MovableGrid {...args} />
+)
+
+export const Primary = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: "MovableGrid",
+}

package/src/schematic-components/MovableGrid/index.tsx

@@ -0,0 +1,4 @@
+export const MovableGrid = () => {
+  return <div>{`asd`}</div>
+}
+export default MovableGrid

package/src/schematic-components/ProjectComponent.tsx

@@ -0,0 +1,62 @@
+import { useMaybePromise } from "lib/hooks"
+import { ProjectClass } from "@tscircuit/builder"
+import * as Types from "lib/types"
+import * as Components from "./"
+
+interface Props {
+  project: Types.Project | Promise<Types.Project>
+}
+
+export const ProjectComponent = ({ project: $project }: Props) => {
+  const project = useMaybePromise($project)
+
+  if (!project) return <span>loading</span>
+
+  const projectClass = new ProjectClass(project as any)
+
+  return (
+    <>
+      {project.schematic_components.map((schematic_component) => (
+        <Components.SchematicComponent
+          key={schematic_component.schematic_component_id}
+          component={{
+            source: projectClass.getSourceComponent(
+              schematic_component.source_component_id
+            ),
+            schematic: schematic_component,
+          }}
+        />
+      ))}
+      {project.schematic_ports.map((schematic_port) => (
+        <Components.SchematicPort
+          key={schematic_port.schematic_port_id}
+          port={{
+            source: projectClass.getSourcePort(
+              schematic_port.schematic_port_id
+            ),
+            schematic: schematic_port,
+          }}
+        />
+      ))}
+      {project.schematic_traces.map((schematic_trace) => (
+        <Components.SchematicTrace
+          key={schematic_trace.schematic_trace_id}
+          trace={{
+            source: projectClass.getSourceTrace(
+              schematic_trace.source_trace_id
+            ),
+            schematic: schematic_trace,
+          }}
+        />
+      ))}
+      {project.schematic_texts.map((schematic_text) => (
+        <Components.SchematicText
+          key={schematic_text.schematic_text_id}
+          schematic_text={schematic_text}
+        />
+      ))}
+    </>
+  )
+}
+
+export default ProjectComponent

package/src/schematic-components/RenderError.tsx

@@ -0,0 +1,23 @@
+interface Props {
+  text: string
+}
+
+export default ({ text }: Props) => {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        backgroundColor: "red",
+        color: "white",
+        fontSize: 14,
+        fontFamily: "sans-serif",
+        padding: 5,
+        right: 0,
+        top: 0,
+        opacity: 0.75,
+      }}
+    >
+      {text}
+    </div>
+  )
+}

package/src/schematic-components/SVGPathComponent.tsx

@@ -0,0 +1,64 @@
+import { useCameraTransform } from "lib/render-context"
+import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
+
+import { applyToPoint } from "transformation-matrix"
+
+interface Props {
+  rotation: number
+  center: { x: number; y: number }
+  size: { width: number; height: number }
+  paths: Array<{
+    strokeWidth: number
+    stroke: string
+    d: string
+  }>
+}
+
+export const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {
+  const ct = useCameraTransform()
+  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
+  // Margin in SVG Space
+  const badRatio =
+    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >
+    0.01
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    )
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1)
+  pathBounds.width = Math.max(pathBounds.width, 1)
+  const absoluteCenter = applyToPoint(ct, center)
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d),
+  }
+
+  return (
+    <svg
+      style={{
+        position: "absolute",
+        transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+        left: absoluteCenter.x - absoluteSize.width / 2,
+        top: absoluteCenter.y - absoluteSize.height / 2,
+        // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.5)" : "transparent",
+      }}
+      overflow="visible"
+      width={absoluteSize.width}
+      height={absoluteSize.height}
+      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}
+    >
+      {paths.map((p, i) => (
+        <path
+          key={i}
+          fill="none"
+          strokeWidth={2 * (p.strokeWidth || 1)}
+          stroke={p.stroke || "red"}
+          d={p.d}
+        />
+      ))}
+    </svg>
+  )
+}
+
+export default SVGPathComponent

package/src/schematic-components/SchematicBug.tsx

@@ -0,0 +1,52 @@
+import * as Type from "lib/types"
+import SVGPathComponent from "./SVGPathComponent"
+import range from "lodash/range"
+
+interface Props {
+  component: {
+    source: Type.SimpleBug
+    schematic: Type.SchematicComponent
+  }
+}
+
+export const SchematicBug = ({ component: { source, schematic } }: Props) => {
+  const ports_arrangement = schematic.port_arrangement!
+  const port_labels = schematic.port_labels!
+  const bugw = 30 // bug width
+  const rh = 15 // row height
+  const pd = 7.5 // port distance, the line for each port
+  const bugh =
+    Math.max(ports_arrangement.left_size, ports_arrangement.right_size) * rh
+  // TODO throw if schematic.size doesn't match computed ports_arrangement size
+  return (
+    <SVGPathComponent
+      rotation={schematic.rotation}
+      center={schematic.center}
+      size={schematic.size}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 1,
+          d: `M 0 0 L ${bugw} 0 L ${bugw} ${bugh} L 0 ${bugh}Z`,
+        },
+        ...range(
+          0,
+          ports_arrangement.left_size + ports_arrangement.right_size
+        ).map((i) => {
+          const ls = ports_arrangement.left_size
+          const left = i < ls
+          const rowi = i % ls
+          const p1 = [left ? 0 : bugw, rh / 2 + rowi * rh]
+          const rd = [left ? -pd : pd, 0]
+          return {
+            stroke: "red",
+            strokeWidth: 1,
+            d: `M ${p1.join(" ")} l ${rd.join(" ")}`,
+          }
+        }),
+      ]}
+    />
+  )
+}
+
+export default SchematicBug

package/src/schematic-components/SchematicComponent.tsx

@@ -0,0 +1,42 @@
+import { ProjectClass } from "tscircuit"
+import * as Type from "lib/types"
+import * as Component from "./"
+
+interface Props {
+  component: {
+    source: Type.SourceComponent
+    schematic: Type.SchematicComponent
+  }
+}
+
+export const SchematicComponent = ({ component }: Props) => {
+  const { source, schematic } = component
+  switch (source.ftype) {
+    case "simple_resistor": {
+      return <Component.SimpleResistor component={{ source, schematic }} />
+    }
+    case "simple_capacitor": {
+      return <Component.SimpleCapacitor component={{ source, schematic }} />
+    }
+    case "simple_power_source": {
+      return <Component.SimplePowerSource component={{ source, schematic }} />
+    }
+    case "simple_ground": {
+      return <Component.SimpleGround component={{ source, schematic }} />
+    }
+    case "simple_inductor": {
+      return <Component.SimpleInductor component={{ source, schematic }} />
+    }
+    case "simple_bug": {
+      return <Component.SchematicBug component={{ source, schematic }} />
+    }
+    case "simple_diode": {
+      return <Component.SimpleDiode component={{ source, schematic }} />
+    }
+    default: {
+      return <div>unknown ftype: {component.source.ftype}</div>
+    }
+  }
+}
+
+export default SchematicComponent

package/src/schematic-components/SchematicGroup.tsx

@@ -0,0 +1,3 @@
+export const SchematicGroup = () => {
+  return null
+}

package/src/schematic-components/SchematicPort.tsx

@@ -0,0 +1,39 @@
+import { ProjectClass } from "tscircuit"
+import * as Type from "lib/types"
+import { directionToVec } from "lib/utils/direction-to-vec"
+import * as Component from "./"
+
+interface Props {
+  port: {
+    source: Type.SourcePort
+    schematic: Type.SchematicPort
+  }
+}
+
+export const SchematicPort = ({ port: { source, schematic } }: Props) => {
+  return (
+    <Component.SVGPathComponent
+      rotation={0}
+      center={schematic.center}
+      size={{ width: 0.2, height: 0.2 }}
+      paths={[
+        {
+          stroke: "blue",
+          strokeWidth: 1,
+          d: "M 0 0 l 10 0 l 0 10 l -10 0 z",
+        },
+        schematic.facing_direction
+          ? {
+              stroke: "blue",
+              strokeWidth: 0.5,
+              d: `M 5 5 l ${directionToVec(schematic.facing_direction).x * 7} ${
+                directionToVec(schematic.facing_direction).y * 7
+              }`,
+            }
+          : null,
+      ].filter(Boolean)}
+    />
+  )
+}
+
+export default SchematicPort

package/src/schematic-components/SchematicText.tsx

@@ -0,0 +1,41 @@
+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 { applyToPoint } from "transformation-matrix"
+import useMeasure from "react-use-measure"
+
+interface Props {
+  schematic_text: Type.SchematicText
+}
+
+export const SchematicText = ({ schematic_text }: Props) => {
+  const ct = useCameraTransform()
+  const { text, position, anchor } = schematic_text
+  const tPos = applyToPoint(ct, position)
+  const [boundsRef, bounds] = useMeasure()
+  let offset = [0, 0]
+  if (anchor === "center") {
+    offset = [-bounds.width / 2, -bounds.height / 2]
+  } else if (anchor === "left") {
+    offset = [0, -bounds.height / 2]
+  } else if (anchor === "right") {
+    offset = [-bounds.width, -bounds.height / 2]
+  }
+  return (
+    <div
+      ref={boundsRef}
+      style={{
+        fontFamily: "'IBM Plex Mono', monospace",
+        position: "absolute",
+        left: tPos.x + offset[0],
+        top: tPos.y + offset[1],
+      }}
+    >
+      {text}
+    </div>
+  )
+}
+
+export default SchematicText

package/src/schematic-components/SchematicTrace.tsx

@@ -0,0 +1,48 @@
+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 RenderError from "./RenderError"
+
+interface Props {
+  trace: {
+    source: Type.SourceTrace
+    schematic: Type.SchematicTrace
+  }
+}
+
+export const SchematicTrace = ({ trace: { source, schematic } }: Props) => {
+  const edges = schematic.edges
+  if (edges.length === 0) {
+    return <RenderError text="Route with 0 edges" />
+  }
+  const path = Path()
+  for (let i = 0; i < edges.length; i++) {
+    path.moveTo(edges[i].from.x, edges[i].from.y)
+    path.lineTo(edges[i].to.x, edges[i].to.y)
+  }
+  const d = path.toString()
+  const pathBounds = getSVGPathBounds(d)
+  pathBounds.height = Math.max(pathBounds.height, 1)
+  pathBounds.width = Math.max(pathBounds.width, 1)
+  const center = {
+    x: pathBounds.minX + pathBounds.width / 2,
+    y: pathBounds.minY + pathBounds.height / 2,
+  }
+  return (
+    <SVGPathComponent
+      rotation={0}
+      center={center}
+      size={pathBounds}
+      paths={[
+        {
+          stroke: "green",
+          strokeWidth: 0.02,
+          d,
+        },
+      ]}
+    />
+  )
+}
+
+export default SchematicTrace

package/src/schematic-components/SimpleCapacitor.tsx

@@ -0,0 +1,29 @@
+import * as Type from "lib/types"
+import SVGPathComponent from "./SVGPathComponent"
+
+interface Props {
+  component: {
+    source: Type.SimpleCapacitor
+    schematic: Type.SchematicComponent
+  }
+}
+
+export const SimpleCapacitor = ({
+  component: { source, schematic },
+}: Props) => {
+  return (
+    <SVGPathComponent
+      rotation={schematic.rotation}
+      center={schematic.center}
+      size={schematic.size}
+      paths={[
+        { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
+        { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
+        { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
+        { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" },
+      ]}
+    />
+  )
+}
+
+export default SimpleCapacitor

package/src/schematic-components/SimpleDiode.tsx

@@ -0,0 +1,38 @@
+import * as Type from "lib/types"
+import SVGPathComponent from "./SVGPathComponent"
+
+interface Props {
+  component: {
+    source: Type.SimpleDiode
+    schematic: Type.SchematicComponent
+  }
+}
+
+export const SimpleDiode = ({ component: { source, schematic } }: Props) => {
+  return (
+    <SVGPathComponent
+      rotation={schematic.rotation}
+      center={schematic.center}
+      size={schematic.size}
+      paths={[
+        { stroke: "red", strokeWidth: 2, d: "M 0,0 H 21" },
+        { stroke: "red", strokeWidth: 2, d: "M 49,0 H 59" },
+        { stroke: "red", strokeWidth: 2, d: "M 49,0 L 21 14 V -14 Z" },
+        { stroke: "red", strokeWidth: 2, d: "M 49,-14 V 14" },
+        // For LEDs
+        // {
+        //   stroke: "red",
+        //   strokeWidth: 2,
+        //   d: "M 35 -32 l 7 5.25 l 1.75 -9.625 z m 3.5 2.625 l -5.25 7",
+        // },
+        // {
+        //   stroke: "red",
+        //   strokeWidth: 2,
+        //   d: "M 52 -26 l 7 5.25 l 1.75 -9.625 z m 3.5 2.625 l -5.25 7",
+        // },
+      ]}
+    />
+  )
+}
+
+export default SimpleDiode

package/src/schematic-components/SimpleGround.tsx

@@ -0,0 +1,28 @@
+import * as Type from "lib/types"
+import SVGPathComponent from "./SVGPathComponent"
+
+interface Props {
+  component: {
+    source: Type.SimpleGround
+    schematic: Type.SchematicComponent
+  }
+}
+
+export const SimpleGround = ({ component: { source, schematic } }: Props) => {
+  return (
+    <SVGPathComponent
+      rotation={schematic.rotation}
+      center={schematic.center}
+      size={schematic.size}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 0.7,
+          d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12",
+        },
+      ]}
+    />
+  )
+}
+
+export default SimpleGround

package/src/schematic-components/SimpleInductor.tsx

@@ -0,0 +1,29 @@
+import * as Type from "lib/types"
+import SVGPathComponent from "./SVGPathComponent"
+
+interface Props {
+  component: {
+    source: Type.SimpleInductor
+    schematic: Type.SchematicComponent
+  }
+}
+
+export const SimpleInductor = ({ component: { source, schematic } }: Props) => {
+  return (
+    <SVGPathComponent
+      rotation={schematic.rotation}
+      center={schematic.center}
+      size={schematic.size}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 1,
+          // https://commons.wikimedia.org/wiki/File:Electrical_symbols_library.svg
+          d: "m 371,710.41665 h -14 c -0.0421,-16.39898 -14.02104,-16.39898 -14,0 -0.021,-16.399 -14.04182,-16.34072 -14,0 -2.6e-4,-16.45722 -14.04236,-16.45722 -14,0 2.8e-4,-16.3407 -13.97896,-16.39898 -14,0 -0.0421,-16.39898 -13.91338,-16.39898 -13.91338,0 H 273",
+        },
+      ]}
+    />
+  )
+}
+
+export default SimpleInductor