@tscircuit/pcb-viewer 1.11.110 → 1.11.111

package/dist/index.d.ts

@@ -14,6 +14,7 @@ interface State {
     is_moving_component: boolean;
     is_drawing_trace: boolean;
     is_showing_autorouting: boolean;
+    is_showing_drc_errors: boolean;
     is_showing_multiple_traces_length: boolean;
     is_showing_rats_nest: boolean;
     selectLayer: (layer: LayerRef) => void;
@@ -24,6 +25,7 @@ interface State {
     setIsMouseOverContainer: (is_focused: boolean) => void;
     setIsShowingAutorouting: (is_showing: boolean) => void;
     setIsShowingMultipleTracesLength: (is_showing: boolean) => void;
+    setIsShowingDrcErrors: (is_showing: boolean) => void;
 }
 type StateProps = {
     [key in keyof State]: State[key] extends boolean ? boolean : never;

package/dist/index.js

@@ -5844,6 +5844,7 @@ var createStore = (initialState = {}) => createZustandStore(
     is_showing_multiple_traces_length: false,
     is_showing_rats_nest: false,
     is_showing_autorouting: true,
+    is_showing_drc_errors: true,
     ...initialState,
     selectLayer: (layer) => set({ selected_layer: layer }),
     setEditMode: (mode) => set({
@@ -5858,7 +5859,8 @@ var createStore = (initialState = {}) => createZustandStore(
     setIsDrawingTrace: (is_drawing) => set({ is_drawing_trace: is_drawing }),
     setIsMouseOverContainer: (is_focused) => set({ is_mouse_over_container: is_focused }),
     setIsShowingMultipleTracesLength: (is_showing) => set({ is_showing_multiple_traces_length: is_showing }),
-    setIsShowingAutorouting: (is_showing) => set({ is_showing_autorouting: is_showing })
+    setIsShowingAutorouting: (is_showing) => set({ is_showing_autorouting: is_showing }),
+    setIsShowingDrcErrors: (is_showing) => set({ is_showing_drc_errors: is_showing })
   })
 );
 var useGlobalStore = (s) => {
@@ -8810,50 +8812,95 @@ var ErrorSVG = ({
     ] })
   }
 );
+var RouteSVG = ({
+  points,
+  errorCenter
+}) => /* @__PURE__ */ jsxs8(
+  "svg",
+  {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      pointerEvents: "none",
+      mixBlendMode: "difference",
+      zIndex: zIndexMap.errorOverlay
+    },
+    width: "100%",
+    height: "100%",
+    children: [
+      points.length > 1 && /* @__PURE__ */ jsx10(
+        "polyline",
+        {
+          points: points.map((pt) => `${pt.x},${pt.y}`).join(" "),
+          fill: "none",
+          stroke: "red",
+          strokeWidth: 1.5,
+          strokeDasharray: "2,2"
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "rect",
+        {
+          x: errorCenter.x - 5,
+          y: errorCenter.y - 5,
+          width: 10,
+          height: 10,
+          transform: `rotate(45 ${errorCenter.x} ${errorCenter.y})`,
+          fill: "red"
+        }
+      )
+    ]
+  }
+);
 var ErrorOverlay = ({ children, transform, elements }) => {
   if (!transform) transform = identity7();
   const containerRef = useRef8(null);
+  const isShowingDRCErrors = useGlobalStore(
+    (state) => state.is_showing_drc_errors
+  );
   return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     elements?.filter((el) => el.type === "pcb_trace_error").map((el) => {
-      const { pcb_port_ids } = el;
+      const { pcb_port_ids, pcb_trace_id } = el;
       const port1 = elements.find(
         (el2) => el2.type === "pcb_port" && el2.pcb_port_id === pcb_port_ids?.[0]
       );
       const port2 = elements.find(
         (el2) => el2.type === "pcb_port" && el2.pcb_port_id === pcb_port_ids?.[1]
       );
-      if (!port1 || !port2) return null;
-      const screenPort1 = applyToPoint9(transform, {
-        x: port1.x,
-        y: port1.y
-      });
-      const screenPort2 = applyToPoint9(transform, {
-        x: port2.x,
-        y: port2.y
-      });
-      const canLineBeDrawn = !(isNaN(screenPort1.x) || isNaN(screenPort1.y) || isNaN(screenPort2.x) || isNaN(screenPort2.y));
-      const errorCenter = {
-        x: (screenPort1.x + screenPort2.x) / 2,
-        y: (screenPort1.y + screenPort2.y) / 2
-      };
-      if (isNaN(errorCenter.x) || isNaN(errorCenter.y)) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(
-          ErrorSVG,
-          {
-            screenPort1,
-            screenPort2,
-            errorCenter,
-            canLineBeDrawn
-          }
-        ),
-        /* @__PURE__ */ jsxs8(
-          "div",
-          {
-            className: css2`
+      const trace = su_default(elements).pcb_trace.get(pcb_trace_id);
+      if (port1 && port2) {
+        const screenPort1 = applyToPoint9(transform, {
+          x: port1.x,
+          y: port1.y
+        });
+        const screenPort2 = applyToPoint9(transform, {
+          x: port2.x,
+          y: port2.y
+        });
+        const canLineBeDrawn = !(isNaN(screenPort1.x) || isNaN(screenPort1.y) || isNaN(screenPort2.x) || isNaN(screenPort2.y));
+        const errorCenter = {
+          x: (screenPort1.x + screenPort2.x) / 2,
+          y: (screenPort1.y + screenPort2.y) / 2
+        };
+        if (isNaN(errorCenter.x) || isNaN(errorCenter.y)) {
+          return null;
+        }
+        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx10(
+            ErrorSVG,
+            {
+              screenPort1,
+              screenPort2,
+              errorCenter,
+              canLineBeDrawn
+            }
+          ),
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: css2`
                   position: absolute;
                   z-index: 100;
                   left: ${errorCenter.x}px;
@@ -8882,23 +8929,74 @@ var ErrorOverlay = ({ children, transform, elements }) => {
                     display: flex;
                   }
                 `,
-            children: [
-              /* @__PURE__ */ jsx10("div", { className: "error-message", children: el.message }),
-              /* @__PURE__ */ jsx10(
-                "div",
-                {
-                  className: css2`
+              children: [
+                /* @__PURE__ */ jsx10("div", { className: "error-message", children: el.message }),
+                /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    className: css2`
                     width: 10px;
                     height: 10px;
                     transform: translate(0, 5px) rotate(45deg);
                     background-color: red;
                   `
-                }
-              )
-            ]
-          }
-        )
-      ] });
+                  }
+                )
+              ]
+            }
+          )
+        ] });
+      }
+      if (trace?.route && isShowingDRCErrors) {
+        const screenPoints = trace.route.map(
+          (pt) => applyToPoint9(transform, { x: pt.x, y: pt.y })
+        );
+        if (screenPoints.some((pt) => isNaN(pt.x) || isNaN(pt.y)))
+          return null;
+        const mid = Math.floor(screenPoints.length / 2);
+        const errorCenter = screenPoints[mid];
+        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx10(RouteSVG, { points: screenPoints, errorCenter }),
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: css2`
+                    position: absolute;
+                    z-index: ${zIndexMap.errorOverlay + 1};
+                    left: ${errorCenter.x}px;
+                    top: ${errorCenter.y}px;
+                    color: red;
+                    text-align: center;
+                    font-family: sans-serif;
+                    font-size: 12px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    cursor: pointer;
+                    transform: translate(-50%, -100%);
+
+                    & .error-message { opacity: 0; pointer-events: none; width: 200px; transition: opacity 0.2s; margin-bottom: 10px; }
+                    &:hover .error-message { opacity: 1; display: flex; }
+                  `,
+              children: [
+                /* @__PURE__ */ jsx10("div", { className: "error-message", children: el.message }),
+                /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    className: css2`
+                      width: 10px;
+                      height: 10px;
+                      transform: translate(0, 5px) rotate(45deg);
+                      background-color: red;
+                    `
+                  }
+                )
+              ]
+            }
+          )
+        ] });
+      }
+      return null;
     })
   ] });
 };
@@ -9413,7 +9511,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.109",
+  version: "1.11.110",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -9610,13 +9708,15 @@ var ToolbarOverlay = ({ children, elements }) => {
     in_draw_trace_mode,
     is_showing_rats_nest,
     is_showing_multiple_traces_length,
-    is_showing_autorouting
+    is_showing_autorouting,
+    is_showing_drc_errors
   ] = useGlobalStore((s) => [
     s.in_move_footprint_mode,
     s.in_draw_trace_mode,
     s.is_showing_rats_nest,
     s.is_showing_multiple_traces_length,
-    s.is_showing_autorouting
+    s.is_showing_autorouting,
+    s.is_showing_drc_errors
   ]);
   const setEditMode = useGlobalStore((s) => s.setEditMode);
   const setIsShowingRatsNest = useGlobalStore((s) => s.setIsShowingRatsNest);
@@ -9626,6 +9726,7 @@ var ToolbarOverlay = ({ children, elements }) => {
   const setIsShowingAutorouting = useGlobalStore(
     (s) => s.setIsShowingAutorouting
   );
+  const setIsShowingDrcErrors = useGlobalStore((s) => s.setIsShowingDrcErrors);
   useHotKey("1", () => selectLayer("top"));
   useHotKey("2", () => selectLayer("bottom"));
   useHotKey("3", () => selectLayer("inner1"));
@@ -9845,6 +9946,16 @@ var ToolbarOverlay = ({ children, elements }) => {
                             setIsShowingAutorouting(!is_showing_autorouting);
                           }
                         }
+                      ),
+                      /* @__PURE__ */ jsx14(
+                        CheckboxMenuItem,
+                        {
+                          label: "Show DRC Errors",
+                          checked: is_showing_drc_errors,
+                          onClick: () => {
+                            setIsShowingDrcErrors(!is_showing_drc_errors);
+                          }
+                        }
                       )
                     ] })
                   ] })