@tscircuit/pcb-viewer 1.3.4 → 1.3.5

package/dist/index.js

@@ -478,20 +478,21 @@ var require_dist = __commonJS({
             }
         });
         module2.exports = __toCommonJS2(src_exports2);
-        var import_transformation_matrix6 = require("transformation-matrix");
-        var import_react15 = require("react");
+        var import_transformation_matrix8 = require("transformation-matrix");
+        var import_react16 = require("react");
         var useMouseMatrixTransform2 = function() {
             var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-            var extRef = (0, import_react15.useRef)(null);
+            var extRef = (0, import_react16.useRef)(null);
+            var _ref = _sliced_to_array((0, import_react16.useState)(0), 2), lastDragCancelTime = _ref[0], setLastDragCancelTime = _ref[1];
             var _props_canvasElm;
             var outerCanvasElm = (_props_canvasElm = props.canvasElm) !== null && _props_canvasElm !== void 0 ? _props_canvasElm : extRef.current;
             var _props_initialTransform;
-            var _ref = _sliced_to_array((0, import_react15.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix6.identity)()), 2), internalTransform = _ref[0], setInternalTransform = _ref[1];
-            var _ref1 = _sliced_to_array((0, import_react15.useState)(0), 2), waitCounter = _ref1[0], setWaitCounter = _ref1[1];
-            var _ref2 = _sliced_to_array((0, import_react15.useReducer)(function(s) {
+            var _ref1 = _sliced_to_array((0, import_react16.useState)((_props_initialTransform = props.initialTransform) !== null && _props_initialTransform !== void 0 ? _props_initialTransform : (0, import_transformation_matrix8.identity)()), 2), internalTransform = _ref1[0], setInternalTransform = _ref1[1];
+            var _ref2 = _sliced_to_array((0, import_react16.useState)(0), 2), waitCounter = _ref2[0], setWaitCounter = _ref2[1];
+            var _ref3 = _sliced_to_array((0, import_react16.useReducer)(function(s) {
                 return s + 1;
-            }, 0), 2), extChangeCounter = _ref2[0], incExtChangeCounter = _ref2[1];
-            var setTransform = (0, import_react15.useCallback)(function(newTransform) {
+            }, 0), 2), extChangeCounter = _ref3[0], incExtChangeCounter = _ref3[1];
+            var setTransform = (0, import_react16.useCallback)(function(newTransform) {
                 if (props.onSetTransform) {
                     props.onSetTransform(newTransform);
                 }
@@ -502,7 +503,7 @@ var require_dist = __commonJS({
                 props.onSetTransform,
                 setInternalTransform
             ]);
-            var setTransformExt = (0, import_react15.useCallback)(function(newTransform) {
+            var setTransformExt = (0, import_react16.useCallback)(function(newTransform) {
                 setTransform(newTransform);
                 incExtChangeCounter();
             }, [
@@ -510,15 +511,20 @@ var require_dist = __commonJS({
             ]);
             var _props_transform;
             var transform = (_props_transform = props.transform) !== null && _props_transform !== void 0 ? _props_transform : internalTransform;
-            (0, import_react15.useEffect)(function() {
+            var cancelDrag = (0, import_react16.useCallback)(function() {
+                setLastDragCancelTime(Date.now());
+            }, []);
+            (0, import_react16.useEffect)(function() {
                 var handleMouseDown = function handleMouseDown(e) {
                     m0 = getMousePos(e);
+                    if (Date.now() - lastDragCancelTime < 100) return;
                     md = true;
                     e.preventDefault();
                 };
                 var handleMouseUp = function handleMouseUp(e) {
+                    if (!md) return;
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix8.compose)((0, import_transformation_matrix8.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     md = false;
@@ -527,20 +533,26 @@ var require_dist = __commonJS({
                     mlastrel = getMousePos(e);
                     if (!md) return;
                     m1 = getMousePos(e);
-                    setTransform((0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(m1.x - m0.x, m1.y - m0.y), init_tf));
+                    setTransform((0, import_transformation_matrix8.compose)((0, import_transformation_matrix8.translate)(m1.x - m0.x, m1.y - m0.y), init_tf));
                 };
                 var handleMouseWheel = function handleMouseWheel(e) {
                     var center = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(center.x, center.y), (0, import_transformation_matrix6.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix6.translate)(-center.x, -center.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix8.compose)((0, import_transformation_matrix8.translate)(center.x, center.y), (0, import_transformation_matrix8.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3), (0, import_transformation_matrix8.translate)(-center.x, -center.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                     e.preventDefault();
                 };
                 var handleMouseOut = function handleMouseOut(e) {
                     if (!md) return;
+                    if (canvasElm) {
+                        var boundingBox = canvasElm.getBoundingClientRect();
+                        if (e.clientX >= boundingBox.left + 10 && e.clientX <= boundingBox.right - 10 && e.clientY >= boundingBox.top + 10 && e.clientY <= boundingBox.bottom - 10) {
+                            return;
+                        }
+                    }
                     md = false;
                     m1 = getMousePos(e);
-                    var new_tf = (0, import_transformation_matrix6.compose)((0, import_transformation_matrix6.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
+                    var new_tf = (0, import_transformation_matrix8.compose)((0, import_transformation_matrix8.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
                     setTransform(new_tf);
                     init_tf = new_tf;
                 };
@@ -578,23 +590,24 @@ var require_dist = __commonJS({
                 };
                 canvasElm.addEventListener("mousedown", handleMouseDown);
                 canvasElm.addEventListener("mouseup", handleMouseUp);
-                canvasElm.addEventListener("mousemove", handleMouseMove);
+                window.addEventListener("mousemove", handleMouseMove);
                 canvasElm.addEventListener("mouseout", handleMouseOut);
                 canvasElm.addEventListener("wheel", handleMouseWheel);
                 return function() {
                     canvasElm.removeEventListener("mousedown", handleMouseDown);
                     canvasElm.removeEventListener("mouseup", handleMouseUp);
-                    canvasElm.removeEventListener("mousemove", handleMouseMove);
+                    window.removeEventListener("mousemove", handleMouseMove);
                     canvasElm.removeEventListener("mouseout", handleMouseOut);
                     canvasElm.removeEventListener("wheel", handleMouseWheel);
                 };
             }, [
                 outerCanvasElm,
                 waitCounter,
-                extChangeCounter
+                extChangeCounter,
+                lastDragCancelTime
             ]);
-            var applyTransformToPoint = (0, import_react15.useCallback)(function(obj) {
-                return (0, import_transformation_matrix6.applyToPoint)(transform, obj);
+            var applyTransformToPoint = (0, import_react16.useCallback)(function(obj) {
+                return (0, import_transformation_matrix8.applyToPoint)(transform, obj);
             }, [
                 transform
             ]);
@@ -602,7 +615,8 @@ var require_dist = __commonJS({
                 ref: extRef,
                 transform: transform,
                 applyTransformToPoint: applyTransformToPoint,
-                setTransform: setTransformExt
+                setTransform: setTransformExt,
+                cancelDrag: cancelDrag
             };
         };
         var src_default = useMouseMatrixTransform2;
@@ -620,9 +634,9 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 // src/PCBViewer.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_fiber = require("@tscircuit/react-fiber");
-var import_builder3 = require("@tscircuit/builder");
+var import_builder4 = require("@tscircuit/builder");
 // src/components/CanvasPrimitiveRenderer.tsx
 var import_react_supergrid = require("react-supergrid");
 var import_react4 = require("react");
@@ -1306,15 +1320,39 @@ var createStore = function() {
     return (0, import_zustand.createStore)(function(set) {
         return {
             selected_layer: "top",
+            in_edit_mode: false,
+            in_move_footprint_mode: false,
+            in_draw_trace_mode: false,
+            is_moving_component: false,
+            is_drawing_trace: false,
             selectLayer: function(layer) {
                 return set({
                     selected_layer: layer
                 });
+            },
+            setEditMode: function(mode) {
+                return set({
+                    in_edit_mode: mode !== "off",
+                    in_move_footprint_mode: mode === "move_footprint",
+                    in_draw_trace_mode: mode === "draw_trace",
+                    is_moving_component: false,
+                    is_drawing_trace: false
+                });
+            },
+            setIsMovingComponent: function(is_moving) {
+                return set({
+                    is_moving_component: is_moving
+                });
+            },
+            setIsDrawingTrace: function(is_drawing) {
+                return set({
+                    is_drawing_trace: is_drawing
+                });
             }
         };
     });
 };
-var useStore = function(s) {
+var useGlobalStore = function(s) {
     var store = (0, import_react3.useContext)(StoreContext);
     return (0, import_zustand.useStore)(store, s);
 };
@@ -1324,7 +1362,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var CanvasPrimitiveRenderer = function(param) {
     var primitives = param.primitives, transform = param.transform, grid = param.grid, _param_width = param.width, width = _param_width === void 0 ? 500 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 500 : _param_height;
     var canvasRefs = (0, import_react4.useRef)();
-    var selectedLayer = useStore(function(s) {
+    var selectedLayer = useGlobalStore(function(s) {
         return s.selected_layer;
     });
     (0, import_react4.useEffect)(function() {
@@ -1387,7 +1425,7 @@ var CanvasPrimitiveRenderer = function(param) {
     });
 };
 // src/components/CanvasElementsRenderer.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 // src/lib/convert-element-to-primitive.ts
 var convertElementToPrimitives = function(element, allElements) {
     var _parent_pcb_component = "pcb_component_id" in element ? allElements.find(function(elm) {
@@ -1716,9 +1754,12 @@ var HighlightedPrimitiveBoxWithText = function(param) {
 };
 var ElementOverlayBox = function(param) {
     var highlightedPrimitives = param.highlightedPrimitives;
+    var is_moving_component = useGlobalStore(function(s) {
+        return s.is_moving_component;
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
         style: containerStyle,
-        children: highlightedPrimitives.map(function(primitive, i) {
+        children: !is_moving_component && highlightedPrimitives.map(function(primitive, i) {
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HighlightedPrimitiveBoxWithText, {
                 primitive: primitive
             }, i);
@@ -2114,12 +2155,21 @@ var ToolbarOverlay = function(param) {
     var _ref = _sliced_to_array((0, import_react9.useState)(false), 2), isMouseOverContainer = _ref[0], setIsMouseOverContainer = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react9.useState)(false), 2), isLayerMenuOpen = _ref1[0], setLayerMenuOpen = _ref1[1];
     var _ref2 = _sliced_to_array((0, import_react9.useState)(false), 2), isErrorsOpen = _ref2[0], setErrorsOpen = _ref2[1];
-    var _useStore = _sliced_to_array(useStore(function(s) {
+    var _useGlobalStore = _sliced_to_array(useGlobalStore(function(s) {
         return [
             s.selected_layer,
             s.selectLayer
         ];
-    }), 2), selectedLayer = _useStore[0], selectLayer = _useStore[1];
+    }), 2), selectedLayer = _useGlobalStore[0], selectLayer = _useGlobalStore[1];
+    var _useGlobalStore1 = _sliced_to_array(useGlobalStore(function(s) {
+        return [
+            s.in_move_footprint_mode,
+            s.in_draw_trace_mode
+        ];
+    }), 2), in_move_footprint_mode = _useGlobalStore1[0], in_draw_trace_mode = _useGlobalStore1[1];
+    var setEditMode = useGlobalStore(function(s) {
+        return s.setEditMode;
+    });
     var _elements_filter_length;
     var errorCount = (_elements_filter_length = elements === null || elements === void 0 ? void 0 : elements.filter(function(e) {
         return e.type.includes("error");
@@ -2131,7 +2181,7 @@ var ToolbarOverlay = function(param) {
         onMouseEnter: function() {
             setIsMouseOverContainer(true);
         },
-        onMouseLeave: function() {
+        onMouseLeave: function(e) {
             setIsMouseOverContainer(false);
             setLayerMenuOpen(false);
         },
@@ -2233,6 +2283,30 @@ var ToolbarOverlay = function(param) {
                                 })
                             })
                         ]
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolbarButton, {
+                        style: {},
+                        onClick: function() {
+                            setEditMode(in_draw_trace_mode ? "off" : "draw_trace");
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+                            children: [
+                                in_draw_trace_mode ? "✖ " : "",
+                                "Edit Traces"
+                            ]
+                        })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolbarButton, {
+                        style: {},
+                        onClick: function() {
+                            setEditMode(in_move_footprint_mode ? "off" : "move_footprint");
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+                            children: [
+                                in_move_footprint_mode ? "✖ " : "",
+                                "Move Components"
+                            ]
+                        })
                     })
                 ]
             })
@@ -2331,10 +2405,161 @@ var ErrorOverlay = function(param) {
         ]
     });
 };
-// src/components/CanvasElementsRenderer.tsx
+// src/components/EditOverlay.tsx
+var import_react11 = require("react");
+var import_transformation_matrix5 = require("transformation-matrix");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var isInsideOf = function(pcb_component, point) {
+    var padding = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
+    var halfWidth = pcb_component.width / 2;
+    var halfHeight = pcb_component.height / 2;
+    var left = pcb_component.center.x - halfWidth - padding;
+    var right = pcb_component.center.x + halfWidth + padding;
+    var top = pcb_component.center.y - halfHeight - padding;
+    var bottom = pcb_component.center.y + halfHeight + padding;
+    return point.x > left && point.x < right && point.y > top && point.y < bottom;
+};
+var EditOverlay = function(param) {
+    var children = param.children, disabledProp = param.disabled, transform = param.transform, soup = param.soup, cancelPanDrag = param.cancelPanDrag, onCreateEditEvent = param.onCreateEditEvent, onModifyEditEvent = param.onModifyEditEvent;
+    if (!transform) transform = (0, import_transformation_matrix5.identity)();
+    var containerRef = (0, import_react11.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react11.useState)(null), 2), activePcbComponentId = _ref[0], setActivePcbComponent = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react11.useState)(null), 2), dragState = _ref1[0], setDragState = _ref1[1];
+    var isPcbComponentActive = activePcbComponentId !== null;
+    var in_edit_mode = useGlobalStore(function(s) {
+        return s.in_edit_mode;
+    });
+    var in_move_footprint_mode = useGlobalStore(function(s) {
+        return s.in_move_footprint_mode;
+    });
+    var setIsMovingComponent = useGlobalStore(function(s) {
+        return s.setIsMovingComponent;
+    });
+    var disabled = disabledProp || !in_edit_mode;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", {
+        ref: containerRef,
+        style: {
+            position: "relative",
+            overflow: "hidden"
+        },
+        onMouseDown: function(e) {
+            if (disabled) return;
+            var rect = e.currentTarget.getBoundingClientRect();
+            var x = e.clientX - rect.left;
+            var y = e.clientY - rect.top;
+            var rwMousePoint = (0, import_transformation_matrix5.applyToPoint)((0, import_transformation_matrix5.inverse)(transform), {
+                x: x,
+                y: y
+            });
+            var foundActiveComponent = false;
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = soup[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var e2 = _step.value;
+                    if (e2.type === "pcb_component" && isInsideOf(e2, rwMousePoint, 10 / transform.a)) {
+                        cancelPanDrag();
+                        setActivePcbComponent(e2.pcb_component_id);
+                        foundActiveComponent = true;
+                        var edit_event_id = Math.random().toString();
+                        setDragState({
+                            dragStart: rwMousePoint,
+                            originalCenter: e2.center,
+                            dragEnd: rwMousePoint,
+                            edit_event_id: edit_event_id
+                        });
+                        onCreateEditEvent({
+                            edit_event_id: edit_event_id,
+                            pcb_edit_event_type: "edit_component_location",
+                            pcb_component_id: e2.pcb_component_id,
+                            original_center: e2.center,
+                            new_center: e2.center,
+                            in_progress: true
+                        });
+                        setIsMovingComponent(true);
+                        break;
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+            if (!foundActiveComponent) {
+                setActivePcbComponent(null);
+            }
+            if (foundActiveComponent) {
+                e.preventDefault();
+                return false;
+            }
+        },
+        onMouseMove: function(e) {
+            if (!activePcbComponentId || !dragState) return;
+            var rect = e.currentTarget.getBoundingClientRect();
+            var x = e.clientX - rect.left;
+            var y = e.clientY - rect.top;
+            var rwMousePoint = (0, import_transformation_matrix5.applyToPoint)((0, import_transformation_matrix5.inverse)(transform), {
+                x: x,
+                y: y
+            });
+            setDragState(_object_spread_props(_object_spread({}, dragState), {
+                dragEnd: rwMousePoint
+            }));
+            onModifyEditEvent({
+                edit_event_id: dragState.edit_event_id,
+                new_center: {
+                    x: dragState.originalCenter.x + rwMousePoint.x - dragState.dragStart.x,
+                    y: dragState.originalCenter.y + rwMousePoint.y - dragState.dragStart.y
+                }
+            });
+        },
+        onMouseUp: function(e) {
+            if (!activePcbComponentId) return;
+            setActivePcbComponent(null);
+            setIsMovingComponent(false);
+            if (dragState) {
+                onModifyEditEvent({
+                    edit_event_id: dragState.edit_event_id,
+                    in_progress: false
+                });
+                setDragState(null);
+            }
+        },
+        children: [
+            children,
+            !disabled && soup.filter(function(e) {
+                return e.type === "pcb_component";
+            }).map(function(e) {
+                var projectedCenter = (0, import_transformation_matrix5.applyToPoint)(transform, e.center);
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
+                    style: {
+                        position: "absolute",
+                        pointerEvents: "none",
+                        // b/c of transform, this is actually center not left/top
+                        left: projectedCenter.x,
+                        top: projectedCenter.y,
+                        width: e.width * transform.a + 20,
+                        height: e.height * transform.a + 20,
+                        transform: "translate(-50%, -50%)",
+                        background: isPcbComponentActive && activePcbComponentId === e.pcb_component_id ? "rgba(255, 0, 0, 0.2)" : ""
+                    }
+                }, e.pcb_component_id);
+            })
+        ]
+    });
+};
+// src/components/CanvasElementsRenderer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var CanvasElementsRenderer = function(props) {
-    var primitives = (0, import_react11.useMemo)(function() {
+    var primitives = (0, import_react12.useMemo)(function() {
         var primitives2 = props.elements.flatMap(function(elm) {
             return convertElementToPrimitives(elm, props.elements);
         });
@@ -2342,22 +2567,30 @@ var CanvasElementsRenderer = function(props) {
     }, [
         props.elements
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MouseElementTracker, {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MouseElementTracker, {
         transform: props.transform,
         primitives: primitives,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DimensionOverlay, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditOverlay, {
+            disabled: !props.allowEditing,
             transform: props.transform,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolbarOverlay, {
-                elements: props.elements,
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorOverlay, {
-                    transform: props.transform,
+            soup: props.elements,
+            cancelPanDrag: props.cancelPanDrag,
+            onCreateEditEvent: props.onCreateEditEvent,
+            onModifyEditEvent: props.onModifyEditEvent,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DimensionOverlay, {
+                transform: props.transform,
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToolbarOverlay, {
                     elements: props.elements,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPrimitiveRenderer, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorOverlay, {
                         transform: props.transform,
-                        primitives: primitives,
-                        width: props.width,
-                        height: props.height,
-                        grid: props.grid
+                        elements: props.elements,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CanvasPrimitiveRenderer, {
+                            transform: props.transform,
+                            primitives: primitives,
+                            width: props.width,
+                            height: props.height,
+                            grid: props.grid
+                        })
                     })
                 })
             })
@@ -2370,11 +2603,11 @@ var import_use_mouse_matrix_transform = __toESM(require_dist());
 var noop = function noop() {};
 var isBrowser = typeof window !== "undefined";
 // node_modules/react-use/esm/useIsomorphicLayoutEffect.js
-var import_react12 = require("react");
-var useIsomorphicLayoutEffect = isBrowser ? import_react12.useLayoutEffect : import_react12.useEffect;
+var import_react13 = require("react");
+var useIsomorphicLayoutEffect = isBrowser ? import_react13.useLayoutEffect : import_react13.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 // node_modules/react-use/esm/useMeasure.js
-var import_react13 = require("react");
+var import_react14 = require("react");
 var defaultState = {
     x: 0,
     y: 0,
@@ -2386,9 +2619,9 @@ var defaultState = {
     right: 0
 };
 function useMeasure() {
-    var _a = (0, import_react13.useState)(null), element = _a[0], ref = _a[1];
-    var _b = (0, import_react13.useState)(defaultState), rect = _b[0], setRect = _b[1];
-    var observer = (0, import_react13.useMemo)(function() {
+    var _a = (0, import_react14.useState)(null), element = _a[0], ref = _a[1];
+    var _b = (0, import_react14.useState)(defaultState), rect = _b[0], setRect = _b[1];
+    var observer = (0, import_react14.useMemo)(function() {
         return new window.ResizeObserver(function(entries) {
             if (entries[0]) {
                 var _a2 = entries[0].contentRect, x = _a2.x, y = _a2.y, width = _a2.width, height = _a2.height, top_1 = _a2.top, left = _a2.left, bottom = _a2.bottom, right = _a2.right;
@@ -2426,20 +2659,56 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
     ];
 };
 // src/PCBViewer.tsx
-var import_transformation_matrix5 = require("transformation-matrix");
-var import_builder4 = require("@tscircuit/builder");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var defaultTransform = (0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(400, 300), (0, import_transformation_matrix5.scale)(40, -40));
+var import_transformation_matrix7 = require("transformation-matrix");
+var import_builder5 = require("@tscircuit/builder");
+// src/lib/apply-edit-events.ts
+var import_builder3 = require("@tscircuit/builder");
+var import_transformation_matrix6 = require("transformation-matrix");
+var applyEditEvents = function(soup, edit_events) {
+    soup = JSON.parse(JSON.stringify(soup));
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        var _loop = function() {
+            var edit_event = _step.value;
+            if (edit_event.pcb_edit_event_type === "edit_component_location") {
+                var mat = (0, import_transformation_matrix6.translate)(edit_event.new_center.x - edit_event.original_center.x, edit_event.new_center.y - edit_event.original_center.y);
+                soup = soup.map(function(e) {
+                    return e.pcb_component_id !== edit_event.pcb_component_id ? e : (0, import_builder3.transformPCBElement)(e, mat);
+                });
+            }
+        };
+        for(var _iterator = edit_events[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return soup;
+};
+// src/PCBViewer.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var defaultTransform = (0, import_transformation_matrix7.compose)((0, import_transformation_matrix7.translate)(400, 300), (0, import_transformation_matrix7.scale)(40, -40));
 var PCBViewer = function(param) {
-    var children = param.children, soup = param.soup, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height;
-    var _ref = _sliced_to_array((0, import_react14.useState)([]), 2), stateElements = _ref[0], setStateElements = _ref[1];
+    var children = param.children, soup = param.soup, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, _param_allowEditing = param.allowEditing, allowEditing = _param_allowEditing === void 0 ? true : _param_allowEditing, editEventsProp = param.editEvents, onEditEventsChanged = param.onEditEventsChanged;
+    var _ref = _sliced_to_array((0, import_react15.useState)([]), 2), stateElements = _ref[0], setStateElements = _ref[1];
     var _useMeasure_default = _sliced_to_array(useMeasure_default(), 2), ref = _useMeasure_default[0], refDimensions = _useMeasure_default[1];
-    var _ref1 = _sliced_to_array((0, import_react14.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
+    var _ref1 = _sliced_to_array((0, import_react15.useState)(defaultTransform), 2), transform = _ref1[0], setTransformInternal = _ref1[1];
     var _ref2 = (0, import_use_mouse_matrix_transform.default)({
         transform: transform,
         onSetTransform: setTransformInternal
-    }), transformRef = _ref2.ref, setTransform = _ref2.setTransform;
-    var _ref3 = _sliced_to_array((0, import_react14.useState)(null), 2), error = _ref3[0], setError = _ref3[1];
+    }), transformRef = _ref2.ref, setTransform = _ref2.setTransform, cancelPanDrag = _ref2.cancelDrag;
+    var _ref3 = _sliced_to_array((0, import_react15.useState)([]), 2), editEvents = _ref3[0], setEditEvents = _ref3[1];
+    editEvents = editEventsProp !== null && editEventsProp !== void 0 ? editEventsProp : editEvents;
+    var _ref4 = _sliced_to_array((0, import_react15.useState)(null), 2), error = _ref4[0], setError = _ref4[1];
     var resetTransform = function() {
         var elmBounds = (refDimensions === null || refDimensions === void 0 ? void 0 : refDimensions.width) > 0 ? refDimensions : {
             width: 500,
@@ -2447,7 +2716,7 @@ var PCBViewer = function(param) {
         };
         var _ref = elements.some(function(e) {
             return e.type.startsWith("pcb_");
-        }) ? (0, import_builder4.findBoundsAndCenter)(elements.filter(function(e) {
+        }) ? (0, import_builder5.findBoundsAndCenter)(elements.filter(function(e) {
             return e.type.startsWith("pcb_");
         })) : {
             center: {
@@ -2460,10 +2729,10 @@ var PCBViewer = function(param) {
         var _elmBounds_width, _elmBounds_height;
         var scaleFactor = Math.min(((_elmBounds_width = elmBounds.width) !== null && _elmBounds_width !== void 0 ? _elmBounds_width : 0) / width, ((_elmBounds_height = elmBounds.height) !== null && _elmBounds_height !== void 0 ? _elmBounds_height : 0) / height2, 100);
         var _elmBounds_width1, _elmBounds_height1;
-        setTransform((0, import_transformation_matrix5.compose)((0, import_transformation_matrix5.translate)(((_elmBounds_width1 = elmBounds.width) !== null && _elmBounds_width1 !== void 0 ? _elmBounds_width1 : 0) / 2, ((_elmBounds_height1 = elmBounds.height) !== null && _elmBounds_height1 !== void 0 ? _elmBounds_height1 : 0) / 2), // translate(100, 0),
-        (0, import_transformation_matrix5.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix5.translate)(-center.x, -center.y)));
+        setTransform((0, import_transformation_matrix7.compose)((0, import_transformation_matrix7.translate)(((_elmBounds_width1 = elmBounds.width) !== null && _elmBounds_width1 !== void 0 ? _elmBounds_width1 : 0) / 2, ((_elmBounds_height1 = elmBounds.height) !== null && _elmBounds_height1 !== void 0 ? _elmBounds_height1 : 0) / 2), // translate(100, 0),
+        (0, import_transformation_matrix7.scale)(scaleFactor, -scaleFactor, 0, 0), (0, import_transformation_matrix7.translate)(-center.x, -center.y)));
     };
-    (0, import_react14.useEffect)(function() {
+    (0, import_react15.useEffect)(function() {
         var doRender = function doRender() {
             return _doRender.apply(this, arguments);
         };
@@ -2474,7 +2743,7 @@ var PCBViewer = function(param) {
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
-                            projectBuilder = (0, import_builder3.createProjectBuilder)();
+                            projectBuilder = (0, import_builder4.createProjectBuilder)();
                             return [
                                 4,
                                 (0, import_react_fiber.createRoot)().render(children, projectBuilder).then(function(elements2) {
@@ -2499,7 +2768,7 @@ var PCBViewer = function(param) {
     }, [
         children
     ]);
-    (0, import_react14.useEffect)(function() {
+    (0, import_react15.useEffect)(function() {
         if (refDimensions && refDimensions.width !== 0 && (children || soup)) {
             resetTransform();
         }
@@ -2507,7 +2776,7 @@ var PCBViewer = function(param) {
         children,
         refDimensions
     ]);
-    if (error) return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+    if (error) return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", {
         style: {
             color: "red"
         },
@@ -2517,16 +2786,43 @@ var PCBViewer = function(param) {
             " "
         ]
     });
-    var elements = soup !== null && soup !== void 0 ? soup : stateElements;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+    var pcbElmsPreEdit = (soup !== null && soup !== void 0 ? soup : stateElements).filter(function(e) {
+        return e.type.startsWith("pcb_") || e.type.startsWith("source_");
+    });
+    var elements = (0, import_react15.useMemo)(function() {
+        return applyEditEvents(pcbElmsPreEdit, editEvents);
+    }, [
+        pcbElmsPreEdit,
+        editEvents
+    ]);
+    var onCreateEditEvent = function(event) {
+        setEditEvents(_to_consumable_array(editEvents).concat([
+            event
+        ]));
+        onEditEventsChanged === null || onEditEventsChanged === void 0 ? void 0 : onEditEventsChanged(_to_consumable_array(editEvents).concat([
+            event
+        ]));
+    };
+    var onModifyEditEvent = function(modifiedEvent) {
+        var newEditEvents = editEvents.map(function(e) {
+            return e.edit_event_id === modifiedEvent.edit_event_id ? _object_spread({}, e, modifiedEvent) : e;
+        });
+        setEditEvents(newEditEvents);
+        onEditEventsChanged === null || onEditEventsChanged === void 0 ? void 0 : onEditEventsChanged(newEditEvents);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
         ref: transformRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
             ref: ref,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ContextProviders, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CanvasElementsRenderer, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ContextProviders, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CanvasElementsRenderer, {
                     transform: transform,
                     height: height,
                     width: refDimensions.width,
+                    allowEditing: allowEditing,
+                    cancelPanDrag: cancelPanDrag,
+                    onCreateEditEvent: onCreateEditEvent,
+                    onModifyEditEvent: onModifyEditEvent,
                     grid: {
                         spacing: 1,
                         view_window: {
@@ -2536,9 +2832,7 @@ var PCBViewer = function(param) {
                             bottom: 0
                         }
                     },
-                    elements: elements.filter(function(elm) {
-                        return elm.type.startsWith("pcb_") || elm.type.startsWith("source_");
-                    })
+                    elements: elements
                 }, refDimensions.width)
             })
         })