npm - @tscircuit/schematic-viewer - Versions diffs - 1.2.13 → 1.3.0 - Mend

@tscircuit/schematic-viewer 1.2.13 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/.github/workflows/chromatic.yml +30 -0
package/.github/workflows/npm-build.yml +26 -0
package/.github/workflows/npm-typecheck.yml +26 -0
package/dist/index.d.ts +3 -3
package/dist/index.js +140 -89
package/dist/index.js.map +1 -1
package/package.json +20 -10
package/renovate.json +17 -0
package/src/Schematic.tsx +16 -19
package/src/lib/types/source-component.ts +1 -0
package/src/lib/utils/collect-element-refs.ts +3 -3
package/src/lib/utils/get-rotation-from-anchor-side.ts +11 -0
package/src/lib/utils/get-vec-from-anchor-side.ts +11 -0
package/src/schematic-components/DebugPoint.tsx +25 -0
package/src/schematic-components/SchematicBug.tsx +27 -10
package/src/schematic-components/SchematicElement.tsx +7 -13
package/src/schematic-components/SchematicNetLabel.tsx +21 -8
package/src/stories/basics/schematic-net-label.stories.tsx +112 -166
package/src/stories/basics/schematic-net-labels-2.stories.tsx +33 -0
package/src/stories/bug-connections.stories.tsx +6 -6
package/src/stories/bug-high-port-numbers.stories.tsx +20 -17
package/src/stories/bug-pin-spacing.stories.tsx +1 -0
package/src/stories/bugs/bug1-y-flip.stories.tsx +3 -2
package/src/stories/bugs/bug8-autolayout.stories.tsx +2 -2
package/src/stories/component-drawing-example.stories.tsx +2 -2
package/src/stories/led-circuit-builder.stories.tsx +1 -1
package/src/stories/led-circuit-react.stories.tsx +14 -11
package/src/stories/net-alias.stories.tsx +1 -1
package/src/stories/off-center-render.stories.tsx +6 -6
package/src/stories/rotated-resistor.stories.tsx +1 -1
package/src/stories/schematic-path.stories.tsx +1 -1
package/src/stories/three-sided-bug.stories.tsx +8 -8

package/src/stories/basics/schematic-net-label.stories.tsx CHANGED Viewed

@@ -4,182 +4,128 @@ export const SchematicNetLabel = () => {
   return (
     <Schematic
       style={{ height: 500 }}
-      soup={
+      soup={[
         {
-          elements: [
-            {
-              type: "source_component",
-              source_component_id: "simple_resistor_0",
-              name: "R1",
-              supplier_part_numbers: {},
-              ftype: "simple_resistor",
-              resistance: 100,
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "schematic_component",
-              source_component_id: "simple_resistor_0",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              rotation: 0,
-              size: {
-                width: 1,
-                height: 0.3,
-              },
-              center: {
-                x: 0,
-                y: 0,
-              },
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "source_port",
-              name: "left",
-              source_port_id: "source_port_0",
-              source_component_id: "simple_resistor_0",
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "schematic_port",
-              schematic_port_id: "schematic_port_0",
-              source_port_id: "source_port_0",
-              center: {
-                x: -0.5,
-                y: 0,
-              },
-              facing_direction: "left",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              source: {
-                type: "source_port",
-                name: "left",
-                source_port_id: "source_port_0",
-                source_component_id: "simple_resistor_0",
-              },
-            },
-            {
-              type: "source_port",
-              name: "right",
-              source_port_id: "source_port_1",
-              source_component_id: "simple_resistor_0",
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
+          type: "source_component",
+          source_component_id: "simple_resistor_0",
+          name: "R1",
+          supplier_part_numbers: {},
+          ftype: "simple_resistor",
+          resistance: 100,
+        },
+        {
+          type: "schematic_component",
+          source_component_id: "simple_resistor_0",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          rotation: 0,
+          size: {
+            width: 1,
+            height: 0.3,
+          },
+          center: {
+            x: 0,
+            y: 0,
+          },
+        },
+        {
+          type: "source_port",
+          name: "left",
+          source_port_id: "source_port_0",
+          source_component_id: "simple_resistor_0",
+        },
+        {
+          type: "schematic_port",
+          schematic_port_id: "schematic_port_0",
+          source_port_id: "source_port_0",
+          center: {
+            x: -0.5,
+            y: 0,
+          },
+          facing_direction: "left",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+        },
+        {
+          type: "source_port",
+          name: "right",
+          source_port_id: "source_port_1",
+          source_component_id: "simple_resistor_0",
+        },
+        {
+          type: "schematic_port",
+          schematic_port_id: "schematic_port_1",
+          source_port_id: "source_port_1",
+          center: {
+            x: 0.5,
+            y: 0,
+          },
+          facing_direction: "right",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+        },
+        {
+          type: "schematic_text",
+          text: "R1",
+          schematic_text_id: "schematic_text_0",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          anchor: "left",
+          position: {
+            x: -0.2,
+            y: -0.5,
+          },
+          rotation: 0,
+        },
+        {
+          type: "schematic_text",
+          text: "100",
+          schematic_text_id: "schematic_text_1",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          anchor: "left",
+          position: {
+            x: -0.2,
+            y: -0.3,
+          },
+          rotation: 0,
+        },
+        {
+          type: "source_net",
+          member_source_group_ids: [],
+          source_net_id: "net_0",
+          name: "N1",
+        },
+        {
+          type: "source_trace",
+          connected_source_port_ids: ["source_port_1"],
+          connected_source_net_ids: ["net_0"],
+          source_trace_id: "source_trace_0",
+        },
+        {
+          type: "schematic_net_label",
+          source_net_id: "net_0",
+          text: "N1",
+          anchor_side: "left",
+          center: {
+            x: 1.5,
+            y: 0,
+          },
+        },
+        {
+          type: "schematic_trace",
+          schematic_trace_id: "schematic_trace_0",
+          source_trace_id: "source_trace_0",
+          edges: [
             {
-              type: "schematic_port",
-              schematic_port_id: "schematic_port_1",
-              source_port_id: "source_port_1",
-              center: {
+              from: {
                 x: 0.5,
                 y: 0,
               },
-              facing_direction: "right",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              source: {
-                type: "source_port",
-                name: "right",
-                source_port_id: "source_port_1",
-                source_component_id: "simple_resistor_0",
-              },
-            },
-            {
-              type: "schematic_text",
-              text: "R1",
-              schematic_text_id: "schematic_text_0",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              anchor: "left",
-              position: {
-                x: -0.2,
-                y: -0.5,
-              },
-              rotation: 0,
-              source: null,
-            },
-            {
-              type: "schematic_text",
-              text: 100,
-              schematic_text_id: "schematic_text_1",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              anchor: "left",
-              position: {
-                x: -0.2,
-                y: -0.3,
-              },
-              rotation: 0,
-              source: null,
-            },
-            {
-              type: "source_net",
-              member_source_group_ids: [],
-              source_net_id: "net_0",
-              name: "N1",
-              source: null,
-            },
-            {
-              type: "source_trace",
-              connected_source_port_ids: ["source_port_1"],
-              connected_source_net_ids: ["net_0"],
-              source_trace_id: "source_trace_0",
-              source: null,
-            },
-            {
-              type: "schematic_net_label",
-              source_net_id: "net_0",
-              text: "N1",
-              anchor_side: "left",
-              center: {
+              to: {
                 x: 1.5,
                 y: 0,
               },
-              source: null,
-            },
-            {
-              type: "schematic_trace",
-              schematic_trace_id: "schematic_trace_0",
-              source_trace_id: "source_trace_0",
-              edges: [
-                {
-                  from: {
-                    x: 0.5,
-                    y: 0,
-                  },
-                  to: {
-                    x: 1.5,
-                    y: 0,
-                  },
-                  from_schematic_port_id: "schematic_port_1",
-                },
-              ],
-              source: null,
+              from_schematic_port_id: "schematic_port_1",
             },
           ],
-        }.elements
-      }
+        },
+      ]}
     />
   )
 }

package/src/stories/basics/schematic-net-labels-2.stories.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { Schematic } from "../../Schematic"
+export const SchematicNetLabel2 = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <resistor resistance="1k" name="R1" schX={-2} schY={0} />
+      <resistor resistance="1k" name="R2" schX={2} schY={0} />
+      <resistor
+        schRotation="90deg"
+        resistance="1k"
+        name="R3"
+        schX={0}
+        schY={2}
+      />
+      <resistor
+        schRotation="90deg"
+        resistance="1k"
+        name="R4"
+        schX={0}
+        schY={-2}
+      />
+      <trace from=".R1 > .right" to="net.N1" />
+      <trace from=".R2 > .left" to="net.N2" />
+      <trace from=".R3 > .left" to="net.N3" />
+      <trace from=".R4 > .right" to="net.GND2" />
+    </Schematic>
+  )
+}
+export default {
+  title: "Basics/SchematicNetLabel2",
+  component: SchematicNetLabel2,
+}

package/src/stories/bug-connections.stories.tsx CHANGED Viewed

@@ -5,13 +5,13 @@ export const BugConnections = () => {
     <Schematic style={{ height: 600 }}>
       <bug
         name="B1"
-        port_arrangement={{
-          left_size: 3,
-          right_size: 2,
+        schPortArrangement={{
+          leftSize: 3,
+          rightSize: 2,
         }}
-        sch_cx={8}
-        sch_cy={3}
-        port_labels={{
+        schX={8}
+        schY={3}
+        pinLabels={{
           "1": "D0",
           "2": "D1",
         }}

package/src/stories/bug-high-port-numbers.stories.tsx CHANGED Viewed

@@ -4,18 +4,19 @@ const FTDIBasic3v3 = () => (
   <group>
     <bug
       name="U1"
-      port_arrangement={{
-        left_side: {
+      manufacturerPartNumber="part-number"
+      schPortArrangement={{
+        leftSide: {
           pins: [16, 15, 20, 17, 4, 27, 28, 19, 26, 25, 7, 18, 21],
           direction: "top-to-bottom",
         },
-        right_side: {
+        rightSide: {
           pins: [1, 5, 11, 3, 2, 9, 10, 6, 23, 22, 14, 13, 12],
           direction: "top-to-bottom",
         },
       }}
       footprint="ssop28Db"
-      port_labels={{
+      pinLabels={{
         "1": "TXD",
         "5": "RXD",
         "11": "CTS",
@@ -48,31 +49,33 @@ const FTDIBasic3v3 = () => (
       resistance="1kohm"
       name="R1"
       footprint="0805"
-      center={[3, 0]}
-      rotation="90deg"
+      schX={3}
+      schY={0}
+      schRotation="90deg"
     />
     <resistor
       resistance="1kohm"
       name="R2"
       footprint="0805"
-      center={[4.5, 0]}
-      rotation="90deg"
+      schX={4.5}
+      schY={0}
+      schRotation="90deg"
     />
-    <diode name="LED1" footprint="0805" rotation="90deg" center={[3, 2]} />
-    <diode name="LED2" footprint="0805" rotation="90deg" center={[4.5, 2]} />
-    <netalias net="5V" center={[3, -2]} />
-    <netalias net="5V" center={[4.5, -2]} />
+    <diode name="LED1" footprint="0805" schRotation={"90deg"} schX={3} schY={2} />
+    <diode name="LED2" footprint="0805" schRotation={"90deg"} schX={4.5} schY={2} />
+    <netalias net="5V" schX={3} schY={-2} />
+    <netalias net="5V" schX={4.5} schY={-2} />
     <trace path={[".5V", ".R2 > port.left"]} />
     <trace path={[".5V", ".R1 > port.left"]} />
     <trace path={[".R1 > port.right", ".LED1 > port.left"]} />
     <trace path={[".R2 > port.right", ".LED2 > port.left"]} />
     <trace path={[".LED1 > port.right", ".U1 > .TXLED"]} />
     <trace path={[".LED2 > port.right", ".U1 > .RXLED"]} />
-    <netalias net="GND" center={[-3, 4]} rotation="180deg" />
-    <netalias net="GND" center={[-5, 3]} rotation="180deg" />
-    <netalias net="GND" center={[-6, 3]} rotation="180deg" />
-    <netalias net="GND" center={[-7, 3]} rotation="180deg" />
-    <netalias net="GND" center={[-8, 2]} rotation="180deg" />
+    <netalias net="GND" schX={-3} schY={4} schRotation="180deg" />
+    <netalias net="GND" schX={-5} schY={3} schRotation="180deg" />
+    <netalias net="GND" schX={-6} schY={3} schRotation="180deg" />
+    <netalias net="GND" schX={-7} schY={3} schRotation="180deg" />
+    <netalias net="GND" schX={-8} schY={2} schRotation="180deg" />
     {/* <component>
       <schematicbox
         name="USB"

package/src/stories/bug-pin-spacing.stories.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { Schematic } from "Schematic"
 const BugPinSpacingExample = () => (
   <bug
     name="U2"
+    manufacturerPartNumber="part-number"
     schPortArrangement={{
       leftSize: 2,
       rightSize: 2,

package/src/stories/bugs/bug1-y-flip.stories.tsx CHANGED Viewed

@@ -4,8 +4,9 @@ export const Bug1YFlip = () => {
   return (
     <Schematic style={{ height: 600 }}>
       <bug
-        port_arrangement={{ top_size: 2 }}
-        port_labels={{ 1: "foo", 2: "baz" }}
+        name="U1"
+        schPortArrangement={{ topSize: 2 }}
+        pinLabels={{ 1: "foo", 2: "baz" }}
       />
     </Schematic>
   )

package/src/stories/bugs/bug8-autolayout.stories.tsx CHANGED Viewed

@@ -30,8 +30,8 @@ export const Bug8Autolayout = () => {
       <Schematic style={{ height: 500 }}>
         <board
           layout={layout().autoLayoutSchematic()}
-          pcbCenterX={0}
-          pcbCenterY={0}
+          pcbX={0}
+          pcbY={0}
           width={"10mm"}
           height={"10mm"}
         >

package/src/stories/component-drawing-example.stories.tsx CHANGED Viewed

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

package/src/stories/led-circuit-builder.stories.tsx CHANGED Viewed

@@ -95,7 +95,7 @@ const $soup = pb
 export const LEDCircuitBuilder = () => {
   const soup = useMaybePromise($soup)
   if (!soup) return null
-  return <Schematic style={{ height: 600 }} soup={soup} />
+  return <Schematic style={{ height: 600 }} soup={soup as any} />
 }
 export default {

package/src/stories/led-circuit-react.stories.tsx CHANGED Viewed

@@ -3,32 +3,35 @@ import { Schematic } from "../Schematic"
 export const LEDCircuitReact = () => {
   return (
     <Schematic style={{ height: 500 }}>
-      <resistor name="R1" resistance="10 ohm" center={[2, 1]} />
+      <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
       <capacitor
         name="C1"
         capacitance="10 uF"
-        center={[4, 2]}
-        rotation="90deg"
+        schX={4}
+        schY={2}
+        schRotation="90deg"
       />
       <resistor
         name="R2"
         resistance="10 ohm"
-        center={[6, 1]}
-        rotation="90deg"
+        schX={6}
+        schY={1}
+        schRotation="90deg"
       />
       <trace
         path={[".R1 > port.right", ".C1 > port.left", ".R2 > port.left"]}
       />
-      <powersource voltage="5V" center={[1, 2]} name="main_power" />
+      <powersource voltage="5V" schX={1} schY={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={{
+        schPortArrangement={{ leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" }, rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" } }}
+        schX={8}
+        schY={3}
+        pinLabels={{
           1: "PWR",
           2: "NC",
           3: "RG",
@@ -41,12 +44,12 @@ export const LEDCircuitReact = () => {
       <ground name="GND" center={[11, 3]} />
       <trace path={[".B1 > port.GND", ".GND > .gnd"]} />
       {/* <trace from=".B1 > port.GND" to=".GND > .gnd" /> */}
-      <diode name="D1" center={[6, 3.5]} rotation="180deg" />
+      <diode name="D1" schX={6} schY={3.5} schRotation="180deg" />
       <trace path={[".D1 > port.right", ".C1 > .right"]} />
       <trace path={[".D1 > port.left", ".B1 > .RG"]} />
       {/* <trace from=".D1 > .left" to=".B1 > .RG" /> */}
       {/* <trace from=".D1 > .right" to=".C1> .right" /> */}
-      <netalias center={["10mm", "1.5mm"]} net="D0BUS" />
+      <netalias schX={"10mm"} schY={"1.5mm"} net="D0BUS" />
       <trace path={[".B1 > .D0", ".D0BUS"]} />
     </Schematic>
   )

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

@@ -83,7 +83,7 @@ const soup = [
 ]
 export const NetAliasSoup = () => {
-  return <Schematic style={{ height: 500 }} soup={soup} />
+  return <Schematic style={{ height: 500 }} soup={soup as any} />
 }
 export default {

package/src/stories/off-center-render.stories.tsx CHANGED Viewed

@@ -7,13 +7,13 @@ export const OffCenterRendering = () => {
       <Schematic style={{ height: 600 }}>
         <bug
           name="B1"
-          port_arrangement={{
-            left_size: 3,
-            right_size: 2,
+          schPortArrangement={{
+            leftSide: { pins: [3, 2, 1], direction: "top-to-bottom" },
+            rightSide: { pins: [6, 5, 4], direction: "top-to-bottom" },
           }}
-          sch_cx={8}
-          sch_cy={3}
-          port_labels={{
+          schX={8}
+          schY={3}
+          pinLabels={{
             "1": "D0",
             "2": "D1",
           }}

package/src/stories/rotated-resistor.stories.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ export const RotatedResistor = () => {
         schX={2}
         schY={1}
         schRotation="90deg"
-        rotation="90deg"
+        pcbRotation="90deg"
       />
     </Schematic>
   )

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

@@ -31,7 +31,7 @@ const soup: AnyElement[] = [
 ]
 export const SchematicPathSoup = () => {
-  return <Schematic style={{ height: 500 }} soup={soup} />
+  return <Schematic style={{ height: 500 }} soup={soup as any} />
 }
 export default {

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

@@ -5,15 +5,15 @@ export const ThreeSidedBug = () => {
     <Schematic style={{ height: 600 }}>
       <bug
         name="B1"
-        port_arrangement={{
-          left_size: 3,
-          right_size: 3,
-          top_size: 0,
-          bottom_size: 5,
+        schPortArrangement={{
+          leftSize: 3,
+          rightSize: 3,
+          topSize: 0,
+          bottomSize: 5,
         }}
-        sch_cx={8}
-        sch_cy={3}
-        port_labels={{
+        schX={8}
+        schY={3}
+        pinLabels={{
           "1": "D0",
           "2": "D1",
         }}