@tscircuit/schematic-viewer 1.4.0 → 1.4.2

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 (33) hide show
  1. package/biome.json +45 -0
  2. package/dist/index.css +7 -0
  3. package/dist/index.css.map +1 -0
  4. package/dist/index.js +158 -106
  5. package/dist/index.js.map +1 -1
  6. package/package.json +6 -4
  7. package/src/Schematic.tsx +9 -6
  8. package/src/lib/render-context/index.ts +1 -1
  9. package/src/lib/types/source-component.ts +1 -1
  10. package/src/lib/utils/collect-element-refs.ts +4 -4
  11. package/src/lib/utils/colors.ts +215 -216
  12. package/src/lib/utils/direction-to-vec.ts +3 -3
  13. package/src/pages/style.css +5 -0
  14. package/src/schematic-components/SVGPathComponent.tsx +121 -63
  15. package/src/schematic-components/SchematicChip.tsx +128 -109
  16. package/src/schematic-components/SchematicComponent.tsx +17 -8
  17. package/src/schematic-components/SchematicComponentFromSymbol.tsx +3 -1
  18. package/src/schematic-components/SchematicNetLabel.tsx +3 -0
  19. package/src/schematic-components/SchematicText.tsx +4 -6
  20. package/src/schematic-components/SchematicTrace.tsx +5 -6
  21. package/src/schematic-components/TableViewer.tsx +1 -1
  22. package/src/schematic-components/index.tsx +0 -1
  23. package/src/stories/basics/schematic-net-label.stories.tsx +2 -0
  24. package/src/stories/bug-connections.stories.tsx +18 -16
  25. package/src/stories/bug-high-port-numbers.stories.tsx +22 -9
  26. package/src/stories/bug-one-sided.stories.tsx +17 -15
  27. package/src/stories/bug-pin-spacing.stories.tsx +19 -17
  28. package/src/stories/bugs/bug1-y-flip.stories.tsx +7 -5
  29. package/src/stories/bugs/bug5-diode.stories.tsx +3 -1
  30. package/src/stories/bugs/bug6-trace-scaling.stories.tsx +5 -41
  31. package/src/stories/led-circuit-react.stories.tsx +3 -8
  32. package/src/stories/rotated-resistor.stories.tsx +10 -8
  33. package/src/stories/three-sided-bug.stories.tsx +17 -15
package/src/schematic-components/index.tsx CHANGED
@@ -7,4 +7,3 @@ export * from "./SchematicGroup"
7
7
  export * from "./SchematicText"
8
8
  export * from "./SchematicTrace"
9
9
  export * from "./SVGPathComponent"
10
-
package/src/stories/basics/schematic-net-label.stories.tsx CHANGED
@@ -72,6 +72,7 @@ export const SchematicNetLabel = () => {
72
72
  y: -0.5,
73
73
  },
74
74
  rotation: 0,
75
+ color: "black",
75
76
  },
76
77
  {
77
78
  type: "schematic_text",
@@ -84,6 +85,7 @@ export const SchematicNetLabel = () => {
84
85
  y: -0.3,
85
86
  },
86
87
  rotation: 0,
88
+ color: "black",
87
89
  },
88
90
  {
89
91
  type: "source_net",
package/src/stories/bug-connections.stories.tsx CHANGED
@@ -3,22 +3,24 @@ import { Schematic } from "Schematic"
3
3
  export const BugConnections = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 600 }}>
6
- <bug
7
- name="B1"
8
- schPortArrangement={{
9
- leftSize: 3,
10
- rightSize: 2,
11
- }}
12
- schHeight={5}
13
- schWidth={3}
14
- schPinSpacing={2}
15
- schX={8}
16
- schY={3}
17
- pinLabels={{
18
- "1": "D0",
19
- "2": "D1",
20
- }}
21
- />
6
+ <board width={10} height={10}>
7
+ <bug
8
+ name="B1"
9
+ schPortArrangement={{
10
+ leftSize: 3,
11
+ rightSize: 2,
12
+ }}
13
+ schHeight={5}
14
+ schWidth={3}
15
+ schPinSpacing={2}
16
+ schX={8}
17
+ schY={3}
18
+ pinLabels={{
19
+ "1": "D0",
20
+ "2": "D1",
21
+ }}
22
+ />
23
+ </board>
22
24
  </Schematic>
23
25
  )
24
26
  }
package/src/stories/bug-high-port-numbers.stories.tsx CHANGED
@@ -5,7 +5,11 @@ export const BugHighPortNumbers = () => {
5
5
  const circuit = new Circuit()
6
6
 
7
7
  circuit.add(
8
- <group>
8
+ <board
9
+ width={10}
10
+ height={10}
11
+ // @ts-ignore
12
+ >
9
13
  <chip
10
14
  name="U1"
11
15
  manufacturerPartNumber="part-number"
@@ -18,8 +22,17 @@ export const BugHighPortNumbers = () => {
18
22
  pins: [1, 5, 11, 3, 2, 9, 10, 6, 23, 22, 14, 13, 12],
19
23
  direction: "top-to-bottom",
20
24
  },
25
+ bottomSide: {
26
+ pins: [29],
27
+ direction: "left-to-right",
28
+ },
29
+ topSide: {
30
+ pins: [30],
31
+ direction: "left-to-right",
32
+ },
21
33
  }}
22
- schWidth={1}
34
+ schWidth={3}
35
+ schHeight={6}
23
36
  footprint="ssop28Db"
24
37
  pinLabels={{
25
38
  "1": "TXD",
@@ -55,7 +68,7 @@ export const BugHighPortNumbers = () => {
55
68
  name="R1"
56
69
  footprint="0805"
57
70
  schX={3}
58
- schY={0}
71
+ schY={-1}
59
72
  symbolName="boxresistor_vert"
60
73
  />
61
74
  <resistor
@@ -63,7 +76,7 @@ export const BugHighPortNumbers = () => {
63
76
  name="R2"
64
77
  footprint="0805"
65
78
  schX={4.5}
66
- schY={0}
79
+ schY={-1}
67
80
  symbolName="boxresistor_vert"
68
81
  />
69
82
  <diode
@@ -71,14 +84,14 @@ export const BugHighPortNumbers = () => {
71
84
  footprint="0805"
72
85
  symbolName="diode_vert"
73
86
  schX={3}
74
- schY={3}
87
+ schY={2}
75
88
  />
76
89
  <diode
77
90
  name="LED2"
78
91
  footprint="0805"
79
92
  symbolName="diode_vert"
80
93
  schX={4.5}
81
- schY={3}
94
+ schY={2}
82
95
  />
83
96
  <netalias net="5V" schX={3} schY={-2} />
84
97
  <netalias net="5V" schX={4.5} schY={-2} />
@@ -86,8 +99,8 @@ export const BugHighPortNumbers = () => {
86
99
  <trace path={[".5V", ".R1 > port.left"]} /> */}
87
100
  <trace path={[".R1 > port.right", ".LED1 > port.left"]} />
88
101
  <trace path={[".R2 > port.right", ".LED2 > port.left"]} />
89
- <trace path={[".LED1 > port.right", ".U1 > .pin1"]} />
90
- <trace path={[".LED2 > port.right", ".U1 > .RXLED"]} />
102
+ <trace path={[".LED1 > port.right", ".U1 > .pin20"]} />
103
+ <trace path={[".LED2 > port.right", ".U1 > .pin6"]} />
91
104
  <netalias net="GND" schX={-3} schY={4} schRotation="180deg" />
92
105
  <netalias net="GND" schX={-5} schY={3} schRotation="180deg" />
93
106
  <netalias net="GND" schX={-6} schY={3} schRotation="180deg" />
@@ -103,7 +116,7 @@ export const BugHighPortNumbers = () => {
103
116
  height={2}
104
117
  />
105
118
  </component> */}
106
- </group>,
119
+ </board>,
107
120
  )
108
121
 
109
122
  const circuitJson = circuit.getCircuitJson()
package/src/stories/bug-one-sided.stories.tsx CHANGED
@@ -1,21 +1,23 @@
1
1
  import { Schematic } from "Schematic"
2
2
 
3
3
  const OneSidedBugExample = () => (
4
- <bug
5
- name="U2"
6
- schPortArrangement={{
7
- leftSize: 0,
8
- rightSize: 4,
9
- }}
10
- schX={-10}
11
- schY={0}
12
- pinLabels={{
13
- "1": "GND",
14
- "2": "VBUS",
15
- "3": "D-",
16
- "4": "D+",
17
- }}
18
- />
4
+ <board width={10} height={10}>
5
+ <bug
6
+ name="U2"
7
+ schPortArrangement={{
8
+ leftSize: 0,
9
+ rightSize: 4,
10
+ }}
11
+ schX={-10}
12
+ schY={0}
13
+ pinLabels={{
14
+ "1": "GND",
15
+ "2": "VBUS",
16
+ "3": "D-",
17
+ "4": "D+",
18
+ }}
19
+ />
20
+ </board>
19
21
  )
20
22
 
21
23
  export const OneSidedBug = () => {
package/src/stories/bug-pin-spacing.stories.tsx CHANGED
@@ -1,23 +1,25 @@
1
1
  import { Schematic } from "Schematic"
2
2
 
3
3
  const BugPinSpacingExample = () => (
4
- <bug
5
- name="U2"
6
- manufacturerPartNumber="part-number"
7
- schPortArrangement={{
8
- leftSize: 2,
9
- rightSize: 2,
10
- }}
11
- schX={-10}
12
- schY={0}
13
- schPinSpacing="1.5mm"
14
- pinLabels={{
15
- "1": "GND",
16
- "2": "VBUS",
17
- "3": "D-",
18
- "4": "D+",
19
- }}
20
- />
4
+ <board width={10} height={10}>
5
+ <bug
6
+ name="U2"
7
+ manufacturerPartNumber="part-number"
8
+ schPortArrangement={{
9
+ leftSize: 2,
10
+ rightSize: 2,
11
+ }}
12
+ schX={-10}
13
+ schY={0}
14
+ schPinSpacing="1.5mm"
15
+ pinLabels={{
16
+ "1": "GND",
17
+ "2": "VBUS",
18
+ "3": "D-",
19
+ "4": "D+",
20
+ }}
21
+ />
22
+ </board>
21
23
  )
22
24
 
23
25
  export const BugPinSpacing = () => {
package/src/stories/bugs/bug1-y-flip.stories.tsx CHANGED
@@ -3,11 +3,13 @@ import { Schematic } from "Schematic"
3
3
  export const Bug1YFlip = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 600 }}>
6
- <bug
7
- name="U1"
8
- schPortArrangement={{ topSize: 2 }}
9
- pinLabels={{ 1: "foo", 2: "baz" }}
10
- />
6
+ <board width={10} height={10}>
7
+ <bug
8
+ name="U1"
9
+ schPortArrangement={{ topSize: 2 }}
10
+ pinLabels={{ 1: "foo", 2: "baz" }}
11
+ />
12
+ </board>
11
13
  </Schematic>
12
14
  )
13
15
  }
package/src/stories/bugs/bug5-diode.stories.tsx CHANGED
@@ -3,7 +3,9 @@ import { Schematic } from "../../Schematic"
3
3
  export const Bug5SchematicLine = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 500 }}>
6
- <diode name="D1" />
6
+ <board width={10} height={10}>
7
+ <diode name="D1" />
8
+ </board>
7
9
  </Schematic>
8
10
  )
9
11
  }
package/src/stories/bugs/bug6-trace-scaling.stories.tsx CHANGED
@@ -3,48 +3,12 @@ import { Schematic } from "../../Schematic"
3
3
  export const Bug6TraceScaling = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 500 }}>
6
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
7
- {/* <powersource voltage="5V" schX={1} schY={2} name="main_power" /> */}
8
- <resistor resistance="1k" schX={1} schY={2} name="main_power" />
9
- {/* <trace path={[".main_power > port.negative", ".R1 > port.left"]} /> */}
10
- <trace path={[".main_power > port.right", ".R1 > port.left"]} />
6
+ <board width={10} height={10}>
7
+ <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
8
+ <resistor resistance="1k" schX={1} schY={2} name="main_power" />
9
+ <trace path={[".main_power > port.right", ".R1 > port.left"]} />
10
+ </board>
11
11
  </Schematic>
12
- // <Schematic
13
- // style={{ height: 500 }}
14
- // soup={[
15
- // {
16
- // type: "source_trace",
17
- // source_trace_id: "source_trace_0",
18
- // },
19
- // {
20
- // type: "schematic_trace",
21
- // source_trace_id: "source_trace_0",
22
- // schematic_trace_id: "schematic_trace_0",
23
- // edges: [
24
- // {
25
- // from: {
26
- // x: 1,
27
- // y: 1.4000000000000001,
28
- // },
29
- // to: {
30
- // x: 1,
31
- // y: 1,
32
- // },
33
- // },
34
- // {
35
- // from: {
36
- // x: 1,
37
- // y: 1,
38
- // },
39
- // to: {
40
- // x: 1.4000000000000001,
41
- // y: 1,
42
- // },
43
- // },
44
- // ],
45
- // },
46
- // ]}
47
- // />
48
12
  )
49
13
  }
50
14
 
package/src/stories/led-circuit-react.stories.tsx CHANGED
@@ -4,20 +4,15 @@ export const LEDCircuitReact = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 500 }}>
6
6
  <group>
7
- <resistor name="R1" resistance="10 ohm" schX={2} schY={1}/>
7
+ <resistor name="R1" resistance="10 ohm" schX={2} schY={1} />
8
8
  <capacitor
9
9
  name="C1"
10
10
  capacitance="10 uF"
11
11
  schX={4}
12
12
  schY={2}
13
- symbolName="capacitor_vert"
14
- />
15
- <resistor
16
- name="R2"
17
- resistance="10 ohm"
18
- schX={6}
19
- schY={1}
13
+ symbolName="capacitor_vert"
20
14
  />
15
+ <resistor name="R2" resistance="10 ohm" schX={6} schY={1} />
21
16
  <trace path={[".R1 > port.right", ".C1 > port.left"]} />
22
17
  <trace path={[".C1 > port.right", ".R2 > port.left"]} />
23
18
  <powersource voltage={5} schX={1} schY={2} name="main_power" />
package/src/stories/rotated-resistor.stories.tsx CHANGED
@@ -3,14 +3,16 @@ import { Schematic } from "../Schematic"
3
3
  export const RotatedResistor = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 500 }}>
6
- <resistor
7
- name="R1"
8
- resistance="10 ohm"
9
- schX={2}
10
- schY={1}
11
- schRotation="90deg"
12
- pcbRotation="90deg"
13
- />
6
+ <board width={10} height={10}>
7
+ <resistor
8
+ name="R1"
9
+ resistance="10 ohm"
10
+ schX={2}
11
+ schY={1}
12
+ schRotation="90deg"
13
+ pcbRotation="90deg"
14
+ />
15
+ </board>
14
16
  </Schematic>
15
17
  )
16
18
  }
package/src/stories/three-sided-bug.stories.tsx CHANGED
@@ -3,21 +3,23 @@ import { Schematic } from "Schematic"
3
3
  export const ThreeSidedBug = () => {
4
4
  return (
5
5
  <Schematic style={{ height: 600 }}>
6
- <bug
7
- name="B1"
8
- schPortArrangement={{
9
- leftSize: 3,
10
- rightSize: 3,
11
- topSize: 0,
12
- bottomSize: 5,
13
- }}
14
- schX={8}
15
- schY={3}
16
- pinLabels={{
17
- "1": "D0",
18
- "2": "D1",
19
- }}
20
- />
6
+ <board width={10} height={10}>
7
+ <bug
8
+ name="B1"
9
+ schPortArrangement={{
10
+ leftSize: 3,
11
+ rightSize: 3,
12
+ topSize: 0,
13
+ bottomSize: 5,
14
+ }}
15
+ schX={8}
16
+ schY={3}
17
+ pinLabels={{
18
+ "1": "D0",
19
+ "2": "D1",
20
+ }}
21
+ />
22
+ </board>
21
23
  </Schematic>
22
24
  )
23
25
  }