@growgroup/visual-editor 0.2.2 → 0.3.1

package/src/editor/hooks/useInfiniteCanvas.ts

@@ -3,299 +3,307 @@
 /**
  * useInfiniteCanvas
  *
- * 無限キャンバスのズーム/パン操作を管理するhook
- * - ホイールズーム (Ctrl/Cmd + wheel)
- * - ホイールパン (wheel without modifier)
- * - ピンチジェスチャー (trackpad pinch)
- * - スペース+ドラッグパン
- * - Ctrl/Cmd+0 でフィットズーム
+ * マルチフレームキャンバスのズーム/パン操作。
+ * - ホイール: パン(2 本指スクロール)。Shift で横
+ * - Ctrl/Cmd + ホイール、トラックパッドのピンチ: カーソル位置を固定してズーム
+ * - Space + ドラッグ / 中ボタンドラッグ: パン
+ * - Cmd/Ctrl + / - : 段階ズーム。Shift+0 = 100%、Shift+1 = 全体、Shift+2 = 編集中のページ、Shift+R = 定規
+ *   (Cmd+0 / 1 / 2 は既存のディスパッチャ(editorZoomApiRef)が受ける)
+ * - 2 本指タッチ: ピンチズーム / 1 本指: パン
+ *
+ * [iframe から来る操作]
+ * 生きているエディタ(EditorCanvas)と見るだけの紙面は iframe なので、その上で起きた
+ * ホイール・キー・中ボタンは親へ届かない。iframe 側が postMessage で転送し
+ * (EMBEDDED_WHEEL / EMBEDDED_PINCH / EMBEDDED_KEY / EMBEDDED_PAN_START)、
+ * ここで **同じ処理** に流す。座標は iframe の座標で届くので、
+ * 送り元の iframe 要素の実測矩形と倍率で親の座標へ直す
  */
 
-import { useEffect, useRef, type RefObject } from 'react';
-import { useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+import { useEffect, useRef, useState, type RefObject } from 'react';
+import { useMultiPageCanvasOptional, MIN_ZOOM, MAX_ZOOM } from '../contexts/MultiPageCanvasContext';
+import { isSpaceActivatedControl } from './useCanvasControls';
+
+/** iframe 側が転送してくるメッセージ */
+export type EmbeddedCanvasMessage =
+  | { type: 'EMBEDDED_WHEEL'; coords?: 'parent'; deltaX: number; deltaY: number; clientX: number; clientY: number; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }
+  | { type: 'EMBEDDED_PINCH'; coords?: 'parent'; previousDistance: number; currentDistance: number; centerX: number; centerY: number }
+  | { type: 'EMBEDDED_PAN_START'; coords?: 'parent'; clientX: number; clientY: number }
+  | { type: 'EMBEDDED_KEY'; kind: 'down' | 'up'; key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean };
+
+/** ホイール 1 目盛りのズーム係数。トラックパッド(小さい delta が連続)と、マウスホイール(大きい delta)で分ける */
+const PINCH_K = 0.01;
+const WHEEL_K = 0.0025;
+const MAX_STEP = 1.25;
+const KEY_STEP = 1.25;
+
+function wheelFactor(deltaY: number): number {
+  const k = Math.abs(deltaY) < 50 ? PINCH_K : WHEEL_K;
+  return Math.max(1 / MAX_STEP, Math.min(MAX_STEP, Math.exp(-deltaY * k)));
+}
 
-const MIN_ZOOM = 0.02;
-const MAX_ZOOM = 2.0;
+function isTypingTarget(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null;
+  if (!el || typeof el.closest !== 'function') return false;
+  return !!el.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]');
+}
 
-export function useInfiniteCanvas(
-  containerRef: RefObject<HTMLDivElement | null>
-) {
+export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>) {
   const canvas = useMultiPageCanvasOptional();
-  const isSpaceHeldRef = useRef(false);
-  const isPanningRef = useRef(false);
+  const enabled = !!canvas?.isEnabled;
+
+  const [isSpaceHeld, setIsSpaceHeld] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const spaceRef = useRef(false);
+  const panningRef = 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;
+    if (!enabled) return;
     const container = containerRef.current;
     if (!container) return;
 
-    const handleWheel = (e: WheelEvent) => {
-      e.preventDefault();
+    const c = () => canvasRef.current!;
+    const toContainerPoint = (clientX: number, clientY: number) => {
+      const rect = container.getBoundingClientRect();
+      return { x: clientX - rect.left, y: clientY - rect.top };
+    };
 
-      const c = canvasRef.current;
-      if (!c) return;
-      const { canvasOffset, canvasZoom } = c.viewState;
+    /**
+     * 送り元 iframe の座標を親の client 座標へ(外側の transform の倍率を実測で掛ける)。
+     * 送り手が親の座標に直して送ってきた(coords: 'parent')ならそのまま
+     */
+    const fromIframe = (source: MessageEventSource | null, x: number, y: number, coords?: 'parent') => {
+      if (coords === 'parent') return { clientX: x, clientY: y };
+      if (!source) return null;
+      const iframes = Array.from(container.querySelectorAll('iframe'));
+      const iframe = iframes.find((f) => f.contentWindow === source);
+      if (!iframe) return null;
+      const rect = iframe.getBoundingClientRect();
+      const scale = rect.width / (iframe.clientWidth || rect.width) || 1;
+      return { clientX: rect.left + x * scale, clientY: rect.top + y * scale };
+    };
 
-      // ピンチジェスチャー（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 applyWheel = (deltaX: number, deltaY: number, clientX: number, clientY: number, zoomGesture: boolean, shiftKey: boolean) => {
+      c().markInteracting();
+      if (zoomGesture) {
+        const { canvasZoom } = c().viewStore.get();
+        c().zoomAt(canvasZoom * wheelFactor(deltaY), toContainerPoint(clientX, clientY));
+        return;
+      }
+      const { canvasOffset } = c().viewStore.get();
+      // Shift + 縦ホイール = 横パン(マウス向け。トラックパッドは deltaX が来る)
+      const dx = shiftKey && deltaX === 0 ? deltaY : deltaX;
+      const dy = shiftKey && deltaX === 0 ? 0 : deltaY;
+      c().setCanvasOffset({ x: canvasOffset.x - dx, y: canvasOffset.y - dy });
+    };
 
-        // ズーム感度調整
-        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 applyPinch = (previousDistance: number, currentDistance: number, clientX: number, clientY: number) => {
+      if (!previousDistance || !currentDistance) return;
+      c().markInteracting();
+      const factor = Math.max(1 / MAX_STEP, Math.min(MAX_STEP, currentDistance / previousDistance));
+      c().zoomAt(c().viewStore.get().canvasZoom * factor, toContainerPoint(clientX, clientY));
+    };
 
-        // マウス位置を中心にズーム
-        const newOffset = {
-          x: mouseX - (mouseX - canvasOffset.x) * (newZoom / canvasZoom),
-          y: mouseY - (mouseY - canvasOffset.y) * (newZoom / canvasZoom),
-        };
+    const startPan = (clientX: number, clientY: number) => {
+      panningRef.current = true;
+      setIsPanning(true);
+      lastPanPosRef.current = { x: clientX, y: clientY };
+      container.style.cursor = 'grabbing';
+      c().markInteracting();
+    };
 
-        c.setCanvasZoom(newZoom);
-        c.setCanvasOffset(newOffset);
-      } else {
-        // 通常ホイール: パン
-        c.setCanvasOffset({
-          x: canvasOffset.x - e.deltaX,
-          y: canvasOffset.y - e.deltaY,
-        });
-      }
+    // ---- ホイール(容器の上で起きたもの)
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      applyWheel(e.deltaX, e.deltaY, e.clientX, e.clientY, e.ctrlKey || e.metaKey, e.shiftKey);
     };
 
+    // ブラウザ自体の拡大を殺す(どこから来ても)
     const preventNativeZoom = (e: WheelEvent) => {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault();
-      }
+      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 stepZoom = (dir: 1 | -1) => c().zoomTo(c().viewStore.get().canvasZoom * (dir > 0 ? KEY_STEP : 1 / KEY_STEP), { animate: true });
+    const handleKey = (kind: 'down' | 'up', key: string, code: string, mods: { metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }, preventDefault: () => void, typing: boolean) => {
+      if (code === 'Space') {
+        if (typing) return;
+        if (kind === 'down') {
+          if (!spaceRef.current) {
+            spaceRef.current = true;
+            setIsSpaceHeld(true);
+            container.style.cursor = 'grab';
+          }
+          preventDefault();
+        } else {
+          spaceRef.current = false;
+          setIsSpaceHeld(false);
+          if (!panningRef.current) container.style.cursor = '';
         }
+        return;
       }
-
-      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);
+      if (kind !== 'down' || typing) return;
+      const cmd = mods.metaKey || mods.ctrlKey;
+      if (cmd && (key === '=' || key === '+' || key === ';' )) { preventDefault(); stepZoom(1); return; }
+      if (cmd && (key === '-' || key === '_')) { preventDefault(); stepZoom(-1); return; }
+      if (!cmd && mods.shiftKey && !mods.altKey) {
+        if (key === '0' || code === 'Digit0') { preventDefault(); c().zoomToActual(); return; }
+        if (key === '1' || code === 'Digit1') { preventDefault(); c().zoomToFit({ animate: true }); return; }
+        if (key === '2' || code === 'Digit2') {
+          const id = c().viewStore.get().activePageId;
+          if (id) { preventDefault(); c().zoomToPage(id, { animate: true }); }
+          return;
         }
-      }
-
-      // 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();
+        if (key.toLowerCase() === 'r' || code === 'KeyR') { preventDefault(); c().toggleRulers(); return; }
       }
     };
 
+    // ボタンにフォーカスがあるときの Space はそのボタンのもの(キーボードだけで操作している人が押せなくなる)
+    const spaceBelongsToControl = (e: KeyboardEvent) =>
+      e.code === 'Space' && (isSpaceActivatedControl(e.target) || isSpaceActivatedControl(document.activeElement));
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (spaceBelongsToControl(e)) return;
+      if (e.repeat && e.code === 'Space') { if (!isTypingTarget(e.target)) e.preventDefault(); return; }
+      handleKey('down', e.key, e.code, e, () => e.preventDefault(), isTypingTarget(e.target));
+    };
     const handleKeyUp = (e: KeyboardEvent) => {
-      if (e.code === 'Space') {
-        isSpaceHeldRef.current = false;
-        isPanningRef.current = false;
-        const container = containerRef.current;
-        if (container) {
-          container.style.cursor = '';
-        }
-      }
+      if (spaceBelongsToControl(e) && !spaceRef.current) return;
+      handleKey('up', e.key, e.code, e, () => e.preventDefault(), isTypingTarget(e.target));
     };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
+    // ウィンドウのフォーカスが外れたら Space を離したことにする(押しっぱなし状態が残らない)
+    const handleBlur = () => {
+      spaceRef.current = false;
+      setIsSpaceHeld(false);
+      panningRef.current = false;
+      setIsPanning(false);
+      container.style.cursor = '';
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [canvas?.isEnabled, containerRef]);
-
-  // スペース+マウスドラッグでパン
-  useEffect(() => {
-    if (!canvas?.isEnabled) return;
-    const container = containerRef.current;
-    if (!container) return;
 
+    // ---- マウス(Space または中ボタンでパン)
     const handleMouseDown = (e: MouseEvent) => {
-      // スペース押下中 or 中クリック
-      if (isSpaceHeldRef.current || e.button === 1) {
+      if (spaceRef.current || e.button === 1) {
         e.preventDefault();
-        isPanningRef.current = true;
-        lastPanPosRef.current = { x: e.clientX, y: e.clientY };
-        container.style.cursor = 'grabbing';
+        startPan(e.clientX, e.clientY);
       }
     };
-
     const handleMouseMove = (e: MouseEvent) => {
-      if (!isPanningRef.current) return;
+      if (!panningRef.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 { canvasOffset } = c().viewStore.get();
+      c().setCanvasOffset({ x: canvasOffset.x + dx, y: canvasOffset.y + dy });
+      c().markInteracting();
     };
-
     const handleMouseUp = () => {
-      if (isPanningRef.current) {
-        isPanningRef.current = false;
-        container.style.cursor = isSpaceHeldRef.current ? 'grab' : '';
-      }
+      if (!panningRef.current) return;
+      panningRef.current = false;
+      setIsPanning(false);
+      container.style.cursor = spaceRef.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);
+    // ---- iframe からの転送
+    const handleMessage = (e: MessageEvent) => {
+      const data = e.data as EmbeddedCanvasMessage | undefined;
+      if (!data || typeof data !== 'object' || typeof data.type !== 'string' || !data.type.startsWith('EMBEDDED_')) return;
+      if (data.type === 'EMBEDDED_WHEEL') {
+        const p = fromIframe(e.source, data.clientX, data.clientY, data.coords);
+        if (!p) return;
+        applyWheel(data.deltaX, data.deltaY, p.clientX, p.clientY, data.ctrlKey || data.metaKey, data.shiftKey);
+      } else if (data.type === 'EMBEDDED_PINCH') {
+        const p = fromIframe(e.source, data.centerX, data.centerY, data.coords);
+        if (!p) return;
+        applyPinch(data.previousDistance, data.currentDistance, p.clientX, p.clientY);
+      } else if (data.type === 'EMBEDDED_PAN_START') {
+        const p = fromIframe(e.source, data.clientX, data.clientY, data.coords);
+        if (!p) return;
+        startPan(p.clientX, p.clientY);
+      } else if (data.type === 'EMBEDDED_KEY') {
+        handleKey(data.kind, data.key, data.code, data, () => undefined, false);
+      }
     };
-    // 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);
 
+    // ---- タッチ
+    let lastTouch: { x: number; y: number } | null = null;
+    let pinchStart: { distance: number; zoom: number } | null = null;
+    const distance = (t1: Touch, t2: Touch) => Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+    const center = (t1: Touch, t2: Touch) => ({ x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.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) {
+      if (e.touches.length === 1) lastTouch = { 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;
+        pinchStart = { distance: distance(e.touches[0], e.touches[1]), zoom: c().viewStore.get().canvasZoom };
+        lastTouch = 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) {
+      if (e.touches.length === 1 && lastTouch) {
+        const dx = e.touches[0].clientX - lastTouch.x;
+        const dy = e.touches[0].clientY - lastTouch.y;
+        lastTouch = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        const { canvasOffset } = c().viewStore.get();
+        c().setCanvasOffset({ x: canvasOffset.x + dx, y: canvasOffset.y + dy });
+        c().markInteracting();
+      } else if (e.touches.length === 2 && pinchStart) {
         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 scale = distance(e.touches[0], e.touches[1]) / pinchStart.distance;
+        const p = center(e.touches[0], e.touches[1]);
+        c().zoomAt(pinchStart.zoom * scale, toContainerPoint(p.x, p.y));
+        c().markInteracting();
       }
     };
-
     const handleTouchEnd = () => {
-      lastTouchPos = null;
-      initialPinchDistance = null;
-      initialPinchZoom = null;
+      lastTouch = null;
+      pinchStart = null;
     };
-
     const preventNativeTouchZoom = (e: TouchEvent) => {
-      if (e.touches && e.touches.length >= 2) {
-        e.preventDefault();
-      }
+      if (e.touches && e.touches.length >= 2) e.preventDefault();
     };
+
+    window.addEventListener('wheel', preventNativeZoom, { passive: false, capture: true });
+    document.addEventListener('wheel', preventNativeZoom, { passive: false, capture: true });
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('blur', handleBlur);
+    container.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('message', handleMessage);
     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);
+    container.addEventListener('touchcancel', handleTouchEnd);
+
     return () => {
+      window.removeEventListener('wheel', preventNativeZoom, { capture: true });
+      document.removeEventListener('wheel', preventNativeZoom, { capture: true });
+      container.removeEventListener('wheel', handleWheel);
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('blur', handleBlur);
+      container.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('message', handleMessage);
       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);
+      container.removeEventListener('touchcancel', handleTouchEnd);
+      container.style.cursor = '';
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [canvas?.isEnabled, containerRef]);
+  }, [enabled, containerRef]);
+
+  return { isSpaceHeld, isPanning, MIN_ZOOM, MAX_ZOOM };
 }

package/src/editor/hooks/useMarqueeSelection.ts

@@ -43,7 +43,7 @@ interface UseMarqueeSelectionOptions {
  * Figma と同じく交差判定にする。
  * ※ dom-utils は他の修正項目と共有しているため、ここにローカル実装を置く。
  */
-function findElementsIntersectingMarquee(
+export function findElementsIntersectingMarquee(
   iframeDoc: Document,
   marquee: { left: number; top: number; right: number; bottom: number }
 ): HTMLElement[] {
@@ -80,7 +80,7 @@ function findElementsIntersectingMarquee(
  * ※ dom-utils の collapseToParentIfAllChildrenSelected は
  *   「全ての子が選択されたときだけ親に畳む」別のルールなので使わない。
  */
-function collapseToTopMost(elements: HTMLElement[]): HTMLElement[] {
+export function collapseToTopMost(elements: HTMLElement[]): HTMLElement[] {
   return elements.filter(
     (el) => !elements.some((other) => other !== el && other.contains(el))
   );

package/src/editor/utils/dom-utils.ts

@@ -229,6 +229,9 @@ export function isInlineElement(element: HTMLElement, computedStyle?: CSSStyleDe
  * 適用ロジックの二重実装を作らない。
  */
 export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
+  // 埋め込み(マルチフレームのキャンバス内)では倍率は外側の CSS transform が持つ。
+  // iframe の中は常に等倍で、スクロール領域も作らない
+  if (iframeDoc.body?.dataset.embedded === '1') return;
   const wrapper = iframeDoc.getElementById('artboard-wrapper');
   const scrollArea = iframeDoc.getElementById('canvas-scroll-area');
   const container = iframeDoc.getElementById('canvas-container');
@@ -1105,7 +1108,10 @@ const RADIUS_MIN_INSET_SCREEN = 14;
  * refreshSelectionOverlay を呼んでいる）。
  */
 export function applyOverlayScale(iframeDoc: Document): number {
-  const scale = getArtboardScale(iframeDoc) || 1;
+  // 埋め込み(マルチフレームのキャンバス)では iframe の外側にも倍率が掛かる。
+  // 画面上で 1px にするには内側 × 外側の倍率で割る(EditorCanvas が data-outer-zoom に書く)
+  const outerZoom = Number(iframeDoc.documentElement?.dataset.outerZoom) || 1;
+  const scale = (getArtboardScale(iframeDoc) || 1) * outerZoom;
   const overlayScale = 1 / scale;
   const root = iframeDoc.documentElement;
   if (!root) return overlayScale;
@@ -1295,6 +1301,22 @@ function drawSelectionBox(
   selectionBox.className =
     mode === 'member' ? 'selection-box selection-member' : 'selection-box';
   selectionBox.setAttribute('data-for-element', elementId);
+  // 部品(data-part)のインスタンスは枠を紫にして、名前と版を枠の上に出す(部品だと一目で分かる)。
+  // 部品の中のスロットを選んでいるときも、どの部品の中かを出す
+  const partRoot = element.hasAttribute('data-part') ? element : (element.parentElement?.closest('[data-part]') as HTMLElement | null) ?? null;
+  if (partRoot) {
+    const isRoot = partRoot === element;
+    selectionBox.classList.add(isRoot ? 'selection-part' : 'selection-in-part');
+    if (mode !== 'member') {
+      const badge = iframeDoc.createElement('div');
+      badge.className = 'part-badge';
+      const slot = isRoot ? null : (element.closest('[data-slot]') as HTMLElement | null);
+      const slotName = slot && partRoot.contains(slot) && slot !== partRoot ? slot.getAttribute('data-slot') : null;
+      const version = partRoot.getAttribute('data-part-v');
+      badge.textContent = `${isRoot ? '部品' : '部品の中'} ${partRoot.getAttribute('data-part') ?? ''}${version ? ` v${version}` : ''}${slotName ? ` › ${slotName}` : ''}`;
+      selectionBox.appendChild(badge);
+    }
+  }
   selectionBox.style.cssText = `
     left: ${relativeLeft}px;
     top: ${relativeTop}px;