pmx-canvas 0.1.0

package/src/client/canvas/snap-guides.ts

@@ -0,0 +1,170 @@
+import { signal } from '@preact/signals';
+import type { CanvasNodeState } from '../types';
+
+const SNAP_PX = 8;
+
+export interface GuideLine {
+  axis: 'x' | 'y';
+  pos: number;
+  from: number;
+  to: number;
+}
+
+export interface SnapResult {
+  x: number;
+  y: number;
+  guides: GuideLine[];
+}
+
+/** Active guide lines to render. Null when not dragging. */
+export const activeGuides = signal<GuideLine[] | null>(null);
+
+interface RefEdgeX { val: number; minY: number; maxY: number }
+interface RefEdgeY { val: number; minX: number; maxX: number }
+
+/** Cached reference edges — built once at drag-start, reused on every pointermove. */
+let cachedRefX: RefEdgeX[] = [];
+let cachedRefY: RefEdgeY[] = [];
+let cachedDragId: string | null = null;
+
+function getParentGroupId(node: CanvasNodeState | undefined): string | null {
+  const parentGroup = node?.data.parentGroup;
+  return typeof parentGroup === 'string' && parentGroup.length > 0 ? parentGroup : null;
+}
+
+function getChildIds(node: CanvasNodeState | undefined): string[] {
+  if (!node || !Array.isArray(node.data.children)) return [];
+  return node.data.children.filter((childId): childId is string => typeof childId === 'string');
+}
+
+function collectExcludedReferenceIds(
+  dragId: string,
+  allNodes: CanvasNodeState[],
+): Set<string> {
+  const nodeMap = new Map(allNodes.map((node) => [node.id, node]));
+  const excluded = new Set<string>([dragId]);
+  const dragNode = nodeMap.get(dragId);
+  if (!dragNode) return excluded;
+
+  let parentGroupId = getParentGroupId(dragNode);
+  while (parentGroupId && !excluded.has(parentGroupId)) {
+    excluded.add(parentGroupId);
+    parentGroupId = getParentGroupId(nodeMap.get(parentGroupId));
+  }
+
+  if (dragNode.type !== 'group') return excluded;
+
+  const pendingChildIds = [...getChildIds(dragNode)];
+  while (pendingChildIds.length > 0) {
+    const childId = pendingChildIds.pop();
+    if (!childId || excluded.has(childId)) continue;
+    excluded.add(childId);
+    const child = nodeMap.get(childId);
+    if (child?.type === 'group') {
+      pendingChildIds.push(...getChildIds(child));
+    }
+  }
+
+  return excluded;
+}
+
+/** Call at drag-start to pre-compute reference edges from stationary nodes. */
+export function buildSnapCache(dragId: string, allNodes: Iterable<CanvasNodeState>): void {
+  cachedRefX = [];
+  cachedRefY = [];
+  cachedDragId = dragId;
+  const nodeList = Array.from(allNodes);
+  const excludedIds = collectExcludedReferenceIds(dragId, nodeList);
+  for (const n of nodeList) {
+    if (excludedIds.has(n.id) || n.dockPosition !== null) continue;
+    const l = n.position.x;
+    const r = n.position.x + n.size.width;
+    const cx = n.position.x + n.size.width / 2;
+    const t = n.position.y;
+    const b = n.position.y + n.size.height;
+    const cy = n.position.y + n.size.height / 2;
+
+    cachedRefX.push({ val: l, minY: t, maxY: b });
+    cachedRefX.push({ val: r, minY: t, maxY: b });
+    cachedRefX.push({ val: cx, minY: t, maxY: b });
+
+    cachedRefY.push({ val: t, minX: l, maxX: r });
+    cachedRefY.push({ val: b, minX: l, maxX: r });
+    cachedRefY.push({ val: cy, minX: l, maxX: r });
+  }
+}
+
+/** Call at drag-end to clear the cache. */
+export function clearSnapCache(): void {
+  cachedRefX = [];
+  cachedRefY = [];
+  cachedDragId = null;
+}
+
+/**
+ * Snap a dragging node's proposed position to cached reference edges.
+ * Must call buildSnapCache() before the first call in a drag session.
+ */
+export function snapToGuides(
+  proposedX: number,
+  proposedY: number,
+  nodeW: number,
+  nodeH: number,
+): SnapResult {
+  const dragEdgesX = [proposedX, proposedX + nodeW / 2, proposedX + nodeW];
+  const dragEdgesY = [proposedY, proposedY + nodeH / 2, proposedY + nodeH];
+  const offX = [0, nodeW / 2, nodeW];
+  const offY = [0, nodeH / 2, nodeH];
+
+  let snapX: number | null = null;
+  let bestDx = SNAP_PX + 1;
+  let snapXGuide: GuideLine | null = null;
+
+  for (let i = 0; i < 3; i++) {
+    const dv = dragEdgesX[i];
+    for (const ref of cachedRefX) {
+      const d = Math.abs(dv - ref.val);
+      if (d < bestDx) {
+        bestDx = d;
+        snapX = ref.val - offX[i];
+        snapXGuide = {
+          axis: 'x',
+          pos: ref.val,
+          from: Math.min(ref.minY, proposedY),
+          to: Math.max(ref.maxY, proposedY + nodeH),
+        };
+      }
+    }
+  }
+
+  let snapY: number | null = null;
+  let bestDy = SNAP_PX + 1;
+  let snapYGuide: GuideLine | null = null;
+
+  for (let i = 0; i < 3; i++) {
+    const dv = dragEdgesY[i];
+    for (const ref of cachedRefY) {
+      const d = Math.abs(dv - ref.val);
+      if (d < bestDy) {
+        bestDy = d;
+        snapY = ref.val - offY[i];
+        snapYGuide = {
+          axis: 'y',
+          pos: ref.val,
+          from: Math.min(ref.minX, proposedX),
+          to: Math.max(ref.maxX, proposedX + nodeW),
+        };
+      }
+    }
+  }
+
+  const guides: GuideLine[] = [];
+  if (snapXGuide && bestDx <= SNAP_PX) guides.push(snapXGuide);
+  if (snapYGuide && bestDy <= SNAP_PX) guides.push(snapYGuide);
+
+  return {
+    x: snapX !== null && bestDx <= SNAP_PX ? snapX : proposedX,
+    y: snapY !== null && bestDy <= SNAP_PX ? snapY : proposedY,
+    guides,
+  };
+}

package/src/client/canvas/use-node-drag.ts

@@ -0,0 +1,51 @@
+import type { Signal } from '@preact/signals';
+import { useCallback, useRef } from 'preact/hooks';
+import type { ViewportState } from '../types';
+
+interface NodeDragOptions {
+  nodeId: string;
+  viewport: Signal<ViewportState>;
+  onMove: (id: string, x: number, y: number) => void;
+  onDragEnd: () => void;
+}
+
+/**
+ * Hook for dragging canvas nodes by their title bar.
+ * Converts screen-space pointer delta to canvas-space position delta
+ * (accounting for current viewport scale).
+ */
+export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOptions) {
+  const isDragging = useRef(false);
+  const startPointer = useRef({ x: 0, y: 0 });
+  const startPosition = useRef({ x: 0, y: 0 });
+
+  const handlePointerDown = useCallback(
+    (e: PointerEvent, currentX: number, currentY: number) => {
+      e.stopPropagation();
+      isDragging.current = true;
+      startPointer.current = { x: e.clientX, y: e.clientY };
+      startPosition.current = { x: currentX, y: currentY };
+
+      const onPointerMove = (ev: PointerEvent) => {
+        if (!isDragging.current) return;
+        const scale = viewport.value.scale;
+        const dx = (ev.clientX - startPointer.current.x) / scale;
+        const dy = (ev.clientY - startPointer.current.y) / scale;
+        onMove(nodeId, startPosition.current.x + dx, startPosition.current.y + dy);
+      };
+
+      const onPointerUp = () => {
+        isDragging.current = false;
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        onDragEnd();
+      };
+
+      document.addEventListener('pointermove', onPointerMove);
+      document.addEventListener('pointerup', onPointerUp);
+    },
+    [nodeId, viewport, onMove, onDragEnd],
+  );
+
+  return handlePointerDown;
+}

package/src/client/canvas/use-node-resize.ts

@@ -0,0 +1,59 @@
+import type { Signal } from '@preact/signals';
+import { useCallback, useRef } from 'preact/hooks';
+import type { ViewportState } from '../types';
+
+const MIN_WIDTH = 200;
+const MIN_HEIGHT = 100;
+
+interface NodeResizeOptions {
+  nodeId: string;
+  viewport: Signal<ViewportState>;
+  onResize: (id: string, width: number, height: number) => void;
+  onResizeEnd: () => void;
+}
+
+/**
+ * Hook for resizing canvas nodes via a corner drag handle.
+ * Converts screen-space pointer delta to canvas-space size delta
+ * (accounting for current viewport scale).
+ */
+export function useNodeResize({ nodeId, viewport, onResize, onResizeEnd }: NodeResizeOptions) {
+  const isResizing = useRef(false);
+  const startPointer = useRef({ x: 0, y: 0 });
+  const startSize = useRef({ w: 0, h: 0 });
+
+  const handlePointerDown = useCallback(
+    (e: PointerEvent, currentWidth: number, currentHeight: number) => {
+      e.stopPropagation();
+      e.preventDefault();
+      isResizing.current = true;
+      startPointer.current = { x: e.clientX, y: e.clientY };
+      startSize.current = { w: currentWidth, h: currentHeight };
+
+      const onPointerMove = (ev: PointerEvent) => {
+        if (!isResizing.current) return;
+        const scale = viewport.value.scale;
+        const dw = (ev.clientX - startPointer.current.x) / scale;
+        const dh = (ev.clientY - startPointer.current.y) / scale;
+        onResize(
+          nodeId,
+          Math.max(MIN_WIDTH, startSize.current.w + dw),
+          Math.max(MIN_HEIGHT, startSize.current.h + dh),
+        );
+      };
+
+      const onPointerUp = () => {
+        isResizing.current = false;
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        onResizeEnd();
+      };
+
+      document.addEventListener('pointermove', onPointerMove);
+      document.addEventListener('pointerup', onPointerUp);
+    },
+    [nodeId, viewport, onResize, onResizeEnd],
+  );
+
+  return handlePointerDown;
+}

package/src/client/canvas/use-pan-zoom.ts

@@ -0,0 +1,191 @@
+import type { Signal } from '@preact/signals';
+import { useCallback, useEffect, useRef } from 'preact/hooks';
+import type { ViewportState } from '../types';
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 4;
+const PAN_SPEED = 1;
+
+function clampScale(scale: number): number {
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale));
+}
+
+interface PanZoomOptions {
+  viewport: Signal<ViewportState>;
+  onViewportChange: (v: ViewportState) => void;
+  onViewportCommit: (v: ViewportState) => void;
+}
+
+/**
+ * Hook that wires up pan/zoom interactions on a container element.
+ * - Wheel + Ctrl/Cmd: zoom centered on pointer
+ * - Wheel without modifier: pan
+ * - Pointer drag on background: pan
+ * - Pinch (touch): zoom
+ */
+export function usePanZoom({ viewport, onViewportChange, onViewportCommit }: PanZoomOptions) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isPanning = useRef(false);
+  const lastPointer = useRef({ x: 0, y: 0 });
+  const lastPinchDist = useRef(0);
+  const wheelCommitTimer = useRef<number | null>(null);
+
+  const scheduleViewportCommit = useCallback((next: ViewportState) => {
+    if (wheelCommitTimer.current !== null) {
+      window.clearTimeout(wheelCommitTimer.current);
+    }
+    wheelCommitTimer.current = window.setTimeout(() => {
+      wheelCommitTimer.current = null;
+      onViewportCommit(next);
+    }, 140);
+  }, [onViewportCommit]);
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault();
+      const v = viewport.value;
+
+      if (e.ctrlKey || e.metaKey) {
+        // Zoom centered on pointer
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        const px = e.clientX - rect.left;
+        const py = e.clientY - rect.top;
+
+        const delta = -e.deltaY * 0.002;
+        const newScale = clampScale(v.scale * (1 + delta));
+        const ratio = newScale / v.scale;
+
+        const next = {
+          x: px - ratio * (px - v.x),
+          y: py - ratio * (py - v.y),
+          scale: newScale,
+        };
+        onViewportChange(next);
+        scheduleViewportCommit(next);
+      } else {
+        // Pan
+        const next = {
+          x: v.x - e.deltaX * PAN_SPEED,
+          y: v.y - e.deltaY * PAN_SPEED,
+          scale: v.scale,
+        };
+        onViewportChange(next);
+        scheduleViewportCommit(next);
+      }
+    },
+    [viewport, onViewportChange, scheduleViewportCommit],
+  );
+
+  const handlePointerDown = useCallback((e: PointerEvent) => {
+    // Only pan when clicking the canvas background (not nodes)
+    const container = containerRef.current;
+    if (!container || e.target !== container) return;
+    isPanning.current = true;
+    lastPointer.current = { x: e.clientX, y: e.clientY };
+    container.setPointerCapture(e.pointerId);
+  }, []);
+
+  const handlePointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (!isPanning.current) return;
+      const dx = e.clientX - lastPointer.current.x;
+      const dy = e.clientY - lastPointer.current.y;
+      lastPointer.current = { x: e.clientX, y: e.clientY };
+
+      const v = viewport.value;
+      onViewportChange({ x: v.x + dx, y: v.y + dy, scale: v.scale });
+    },
+    [viewport, onViewportChange],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    if (isPanning.current) {
+      onViewportCommit(viewport.value);
+    }
+    isPanning.current = false;
+  }, [onViewportCommit, viewport]);
+
+  // Touch pinch
+  const handleTouchMove = useCallback(
+    (e: TouchEvent) => {
+      if (e.touches.length !== 2) {
+        lastPinchDist.current = 0;
+        return;
+      }
+      e.preventDefault();
+
+      const t1 = e.touches[0];
+      const t2 = e.touches[1];
+      const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+      const cx = (t1.clientX + t2.clientX) / 2;
+      const cy = (t1.clientY + t2.clientY) / 2;
+
+      if (lastPinchDist.current > 0) {
+        const v = viewport.value;
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        const px = cx - rect.left;
+        const py = cy - rect.top;
+
+        const ratio = dist / lastPinchDist.current;
+        const newScale = clampScale(v.scale * ratio);
+        const scaleRatio = newScale / v.scale;
+
+        const next = {
+          x: px - scaleRatio * (px - v.x),
+          y: py - scaleRatio * (py - v.y),
+          scale: newScale,
+        };
+        onViewportChange(next);
+        scheduleViewportCommit(next);
+      }
+      lastPinchDist.current = dist;
+    },
+    [viewport, onViewportChange, scheduleViewportCommit],
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    if (wheelCommitTimer.current !== null) {
+      window.clearTimeout(wheelCommitTimer.current);
+      wheelCommitTimer.current = null;
+    }
+    onViewportCommit(viewport.value);
+    lastPinchDist.current = 0;
+  }, [onViewportCommit, viewport]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    el.addEventListener('pointerdown', handlePointerDown);
+    el.addEventListener('pointermove', handlePointerMove);
+    el.addEventListener('pointerup', handlePointerUp);
+    el.addEventListener('pointercancel', handlePointerUp);
+    el.addEventListener('touchmove', handleTouchMove, { passive: false });
+    el.addEventListener('touchend', handleTouchEnd);
+
+    return () => {
+      if (wheelCommitTimer.current !== null) {
+        window.clearTimeout(wheelCommitTimer.current);
+      }
+      el.removeEventListener('wheel', handleWheel);
+      el.removeEventListener('pointerdown', handlePointerDown);
+      el.removeEventListener('pointermove', handlePointerMove);
+      el.removeEventListener('pointerup', handlePointerUp);
+      el.removeEventListener('pointercancel', handlePointerUp);
+      el.removeEventListener('touchmove', handleTouchMove);
+      el.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [
+    handleWheel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleTouchMove,
+    handleTouchEnd,
+  ]);
+
+  return containerRef;
+}