@tscircuit/schematic-trace-solver 0.0.37 → 0.0.39

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 (35) hide show
  1. package/dist/index.d.ts +25 -1
  2. package/dist/index.js +917 -10
  3. package/lib/solvers/SchematicTraceLinesSolver/SchematicTraceSingleLineSolver2/collisions.ts +17 -0
  4. package/lib/solvers/SchematicTraceLinesSolver/SchematicTraceSingleLineSolver2/pathOps.ts +31 -12
  5. package/lib/solvers/SchematicTracePipelineSolver/SchematicTracePipelineSolver.ts +40 -0
  6. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/TraceLabelOverlapAvoidanceSolver.ts +240 -0
  7. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/balanceLShapes.ts +207 -0
  8. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/countTurns.ts +18 -0
  9. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/detectTraceLabelOverlap.ts +38 -0
  10. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/hasCollisions.ts +22 -0
  11. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/hasCollisionsWithLabels.ts +19 -0
  12. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/index.ts +1 -0
  13. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/minimizeTurnsWithFilteredLabels.ts +66 -0
  14. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/rerouteCollidingTrace.ts +73 -0
  15. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/simplifyPath.ts +41 -0
  16. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/tryConnectPoints.ts +14 -0
  17. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/trySnipAndReconnect.ts +229 -0
  18. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/turnMinimization.ts +211 -0
  19. package/lib/solvers/TraceLabelOverlapAvoidanceSolver/violation.ts +25 -0
  20. package/package.json +1 -1
  21. package/site/examples/example20.page.tsx +103 -0
  22. package/site/examples/example22.page.tsx +108 -0
  23. package/site/examples/example23.page.tsx +137 -0
  24. package/site/examples/example24.page.tsx +128 -0
  25. package/tests/examples/__snapshots__/example16.snap.svg +27 -27
  26. package/tests/examples/__snapshots__/example22.snap.svg +137 -0
  27. package/tests/examples/__snapshots__/example23.snap.svg +137 -0
  28. package/tests/examples/__snapshots__/example24.snap.svg +143 -0
  29. package/tests/examples/__snapshots__/example25.snap.svg +165 -0
  30. package/tests/examples/__snapshots__/example26.snap.svg +157 -0
  31. package/tests/examples/example22.test.tsx +109 -0
  32. package/tests/examples/example23.test.tsx +109 -0
  33. package/tests/examples/example24.test.tsx +114 -0
  34. package/tests/examples/example25.test.tsx +143 -0
  35. package/tests/examples/example26.test.tsx +134 -0
package/tests/examples/__snapshots__/example22.snap.svg ADDED
@@ -0,0 +1,137 @@
1
+ <svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="100%" height="100%" fill="white" />
3
+ <g>
4
+ <circle data-type="point" data-label="U1.1
5
+ x+" data-x="1.2000000000000002" data-y="-0.30000000000000004" cx="308.80000000000007" cy="468.68000000000006" r="3" fill="hsl(319, 100%, 50%, 0.8)" />
6
+ </g>
7
+ <g>
8
+ <circle data-type="point" data-label="U1.2
9
+ x-" data-x="-1.2000000000000002" data-y="-0.30000000000000004" cx="40" cy="468.68000000000006" r="3" fill="hsl(320, 100%, 50%, 0.8)" />
10
+ </g>
11
+ <g>
12
+ <circle data-type="point" data-label="U1.3
13
+ x+" data-x="1.2000000000000002" data-y="0.09999999999999998" cx="308.80000000000007" cy="423.88000000000005" r="3" fill="hsl(321, 100%, 50%, 0.8)" />
14
+ </g>
15
+ <g>
16
+ <circle data-type="point" data-label="U1.4
17
+ x-" data-x="-1.2000000000000002" data-y="0.30000000000000004" cx="40" cy="401.48" r="3" fill="hsl(322, 100%, 50%, 0.8)" />
18
+ </g>
19
+ <g>
20
+ <circle data-type="point" data-label="U1.5
21
+ x-" data-x="-1.2000000000000002" data-y="0.10000000000000003" cx="40" cy="423.88000000000005" r="3" fill="hsl(323, 100%, 50%, 0.8)" />
22
+ </g>
23
+ <g>
24
+ <circle data-type="point" data-label="U1.6
25
+ x-" data-x="-1.2000000000000002" data-y="-0.09999999999999998" cx="40" cy="446.28000000000003" r="3" fill="hsl(324, 100%, 50%, 0.8)" />
26
+ </g>
27
+ <g>
28
+ <circle data-type="point" data-label="U1.7
29
+ x+" data-x="1.2000000000000002" data-y="-0.10000000000000003" cx="308.80000000000007" cy="446.28000000000003" r="3" fill="hsl(325, 100%, 50%, 0.8)" />
30
+ </g>
31
+ <g>
32
+ <circle data-type="point" data-label="U1.8
33
+ x+" data-x="1.2000000000000002" data-y="0.30000000000000004" cx="308.80000000000007" cy="401.48" r="3" fill="hsl(326, 100%, 50%, 0.8)" />
34
+ </g>
35
+ <g>
36
+ <circle data-type="point" data-label="J1.1
37
+ x-" data-x="1.6" data-y="2.105" cx="353.6" cy="199.32000000000005" r="3" fill="hsl(218, 100%, 50%, 0.8)" />
38
+ </g>
39
+ <g>
40
+ <circle data-type="point" data-label="J1.2
41
+ x-" data-x="1.6" data-y="1.9049999999999998" cx="353.6" cy="221.72000000000006" r="3" fill="hsl(219, 100%, 50%, 0.8)" />
42
+ </g>
43
+ <g>
44
+ <circle data-type="point" data-label="J1.3
45
+ x-" data-x="1.6" data-y="1.7049999999999998" cx="353.6" cy="244.12000000000006" r="3" fill="hsl(220, 100%, 50%, 0.8)" />
46
+ </g>
47
+ <g>
48
+ <circle data-type="point" data-label="" data-x="1.2000000000000002" data-y="-0.30000000000000004" cx="308.80000000000007" cy="468.68000000000006" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
49
+ </g>
50
+ <g>
51
+ <circle data-type="point" data-label="" data-x="1.6" data-y="1.7049999999999998" cx="353.6" cy="244.12000000000006" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
52
+ </g>
53
+ <g>
54
+ <circle data-type="point" data-label="" data-x="1.049" data-y="2.105" cx="291.88800000000003" cy="199.32000000000005" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
55
+ </g>
56
+ <g>
57
+ <polyline data-points="1.2000000000000002,-0.30000000000000004 1.6,1.7049999999999998" data-type="line" data-label="" points="308.80000000000007,468.68000000000006 353.6,244.12000000000006" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
58
+ </g>
59
+ <g>
60
+ <polyline data-points="1.2000000000000002,0.30000000000000004 1.6,2.105" data-type="line" data-label="" points="308.80000000000007,401.48 353.6,199.32000000000005" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
61
+ </g>
62
+ <g>
63
+ <polyline data-points="1.2000000000000002,0.30000000000000004 1.4000000000000001,0.30000000000000004 1.4000000000000001,1.2025000000000001 1.049,1.2025000000000001 1.049,2.105 1.6,2.105" data-type="line" data-label="" points="308.80000000000007,401.48 331.20000000000005,401.48 331.20000000000005,300.40000000000003 291.88800000000003,300.40000000000003 291.88800000000003,199.32000000000005 353.6,199.32000000000005" fill="none" stroke="purple" stroke-width="1" />
64
+ </g>
65
+ <g>
66
+ <rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="379.08000000000004" width="268.80000000000007" height="112" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008928571428571428" />
67
+ </g>
68
+ <g>
69
+ <rect data-type="rect" data-label="schematic_component_1" data-x="2.7" data-y="1.9049999999999998" x="353.6" y="176.92000000000007" width="246.39999999999998" height="89.59999999999997" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008928571428571428" />
70
+ </g>
71
+ <g>
72
+ <rect data-type="rect" data-label="" data-x="1.4260000000000002" data-y="-0.30000000000000004" x="308.91200000000003" y="457.48" width="50.400000000000034" height="22.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
73
+ </g>
74
+ <g>
75
+ <rect data-type="rect" data-label="" data-x="1.374" data-y="1.7049999999999998" x="303.088" y="232.92000000000004" width="50.400000000000034" height="22.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
76
+ </g>
77
+ <g>
78
+ <rect data-type="rect" data-label="" data-x="1.049" data-y="2.33" x="280.68800000000005" y="148.92000000000002" width="22.399999999999977" height="50.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
79
+ </g>
80
+ <g id="crosshair" style="display: none">
81
+ <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
82
+ <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
83
+ </g>
84
+ <script>
85
+ <![CDATA[
86
+ document.currentScript.parentElement.addEventListener('mousemove', (e) => {
87
+ const svg = e.currentTarget;
88
+ const rect = svg.getBoundingClientRect();
89
+ const x = e.clientX - rect.left;
90
+ const y = e.clientY - rect.top;
91
+ const crosshair = svg.getElementById('crosshair');
92
+ const h = svg.getElementById('crosshair-h');
93
+ const v = svg.getElementById('crosshair-v');
94
+ const coords = svg.getElementById('coordinates');
95
+
96
+ crosshair.style.display = 'block';
97
+ h.setAttribute('x1', '0');
98
+ h.setAttribute('x2', '640');
99
+ h.setAttribute('y1', y);
100
+ h.setAttribute('y2', y);
101
+ v.setAttribute('x1', x);
102
+ v.setAttribute('x2', x);
103
+ v.setAttribute('y1', '0');
104
+ v.setAttribute('y2', '640');
105
+
106
+ // Calculate real coordinates using inverse transformation
107
+ const matrix = {
108
+ "a": 112,
109
+ "c": 0,
110
+ "e": 174.40000000000003,
111
+ "b": 0,
112
+ "d": -112,
113
+ "f": 435.08000000000004
114
+ };
115
+ // Manually invert and apply the affine transform
116
+ // Since we only use translate and scale, we can directly compute:
117
+ // x' = (x - tx) / sx
118
+ // y' = (y - ty) / sy
119
+ const sx = matrix.a;
120
+ const sy = matrix.d;
121
+ const tx = matrix.e;
122
+ const ty = matrix.f;
123
+ const realPoint = {
124
+ x: (x - tx) / sx,
125
+ y: (y - ty) / sy // Flip y back since we used negative scale
126
+ }
127
+
128
+ coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
129
+ coords.setAttribute('x', (x + 5).toString());
130
+ coords.setAttribute('y', (y - 5).toString());
131
+ });
132
+ document.currentScript.parentElement.addEventListener('mouseleave', () => {
133
+ document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
134
+ });
135
+ ]]>
136
+ </script>
137
+ </svg>
package/tests/examples/__snapshots__/example23.snap.svg ADDED
@@ -0,0 +1,137 @@
1
+ <svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="100%" height="100%" fill="white" />
3
+ <g>
4
+ <circle data-type="point" data-label="U1.1
5
+ x+" data-x="1.2000000000000002" data-y="-0.30000000000000004" cx="308.80000000000007" cy="227.88" r="3" fill="hsl(319, 100%, 50%, 0.8)" />
6
+ </g>
7
+ <g>
8
+ <circle data-type="point" data-label="U1.2
9
+ x-" data-x="-1.2000000000000002" data-y="-0.30000000000000004" cx="40" cy="227.88" r="3" fill="hsl(320, 100%, 50%, 0.8)" />
10
+ </g>
11
+ <g>
12
+ <circle data-type="point" data-label="U1.3
13
+ x+" data-x="1.2000000000000002" data-y="0.09999999999999998" cx="308.80000000000007" cy="183.08" r="3" fill="hsl(321, 100%, 50%, 0.8)" />
14
+ </g>
15
+ <g>
16
+ <circle data-type="point" data-label="U1.4
17
+ x-" data-x="-1.2000000000000002" data-y="0.30000000000000004" cx="40" cy="160.68" r="3" fill="hsl(322, 100%, 50%, 0.8)" />
18
+ </g>
19
+ <g>
20
+ <circle data-type="point" data-label="U1.5
21
+ x-" data-x="-1.2000000000000002" data-y="0.10000000000000003" cx="40" cy="183.07999999999998" r="3" fill="hsl(323, 100%, 50%, 0.8)" />
22
+ </g>
23
+ <g>
24
+ <circle data-type="point" data-label="U1.6
25
+ x-" data-x="-1.2000000000000002" data-y="-0.09999999999999998" cx="40" cy="205.48" r="3" fill="hsl(324, 100%, 50%, 0.8)" />
26
+ </g>
27
+ <g>
28
+ <circle data-type="point" data-label="U1.7
29
+ x+" data-x="1.2000000000000002" data-y="-0.10000000000000003" cx="308.80000000000007" cy="205.48000000000002" r="3" fill="hsl(325, 100%, 50%, 0.8)" />
30
+ </g>
31
+ <g>
32
+ <circle data-type="point" data-label="U1.8
33
+ x+" data-x="1.2000000000000002" data-y="0.30000000000000004" cx="308.80000000000007" cy="160.68" r="3" fill="hsl(326, 100%, 50%, 0.8)" />
34
+ </g>
35
+ <g>
36
+ <circle data-type="point" data-label="J1.1
37
+ x-" data-x="1.6" data-y="-1.895" cx="353.6" cy="406.52" r="3" fill="hsl(218, 100%, 50%, 0.8)" />
38
+ </g>
39
+ <g>
40
+ <circle data-type="point" data-label="J1.2
41
+ x-" data-x="1.6" data-y="-2.095" cx="353.6" cy="428.92" r="3" fill="hsl(219, 100%, 50%, 0.8)" />
42
+ </g>
43
+ <g>
44
+ <circle data-type="point" data-label="J1.3
45
+ x-" data-x="1.6" data-y="-2.295" cx="353.6" cy="451.31999999999994" r="3" fill="hsl(220, 100%, 50%, 0.8)" />
46
+ </g>
47
+ <g>
48
+ <circle data-type="point" data-label="" data-x="1.049" data-y="-2.295" cx="291.88800000000003" cy="451.31999999999994" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
49
+ </g>
50
+ <g>
51
+ <circle data-type="point" data-label="" data-x="1.2000000000000002" data-y="0.30000000000000004" cx="308.80000000000007" cy="160.68" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
52
+ </g>
53
+ <g>
54
+ <circle data-type="point" data-label="" data-x="1.6" data-y="-1.895" cx="353.6" cy="406.52" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
55
+ </g>
56
+ <g>
57
+ <polyline data-points="1.2000000000000002,-0.30000000000000004 1.6,-2.295" data-type="line" data-label="" points="308.80000000000007,227.88 353.6,451.31999999999994" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
58
+ </g>
59
+ <g>
60
+ <polyline data-points="1.2000000000000002,0.30000000000000004 1.6,-1.895" data-type="line" data-label="" points="308.80000000000007,160.68 353.6,406.52" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
61
+ </g>
62
+ <g>
63
+ <polyline data-points="1.2000000000000002,-0.30000000000000004 1.4000000000000001,-0.30000000000000004 1.4000000000000001,-1.2974999999999999 1.049,-1.2974999999999999 1.049,-2.295 1.6,-2.295" data-type="line" data-label="" points="308.80000000000007,227.88 331.20000000000005,227.88 331.20000000000005,339.6 291.88800000000003,339.6 291.88800000000003,451.31999999999994 353.6,451.31999999999994" fill="none" stroke="purple" stroke-width="1" />
64
+ </g>
65
+ <g>
66
+ <rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="138.28" width="268.80000000000007" height="112" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008928571428571428" />
67
+ </g>
68
+ <g>
69
+ <rect data-type="rect" data-label="schematic_component_1" data-x="2.7" data-y="-2.095" x="353.6" y="384.12" width="246.39999999999998" height="89.60000000000002" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008928571428571428" />
70
+ </g>
71
+ <g>
72
+ <rect data-type="rect" data-label="" data-x="1.049" data-y="-2.52" x="280.68800000000005" y="451.31999999999994" width="22.399999999999977" height="50.40000000000009" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
73
+ </g>
74
+ <g>
75
+ <rect data-type="rect" data-label="" data-x="1.4260000000000002" data-y="0.30000000000000004" x="308.91200000000003" y="149.48" width="50.400000000000034" height="22.400000000000006" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
76
+ </g>
77
+ <g>
78
+ <rect data-type="rect" data-label="" data-x="1.374" data-y="-1.895" x="303.088" y="395.32" width="50.400000000000034" height="22.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
79
+ </g>
80
+ <g id="crosshair" style="display: none">
81
+ <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
82
+ <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
83
+ </g>
84
+ <script>
85
+ <![CDATA[
86
+ document.currentScript.parentElement.addEventListener('mousemove', (e) => {
87
+ const svg = e.currentTarget;
88
+ const rect = svg.getBoundingClientRect();
89
+ const x = e.clientX - rect.left;
90
+ const y = e.clientY - rect.top;
91
+ const crosshair = svg.getElementById('crosshair');
92
+ const h = svg.getElementById('crosshair-h');
93
+ const v = svg.getElementById('crosshair-v');
94
+ const coords = svg.getElementById('coordinates');
95
+
96
+ crosshair.style.display = 'block';
97
+ h.setAttribute('x1', '0');
98
+ h.setAttribute('x2', '640');
99
+ h.setAttribute('y1', y);
100
+ h.setAttribute('y2', y);
101
+ v.setAttribute('x1', x);
102
+ v.setAttribute('x2', x);
103
+ v.setAttribute('y1', '0');
104
+ v.setAttribute('y2', '640');
105
+
106
+ // Calculate real coordinates using inverse transformation
107
+ const matrix = {
108
+ "a": 112,
109
+ "c": 0,
110
+ "e": 174.40000000000003,
111
+ "b": 0,
112
+ "d": -112,
113
+ "f": 194.28
114
+ };
115
+ // Manually invert and apply the affine transform
116
+ // Since we only use translate and scale, we can directly compute:
117
+ // x' = (x - tx) / sx
118
+ // y' = (y - ty) / sy
119
+ const sx = matrix.a;
120
+ const sy = matrix.d;
121
+ const tx = matrix.e;
122
+ const ty = matrix.f;
123
+ const realPoint = {
124
+ x: (x - tx) / sx,
125
+ y: (y - ty) / sy // Flip y back since we used negative scale
126
+ }
127
+
128
+ coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
129
+ coords.setAttribute('x', (x + 5).toString());
130
+ coords.setAttribute('y', (y - 5).toString());
131
+ });
132
+ document.currentScript.parentElement.addEventListener('mouseleave', () => {
133
+ document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
134
+ });
135
+ ]]>
136
+ </script>
137
+ </svg>
package/tests/examples/__snapshots__/example24.snap.svg ADDED
@@ -0,0 +1,143 @@
1
+ <svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="100%" height="100%" fill="white" />
3
+ <g>
4
+ <circle data-type="point" data-label="U1.1
5
+ x+" data-x="1.2000000000000002" data-y="-0.30000000000000004" cx="308.80000000000007" cy="227.88" r="3" fill="hsl(319, 100%, 50%, 0.8)" />
6
+ </g>
7
+ <g>
8
+ <circle data-type="point" data-label="U1.2
9
+ x-" data-x="-1.2000000000000002" data-y="-0.30000000000000004" cx="40" cy="227.88" r="3" fill="hsl(320, 100%, 50%, 0.8)" />
10
+ </g>
11
+ <g>
12
+ <circle data-type="point" data-label="U1.3
13
+ x+" data-x="1.2000000000000002" data-y="0.09999999999999998" cx="308.80000000000007" cy="183.07999999999998" r="3" fill="hsl(321, 100%, 50%, 0.8)" />
14
+ </g>
15
+ <g>
16
+ <circle data-type="point" data-label="U1.4
17
+ x-" data-x="-1.2000000000000002" data-y="0.30000000000000004" cx="40" cy="160.67999999999995" r="3" fill="hsl(322, 100%, 50%, 0.8)" />
18
+ </g>
19
+ <g>
20
+ <circle data-type="point" data-label="U1.5
21
+ x-" data-x="-1.2000000000000002" data-y="0.10000000000000003" cx="40" cy="183.07999999999998" r="3" fill="hsl(323, 100%, 50%, 0.8)" />
22
+ </g>
23
+ <g>
24
+ <circle data-type="point" data-label="U1.6
25
+ x-" data-x="-1.2000000000000002" data-y="-0.09999999999999998" cx="40" cy="205.47999999999996" r="3" fill="hsl(324, 100%, 50%, 0.8)" />
26
+ </g>
27
+ <g>
28
+ <circle data-type="point" data-label="U1.7
29
+ x+" data-x="1.2000000000000002" data-y="-0.10000000000000003" cx="308.80000000000007" cy="205.47999999999996" r="3" fill="hsl(325, 100%, 50%, 0.8)" />
30
+ </g>
31
+ <g>
32
+ <circle data-type="point" data-label="U1.8
33
+ x+" data-x="1.2000000000000002" data-y="0.30000000000000004" cx="308.80000000000007" cy="160.67999999999995" r="3" fill="hsl(326, 100%, 50%, 0.8)" />
34
+ </g>
35
+ <g>
36
+ <circle data-type="point" data-label="J1.1
37
+ x-" data-x="1.6" data-y="-1.895" cx="353.6" cy="406.52" r="3" fill="hsl(218, 100%, 50%, 0.8)" />
38
+ </g>
39
+ <g>
40
+ <circle data-type="point" data-label="J1.2
41
+ x-" data-x="1.6" data-y="-2.095" cx="353.6" cy="428.91999999999996" r="3" fill="hsl(219, 100%, 50%, 0.8)" />
42
+ </g>
43
+ <g>
44
+ <circle data-type="point" data-label="J1.3
45
+ x-" data-x="1.6" data-y="-2.295" cx="353.6" cy="451.31999999999994" r="3" fill="hsl(220, 100%, 50%, 0.8)" />
46
+ </g>
47
+ <g>
48
+ <circle data-type="point" data-label="" data-x="1.049" data-y="-2.2950000000000004" cx="291.88800000000003" cy="451.32" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
49
+ </g>
50
+ <g>
51
+ <circle data-type="point" data-label="" data-x="1.2000000000000002" data-y="0.30000000000000004" cx="308.80000000000007" cy="160.67999999999995" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
52
+ </g>
53
+ <g>
54
+ <circle data-type="point" data-label="" data-x="1.6" data-y="-1.895" cx="353.6" cy="406.52" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
55
+ </g>
56
+ <g>
57
+ <circle data-type="point" data-label="" data-x="1.6" data-y="-2.095" cx="353.6" cy="428.91999999999996" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
58
+ </g>
59
+ <g>
60
+ <polyline data-points="1.2000000000000002,-0.30000000000000004 1.6,-2.295" data-type="line" data-label="" points="308.80000000000007,227.88 353.6,451.31999999999994" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
61
+ </g>
62
+ <g>
63
+ <polyline data-points="1.2000000000000002,0.30000000000000004 1.6,-1.895" data-type="line" data-label="" points="308.80000000000007,160.67999999999995 353.6,406.52" fill="none" stroke="hsl(190, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
64
+ </g>
65
+ <g>
66
+ <polyline data-points="1.2000000000000002,-0.30000000000000004 1.4000000000000001,-0.30000000000000004 1.4000000000000001,-1.2975000000000003 1.049,-1.2975000000000003 1.049,-2.2950000000000004 1.6,-2.295" data-type="line" data-label="" points="308.80000000000007,227.88 331.20000000000005,227.88 331.20000000000005,339.6 291.88800000000003,339.6 291.88800000000003,451.32 353.6,451.31999999999994" fill="none" stroke="purple" stroke-width="1" />
67
+ </g>
68
+ <g>
69
+ <rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="40" y="138.27999999999997" width="268.80000000000007" height="112" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008928571428571428" />
70
+ </g>
71
+ <g>
72
+ <rect data-type="rect" data-label="schematic_component_1" data-x="2.7" data-y="-2.095" x="353.6" y="384.12" width="246.39999999999998" height="89.59999999999997" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008928571428571428" />
73
+ </g>
74
+ <g>
75
+ <rect data-type="rect" data-label="" data-x="1.049" data-y="-2.5200000000000005" x="280.68800000000005" y="451.32" width="22.399999999999977" height="50.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
76
+ </g>
77
+ <g>
78
+ <rect data-type="rect" data-label="" data-x="1.4260000000000002" data-y="0.30000000000000004" x="308.91200000000003" y="149.47999999999996" width="50.400000000000034" height="22.400000000000006" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
79
+ </g>
80
+ <g>
81
+ <rect data-type="rect" data-label="" data-x="1.374" data-y="-1.895" x="303.088" y="395.31999999999994" width="50.400000000000034" height="22.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
82
+ </g>
83
+ <g>
84
+ <rect data-type="rect" data-label="" data-x="1.374" data-y="-2.095" x="303.088" y="417.71999999999997" width="50.400000000000034" height="22.400000000000034" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008928571428571428" />
85
+ </g>
86
+ <g id="crosshair" style="display: none">
87
+ <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
88
+ <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
89
+ </g>
90
+ <script>
91
+ <![CDATA[
92
+ document.currentScript.parentElement.addEventListener('mousemove', (e) => {
93
+ const svg = e.currentTarget;
94
+ const rect = svg.getBoundingClientRect();
95
+ const x = e.clientX - rect.left;
96
+ const y = e.clientY - rect.top;
97
+ const crosshair = svg.getElementById('crosshair');
98
+ const h = svg.getElementById('crosshair-h');
99
+ const v = svg.getElementById('crosshair-v');
100
+ const coords = svg.getElementById('coordinates');
101
+
102
+ crosshair.style.display = 'block';
103
+ h.setAttribute('x1', '0');
104
+ h.setAttribute('x2', '640');
105
+ h.setAttribute('y1', y);
106
+ h.setAttribute('y2', y);
107
+ v.setAttribute('x1', x);
108
+ v.setAttribute('x2', x);
109
+ v.setAttribute('y1', '0');
110
+ v.setAttribute('y2', '640');
111
+
112
+ // Calculate real coordinates using inverse transformation
113
+ const matrix = {
114
+ "a": 112,
115
+ "c": 0,
116
+ "e": 174.40000000000003,
117
+ "b": 0,
118
+ "d": -112,
119
+ "f": 194.27999999999997
120
+ };
121
+ // Manually invert and apply the affine transform
122
+ // Since we only use translate and scale, we can directly compute:
123
+ // x' = (x - tx) / sx
124
+ // y' = (y - ty) / sy
125
+ const sx = matrix.a;
126
+ const sy = matrix.d;
127
+ const tx = matrix.e;
128
+ const ty = matrix.f;
129
+ const realPoint = {
130
+ x: (x - tx) / sx,
131
+ y: (y - ty) / sy // Flip y back since we used negative scale
132
+ }
133
+
134
+ coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
135
+ coords.setAttribute('x', (x + 5).toString());
136
+ coords.setAttribute('y', (y - 5).toString());
137
+ });
138
+ document.currentScript.parentElement.addEventListener('mouseleave', () => {
139
+ document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
140
+ });
141
+ ]]>
142
+ </script>
143
+ </svg>
package/tests/examples/__snapshots__/example25.snap.svg ADDED
@@ -0,0 +1,165 @@
1
+ <svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="100%" height="100%" fill="white" />
3
+ <g>
4
+ <circle data-type="point" data-label="U1.1
5
+ x+" data-x="-1.7999999999999998" data-y="-0.30000000000000004" cx="201.92771084337352" cy="247.46987951807228" r="3" fill="hsl(319, 100%, 50%, 0.8)" />
6
+ </g>
7
+ <g>
8
+ <circle data-type="point" data-label="U1.2
9
+ x-" data-x="-4.2" data-y="-0.30000000000000004" cx="40" cy="247.46987951807228" r="3" fill="hsl(320, 100%, 50%, 0.8)" />
10
+ </g>
11
+ <g>
12
+ <circle data-type="point" data-label="U1.3
13
+ x+" data-x="-1.7999999999999998" data-y="0.09999999999999998" cx="201.92771084337352" cy="220.48192771084337" r="3" fill="hsl(321, 100%, 50%, 0.8)" />
14
+ </g>
15
+ <g>
16
+ <circle data-type="point" data-label="U1.4
17
+ x-" data-x="-4.2" data-y="0.30000000000000004" cx="40" cy="206.9879518072289" r="3" fill="hsl(322, 100%, 50%, 0.8)" />
18
+ </g>
19
+ <g>
20
+ <circle data-type="point" data-label="U1.5
21
+ x-" data-x="-4.2" data-y="0.10000000000000003" cx="40" cy="220.48192771084337" r="3" fill="hsl(323, 100%, 50%, 0.8)" />
22
+ </g>
23
+ <g>
24
+ <circle data-type="point" data-label="U1.6
25
+ x-" data-x="-4.2" data-y="-0.09999999999999998" cx="40" cy="233.97590361445782" r="3" fill="hsl(324, 100%, 50%, 0.8)" />
26
+ </g>
27
+ <g>
28
+ <circle data-type="point" data-label="U1.7
29
+ x+" data-x="-1.7999999999999998" data-y="-0.10000000000000003" cx="201.92771084337352" cy="233.97590361445782" r="3" fill="hsl(325, 100%, 50%, 0.8)" />
30
+ </g>
31
+ <g>
32
+ <circle data-type="point" data-label="U1.8
33
+ x+" data-x="-1.7999999999999998" data-y="0.30000000000000004" cx="201.92771084337352" cy="206.9879518072289" r="3" fill="hsl(326, 100%, 50%, 0.8)" />
34
+ </g>
35
+ <g>
36
+ <circle data-type="point" data-label="J1.1
37
+ x-" data-x="1.9" data-y="0.2" cx="451.566265060241" cy="213.73493975903614" r="3" fill="hsl(218, 100%, 50%, 0.8)" />
38
+ </g>
39
+ <g>
40
+ <circle data-type="point" data-label="J1.2
41
+ x-" data-x="1.9" data-y="0" cx="451.566265060241" cy="227.2289156626506" r="3" fill="hsl(219, 100%, 50%, 0.8)" />
42
+ </g>
43
+ <g>
44
+ <circle data-type="point" data-label="J1.3
45
+ x-" data-x="1.9" data-y="-0.2" cx="451.566265060241" cy="240.72289156626505" r="3" fill="hsl(220, 100%, 50%, 0.8)" />
46
+ </g>
47
+ <g>
48
+ <circle data-type="point" data-label="U2.1
49
+ y+" data-x="-0.4" data-y="-0.5" cx="296.3855421686747" cy="260.96385542168673" r="3" fill="hsl(200, 100%, 50%, 0.8)" />
50
+ </g>
51
+ <g>
52
+ <circle data-type="point" data-label="U2.2
53
+ y+" data-x="0.4" data-y="-0.5" cx="350.3614457831325" cy="260.96385542168673" r="3" fill="hsl(201, 100%, 50%, 0.8)" />
54
+ </g>
55
+ <g>
56
+ <circle data-type="point" data-label="U2.3
57
+ x-" data-x="-0.6" data-y="-2.8" cx="282.89156626506025" cy="416.14457831325296" r="3" fill="hsl(202, 100%, 50%, 0.8)" />
58
+ </g>
59
+ <g>
60
+ <circle data-type="point" data-label="U2.4
61
+ x+" data-x="0.6" data-y="-2.8" cx="363.855421686747" cy="416.14457831325296" r="3" fill="hsl(203, 100%, 50%, 0.8)" />
62
+ </g>
63
+ <g>
64
+ <circle data-type="point" data-label="" data-x="-1.2" data-y="-0.30000000000000004" cx="242.40963855421688" cy="247.46987951807228" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
65
+ </g>
66
+ <g>
67
+ <circle data-type="point" data-label="" data-x="-0.8749999999999999" data-y="0.30000000000000004" cx="264.33734939759034" cy="206.9879518072289" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
68
+ </g>
69
+ <g>
70
+ <circle data-type="point" data-label="" data-x="-0.4" data-y="-0.5" cx="296.3855421686747" cy="260.96385542168673" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
71
+ </g>
72
+ <g>
73
+ <circle data-type="point" data-label="" data-x="0.4" data-y="-0.5" cx="350.3614457831325" cy="260.96385542168673" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
74
+ </g>
75
+ <g>
76
+ <polyline data-points="-1.7999999999999998,-0.30000000000000004 1.9,-0.2" data-type="line" data-label="" points="201.92771084337352,247.46987951807228 451.566265060241,240.72289156626505" fill="none" stroke="hsl(194, 100%, 50%, 0.8)" stroke-width="1" />
77
+ </g>
78
+ <g>
79
+ <polyline data-points="-1.7999999999999998,0.30000000000000004 1.9,0.2" data-type="line" data-label="" points="201.92771084337352,206.9879518072289 451.566265060241,213.73493975903614" fill="none" stroke="hsl(169, 100%, 50%, 0.8)" stroke-width="1" />
80
+ </g>
81
+ <g>
82
+ <polyline data-points="-1.7999999999999998,-0.30000000000000004 -0.6,-0.30000000000000004 -0.6,0.05099999999999996 0.6,0.05099999999999996 0.6,-0.2 1.9,-0.2" data-type="line" data-label="" points="201.92771084337352,247.46987951807228 282.89156626506025,247.46987951807228 282.89156626506025,223.78795180722892 363.855421686747,223.78795180722892 363.855421686747,240.72289156626505 451.566265060241,240.72289156626505" fill="none" stroke="purple" stroke-width="1" />
83
+ </g>
84
+ <g>
85
+ <polyline data-points="-1.7999999999999998,0.30000000000000004 0.050000000000000044,0.30000000000000004 0.050000000000000044,0.2 1.9,0.2" data-type="line" data-label="" points="201.92771084337352,206.9879518072289 326.7469879518072,206.9879518072289 326.7469879518072,213.73493975903614 451.566265060241,213.73493975903614" fill="none" stroke="purple" stroke-width="1" />
86
+ </g>
87
+ <g>
88
+ <rect data-type="rect" data-label="schematic_component_0" data-x="-3" data-y="0" x="40" y="193.49397590361446" width="161.92771084337352" height="67.46987951807228" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.01482142857142857" />
89
+ </g>
90
+ <g>
91
+ <rect data-type="rect" data-label="schematic_component_1" data-x="3" data-y="0" x="451.566265060241" y="200.24096385542168" width="148.433734939759" height="53.97590361445782" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.01482142857142857" />
92
+ </g>
93
+ <g>
94
+ <rect data-type="rect" data-label="schematic_component_2" data-x="0" data-y="-2" x="282.89156626506025" y="260.96385542168673" width="80.96385542168673" height="202.40963855421688" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.01482142857142857" />
95
+ </g>
96
+ <g>
97
+ <rect data-type="rect" data-label="" data-x="-1.2" data-y="-0.07500000000000004" x="235.66265060240963" y="217.10843373493975" width="13.493975903614484" height="30.361445783132524" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.01482142857142857" />
98
+ </g>
99
+ <g>
100
+ <rect data-type="rect" data-label="" data-x="-0.8749999999999999" data-y="0.525" x="257.5903614457832" y="176.6265060240964" width="13.493975903614398" height="30.361445783132524" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.01482142857142857" />
101
+ </g>
102
+ <g>
103
+ <rect data-type="rect" data-label="" data-x="-0.4" data-y="-0.274" x="289.6385542168675" y="230.53493975903615" width="13.493975903614455" height="30.361445783132524" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.01482142857142857" />
104
+ </g>
105
+ <g>
106
+ <rect data-type="rect" data-label="" data-x="0.4" data-y="-0.274" x="343.6144578313253" y="230.53493975903615" width="13.493975903614455" height="30.361445783132524" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.01482142857142857" />
107
+ </g>
108
+ <g id="crosshair" style="display: none">
109
+ <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
110
+ <line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5" /><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text>
111
+ </g>
112
+ <script>
113
+ <![CDATA[
114
+ document.currentScript.parentElement.addEventListener('mousemove', (e) => {
115
+ const svg = e.currentTarget;
116
+ const rect = svg.getBoundingClientRect();
117
+ const x = e.clientX - rect.left;
118
+ const y = e.clientY - rect.top;
119
+ const crosshair = svg.getElementById('crosshair');
120
+ const h = svg.getElementById('crosshair-h');
121
+ const v = svg.getElementById('crosshair-v');
122
+ const coords = svg.getElementById('coordinates');
123
+
124
+ crosshair.style.display = 'block';
125
+ h.setAttribute('x1', '0');
126
+ h.setAttribute('x2', '640');
127
+ h.setAttribute('y1', y);
128
+ h.setAttribute('y2', y);
129
+ v.setAttribute('x1', x);
130
+ v.setAttribute('x2', x);
131
+ v.setAttribute('y1', '0');
132
+ v.setAttribute('y2', '640');
133
+
134
+ // Calculate real coordinates using inverse transformation
135
+ const matrix = {
136
+ "a": 67.46987951807229,
137
+ "c": 0,
138
+ "e": 323.3734939759036,
139
+ "b": 0,
140
+ "d": -67.46987951807229,
141
+ "f": 227.2289156626506
142
+ };
143
+ // Manually invert and apply the affine transform
144
+ // Since we only use translate and scale, we can directly compute:
145
+ // x' = (x - tx) / sx
146
+ // y' = (y - ty) / sy
147
+ const sx = matrix.a;
148
+ const sy = matrix.d;
149
+ const tx = matrix.e;
150
+ const ty = matrix.f;
151
+ const realPoint = {
152
+ x: (x - tx) / sx,
153
+ y: (y - ty) / sy // Flip y back since we used negative scale
154
+ }
155
+
156
+ coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
157
+ coords.setAttribute('x', (x + 5).toString());
158
+ coords.setAttribute('y', (y - 5).toString());
159
+ });
160
+ document.currentScript.parentElement.addEventListener('mouseleave', () => {
161
+ document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
162
+ });
163
+ ]]>
164
+ </script>
165
+ </svg>