@tscircuit/schematic-trace-solver 0.0.110 → 0.0.112

package/dist/index.js

@@ -1130,6 +1130,17 @@ var calculateElbowForPins = ({
   },
   { overshoot }
 );
+var pinsFaceEachOther = ({
+  pin1,
+  pin2
+}) => {
+  const xDistance = pin2.x - pin1.x;
+  const yDistance = pin2.y - pin1.y;
+  if (Math.abs(xDistance) >= Math.abs(yDistance)) {
+    return xDistance > 0 ? pin1._facingDirection === "x+" && pin2._facingDirection === "x-" : pin1._facingDirection === "x-" && pin2._facingDirection === "x+";
+  }
+  return yDistance > 0 ? pin1._facingDirection === "y+" && pin2._facingDirection === "y-" : pin1._facingDirection === "y-" && pin2._facingDirection === "y+";
+};
 var SchematicTraceSingleLineSolver2 = class extends BaseSolver {
   pins;
   connectionPair;
@@ -1178,7 +1189,9 @@ var SchematicTraceSingleLineSolver2 = class extends BaseSolver {
       pin2,
       overshoot: Math.min(0.2, Math.max(0.02, routingDistance / 4))
     });
-    const shouldUseAdaptiveElbow = findFirstCollision(defaultElbow, this.obstacles) !== null && findFirstCollision(adaptiveElbow, this.obstacles) === null;
+    const adaptiveElbowIsShorter = this.pathLength(adaptiveElbow) < this.pathLength(defaultElbow);
+    const defaultElbowBacktracks = this.pathLength(defaultElbow) > routingDistance + 1e-9;
+    const shouldUseAdaptiveElbow = findFirstCollision(adaptiveElbow, this.obstacles) === null && (pinsFaceEachOther({ pin1, pin2 }) && defaultElbowBacktracks && adaptiveElbowIsShorter || findFirstCollision(defaultElbow, this.obstacles) !== null);
     this.baseElbow = defaultElbow;
     if (shouldUseAdaptiveElbow) {
       this.baseElbow = adaptiveElbow;
@@ -8154,17 +8167,44 @@ var AvailableNetOrientationSolver = class extends BaseSolver {
     return Math.min(this.maxSearchDistance, labelLength * 2);
   }
   getLateralColumnMaxDistance(label, orientation, baseAnchor) {
-    const chipId = label.pinIds.map((pid) => this.pinMap[pid]?.chipId).find(Boolean);
-    const chip = chipId ? this.chipObstacleSpatialIndex.chips.find((c) => c.chipId === chipId) : null;
-    if (chip) {
-      if (orientation === "y-")
-        return Math.max(0, baseAnchor.y - chip.bounds.minY);
-      if (orientation === "y+")
-        return Math.max(0, chip.bounds.maxY - baseAnchor.y);
-      if (orientation === "x-")
-        return Math.max(0, baseAnchor.x - chip.bounds.minX);
-      if (orientation === "x+")
-        return Math.max(0, chip.bounds.maxX - baseAnchor.x);
+    const availableOrientations = this.getAvailableOrientations(label);
+    const isSingleVerticalOrientation = availableOrientations.length === 1 && isYOrientation(availableOrientations[0]);
+    const labelChipIds = new Set(
+      label.pinIds.map((pinId) => this.pinMap[pinId]?.chipId).filter((chipId) => Boolean(chipId))
+    );
+    const connectedChips = this.chipObstacleSpatialIndex.chips.filter(
+      (chip) => labelChipIds.has(chip.chipId)
+    );
+    const firstConnectedChipId = label.pinIds.map((pinId) => this.pinMap[pinId]?.chipId).find(Boolean);
+    const firstConnectedChip = connectedChips.find(
+      (chip) => chip.chipId === firstConnectedChipId
+    );
+    const labelChips = isSingleVerticalOrientation ? connectedChips : firstConnectedChip ? [firstConnectedChip] : [];
+    if (labelChips.length > 0) {
+      if (orientation === "y-") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => baseAnchor.y - chip.bounds.minY)
+        );
+      }
+      if (orientation === "y+") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => chip.bounds.maxY - baseAnchor.y)
+        );
+      }
+      if (orientation === "x-") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => baseAnchor.x - chip.bounds.minX)
+        );
+      }
+      if (orientation === "x+") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => chip.bounds.maxX - baseAnchor.x)
+        );
+      }
     }
     return this.getSearchDistanceLimit(label, orientation);
   }

package/lib/solvers/AvailableNetOrientationSolver/AvailableNetOrientationSolver.ts

@@ -640,22 +640,61 @@ export class AvailableNetOrientationSolver extends BaseSolver {
     orientation: FacingDirection,
     baseAnchor: Point,
   ) {
-    const chipId = label.pinIds
-      .map((pid) => this.pinMap[pid]?.chipId)
+    const availableOrientations = this.getAvailableOrientations(label)
+    const isSingleVerticalOrientation =
+      availableOrientations.length === 1 &&
+      isYOrientation(availableOrientations[0]!)
+
+    // A vertical rail between components may need to branch laterally and then
+    // search past either connected component before it can use its required
+    // orientation. Keep other labels scoped to their first connected component
+    // so an orientation correction does not move a signal label across the
+    // entire connection.
+    const labelChipIds = new Set(
+      label.pinIds
+        .map((pinId) => this.pinMap[pinId]?.chipId)
+        .filter((chipId): chipId is string => Boolean(chipId)),
+    )
+    const connectedChips = this.chipObstacleSpatialIndex.chips.filter((chip) =>
+      labelChipIds.has(chip.chipId),
+    )
+    const firstConnectedChipId = label.pinIds
+      .map((pinId) => this.pinMap[pinId]?.chipId)
       .find(Boolean)
-    const chip = chipId
-      ? this.chipObstacleSpatialIndex.chips.find((c) => c.chipId === chipId)
-      : null
-
-    if (chip) {
-      if (orientation === "y-")
-        return Math.max(0, baseAnchor.y - chip.bounds.minY)
-      if (orientation === "y+")
-        return Math.max(0, chip.bounds.maxY - baseAnchor.y)
-      if (orientation === "x-")
-        return Math.max(0, baseAnchor.x - chip.bounds.minX)
-      if (orientation === "x+")
-        return Math.max(0, chip.bounds.maxX - baseAnchor.x)
+    const firstConnectedChip = connectedChips.find(
+      (chip) => chip.chipId === firstConnectedChipId,
+    )
+    const labelChips = isSingleVerticalOrientation
+      ? connectedChips
+      : firstConnectedChip
+        ? [firstConnectedChip]
+        : []
+
+    if (labelChips.length > 0) {
+      if (orientation === "y-") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => baseAnchor.y - chip.bounds.minY),
+        )
+      }
+      if (orientation === "y+") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => chip.bounds.maxY - baseAnchor.y),
+        )
+      }
+      if (orientation === "x-") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => baseAnchor.x - chip.bounds.minX),
+        )
+      }
+      if (orientation === "x+") {
+        return Math.max(
+          0,
+          ...labelChips.map((chip) => chip.bounds.maxX - baseAnchor.x),
+        )
+      }
     }
 
     return this.getSearchDistanceLimit(label, orientation)

package/lib/solvers/SchematicTraceLinesSolver/SchematicTraceSingleLineSolver2/SchematicTraceSingleLineSolver2.ts

@@ -58,6 +58,25 @@ const calculateElbowForPins = ({
     { overshoot },
   )
 
+const pinsFaceEachOther = ({
+  pin1,
+  pin2,
+}: {
+  pin1: MspConnectionPair["pins"][number]
+  pin2: MspConnectionPair["pins"][number]
+}) => {
+  const xDistance = pin2.x - pin1.x
+  const yDistance = pin2.y - pin1.y
+  if (Math.abs(xDistance) >= Math.abs(yDistance)) {
+    return xDistance > 0
+      ? pin1._facingDirection === "x+" && pin2._facingDirection === "x-"
+      : pin1._facingDirection === "x-" && pin2._facingDirection === "x+"
+  }
+  return yDistance > 0
+    ? pin1._facingDirection === "y+" && pin2._facingDirection === "y-"
+    : pin1._facingDirection === "y-" && pin2._facingDirection === "y+"
+}
+
 export class SchematicTraceSingleLineSolver2 extends BaseSolver {
   pins: MspConnectionPair["pins"]
   connectionPair?: MspConnectionPair
@@ -130,9 +149,16 @@ export class SchematicTraceSingleLineSolver2 extends BaseSolver {
       pin2,
       overshoot: Math.min(0.2, Math.max(0.02, routingDistance / 4)),
     })
+    const adaptiveElbowIsShorter =
+      this.pathLength(adaptiveElbow) < this.pathLength(defaultElbow)
+    const defaultElbowBacktracks =
+      this.pathLength(defaultElbow) > routingDistance + 1e-9
     const shouldUseAdaptiveElbow =
-      findFirstCollision(defaultElbow, this.obstacles) !== null &&
-      findFirstCollision(adaptiveElbow, this.obstacles) === null
+      findFirstCollision(adaptiveElbow, this.obstacles) === null &&
+      ((pinsFaceEachOther({ pin1, pin2 }) &&
+        defaultElbowBacktracks &&
+        adaptiveElbowIsShorter) ||
+        findFirstCollision(defaultElbow, this.obstacles) !== null)
 
     // Build initial elbow path
     this.baseElbow = defaultElbow

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tscircuit/schematic-trace-solver",
   "main": "dist/index.js",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "type": "module",
   "scripts": {
     "start": "cosmos",

package/tests/repros/__snapshots__/repro84-stacked-gnd-label-orientation.snap.svg

@@ -0,0 +1,48 @@
+<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="0.2,0.3 -0.2,-0.3999999999999999" data-type="line" data-label="" points="315.05882352941177,281.5686274509804 271.13725490196083,358.4313725490196" fill="none" stroke="hsl(157, 100%, 50%, 0.8)" stroke-width="1px" stroke-dasharray="4 2"/></g><g><polyline data-points="0.2,0.30000000000000004 0.2,-0.04999999999999993 -0.2,-0.04999999999999993 -0.2,-0.3999999999999999" data-type="line" data-label="" points="315.05882352941177,281.5686274509804 315.05882352941177,320 271.13725490196083,320 271.13725490196083,358.4313725490196" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="0.2,-0.04999999999999993 0.2,6.938893903907228e-17 0.65,6.938893903907228e-17 0.65,-0.10099999999999994" data-type="line" data-label="" points="315.05882352941177,320 315.05882352941177,314.5098039215686 364.47058823529414,314.5098039215686 364.47058823529414,325.59999999999997" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="TOP" data-x="0" data-y="1.4" x="249.1764705882353" y="40" width="87.84313725490199" height="241.5686274509804" fill="hsl(93, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009107142857142857"/></g><g><rect data-type="rect" data-label="BOTTOM" data-x="0" data-y="-1.5" x="249.1764705882353" y="358.43137254901967" width="87.84313725490199" height="241.5686274509804" fill="hsl(259, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009107142857142857"/></g><g><rect data-type="rect" data-label="netId: GND
+globalConnNetId: connectivity_net0" data-x="0.65" data-y="-0.31099999999999994" x="338.11764705882354" y="325.59999999999997" width="52.70588235294122" height="46.117647058823536" fill="#00000066" stroke="#000000" stroke-width="0.009107142857142857"/></g><g><circle data-type="point" data-label="TOP.GND
+y-" data-x="0.2" data-y="0.3" cx="315.05882352941177" cy="281.5686274509804" r="3" fill="hsl(116, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="BOTTOM.GND
+y+" data-x="-0.2" data-y="-0.3999999999999999" cx="271.13725490196083" cy="358.4313725490196" r="3" fill="hsl(42, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="anchorPoint
+orientation: y-" data-x="0.65" data-y="-0.10099999999999994" cx="364.47058823529414" cy="325.59999999999997" 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[
+              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":293.0980392156863,"b":0,"d":-109.80392156862746,"f":314.5098039215686};
+                // 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/repros/repro84-stacked-gnd-label-orientation.test.ts

@@ -0,0 +1,69 @@
+import { expect, test } from "bun:test"
+import { SchematicTracePipelineSolver } from "lib/solvers/SchematicTracePipelineSolver/SchematicTracePipelineSolver"
+import type { InputProblem } from "lib/types/InputProblem"
+import "tests/fixtures/matcher"
+
+const inputProblem: InputProblem = {
+  chips: [
+    {
+      chipId: "TOP",
+      center: { x: 0, y: 1.4 },
+      width: 0.8,
+      height: 1.4,
+      pins: [
+        {
+          pinId: "TOP.GND",
+          x: 0.2,
+          y: 0.3,
+          _facingDirection: "y-",
+        },
+      ],
+    },
+    {
+      chipId: "BOTTOM",
+      center: { x: 0, y: -1.5 },
+      width: 0.8,
+      height: 1.4,
+      pins: [
+        {
+          pinId: "BOTTOM.GND",
+          x: -0.2,
+          y: -0.4,
+          _facingDirection: "y+",
+        },
+      ],
+    },
+  ],
+  directConnections: [],
+  netConnections: [
+    {
+      netId: "GND",
+      pinIds: ["TOP.GND", "BOTTOM.GND"],
+      netLabelWidth: 0.42,
+      netLabelHeight: 0.48,
+    },
+  ],
+  textBoxes: [],
+  availableNetLabelOrientations: { GND: ["y-"] },
+  maxMspPairDistance: 2.4,
+}
+
+test("repro84 restores GND orientation between stacked components", () => {
+  const solver = new SchematicTracePipelineSolver(inputProblem)
+
+  solver.solve()
+
+  const initialGndLabel = solver.netLabelPlacementSolver!.netLabelPlacements[0]
+  const finalGndLabel =
+    solver.netLabelNetLabelCollisionSolver!.getOutput().netLabelPlacements[0]
+  const traces = solver.netLabelTraceCollisionSolver!.getOutput().traces
+
+  expect(initialGndLabel?.orientation).toBe("x+")
+  expect(finalGndLabel?.orientation).toBe("y-")
+  expect(
+    traces.some((trace) =>
+      trace.mspPairId.startsWith("available-net-orientation"),
+    ),
+  ).toBe(true)
+  expect(solver).toMatchSolverSnapshot(import.meta.path)
+})

package/tests/solvers/SchematicTraceSingleLineSolver2/SchematicTraceSingleLineSolver2_repro47-short-opposing-pins.test.ts

@@ -0,0 +1,63 @@
+import { expect, test } from "bun:test"
+import { SchematicTraceSingleLineSolver2 } from "lib/solvers/SchematicTraceLinesSolver/SchematicTraceSingleLineSolver2/SchematicTraceSingleLineSolver2"
+import type { InputChip, InputProblem } from "lib/types/InputProblem"
+
+const getOrthogonalPathLength = (points: Array<{ x: number; y: number }>) =>
+  points.slice(0, -1).reduce((length, point, pointIndex) => {
+    const nextPoint = points[pointIndex + 1]!
+    return (
+      length + Math.abs(nextPoint.x - point.x) + Math.abs(nextPoint.y - point.y)
+    )
+  }, 0)
+
+test("repro47 uses a minimal route between nearby opposing pins", async () => {
+  const diode: InputChip = {
+    chipId: "D2",
+    center: { x: 3.2, y: 0.095 },
+    width: 0.4,
+    height: 0.2,
+    pins: [{ pinId: "D2.cathode", x: 3.4, y: 0.095 }],
+  }
+  const pushButton: InputChip = {
+    chipId: "SW2",
+    center: { x: 3.81, y: 0.045 },
+    width: 0.4,
+    height: 0.2,
+    pins: [{ pinId: "SW2.pin1", x: 3.61, y: 0.045 }],
+  }
+  const pins: ConstructorParameters<
+    typeof SchematicTraceSingleLineSolver2
+  >[0]["pins"] = [
+    {
+      pinId: "D2.cathode",
+      chipId: diode.chipId,
+      x: 3.4,
+      y: 0.095,
+      _facingDirection: "x+" as const,
+    },
+    {
+      pinId: "SW2.pin1",
+      chipId: pushButton.chipId,
+      x: 3.61,
+      y: 0.045,
+      _facingDirection: "x-" as const,
+    },
+  ]
+  const inputProblem: InputProblem = {
+    chips: [diode, pushButton],
+    directConnections: [{ pinIds: [pins[0].pinId, pins[1].pinId] }],
+    netConnections: [],
+    availableNetLabelOrientations: {},
+  }
+  const solver = new SchematicTraceSingleLineSolver2({
+    pins,
+    chipMap: { [diode.chipId]: diode, [pushButton.chipId]: pushButton },
+    inputProblem,
+  })
+
+  solver.solve()
+
+  expect(solver.solved).toBe(true)
+  expect(getOrthogonalPathLength(solver.solvedTracePath!)).toBeCloseTo(0.26)
+  await expect(solver).toMatchSolverSnapshot(import.meta.path)
+})

package/tests/solvers/SchematicTraceSingleLineSolver2/__snapshots__/SchematicTraceSingleLineSolver2_repro47-short-opposing-pins.snap.svg

@@ -0,0 +1,46 @@
+<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="3.4,0.095 3.61,0.045" data-type="line" data-label="" points="261.78217821782187,306.13861386138615 378.21782178217813,333.86138613861385" fill="none" stroke="hsl(112, 100%, 50%, 0.1)" stroke-width="1px"/></g><g><polyline data-points="3.4,0.095 3.465,0.095 3.505,0.095 3.505,0.045 3.545,0.045 3.61,0.045" data-type="line" data-label="" points="261.78217821782187,306.13861386138615 297.82178217821775,306.13861386138615 320,306.13861386138615 320,333.86138613861385 342.17821782178225,333.86138613861385 378.21782178217813,333.86138613861385" fill="none" stroke="red" stroke-width="1px" stroke-dasharray="4 4"/></g><g><polyline data-points="3.4,0.095 3.61,0.045" data-type="line" data-label="" points="261.78217821782187,306.13861386138615 378.21782178217813,333.86138613861385" fill="none" stroke="blue" stroke-width="1px" stroke-dasharray="5 5"/></g><g><polyline data-points="3.4,0.095 3.465,0.095 3.505,0.095 3.505,0.045 3.545,0.045 3.61,0.045" data-type="line" data-label="" points="261.78217821782187,306.13861386138615 297.82178217821775,306.13861386138615 320,306.13861386138615 320,333.86138613861385 342.17821782178225,333.86138613861385 378.21782178217813,333.86138613861385" fill="none" stroke="green" stroke-width="1px"/></g><g><rect data-type="rect" data-label="D2" data-x="3.2" data-y="0.095" x="40" y="250.69306930693068" width="221.7821782178221" height="110.89108910891093" fill="hsl(358, 100%, 50%, 0.1)" stroke="black" stroke-width="0.0018035714285714283"/></g><g><rect data-type="rect" data-label="SW2" data-x="3.81" data-y="0.045" x="378.21782178217825" y="278.41584158415844" width="221.78217821782187" height="110.89108910891088" fill="hsl(70, 100%, 50%, 0.1)" stroke="black" stroke-width="0.0018035714285714283"/></g><g><circle data-type="point" data-label="D2.cathode
+x+" data-x="3.4" data-y="0.095" cx="261.78217821782187" cy="306.13861386138615" r="3" fill="hsl(22, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="SW2.pin1
+x-" data-x="3.61" data-y="0.045" cx="378.21782178217813" cy="333.86138613861385" r="3" fill="hsl(12, 100%, 50%, 0.8)"/></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":554.4554455445545,"c":0,"e":-1623.3663366336636,"b":0,"d":-554.4554455445545,"f":358.81188118811883};
+                // 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>