circuit-to-canvas 0.0.36 → 0.0.37

package/dist/index.js

@@ -1766,78 +1766,76 @@ function drawDimensionLine(params) {
       x: anchor.x + extensionDirection.x * extensionLength,
       y: anchor.y + extensionDirection.y * extensionLength
     };
-    const halfWidth2 = strokeWidth / 2;
+    const halfWidth = strokeWidth / 2;
     const extPerpendicular = {
       x: -extensionDirection.y,
       y: extensionDirection.x
     };
     return [
       {
-        x: anchor.x + extPerpendicular.x * halfWidth2,
-        y: anchor.y + extPerpendicular.y * halfWidth2
+        x: anchor.x + extPerpendicular.x * halfWidth,
+        y: anchor.y + extPerpendicular.y * halfWidth
       },
       {
-        x: anchor.x - extPerpendicular.x * halfWidth2,
-        y: anchor.y - extPerpendicular.y * halfWidth2
+        x: anchor.x - extPerpendicular.x * halfWidth,
+        y: anchor.y - extPerpendicular.y * halfWidth
       },
       {
-        x: endPoint.x - extPerpendicular.x * halfWidth2,
-        y: endPoint.y - extPerpendicular.y * halfWidth2
+        x: endPoint.x - extPerpendicular.x * halfWidth,
+        y: endPoint.y - extPerpendicular.y * halfWidth
       },
       {
-        x: endPoint.x + extPerpendicular.x * halfWidth2,
-        y: endPoint.y + extPerpendicular.y * halfWidth2
+        x: endPoint.x + extPerpendicular.x * halfWidth,
+        y: endPoint.y + extPerpendicular.y * halfWidth
       }
     ];
   };
-  const ext1 = getExtensionPoints(from);
-  allPoints.push(...ext1, ext1[0]);
-  const ext2 = getExtensionPoints(to);
-  allPoints.push(...ext2, ext2[0]);
-  const halfWidth = strokeWidth / 2;
-  const mainLine = [
-    {
-      x: fromBase.x + perpendicular.x * halfWidth,
-      y: fromBase.y + perpendicular.y * halfWidth
-    },
-    {
-      x: fromBase.x - perpendicular.x * halfWidth,
-      y: fromBase.y - perpendicular.y * halfWidth
-    },
-    {
-      x: toBase.x - perpendicular.x * halfWidth,
-      y: toBase.y - perpendicular.y * halfWidth
-    },
-    {
-      x: toBase.x + perpendicular.x * halfWidth,
-      y: toBase.y + perpendicular.y * halfWidth
-    }
-  ];
-  allPoints.push(...mainLine, mainLine[0]);
-  const arrow1 = [
-    fromOffset,
-    {
-      x: fromOffset.x + direction.x * arrowSize + perpendicular.x * (arrowSize / 2),
-      y: fromOffset.y + direction.y * arrowSize + perpendicular.y * (arrowSize / 2)
-    },
-    {
-      x: fromOffset.x + direction.x * arrowSize - perpendicular.x * (arrowSize / 2),
-      y: fromOffset.y + direction.y * arrowSize - perpendicular.y * (arrowSize / 2)
-    }
-  ];
-  allPoints.push(...arrow1, arrow1[0]);
-  const arrow2 = [
-    toOffset,
-    {
-      x: toOffset.x - direction.x * arrowSize + perpendicular.x * (arrowSize / 2),
-      y: toOffset.y - direction.y * arrowSize + perpendicular.y * (arrowSize / 2)
-    },
-    {
-      x: toOffset.x - direction.x * arrowSize - perpendicular.x * (arrowSize / 2),
-      y: toOffset.y - direction.y * arrowSize - perpendicular.y * (arrowSize / 2)
-    }
-  ];
-  allPoints.push(...arrow2, arrow2[0]);
+  allPoints.push(fromOffset);
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (arrowSize / 2),
+    y: fromBase.y + perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y + perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (strokeWidth / 2),
+    y: toBase.y + perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (arrowSize / 2),
+    y: toBase.y + perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push(toOffset);
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (arrowSize / 2),
+    y: toBase.y - perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (strokeWidth / 2),
+    y: toBase.y - perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y - perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (arrowSize / 2),
+    y: fromBase.y - perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push(fromOffset);
+  const startPoint = allPoints[0];
+  const addTick = (anchor) => {
+    const pts = getExtensionPoints(anchor);
+    allPoints.push(startPoint);
+    allPoints.push(pts[0]);
+    allPoints.push(...pts);
+    allPoints.push(pts[0]);
+    allPoints.push(startPoint);
+  };
+  addTick(from);
+  addTick(to);
   drawPolygon({
     ctx,
     points: allPoints,
@@ -1873,9 +1871,9 @@ function drawDimensionLine(params) {
       const rotationRad = textRotation * Math.PI / 180;
       const sinRot = Math.abs(Math.sin(rotationRad));
       const cosRot = Math.abs(Math.cos(rotationRad));
-      const halfWidth2 = textWidth / 2;
+      const halfWidth = textWidth / 2;
       const halfHeight = textHeight / 2;
-      const maxExtension = halfWidth2 * sinRot + halfHeight * cosRot;
+      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
       additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
     }
     const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;

package/lib/drawer/shapes/dimension-line.ts

@@ -121,85 +121,80 @@ export function drawDimensionLine(params: DrawDimensionLineParams): void {
     ]
   }
 
-  // Extension lines (ticks)
-  const ext1 = getExtensionPoints(from)
-  allPoints.push(...ext1, ext1[0]!)
-
-  const ext2 = getExtensionPoints(to)
-  allPoints.push(...ext2, ext2[0]!)
-
-  // Main dimension line
-  const halfWidth = strokeWidth / 2
-  const mainLine = [
-    {
-      x: fromBase.x + perpendicular.x * halfWidth,
-      y: fromBase.y + perpendicular.y * halfWidth,
-    },
-    {
-      x: fromBase.x - perpendicular.x * halfWidth,
-      y: fromBase.y - perpendicular.y * halfWidth,
-    },
-    {
-      x: toBase.x - perpendicular.x * halfWidth,
-      y: toBase.y - perpendicular.y * halfWidth,
-    },
-    {
-      x: toBase.x + perpendicular.x * halfWidth,
-      y: toBase.y + perpendicular.y * halfWidth,
-    },
-  ]
-  allPoints.push(...mainLine, mainLine[0]!)
-
-  // Arrows
-  const arrow1 = [
-    fromOffset,
-    {
-      x:
-        fromOffset.x +
-        direction.x * arrowSize +
-        perpendicular.x * (arrowSize / 2),
-      y:
-        fromOffset.y +
-        direction.y * arrowSize +
-        perpendicular.y * (arrowSize / 2),
-    },
-    {
-      x:
-        fromOffset.x +
-        direction.x * arrowSize -
-        perpendicular.x * (arrowSize / 2),
-      y:
-        fromOffset.y +
-        direction.y * arrowSize -
-        perpendicular.y * (arrowSize / 2),
-    },
-  ]
-  allPoints.push(...arrow1, arrow1[0]!)
-
-  const arrow2 = [
-    toOffset,
-    {
-      x:
-        toOffset.x -
-        direction.x * arrowSize +
-        perpendicular.x * (arrowSize / 2),
-      y:
-        toOffset.y -
-        direction.y * arrowSize +
-        perpendicular.y * (arrowSize / 2),
-    },
-    {
-      x:
-        toOffset.x -
-        direction.x * arrowSize -
-        perpendicular.x * (arrowSize / 2),
-      y:
-        toOffset.y -
-        direction.y * arrowSize -
-        perpendicular.y * (arrowSize / 2),
-    },
-  ]
-  allPoints.push(...arrow2, arrow2[0]!)
+  // Unified Perimeter Approach:
+  // Draw the main line and both arrows as a single continuous perimeter path.
+  // This eliminates self-intersections and winding issues.
+
+  // 1. Tip 1
+  allPoints.push(fromOffset)
+
+  // 2. Arrow 1 base corner 1
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (arrowSize / 2),
+    y: fromBase.y + perpendicular.y * (arrowSize / 2),
+  })
+
+  // 3. Main Line corner 1
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y + perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 4. Main Line corner 2 (at toBase)
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (strokeWidth / 2),
+    y: toBase.y + perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 5. Arrow 2 base corner 1
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (arrowSize / 2),
+    y: toBase.y + perpendicular.y * (arrowSize / 2),
+  })
+
+  // 6. Tip 2
+  allPoints.push(toOffset)
+
+  // 7. Arrow 2 base corner 2
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (arrowSize / 2),
+    y: toBase.y - perpendicular.y * (arrowSize / 2),
+  })
+
+  // 8. Main Line corner 3 (at toBase)
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (strokeWidth / 2),
+    y: toBase.y - perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 9. Main Line corner 4 (at fromBase)
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y - perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 10. Arrow 1 base corner 2
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (arrowSize / 2),
+    y: fromBase.y - perpendicular.y * (arrowSize / 2),
+  })
+
+  // 11. Back to Tip 1
+  allPoints.push(fromOffset)
+
+  // Bridge Ticks (Extension lines)
+  const startPoint = allPoints[0]!
+  const addTick = (anchor: { x: number; y: number }) => {
+    const pts = getExtensionPoints(anchor)
+    allPoints.push(startPoint)
+    allPoints.push(pts[0]!)
+    allPoints.push(...pts)
+    allPoints.push(pts[0]!)
+    allPoints.push(startPoint)
+  }
+
+  addTick(from)
+  addTick(to)
 
   drawPolygon({
     ctx,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",