@tscircuit/pcb-viewer 1.11.97 → 1.11.99

package/dist/index.d.ts

@@ -29,23 +29,19 @@ type StateProps = {
     [key in keyof State]: State[key] extends boolean ? boolean : never;
 };
 
-type EditEvent = ManualEditEvent;
-
 type Props = {
     circuitJson?: AnyCircuitElement[];
     height?: number;
     allowEditing?: boolean;
-    editEvents?: EditEvent[];
+    editEvents?: ManualEditEvent[];
     initialState?: Partial<StateProps>;
-    onEditEventsChanged?: (editEvents: EditEvent[]) => void;
+    onEditEventsChanged?: (editEvents: ManualEditEvent[]) => void;
     focusOnHover?: boolean;
     clickToInteractEnabled?: boolean;
     debugGraphics?: GraphicsObject | null;
 };
 declare const PCBViewer: ({ circuitJson, debugGraphics, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, focusOnHover, clickToInteractEnabled, }: Props) => react_jsx_runtime.JSX.Element;
 
-declare const applyEditEvents: (soup: AnyCircuitElement[], edit_events: EditEvent[]) => AnyCircuitElement[];
-
 type GridConfig = {
     spacing: number;
     view_window: {
@@ -66,9 +62,9 @@ interface CanvasElementsRendererProps {
     allowEditing: boolean;
     focusOnHover?: boolean;
     cancelPanDrag: () => void;
-    onCreateEditEvent: (event: EditEvent) => void;
-    onModifyEditEvent: (event: Partial<EditEvent>) => void;
+    onCreateEditEvent: (event: ManualEditEvent) => void;
+    onModifyEditEvent: (event: Partial<ManualEditEvent>) => void;
 }
 declare const CanvasElementsRenderer: (props: CanvasElementsRendererProps) => react_jsx_runtime.JSX.Element;
 
-export { CanvasElementsRenderer, type EditEvent, PCBViewer, applyEditEvents };
+export { CanvasElementsRenderer, PCBViewer };

package/dist/index.js

@@ -4,6 +4,9 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/PCBViewer.tsx
+import { applyEditEvents } from "@tscircuit/core";
+
 // node_modules/circuit-json/dist/index.mjs
 var dist_exports = {};
 __export(dist_exports, {
@@ -5578,43 +5581,6 @@ var su = (soup, options = {}) => {
 };
 su.unparsed = su;
 var su_default = su;
-var transformPCBElement = (elm, matrix) => {
-  if (elm.type === "pcb_plated_hole" || elm.type === "pcb_hole" || elm.type === "pcb_via" || elm.type === "pcb_smtpad" || elm.type === "pcb_port") {
-    const { x, y } = applyToPoint(matrix, { x: elm.x, y: elm.y });
-    elm.x = x;
-    elm.y = y;
-  } else if (elm.type === "pcb_keepout" || elm.type === "pcb_board") {
-    elm.center = applyToPoint(matrix, elm.center);
-  } else if (elm.type === "pcb_silkscreen_text" || elm.type === "pcb_fabrication_note_text") {
-    elm.anchor_position = applyToPoint(matrix, elm.anchor_position);
-  } else if (elm.type === "pcb_silkscreen_circle" || elm.type === "pcb_silkscreen_rect" || elm.type === "pcb_component") {
-    elm.center = applyToPoint(matrix, elm.center);
-  } else if (elm.type === "pcb_silkscreen_path" || elm.type === "pcb_trace" || elm.type === "pcb_fabrication_note_path") {
-    elm.route = elm.route.map((rp) => {
-      const tp = applyToPoint(matrix, rp);
-      rp.x = tp.x;
-      rp.y = tp.y;
-      return rp;
-    });
-  } else if (elm.type === "pcb_silkscreen_line") {
-    const p1 = { x: elm.x1, y: elm.y1 };
-    const p2 = { x: elm.x2, y: elm.y2 };
-    const p1t = applyToPoint(matrix, p1);
-    const p2t = applyToPoint(matrix, p2);
-    elm.x1 = p1t.x;
-    elm.y1 = p1t.y;
-    elm.x2 = p2t.x;
-    elm.y2 = p2t.y;
-  } else if (elm.type === "cad_component") {
-    const newPos = applyToPoint(matrix, {
-      x: elm.position.x,
-      y: elm.position.y
-    });
-    elm.position.x = newPos.x;
-    elm.position.y = newPos.y;
-  }
-  return elm;
-};
 function stringHash(str) {
   let hash = 0;
   if (str.length == 0)
@@ -5849,57 +5815,6 @@ var ContextProviders = ({
   return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children });
 };
 
-// src/lib/apply-edit-events.ts
-import { translate } from "transformation-matrix";
-
-// src/lib/apply-edit-events/apply-edit-trace-hint-event.ts
-var applyTraceHintEditEvent = (soup, edit_event) => {
-  const existing_trace_hint = soup.find(
-    (th) => th.type === "pcb_trace_hint" && th.pcb_trace_hint_id === edit_event.pcb_trace_hint_id
-  );
-  if (existing_trace_hint) {
-    soup = soup.map(
-      (e) => e.pcb_trace_hint_id === edit_event.pcb_trace_hint_id ? {
-        ...e,
-        route: edit_event.route
-      } : e
-    );
-  } else {
-    const pcb_port2 = su_default(soup).pcb_port.get(edit_event.pcb_port_id);
-    soup = soup.filter(
-      (e) => !(e.type === "pcb_trace_hint" && e.pcb_port_id === edit_event.pcb_port_id)
-    ).concat([
-      {
-        type: "pcb_trace_hint",
-        pcb_trace_hint_id: edit_event.pcb_trace_hint_id,
-        route: edit_event.route,
-        pcb_port_id: edit_event.pcb_port_id,
-        pcb_component_id: pcb_port2?.pcb_component_id
-      }
-    ]);
-  }
-  return soup;
-};
-
-// src/lib/apply-edit-events.ts
-var applyEditEvents = (soup, edit_events) => {
-  soup = JSON.parse(JSON.stringify(soup));
-  for (const edit_event of edit_events) {
-    if (edit_event.edit_event_type === "edit_pcb_component_location") {
-      const mat = translate(
-        edit_event.new_center.x - edit_event.original_center.x,
-        edit_event.new_center.y - edit_event.original_center.y
-      );
-      soup = soup.map(
-        (e) => e.pcb_component_id !== edit_event.pcb_component_id ? e : transformPCBElement(e, mat)
-      );
-    } else if (edit_event.edit_event_type === "edit_pcb_trace_hint") {
-      soup = applyTraceHintEditEvent(soup, edit_event);
-    }
-  }
-  return soup;
-};
-
 // src/lib/toast.tsx
 import { useEffect } from "react";
 import {
@@ -5980,13 +5895,13 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 };
 
 // src/PCBViewer.tsx
-import { compose as compose4, scale as scale2, translate as translate5 } from "transformation-matrix";
+import { compose as compose4, scale as scale2, translate as translate4 } from "transformation-matrix";
 
-// node_modules/use-mouse-matrix-transform/dist/chunk-5TGSLHOO.js
+// node_modules/use-mouse-matrix-transform/dist/chunk-A3SUJQLF.js
 import {
   identity,
   scale,
-  translate as translate2,
+  translate,
   compose,
   applyToPoint as applyToPoint2
 } from "transformation-matrix";
@@ -6022,6 +5937,9 @@ var useMouseMatrixTransform = (props = {}) => {
   const cancelDrag = useCallback(() => {
     setLastDragCancelTime(Date.now());
   }, []);
+  const gestureModeRef = useRef("none");
+  const lastTouchRef = useRef(null);
+  const pinchDataRef = useRef(null);
   useEffect3(() => {
     const canvasElm = props.canvasElm ?? extRef.current;
     if (canvasElm && !outerCanvasElm) {
@@ -6059,7 +5977,7 @@ var useMouseMatrixTransform = (props = {}) => {
       if (props.shouldDrag && !props.shouldDrag(e))
         return;
       m1 = getMousePos(e);
-      const new_tf = compose(translate2(m1.x - m0.x, m1.y - m0.y), init_tf);
+      const new_tf = compose(translate(m1.x - m0.x, m1.y - m0.y), init_tf);
       setTransform(new_tf);
       init_tf = new_tf;
       md = false;
@@ -6071,7 +5989,7 @@ var useMouseMatrixTransform = (props = {}) => {
       if (props.shouldDrag && !props.shouldDrag(e))
         return;
       m1 = getMousePos(e);
-      setTransform(compose(translate2(m1.x - m0.x, m1.y - m0.y), init_tf));
+      setTransform(compose(translate(m1.x - m0.x, m1.y - m0.y), init_tf));
     }
     function handleMouseWheel(e) {
       if (props.enabled === false)
@@ -6080,9 +5998,9 @@ var useMouseMatrixTransform = (props = {}) => {
         return;
       const center = getMousePos(e);
       const new_tf = compose(
-        translate2(center.x, center.y),
+        translate(center.x, center.y),
         scale(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3),
-        translate2(-center.x, -center.y),
+        translate(-center.x, -center.y),
         init_tf
       );
       setTransform(new_tf);
@@ -6102,23 +6020,101 @@ var useMouseMatrixTransform = (props = {}) => {
       }
       md = false;
       m1 = getMousePos(e);
-      const new_tf = compose(translate2(m1.x - m0.x, m1.y - m0.y), init_tf);
+      const new_tf = compose(translate(m1.x - m0.x, m1.y - m0.y), init_tf);
       setTransform(new_tf);
       init_tf = new_tf;
     }
+    function handleTouchStart(e) {
+      e.preventDefault();
+      if (props.enabled === false)
+        return;
+      if (e.touches.length === 1) {
+        gestureModeRef.current = "drag";
+        const touch = e.touches[0];
+        lastTouchRef.current = { x: touch.clientX, y: touch.clientY };
+      } else if (e.touches.length === 2) {
+        gestureModeRef.current = "pinch";
+        const touch1 = e.touches[0];
+        const touch2 = e.touches[1];
+        const dx = touch2.clientX - touch1.clientX;
+        const dy = touch2.clientY - touch1.clientY;
+        const distance2 = Math.hypot(dx, dy);
+        const midpoint = {
+          x: (touch1.clientX + touch2.clientX) / 2,
+          y: (touch1.clientY + touch2.clientY) / 2
+        };
+        pinchDataRef.current = {
+          initialDistance: distance2,
+          initialMidpoint: midpoint
+        };
+      }
+    }
+    function handleTouchMove(e) {
+      e.preventDefault();
+      if (props.enabled === false)
+        return;
+      if (gestureModeRef.current === "drag" && e.touches.length === 1 && lastTouchRef.current) {
+        const touch = e.touches[0];
+        const deltaX = touch.clientX - lastTouchRef.current.x;
+        const deltaY = touch.clientY - lastTouchRef.current.y;
+        const new_tf = { ...init_tf, e: init_tf.e + deltaX, f: init_tf.f + deltaY };
+        setTransform(new_tf);
+        init_tf = new_tf;
+        lastTouchRef.current = { x: touch.clientX, y: touch.clientY };
+      } else if (gestureModeRef.current === "pinch" && e.touches.length === 2 && pinchDataRef.current) {
+        const touch1 = e.touches[0];
+        const touch2 = e.touches[1];
+        const dx = touch2.clientX - touch1.clientX;
+        const dy = touch2.clientY - touch1.clientY;
+        const newDistance = Math.hypot(dx, dy);
+        const { initialDistance, initialMidpoint } = pinchDataRef.current;
+        const scaleFactor = 1 + (newDistance / initialDistance - 1) * 0.07;
+        const new_tf = compose(
+          translate(initialMidpoint.x, initialMidpoint.y),
+          scale(scaleFactor, scaleFactor),
+          translate(-initialMidpoint.x, -initialMidpoint.y),
+          init_tf
+        );
+        setTransform(new_tf);
+        init_tf = new_tf;
+      }
+    }
+    function handleTouchEnd(e) {
+      e.preventDefault();
+      if (e.touches.length === 0) {
+        gestureModeRef.current = "none";
+        lastTouchRef.current = null;
+        pinchDataRef.current = null;
+      }
+    }
     canvasElm.addEventListener("mousedown", handleMouseDown);
     canvasElm.addEventListener("mouseup", handleMouseUp);
     window.addEventListener("mousemove", handleMouseMove);
     canvasElm.addEventListener("mouseout", handleMouseOut);
     canvasElm.addEventListener("wheel", handleMouseWheel);
+    canvasElm.addEventListener("touchstart", handleTouchStart, { passive: false });
+    canvasElm.addEventListener("touchmove", handleTouchMove, { passive: false });
+    canvasElm.addEventListener("touchend", handleTouchEnd, { passive: false });
+    canvasElm.addEventListener("touchcancel", handleTouchEnd, { passive: false });
     return () => {
       canvasElm.removeEventListener("mousedown", handleMouseDown);
       canvasElm.removeEventListener("mouseup", handleMouseUp);
       window.removeEventListener("mousemove", handleMouseMove);
       canvasElm.removeEventListener("mouseout", handleMouseOut);
       canvasElm.removeEventListener("wheel", handleMouseWheel);
+      canvasElm.removeEventListener("touchstart", handleTouchStart);
+      canvasElm.removeEventListener("touchmove", handleTouchMove);
+      canvasElm.removeEventListener("touchend", handleTouchEnd);
+      canvasElm.removeEventListener("touchcancel", handleTouchEnd);
     };
-  }, [outerCanvasElm, waitCounter, extChangeCounter, lastDragCancelTime, props.enabled, props.shouldDrag]);
+  }, [
+    outerCanvasElm,
+    waitCounter,
+    extChangeCounter,
+    lastDragCancelTime,
+    props.enabled,
+    props.shouldDrag
+  ]);
   const applyTransformToPoint = useCallback(
     (obj) => applyToPoint2(transform, obj),
     [transform]
@@ -6766,7 +6762,7 @@ import {
   compose as compose2,
   identity as identity2,
   inverse,
-  translate as translate3
+  translate as translate2
 } from "transformation-matrix";
 
 // src/lib/colors.ts
@@ -7079,7 +7075,7 @@ var Drawer = class {
     );
     this.transform = identity2();
     this.transform.d *= -1;
-    this.transform = compose2(this.transform, translate3(0, -500));
+    this.transform = compose2(this.transform, translate2(0, -500));
     this.lastPoint = { x: 0, y: 0 };
     this.equip({});
   }
@@ -7336,16 +7332,16 @@ var Drawer = class {
 };
 
 // src/lib/util/rotate-text.ts
-import { compose as compose3, translate as translate4, rotate, applyToPoint as applyToPoint4 } from "transformation-matrix";
+import { compose as compose3, translate as translate3, rotate, applyToPoint as applyToPoint4 } from "transformation-matrix";
 function rotateText(rotateTextParams) {
   const { lines, anchorPoint, ccwRotation } = rotateTextParams;
   if (!ccwRotation) return lines;
   const rad = ccwRotation * Math.PI / 180;
   const rotationMatrix = rotate(rad);
   const transform = compose3(
-    translate4(anchorPoint.x, anchorPoint.y),
+    translate3(anchorPoint.x, anchorPoint.y),
     rotationMatrix,
-    translate4(-anchorPoint.x, -anchorPoint.y)
+    translate3(-anchorPoint.x, -anchorPoint.y)
   );
   applyToPoint4(transform, anchorPoint);
   return lines.map((line) => ({
@@ -8042,7 +8038,7 @@ var EditPlacementOverlay = ({
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        if (isNaN(x) || isNaN(y)) return;
+        if (Number.isNaN(x) || Number.isNaN(y)) return;
         const rwMousePoint = applyToPoint6(inverse3(transform), { x, y });
         let foundActiveComponent = false;
         for (const e2 of soup) {
@@ -8084,7 +8080,7 @@ var EditPlacementOverlay = ({
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        if (isNaN(x) || isNaN(y)) return;
+        if (Number.isNaN(x) || Number.isNaN(y)) return;
         const rwMousePoint = applyToPoint6(inverse3(transform), { x, y });
         setDragState({
           ...dragState,
@@ -9184,7 +9180,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.96",
+  version: "1.11.98",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -9210,7 +9206,7 @@ var package_default = {
     "@storybook/nextjs": "^8.0.6",
     "@storybook/react": "^8.0.6",
     "@swc/core": "^1.4.12",
-    "@tscircuit/core": "0.0.367",
+    "@tscircuit/core": "0.0.370",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
     "@tscircuit/props": "^0.0.171",
     "@tscircuit/soup-util": "^0.0.41",
@@ -9733,7 +9729,7 @@ var CanvasElementsRenderer = (props) => {
 
 // src/PCBViewer.tsx
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var defaultTransform = compose4(translate5(400, 300), scale2(40, -40));
+var defaultTransform = compose4(translate4(400, 300), scale2(40, -40));
 var PCBViewer = ({
   circuitJson,
   debugGraphics,
@@ -9776,9 +9772,9 @@ var PCBViewer = ({
       100
     ) * 0.75;
     const targetTransform = compose4(
-      translate5((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+      translate4((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
       scale2(scaleFactor, -scaleFactor, 0, 0),
-      translate5(-center.x, -center.y)
+      translate4(-center.x, -center.y)
     );
     setTransform(targetTransform);
     return;
@@ -9798,7 +9794,10 @@ var PCBViewer = ({
     ) ?? [];
   }, [circuitJsonKey]);
   const elements = useMemo6(() => {
-    return applyEditEvents(pcbElmsPreEdit, editEvents);
+    return applyEditEvents({
+      circuitJson: pcbElmsPreEdit,
+      editEvents
+    });
   }, [pcbElmsPreEdit, editEvents]);
   const onCreateEditEvent = (event) => {
     setEditEvents([...editEvents, event]);
@@ -9876,7 +9875,6 @@ var PCBViewer = ({
 };
 export {
   CanvasElementsRenderer,
-  PCBViewer,
-  applyEditEvents
+  PCBViewer
 };
 //# sourceMappingURL=index.js.map