@tscircuit/pcb-viewer 1.11.41 → 1.11.43

package/dist/index.d.ts

@@ -66,8 +66,10 @@ type Props = {
     initialState?: Partial<StateProps>;
     onEditEventsChanged?: (editEvents: EditEvent[]) => void;
     focusOnHover?: boolean;
+    clickToInteractEnabled?: boolean;
+    disableAutoFocus?: boolean;
 };
-declare const PCBViewer: ({ children, soup, circuitJson, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, focusOnHover, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ children, soup, circuitJson, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, focusOnHover, clickToInteractEnabled, disableAutoFocus, }: Props) => react_jsx_runtime.JSX.Element;
 
 declare const applyEditEvents: (soup: AnyCircuitElement[], edit_events: EditEvent[]) => AnyCircuitElement[];
 

package/dist/index.js

@@ -7874,7 +7874,11 @@ var MouseElementTracker = ({
 import { useEffect as useEffect6, useRef as useRef3, useState as useState5 } from "react";
 import { applyToPoint as applyToPoint6, identity as identity3, inverse as inverse3 } from "transformation-matrix";
 import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var DimensionOverlay = ({ children, transform, focusOnHover = false }) => {
+var DimensionOverlay = ({
+  children,
+  transform,
+  focusOnHover = false
+}) => {
   if (!transform) transform = identity3();
   const [dimensionToolVisible, setDimensionToolVisible] = useState5(false);
   const [dimensionToolStretching, setDimensionToolStretching] = useState5(false);
@@ -8139,7 +8143,7 @@ import { css } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.40",
+  version: "1.11.42",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -8167,7 +8171,7 @@ var package_default = {
     "@swc/core": "^1.4.12",
     "@tscircuit/core": "0.0.274",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
-    "@tscircuit/props": "^0.0.142",
+    "@tscircuit/props": "^0.0.143",
     "@tscircuit/soup-util": "^0.0.41",
     "@types/color": "^3.0.6",
     "@types/node": "18.7.23",
@@ -9456,16 +9460,23 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx13(DimensionOverlay, { transform, focusOnHover: props.focusOnHover, children: /* @__PURE__ */ jsx13(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx13(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx13(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx13(
-                CanvasPrimitiveRenderer,
+              children: /* @__PURE__ */ jsx13(
+                DimensionOverlay,
                 {
                   transform,
-                  primitives,
-                  width: props.width,
-                  height: props.height,
-                  grid: props.grid
+                  focusOnHover: props.focusOnHover,
+                  children: /* @__PURE__ */ jsx13(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx13(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx13(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx13(
+                    CanvasPrimitiveRenderer,
+                    {
+                      transform,
+                      primitives,
+                      width: props.width,
+                      height: props.height,
+                      grid: props.grid
+                    }
+                  ) }) }) })
                 }
-              ) }) }) }) })
+              )
             }
           )
         }
@@ -9486,7 +9497,9 @@ var PCBViewer = ({
   allowEditing = true,
   editEvents: editEventsProp,
   onEditEventsChanged,
-  focusOnHover = false
+  focusOnHover = false,
+  clickToInteractEnabled = false,
+  disableAutoFocus = false
 }) => {
   circuitJson ??= soup;
   const {
@@ -9495,6 +9508,7 @@ var PCBViewer = ({
     isLoading
   } = useRenderedCircuit(children);
   circuitJson ??= circuitJsonFromChildren ?? [];
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState10(!clickToInteractEnabled);
   const [ref, refDimensions] = useMeasure_default();
   const [transform, setTransformInternal] = useState10(defaultTransform);
   const {
@@ -9503,11 +9517,12 @@ var PCBViewer = ({
     cancelDrag: cancelPanDrag
   } = src_default({
     transform,
-    onSetTransform: setTransformInternal
+    onSetTransform: setTransformInternal,
+    enabled: isInteractionEnabled
   });
   let [editEvents, setEditEvents] = useState10([]);
   editEvents = editEventsProp ?? editEvents;
-  const resetTransform = () => {
+  const resetTransform = (shouldAnimate = false) => {
     const elmBounds = refDimensions?.width > 0 ? refDimensions : { width: 500, height: 500 };
     const { center, width, height: height2 } = elements.some(
       (e) => e.type.startsWith("pcb_")
@@ -9519,19 +9534,42 @@ var PCBViewer = ({
       (elmBounds.height ?? 0) / height2,
       100
     ) * 0.75;
-    setTransform(
-      compose4(
-        translate5((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-        scale2(scaleFactor, -scaleFactor, 0, 0),
-        translate5(-center.x, -center.y)
-      )
+    const targetTransform = compose4(
+      translate5((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+      scale2(scaleFactor, -scaleFactor, 0, 0),
+      translate5(-center.x, -center.y)
     );
+    if (!shouldAnimate) {
+      setTransform(targetTransform);
+      return;
+    }
+    const startTransform = { ...transform };
+    const startTime = Date.now();
+    const duration = 1e3;
+    const animateTransform = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      const newTransform = {
+        a: startTransform.a + (targetTransform.a - startTransform.a) * easeProgress,
+        b: startTransform.b + (targetTransform.b - startTransform.b) * easeProgress,
+        c: startTransform.c + (targetTransform.c - startTransform.c) * easeProgress,
+        d: startTransform.d + (targetTransform.d - startTransform.d) * easeProgress,
+        e: startTransform.e + (targetTransform.e - startTransform.e) * easeProgress,
+        f: startTransform.f + (targetTransform.f - startTransform.f) * easeProgress
+      };
+      setTransform(newTransform);
+      if (progress < 1) {
+        requestAnimationFrame(animateTransform);
+      }
+    };
+    requestAnimationFrame(animateTransform);
   };
   useEffect12(() => {
-    if (refDimensions && refDimensions.width !== 0 && (children || soup)) {
-      resetTransform();
+    if (!disableAutoFocus && refDimensions && refDimensions.width !== 0 && (children || soup) && (!clickToInteractEnabled || isInteractionEnabled)) {
+      resetTransform(false);
     }
-  }, [children, refDimensions]);
+  }, [children, refDimensions, clickToInteractEnabled, isInteractionEnabled, disableAutoFocus]);
   const pcbElmsPreEdit = useMemo6(
     () => circuitJson.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
@@ -9552,33 +9590,67 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  return /* @__PURE__ */ jsx14("div", { ref: transformRef, children: /* @__PURE__ */ jsx14("div", { ref, children: /* @__PURE__ */ jsxs10(ContextProviders, { initialState, children: [
-    /* @__PURE__ */ jsx14(
-      CanvasElementsRenderer,
+  return /* @__PURE__ */ jsxs10("div", { ref: transformRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx14("div", { ref, children: /* @__PURE__ */ jsxs10(ContextProviders, { initialState, children: [
+      /* @__PURE__ */ jsx14(
+        CanvasElementsRenderer,
+        {
+          transform,
+          height,
+          width: refDimensions.width,
+          allowEditing,
+          focusOnHover,
+          cancelPanDrag,
+          onCreateEditEvent,
+          onModifyEditEvent,
+          grid: {
+            spacing: 1,
+            view_window: {
+              left: 0,
+              right: refDimensions.width || 500,
+              top: height,
+              bottom: 0
+            }
+          },
+          elements
+        },
+        refDimensions.width
+      ),
+      /* @__PURE__ */ jsx14(ToastContainer, {})
+    ] }) }),
+    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx14(
+      "div",
       {
-        transform,
-        height,
-        width: refDimensions.width,
-        allowEditing,
-        focusOnHover,
-        cancelPanDrag,
-        onCreateEditEvent,
-        onModifyEditEvent,
-        grid: {
-          spacing: 1,
-          view_window: {
-            left: 0,
-            right: refDimensions.width || 500,
-            top: height,
-            bottom: 0
-          }
+        onClick: () => {
+          setIsInteractionEnabled(true);
+          resetTransform(true);
         },
-        elements
-      },
-      refDimensions.width
-    ),
-    /* @__PURE__ */ jsx14(ToastContainer, {})
-  ] }) }) });
+        style: {
+          position: "absolute",
+          inset: 0,
+          cursor: "pointer",
+          zIndex: 10,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx14(
+          "div",
+          {
+            style: {
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              color: "white",
+              padding: "12px 24px",
+              borderRadius: "8px",
+              fontSize: "16px",
+              pointerEvents: "none"
+            },
+            children: "Click to Interact"
+          }
+        )
+      }
+    )
+  ] });
 };
 export {
   CanvasElementsRenderer,