@tscircuit/schematic-viewer 2.0.27 → 2.0.29

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 (7) hide show
  1. package/dist/index.js +164 -73
  2. package/dist/index.js.map +1 -1
  3. package/examples/example10-groups-view-schematic-groups.fixture.tsx +49 -63
  4. package/examples/example11-automatic-grouping-view-schematic-groups.fixture.tsx +63 -53
  5. package/lib/components/SchematicViewer.tsx +6 -1
  6. package/lib/hooks/useSchematicGroupsOverlay.ts +216 -85
  7. package/package.json +1 -1
package/examples/example10-groups-view-schematic-groups.fixture.tsx CHANGED
@@ -2,84 +2,70 @@ import { SchematicViewer } from "lib/components/SchematicViewer"
2
2
  import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
3
3
 
4
4
  const circuitJson = renderToCircuitJson(
5
- <board width="50mm" height="30mm">
6
- {/* Power Management Group */}
7
- <group name="Power Management">
8
- <chip
9
- name="U1"
10
- footprint="soic8"
11
- schX={-10}
12
- schY={5}
13
- pinLabels={{
14
- "1": "VIN",
15
- "2": "GND",
16
- "3": "EN",
17
- "4": "FB",
18
- "5": "VOUT",
19
- "6": "SW",
20
- "7": "PGND",
21
- "8": "VCC"
22
- }}
23
- />
24
- <capacitor name="C1" capacitance="100uF" schX={-15} schY={2} />
25
- <capacitor name="C2" capacitance="22uF" schX={-5} schY={2} />
26
- <resistor name="R1" resistance={10000} schX={-10} schY={8} />
5
+ <board>
6
+ <group schX={-10} schY={10} name="Alpha Node">
7
+ <resistor resistance="1k" footprint="0402" name="R1" schX={3} />
8
+ <capacitor capacitance="1000pF" footprint="0402" name="C1" schX={-3} />
9
+ <trace from=".R1 > .pin1" to=".C1 > .pin1" />
27
10
  </group>
28
11
 
29
- {/* Signal Processing Group */}
30
- <group name="Signal Processing">
31
- <chip
32
- name="U2"
33
- footprint="soic14"
34
- schX={5}
35
- schY={5}
36
- pinLabels={{
37
- "1": "IN+",
38
- "2": "IN-",
39
- "3": "VCC",
40
- "4": "GND",
41
- "5": "OUT1",
42
- "6": "OUT2",
43
- "7": "REF"
44
- }}
45
- />
46
- <resistor name="R2" resistance={1000} schX={0} schY={8} />
47
- <resistor name="R3" resistance={2000} schX={10} schY={8} />
48
- <capacitor name="C3" capacitance="10nF" schX={5} schY={2} />
12
+ <group schX={15} schY={-5} name="Blue Bridge">
13
+ <resistor resistance="4.7k" footprint="0603" name="R2" schX={2} />
14
+ <capacitor capacitance="220nF" footprint="0603" name="C2" schX={-2} />
15
+ <trace from=".R2 > .pin1" to=".C2 > .pin1" />
49
16
  </group>
50
17
 
51
- {/* Status Indicators Group */}
52
- <group name="Status Indicators">
53
- <led name="LED1" schX={15} schY={5} />
54
- <led name="LED2" schX={20} schY={5} />
55
- <resistor name="R4" resistance={330} schX={15} schY={8} />
56
- <resistor name="R5" resistance={330} schX={20} schY={8} />
18
+ <group schX={-20} schY={-15} name="Copper Point">
19
+ <resistor resistance="10k" footprint="0805" name="R3" schX={1} />
57
20
  </group>
58
21
 
59
- {/* Connections between groups */}
60
- <trace from=".U1 .pin5" to=".U2 .pin3" />
61
- <trace from=".U2 .pin5" to=".LED1 .pin1" />
62
- <trace from=".U2 .pin6" to=".LED2 .pin1" />
63
- <trace from=".C1 .pin1" to=".U1 .pin1" />
64
- <trace from=".C2 .pin1" to=".U1 .pin5" />
65
- <trace from=".R1 .pin1" to=".U1 .pin3" />
66
- <trace from=".R2 .pin1" to=".U2 .pin1" />
67
- <trace from=".R3 .pin1" to=".U2 .pin2" />
68
- <trace from=".C3 .pin1" to=".U2 .pin7" />
69
- <trace from=".R4 .pin1" to=".LED1 .pin2" />
70
- <trace from=".R5 .pin1" to=".LED2 .pin2" />
22
+ <group schX={5} schY={20} name="Echo Ridge">
23
+ <capacitor capacitance="10uF" footprint="0805" name="C4" schX={-1} />
24
+ </group>
25
+
26
+ <group schX={12} schY={12} name="Delta Gate">
27
+ <resistor resistance="220" footprint="0402" name="R5" schX={3} />
28
+ <capacitor capacitance="470pF" footprint="0402" name="C5" schX={-3} />
29
+ <trace from=".R5 > .pin1" to=".C5 > .pin1" />
30
+ </group>
31
+
32
+ <group schX={-8} schY={-8} name="Flux Node">
33
+ <resistor resistance="330" footprint="0603" name="R6" schX={2} />
34
+ </group>
35
+
36
+ <group schX={18} schY={-12} name="Silver Pad">
37
+ <capacitor capacitance="1uF" footprint="0603" name="C7" schX={-2} />
38
+ </group>
39
+
40
+ <group schX={-14} schY={6} name="Gamma Port">
41
+ <resistor resistance="5.6k" footprint="0402" name="R8" schX={2} />
42
+ <capacitor capacitance="330pF" footprint="0402" name="C8" schX={-2} />
43
+ <trace from=".R8 > .pin1" to=".C8 > .pin1" />
44
+ </group>
45
+
46
+ {/* Nested group example */}
47
+ <group schX={-5} schY={-18} name="Orion Hub">
48
+ <resistor resistance="2k" footprint="0402" name="R9" schX={2} />
49
+ <capacitor capacitance="2.2uF" footprint="0603" name="C9" schX={-2} />
50
+ <trace from=".R9 > .pin1" to=".C9 > .pin1" />
51
+
52
+ <group schX={3} schY={-3} name="Nova Cell">
53
+ <resistor resistance="6.8k" footprint="0402" name="R10" schX={1} />
54
+ <capacitor capacitance="150pF" footprint="0402" name="C10" schX={-1} />
55
+ <trace from=".R10 > .pin1" to=".C10 > .pin1" />
56
+ </group>
57
+ </group>
71
58
  </board>,
72
59
  )
73
60
 
74
61
  export default () => {
75
-
76
62
  return (
77
63
  <div style={{ position: "relative", height: "100%" }}>
78
64
  <SchematicViewer
79
65
  circuitJson={circuitJson}
80
66
  containerStyle={{
81
- width: "100%",
82
- height: "100%",
67
+ width: "100vw",
68
+ height: "100vh",
83
69
  backgroundColor: "#f8f9fa",
84
70
  }}
85
71
  debugGrid={false}
package/examples/example11-automatic-grouping-view-schematic-groups.fixture.tsx CHANGED
@@ -4,67 +4,79 @@ import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
4
4
  const circuitJson = renderToCircuitJson(
5
5
  <board width="60mm" height="40mm">
6
6
  {/* Multiple Resistors - Will form "Resistors" group */}
7
- <resistor name="R1" resistance={1000} schX={-15} schY={5} />
8
- <resistor name="R2" resistance={2200} schX={-10} schY={5} />
9
- <resistor name="R3" resistance={4700} schX={-5} schY={5} />
10
- <resistor name="R4" resistance={330} schX={0} schY={8} />
11
- <resistor name="R5" resistance={220} schX={5} schY={8} />
7
+ <group name="Resistors">
8
+ <resistor name="R1" resistance={1000} schX={-15} schY={5} />
9
+ <resistor name="R2" resistance={2200} schX={-10} schY={5} />
10
+ <resistor name="R3" resistance={4700} schX={-5} schY={5} />
11
+ <resistor name="R4" resistance={330} schX={0} schY={8} />
12
+ <resistor name="R5" resistance={220} schX={5} schY={8} />
13
+ </group>
12
14
 
13
15
  {/* Multiple Capacitors - Will form "Capacitors" group */}
14
- <capacitor name="C1" capacitance="100uF" schX={-15} schY={0} />
15
- <capacitor name="C2" capacitance="10uF" schX={-10} schY={0} />
16
- <capacitor name="C3" capacitance="1uF" schX={-5} schY={0} />
17
- <capacitor name="C4" capacitance="100nF" schX={0} schY={0} />
16
+ <group name="Capacitors">
17
+ <capacitor name="C1" capacitance="100uF" schX={-15} schY={0} />
18
+ <capacitor name="C2" capacitance="10uF" schX={-10} schY={0} />
19
+ <capacitor name="C3" capacitance="1uF" schX={-5} schY={0} />
20
+ <capacitor name="C4" capacitance="100nF" schX={0} schY={0} />
21
+ </group>
18
22
 
19
23
  {/* Multiple ICs/Chips - Will form "Chips" group */}
20
- <chip
21
- name="U1"
22
- footprint="soic8"
23
- schX={10}
24
- schY={5}
25
- pinLabels={{
26
- "1": "VIN",
27
- "2": "GND",
28
- "3": "EN",
29
- "4": "VOUT"
30
- }}
31
- />
32
- <chip
33
- name="U2"
34
- footprint="soic14"
35
- schX={15}
36
- schY={5}
37
- pinLabels={{
38
- "1": "IN",
39
- "2": "OUT",
40
- "3": "VCC",
41
- "4": "GND"
42
- }}
43
- />
44
- <chip
45
- name="U3"
46
- footprint="sot23"
47
- schX={20}
48
- schY={5}
49
- pinLabels={{
50
- "1": "A",
51
- "2": "B",
52
- "3": "C"
53
- }}
54
- />
24
+ <group name="Chips">
25
+ <chip
26
+ name="U1"
27
+ footprint="soic8"
28
+ schX={10}
29
+ schY={5}
30
+ pinLabels={{
31
+ "1": "VIN",
32
+ "2": "GND",
33
+ "3": "EN",
34
+ "4": "VOUT",
35
+ }}
36
+ />
37
+ <chip
38
+ name="U2"
39
+ footprint="soic14"
40
+ schX={15}
41
+ schY={5}
42
+ pinLabels={{
43
+ "1": "IN",
44
+ "2": "OUT",
45
+ "3": "VCC",
46
+ "4": "GND",
47
+ }}
48
+ />
49
+ <chip
50
+ name="U3"
51
+ footprint="sot23"
52
+ schX={20}
53
+ schY={5}
54
+ pinLabels={{
55
+ "1": "A",
56
+ "2": "B",
57
+ "3": "C",
58
+ }}
59
+ />
60
+ </group>
55
61
 
56
62
  {/* Multiple LEDs - Will form "Leds" group */}
57
- <led name="LED1" schX={10} schY={0} />
58
- <led name="LED2" schX={15} schY={0} />
59
- <led name="LED3" schX={20} schY={0} />
63
+ <group name="Leds">
64
+ <led name="LED1" schX={10} schY={0} />
65
+ <led name="LED2" schX={15} schY={0} />
66
+ <led name="LED3" schX={20} schY={0} />
67
+ </group>
60
68
 
61
69
  {/* Multiple Inductors - Will form "Inductors" group */}
62
- <inductor name="L1" inductance="100uH" schX={-15} schY={-5} />
63
- <inductor name="L2" inductance="22uH" schX={-10} schY={-5} />
70
+ <group name="Inductors">
71
+ <inductor name="L1" inductance="100uH" schX={-15} schY={-5} />
72
+ <inductor name="L2" inductance="22uH" schX={-10} schY={-5} />
73
+ </group>
64
74
 
65
75
  {/* Multiple Diodes - Will form "Diodes" group */}
66
- <diode name="D1" schX={-5} schY={-5} />
67
- <diode name="D2" schX={0} schY={-5} />
76
+ <group name="Diodes">
77
+ <diode name="D1" schX={-5} schY={-5} />
78
+ <diode name="D2" schX={0} schY={-5} />
79
+ </group>
68
80
 
69
81
  {/* Some connections */}
70
82
  <trace from=".R1 .pin2" to=".R2 .pin1" />
@@ -79,9 +91,7 @@ const circuitJson = renderToCircuitJson(
79
91
  <trace from=".L2 .pin1" to=".D2 .pin1" />
80
92
  </board>,
81
93
  )
82
-
83
94
  export default () => {
84
-
85
95
  return (
86
96
  <div style={{ position: "relative", height: "100%" }}>
87
97
  <SchematicViewer
package/lib/components/SchematicViewer.tsx CHANGED
@@ -225,7 +225,12 @@ export const SchematicViewer = ({
225
225
  })
226
226
 
227
227
  // Add group overlays when enabled
228
- useSchematicGroupsOverlay(svgDivRef, circuitJson, circuitJsonKey, showSchematicGroups)
228
+ useSchematicGroupsOverlay({
229
+ svgDivRef,
230
+ circuitJson,
231
+ circuitJsonKey,
232
+ showGroups: showSchematicGroups,
233
+ })
229
234
 
230
235
  const svgDiv = useMemo(
231
236
  () => (