@tscircuit/schematic-viewer 1.3.0 → 1.4.1

package/src/stories/three-sided-bug.stories.tsx

@@ -3,21 +3,23 @@ import { Schematic } from "Schematic"
 export const ThreeSidedBug = () => {
   return (
     <Schematic style={{ height: 600 }}>
-      <bug
-        name="B1"
-        schPortArrangement={{
-          leftSize: 3,
-          rightSize: 3,
-          topSize: 0,
-          bottomSize: 5,
-        }}
-        schX={8}
-        schY={3}
-        pinLabels={{
-          "1": "D0",
-          "2": "D1",
-        }}
-      />
+      <board width={10} height={10}>
+        <bug
+          name="B1"
+          schPortArrangement={{
+            leftSize: 3,
+            rightSize: 3,
+            topSize: 0,
+            bottomSize: 5,
+          }}
+          schX={8}
+          schY={3}
+          pinLabels={{
+            "1": "D0",
+            "2": "D1",
+          }}
+        />
+      </board>
     </Schematic>
   )
 }

package/src/pages/led-circuit.tsx

@@ -1,96 +0,0 @@
-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 style={{ height: 400 }} elements={elements} />
-      <pre>{JSON.stringify(elements, null, "  ")}</pre>
-    </>
-  )
-}

package/src/schematic-components/ProjectComponent.tsx

@@ -1,70 +0,0 @@
-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>
-}
-
-/**
- * @deprecated use SchematicElement instead because we're most likely
- * deprecating projects
- */
-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,
-            } as any
-          }
-        />
-      ))}
-      {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,
-            } as any
-          }
-        />
-      ))}
-      {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/SchematicBox.tsx

@@ -1,29 +0,0 @@
-import * as Type from "lib/types"
-import { directionToVec } from "lib/utils/direction-to-vec"
-import * as Component from "./"
-
-interface Props {
-  box: {
-    schematic: Type.SchematicBox
-  }
-}
-
-export const SchematicBox = ({ box: { schematic } }: Props) => {
-  const { width: w, height: h } = schematic
-  return (
-    <Component.SVGPathComponent
-      rotation={0}
-      center={schematic}
-      size={{ width: schematic.width, height: schematic.height }}
-      paths={[
-        {
-          stroke: "red",
-          strokeWidth: 0.02,
-          d: `M 0 0 l ${w} 0 l 0 ${h} l -${w} 0 z`,
-        },
-      ]}
-    />
-  )
-}
-
-export default SchematicBox

package/src/schematic-components/SchematicBug.tsx

@@ -1,107 +0,0 @@
-import {
-  getPortArrangementSize,
-  getPortIndices,
-  getPortPosition,
-} from "@tscircuit/builder"
-import type { SchematicComponent } from "@tscircuit/soup"
-import * as Type from "lib/types"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import SVGPathComponent from "./SVGPathComponent"
-import SchematicText from "./SchematicText"
-
-interface Props {
-  component: {
-    source: Type.SimpleBug
-    schematic: SchematicComponent
-  }
-}
-
-export const SchematicBug = ({ component: { source, schematic } }: Props) => {
-  const location = schematic.center
-  const port_arrangement = {
-    top_size: 0,
-    bottom_size: 0,
-    ...schematic.port_arrangement,
-  }
-  const manufacturerPartNumber = source.manufacturerPartNumber
-  // const port_labels = schematic.port_labels!
-  let bugw = schematic.size.width // bug width
-  let bugh = schematic.size.height
-
-  const { total_ports, width, height } =
-    getPortArrangementSize(port_arrangement)
-  const port_indices = getPortIndices(port_arrangement)
-
-  // TODO remove, this seems to be due to a builder bug
-  if (isNaN(bugw)) bugw = width
-  if (isNaN(bugh)) bugh = height
-  // TODO throw if schematic.size doesn't match computed port_arrangement size
-
-  const paths = [
-    {
-      stroke: "red",
-      strokeWidth: 0.02,
-      d: `M ${-bugw / 2} ${-bugh / 2} L ${bugw / 2} ${-bugh / 2} L ${
-        bugw / 2
-      } ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`,
-    },
-    ...port_indices.map((portNum) => {
-      // TODO get the ports passed to the components and use those positions
-      const pos = getPortPosition(
-        { ...port_arrangement, pin_spacing: schematic.pin_spacing },
-        portNum,
-      )
-
-      const x2 =
-        pos.side === "left"
-          ? -bugw / 2
-          : pos.side === "right"
-            ? bugw / 2
-            : pos.x
-      const y2 =
-        pos.side === "top"
-          ? bugh / 2
-          : pos.side === "bottom"
-            ? -bugh / 2
-            : pos.y
-
-      return {
-        stroke: "red",
-        strokeWidth: 0.02,
-        d: `M ${pos.x} ${pos.y} L ${x2} ${y2}`,
-      }
-    }),
-  ]
-
-  const actualSize = getSVGPathBounds(paths.map((p) => p.d).join(" "))
-  const actualCenter = {
-    x: schematic.center.x + (actualSize.minX + actualSize.maxX) / 2,
-    y: schematic.center.y + (actualSize.minY + actualSize.maxY) / 2,
-  }
-
-  return (
-    <>
-      <SVGPathComponent
-        rotation={schematic.rotation}
-        center={actualCenter}
-        size={actualSize}
-        paths={paths}
-      />
-      <SchematicText
-        schematic_text={{
-          anchor: "bottom",
-          position: {
-            x: location.x + actualSize.minX / 1.5,
-            y: location.y + actualSize.minY,
-          },
-          schematic_component_id: "SYNTHETIC",
-          schematic_text_id: "SYNTHETIC",
-          text: manufacturerPartNumber,
-          type: "schematic_text",
-        }}
-      />
-    </>
-  )
-}
-
-export default SchematicBug

package/src/schematic-components/SchematicLine.tsx

@@ -1,48 +0,0 @@
-import * as Type from "lib/types"
-import { directionToVec } from "lib/utils/direction-to-vec"
-import * as Component from "."
-import Path from "svg-path-generator"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-
-interface Props {
-  line: {
-    schematic: Type.SchematicLine
-  }
-}
-
-export const SchematicLine = ({ line: { schematic } }: Props) => {
-  const { x1, x2, y1, y2 } = schematic
-  const dx = x2 - x1
-  const dy = y2 - y1
-  // const width = Math.abs(dx) + 0.1
-  // const height = Math.abs(dy) + 0.1
-  // const center = { x: x1 + dx / 2, y: y1 + dy / 2 }
-  const path = Path()
-  path.moveTo(x1, y1)
-  path.lineTo(x2, y2)
-  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 (
-    <Component.SVGPathComponent
-      rotation={0}
-      center={center}
-      size={pathBounds}
-      paths={[
-        {
-          stroke: "red",
-          strokeWidth: 0.02,
-          d: d,
-        },
-      ]}
-    />
-  )
-}
-
-export default SchematicLine

package/src/schematic-components/SchematicPath.tsx

@@ -1,51 +0,0 @@
-import * as Type from "lib/types"
-import { directionToVec } from "lib/utils/direction-to-vec"
-import * as Component from "."
-import Path from "svg-path-generator"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-
-interface Props {
-  path: {
-    schematic: Type.SchematicPath
-  }
-}
-
-export const SchematicPath = (props: Props) => {
-  const { points, is_filled, is_closed, fill_color } = props.path.schematic
-
-  if (points.length === 0) return null
-  const path = Path()
-  path.moveTo(points[0].x, points[0].y)
-  for (const point of points.slice(1)) {
-    path.lineTo(point.x, point.y)
-  }
-  if (is_closed) {
-    path.closePath()
-  }
-  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 (
-    <Component.SVGPathComponent
-      rotation={0}
-      center={center}
-      size={pathBounds}
-      paths={[
-        {
-          stroke: is_filled ? "none" : fill_color ?? "red",
-          strokeWidth: 0.02,
-          fill: is_filled ? fill_color ?? "red" : undefined,
-          d: d,
-        },
-      ]}
-    />
-  )
-}
-
-export default SchematicPath

package/src/schematic-components/SchematicPort.tsx

@@ -1,63 +0,0 @@
-import * as Type from "lib/types"
-import { directionToVec } from "lib/utils/direction-to-vec"
-import * as Component from "./"
-import { useState } from "react"
-
-interface Props {
-  port: {
-    source_port: Type.SourcePort
-    source_component: Type.SourceComponent
-    schematic: Type.SchematicPort
-  }
-}
-
-export const SchematicPort = ({
-  port: { source_port, source_component, schematic },
-}: Props) => {
-  const hoverName = source_component?.name
-    ? `.${source_component.name} > .${
-        source_port?.name ?? source_port?.pin_number
-      }`
-    : `.${source_port?.name ?? source_port?.pin_number}`
-  const vec = directionToVec(schematic.facing_direction)
-  return (
-    <Component.SVGPathComponent
-      rotation={0}
-      hoverContent={
-        <div>
-          {hoverName}
-          <br />
-          {source_port?.pin_number && `Pin ${source_port.pin_number}`}
-          {/* <br />
-          <div style={{ opacity: 0.5 }}>
-            {schematic.schematic_port_id}
-            <br />
-            {schematic.source_port_id}
-          </div> */}
-        </div>
-      }
-      center={schematic.center}
-      size={{
-        width: 0.2 + Math.abs(vec.x) * 0.04,
-        height: 0.2 + Math.abs(vec.y) * 0.04,
-      }}
-      zIndex={10}
-      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 ${vec.x * 7} ${vec.y * 7}`,
-            }
-          : null,
-      ].filter(Boolean)}
-    />
-  )
-}
-
-export default SchematicPort

package/src/schematic-components/SimpleCapacitor.tsx

@@ -1,29 +0,0 @@
-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: 1, d: "M 12 0 l 0 30" },
-        { stroke: "red", strokeWidth: 1, 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

@@ -1,42 +0,0 @@
-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}
-      size={{
-        height: 0.5,
-        width: 1,
-      }}
-      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

@@ -1,30 +0,0 @@
-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}
-      invertY
-      shiftToBottom
-      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

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

package/src/schematic-components/SimplePowerSource.tsx

@@ -1,43 +0,0 @@
-import * as Type from "lib/types"
-import SVGPathComponent from "./SVGPathComponent"
-
-interface Props {
-  component: {
-    source: Type.SimplePowerSource
-    schematic: Type.SchematicComponent
-  }
-}
-
-export const SimplePowerSource = ({
-  component: { source, schematic },
-}: Props) => {
-  return (
-    <SVGPathComponent
-      rotation={schematic.rotation}
-      center={schematic.center}
-      size={schematic.size}
-      invertY
-      paths={[
-        {
-          stroke: "red",
-          strokeWidth: 1,
-          d: "M 0 -17 L 0 -3 M -8 3 L 8 3 M 0 17 L 0 3 M -12 -3 L 12 -3",
-        },
-        // positive symbol
-        {
-          stroke: "red",
-          strokeWidth: 0.5,
-          d: "M 8 -9 L 8 -6 M 9.5 -7.5 L 6.5 -7.5",
-        },
-        // negative symbol
-        {
-          stroke: "red",
-          strokeWidth: 0.5,
-          d: "M 9.5 7.5 L 6.5 7.5",
-        },
-      ]}
-    />
-  )
-}
-
-export default SimplePowerSource