@tscircuit/schematic-trace-solver 0.0.25 → 0.0.27

package/tests/examples/__snapshots__/example03.snap.svg

@@ -0,0 +1,282 @@
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="white" />
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN2.1
+x-" data-x="-3.5005768910000006" data-y="1.4489565000000004" cx="71.9568626609827" cy="217.33014662474903" r="3" fill="hsl(328, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN2.2
+x-" data-x="-3.5005768910000006" data-y="1.4489565000000004" cx="71.9568626609827" cy="217.33014662474903" r="3" fill="hsl(328, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN2.3
+x+" data-x="-2.4994231089999994" data-y="1.4485175000000003" cx="142.8964057073185" cy="217.36125319394677" r="3" fill="hsl(328, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN2.4
+x+" data-x="-2.4994231089999994" data-y="1.4485175000000003" cx="142.8964057073185" cy="217.36125319394677" r="3" fill="hsl(328, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN3.1
+x-" data-x="-0.5005768910000006" data-y="1.4489565000000004" cx="284.5302284768321" cy="217.33014662474903" r="3" fill="hsl(208, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN3.2
+x-" data-x="-0.5005768910000006" data-y="1.4489565000000004" cx="284.5302284768321" cy="217.33014662474903" r="3" fill="hsl(208, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN3.3
+x+" data-x="0.5005768910000006" data-y="1.4485175000000003" cx="355.4697715231679" cy="217.36125319394677" r="3" fill="hsl(208, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN3.4
+x+" data-x="0.5005768910000006" data-y="1.4485175000000003" cx="355.4697715231679" cy="217.36125319394677" r="3" fill="hsl(208, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN4.1
+x-" data-x="2.4994231089999994" data-y="1.4489565000000004" cx="497.10359429268146" cy="217.33014662474903" r="3" fill="hsl(88, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN4.2
+x-" data-x="2.4994231089999994" data-y="1.4489565000000004" cx="497.10359429268146" cy="217.33014662474903" r="3" fill="hsl(88, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN4.3
+x+" data-x="3.5005768910000006" data-y="1.4485175000000003" cx="568.0431373390173" cy="217.36125319394677" r="3" fill="hsl(88, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN1_PIN4.4
+x+" data-x="3.5005768910000006" data-y="1.4485175000000003" cx="568.0431373390173" cy="217.36125319394677" r="3" fill="hsl(88, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN3.1
+x-" data-x="-3.5005768910000006" data-y="-1.5510434999999996" cx="71.9568626609827" cy="429.90351244059843" r="3" fill="hsl(240, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN3.2
+x-" data-x="-3.5005768910000006" data-y="-1.5510434999999996" cx="71.9568626609827" cy="429.90351244059843" r="3" fill="hsl(240, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN3.3
+x+" data-x="-2.4994231089999994" data-y="-1.5514824999999997" cx="142.8964057073185" cy="429.93461900979617" r="3" fill="hsl(240, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN3.4
+x+" data-x="-2.4994231089999994" data-y="-1.5514824999999997" cx="142.8964057073185" cy="429.93461900979617" r="3" fill="hsl(240, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN4.1
+x-" data-x="-0.5005768910000006" data-y="-1.5510434999999996" cx="284.5302284768321" cy="429.90351244059843" r="3" fill="hsl(120, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN4.2
+x-" data-x="-0.5005768910000006" data-y="-1.5510434999999996" cx="284.5302284768321" cy="429.90351244059843" r="3" fill="hsl(120, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN4.3
+x+" data-x="0.5005768910000006" data-y="-1.5514824999999997" cx="355.4697715231679" cy="429.93461900979617" r="3" fill="hsl(120, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN2_PIN4.4
+x+" data-x="0.5005768910000006" data-y="-1.5514824999999997" cx="355.4697715231679" cy="429.93461900979617" r="3" fill="hsl(120, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN3_PIN4.1
+x-" data-x="2.4994231089999994" data-y="-1.5510434999999996" cx="497.10359429268146" cy="429.90351244059843" r="3" fill="hsl(152, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN3_PIN4.2
+x-" data-x="2.4994231089999994" data-y="-1.5510434999999996" cx="497.10359429268146" cy="429.90351244059843" r="3" fill="hsl(152, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN3_PIN4.3
+x+" data-x="3.5005768910000006" data-y="-1.5514824999999997" cx="568.0431373390173" cy="429.93461900979617" r="3" fill="hsl(152, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="PIN3_PIN4.4
+x+" data-x="3.5005768910000006" data-y="-1.5514824999999997" cx="568.0431373390173" cy="429.93461900979617" r="3" fill="hsl(152, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-3.5005768910000006" data-y="1.4489565000000004" cx="71.9568626609827" cy="217.33014662474903" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-0.5005768910000006" data-y="1.4489565000000004" cx="284.5302284768321" cy="217.33014662474903" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="2.4994231089999994" data-y="1.4489565000000004" cx="497.10359429268146" cy="217.33014662474903" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-3.5005768910000006" data-y="1.4489565000000004" cx="71.9568626609827" cy="217.33014662474903" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-3.5005768910000006" data-y="-1.5510434999999996" cx="71.9568626609827" cy="429.90351244059843" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-0.5005768910000006" data-y="-1.5510434999999996" cx="284.5302284768321" cy="429.90351244059843" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="0.5005768910000006" data-y="1.4485175000000003" cx="355.4697715231679" cy="217.36125319394677" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="-2.4994231089999994" data-y="-1.5514824999999997" cx="142.8964057073185" cy="429.93461900979617" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="3.5005768910000006" data-y="-1.5514824999999997" cx="568.0431373390173" cy="429.93461900979617" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="3.5005768910000006" data-y="1.4485175000000003" cx="568.0431373390173" cy="217.36125319394677" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="0.5005768910000006" data-y="-1.5514824999999997" cx="355.4697715231679" cy="429.93461900979617" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="3.5005768910000006" data-y="-1.5514824999999997" cx="568.0431373390173" cy="429.93461900979617" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <polyline data-points="-3.5005768910000006,1.4489565000000004 -0.5005768910000006,1.4489565000000004" data-type="line" data-label="" points="71.9568626609827,217.33014662474903 284.5302284768321,217.33014662474903" fill="none" stroke="hsl(340, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-3.5005768910000006,1.4489565000000004 2.4994231089999994,1.4489565000000004" data-type="line" data-label="" points="71.9568626609827,217.33014662474903 497.10359429268146,217.33014662474903" fill="none" stroke="hsl(340, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-0.5005768910000006,1.4489565000000004 2.4994231089999994,1.4489565000000004" data-type="line" data-label="" points="284.5302284768321,217.33014662474903 497.10359429268146,217.33014662474903" fill="none" stroke="hsl(340, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-3.5005768910000006,1.4489565000000004 -3.5005768910000006,-1.5510434999999996" data-type="line" data-label="" points="71.9568626609827,217.33014662474903 71.9568626609827,429.90351244059843" fill="none" stroke="hsl(341, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-3.5005768910000006,1.4489565000000004 -0.5005768910000006,-1.5510434999999996" data-type="line" data-label="" points="71.9568626609827,217.33014662474903 284.5302284768321,429.90351244059843" fill="none" stroke="hsl(341, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-3.5005768910000006,-1.5510434999999996 -0.5005768910000006,-1.5510434999999996" data-type="line" data-label="" points="71.9568626609827,429.90351244059843 284.5302284768321,429.90351244059843" fill="none" stroke="hsl(341, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="0.5005768910000006,1.4485175000000003 -2.4994231089999994,-1.5514824999999997" data-type="line" data-label="" points="355.4697715231679,217.36125319394677 142.8964057073185,429.93461900979617" fill="none" stroke="hsl(342, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="0.5005768910000006,1.4485175000000003 3.5005768910000006,-1.5514824999999997" data-type="line" data-label="" points="355.4697715231679,217.36125319394677 568.0431373390173,429.93461900979617" fill="none" stroke="hsl(342, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="-2.4994231089999994,-1.5514824999999997 3.5005768910000006,-1.5514824999999997" data-type="line" data-label="" points="142.8964057073185,429.93461900979617 568.0431373390173,429.93461900979617" fill="none" stroke="hsl(342, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="3.5005768910000006,1.4485175000000003 0.5005768910000006,-1.5514824999999997" data-type="line" data-label="" points="568.0431373390173,217.36125319394677 355.4697715231679,429.93461900979617" fill="none" stroke="hsl(343, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="3.5005768910000006,1.4485175000000003 3.5005768910000006,-1.5514824999999997" data-type="line" data-label="" points="568.0431373390173,217.36125319394677 568.0431373390173,429.93461900979617" fill="none" stroke="hsl(343, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="0.5005768910000006,-1.5514824999999997 3.5005768910000006,-1.5514824999999997" data-type="line" data-label="" points="355.4697715231679,429.93461900979617 568.0431373390173,429.93461900979617" fill="none" stroke="hsl(343, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_0" data-x="-3" data-y="1.5" x="71.9568626609827" y="197.79734690223955" width="70.93954304633581" height="31.831940379671494" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_1" data-x="0" data-y="1.5" x="284.5302284768321" y="197.79734690223955" width="70.93954304633576" height="31.831940379671494" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_2" data-x="3" data-y="1.5" x="497.10359429268146" y="197.79734690223955" width="70.93954304633587" height="31.831940379671494" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_3" data-x="-3" data-y="-1.5" x="71.9568626609827" y="410.37071271808895" width="70.93954304633581" height="31.831940379671494" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_4" data-x="0" data-y="-1.5" x="284.5302284768321" y="410.37071271808895" width="70.93954304633576" height="31.831940379671494" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_5" data-x="3" data-y="-1.5" x="497.10359429268146" y="410.37071271808895" width="70.93954304633587" height="31.831940379671494" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-3.7265768910000006" data-y="1.4489565000000004" x="40" y="210.24436776422073" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-0.7265768910000006" data-y="1.4489565000000004" x="252.5733658158494" y="210.24436776422073" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="2.2734231089999994" data-y="1.4489565000000004" x="465.1467316316988" y="210.24436776422073" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-3.7265768910000006" data-y="1.4489565000000004" x="40" y="210.24436776422073" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-3.7265768910000006" data-y="-1.5510434999999996" x="40" y="422.8177335800701" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-0.7265768910000006" data-y="-1.5510434999999996" x="252.5733658158494" y="422.8177335800701" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="0.7265768910000006" data-y="1.4485175000000003" x="355.54062931177316" y="210.27547433341846" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="-2.2734231089999994" data-y="-1.5514824999999997" x="142.96726349592376" y="422.84884014926786" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="3.7265768910000006" data-y="-1.5514824999999997" x="568.1139951276225" y="422.84884014926786" width="31.886004872377498" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="3.7265768910000006" data-y="1.4485175000000003" x="568.1139951276225" y="210.27547433341846" width="31.886004872377498" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="0.7265768910000006" data-y="-1.5514824999999997" x="355.54062931177316" y="422.84884014926786" width="31.88600487237744" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="3.7265768910000006" data-y="-1.5514824999999997" x="568.1139951276225" y="422.84884014926786" width="31.886004872377498" height="14.171557721056615" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.014112774610714288" />
+  </g>
+  <g id="crosshair" style="display: none">
+    <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
+    <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>
+  </g>
+  <script>
+    <![CDATA[
+    document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+      const svg = e.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const crosshair = svg.getElementById('crosshair');
+      const h = svg.getElementById('crosshair-h');
+      const v = svg.getElementById('crosshair-v');
+      const coords = svg.getElementById('coordinates');
+
+      crosshair.style.display = 'block';
+      h.setAttribute('x1', '0');
+      h.setAttribute('x2', '640');
+      h.setAttribute('y1', y);
+      h.setAttribute('y2', y);
+      v.setAttribute('x1', x);
+      v.setAttribute('x2', x);
+      v.setAttribute('y1', '0');
+      v.setAttribute('y2', '640');
+
+      // Calculate real coordinates using inverse transformation
+      const matrix = {
+        "a": 70.85778860528313,
+        "c": 0,
+        "e": 320,
+        "b": 0,
+        "d": -70.85778860528313,
+        "f": 320
+      };
+      // Manually invert and apply the affine transform
+      // Since we only use translate and scale, we can directly compute:
+      // x' = (x - tx) / sx
+      // y' = (y - ty) / sy
+      const sx = matrix.a;
+      const sy = matrix.d;
+      const tx = matrix.e;
+      const ty = matrix.f;
+      const realPoint = {
+        x: (x - tx) / sx,
+        y: (y - ty) / sy // Flip y back since we used negative scale
+      }
+
+      coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+      coords.setAttribute('x', (x + 5).toString());
+      coords.setAttribute('y', (y - 5).toString());
+    });
+    document.currentScript.parentElement.addEventListener('mouseleave', () => {
+      document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+    });
+    ]]>
+  </script>
+</svg>

package/tests/examples/__snapshots__/example04.snap.svg

@@ -0,0 +1,87 @@
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="white" />
+  <g>
+    <circle data-type="point" data-label="Q1.1
+y+" data-x="0.30397715550000004" data-y="0.5800832909999993" cx="390.7539406701768" cy="221.0795201051653" r="3" fill="hsl(315, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="Q1.2
+y-" data-x="0.31067575550000137" data-y="-0.5800832909999993" cx="392.6200626292179" cy="544.283224583026" r="3" fill="hsl(316, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="Q1.3
+x-" data-x="-0.4467558855000001" data-y="-0.10250625000000019" cx="181.61181945268248" cy="411.2379608945266" r="3" fill="hsl(317, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="0.30397715550000004" data-y="0.7800832909999994" cx="390.7539406701768" cy="165.36274468819138" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <polyline data-points="0.30397715550000004,0.5800832909999993 0.31067575550000137,-0.5800832909999993" data-type="line" data-label="" points="390.7539406701768,221.0795201051653 392.6200626292179,544.283224583026" fill="none" stroke="hsl(73, 100%, 50%, 0.8)" stroke-width="1" stroke-dasharray="4 2" />
+  </g>
+  <g>
+    <polyline data-points="0.30397715550000004,0.5800832909999993 0.30397715550000004,0.7800832909999994 0.5467558855000001,0.7800832909999994 0.5467558855000001,-0.7800832909999995 0.31067575550000137,-0.7800832909999995 0.31067575550000137,-0.5800832909999993" data-type="line" data-label="" points="390.7539406701768,221.0795201051653 390.7539406701768,165.36274468819138 458.3881805473175,165.36274468819138 458.3881805473175,600 392.6200626292179,600 392.6200626292179,544.283224583026" fill="none" stroke="purple" stroke-width="1" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="181.61181945268248" y="221.0795201051653" width="248.9179733861481" height="323.2037044778607" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.003589583182142856" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="0.30397715550000004" data-y="1.0050832909999994" x="362.8955529616899" y="40.000000000000114" width="55.71677541697386" height="125.36274468819127" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.003589583182142856" />
+  </g>
+  <g id="crosshair" style="display: none">
+    <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
+    <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>
+  </g>
+  <script>
+    <![CDATA[
+    document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+      const svg = e.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const crosshair = svg.getElementById('crosshair');
+      const h = svg.getElementById('crosshair-h');
+      const v = svg.getElementById('crosshair-v');
+      const coords = svg.getElementById('coordinates');
+
+      crosshair.style.display = 'block';
+      h.setAttribute('x1', '0');
+      h.setAttribute('x2', '640');
+      h.setAttribute('y1', y);
+      h.setAttribute('y2', y);
+      v.setAttribute('x1', x);
+      v.setAttribute('x2', x);
+      v.setAttribute('y1', '0');
+      v.setAttribute('y2', '640');
+
+      // Calculate real coordinates using inverse transformation
+      const matrix = {
+        "a": 278.58387708486947,
+        "c": 0,
+        "e": 306.07080614575653,
+        "b": 0,
+        "d": -278.58387708486947,
+        "f": 382.6813723440957
+      };
+      // Manually invert and apply the affine transform
+      // Since we only use translate and scale, we can directly compute:
+      // x' = (x - tx) / sx
+      // y' = (y - ty) / sy
+      const sx = matrix.a;
+      const sy = matrix.d;
+      const tx = matrix.e;
+      const ty = matrix.f;
+      const realPoint = {
+        x: (x - tx) / sx,
+        y: (y - ty) / sy // Flip y back since we used negative scale
+      }
+
+      coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+      coords.setAttribute('x', (x + 5).toString());
+      coords.setAttribute('y', (y - 5).toString());
+    });
+    document.currentScript.parentElement.addEventListener('mouseleave', () => {
+      document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+    });
+    ]]>
+  </script>
+</svg>

package/tests/examples/__snapshots__/example05.snap.svg

@@ -0,0 +1,190 @@
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="white" />
+  <g>
+    <circle data-type="point" data-label="U1.1
+x+" data-x="0.9" data-y="1.2" cx="329.87551490196074" cy="193.72549019607843" r="3" fill="hsl(319, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.2
+x+" data-x="0.9" data-y="0.3999999999999999" cx="329.87551490196074" cy="281.5686274509804" r="3" fill="hsl(320, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.3
+x+" data-x="0.9" data-y="0.5999999999999999" cx="329.87551490196074" cy="259.6078431372549" r="3" fill="hsl(321, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.4
+x-" data-x="-0.9" data-y="0.3999999999999999" cx="132.22845607843135" cy="281.5686274509804" r="3" fill="hsl(322, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.5
+x+" data-x="0.9" data-y="0.9999999999999998" cx="329.87551490196074" cy="215.68627450980395" r="3" fill="hsl(323, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.6
+x+" data-x="0.9" data-y="-0.19999999999999996" cx="329.87551490196074" cy="347.45098039215685" r="3" fill="hsl(324, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.7
+x-" data-x="-0.9" data-y="-0.7999999999999998" cx="132.22845607843135" cy="413.3333333333333" r="3" fill="hsl(325, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.9
+x+" data-x="0.9" data-y="0.19999999999999996" cx="329.87551490196074" cy="303.5294117647059" r="3" fill="hsl(327, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.10
+x+" data-x="0.9" data-y="0" cx="329.87551490196074" cy="325.4901960784314" r="3" fill="hsl(217, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.11
+x+" data-x="0.9" data-y="0.7999999999999998" cx="329.87551490196074" cy="237.64705882352945" r="3" fill="hsl(218, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.12
+x+" data-x="0.9" data-y="-1.2" cx="329.87551490196074" cy="457.2549019607843" r="3" fill="hsl(219, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.13
+x+" data-x="0.9" data-y="-1" cx="329.87551490196074" cy="435.29411764705884" r="3" fill="hsl(220, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.14
+x+" data-x="0.9" data-y="-0.7999999999999999" cx="329.87551490196074" cy="413.33333333333337" r="3" fill="hsl(221, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.15
+x-" data-x="-0.9" data-y="1" cx="132.22845607843135" cy="215.68627450980392" r="3" fill="hsl(222, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.16
+x-" data-x="-0.9" data-y="1.2" cx="132.22845607843135" cy="193.72549019607843" r="3" fill="hsl(223, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.17
+x-" data-x="-0.9" data-y="0.5999999999999999" cx="132.22845607843135" cy="259.6078431372549" r="3" fill="hsl(224, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.18
+x-" data-x="-0.9" data-y="-0.9999999999999998" cx="132.22845607843135" cy="435.2941176470588" r="3" fill="hsl(225, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.19
+x-" data-x="-0.9" data-y="-0.19999999999999996" cx="132.22845607843135" cy="347.45098039215685" r="3" fill="hsl(226, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.20
+x-" data-x="-0.9" data-y="0.7999999999999999" cx="132.22845607843135" cy="237.64705882352942" r="3" fill="hsl(248, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.21
+x-" data-x="-0.9" data-y="-1.2" cx="132.22845607843135" cy="457.2549019607843" r="3" fill="hsl(249, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.22
+x+" data-x="0.9" data-y="-0.5999999999999999" cx="329.87551490196074" cy="391.37254901960785" r="3" fill="hsl(250, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.23
+x+" data-x="0.9" data-y="-0.3999999999999999" cx="329.87551490196074" cy="369.4117647058824" r="3" fill="hsl(251, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.25
+x-" data-x="-0.9" data-y="-0.5999999999999999" cx="132.22845607843135" cy="391.37254901960785" r="3" fill="hsl(253, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.26
+x-" data-x="-0.9" data-y="-0.3999999999999999" cx="132.22845607843135" cy="369.4117647058824" r="3" fill="hsl(254, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.27
+x-" data-x="-0.9" data-y="0.19999999999999996" cx="132.22845607843135" cy="303.5294117647059" r="3" fill="hsl(255, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="U1.28
+x-" data-x="-0.9" data-y="0" cx="132.22845607843135" cy="325.4901960784314" r="3" fill="hsl(256, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="LED1.1
+x-" data-x="1.4798754500000002" data-y="1.0005122999999987" cx="393.54811333333333" cy="215.63002196078446" r="3" fill="hsl(57, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="LED1.2
+x+" data-x="2.52012455" data-y="0.9994877000000013" cx="507.7715439215686" cy="215.74252705882338" r="3" fill="hsl(58, 100%, 50%, 0.8)" />
+  </g>
+  <g>
+    <circle data-type="point" data-label="" data-x="2.6201245500000003" data-y="0.9994877000000013" cx="518.7519360784314" cy="215.74252705882338" r="3" fill="hsl(40, 100%, 50%, 0.9)" />
+  </g>
+  <g>
+    <polyline data-points="2.52012455,0.9994877000000013 -0.9,0.7999999999999999" data-type="line" data-label="" points="507.7715439215686,215.74252705882338 132.22845607843135,237.64705882352942" fill="none" stroke="hsl(248, 100%, 50%, 0.8)" stroke-width="1" />
+  </g>
+  <g>
+    <polyline data-points="2.5201245500000002,0.9994877000000013 2.7201245500000004,0.9994877000000013 2.7201245500000004,2.6 -1.1,2.6 -1.1,0.7999999999999999 -0.9,0.7999999999999999" data-type="line" data-label="" points="507.77154392156865,215.74252705882338 529.7323282352942,215.74252705882338 529.7323282352942,40 110.26767176470584,40 110.26767176470584,237.64705882352942 132.22845607843135,237.64705882352942" fill="none" stroke="purple" stroke-width="1" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="132.22845607843135" y="50.98039215686276" width="197.6470588235294" height="549.0196078431372" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009107142857142857" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="schematic_component_1" data-x="2" data-y="1" x="393.54811333333333" y="185.61698666666672" width="114.22343058823526" height="60.13857568627441" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009107142857142857" />
+  </g>
+  <g>
+    <rect data-type="rect" data-label="" data-x="2.6201245500000003" data-y="0.7744877000000013" x="507.77154392156865" y="215.74252705882338" width="21.960784313725526" height="49.411764705882376" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009107142857142857" />
+  </g>
+  <g id="crosshair" style="display: none">
+    <line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5" />
+    <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>
+  </g>
+  <script>
+    <![CDATA[
+    document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+      const svg = e.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const crosshair = svg.getElementById('crosshair');
+      const h = svg.getElementById('crosshair-h');
+      const v = svg.getElementById('crosshair-v');
+      const coords = svg.getElementById('coordinates');
+
+      crosshair.style.display = 'block';
+      h.setAttribute('x1', '0');
+      h.setAttribute('x2', '640');
+      h.setAttribute('y1', y);
+      h.setAttribute('y2', y);
+      v.setAttribute('x1', x);
+      v.setAttribute('x2', x);
+      v.setAttribute('y1', '0');
+      v.setAttribute('y2', '640');
+
+      // Calculate real coordinates using inverse transformation
+      const matrix = {
+        "a": 109.80392156862746,
+        "c": 0,
+        "e": 231.05198549019605,
+        "b": 0,
+        "d": -109.80392156862746,
+        "f": 325.4901960784314
+      };
+      // Manually invert and apply the affine transform
+      // Since we only use translate and scale, we can directly compute:
+      // x' = (x - tx) / sx
+      // y' = (y - ty) / sy
+      const sx = matrix.a;
+      const sy = matrix.d;
+      const tx = matrix.e;
+      const ty = matrix.f;
+      const realPoint = {
+        x: (x - tx) / sx,
+        y: (y - ty) / sy // Flip y back since we used negative scale
+      }
+
+      coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+      coords.setAttribute('x', (x + 5).toString());
+      coords.setAttribute('y', (y - 5).toString());
+    });
+    document.currentScript.parentElement.addEventListener('mouseleave', () => {
+      document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+    });
+    ]]>
+  </script>
+</svg>