@growgroup/visual-editor 0.1.0

package/src/editor/hooks/useInfiniteCanvas.ts

@@ -0,0 +1,301 @@
+'use client';
+
+/**
+ * useInfiniteCanvas
+ *
+ * 無限キャンバスのズーム/パン操作を管理するhook
+ * - ホイールズーム (Ctrl/Cmd + wheel)
+ * - ホイールパン (wheel without modifier)
+ * - ピンチジェスチャー (trackpad pinch)
+ * - スペース+ドラッグパン
+ * - Ctrl/Cmd+0 でフィットズーム
+ */
+
+import { useEffect, useRef, type RefObject } from 'react';
+import { useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+
+const MIN_ZOOM = 0.02;
+const MAX_ZOOM = 2.0;
+
+export function useInfiniteCanvas(
+  containerRef: RefObject<HTMLDivElement | null>
+) {
+  const canvas = useMultiPageCanvasOptional();
+  const isSpaceHeldRef = useRef(false);
+  const isPanningRef = useRef(false);
+  const lastPanPosRef = useRef({ x: 0, y: 0 });
+
+  // Stale closure回避: 頻繁に変わる値はrefで保持
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
+
+  // ホイールイベント: ズームとパン（refベースで effect churn を回避）
+  useEffect(() => {
+    if (!canvas?.isEnabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+
+      const c = canvasRef.current;
+      if (!c) return;
+      const { canvasOffset, canvasZoom } = c.viewState;
+
+      // ピンチジェスチャー（ctrlKey=trueになる）またはCtrl+Wheelでズーム
+      if (e.ctrlKey || e.metaKey) {
+        const rect = container.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+
+        // ズーム感度調整
+        const delta = -e.deltaY;
+        const factor = delta > 0 ? 1.05 : 0.95;
+        const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, canvasZoom * factor));
+
+        // マウス位置を中心にズーム
+        const newOffset = {
+          x: mouseX - (mouseX - canvasOffset.x) * (newZoom / canvasZoom),
+          y: mouseY - (mouseY - canvasOffset.y) * (newZoom / canvasZoom),
+        };
+
+        c.setCanvasZoom(newZoom);
+        c.setCanvasOffset(newOffset);
+      } else {
+        // 通常ホイール: パン
+        c.setCanvasOffset({
+          x: canvasOffset.x - e.deltaX,
+          y: canvasOffset.y - e.deltaY,
+        });
+      }
+    };
+
+    const preventNativeZoom = (e: WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+      }
+    };
+    
+    // イベントがどこから来てもブラウザズームをルートで殺す
+    window.addEventListener('wheel', preventNativeZoom, { passive: false, capture: true });
+    document.addEventListener('wheel', preventNativeZoom, { passive: false, capture: true });
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    
+    return () => {
+      window.removeEventListener('wheel', preventNativeZoom, { capture: true });
+      document.removeEventListener('wheel', preventNativeZoom, { capture: true });
+      container.removeEventListener('wheel', handleWheel);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvas?.isEnabled, containerRef]);
+
+  // スペースキーでパンモード
+  useEffect(() => {
+    if (!canvas?.isEnabled) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === 'Space' && !e.repeat) {
+        e.preventDefault();
+        isSpaceHeldRef.current = true;
+        const container = containerRef.current;
+        if (container) {
+          container.style.cursor = 'grab';
+        }
+      }
+
+      const c = canvasRef.current;
+      if (!c) return;
+
+      // Ctrl/Cmd + 0: フィットズーム
+      if ((e.ctrlKey || e.metaKey) && e.key === '0') {
+        e.preventDefault();
+        const container = containerRef.current;
+        if (container) {
+          const rect = container.getBoundingClientRect();
+          c.zoomToFit(rect.width, rect.height);
+        }
+      }
+
+      // Ctrl/Cmd + +: ズームイン
+      if ((e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '=')) {
+        e.preventDefault();
+        c.zoomIn();
+      }
+
+      // Ctrl/Cmd + -: ズームアウト
+      if ((e.ctrlKey || e.metaKey) && e.key === '-') {
+        e.preventDefault();
+        c.zoomOut();
+      }
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        isSpaceHeldRef.current = false;
+        isPanningRef.current = false;
+        const container = containerRef.current;
+        if (container) {
+          container.style.cursor = '';
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvas?.isEnabled, containerRef]);
+
+  // スペース+マウスドラッグでパン
+  useEffect(() => {
+    if (!canvas?.isEnabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      // スペース押下中 or 中クリック
+      if (isSpaceHeldRef.current || e.button === 1) {
+        e.preventDefault();
+        isPanningRef.current = true;
+        lastPanPosRef.current = { x: e.clientX, y: e.clientY };
+        container.style.cursor = 'grabbing';
+      }
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isPanningRef.current) return;
+      e.preventDefault();
+
+      const dx = e.clientX - lastPanPosRef.current.x;
+      const dy = e.clientY - lastPanPosRef.current.y;
+      lastPanPosRef.current = { x: e.clientX, y: e.clientY };
+
+      const c = canvasRef.current;
+      if (!c) return;
+      const { canvasOffset } = c.viewState;
+      c.setCanvasOffset({
+        x: canvasOffset.x + dx,
+        y: canvasOffset.y + dy,
+      });
+    };
+
+    const handleMouseUp = () => {
+      if (isPanningRef.current) {
+        isPanningRef.current = false;
+        container.style.cursor = isSpaceHeldRef.current ? 'grab' : '';
+      }
+    };
+
+    container.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      container.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvas?.isEnabled, containerRef]);
+
+  // タッチパン（モバイル対応）
+  useEffect(() => {
+    if (!canvas?.isEnabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    let lastTouchPos: { x: number; y: number } | null = null;
+    let initialPinchDistance: number | null = null;
+    let initialPinchZoom: number | null = null;
+
+    const getCenter = (t1: Touch, t2: Touch) => ({
+      x: (t1.clientX + t2.clientX) / 2,
+      y: (t1.clientY + t2.clientY) / 2,
+    });
+
+    const getDistance = (t1: Touch, t2: Touch) =>
+      Math.sqrt((t2.clientX - t1.clientX) ** 2 + (t2.clientY - t1.clientY) ** 2);
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (e.touches.length === 1) {
+        lastTouchPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+      } else if (e.touches.length === 2) {
+        e.preventDefault();
+        const c = canvasRef.current;
+        initialPinchDistance = getDistance(e.touches[0], e.touches[1]);
+        initialPinchZoom = c?.viewState.canvasZoom ?? 0.15;
+        lastTouchPos = null;
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      const c = canvasRef.current;
+      if (!c) return;
+
+      if (e.touches.length === 1 && lastTouchPos) {
+        // 1本指パン
+        const dx = e.touches[0].clientX - lastTouchPos.x;
+        const dy = e.touches[0].clientY - lastTouchPos.y;
+        lastTouchPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+
+        const { canvasOffset } = c.viewState;
+        c.setCanvasOffset({
+          x: canvasOffset.x + dx,
+          y: canvasOffset.y + dy,
+        });
+      } else if (e.touches.length === 2 && initialPinchDistance != null && initialPinchZoom != null) {
+        e.preventDefault();
+        // ピンチズーム
+        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+        const scale = currentDistance / initialPinchDistance;
+        const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, initialPinchZoom * scale));
+
+        const rect = container.getBoundingClientRect();
+        const center = getCenter(e.touches[0], e.touches[1]);
+        const mouseX = center.x - rect.left;
+        const mouseY = center.y - rect.top;
+
+        const { canvasOffset, canvasZoom } = c.viewState;
+        const newOffset = {
+          x: mouseX - (mouseX - canvasOffset.x) * (newZoom / canvasZoom),
+          y: mouseY - (mouseY - canvasOffset.y) * (newZoom / canvasZoom),
+        };
+
+        c.setCanvasZoom(newZoom);
+        c.setCanvasOffset(newOffset);
+      }
+    };
+
+    const handleTouchEnd = () => {
+      lastTouchPos = null;
+      initialPinchDistance = null;
+      initialPinchZoom = null;
+    };
+
+    const preventNativeTouchZoom = (e: TouchEvent) => {
+      if (e.touches && e.touches.length >= 2) {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('touchstart', preventNativeTouchZoom, { passive: false, capture: true });
+    window.addEventListener('touchmove', preventNativeTouchZoom, { passive: false, capture: true });
+    document.addEventListener('touchstart', preventNativeTouchZoom, { passive: false, capture: true });
+    document.addEventListener('touchmove', preventNativeTouchZoom, { passive: false, capture: true });
+
+    container.addEventListener('touchstart', handleTouchStart, { passive: false });
+    container.addEventListener('touchmove', handleTouchMove, { passive: false });
+    container.addEventListener('touchend', handleTouchEnd);
+    return () => {
+      window.removeEventListener('touchstart', preventNativeTouchZoom, { capture: true });
+      window.removeEventListener('touchmove', preventNativeTouchZoom, { capture: true });
+      document.removeEventListener('touchstart', preventNativeTouchZoom, { capture: true });
+      document.removeEventListener('touchmove', preventNativeTouchZoom, { capture: true });
+      container.removeEventListener('touchstart', handleTouchStart);
+      container.removeEventListener('touchmove', handleTouchMove);
+      container.removeEventListener('touchend', handleTouchEnd);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvas?.isEnabled, containerRef]);
+}

package/src/editor/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,205 @@
+/**
+ * キャンバス(iframe)側のキーボード関連ユーティリティ
+ *
+ * [移植時の修正]
+ * このフックは以前 iframeDoc に独自の keydown ハンドラを張り、
+ * ツール切替 / Cmd+A / Cmd+G / Undo / Copy / Delete / Duplicate を
+ * 自前の if 羅列で判定していた。同じキーを親 window 側でも見ていたため、
+ *  - Cmd+D で複製が2個できる（親フォーカス時に二重発火）
+ *  - Cmd+A や矢印キーはフォーカス位置によって効いたり効かなかったりする
+ * という状態だった。
+ *
+ * キー判定は KEYBOARD_SHORTCUTS を読む唯一のディスパッチャ
+ * （src/hooks/useEditorShortcuts.ts）に集約し、ここには
+ * ディスパッチャから呼ばれる「キャンバス側の実処理」だけを残している。
+ * postMessage（SHORTCUT_COPY 等）による親への迂回も廃止した。
+ */
+
+import { useCallback } from 'react';
+import { refreshSelectionOverlay } from '../utils/dom-utils';
+
+interface UseKeyboardShortcutsOptions {
+  /** グループ化関数 */
+  groupElements?: () => void;
+  /** グループ解除関数 */
+  ungroupElements?: () => void;
+  /** スタイルコピー関数 */
+  copyStyle?: () => boolean;
+  /** スタイルペースト関数 */
+  pasteStyle?: () => boolean;
+  /** Figma形式でコピー関数 */
+  copyToFigma?: () => Promise<{ success: boolean; error?: string; nodeCount?: number }>;
+}
+
+interface UseKeyboardShortcutsReturn {
+  /**
+   * 以前は iframe に keydown を張っていた。
+   * 現在はディスパッチャ側が iframe document にも直接張るため、ここでは何もしない。
+   * （EditorCanvas 側の呼び出し構造を変えずに済むよう、空のクリーンアップを返す）
+   */
+  setupKeyboardShortcuts: (iframeDoc: Document) => () => void;
+}
+
+/**
+ * ドラッグ中断関数(useDragResize の cancelDrag)への参照レジストリ。
+ *
+ * ドラッグ状態は EditorCanvas 内の ref が持っているため、
+ * 別コンポーネントにあるキーボードディスパッチャからは直接呼べない。
+ * EditorRefsContext の globalStyleClipboardRef と同じ「モジュールレベルのref」方式で橋渡しする。
+ */
+export const editorCancelDragRef: {
+  current: ((iframeDoc?: Document | null) => boolean) | null;
+} = { current: null };
+
+/**
+ * Cmd/Ctrl + A の実処理。
+ *
+ * - 何か選択されていれば「その要素の兄弟をすべて選択」
+ * - 何も選択されていなければ「紙面直下のトップレベル要素をすべて選択」
+ *   （以前は無選択だと無反応で、既定フォーカスでは Cmd+A が完全に死んでいた）
+ *
+ * @returns 選択した要素のID配列
+ */
+export function selectAllSiblingsIn(
+  iframeDoc: Document,
+  currentIds: string[]
+): { ids: string[]; elements: HTMLElement[] } {
+  const artboard = iframeDoc.getElementById('artboard');
+
+  // 起点となる親を決める
+  let parent: HTMLElement | null = null;
+  if (currentIds.length > 0) {
+    const first = iframeDoc.querySelector<HTMLElement>(
+      `[data-element-id="${currentIds[0]}"]`
+    );
+    parent = first?.parentElement ?? null;
+  }
+  // 無選択時は「紙面のトップレベル要素」を全部選ぶ。
+  // artboard 直下は data-editable でないラッパー div のことがあるため、
+  // 「編集可能な祖先を持たない data-editable 要素」を最上位とみなす。
+  let siblings: HTMLElement[];
+  if (parent) {
+    siblings = Array.from(parent.children).filter(
+      (child) => child.getAttribute('data-editable') === 'true'
+    ) as HTMLElement[];
+  } else {
+    if (!artboard) return { ids: [], elements: [] };
+    siblings = Array.from(
+      artboard.querySelectorAll<HTMLElement>('[data-editable="true"]')
+    ).filter((el) => {
+      const ancestor = el.parentElement?.closest('[data-editable="true"]');
+      return !ancestor || !artboard.contains(ancestor);
+    });
+  }
+  if (siblings.length === 0) return { ids: [], elements: [] };
+
+  iframeDoc.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
+  iframeDoc.querySelectorAll('.selection-box').forEach((box) => box.remove());
+
+  const ids: string[] = [];
+  siblings.forEach((el) => {
+    const id = el.getAttribute('data-element-id');
+    if (id) {
+      ids.push(id);
+      el.classList.add('selected');
+    }
+  });
+
+  // 枠は選択セット全体から作り直す（複数選択時は群バウンディングボックスも描かれる）
+  refreshSelectionOverlay(iframeDoc);
+
+  return { ids, elements: siblings };
+}
+
+/**
+ * Tab / Shift+Tab の実処理。兄弟要素を順に1つずつ選び直す(Figma準拠)。
+ *
+ * - 選択中なら その要素の兄弟(編集可能なもの)を並び順に1つ進む/戻る。端は巻き戻る
+ * - 無選択なら 紙面のトップレベル要素の先頭(Shift+Tabなら末尾)を選ぶ
+ * - 複数選択中は先頭の要素を起点にして単独選択へ畳む(Figmaと同じ)
+ *
+ * 兄弟の集合は Cmd+A と同じ規則(selectAllSiblingsIn)で数える。
+ * 別々の規則で数えると「Cmd+Aで6個選ばれるのにTabは4個しか巡らない」がすぐ起きるため。
+ *
+ * @returns 選択した要素(選べなければ null)
+ */
+export function selectSiblingIn(
+  iframeDoc: Document,
+  currentIds: string[],
+  direction: 1 | -1
+): HTMLElement | null {
+  const artboard = iframeDoc.getElementById('artboard');
+  if (!artboard) return null;
+
+  const current = currentIds.length
+    ? iframeDoc.querySelector<HTMLElement>(`[data-element-id="${currentIds[0]}"]`)
+    : null;
+
+  // 巡回する集合。選択中はその兄弟、無選択なら紙面のトップレベル
+  let siblings: HTMLElement[];
+  const parent = current?.parentElement ?? null;
+  if (parent) {
+    siblings = Array.from(parent.children).filter(
+      (child): child is HTMLElement =>
+        child.getAttribute('data-editable') === 'true' &&
+        !!child.getAttribute('data-element-id')
+    );
+  } else {
+    siblings = Array.from(
+      artboard.querySelectorAll<HTMLElement>('[data-editable="true"][data-element-id]')
+    ).filter((el) => {
+      const ancestor = el.parentElement?.closest('[data-editable="true"]');
+      return !ancestor || !artboard.contains(ancestor);
+    });
+  }
+  if (siblings.length === 0) return null;
+
+  const index = current ? siblings.indexOf(current) : -1;
+  // 無選択(index=-1)からは Tab で先頭、Shift+Tab で末尾に入る
+  const next =
+    index === -1
+      ? siblings[direction === 1 ? 0 : siblings.length - 1]
+      : siblings[(index + direction + siblings.length) % siblings.length];
+  if (!next) return null;
+
+  iframeDoc.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
+  iframeDoc.querySelectorAll('.selection-box').forEach((box) => box.remove());
+  next.classList.add('selected');
+  refreshSelectionOverlay(iframeDoc);
+  return next;
+}
+
+/**
+ * iframe 内で編集中のテキストを確定して抜ける
+ */
+export function exitTextEditingIn(iframeDoc: Document): boolean {
+  const editingElements = iframeDoc.querySelectorAll('[contenteditable="true"]');
+  if (editingElements.length === 0) return false;
+
+  editingElements.forEach((el) => {
+    el.removeAttribute('contenteditable');
+    el.classList.remove('editing');
+  });
+
+  const selection = iframeDoc.getSelection();
+  if (selection) selection.removeAllRanges();
+
+  // 選択ボックスを再表示（1要素ずつ作り直すと他の枠を巻き込んで壊すため全体を再構築）
+  refreshSelectionOverlay(iframeDoc);
+  return true;
+}
+
+/**
+ * キャンバス側キーボード処理フック（現在はリスナーを張らない）
+ */
+export function useKeyboardShortcuts(
+  _options: UseKeyboardShortcutsOptions = {}
+): UseKeyboardShortcutsReturn {
+  const setupKeyboardShortcuts = useCallback((_iframeDoc: Document) => {
+    // キー判定は useEditorShortcuts（唯一のディスパッチャ）に集約済み。
+    // ここで listener を張ると同じキーが二重に発火するので、何も張らない。
+    return () => {};
+  }, []);
+
+  return { setupKeyboardShortcuts };
+}