npm - @tscircuit/schematic-trace-solver - Versions diffs - 0.0.148 → 0.0.150 - Mend

@tscircuit/schematic-trace-solver 0.0.148 → 0.0.150

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 (164) hide show

package/tests/examples/__snapshots__/example37.snap.svg CHANGED Viewed

@@ -1,4 +1,6 @@
-<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><polyline data-points="-6.74,0.3 -4.24,1.7" data-type="line" data-label="" points="61.98952879581145,334.4564787958115 245.23560209424073,231.8386777486911" fill="none" stroke="hsl(24, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-0.6000000000000001,0.30000000000000004 -5.640000000000001,0.3" data-type="line" data-label="" points="512.0418848167538,334.4564787958115 142.61780104712034,334.4564787958115" fill="none" stroke="hsl(8, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-0.6000000000000001,0.10000000000000003 -3.1399999999999997,1.7" data-type="line" data-label="" points="512.0418848167538,349.11616465968586 325.8638743455497,231.8386777486911" fill="none" stroke="hsl(8, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-3.52,-0.09999999999999998 -0.6000000000000001,-0.09999999999999998" data-type="line" data-label="" points="298.01047120418843,363.77585052356017 512.0418848167538,363.77585052356017" fill="none" stroke="hsl(152, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-3.52,-0.3 -0.6000000000000001,-0.30000000000000004" data-type="line" data-label="" points="298.01047120418843,378.4355363874345 512.0418848167538,378.4355363874345" fill="none" stroke="hsl(152, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-6.74,0.3 -6.94,0.3 -6.94,1.7 -4.24,1.7" data-type="line" data-label="" points="61.98952879581145,334.4564787958115 47.329842931937094,334.4564787958115 47.329842931937094,231.8386777486911 245.23560209424073,231.8386777486911" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="-0.6000000000000001,0.30000000000000004 -5.640000000000001,0.3" data-type="line" data-label="" points="512.0418848167538,334.4564787958115 142.61780104712034,334.4564787958115" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="-3.52,-0.09999999999999998 -3.72,-0.09999999999999998 -3.72,0.19999999999999998 -1.1510000000000002,0.19999999999999998 -1.1510000000000002,-0.09999999999999998 -0.6000000000000005,-0.09999999999999998" data-type="line" data-label="" points="298.01047120418843,363.77585052356017 283.3507853403141,363.77585052356017 283.3507853403141,341.78632172774866 471.65445026177997,341.78632172774866 471.65445026177997,363.77585052356017 512.0418848167538,363.77585052356017" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="-3.69" data-y="1.7" x="245.23560209424076" y="217.58540602094246" width="80.62827225130894" height="28.506543455497336" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="schematic_component_1" data-x="-6.19" data-y="0.3" x="61.98952879581145" y="303.67113848167537" width="80.62827225130889" height="61.57068062827227" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="schematic_component_2" data-x="0" data-y="0" x="512.0418848167538" y="319.79679293193715" width="87.95811518324604" height="73.29842931937173" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="schematic_component_3" data-x="-2.92" data-y="-0.4" x="298.01047120418843" y="349.11616465968586" width="87.95811518324604" height="73.29842931937173" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="netId: .C1 &gt; .pin1 to R1.pin1
+<svg width="2416" height="1200" viewBox="0 0 2416 1200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Solver debug visualization on the left and Circuit JSON schematic on the right">
+  <g transform="translate(0, 0) scale(1.875, 1.875) translate(0, 0)">
+    <rect width="100%" height="100%" fill="white"/><g><polyline data-points="-6.74,0.3 -4.24,1.7" data-type="line" data-label="" points="61.98952879581145,334.4564787958115 245.23560209424073,231.8386777486911" fill="none" stroke="hsl(24, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-0.6000000000000001,0.30000000000000004 -5.640000000000001,0.3" data-type="line" data-label="" points="512.0418848167538,334.4564787958115 142.61780104712034,334.4564787958115" fill="none" stroke="hsl(8, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-0.6000000000000001,0.10000000000000003 -3.1399999999999997,1.7" data-type="line" data-label="" points="512.0418848167538,349.11616465968586 325.8638743455497,231.8386777486911" fill="none" stroke="hsl(8, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-3.52,-0.09999999999999998 -0.6000000000000001,-0.09999999999999998" data-type="line" data-label="" points="298.01047120418843,363.77585052356017 512.0418848167538,363.77585052356017" fill="none" stroke="hsl(152, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-3.52,-0.3 -0.6000000000000001,-0.30000000000000004" data-type="line" data-label="" points="298.01047120418843,378.4355363874345 512.0418848167538,378.4355363874345" fill="none" stroke="hsl(152, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-6.74,0.3 -6.94,0.3 -6.94,1.7 -4.24,1.7" data-type="line" data-label="" points="61.98952879581145,334.4564787958115 47.329842931937094,334.4564787958115 47.329842931937094,231.8386777486911 245.23560209424073,231.8386777486911" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="-0.6000000000000001,0.30000000000000004 -5.640000000000001,0.3" data-type="line" data-label="" points="512.0418848167538,334.4564787958115 142.61780104712034,334.4564787958115" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="-3.52,-0.09999999999999998 -3.72,-0.09999999999999998 -3.72,0.19999999999999998 -1.1510000000000002,0.19999999999999998 -1.1510000000000002,-0.09999999999999998 -0.6000000000000005,-0.09999999999999998" data-type="line" data-label="" points="298.01047120418843,363.77585052356017 283.3507853403141,363.77585052356017 283.3507853403141,341.78632172774866 471.65445026177997,341.78632172774866 471.65445026177997,363.77585052356017 512.0418848167538,363.77585052356017" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="-3.69" data-y="1.7" x="245.23560209424076" y="217.58540602094246" width="80.62827225130894" height="28.506543455497336" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="schematic_component_1" data-x="-6.19" data-y="0.3" x="61.98952879581145" y="303.67113848167537" width="80.62827225130889" height="61.57068062827227" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="schematic_component_2" data-x="0" data-y="0" x="512.0418848167538" y="319.79679293193715" width="87.95811518324604" height="73.29842931937173" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="schematic_component_3" data-x="-2.92" data-y="-0.4" x="298.01047120418843" y="349.11616465968586" width="87.95811518324604" height="73.29842931937173" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="netId: .C1 &gt; .pin1 to R1.pin1
 globalConnNetId: connectivity_net0" data-x="-6.94" data-y="0.07499999999999998" x="39.99999999999997" y="334.45647879581145" width="14.659685863874245" height="32.98429319371729" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="netId: .U1 &gt; .pin2 to R1.pin2
 globalConnNetId: connectivity_net2" data-x="-0.8260000000000001" data-y="0.10000000000000003" x="478.9842931937171" y="341.7863217277487" width="32.98429319371729" height="14.659685863874358" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="netId: .U1 &gt; .pin2 to R1.pin2
 globalConnNetId: connectivity_net2" data-x="-2.9139999999999997" data-y="1.7" x="325.93717277486905" y="224.50883481675393" width="32.98429319371729" height="14.659685863874358" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.013642857142857144"/></g><g><rect data-type="rect" data-label="netId: .U1 &gt; .pin1 to C1.pin2
@@ -42,7 +44,7 @@ orientation: x-" data-x="-0.6000000000000001" data-y="-0.30000000000000004" cx="
                 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');
@@ -61,13 +63,13 @@ orientation: x-" data-x="-0.6000000000000001" data-y="-0.30000000000000004" cx="
                 // y' = (y - ty) / sy
                 const sx = matrix.a;
                 const sy = matrix.d;
-                const tx = matrix.e;
+                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());
@@ -75,4 +77,69 @@ orientation: x-" data-x="-0.6000000000000001" data-y="-0.30000000000000004" cx="
               document.currentScript.parentElement.addEventListener('mouseleave', () => {
                 document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
               });
-            ]]></script></svg>
+            ]]></script>
+  </g>
+  <g transform="translate(1216, 200)">
+    <style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="800"/><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"><path d="M 109.83981693392002 454.6338672769 L 82.3798627005201 454.6338672769 L 82.3798627005201 262.41418764310004 L 453.08924485142006 262.41418764310004" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="21.967963386719997px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 109.83981693392002 454.6338672769 L 82.3798627005201 454.6338672769 L 82.3798627005201 262.41418764310004 L 453.08924485142006 262.41418764310004" stroke="rgb(0, 150, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_1__stack1"><path d="M 952.8604118993001 454.6338672769 L 260.86956521762 454.6338672769" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="21.967963386719997px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 952.8604118993001 454.6338672769 L 260.86956521762 454.6338672769" stroke="rgb(0, 150, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_2__stack1"><path d="M 551.9450800916601 509.5537757437 L 524.4851258582601 509.5537757437 L 524.4851258582601 468.3638443936 L 877.2082379862829 468.3638443936 L 877.2082379862829 509.5537757437 L 952.8604118993 509.5537757437" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="21.967963386719997px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 551.9450800916601 509.5537757437 L 524.4851258582601 509.5537757437 L 524.4851258582601 468.3638443936 L 877.2082379862829 468.3638443936 L 877.2082379862829 509.5537757437 L 952.8604118993 509.5537757437" stroke="rgb(0, 150, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"/><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_1__stack1"/><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_2__stack1"/><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0__stack1"><rect class="component-overlay sch-component-overlay" x="453.08924485142" y="242.28192219688282" width="151.02974828370003" height="40.264530892434436" fill="transparent"/><path class="sch-component-symbol-path" d="M 453.08924485142 262.41418764310004 L 478.2659038903128 262.41418764310004" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 578.9423340962273 262.41418764310004 L 604.11899313512 262.41418764310004" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 478.2659038903128 242.28192219688282 L 578.9423340962273 242.28192219688282 L 578.9423340962273 282.54645308931725 L 478.2659038903128 282.54645308931725 L 478.2659038903128 242.28192219688282" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><text class="sch-component-name sch-component-text" x="528.60411899327" y="222.13958810078003" stroke="rgb(245, 241, 237)" stroke-width="2.7459954233399997px" paint-order="stroke" fill="rgb(15, 15, 15)" font-family="sans-serif" text-anchor="middle" dominant-baseline="ideographic" font-size="24.713958810059996px">R1</text><text class="sch-component-text" x="528.60411899327" y="302.68878718542004" fill="rgb(15, 15, 15)" font-family="sans-serif" text-anchor="middle" dominant-baseline="hanging" font-size="24.713958810059996px"></text><circle class="component-pin sch-component-pin" cx="604.11899313512" cy="262.41418764310004" r="2.7459954233399997px" stroke-width="2.7459954233399997px" fill="none" stroke="rgb(132, 0, 0)"/></g><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_1__stack1"><rect class="component-overlay sch-component-overlay" x="109.83981693392003" y="414.35423340963723" width="151.02974828369997" height="80.55926773452552" fill="transparent"/><path class="sch-component-symbol-path" d="M 260.86956521762 454.6338672769 L 200.45766590414 454.6338672769" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 170.25171624740003 454.6338672769 L 109.83981693392003 454.6338672769" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 200.45766590414 414.35423340963723 L 200.45766590414 494.91350114416275" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 170.25171624740003 414.35423340963723 L 170.25171624740003 494.91350114416275" stroke="rgb(132, 0, 0)" fill="none" stroke-width="2.7459954233399997px" stroke-linecap="round"/><text class="sch-component-name sch-component-text" x="185.35469107577" y="394.22196796342" stroke="rgb(245, 241, 237)" stroke-width="2.7459954233399997px" paint-order="stroke" fill="rgb(15, 15, 15)" font-family="sans-serif" text-anchor="middle" dominant-baseline="ideographic" font-size="24.713958810059996px">C1</text><text class="sch-component-text" x="185.35469107577" y="515.0457665903799" fill="rgb(15, 15, 15)" font-family="sans-serif" text-anchor="middle" dominant-baseline="hanging" font-size="24.713958810059996px"></text></g><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_2__stack1"><rect class="component chip sch-component-body" x="1007.7803203661" y="427.17391304349997" width="54.91990846679994" height="137.29977116700002" stroke-width="2.7459954233399997px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="1007.7803203661" y="427.17391304349997" width="54.91990846679994" height="137.29977116700002" fill="transparent"/><text class="sch-text" x="1035.2402745995" y="495.823798627" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="24.713958810059996px" transform="rotate(0, 1035.2402745995, 495.823798627)">U1</text><line class="component-pin sch-component-pin sch-port-line" x1="1007.7803203661" y1="454.6338672769" x2="952.8604118993001" y2="454.6338672769" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_0__stack1"><rect x="950.1144164759601" y="451.88787185356" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="980.3203661327" y="451.88787185356" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="1007.7803203661" y1="482.09382151029996" x2="955.60640732264" y2="482.09382151029996" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="952.8604118993001" cy="482.09382151029996" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="950.1144164759601" y="479.34782608695997" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="980.3203661327" y="479.34782608695997" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="1007.7803203661" y1="509.5537757437" x2="952.8604118993001" y2="509.5537757437" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_2__stack1"><rect x="950.1144164759601" y="506.80778032036" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="980.3203661327" y="506.80778032036" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="1007.7803203661" y1="537.0137299771" x2="955.60640732264" y2="537.0137299771" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_3__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="952.8604118993001" cy="537.0137299771" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="950.1144164759601" y="534.26773455376" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="980.3203661327" y="534.26773455376" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">4</text><line class="component-pin sch-component-pin sch-port-line" x1="1062.7002288329" y1="537.0137299771" x2="1114.87414187636" y2="537.0137299771" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_4__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="1117.6201372997" cy="537.0137299771" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="1114.87414187636" y="534.26773455376" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="1090.1601830663" y="534.26773455376" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">5</text><line class="component-pin sch-component-pin sch-port-line" x1="1062.7002288329" y1="509.5537757437" x2="1114.87414187636" y2="509.5537757437" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_5__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="1117.6201372997" cy="509.5537757437" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="1114.87414187636" y="506.80778032036" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="1090.1601830663" y="506.80778032036" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">6</text><line class="component-pin sch-component-pin sch-port-line" x1="1062.7002288329" y1="482.09382151029996" x2="1114.87414187636" y2="482.09382151029996" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_6__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="1117.6201372997" cy="482.09382151029996" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="1114.87414187636" y="479.34782608695997" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="1090.1601830663" y="479.34782608695997" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">7</text><line class="component-pin sch-component-pin sch-port-line" x1="1062.7002288329" y1="454.6338672769" x2="1114.87414187636" y2="454.6338672769" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_2_7__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="1117.6201372997" cy="454.6338672769" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="1114.87414187636" y="451.88787185356" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="1090.1601830663" y="451.88787185356" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">8</text></g><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_3__stack1"><rect class="component chip sch-component-body" x="606.86498855846" y="482.09382151029996" width="54.91990846680005" height="137.29977116699996" stroke-width="2.7459954233399997px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="606.86498855846" y="482.09382151029996" width="54.91990846680005" height="137.29977116699996" fill="transparent"/><text class="sch-text" x="634.32494279186" y="550.7437070937999" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="24.713958810059996px" transform="rotate(0, 634.32494279186, 550.7437070937999)">U2</text><line class="component-pin sch-component-pin sch-port-line" x1="606.86498855846" y1="509.5537757437" x2="551.9450800916601" y2="509.5537757437" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_0__stack1"><rect x="549.1990846683201" y="506.80778032036" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="579.4050343250601" y="506.80778032036" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">1</text><line class="component-pin sch-component-pin sch-port-line" x1="606.86498855846" y1="537.0137299771" x2="554.6910755150001" y2="537.0137299771" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_1__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="551.9450800916601" cy="537.0137299771" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="549.1990846683201" y="534.26773455376" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="579.4050343250601" y="534.26773455376" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">2</text><line class="component-pin sch-component-pin sch-port-line" x1="606.86498855846" y1="564.4736842105" x2="554.6910755150001" y2="564.4736842105" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_2__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="551.9450800916601" cy="564.4736842105" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="549.1990846683201" y="561.72768878716" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="579.4050343250601" y="561.72768878716" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">3</text><line class="component-pin sch-component-pin sch-port-line" x1="606.86498855846" y1="591.9336384439" x2="554.6910755150001" y2="591.9336384439" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_3__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="551.9450800916601" cy="591.9336384439" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="549.1990846683201" y="589.18764302056" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="579.4050343250601" y="589.18764302056" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">4</text><line class="component-pin sch-component-pin sch-port-line" x1="661.7848970252601" y1="591.9336384439" x2="713.9588100687201" y2="591.9336384439" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_4__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="716.7048054920601" cy="591.9336384439" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="713.9588100687201" y="589.18764302056" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="689.24485125866" y="589.18764302056" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">5</text><line class="component-pin sch-component-pin sch-port-line" x1="661.7848970252601" y1="564.4736842105" x2="713.9588100687201" y2="564.4736842105" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_5__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="716.7048054920601" cy="564.4736842105" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="713.9588100687201" y="561.72768878716" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="689.24485125866" y="561.72768878716" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">6</text><line class="component-pin sch-component-pin sch-port-line" x1="661.7848970252601" y1="537.0137299771" x2="713.9588100687201" y2="537.0137299771" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_6__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="716.7048054920601" cy="537.0137299771" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="713.9588100687201" y="534.26773455376" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="689.24485125866" y="534.26773455376" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">7</text><line class="component-pin sch-component-pin sch-port-line" x1="661.7848970252601" y1="509.5537757437" x2="713.9588100687201" y2="509.5537757437" stroke-width="2.7459954233399997px"/><g class="sch-port" data-schematic-port-id="source_port_3_7__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="716.7048054920601" cy="509.5537757437" r="2.7459954233399997" stroke-width="2.7459954233399997px"/><rect x="713.9588100687201" y="506.80778032036" width="5.491990846679999" height="5.491990846679999" opacity="0"/></g><text class="pin-number sch-pin-number" x="689.24485125866" y="506.80778032036" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="20.59496567505px" transform="">8</text></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_0__stack1"><circle cx="487.41418764317007" cy="262.41418764310004" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_1__stack1"><circle cx="638.4439359268702" cy="262.41418764310004" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_0__stack1"><circle cx="144.16475972567002" cy="454.6338672769" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_1__stack1"><circle cx="295.19450800937" cy="454.6338672769" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_0__stack1"><circle cx="952.8604118993001" cy="454.6338672769" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_1__stack1"><circle cx="952.8604118993001" cy="482.09382151029996" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_2__stack1"><circle cx="952.8604118993001" cy="509.5537757437" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_3__stack1"><circle cx="952.8604118993001" cy="537.0137299771" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_4__stack1"><circle cx="1117.6201372997" cy="537.0137299771" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_5__stack1"><circle cx="1117.6201372997" cy="509.5537757437" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_6__stack1"><circle cx="1117.6201372997" cy="482.09382151029996" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_2_7__stack1"><circle cx="1117.6201372997" cy="454.6338672769" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_0__stack1"><circle cx="551.9450800916601" cy="509.5537757437" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_1__stack1"><circle cx="551.9450800916601" cy="537.0137299771" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_2__stack1"><circle cx="551.9450800916601" cy="564.4736842105" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_3__stack1"><circle cx="551.9450800916601" cy="591.9336384439" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_4__stack1"><circle cx="716.7048054920601" cy="591.9336384439" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_5__stack1"><circle cx="716.7048054920601" cy="564.4736842105" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_6__stack1"><circle cx="716.7048054920601" cy="537.0137299771" r="5.491990846679999" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_3_7__stack1"><circle cx="716.7048054920601" cy="509.5537757437" r="5.491990846679999" fill="red" opacity="0"/></g><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" d="
+    M 82.3798627005201,454.6338672769
+    L 96.1098398172201,462.048054919918
+    L 96.1098398172201,509.1327231121212
+    L 68.64988558382011,509.1327231121212
+    L 68.64988558382011,462.048054919918
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" x="82.3798627005201" y="466.99084668193" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="rotate(90 82.3798627005201 466.99084668193)">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" d="
+    M 952.8604118993001,482.09382151029996
+    L 945.4462242562821,495.823798627
+    L 898.3615560640789,495.823798627
+    L 898.3615560640789,468.36384439359995
+    L 945.4462242562821,468.36384439359995
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" x="940.5034324942701" y="482.09382151029996" fill="rgb(132, 0, 0)" text-anchor="end" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" d="
+    M 604.11899313512,262.41418764310004
+    L 611.533180778138,248.68421052640002
+    L 658.6178489703412,248.68421052640002
+    L 658.6178489703412,276.14416475980005
+    L 611.533180778138,276.14416475980005
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_2__stack1" x="616.47597254015" y="262.41418764310004" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_3__stack1" d="
+    M 606.86498855846,454.6338672769
+    L 593.1350114417601,447.219679633882
+    L 593.1350114417601,400.1350114416788
+    L 620.59496567516,400.1350114416788
+    L 620.59496567516,447.219679633882
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_3__stack1" x="606.86498855846" y="442.27688787187" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="rotate(-90 606.86498855846 442.27688787187)">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_4__stack1" d="
+    M 524.4851258582601,509.5537757437
+    L 517.0709382152421,523.2837528604
+    L 469.98627002303886,523.2837528604
+    L 469.98627002303886,495.823798627
+    L 517.0709382152421,495.823798627
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_4__stack1" x="512.1281464532301" y="509.5537757437" fill="rgb(132, 0, 0)" text-anchor="end" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_5__stack1" d="
+    M 551.9450800916601,537.0137299771
+    L 544.5308924486421,550.7437070937999
+    L 497.4462242564389,550.7437070937999
+    L 497.4462242564389,523.2837528604
+    L 544.5308924486421,523.2837528604
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_5__stack1" x="539.5881006866301" y="537.0137299771" fill="rgb(132, 0, 0)" text-anchor="end" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="">XX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_6__stack1" d="
+    M 952.8604118993001,537.0137299771
+    L 945.4462242562821,550.7437070937999
+    L 898.3615560640789,550.7437070937999
+    L 898.3615560640789,523.2837528604
+    L 945.4462242562821,523.2837528604
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="2.7459954233399997px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_6__stack1" x="940.5034324942701" y="537.0137299771" fill="rgb(132, 0, 0)" text-anchor="end" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="24.713958810059996px" transform="">XX</text>
+  </g>
+</svg>

package/tests/examples/__snapshots__/example38.snap.svg CHANGED Viewed

@@ -1,4 +1,6 @@
-<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><polyline data-points="-1.2246467991473533e-17,0.2 -1.2246467991473533e-17,0.25 -0.25,0.25 -0.25,0.14900000000000002" data-type="line" data-label="" points="440.48192771084337,88.19277108433738 440.48192771084337,40.00000000000003 199.5180722891566,40.00000000000003 199.5180722891566,137.34939759036146" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="344.0963855421687" y="88.19277108433738" width="192.77108433734935" height="385.5421686746988" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.0010375"/></g><g><rect data-type="rect" data-label="netId: GND
+<svg width="2416" height="1200" viewBox="0 0 2416 1200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Solver debug visualization on the left and Circuit JSON schematic on the right">
+  <g transform="translate(0, 0) scale(1.875, 1.875) translate(0, 0)">
+    <rect width="100%" height="100%" fill="white"/><g><polyline data-points="-1.2246467991473533e-17,0.2 -1.2246467991473533e-17,0.25 -0.25,0.25 -0.25,0.14900000000000002" data-type="line" data-label="" points="440.48192771084337,88.19277108433738 440.48192771084337,40.00000000000003 199.5180722891566,40.00000000000003 199.5180722891566,137.34939759036146" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="0" data-y="0" x="344.0963855421687" y="88.19277108433738" width="192.77108433734935" height="385.5421686746988" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.0010375"/></g><g><rect data-type="rect" data-label="netId: GND
 globalConnNetId: connectivity_net0" data-x="-0.25" data-y="-0.09099999999999997" x="103.13253012048193" y="137.3493975903615" width="192.77108433734935" height="462.6506024096385" fill="#00000066" stroke="#000000" stroke-width="0.0010375"/></g><g><circle data-type="point" data-label="TP1.1
 y+" data-x="-1.2246467991473533e-17" data-y="0.2" cx="440.48192771084337" cy="88.19277108433738" r="3" fill="hsl(128, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="anchorPoint
 orientation: y-" data-x="-0.25" data-y="0.14900000000000002" cx="199.5180722891566" cy="137.34939759036146" r="3" fill="hsl(40, 100%, 50%, 0.9)"/></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[
@@ -11,7 +13,7 @@ orientation: y-" data-x="-0.25" data-y="0.14900000000000002" cx="199.51807228915
                 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');
@@ -30,13 +32,13 @@ orientation: y-" data-x="-0.25" data-y="0.14900000000000002" cx="199.51807228915
                 // y' = (y - ty) / sy
                 const sx = matrix.a;
                 const sy = matrix.d;
-                const tx = matrix.e;
+                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());
@@ -44,4 +46,27 @@ orientation: y-" data-x="-0.25" data-y="0.14900000000000002" cx="199.51807228915
               document.currentScript.parentElement.addEventListener('mouseleave', () => {
                 document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
               });
-            ]]></script></svg>
+            ]]></script>
+  </g>
+  <g transform="translate(1216, 200)">
+    <style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="800"/><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"><path d="M 636.0273808094 288.21904647532 L 636.0273808094 264.200792602375 L 515.936111444675 264.200792602375 L 515.936111444675 312.7176654257239" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="76.858412393424px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 636.0273808094 288.21904647532 L 636.0273808094 264.200792602375 L 515.936111444675 264.200792602375 L 515.936111444675 312.7176654257239" stroke="rgb(0, 150, 0)" fill="none" stroke-width="9.607301549178px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"/><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0__stack1"><rect class="component chip sch-component-body" x="587.99087306351" y="360.27380809415496" width="96.0730154917801" height="48.03650774589005" stroke-width="9.607301549178px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="587.99087306351" y="360.27380809415496" width="96.0730154917801" height="48.03650774589005" fill="transparent"/><text class="sch-text" x="636.0273808094" y="384.2920619671" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="64.04867699452px" transform="rotate(0, 636.0273808094, 384.2920619671)">TP1</text><line class="component-pin sch-component-pin sch-port-line" x1="636.0273808094" y1="360.273808094155" x2="636.0273808094" y2="288.21904647532" stroke-width="9.607301549178px"/><g class="sch-port" data-schematic-port-id="source_port_0_0__stack1"><rect x="626.420079260222" y="278.611744926142" width="19.214603098356" height="19.214603098356" opacity="0"/></g><text class="pin-number sch-pin-number" x="626.420079260222" y="324.2464272847375" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="72.05476161883499px" transform="rotate(-90 626.420079260222 324.2464272847375)">1</text></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_0__stack1"><circle cx="636.0273808094" cy="288.21904647532" r="19.214603098356" fill="red" opacity="0"/></g><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" d="
+    M 515.936111444675,312.7176654257239
+    L 563.9726191905651,338.6573796085045
+    L 563.9726191905651,559.817461270582
+    L 467.89960369878503,559.817461270582
+    L 467.89960369878503,338.6573796085045
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="9.607301549178px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" x="515.936111444675" y="355.9505223970249" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="86.465713942602px" transform="rotate(90 515.936111444675 355.9505223970249)">XXX</text>
+  </g>
+</svg>

package/tests/examples/__snapshots__/example39.snap.svg CHANGED Viewed

@@ -1,4 +1,6 @@
-<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><polyline data-points="-7.65,-0.43000000000000016 -8.95,-0.4299999999999997" data-type="line" data-label="" points="325.9574468085108,321.18553191489366 171.06382978723423,321.1855319148936" fill="none" stroke="hsl(80, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-7.65,-0.43000000000000016 -8.95,-0.4299999999999997" data-type="line" data-label="" points="325.9574468085108,321.18553191489366 171.06382978723423,321.1855319148936" fill="none" stroke="hsl(88, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="-7.65,-0.43000000000000016 -8.95,-0.4299999999999997" data-type="line" data-label="" points="325.9574468085108,321.18553191489366 171.06382978723423,321.1855319148936" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="-6.5" data-y="-0.33" x="325.9574468085108" y="261.6110638297873" width="274.04255319148933" height="95.31914893617017" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008392857142857145"/></g><g><rect data-type="rect" data-label="schematic_component_4" data-x="-9.5" data-y="-0.4299999999999997" x="40.00000000000034" y="298.0163838297873" width="131.063829787234" height="46.33829617021263" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008392857142857145"/></g><g><rect data-type="rect" data-label="netId: SWCLK
+<svg width="2416" height="1200" viewBox="0 0 2416 1200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Solver debug visualization on the left and Circuit JSON schematic on the right">
+  <g transform="translate(0, 0) scale(1.875, 1.875) translate(0, 0)">
+    <rect width="100%" height="100%" fill="white"/><g><polyline data-points="-7.65,-0.43000000000000016 -8.95,-0.4299999999999997" data-type="line" data-label="" points="325.9574468085108,321.18553191489366 171.06382978723423,321.1855319148936" fill="none" stroke="hsl(80, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="-7.65,-0.43000000000000016 -8.95,-0.4299999999999997" data-type="line" data-label="" points="325.9574468085108,321.18553191489366 171.06382978723423,321.1855319148936" fill="none" stroke="hsl(88, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="-7.65,-0.43000000000000016 -8.95,-0.4299999999999997" data-type="line" data-label="" points="325.9574468085108,321.18553191489366 171.06382978723423,321.1855319148936" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="schematic_component_0" data-x="-6.5" data-y="-0.33" x="325.9574468085108" y="261.6110638297873" width="274.04255319148933" height="95.31914893617017" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008392857142857145"/></g><g><rect data-type="rect" data-label="schematic_component_4" data-x="-9.5" data-y="-0.4299999999999997" x="40.00000000000034" y="298.0163838297873" width="131.063829787234" height="46.33829617021263" fill="hsl(24, 100%, 50%, 0.8)" stroke="black" stroke-width="0.008392857142857145"/></g><g><rect data-type="rect" data-label="netId: SWCLK
 globalConnNetId: connectivity_net1" data-x="-8.011" data-y="-0.22999999999999998" x="240.0510638297875" y="285.4408510638298" width="85.78723404255311" height="23.829787234042556" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008392857142857145"/></g><g><rect data-type="rect" data-label="netId: SWD
 globalConnNetId: connectivity_net0" data-x="-7.8500000000000005" data-y="-0.6701000000000001" x="290.212765957447" y="321.1974468085107" width="23.829787234042442" height="57.19148936170211" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.008392857142857145"/></g><g><circle data-type="point" data-label="U3.24
 x-" data-x="-7.65" data-y="-0.22999999999999998" cx="325.9574468085108" cy="297.3557446808511" r="3" fill="hsl(74, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U3.25
@@ -16,7 +18,7 @@ orientation: y-" data-x="-7.8500000000000005" data-y="-0.4300000000000001" cx="3
                 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');
@@ -35,13 +37,13 @@ orientation: y-" data-x="-7.8500000000000005" data-y="-0.4300000000000001" cx="3
                 // y' = (y - ty) / sy
                 const sx = matrix.a;
                 const sy = matrix.d;
-                const tx = matrix.e;
+                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());
@@ -49,4 +51,34 @@ orientation: y-" data-x="-7.8500000000000005" data-y="-0.4300000000000001" cx="3
               document.currentScript.parentElement.addEventListener('mouseleave', () => {
                 document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
               });
-            ]]></script></svg>
+            ]]></script>
+  </g>
+  <g transform="translate(1216, 200)">
+    <style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="800"/><g class="trace sch-trace" data-layer="base" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"><path d="M 640.7766990288649 399.99999999999704 L 337.8640776695952 399.99999999999693" class="trace-invisible-hover-outline sch-trace-hitbox" stroke="rgb(0, 150, 0)" fill="none" stroke-width="37.281553398064005px" stroke-linecap="round" opacity="0" stroke-linejoin="round"/><path class="sch-trace-path" d="M 640.7766990288649 399.99999999999704 L 337.8640776695952 399.99999999999693" stroke="rgb(0, 150, 0)" fill="none" stroke-width="4.660194174758001px" stroke-linecap="round" stroke-linejoin="round"/></g><g class="trace-overlays sch-trace-overlays" data-layer="overlay" data-circuit-json-type="schematic_trace" data-schematic-trace-id="schematic_trace_0__stack1"/><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0__stack1"><rect class="component chip sch-component-body" x="733.9805825240248" y="283.49514563104697" width="349.5145631068501" height="186.40776699032006" stroke-width="4.660194174758001px" fill="rgb(255, 255, 194)" stroke="rgb(132, 0, 0)"/><rect class="component-overlay sch-component-overlay" x="733.9805825240248" y="283.49514563104697" width="349.5145631068501" height="186.40776699032006" fill="transparent"/><text class="sch-text" x="908.73786407745" y="376.699029126207" fill="#0f172a" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="41.941747572822px" transform="rotate(0, 908.73786407745, 376.699029126207)">U3</text><line class="component-pin sch-component-pin sch-port-line" x1="733.9805825240248" y1="353.398058252417" x2="645.4368932036227" y2="353.398058252417" stroke-width="4.660194174758001px"/><g class="sch-port" data-schematic-port-id="source_port_0_0__stack1"><circle class="component-pin sch-component-pin sch-port-terminal" cx="640.7766990288649" cy="353.398058252417" r="4.660194174758001" stroke-width="4.660194174758001px"/><rect x="636.1165048541069" y="348.737864077659" width="9.320388349516001" height="9.320388349516001" opacity="0"/></g><text class="pin-number sch-pin-number" x="687.3786407764449" y="348.73786407765897" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="34.951456310685px" transform="">24</text><line class="component-pin sch-component-pin sch-port-line" x1="733.9805825240248" y1="399.99999999999704" x2="640.7766990288649" y2="399.99999999999704" stroke-width="4.660194174758001px"/><g class="sch-port" data-schematic-port-id="source_port_0_1__stack1"><rect x="636.1165048541069" y="395.33980582523907" width="9.320388349516001" height="9.320388349516001" opacity="0"/></g><text class="pin-number sch-pin-number" x="687.3786407764449" y="395.33980582523907" style="font-family: sans-serif;" fill="rgb(169, 0, 0)" text-anchor="middle" dominant-baseline="auto" font-size="34.951456310685px" transform="">25</text></g><g class="sch-component" data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_1__stack1"><rect class="component-overlay sch-component-overlay" x="81.55339805790462" y="365.8337864077586" width="256.3106796116904" height="68.33242718447661" fill="transparent"/><path class="sch-component-symbol-path" d="M 81.55339805790462 399.99999999999693 L 124.28038834917338 399.99999999999693" stroke="rgb(132, 0, 0)" fill="none" stroke-width="4.660194174758001px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 295.13708737832616 399.99999999999693 L 337.86407766959496 399.99999999999693" stroke="rgb(132, 0, 0)" fill="none" stroke-width="4.660194174758001px" stroke-linecap="round"/><path class="sch-component-symbol-path" d="M 124.28038834917338 365.8337864077586 L 295.13708737832616 365.8337864077586 L 295.13708737832616 434.16621359223524 L 124.28038834917338 434.16621359223524 L 124.28038834917338 365.8337864077586" stroke="rgb(132, 0, 0)" fill="none" stroke-width="4.660194174758001px" stroke-linecap="round"/><text class="sch-component-name sch-component-text" x="209.70873786374977" y="331.65048543687953" stroke="rgb(245, 241, 237)" stroke-width="4.660194174758001px" paint-order="stroke" fill="rgb(15, 15, 15)" font-family="sans-serif" text-anchor="middle" dominant-baseline="ideographic" font-size="41.941747572822px">R5</text><text class="sch-component-text" x="209.70873786374977" y="468.3495145631143" fill="rgb(15, 15, 15)" font-family="sans-serif" text-anchor="middle" dominant-baseline="hanging" font-size="41.941747572822px"></text><circle class="component-pin sch-component-pin" cx="81.55339805790462" cy="399.99999999999693" r="4.660194174758001px" stroke-width="4.660194174758001px" fill="none" stroke="rgb(132, 0, 0)"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_0__stack1"><circle cx="640.7766990288649" cy="353.398058252417" r="9.320388349516001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_0_1__stack1"><circle cx="640.7766990288649" cy="399.99999999999704" r="9.320388349516001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_0__stack1"><circle cx="139.8058252423798" cy="399.99999999999693" r="9.320388349516001" fill="red" opacity="0"/></g><g class="schematic-port-hover sch-port-hover" data-schematic-port-id="source_port_1_1__stack1"><circle cx="396.11650485406994" cy="399.99999999999693" r="9.320388349516001" fill="red" opacity="0"/></g><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" d="
+    M 640.7766990288649,353.398058252417
+    L 628.1941747570182,376.699029126207
+    L 466.1747572812651,376.699029126207
+    L 466.1747572812651,330.09708737862695
+    L 628.1941747570182,330.097087378627
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4.660194174758001px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_0__stack1" x="619.8058252424539" y="353.398058252417" fill="rgb(132, 0, 0)" text-anchor="end" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="41.941747572822px" transform="">XXXXX</text><path class="net-label sch-net-label" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" d="
+    M 594.1747572812849,399.99999999999704
+    L 617.4757281550749,412.5825242718436
+    L 617.4757281550749,519.8601941747728
+    L 570.8737864074949,519.8601941747728
+    L 570.8737864074949,412.5825242718436
+    Z
+  " fill="rgba(255, 255, 255, 0.6)" stroke="rgb(132, 0, 0)" stroke-width="4.660194174758001px"/><text class="net-label-text sch-net-label-text" data-circuit-json-type="schematic_net_label" data-schematic-net-label-id="schematic_net_label_1__stack1" x="594.1747572812849" y="420.97087378640805" fill="rgb(132, 0, 0)" text-anchor="start" dominant-baseline="central" font-family="sans-serif" font-variant-numeric="tabular-nums" font-size="41.941747572822px" transform="rotate(90 594.1747572812849 420.97087378640805)">XXX</text>
+  </g>
+</svg>