@tscircuit/pcb-viewer 1.11.259 → 1.11.261

package/dist/index.js

@@ -6421,7 +6421,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect16, useMemo as useMemo7, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef11, useState as useState11 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -6972,7 +6972,7 @@ function addInteractionMetadataToPrimitives({
 }
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback5, useMemo as useMemo6, useState as useState10 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo7, useState as useState10 } from "react";
 
 // src/lib/util/expand-stroke.ts
 function getExpandedStroke(strokeInput, defaultWidth) {
@@ -9902,7 +9902,7 @@ var WarningGraphicsOverlay = ({
 };
 
 // src/components/DimensionOverlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState3 } from "react";
 import { applyToPoint as applyToPoint8, identity as identity4, inverse as inverse2 } from "transformation-matrix";
 
 // src/lib/util/get-primitive-bounding-box.ts
@@ -10055,6 +10055,228 @@ var getPrimitiveBoundingBox = (primitive) => {
   }
 };
 
+// src/hooks/useDiagonalLabel.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/lib/util/calculate-diagonal-label.ts
+function calculateDiagonalLabel(params) {
+  const {
+    dimensionStart,
+    dimensionEnd,
+    screenDimensionStart,
+    screenDimensionEnd,
+    flipX,
+    flipY
+  } = params;
+  const deltaX = dimensionEnd.x - dimensionStart.x;
+  const deltaY = dimensionEnd.y - dimensionStart.y;
+  const distance5 = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+  const screenDeltaX = screenDimensionEnd.x - screenDimensionStart.x;
+  const screenDeltaY = screenDimensionEnd.y - screenDimensionStart.y;
+  const screenDistance = Math.sqrt(
+    screenDeltaX * screenDeltaX + screenDeltaY * screenDeltaY
+  );
+  const angle = Math.atan2(screenDeltaY, screenDeltaX) * (180 / Math.PI);
+  const normalizedAngle = Math.abs(angle) % 90;
+  const angleFromAxis = Math.min(normalizedAngle, 90 - normalizedAngle);
+  const isDiagonal = angleFromAxis > 15;
+  const midX = (screenDimensionStart.x + screenDimensionEnd.x) / 2;
+  const midY = (screenDimensionStart.y + screenDimensionEnd.y) / 2;
+  const offsetDistance = 15;
+  const perpendicularAngle = angle + 90;
+  let offsetX = Math.cos(perpendicularAngle * Math.PI / 180) * offsetDistance;
+  let offsetY = Math.sin(perpendicularAngle * Math.PI / 180) * offsetDistance;
+  const isNE = screenDeltaX > 0 && screenDeltaY < 0;
+  const isNW = screenDeltaX < 0 && screenDeltaY < 0;
+  const isSE = screenDeltaX > 0 && screenDeltaY > 0;
+  const isSW = screenDeltaX < 0 && screenDeltaY > 0;
+  if (flipX !== flipY && !isNE) {
+    offsetX = -offsetX;
+    offsetY = -offsetY;
+  }
+  if (isNE) {
+    const lessOffset = -45;
+    offsetX += Math.cos(perpendicularAngle * Math.PI / 180) * lessOffset;
+    offsetY += Math.sin(perpendicularAngle * Math.PI / 180) * lessOffset;
+  }
+  if (isSE) {
+    const seAdjust = -10;
+    offsetX += Math.cos(perpendicularAngle * Math.PI / 180) + seAdjust * 2;
+    offsetY += Math.sin(perpendicularAngle * Math.PI / 180) + seAdjust;
+  }
+  if (isSW) {
+    const reduceOffset = 10;
+    offsetX += Math.cos(perpendicularAngle * Math.PI / 180) * reduceOffset;
+    offsetY += Math.sin(perpendicularAngle * Math.PI / 180) * reduceOffset;
+  }
+  const x = midX + offsetX;
+  const y = midY + offsetY;
+  return {
+    distance: distance5,
+    screenDistance,
+    x,
+    y,
+    show: distance5 > 0.01 && screenDistance > 30 && isDiagonal
+  };
+}
+
+// src/hooks/useDiagonalLabel.ts
+function useDiagonalLabel(params) {
+  const {
+    dimensionStart,
+    dimensionEnd,
+    screenDimensionStart,
+    screenDimensionEnd,
+    flipX,
+    flipY
+  } = params;
+  return useMemo3(
+    () => calculateDiagonalLabel({
+      dimensionStart,
+      dimensionEnd,
+      screenDimensionStart,
+      screenDimensionEnd,
+      flipX,
+      flipY
+    }),
+    [
+      dimensionStart,
+      dimensionEnd,
+      screenDimensionStart,
+      screenDimensionEnd,
+      flipX,
+      flipY
+    ]
+  );
+}
+
+// src/lib/util/get-primitive-snap-points.ts
+var rotatePoint2 = (point, center, rotationDeg) => {
+  const radians = rotationDeg * Math.PI / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const translatedX = point.x - center.x;
+  const translatedY = point.y - center.y;
+  const rotatedX = translatedX * cos - translatedY * sin;
+  const rotatedY = translatedX * sin + translatedY * cos;
+  return {
+    x: rotatedX + center.x,
+    y: rotatedY + center.y
+  };
+};
+var getNinePointAnchors = (center, halfWidth, halfHeight, rotationDeg) => {
+  const basePoints = {
+    top_left: { x: center.x - halfWidth, y: center.y - halfHeight },
+    top_center: { x: center.x, y: center.y - halfHeight },
+    top_right: { x: center.x + halfWidth, y: center.y - halfHeight },
+    center_left: { x: center.x - halfWidth, y: center.y },
+    center: { x: center.x, y: center.y },
+    center_right: { x: center.x + halfWidth, y: center.y },
+    bottom_left: { x: center.x - halfWidth, y: center.y + halfHeight },
+    bottom_center: { x: center.x, y: center.y + halfHeight },
+    bottom_right: { x: center.x + halfWidth, y: center.y + halfHeight }
+  };
+  if (rotationDeg === 0) {
+    return Object.entries(basePoints).map(([anchor, point]) => ({
+      anchor,
+      point
+    }));
+  }
+  return Object.entries(basePoints).map(([anchor, point]) => ({
+    anchor,
+    point: rotatePoint2(point, center, rotationDeg)
+  }));
+};
+var getPrimitiveSnapPoints = (primitive) => {
+  switch (primitive.pcb_drawing_type) {
+    case "rect": {
+      const rotation = primitive.ccw_rotation ?? 0;
+      return getNinePointAnchors(
+        { x: primitive.x, y: primitive.y },
+        primitive.w / 2,
+        primitive.h / 2,
+        rotation
+      );
+    }
+    case "pill": {
+      const rotation = primitive.ccw_rotation ?? 0;
+      return getNinePointAnchors(
+        { x: primitive.x, y: primitive.y },
+        primitive.w / 2,
+        primitive.h / 2,
+        rotation
+      );
+    }
+    case "circle": {
+      return [
+        { anchor: "circle_center", point: { x: primitive.x, y: primitive.y } },
+        {
+          anchor: "circle_right",
+          point: { x: primitive.x + primitive.r, y: primitive.y }
+        },
+        {
+          anchor: "circle_left",
+          point: { x: primitive.x - primitive.r, y: primitive.y }
+        },
+        {
+          anchor: "circle_top",
+          point: { x: primitive.x, y: primitive.y - primitive.r }
+        },
+        {
+          anchor: "circle_bottom",
+          point: { x: primitive.x, y: primitive.y + primitive.r }
+        }
+      ];
+    }
+    case "oval": {
+      return [
+        { anchor: "oval_center", point: { x: primitive.x, y: primitive.y } },
+        {
+          anchor: "oval_right",
+          point: { x: primitive.x + primitive.rX, y: primitive.y }
+        },
+        {
+          anchor: "oval_left",
+          point: { x: primitive.x - primitive.rX, y: primitive.y }
+        },
+        {
+          anchor: "oval_top",
+          point: { x: primitive.x, y: primitive.y - primitive.rY }
+        },
+        {
+          anchor: "oval_bottom",
+          point: { x: primitive.x, y: primitive.y + primitive.rY }
+        }
+      ];
+    }
+    case "line": {
+      const midPoint = {
+        x: (primitive.x1 + primitive.x2) / 2,
+        y: (primitive.y1 + primitive.y2) / 2
+      };
+      return [
+        { anchor: "line_start", point: { x: primitive.x1, y: primitive.y1 } },
+        { anchor: "line_mid", point: midPoint },
+        { anchor: "line_end", point: { x: primitive.x2, y: primitive.y2 } }
+      ];
+    }
+    case "polygon": {
+      return primitive.points.map((point, index) => ({
+        anchor: `polygon_vertex_${index}`,
+        point
+      }));
+    }
+    case "polygon_with_arcs": {
+      return primitive.brep_shape.outer_ring.vertices.map((vertex, index) => ({
+        anchor: `polygon_with_arcs_vertex_${index}`,
+        point: { x: vertex.x, y: vertex.y }
+      }));
+    }
+    default:
+      return [];
+  }
+};
+
 // src/components/DimensionOverlay.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SNAP_THRESHOLD_PX = 16;
@@ -10101,11 +10323,14 @@ var DimensionOverlay = ({
   const containerRef = useRef5(null);
   const container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
-  const elementBoundingBoxes = useMemo3(() => {
+  const elementBoundingBoxes = useMemo4(() => {
     const boundingBoxes = /* @__PURE__ */ new Map();
     for (const primitive of primitives) {
       if (!primitive._element) continue;
       if (shouldExcludePrimitiveFromSnapping(primitive)) continue;
+      if (primitive.pcb_drawing_type === "pill") continue;
+      if (primitive.pcb_drawing_type === "rect" && primitive.ccw_rotation && primitive.ccw_rotation !== 0)
+        continue;
       const bbox = getPrimitiveBoundingBox(primitive);
       if (!bbox) continue;
       const existing = boundingBoxes.get(primitive._element);
@@ -10116,7 +10341,24 @@ var DimensionOverlay = ({
     }
     return boundingBoxes;
   }, [primitives]);
-  const snappingPoints = useMemo3(() => {
+  const primitiveSnappingPoints = useMemo4(() => {
+    const snapPoints = [];
+    for (const primitive of primitives) {
+      if (!primitive._element) continue;
+      if (shouldExcludePrimitiveFromSnapping(primitive)) continue;
+      const primitivePoints = getPrimitiveSnapPoints(primitive);
+      if (primitivePoints.length === 0) continue;
+      for (const snap of primitivePoints) {
+        snapPoints.push({
+          anchor: snap.anchor,
+          point: snap.point,
+          element: primitive._element
+        });
+      }
+    }
+    return snapPoints;
+  }, [primitives]);
+  const snappingPoints = useMemo4(() => {
     const points = [];
     elementBoundingBoxes.forEach((bounds, element) => {
       if (!bounds) return;
@@ -10141,14 +10383,17 @@ var DimensionOverlay = ({
         });
       }
     });
+    for (const snap of primitiveSnappingPoints) {
+      points.push(snap);
+    }
     points.push({
       anchor: "origin",
       point: { x: 0, y: 0 },
       element: null
     });
     return points;
-  }, [elementBoundingBoxes]);
-  const snappingPointsWithScreen = useMemo3(() => {
+  }, [elementBoundingBoxes, primitiveSnappingPoints]);
+  const snappingPointsWithScreen = useMemo4(() => {
     return snappingPoints.map((snap, index) => ({
       ...snap,
       id: `${index}-${snap.anchor}`,
@@ -10255,6 +10500,14 @@ var DimensionOverlay = ({
   };
   arrowScreenBounds.width = arrowScreenBounds.right - arrowScreenBounds.left;
   arrowScreenBounds.height = arrowScreenBounds.bottom - arrowScreenBounds.top;
+  const diagonalLabel = useDiagonalLabel({
+    dimensionStart: dStart,
+    dimensionEnd: dEnd,
+    screenDimensionStart: screenDStart,
+    screenDimensionEnd: screenDEnd,
+    flipX: arrowScreenBounds.flipX,
+    flipY: arrowScreenBounds.flipY
+  });
   return /* @__PURE__ */ jsxs4(
     "div",
     {
@@ -10308,6 +10561,24 @@ var DimensionOverlay = ({
       children: [
         children,
         dimensionToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          diagonalLabel.show && /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: diagonalLabel.x,
+                top: diagonalLabel.y,
+                color: "red",
+                mixBlendMode: "difference",
+                pointerEvents: "none",
+                fontSize: 12,
+                fontFamily: "sans-serif",
+                whiteSpace: "nowrap",
+                zIndex: zIndexMap.dimensionOverlay
+              },
+              children: diagonalLabel.distance.toFixed(2)
+            }
+          ),
           /* @__PURE__ */ jsx6(
             "div",
             {
@@ -11572,7 +11843,7 @@ var ErrorOverlay = ({
 };
 
 // src/components/MouseElementTracker.tsx
-import { useState as useState7, useMemo as useMemo4 } from "react";
+import { useState as useState7, useMemo as useMemo5 } from "react";
 import { applyToPoint as applyToPoint12, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
@@ -11989,7 +12260,7 @@ var MouseElementTracker = ({
 }) => {
   const [mousedPrimitives, setMousedPrimitives] = useState7([]);
   const [mousePos, setMousePos] = useState7({ x: 0, y: 0 });
-  const highlightedPrimitives = useMemo4(() => {
+  const highlightedPrimitives = useMemo5(() => {
     const highlightedPrimitives2 = [];
     for (const primitive of mousedPrimitives) {
       if (primitive._element?.type === "pcb_via") continue;
@@ -12353,15 +12624,15 @@ var PcbGroupOverlay = ({
 
 // src/components/RatsNestOverlay.tsx
 import { applyToPoint as applyToPoint14, identity as identity9 } from "transformation-matrix";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
-  const { netMap, idToNetMap } = useMemo5(
+  const { netMap, idToNetMap } = useMemo6(
     () => getFullConnectivityMapFromCircuitJson(soup || []),
     [soup]
   );
-  const ratsNestLines = useMemo5(() => {
+  const ratsNestLines = useMemo6(() => {
     if (!soup || !isShowingRatsNest) return [];
     const getElementPosition = (id) => {
       const element = su(soup)[id.replace(/_\d+$/, "")].get(id);
@@ -12466,7 +12737,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.258",
+  version: "1.11.260",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13300,11 +13571,11 @@ var CanvasElementsRenderer = (props) => {
   const isShowingCopperPours = useGlobalStore(
     (state) => state.is_showing_copper_pours
   );
-  const elementsToRender = useMemo6(
+  const elementsToRender = useMemo7(
     () => isShowingCopperPours ? elements : elements.filter((elm) => elm.type !== "pcb_copper_pour"),
     [elements, isShowingCopperPours]
   );
-  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo6(() => {
+  const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo7(() => {
     const primitivesWithoutInteractionMetadata2 = elementsToRender.flatMap(
       (elm) => convertElementToPrimitives(elm, props.elements)
     );
@@ -13317,7 +13588,7 @@ var CanvasElementsRenderer = (props) => {
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
-  const errorRelatedIds = useMemo6(() => {
+  const errorRelatedIds = useMemo7(() => {
     if (!hoveredErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
@@ -13336,7 +13607,7 @@ var CanvasElementsRenderer = (props) => {
     }
     return relatedIds;
   }, [hoveredErrorId, elements]);
-  const primitives = useMemo6(() => {
+  const primitives = useMemo7(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -13510,7 +13781,7 @@ var PCBViewer = ({
   editEvents = editEventsProp ?? editEvents;
   const initialRenderCompleted = useRef11(false);
   const touchStartRef = useRef11(null);
-  const circuitJsonKey = useMemo7(
+  const circuitJsonKey = useMemo8(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
@@ -13543,12 +13814,12 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  const pcbElmsPreEdit = useMemo7(() => {
+  const pcbElmsPreEdit = useMemo8(() => {
     return circuitJson?.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
     ) ?? [];
   }, [circuitJsonKey]);
-  const elements = useMemo7(() => {
+  const elements = useMemo8(() => {
     return applyEditEvents({
       circuitJson: pcbElmsPreEdit,
       editEvents
@@ -13565,7 +13836,7 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo7(
+  const mergedInitialState = useMemo8(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }