@tscircuit/schematic-viewer 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.4",
+    "react-supergrid": "^1.0.3",
     "use-mouse-matrix-transform": "^1.1.5"
   }
 }

package/src/Schematic.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react"
 import { ProjectComponent } from "schematic-components"
+import { SuperGrid, toMMSI } from "react-supergrid"
 import {
   createProjectBuilder,
   createProjectFromElements,
@@ -13,6 +14,7 @@ import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { ErrorBoundary } from "react-error-boundary"
 import { identity, compose, scale, translate } from "transformation-matrix"
 import { useRenderContext } from "lib/render-context"
+import useMeasure from "react-use-measure"
 
 const fallbackRender =
   (elm) =>
@@ -24,6 +26,9 @@ const fallbackRender =
     )
   }
 
+const toMMSINeg = (v: number, z: number) =>
+  v >= 0 ? toMMSI(v, z) : `-${toMMSI(-v, z)}`
+
 export const Schematic = ({
   children,
   elements: initialElements,
@@ -44,6 +49,8 @@ export const Schematic = ({
   const [elements, setElements] = useState<any>(initialSoup ?? [])
   const [project, setProject] = useState<any>(null)
   const setCameraTransform = useRenderContext((s) => s.setCameraTransform)
+  const cameraTransform = useRenderContext((s) => s.camera_transform)
+  const [boundsRef, bounds] = useMeasure()
   const { ref, setTransform } = useMouseMatrixTransform({
     onSetTransform: (transform) => {
       setCameraTransform(transform)
@@ -96,8 +103,20 @@ export const Schematic = ({
         cursor: "grab",
         ...style,
       }}
-      ref={ref}
+      ref={(el) => {
+        ref.current = el
+        boundsRef(el)
+      }}
     >
+      <SuperGrid
+        stringifyCoord={(x, y, z) => {
+          if (z === 0) return ""
+          return `${toMMSINeg(x, z)}, ${toMMSINeg(y, z)}`
+        }}
+        width={bounds.width}
+        height={bounds.height}
+        transform={cameraTransform}
+      />
       {elements?.map((elm, i) => (
         <ErrorBoundary key={i} fallbackRender={fallbackRender(elm)}>
           <SchematicElement

package/src/lib/types/core.ts

@@ -48,6 +48,27 @@ export interface SchematicComponent {
   }
 }
 
+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 SchematicTrace {
   type: "schematic_trace"
   schematic_trace_id: string

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

@@ -7,11 +7,22 @@ export const collectElementRefs = (elm: AnyElement, allElms: AnyElement[]) => {
       e.source_component_id === (elm as any).source_component_id
   )
   if (
-    ["schematic_component", "schematic_trace", "schematic_port"].includes(
-      elm.type
-    )
+    [
+      "schematic_component",
+      "schematic_trace",
+      "schematic_port",
+      "schematic_box",
+      "schematic_line",
+    ].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,
     }

package/src/schematic-components/SchematicBox.tsx

@@ -0,0 +1,29 @@
+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.2,
+          d: `M 0 0 l ${w} 0 l 0 ${h} l -${w} 0 z`,
+        },
+      ]}
+    />
+  )
+}
+
+export default SchematicBox

package/src/schematic-components/SchematicComponent.tsx

@@ -5,6 +5,7 @@ interface Props {
   component: {
     source: Type.SourceComponent
     schematic: Type.SchematicComponent
+    schematic_children: any[]
   }
 }
 

package/src/schematic-components/SchematicElement.tsx

@@ -3,7 +3,9 @@ import { collectElementRefs } from "lib/utils/collect-element-refs"
 import SchematicComponent from "./SchematicComponent"
 import SchematicPort from "./SchematicPort"
 import SchematicText from "./SchematicText"
+import SchematicBox from "./SchematicBox"
 import SchematicTrace from "./SchematicTrace"
+import SchematicLine from "./SchematicLine"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -37,6 +39,18 @@ export const SchematicElement = ({
     )
   }
 
+  if (element.type === "schematic_box") {
+    return (
+      <SchematicBox box={collectElementRefs(element, allElements) as any} />
+    )
+  }
+
+  if (element.type === "schematic_line") {
+    return (
+      <SchematicLine line={collectElementRefs(element, allElements) as any} />
+    )
+  }
+
   if (element.type === "schematic_text") {
     return <SchematicText schematic_text={element} />
   }

package/src/schematic-components/SchematicLine.tsx

@@ -0,0 +1,35 @@
+import * as Type from "lib/types"
+import { directionToVec } from "lib/utils/direction-to-vec"
+import * as Component from "."
+
+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 }
+
+  return (
+    <Component.SVGPathComponent
+      rotation={0}
+      center={center}
+      size={{ width, height }}
+      paths={[
+        {
+          stroke: "red",
+          strokeWidth: 10,
+          d: `M 0 0 l ${dx * 100} ${dy * 100}`,
+        },
+      ]}
+    />
+  )
+}
+
+export default SchematicLine

package/src/schematic-components/SchematicText.tsx

@@ -23,6 +23,7 @@ export const SchematicText = ({ schematic_text }: Props) => {
   } else if (anchor === "right") {
     offset = [-bounds.width, -bounds.height / 2]
   }
+
   return (
     <div
       ref={boundsRef}

package/src/stories/net-alias.stories.tsx

@@ -0,0 +1,92 @@
+import { Schematic } from "../Schematic"
+
+const soup = [
+  {
+    type: "source_component",
+    source_component_id: "net_alias_0",
+    ftype: "net_alias",
+    source: {
+      type: "source_component",
+      source_component_id: "net_alias_0",
+      ftype: "net_alias",
+    },
+  },
+  {
+    type: "schematic_component",
+    schematic_component_id: "schematic_net_alias_component_0",
+    source_component_id: "net_alias_0",
+    center: {
+      x: 2,
+      y: 2,
+    },
+    rotation: 0,
+    size: {
+      width: 0,
+      height: 0,
+    },
+    source: {
+      type: "source_component",
+      source_component_id: "net_alias_0",
+      ftype: "net_alias",
+    },
+  },
+  {
+    type: "source_port",
+    name: "gnd",
+    source_port_id: "source_port_0",
+  },
+  {
+    type: "schematic_port",
+    schematic_port_id: "schematic_port_0",
+    source_port_id: "source_port_0",
+    center: {
+      x: 2,
+      y: 2,
+    },
+    source: {
+      type: "source_port",
+      name: "gnd",
+      source_port_id: "source_port_0",
+    },
+  },
+  {
+    drawing_type: "line",
+    type: "schematic_line",
+    x1: 0,
+    y1: 1,
+    x2: 4,
+    y2: 1,
+    schematic_component_id: "schematic_net_alias_component_0",
+    source: null,
+  },
+  {
+    drawing_type: "line",
+    type: "schematic_line",
+    x1: 2,
+    y1: 1,
+    x2: 2,
+    y2: 2,
+    schematic_component_id: "schematic_net_alias_component_0",
+    source: null,
+  },
+  {
+    anchor: "center",
+    type: "schematic_text",
+    position: {
+      x: 2,
+      y: 0.75,
+    },
+    text: "gnd",
+    schematic_component_id: "schematic_net_alias_component_0",
+    source: null,
+  },
+]
+
+export const NetAliasSoup = () => {
+  return <Schematic style={{ height: 500 }} soup={soup} />
+}
+
+export default {
+  title: "NetAliasSoup",
+  component: NetAliasSoup,
+}