@tscircuit/pcb-viewer 1.11.259 → 1.11.260

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,101 @@ 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/components/DimensionOverlay.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SNAP_THRESHOLD_PX = 16;
@@ -10101,7 +10196,7 @@ 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;
@@ -10116,7 +10211,7 @@ var DimensionOverlay = ({
     }
     return boundingBoxes;
   }, [primitives]);
-  const snappingPoints = useMemo3(() => {
+  const snappingPoints = useMemo4(() => {
     const points = [];
     elementBoundingBoxes.forEach((bounds, element) => {
       if (!bounds) return;
@@ -10148,7 +10243,7 @@ var DimensionOverlay = ({
     });
     return points;
   }, [elementBoundingBoxes]);
-  const snappingPointsWithScreen = useMemo3(() => {
+  const snappingPointsWithScreen = useMemo4(() => {
     return snappingPoints.map((snap, index) => ({
       ...snap,
       id: `${index}-${snap.anchor}`,
@@ -10255,6 +10350,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 +10411,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 +11693,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 +12110,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 +12474,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 +12587,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.258",
+  version: "1.11.259",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13300,11 +13421,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 +13438,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 +13457,7 @@ var CanvasElementsRenderer = (props) => {
     }
     return relatedIds;
   }, [hoveredErrorId, elements]);
-  const primitives = useMemo6(() => {
+  const primitives = useMemo7(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
       ...errorRelatedIds
@@ -13510,7 +13631,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 +13664,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 +13686,7 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo7(
+  const mergedInitialState = useMemo8(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }