circuit-to-canvas 0.0.34 → 0.0.35

package/dist/index.js

@@ -1620,27 +1620,6 @@ function drawPcbNoteText(params) {
 
 // lib/drawer/shapes/dimension-line.ts
 import { applyToPoint as applyToPoint13 } from "transformation-matrix";
-
-// lib/drawer/shapes/arrow.ts
-function drawArrow(params) {
-  const { ctx, x, y, angle, arrowSize, color, strokeWidth } = params;
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.rotate(angle);
-  ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(-arrowSize, -arrowSize / 2);
-  ctx.moveTo(0, 0);
-  ctx.lineTo(-arrowSize, arrowSize / 2);
-  ctx.lineWidth = strokeWidth;
-  ctx.strokeStyle = color;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.stroke();
-  ctx.restore();
-}
-
-// lib/drawer/shapes/dimension-line.ts
 var TEXT_OFFSET_MULTIPLIER = 1.5;
 var CHARACTER_WIDTH_MULTIPLIER = 0.6;
 var TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3;
@@ -1673,71 +1652,103 @@ function drawDimensionLine(params) {
   };
   const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y };
   const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y };
-  const fromBase = fromOffset;
-  const toBase = toOffset;
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize
+  };
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize
+  };
   const scaleValue = Math.abs(realToCanvasMat.a);
   const strokeWidth = manualStrokeWidth ?? arrowSize / 5;
   const lineColor = color || "rgba(255,255,255,0.5)";
   const extensionDirection = hasOffsetDirection && (Math.abs(normalizedOffsetDirection.x) > Number.EPSILON || Math.abs(normalizedOffsetDirection.y) > Number.EPSILON) ? normalizedOffsetDirection : perpendicular;
   const extensionLength = offsetMagnitude + 0.5;
-  const drawExtension = (anchor) => {
+  const allPoints = [];
+  const getExtensionPoints = (anchor) => {
     const endPoint = {
       x: anchor.x + extensionDirection.x * extensionLength,
       y: anchor.y + extensionDirection.y * extensionLength
     };
-    drawLine({
-      ctx,
-      start: anchor,
-      end: endPoint,
-      strokeWidth,
-      stroke: lineColor,
-      realToCanvasMat
-    });
+    const halfWidth2 = 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 * halfWidth2,
+        y: anchor.y - extPerpendicular.y * halfWidth2
+      },
+      {
+        x: endPoint.x - extPerpendicular.x * halfWidth2,
+        y: endPoint.y - extPerpendicular.y * halfWidth2
+      },
+      {
+        x: endPoint.x + extPerpendicular.x * halfWidth2,
+        y: endPoint.y + extPerpendicular.y * halfWidth2
+      }
+    ];
   };
-  drawExtension(from);
-  drawExtension(to);
-  drawLine({
+  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]);
+  drawPolygon({
     ctx,
-    start: fromBase,
-    end: toBase,
-    strokeWidth,
-    stroke: lineColor,
+    points: allPoints,
+    fill: lineColor,
     realToCanvasMat
   });
-  const [canvasFromX, canvasFromY] = applyToPoint13(realToCanvasMat, [
-    fromOffset.x,
-    fromOffset.y
-  ]);
-  const [canvasToX, canvasToY] = applyToPoint13(realToCanvasMat, [
-    toOffset.x,
-    toOffset.y
-  ]);
-  const [canvasToDirX, canvasToDirY] = applyToPoint13(realToCanvasMat, [
-    toOffset.x + direction.x,
-    toOffset.y + direction.y
-  ]);
-  const canvasLineAngle = Math.atan2(
-    canvasToDirY - canvasToY,
-    canvasToDirX - canvasToX
-  );
-  drawArrow({
-    ctx,
-    x: canvasFromX,
-    y: canvasFromY,
-    angle: canvasLineAngle + Math.PI,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue
-  });
-  drawArrow({
-    ctx,
-    x: canvasToX,
-    y: canvasToY,
-    angle: canvasLineAngle,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue
-  });
   if (text) {
     const midPoint = {
       x: (from.x + to.x) / 2 + offsetVector.x,
@@ -1767,9 +1778,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 halfWidth = textWidth / 2;
+      const halfWidth2 = textWidth / 2;
       const halfHeight = textHeight / 2;
-      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
+      const maxExtension = halfWidth2 * sinRot + halfHeight * cosRot;
       additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
     }
     const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;
@@ -2205,6 +2216,22 @@ var CircuitToCanvasDrawer = class {
     }
   }
 };
+
+// lib/drawer/shapes/arrow.ts
+function drawArrow(params) {
+  const { ctx, x, y, angle, arrowSize, color, strokeWidth } = params;
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(angle);
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(-arrowSize, -arrowSize / 2);
+  ctx.lineTo(-arrowSize, arrowSize / 2);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.restore();
+}
 export {
   CircuitToCanvasDrawer,
   DEFAULT_PCB_COLOR_MAP,

package/lib/drawer/shapes/arrow.ts

@@ -23,14 +23,11 @@ export function drawArrow(params: DrawArrowParams): void {
   ctx.beginPath()
   ctx.moveTo(0, 0)
   ctx.lineTo(-arrowSize, -arrowSize / 2)
-  ctx.moveTo(0, 0)
   ctx.lineTo(-arrowSize, arrowSize / 2)
+  ctx.closePath()
 
-  ctx.lineWidth = strokeWidth
-  ctx.strokeStyle = color
-  ctx.lineCap = "round"
-  ctx.lineJoin = "round"
-  ctx.stroke()
+  ctx.fillStyle = color
+  ctx.fill()
 
   ctx.restore()
 }

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

@@ -1,9 +1,8 @@
 import type { Matrix } from "transformation-matrix"
 import { applyToPoint } from "transformation-matrix"
 import type { CanvasContext } from "../types"
-import { drawLine } from "./line"
+import { drawPolygon } from "./polygon"
 import { drawText } from "./text"
-import { drawArrow } from "./arrow"
 
 export interface DrawDimensionLineParams {
   ctx: CanvasContext
@@ -67,8 +66,14 @@ export function drawDimensionLine(params: DrawDimensionLineParams): void {
   const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y }
   const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y }
 
-  const fromBase = fromOffset
-  const toBase = toOffset
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize,
+  }
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize,
+  }
 
   const scaleValue = Math.abs(realToCanvasMat.a)
   const strokeWidth = manualStrokeWidth ?? arrowSize / 5
@@ -84,71 +89,123 @@ export function drawDimensionLine(params: DrawDimensionLineParams): void {
 
   const extensionLength = offsetMagnitude + 0.5
 
-  const drawExtension = (anchor: { x: number; y: number }) => {
+  const allPoints: Array<{ x: number; y: number }> = []
+
+  const getExtensionPoints = (anchor: { x: number; y: number }) => {
     const endPoint = {
       x: anchor.x + extensionDirection.x * extensionLength,
       y: anchor.y + extensionDirection.y * extensionLength,
     }
-    drawLine({
-      ctx,
-      start: anchor,
-      end: endPoint,
-      strokeWidth,
-      stroke: lineColor,
-      realToCanvasMat,
-    })
+    const halfWidth = strokeWidth / 2
+    const extPerpendicular = {
+      x: -extensionDirection.y,
+      y: extensionDirection.x,
+    }
+    return [
+      {
+        x: anchor.x + extPerpendicular.x * halfWidth,
+        y: anchor.y + extPerpendicular.y * halfWidth,
+      },
+      {
+        x: anchor.x - extPerpendicular.x * halfWidth,
+        y: anchor.y - extPerpendicular.y * halfWidth,
+      },
+      {
+        x: endPoint.x - extPerpendicular.x * halfWidth,
+        y: endPoint.y - extPerpendicular.y * halfWidth,
+      },
+      {
+        x: endPoint.x + extPerpendicular.x * halfWidth,
+        y: endPoint.y + extPerpendicular.y * halfWidth,
+      },
+    ]
   }
 
-  drawExtension(from)
-  drawExtension(to)
+  // Extension lines (ticks)
+  const ext1 = getExtensionPoints(from)
+  allPoints.push(...ext1, ext1[0]!)
+
+  const ext2 = getExtensionPoints(to)
+  allPoints.push(...ext2, ext2[0]!)
 
   // Main dimension line
-  drawLine({
-    ctx,
-    start: fromBase,
-    end: toBase,
-    strokeWidth,
-    stroke: lineColor,
-    realToCanvasMat,
-  })
+  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 (Keep V-shaped but matching size)
-  const [canvasFromX, canvasFromY] = applyToPoint(realToCanvasMat, [
-    fromOffset.x,
-    fromOffset.y,
-  ])
-  const [canvasToX, canvasToY] = applyToPoint(realToCanvasMat, [
-    toOffset.x,
-    toOffset.y,
-  ])
-  const [canvasToDirX, canvasToDirY] = applyToPoint(realToCanvasMat, [
-    toOffset.x + direction.x,
-    toOffset.y + direction.y,
-  ])
-
-  const canvasLineAngle = Math.atan2(
-    canvasToDirY - canvasToY,
-    canvasToDirX - canvasToX,
-  )
-
-  drawArrow({
-    ctx,
-    x: canvasFromX,
-    y: canvasFromY,
-    angle: canvasLineAngle + Math.PI,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue,
-  })
+  // 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]!)
 
-  drawArrow({
+  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]!)
+
+  drawPolygon({
     ctx,
-    x: canvasToX,
-    y: canvasToY,
-    angle: canvasLineAngle,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue,
+    points: allPoints,
+    fill: lineColor,
+    realToCanvasMat,
   })
 
   // Text

package/package.json

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