@tscircuit/schematic-viewer 1.1.9 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -33,7 +33,7 @@
     "@storybook/react": "^7.4.0",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@tscircuit/builder": "^1.5.5",
-    "@tscircuit/react-fiber": "^1.0.7",
+    "@tscircuit/react-fiber": "^1.0.12",
     "@tscircuit/routing": "^1.3.0",
     "@tscircuit/table-viewer": "^0.0.6",
     "@types/node": "^18.6.0",

package/src/lib/types/core.ts

@@ -1,4 +1,4 @@
-import { SourceComponent } from "./source-component"
+import { AnySourceComponent, SourceComponent } from "./source-component"
 
 export interface SchematicConfig {
   type: "schematic_config"
@@ -69,6 +69,19 @@ export interface SchematicLine {
   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
@@ -177,7 +190,7 @@ export interface Project {
 export type AnyElement =
   | Project
   | SourceConfig
-  | SourceComponent
+  | AnySourceComponent
   | SourceGroup
   | SourceTrace
   | SourcePort
@@ -192,6 +205,8 @@ export type AnyElement =
   | SchematicConfig
   | SchematicPort
   | SchematicText
+  | SchematicLine
+  | SchematicPath
 
 export type ElementType = AnyElement["type"]
 export type ElementOfType<T extends ElementType> = Extract<

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

@@ -56,8 +56,12 @@ export type AnySourceComponent =
   | SimpleGround
   | SimpleDiode
   | LightEmittingDiode
+  | Omit<SourceComponentBase, "ftype">
 
-export type SourceComponentFType = AnySourceComponent["ftype"]
+export type SourceComponentFType = Extract<
+  AnySourceComponent,
+  { ftype: string }
+>["ftype"]
 export type SourceComponent<
   T extends SourceComponentFType = SourceComponentFType
 > = Extract<AnySourceComponent, { ftype: T }>

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

@@ -13,6 +13,7 @@ export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
       "schematic_port",
       "schematic_box",
       "schematic_line",
+      "schematic_path",
     ].includes(elm.type)
   ) {
     const schematic_children = allElms.filter(

package/src/schematic-components/SVGPathComponent.tsx

@@ -10,6 +10,7 @@ interface Props {
   paths: Array<{
     strokeWidth: number
     stroke: string
+    fill?: string
     d: string
   }>
 }
@@ -51,7 +52,7 @@ export const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {
       {paths.map((p, i) => (
         <path
           key={i}
-          fill="none"
+          fill={p.fill ?? "none"}
           strokeLinecap="round"
           strokeWidth={2 * (p.strokeWidth || 1)}
           stroke={p.stroke || "red"}

package/src/schematic-components/SchematicComponent.tsx

@@ -15,6 +15,8 @@ interface Props {
  */
 export const SchematicComponent = ({ component }: Props) => {
   const { source, schematic } = component
+  if (!source.ftype) return null
+
   switch (source.ftype) {
     case "simple_resistor": {
       return <Component.SimpleResistor component={{ source, schematic }} />

package/src/schematic-components/SchematicElement.tsx

@@ -7,6 +7,7 @@ import SchematicBox from "./SchematicBox"
 import SchematicTrace from "./SchematicTrace"
 import SchematicLine from "./SchematicLine"
 import RenderError from "./RenderError"
+import SchematicPath from "./SchematicPath"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -52,6 +53,12 @@ export const SchematicElement = ({
     )
   }
 
+  if (element.type === "schematic_path") {
+    return (
+      <SchematicPath path={collectElementRefs(element, allElements) as any} />
+    )
+  }
+
   if (element.type === "schematic_text") {
     return <SchematicText schematic_text={element} />
   }

package/src/schematic-components/SchematicPath.tsx

@@ -0,0 +1,52 @@
+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) => {
+  console.log("SchematicPath", 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/stories/component-drawing-example.stories.tsx

@@ -0,0 +1,17 @@
+import { Schematic } from "Schematic"
+
+export const ComponentDrawingExample = () => {
+  return (
+    <Schematic style={{ height: 600 }}>
+      <component>
+        <schematicbox x={0} y={0} width="6mm" height="6mm" />
+        <schematicline x1={0} y1={0} x2={1} y2={1} />
+      </component>
+    </Schematic>
+  )
+}
+
+export default {
+  title: "ComponentDrawingExample",
+  component: ComponentDrawingExample,
+}

package/src/stories/schematic-path.stories.tsx

@@ -0,0 +1,40 @@
+import { AnyElement } from "lib/types"
+import { Schematic } from "../Schematic"
+
+const soup: AnyElement[] = [
+  {
+    type: "source_component",
+    source_component_id: "source_component_1",
+    name: "my source component",
+  },
+  {
+    type: "schematic_component",
+    schematic_component_id: "schematic_component_1",
+    center: { x: 0, y: 0 },
+    rotation: 0,
+    size: { width: 1, height: 1 },
+    source_component_id: "source_component_1",
+  },
+  {
+    type: "schematic_path",
+    drawing_type: "path",
+    is_filled: true,
+    is_closed: true,
+    fill_color: "red",
+    points: [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 0, y: 1 },
+    ],
+    schematic_component_id: "schematic_component_1",
+  },
+]
+
+export const SchematicPathSoup = () => {
+  return <Schematic style={{ height: 500 }} soup={soup} />
+}
+
+export default {
+  title: "SchematicPathSoup",
+  component: SchematicPathSoup,
+}