easyeda 0.0.232 → 0.0.234

package/dist/browser/{dist-7RT7ZSAD.js → dist-B53E6C7Z.js}

@@ -14,7 +14,7 @@ import {
   toSVG,
   toString,
   translate
-} from "./chunk-U5UUPCU3.js";
+} from "./chunk-CGLWJURY.js";
 
 // node_modules/circuit-to-svg/dist/index.js
 var import_svgson = __toESM(require_svgson_umd(), 1);
@@ -3447,164 +3447,482 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
   }
   return [];
 }
-function createSvgObjectsFromPcbBoard(pcbBoard, ctx) {
-  const { transform, colorMap: colorMap2, showSolderMask } = ctx;
-  const { width, height, center, outline } = pcbBoard;
-  let path;
-  if (outline && Array.isArray(outline) && outline.length >= 3) {
-    path = outline.map((point, index) => {
-      const [x, y] = applyToPoint(transform, [point.x, point.y]);
-      return index === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
-    }).join(" ");
-  } else {
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const topLeft = applyToPoint(transform, [
-      center.x - halfWidth,
-      center.y - halfHeight
-    ]);
-    const topRight = applyToPoint(transform, [
-      center.x + halfWidth,
-      center.y - halfHeight
-    ]);
-    const bottomRight = applyToPoint(transform, [
-      center.x + halfWidth,
-      center.y + halfHeight
-    ]);
-    const bottomLeft = applyToPoint(transform, [
-      center.x - halfWidth,
-      center.y + halfHeight
-    ]);
-    path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]}`;
-  }
-  path += " Z";
-  const svgObjects = [];
-  if (showSolderMask) {
-    const layer = ctx.layer ?? "top";
-    const maskLayer = layer === "bottom" ? "soldermask-bottom" : "soldermask-top";
-    svgObjects.push({
-      name: "path",
-      type: "element",
-      value: "",
-      children: [],
-      attributes: {
-        class: "pcb-board-soldermask",
-        d: path,
-        fill: colorMap2.soldermask.top,
-        "fill-opacity": "0.8",
-        stroke: "none",
-        "data-type": "pcb_soldermask",
-        "data-pcb-layer": maskLayer
-      }
-    });
-  }
-  svgObjects.push({
-    name: "path",
+var OFFSET_THRESHOLD_MM = 0.01;
+var TICK_SIZE_PX = 4;
+var LABEL_GAP_PX = 8;
+var LABEL_FONT_SIZE_PX = 11;
+var STROKE_WIDTH_PX = 1;
+var ANCHOR_MARKER_SIZE_PX = 5;
+var ANCHOR_MARKER_STROKE_WIDTH_PX = 1.5;
+var COMPONENT_GAP_PX = 15;
+var COMPONENT_SIDE_GAP_PX = 10;
+var DISTANCE_MULTIPLIER = 0.2;
+var MAX_OFFSET_PX = 50;
+function createAnchorOffsetIndicators(params) {
+  const {
+    groupAnchorPosition,
+    componentPosition,
+    transform,
+    componentWidth = 0,
+    componentHeight = 0
+  } = params;
+  const objects = [];
+  const [screenGroupAnchorX, screenGroupAnchorY] = applyToPoint(transform, [
+    groupAnchorPosition.x,
+    groupAnchorPosition.y
+  ]);
+  const [screenComponentX, screenComponentY] = applyToPoint(transform, [
+    componentPosition.x,
+    componentPosition.y
+  ]);
+  const offsetX = componentPosition.x - groupAnchorPosition.x;
+  const offsetY = componentPosition.y - groupAnchorPosition.y;
+  const scale9 = Math.abs(transform.a);
+  const screenComponentWidth = componentWidth * scale9;
+  const screenComponentHeight = componentHeight * scale9;
+  objects.push(createAnchorMarker(screenGroupAnchorX, screenGroupAnchorY));
+  objects.push({
+    name: "line",
     type: "element",
-    value: "",
+    attributes: {
+      x1: screenGroupAnchorX.toString(),
+      y1: screenGroupAnchorY.toString(),
+      x2: screenComponentX.toString(),
+      y2: screenComponentY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": "0.5",
+      "stroke-dasharray": "3,3",
+      opacity: "0.5",
+      class: "anchor-offset-connector"
+    },
     children: [],
+    value: ""
+  });
+  objects.push({
+    name: "circle",
+    type: "element",
     attributes: {
-      class: "pcb-board",
-      d: path,
-      fill: "none",
-      stroke: colorMap2.boardOutline,
-      "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
-      "data-type": "pcb_board",
-      "data-pcb-layer": "board"
-    }
+      cx: screenComponentX.toString(),
+      cy: screenComponentY.toString(),
+      r: "2",
+      fill: "#ffffff",
+      opacity: "0.7",
+      class: "anchor-offset-component-marker"
+    },
+    children: [],
+    value: ""
   });
-  return svgObjects;
-}
-function createSvgObjectsFromPcbPanel(pcbPanel, ctx) {
-  const { transform, colorMap: colorMap2, showSolderMask } = ctx;
-  const width = Number(pcbPanel.width);
-  const height = Number(pcbPanel.height);
-  const center = pcbPanel.center ?? { x: width / 2, y: height / 2 };
-  const halfWidth = width / 2;
-  const halfHeight = height / 2;
-  const topLeft = applyToPoint(transform, [
-    center.x - halfWidth,
-    center.y - halfHeight
-  ]);
-  const topRight = applyToPoint(transform, [
-    center.x + halfWidth,
-    center.y - halfHeight
-  ]);
-  const bottomRight = applyToPoint(transform, [
-    center.x + halfWidth,
-    center.y + halfHeight
-  ]);
-  const bottomLeft = applyToPoint(transform, [
-    center.x - halfWidth,
-    center.y + halfHeight
-  ]);
-  const path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]} Z`;
-  const isCoveredWithSolderMask = pcbPanel.covered_with_solder_mask !== false;
-  const shouldShowSolderMask = Boolean(
-    showSolderMask && isCoveredWithSolderMask
+  const yDistance = Math.abs(screenComponentY - screenGroupAnchorY);
+  const xDistance = Math.abs(screenComponentX - screenGroupAnchorX);
+  const totalDistance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
+  const componentHeightOffset = screenComponentHeight / 2 + COMPONENT_GAP_PX;
+  const dynamicOffset = Math.max(
+    componentHeightOffset,
+    Math.min(MAX_OFFSET_PX, totalDistance * DISTANCE_MULTIPLIER)
   );
-  return [
-    {
-      name: "path",
-      type: "element",
-      value: "",
-      children: [],
-      attributes: {
-        class: "pcb-panel",
-        d: path,
-        fill: "none",
-        stroke: colorMap2.boardOutline,
-        "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
-        "data-type": "pcb_panel",
-        "data-pcb-layer": "board"
-      }
-    }
-  ];
+  const horizontalLineY = offsetY > 0 ? screenComponentY - dynamicOffset : screenComponentY + dynamicOffset;
+  const componentWidthOffset = screenComponentWidth / 2 + COMPONENT_SIDE_GAP_PX;
+  const verticalLineX = offsetX > 0 ? screenComponentX + componentWidthOffset : screenComponentX - componentWidthOffset;
+  if (Math.abs(offsetX) > OFFSET_THRESHOLD_MM) {
+    objects.push(
+      ...createHorizontalDimension({
+        startX: screenGroupAnchorX,
+        endX: screenComponentX,
+        y: horizontalLineY,
+        offsetMm: offsetX,
+        offsetY
+      })
+    );
+  }
+  if (Math.abs(offsetY) > OFFSET_THRESHOLD_MM) {
+    objects.push(
+      ...createVerticalDimension({
+        x: verticalLineX,
+        startY: screenGroupAnchorY,
+        endY: screenComponentY,
+        offsetMm: offsetY,
+        offsetX
+      })
+    );
+  }
+  return objects;
 }
-function createSvgObjectsFromPcbVia(hole, ctx) {
-  const { transform, colorMap: colorMap2 } = ctx;
-  const [x, y] = applyToPoint(transform, [hole.x, hole.y]);
-  const scaledOuterWidth = hole.outer_diameter * Math.abs(transform.a);
-  const scaledOuterHeight = hole.outer_diameter * Math.abs(transform.a);
-  const scaledHoleWidth = hole.hole_diameter * Math.abs(transform.a);
-  const scaledHoleHeight = hole.hole_diameter * Math.abs(transform.a);
-  const outerRadius = Math.min(scaledOuterWidth, scaledOuterHeight) / 2;
-  const innerRadius = Math.min(scaledHoleWidth, scaledHoleHeight) / 2;
+function createAnchorMarker(x, y) {
   return {
     name: "g",
     type: "element",
     attributes: {
-      "data-type": "pcb_via",
-      "data-pcb-layer": "through"
+      class: "anchor-offset-marker",
+      "data-type": "anchor_offset_marker"
     },
     children: [
       {
-        name: "circle",
+        name: "line",
         type: "element",
         attributes: {
-          class: "pcb-hole-outer",
-          fill: colorMap2.copper.top,
-          cx: x.toString(),
-          cy: y.toString(),
-          r: outerRadius.toString(),
-          "data-type": "pcb_via",
-          "data-pcb-layer": "top"
-        }
+          x1: x.toString(),
+          y1: (y - ANCHOR_MARKER_SIZE_PX).toString(),
+          x2: x.toString(),
+          y2: (y + ANCHOR_MARKER_SIZE_PX).toString(),
+          stroke: "#ffffff",
+          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
+          "stroke-linecap": "round"
+        },
+        children: [],
+        value: ""
       },
       {
-        name: "circle",
+        name: "line",
         type: "element",
         attributes: {
-          class: "pcb-hole-inner",
-          fill: colorMap2.drill,
-          cx: x.toString(),
-          cy: y.toString(),
-          r: innerRadius.toString(),
-          "data-type": "pcb_via",
-          "data-pcb-layer": "drill"
-        }
+          x1: (x - ANCHOR_MARKER_SIZE_PX).toString(),
+          y1: y.toString(),
+          x2: (x + ANCHOR_MARKER_SIZE_PX).toString(),
+          y2: y.toString(),
+          stroke: "#ffffff",
+          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
+          "stroke-linecap": "round"
+        },
+        children: [],
+        value: ""
       }
-    ]
+    ],
+    value: ""
+  };
+}
+function createHorizontalDimension({
+  startX,
+  endX,
+  y,
+  offsetMm,
+  offsetY
+}) {
+  const objects = [];
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: startX.toString(),
+      y1: y.toString(),
+      x2: endX.toString(),
+      y2: y.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString(),
+      class: "anchor-offset-dimension-x"
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: startX.toString(),
+      y1: (y - TICK_SIZE_PX).toString(),
+      x2: startX.toString(),
+      y2: (y + TICK_SIZE_PX).toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: endX.toString(),
+      y1: (y - TICK_SIZE_PX).toString(),
+      x2: endX.toString(),
+      y2: (y + TICK_SIZE_PX).toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  const midX = (startX + endX) / 2;
+  const labelY = offsetY > 0 ? y - TICK_SIZE_PX - LABEL_GAP_PX : y + TICK_SIZE_PX + LABEL_GAP_PX;
+  objects.push({
+    name: "text",
+    type: "element",
+    attributes: {
+      x: midX.toString(),
+      y: labelY.toString(),
+      fill: "#ffffff",
+      "font-size": LABEL_FONT_SIZE_PX.toString(),
+      "font-family": "Arial, sans-serif",
+      "text-anchor": "middle",
+      "dominant-baseline": offsetY > 0 ? "baseline" : "hanging",
+      class: "anchor-offset-label"
+    },
+    children: [
+      {
+        type: "text",
+        value: `X: ${offsetMm.toFixed(2)}mm`,
+        name: "",
+        attributes: {},
+        children: []
+      }
+    ],
+    value: ""
+  });
+  return objects;
+}
+function createVerticalDimension({
+  x,
+  startY,
+  endY,
+  offsetMm,
+  offsetX
+}) {
+  const objects = [];
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: x.toString(),
+      y1: startY.toString(),
+      x2: x.toString(),
+      y2: endY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString(),
+      class: "anchor-offset-dimension-y"
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: (x - TICK_SIZE_PX).toString(),
+      y1: startY.toString(),
+      x2: (x + TICK_SIZE_PX).toString(),
+      y2: startY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: (x - TICK_SIZE_PX).toString(),
+      y1: endY.toString(),
+      x2: (x + TICK_SIZE_PX).toString(),
+      y2: endY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  const midY = (startY + endY) / 2;
+  const labelX = offsetX < 0 ? x - TICK_SIZE_PX - 4 : x + TICK_SIZE_PX + 4;
+  objects.push({
+    name: "text",
+    type: "element",
+    attributes: {
+      x: labelX.toString(),
+      y: midY.toString(),
+      fill: "#ffffff",
+      "font-size": LABEL_FONT_SIZE_PX.toString(),
+      "font-family": "Arial, sans-serif",
+      "text-anchor": offsetX < 0 ? "end" : "start",
+      "dominant-baseline": "middle",
+      class: "anchor-offset-label"
+    },
+    children: [
+      {
+        type: "text",
+        value: `Y: ${offsetMm.toFixed(2)}mm`,
+        name: "",
+        attributes: {},
+        children: []
+      }
+    ],
+    value: ""
+  });
+  return objects;
+}
+function createSvgObjectsFromPcbBoard(pcbBoard, ctx) {
+  const { transform, colorMap: colorMap2, showSolderMask, circuitJson } = ctx;
+  const { width, height, center, outline } = pcbBoard;
+  let path;
+  if (outline && Array.isArray(outline) && outline.length >= 3) {
+    path = outline.map((point, index) => {
+      const [x, y] = applyToPoint(transform, [point.x, point.y]);
+      return index === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
+    }).join(" ");
+  } else {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const topLeft = applyToPoint(transform, [
+      center.x - halfWidth,
+      center.y - halfHeight
+    ]);
+    const topRight = applyToPoint(transform, [
+      center.x + halfWidth,
+      center.y - halfHeight
+    ]);
+    const bottomRight = applyToPoint(transform, [
+      center.x + halfWidth,
+      center.y + halfHeight
+    ]);
+    const bottomLeft = applyToPoint(transform, [
+      center.x - halfWidth,
+      center.y + halfHeight
+    ]);
+    path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]}`;
+  }
+  path += " Z";
+  const svgObjects = [];
+  if (showSolderMask) {
+    const layer = ctx.layer ?? "top";
+    const maskLayer = layer === "bottom" ? "soldermask-bottom" : "soldermask-top";
+    svgObjects.push({
+      name: "path",
+      type: "element",
+      value: "",
+      children: [],
+      attributes: {
+        class: "pcb-board-soldermask",
+        d: path,
+        fill: colorMap2.soldermask.top,
+        "fill-opacity": "0.8",
+        stroke: "none",
+        "data-type": "pcb_soldermask",
+        "data-pcb-layer": maskLayer
+      }
+    });
+  }
+  svgObjects.push({
+    name: "path",
+    type: "element",
+    value: "",
+    children: [],
+    attributes: {
+      class: "pcb-board",
+      d: path,
+      fill: "none",
+      stroke: colorMap2.boardOutline,
+      "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
+      "data-type": "pcb_board",
+      "data-pcb-layer": "board"
+    }
+  });
+  if (ctx.showAnchorOffsets && circuitJson) {
+    const panel = circuitJson.find(
+      (elm) => elm.type === "pcb_panel"
+    );
+    if (panel) {
+      const panelCenter = panel.center ?? { x: 0, y: 0 };
+      svgObjects.push(
+        ...createAnchorOffsetIndicators({
+          groupAnchorPosition: panelCenter,
+          componentPosition: center,
+          transform,
+          componentWidth: width,
+          componentHeight: height
+        })
+      );
+    }
+  }
+  return svgObjects;
+}
+function createSvgObjectsFromPcbPanel(pcbPanel, ctx) {
+  const { transform, colorMap: colorMap2, showSolderMask } = ctx;
+  const width = Number(pcbPanel.width);
+  const height = Number(pcbPanel.height);
+  const center = pcbPanel.center ?? { x: width / 2, y: height / 2 };
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+  const topLeft = applyToPoint(transform, [
+    center.x - halfWidth,
+    center.y - halfHeight
+  ]);
+  const topRight = applyToPoint(transform, [
+    center.x + halfWidth,
+    center.y - halfHeight
+  ]);
+  const bottomRight = applyToPoint(transform, [
+    center.x + halfWidth,
+    center.y + halfHeight
+  ]);
+  const bottomLeft = applyToPoint(transform, [
+    center.x - halfWidth,
+    center.y + halfHeight
+  ]);
+  const path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]} Z`;
+  const isCoveredWithSolderMask = pcbPanel.covered_with_solder_mask !== false;
+  const shouldShowSolderMask = Boolean(
+    showSolderMask && isCoveredWithSolderMask
+  );
+  return [
+    {
+      name: "path",
+      type: "element",
+      value: "",
+      children: [],
+      attributes: {
+        class: "pcb-panel",
+        d: path,
+        fill: "none",
+        stroke: colorMap2.boardOutline,
+        "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
+        "data-type": "pcb_panel",
+        "data-pcb-layer": "board"
+      }
+    }
+  ];
+}
+function createSvgObjectsFromPcbVia(hole, ctx) {
+  const { transform, colorMap: colorMap2 } = ctx;
+  const [x, y] = applyToPoint(transform, [hole.x, hole.y]);
+  const scaledOuterWidth = hole.outer_diameter * Math.abs(transform.a);
+  const scaledOuterHeight = hole.outer_diameter * Math.abs(transform.a);
+  const scaledHoleWidth = hole.hole_diameter * Math.abs(transform.a);
+  const scaledHoleHeight = hole.hole_diameter * Math.abs(transform.a);
+  const outerRadius = Math.min(scaledOuterWidth, scaledOuterHeight) / 2;
+  const innerRadius = Math.min(scaledHoleWidth, scaledHoleHeight) / 2;
+  return {
+    name: "g",
+    type: "element",
+    attributes: {
+      "data-type": "pcb_via",
+      "data-pcb-layer": "through"
+    },
+    children: [
+      {
+        name: "circle",
+        type: "element",
+        attributes: {
+          class: "pcb-hole-outer",
+          fill: colorMap2.copper.top,
+          cx: x.toString(),
+          cy: y.toString(),
+          r: outerRadius.toString(),
+          "data-type": "pcb_via",
+          "data-pcb-layer": "top"
+        }
+      },
+      {
+        name: "circle",
+        type: "element",
+        attributes: {
+          class: "pcb-hole-inner",
+          fill: colorMap2.drill,
+          cx: x.toString(),
+          cy: y.toString(),
+          r: innerRadius.toString(),
+          "data-type": "pcb_via",
+          "data-pcb-layer": "drill"
+        }
+      }
+    ]
   };
 }
 function createSvgObjectsFromPcbHole(hole, ctx) {
@@ -4566,390 +4884,89 @@ function createSvgObjectsForPcbGrid({
         fill: "none",
         stroke: gridLineColor,
         "stroke-width": "1",
-        "shape-rendering": "crispEdges"
-      },
-      children: []
-    }
-  ];
-  const defs = {
-    name: "defs",
-    type: "element",
-    value: "",
-    attributes: {},
-    children: [
-      {
-        name: "pattern",
-        type: "element",
-        value: "",
-        attributes: {
-          id: GRID_PATTERN_ID,
-          width: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
-          height: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
-          patternUnits: "userSpaceOnUse"
-        },
-        children: patternChildren
-      }
-    ]
-  };
-  const rect = {
-    name: "rect",
-    type: "element",
-    value: "",
-    attributes: {
-      x: "0",
-      y: "0",
-      width: svgWidth.toString(),
-      height: svgHeight.toString(),
-      fill: `url(#${GRID_PATTERN_ID})`,
-      "pointer-events": "none",
-      "data-type": "pcb_grid",
-      "data-pcb-layer": "global"
-    },
-    children: []
-  };
-  return { defs, rect };
-}
-function createMajorGridPatternChildren(cellSize, majorCellSize, lineColor, majorLineColor) {
-  const children = [];
-  const steps = Math.round(majorCellSize / cellSize);
-  for (let step = 0; step < steps; step += 1) {
-    const offset = Number((step * cellSize).toFixed(6));
-    const offsetString = offset.toString();
-    const color = step === 0 ? majorLineColor : lineColor;
-    const majorSizeString = majorCellSize.toString();
-    children.push({
-      name: "line",
-      type: "element",
-      value: "",
-      attributes: {
-        x1: offsetString,
-        y1: "0",
-        x2: offsetString,
-        y2: majorSizeString,
-        stroke: color,
-        "stroke-width": "1",
-        "shape-rendering": "crispEdges"
-      },
-      children: []
-    });
-    children.push({
-      name: "line",
-      type: "element",
-      value: "",
-      attributes: {
-        x1: "0",
-        y1: offsetString,
-        x2: majorSizeString,
-        y2: offsetString,
-        stroke: color,
-        "stroke-width": "1",
-        "shape-rendering": "crispEdges"
-      },
-      children: []
-    });
-  }
-  return children;
-}
-var OFFSET_THRESHOLD_MM = 0.01;
-var TICK_SIZE_PX = 4;
-var LABEL_GAP_PX = 8;
-var LABEL_FONT_SIZE_PX = 11;
-var STROKE_WIDTH_PX = 1;
-var ANCHOR_MARKER_SIZE_PX = 5;
-var ANCHOR_MARKER_STROKE_WIDTH_PX = 1.5;
-var COMPONENT_GAP_PX = 15;
-var COMPONENT_SIDE_GAP_PX = 10;
-var DISTANCE_MULTIPLIER = 0.2;
-var MAX_OFFSET_PX = 50;
-function createAnchorOffsetIndicators(params) {
-  const {
-    groupAnchorPosition,
-    componentPosition,
-    transform,
-    componentWidth = 0,
-    componentHeight = 0
-  } = params;
-  const objects = [];
-  const [screenGroupAnchorX, screenGroupAnchorY] = applyToPoint(transform, [
-    groupAnchorPosition.x,
-    groupAnchorPosition.y
-  ]);
-  const [screenComponentX, screenComponentY] = applyToPoint(transform, [
-    componentPosition.x,
-    componentPosition.y
-  ]);
-  const offsetX = componentPosition.x - groupAnchorPosition.x;
-  const offsetY = componentPosition.y - groupAnchorPosition.y;
-  const scale9 = Math.abs(transform.a);
-  const screenComponentWidth = componentWidth * scale9;
-  const screenComponentHeight = componentHeight * scale9;
-  objects.push(createAnchorMarker(screenGroupAnchorX, screenGroupAnchorY));
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: screenGroupAnchorX.toString(),
-      y1: screenGroupAnchorY.toString(),
-      x2: screenComponentX.toString(),
-      y2: screenComponentY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": "0.5",
-      "stroke-dasharray": "3,3",
-      opacity: "0.5",
-      class: "anchor-offset-connector"
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "circle",
-    type: "element",
-    attributes: {
-      cx: screenComponentX.toString(),
-      cy: screenComponentY.toString(),
-      r: "2",
-      fill: "#ffffff",
-      opacity: "0.7",
-      class: "anchor-offset-component-marker"
-    },
-    children: [],
-    value: ""
-  });
-  const yDistance = Math.abs(screenComponentY - screenGroupAnchorY);
-  const xDistance = Math.abs(screenComponentX - screenGroupAnchorX);
-  const totalDistance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-  const componentHeightOffset = screenComponentHeight / 2 + COMPONENT_GAP_PX;
-  const dynamicOffset = Math.max(
-    componentHeightOffset,
-    Math.min(MAX_OFFSET_PX, totalDistance * DISTANCE_MULTIPLIER)
-  );
-  const horizontalLineY = offsetY > 0 ? screenComponentY - dynamicOffset : screenComponentY + dynamicOffset;
-  const componentWidthOffset = screenComponentWidth / 2 + COMPONENT_SIDE_GAP_PX;
-  const verticalLineX = offsetX > 0 ? screenComponentX + componentWidthOffset : screenComponentX - componentWidthOffset;
-  if (Math.abs(offsetX) > OFFSET_THRESHOLD_MM) {
-    objects.push(
-      ...createHorizontalDimension({
-        startX: screenGroupAnchorX,
-        endX: screenComponentX,
-        y: horizontalLineY,
-        offsetMm: offsetX,
-        offsetY
-      })
-    );
-  }
-  if (Math.abs(offsetY) > OFFSET_THRESHOLD_MM) {
-    objects.push(
-      ...createVerticalDimension({
-        x: verticalLineX,
-        startY: screenGroupAnchorY,
-        endY: screenComponentY,
-        offsetMm: -offsetY,
-        offsetX
-      })
-    );
-  }
-  return objects;
-}
-function createAnchorMarker(x, y) {
-  return {
-    name: "g",
+        "shape-rendering": "crispEdges"
+      },
+      children: []
+    }
+  ];
+  const defs = {
+    name: "defs",
     type: "element",
-    attributes: {
-      class: "anchor-offset-marker",
-      "data-type": "anchor_offset_marker"
-    },
+    value: "",
+    attributes: {},
     children: [
       {
-        name: "line",
-        type: "element",
-        attributes: {
-          x1: x.toString(),
-          y1: (y - ANCHOR_MARKER_SIZE_PX).toString(),
-          x2: x.toString(),
-          y2: (y + ANCHOR_MARKER_SIZE_PX).toString(),
-          stroke: "#ffffff",
-          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
-          "stroke-linecap": "round"
-        },
-        children: [],
-        value: ""
-      },
-      {
-        name: "line",
+        name: "pattern",
         type: "element",
+        value: "",
         attributes: {
-          x1: (x - ANCHOR_MARKER_SIZE_PX).toString(),
-          y1: y.toString(),
-          x2: (x + ANCHOR_MARKER_SIZE_PX).toString(),
-          y2: y.toString(),
-          stroke: "#ffffff",
-          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
-          "stroke-linecap": "round"
+          id: GRID_PATTERN_ID,
+          width: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
+          height: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
+          patternUnits: "userSpaceOnUse"
         },
-        children: [],
-        value: ""
+        children: patternChildren
       }
-    ],
-    value: ""
+    ]
   };
-}
-function createHorizontalDimension({
-  startX,
-  endX,
-  y,
-  offsetMm,
-  offsetY
-}) {
-  const objects = [];
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: startX.toString(),
-      y1: y.toString(),
-      x2: endX.toString(),
-      y2: y.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString(),
-      class: "anchor-offset-dimension-x"
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: startX.toString(),
-      y1: (y - TICK_SIZE_PX).toString(),
-      x2: startX.toString(),
-      y2: (y + TICK_SIZE_PX).toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: endX.toString(),
-      y1: (y - TICK_SIZE_PX).toString(),
-      x2: endX.toString(),
-      y2: (y + TICK_SIZE_PX).toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  const midX = (startX + endX) / 2;
-  const labelY = offsetY > 0 ? y - TICK_SIZE_PX - LABEL_GAP_PX : y + TICK_SIZE_PX + LABEL_GAP_PX;
-  objects.push({
-    name: "text",
+  const rect = {
+    name: "rect",
     type: "element",
+    value: "",
     attributes: {
-      x: midX.toString(),
-      y: labelY.toString(),
-      fill: "#ffffff",
-      "font-size": LABEL_FONT_SIZE_PX.toString(),
-      "font-family": "Arial, sans-serif",
-      "text-anchor": "middle",
-      "dominant-baseline": offsetY > 0 ? "baseline" : "hanging",
-      class: "anchor-offset-label"
+      x: "0",
+      y: "0",
+      width: svgWidth.toString(),
+      height: svgHeight.toString(),
+      fill: `url(#${GRID_PATTERN_ID})`,
+      "pointer-events": "none",
+      "data-type": "pcb_grid",
+      "data-pcb-layer": "global"
     },
-    children: [
-      {
-        type: "text",
-        value: `X: ${offsetMm.toFixed(2)}mm`,
-        name: "",
-        attributes: {},
-        children: []
-      }
-    ],
-    value: ""
-  });
-  return objects;
+    children: []
+  };
+  return { defs, rect };
 }
-function createVerticalDimension({
-  x,
-  startY,
-  endY,
-  offsetMm,
-  offsetX
-}) {
-  const objects = [];
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: x.toString(),
-      y1: startY.toString(),
-      x2: x.toString(),
-      y2: endY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString(),
-      class: "anchor-offset-dimension-y"
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: (x - TICK_SIZE_PX).toString(),
-      y1: startY.toString(),
-      x2: (x + TICK_SIZE_PX).toString(),
-      y2: startY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: (x - TICK_SIZE_PX).toString(),
-      y1: endY.toString(),
-      x2: (x + TICK_SIZE_PX).toString(),
-      y2: endY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  const midY = (startY + endY) / 2;
-  const labelX = offsetX < 0 ? x - TICK_SIZE_PX - 4 : x + TICK_SIZE_PX + 4;
-  objects.push({
-    name: "text",
-    type: "element",
-    attributes: {
-      x: labelX.toString(),
-      y: midY.toString(),
-      fill: "#ffffff",
-      "font-size": LABEL_FONT_SIZE_PX.toString(),
-      "font-family": "Arial, sans-serif",
-      "text-anchor": offsetX < 0 ? "end" : "start",
-      "dominant-baseline": "middle",
-      class: "anchor-offset-label"
-    },
-    children: [
-      {
-        type: "text",
-        value: `Y: ${offsetMm.toFixed(2)}mm`,
-        name: "",
-        attributes: {},
-        children: []
-      }
-    ],
-    value: ""
-  });
-  return objects;
+function createMajorGridPatternChildren(cellSize, majorCellSize, lineColor, majorLineColor) {
+  const children = [];
+  const steps = Math.round(majorCellSize / cellSize);
+  for (let step = 0; step < steps; step += 1) {
+    const offset = Number((step * cellSize).toFixed(6));
+    const offsetString = offset.toString();
+    const color = step === 0 ? majorLineColor : lineColor;
+    const majorSizeString = majorCellSize.toString();
+    children.push({
+      name: "line",
+      type: "element",
+      value: "",
+      attributes: {
+        x1: offsetString,
+        y1: "0",
+        x2: offsetString,
+        y2: majorSizeString,
+        stroke: color,
+        "stroke-width": "1",
+        "shape-rendering": "crispEdges"
+      },
+      children: []
+    });
+    children.push({
+      name: "line",
+      type: "element",
+      value: "",
+      attributes: {
+        x1: "0",
+        y1: offsetString,
+        x2: majorSizeString,
+        y2: offsetString,
+        stroke: color,
+        "stroke-width": "1",
+        "shape-rendering": "crispEdges"
+      },
+      children: []
+    });
+  }
+  return children;
 }
 function createSvgObjectsFromPcbComponent(component, ctx) {
   const { transform, circuitJson } = ctx;
@@ -5091,7 +5108,7 @@ function getSoftwareUsedString(circuitJson) {
 var package_default = {
   name: "circuit-to-svg",
   type: "module",
-  version: "0.0.282",
+  version: "0.0.283",
   description: "Convert Circuit JSON to SVG",
   main: "dist/index.js",
   files: [
@@ -5115,12 +5132,12 @@ var package_default = {
     "bun-match-svg": "^0.0.12",
     esbuild: "^0.20.2",
     "performance-now": "^2.1.0",
-    "circuit-json": "^0.0.319",
+    "circuit-json": "^0.0.327",
     react: "19.1.0",
     "react-cosmos": "7.0.0",
     "react-cosmos-plugin-vite": "7.0.0",
     "react-dom": "19.1.0",
-    tscircuit: "^0.0.937",
+    tscircuit: "^0.0.1018",
     tsup: "^8.0.2",
     typescript: "^5.4.5",
     "vite-tsconfig-paths": "^5.0.1"
@@ -12362,4 +12379,4 @@ export {
   isSimulationTransientVoltageGraph,
   isSimulationVoltageProbe
 };
-//# sourceMappingURL=dist-7RT7ZSAD.js.map
+//# sourceMappingURL=dist-B53E6C7Z.js.map