@growgroup/visual-editor 0.9.0 → 0.10.0

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -42,6 +42,7 @@ import { SLIDE_HEIGHT, SLIDE_WIDTH, WEBPAGE_WIDTH } from '../constants';
 import type { EditorMode } from './EditorToolContext';
 import { io, type PreviewStyle } from '../../io';
 import { readStorage, writeStorage } from '../utils/storage';
+import { nextZoomLevel, type CanvasZoomOptions, type ResolvedCanvasZoomOptions } from '../utils/canvas-gestures';
 
 // ============================================================
 // 定数
@@ -51,10 +52,13 @@ import { readStorage, writeStorage } from '../utils/storage';
 export { WEBPAGE_WIDTH };
 /** 高さが未測定の webpage フレームに仮に与える高さ */
 export const WEBPAGE_MIN_HEIGHT = 1200;
-/** ズーム範囲(Figma は 2%〜25600%。紙面の編集で要るのはこの範囲) */
+/**
+ * ズーム範囲の既定(Figma は 2%〜25600%。紙面の編集で要るのはこの範囲)。
+ * 利用側は `canvasZoomOptions` で範囲・刻み・⌘2 の合わせ先を変えられる(0.10.0)
+ */
 export const MIN_ZOOM = 0.02;
 export const MAX_ZOOM = 4;
-/** ホイール 1 段のズーム倍率(ボタン・キー操作) */
+/** ボタン・キー操作の 1 段の倍率(`steps: 'ratio'`、既定) */
 const ZOOM_STEP = 1.25;
 /** 全体表示・ページ表示のときの余白(px、画面上) */
 const FIT_PADDING = 72;
@@ -225,6 +229,10 @@ export interface MultiPageCanvasContextValue {
   zoomToFit: (options?: { animate?: boolean }) => void;
   zoomToPage: (id: string, options?: { animate?: boolean }) => void;
   zoomToActual: () => void;
+  /** キャンバスの座標の矩形を、余白を取って画面に収める(100% を超えてもよい。選択範囲に合わせる等) — 0.10.0 */
+  zoomToRect: (rect: CanvasBounds, options?: { animate?: boolean }) => void;
+  /** 拡大縮小の設定(`canvasZoomOptions` を省略時の値で埋めたもの) — 0.10.0 */
+  zoomOptions: ResolvedCanvasZoomOptions;
   /** 指定のフレームが画面に入っていなければ、見える位置まで寄せる(倍率は変えない) */
   revealPage: (id: string) => void;
   /**
@@ -484,7 +492,17 @@ function fitView(
   };
 }
 
-const clampZoom = (z: number) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, z));
+/** 利用側が渡した設定を省略時の値で埋める(範囲は片方だけ・逆転・0 以下を既定へ) */
+export function resolveCanvasZoomOptions(options?: CanvasZoomOptions | null): ResolvedCanvasZoomOptions {
+  const min = Number.isFinite(options?.min) && (options?.min as number) > 0 ? (options?.min as number) : MIN_ZOOM;
+  const max = Number.isFinite(options?.max) && (options?.max as number) > 0 ? (options?.max as number) : MAX_ZOOM;
+  const range = min <= max ? { min, max } : { min: MIN_ZOOM, max: MAX_ZOOM };
+  return {
+    ...range,
+    steps: options?.steps === 'powers-of-two' ? 'powers-of-two' : 'ratio',
+    fitShortcut: options?.fitShortcut === 'selection' ? 'selection' : 'page',
+  };
+}
 const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
 const prefersReducedMotion = () =>
   typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -518,6 +536,8 @@ interface MultiPageCanvasProviderProps {
   enabled: boolean;
   /** 見えている範囲を保存するキー(利用側の parentId 等)。無ければ保存しない */
   storageKey?: string | null;
+  /** 拡大縮小の設定(範囲・刻み・⌘2 の合わせ先)。省略時は従来の挙動(0.10.0) */
+  zoomOptions?: CanvasZoomOptions;
 }
 
 type PersistedView = {
@@ -546,7 +566,15 @@ function readPersistedView(key: string | null | undefined): PersistedView | null
   }
 }
 
-export function MultiPageCanvasProvider({ children, enabled, storageKey }: MultiPageCanvasProviderProps) {
+export function MultiPageCanvasProvider({ children, enabled, storageKey, zoomOptions: zoomOptionsProp }: MultiPageCanvasProviderProps) {
+  // 拡大縮小の設定。倍率はどの経路(ホイール・ピンチ・キー・ボタン・全体表示)も clampZoom で範囲に収める
+  const zoomOptions = useMemo<ResolvedCanvasZoomOptions>(
+    () => resolveCanvasZoomOptions(zoomOptionsProp),
+    [zoomOptionsProp?.min, zoomOptionsProp?.max, zoomOptionsProp?.steps, zoomOptionsProp?.fitShortcut],
+  );
+  const zoomOptionsRef = useRef(zoomOptions);
+  zoomOptionsRef.current = zoomOptions;
+  const clampZoom = useCallback((z: number) => Math.max(zoomOptionsRef.current.min, Math.min(zoomOptionsRef.current.max, z)), []);
   const artboard = useEditorArtboard();
   const { editorMode } = useEditorTool();
   const { viewportWidth } = useEditorView();
@@ -864,8 +892,17 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [setView, viewStore],
   );
 
-  const zoomIn = useCallback(() => zoomTo(viewStore.get().canvasZoom * ZOOM_STEP, { animate: true }), [zoomTo, viewStore]);
-  const zoomOut = useCallback(() => zoomTo(viewStore.get().canvasZoom / ZOOM_STEP, { animate: true }), [zoomTo, viewStore]);
+  // 刻みは既定で 1.25 倍ずつ。`steps: 'powers-of-two'` なら 2 の累乗の段(Figma。…50% → 100% → 200%…。段の間からは向きの側の段へ)
+  const stepZoom = useCallback((direction: 1 | -1) => {
+    const current = viewStore.get().canvasZoom;
+    const options = zoomOptionsRef.current;
+    const next = options.steps === 'powers-of-two'
+      ? nextZoomLevel(current, direction, options)
+      : current * (direction > 0 ? ZOOM_STEP : 1 / ZOOM_STEP);
+    zoomTo(next, { animate: true });
+  }, [zoomTo, viewStore]);
+  const zoomIn = useCallback(() => stepZoom(1), [stepZoom]);
+  const zoomOut = useCallback(() => stepZoom(-1), [stepZoom]);
   const zoomToActual = useCallback(() => zoomTo(1, { animate: true }), [zoomTo]);
 
   const zoomToFit = useCallback<MultiPageCanvasContextValue['zoomToFit']>(
@@ -876,6 +913,14 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [setView],
   );
 
+  // 選択範囲に合わせる等。全体表示と違って 100% で止めない(小さい要素は大きく見せる。Figma と同じ)
+  const zoomToRect = useCallback<MultiPageCanvasContextValue['zoomToRect']>(
+    (rect, options) => {
+      setView(fitView(rect, containerSize(), { padding: FIT_PADDING, maxZoom: zoomOptionsRef.current.max, rulers: rulersRef.current }), options);
+    },
+    [setView],
+  );
+
   const zoomToPage = useCallback<MultiPageCanvasContextValue['zoomToPage']>(
     (id, options) => {
       const page = pagesRef.current.find((p) => p.id === id);
@@ -1223,6 +1268,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       zoomToFit,
       zoomToPage,
       zoomToActual,
+      zoomToRect,
+      zoomOptions,
       revealPage,
       focusPage,
       activatePage,
@@ -1244,7 +1291,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [
       enabled, editorMode, pages, bounds, layout, getPage, updatePageFrame, setPageHtml, invalidatePages, artboard.documentAttributes,
       setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, shiftView, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
-      zoomToActual, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
+      zoomToActual, zoomToRect, zoomOptions, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
       persisted, applyInitialView, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
       getPreviewImageZoomCap, reportThumbnailWidth, previewImageCapVersion,
     ],
@@ -1259,17 +1306,19 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
 export function ConditionalMultiPageProvider({
   enabled,
   storageKey,
+  zoomOptions,
   children,
 }: {
   enabled: boolean;
   storageKey?: string | null;
+  zoomOptions?: CanvasZoomOptions;
   children: React.ReactNode;
 }) {
   if (!enabled) {
     return <>{children}</>;
   }
   return (
-    <MultiPageCanvasProvider enabled={enabled} storageKey={storageKey}>
+    <MultiPageCanvasProvider enabled={enabled} storageKey={storageKey} zoomOptions={zoomOptions}>
       {children}
     </MultiPageCanvasProvider>
   );

package/src/editor/hooks/useBrowserZoomPrevention.ts

@@ -31,11 +31,11 @@ export function useBrowserZoomPrevention(): void {
       }
     };
 
-    // Safari/WebKitのジェスチャーイベントを防止
+    // Safari/WebKitのジェスチャーイベント(ピンチ)でのブラウザ拡大を防止
+    // 注: 伝播は止めない(0.10.0)。キャンバス(useInfiniteCanvas)がピンチを拡大縮小に使う。
+    //     以前は stopImmediatePropagation で握りつぶしていて、Safari・WKWebView ではピンチしても何も起きなかった
     const preventGesture = (e: Event) => {
       e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
       return false;
     };
 

package/src/editor/hooks/useCanvasControls.ts

@@ -610,12 +610,9 @@ export function useCanvasControls() {
     window.addEventListener('wheel', handleWheel, { passive: false, capture: true });
     document.addEventListener('wheel', handleWheel, { passive: false, capture: true });
 
+    // ブラウザの拡大だけを止める。伝播は止めない(0.10.0。キャンバスがピンチを拡大縮小に使う)
     const handleGesture = (e: Event) => {
-      if (isEditorOpen()) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }
+      if (isEditorOpen()) e.preventDefault();
     };
 
     window.addEventListener('gesturestart', handleGesture, { passive: false, capture: true });

package/src/editor/hooks/useContextMenuHandler.ts

@@ -9,6 +9,7 @@ import { useCallback, useRef, useEffect, MutableRefObject } from 'react';
 import { useEditorContext } from '../EditorContext';
 import { updateSelectionBox } from '../utils/dom-utils';
 import { extractElementInfo } from '../utils/style-utils';
+import { passThroughSvg } from '../utils/svg-hit';
 
 interface UseContextMenuHandlerOptions {
   /** 編集可能要素を取得する関数 */
@@ -86,7 +87,8 @@ export function useContextMenuHandler(
         const y = iframeRect.top + e.clientY * outerScale;
 
         // 要素がクリックされた場合は選択
-        const element = getEditableElement(e.target, iframeDoc);
+        // SVG の箱の空きは素通りさせる(クリックの判別と同じ。utils/svg-hit.ts)
+        const element = getEditableElement(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc);
         if (element) {
           const elementId = element.getAttribute('data-element-id') || '';
           const currentIds = selectedElementIdsRef.current;

package/src/editor/hooks/useElementSelection.ts

@@ -26,6 +26,7 @@ import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
 import type { DragState, ResizeState, MarqueeState } from "../types";
 import { debugLog } from '../utils/debug';
+import { passThroughSvg } from '../utils/svg-hit';
 
 /**
  * mousedown で保留し、mouseup で意味を確定するクリック情報
@@ -1181,6 +1182,9 @@ export function useElementSelection(
                   ),
               ) ?? null;
         }
+        // SVG の箱の中で何も描かれていない所を押したら、SVG を素通りして下の要素を押したことにする。
+        // 装飾の SVG が文字やボタンに重なっていると、素のクリックも Cmd+クリックも SVG しか選べなかった(utils/svg-hit.ts)
+        hitSource = passThroughSvg(iframeDoc, hitSource, e.clientX, e.clientY);
         const hit = getEditableElement(hitSource, iframeDoc);
         // 空白＝押した点の祖先に編集可能要素がまったく無い状態。
         // #artboard / 紙面と同じ大きさの器 / #artboard-wrapper / #canvas-container は
@@ -1432,7 +1436,7 @@ export function useElementSelection(
 
 
         const isCtrlCmd = e.ctrlKey || e.metaKey;
-        const deepElement = getEditableElement(e.target, iframeDoc);
+        const deepElement = getEditableElement(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc);
 
         if (!deepElement) return;
 

package/src/editor/hooks/useIframeSetup.ts

@@ -12,6 +12,7 @@ import { buildDomTree, isInlineElement, isNonEditableTag } from '../utils/dom-ut
 import { EDITOR_IFRAME_STYLES } from '../constants';
 import { isLockedInsidePart } from '../parts';
 import { debugLog } from '../utils/debug';
+import { isInsideSvg, passThroughSvg } from '../utils/svg-hit';
 
 interface UseIframeSetupReturn {
   /**
@@ -107,7 +108,14 @@ export function useIframeSetup(): UseIframeSetupReturn {
         element.removeAttribute('data-inline');
         return;
       }
-      if (element.closest('script, style, svg path, svg g')) return;
+      if (element.closest('script, style')) return;
+      // SVG の中(path / circle / g など)は SVG ごと 1 つの図として扱う(utils/svg-hit.ts)。
+      // 以前は path と g だけを外していたので、circle や rect が単独で選ばれていた
+      if (isInsideSvg(element)) {
+        element.removeAttribute('data-editable');
+        element.removeAttribute('data-element-id');
+        return;
+      }
       if (element.classList.contains('material-icons')) return;
       if (element.classList.contains('material-icons-outlined')) return;
       // selection-box およびその子要素はスキップ
@@ -274,7 +282,8 @@ export function useIframeSetup(): UseIframeSetupReturn {
           clearPreview();
           return;
         }
-        const next = resolveHoverTarget(e.target, iframeDoc, {
+        // SVG の箱の空きは素通りさせる(クリックの判別と同じ。utils/svg-hit.ts)
+        const next = resolveHoverTarget(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc, {
           meta: e.metaKey || e.ctrlKey,
         });
         if (next === currentPreviewElement) return;

package/src/editor/hooks/useInfiniteCanvas.ts

@@ -7,9 +7,13 @@
  * - ホイール: パン(2 本指スクロール)。Shift で横
  * - Ctrl/Cmd + ホイール、トラックパッドのピンチ: カーソル位置を固定してズーム
  * - Space + ドラッグ / 中ボタンドラッグ: パン
- * - Cmd/Ctrl + / - : 段階ズーム。Shift+0 = 100%、Shift+1 = 全体、Shift+2 = 編集中のページ、Shift+R = 定規
+ * - Safari・WKWebView のトラックパッドのピンチ(gesturestart / gesturechange): カーソル位置を固定してズーム(0.10.0)
+ * - Cmd/Ctrl + / - : 段階ズーム(既定 1.25 倍。canvasZoomOptions.steps で 2 の累乗の段)。Shift+0 = 100%、Shift+1 = 全体、
+ *   Shift+2 = 編集中のページ(canvasZoomOptions.fitShortcut: 'selection' なら選んでいる要素)、Shift+R = 定規
  *   (Cmd+0 / 1 / 2 は既存のディスパッチャ(editorZoomApiRef)が受ける)
  * - 2 本指タッチ: ピンチズーム / 1 本指: パン
+ * - 拡大縮小はどの経路も zoomAt(カーソル位置が中心)に集める。キーとボタンは画面の中心
+ * - IME の変換中のキーは奪わない
  *
  * [iframe から来る操作]
  * 生きているエディタ(EditorCanvas)と見るだけの紙面は iframe なので、その上で起きた
@@ -21,7 +25,8 @@
 
 import { useEffect, useRef, useState, type RefObject } from 'react';
 import { useMultiPageCanvasOptional, MIN_ZOOM, MAX_ZOOM } from '../contexts/MultiPageCanvasContext';
-import { isSpaceActivatedControl } from './useCanvasControls';
+import { isSpaceActivatedControl, editorZoomApiRef } from './useCanvasControls';
+import { listenCanvasGestures, isImeKeyEvent } from '../utils/canvas-gestures';
 
 /** iframe 側が転送してくるメッセージ */
 export type EmbeddedCanvasMessage =
@@ -29,12 +34,12 @@ export type EmbeddedCanvasMessage =
   | { 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 };
+// ピンチ(GestureEvent)の転送 EMBEDDED_GESTURE は listenCanvasGestures が受ける(utils/canvas-gestures.ts)
 
 /** ホイール 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;
@@ -87,10 +92,23 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
       return { clientX: rect.left + x * scale, clientY: rect.top + y * scale };
     };
 
+    // ---- Safari・WKWebView のピンチ(容器の上で起きたものと、紙面の iframe から転送されたもの)
+    const gestures = listenCanvasGestures({
+      win: window,
+      container,
+      target: () => ({
+        getZoom: () => c().viewStore.get().canvasZoom,
+        zoomAt: (zoom, clientX, clientY) => c().zoomAt(zoom, toContainerPoint(clientX, clientY)),
+        markInteracting: () => c().markInteracting(),
+      }),
+    });
+
     // ---- ズーム/パンの実処理(ホイールと転送メッセージで共通)
     const applyWheel = (deltaX: number, deltaY: number, clientX: number, clientY: number, zoomGesture: boolean, shiftKey: boolean) => {
       c().markInteracting();
       if (zoomGesture) {
+        // ピンチ(GestureEvent)の最中に ctrl 付き wheel も届く環境で二重に拡大しない
+        if (gestures.active) return;
         const { canvasZoom } = c().viewStore.get();
         c().zoomAt(canvasZoom * wheelFactor(deltaY), toContainerPoint(clientX, clientY));
         return;
@@ -129,7 +147,8 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
     };
 
     // ---- キー
-    const stepZoom = (dir: 1 | -1) => c().zoomTo(c().viewStore.get().canvasZoom * (dir > 0 ? KEY_STEP : 1 / KEY_STEP), { animate: true });
+    // ヘッダーの +/− と同じ zoomIn / zoomOut(刻みは canvasZoomOptions.steps)
+    const stepZoom = (dir: 1 | -1) => (dir > 0 ? c().zoomIn() : c().zoomOut());
     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;
@@ -155,8 +174,11 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
         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') {
+          // ⌘2 と同じ合わせ先(既定は編集中のページ。fitShortcut: 'selection' なら選んでいる要素)
+          preventDefault();
+          if (editorZoomApiRef.current) { editorZoomApiRef.current.selection(); return; }
           const id = c().viewStore.get().activePageId;
-          if (id) { preventDefault(); c().zoomToPage(id, { animate: true }); }
+          if (id) c().zoomToPage(id, { animate: true });
           return;
         }
         if (key.toLowerCase() === 'r' || code === 'KeyR') { preventDefault(); c().toggleRulers(); return; }
@@ -167,6 +189,7 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
     const spaceBelongsToControl = (e: KeyboardEvent) =>
       e.code === 'Space' && (isSpaceActivatedControl(e.target) || isSpaceActivatedControl(document.activeElement));
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (isImeKeyEvent(e)) return; // IME の変換中のキーは奪わない
       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));
@@ -284,6 +307,7 @@ export function useInfiniteCanvas(containerRef: RefObject<HTMLDivElement | null>
     container.addEventListener('touchcancel', handleTouchEnd);
 
     return () => {
+      gestures.dispose();
       window.removeEventListener('wheel', preventNativeZoom, { capture: true });
       document.removeEventListener('wheel', preventNativeZoom, { capture: true });
       container.removeEventListener('wheel', handleWheel);

package/src/editor/parts.ts

@@ -17,6 +17,7 @@
 import type { EditorPartDef } from '../io';
 import { findFlowInsertion } from './utils/drop-target';
 import { isNonEditableTag } from './utils/dom-utils';
+import { isInsideSvg } from './utils/svg-hit';
 
 export const PART_ATTR = 'data-part';
 export const PART_VERSION_ATTR = 'data-part-v';
@@ -317,7 +318,7 @@ export function unlockPartDescendants(root: HTMLElement): number {
   let i = 0;
   const stamp = Date.now();
   for (const el of Array.from(root.querySelectorAll('*'))) {
-    if (el.closest('script, style, svg path, svg g')) continue;
+    if (el.closest('script, style') || isInsideSvg(el)) continue;
     if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') continue;
     if (isNonEditableTag(el)) continue;
     if (!el.getAttribute('data-element-id')) {

package/src/editor/utils/canvas-gestures.ts

@@ -0,0 +1,210 @@
+/**
+ * マルチフレームのキャンバスの拡大縮小を Figma にそろえる部品(0.10.0)。
+ *
+ * - Safari・WKWebView のトラックパッドのピンチは gesturestart / gesturechange / gestureend で届く
+ *   (Chrome・Edge・Electron は ctrl 付きの wheel で届く)。以前は止めるだけで拡大縮小に使っていなかった。
+ *   scale は gesturestart からの累積なので、始まりの倍率に掛ける。紙面(iframe)の中で起きたものは親へ転送する
+ * - ⌘+ / ⌘− とヘッダーの +/− は 2 の累乗の段(…50% → 100% → 200%…。段の間からは向きの側の段へ)
+ * - IME の変換中のキーは奪わない
+ * - 選んでいる要素に合わせる(⌘2 / ⇧2)ための矩形
+ *
+ * DOM と数値だけを扱い、React やキャンバスの Context には触らない(受け手が zoomAt 等を渡す)。
+ */
+
+export interface ZoomRange {
+  min: number;
+  max: number;
+}
+
+/**
+ * マルチフレームのキャンバスの拡大縮小の設定(`canvasZoomOptions`)。どれも省略時は従来の挙動。
+ * Figma にそろえるなら `{ min: 0.02, max: 256, steps: 'powers-of-two', fitShortcut: 'selection' }`
+ */
+export interface CanvasZoomOptions {
+  /** 倍率の下限(省略時 0.02 = 2%) */
+  min?: number;
+  /** 倍率の上限(省略時 4 = 400%。Figma は 256 = 25600%) */
+  max?: number;
+  /** ⌘+ / ⌘− とヘッダーの +/− の刻み。'ratio' = 1.25 倍ずつ(省略時)、'powers-of-two' = 2 の累乗の段(Figma) */
+  steps?: 'ratio' | 'powers-of-two';
+  /** ⌘2 / ⇧2 の合わせ先。'page' = 編集中のページ(省略時)、'selection' = 選んでいる要素(無ければページ。Figma) */
+  fitShortcut?: 'page' | 'selection';
+}
+export type ResolvedCanvasZoomOptions = ZoomRange & Required<Pick<CanvasZoomOptions, 'steps' | 'fitShortcut'>>;
+
+const clamp = (zoom: number, range: ZoomRange) => Math.max(range.min, Math.min(range.max, zoom));
+
+/** ⌘+ / ⌘− の次の倍率。2 の累乗の段へ寄せる(今が段の上なら 1 段、段の間なら向きの側の段へ) */
+export function nextZoomLevel(current: number, direction: 1 | -1, range: ZoomRange): number {
+  if (!Number.isFinite(current) || current <= 0) return clamp(1, range);
+  const exponent = Math.log2(current);
+  const EPSILON = 1e-6;
+  const next = direction > 0 ? Math.floor(exponent + EPSILON) + 1 : Math.ceil(exponent - EPSILON) - 1;
+  return clamp(2 ** next, range);
+}
+
+/** IME の変換中のキーか(Safari・Chrome は変換中の keydown に keyCode 229 を出す) */
+export function isImeKeyEvent(event: KeyboardEvent): boolean {
+  return event.isComposing === true || event.keyCode === 229;
+}
+
+// ------------------------------------------------------------------ ピンチ(GestureEvent)
+
+/** WebKit の GestureEvent(型定義は標準の lib に無い) */
+export type CanvasGestureEvent = Event & { scale?: number; clientX?: number; clientY?: number };
+export type CanvasGesturePhase = 'start' | 'change' | 'end';
+export interface EmbeddedGestureMessage {
+  type: 'EMBEDDED_GESTURE';
+  coords: 'parent';
+  phase: CanvasGesturePhase;
+  scale: number;
+  clientX: number;
+  clientY: number;
+}
+
+export interface GestureZoomTarget {
+  getZoom: () => number;
+  /** client 座標の点を動かさずに倍率を変える(倍率の範囲は受け手が収める) */
+  zoomAt: (zoom: number, clientX: number, clientY: number) => void;
+  markInteracting?: () => void;
+}
+
+/** これだけピンチの続きが来なければ、終わったものとみなす(ms) */
+const GESTURE_IDLE_MS = 1000;
+const PHASES: Array<[CanvasGesturePhase, string]> = [['start', 'gesturestart'], ['change', 'gesturechange'], ['end', 'gestureend']];
+const LISTEN = { passive: false, capture: true } as const;
+
+/**
+ * ピンチの状態。始まりの倍率を覚え、scale(累積)を掛ける。
+ * `active` の間は ctrl 付き wheel での拡大をしない(両方届く環境で二重に拡大しない)。
+ * end を取りこぼしたまま止まったら GESTURE_IDLE_MS で解く(ctrl 付き wheel の拡大が戻らなくならない)
+ */
+export function createGestureZoom(target: () => GestureZoomTarget | null, now: () => number = () => Date.now()) {
+  let base: number | null = null;
+  let lastAt = 0;
+  const isLive = () => base !== null && now() - lastAt < GESTURE_IDLE_MS;
+  return {
+    get active() { return isLive(); },
+    handle(phase: CanvasGesturePhase, scale: number, clientX: number, clientY: number) {
+      const canvas = target();
+      if (!canvas) return;
+      if (phase === 'start') { base = canvas.getZoom(); lastAt = now(); return; }
+      // start を取りこぼしても(iframe の読み込み直し等)、今の倍率を始まりにして続ける
+      const start = isLive() && base !== null ? base : canvas.getZoom();
+      base = start;
+      lastAt = now();
+      if (Number.isFinite(scale) && scale > 0) {
+        canvas.markInteracting?.();
+        canvas.zoomAt(start * scale, clientX, clientY);
+      }
+      if (phase === 'end') base = null;
+    },
+  };
+}
+
+/**
+ * 親(キャンバスの容器がある文書)でピンチを受ける。容器の上で起きたものと、紙面の iframe から転送されてきたもの。
+ * 容器の外(ヘッダー・パネル)のピンチは拡大しない(ブラウザ自体の拡大は useBrowserZoomPrevention が止める)。
+ * GestureEvent に座標が無い環境では、最後にポインタがあった所を中心にする。
+ */
+export function listenCanvasGestures(input: {
+  win: Window;
+  container: HTMLElement;
+  target: () => GestureZoomTarget | null;
+}): { readonly active: boolean; dispose: () => void } {
+  const { win, container } = input;
+  const zoom = createGestureZoom(input.target);
+  let pointer: { x: number; y: number } | null = null;
+  const onPointer = (event: MouseEvent) => { pointer = { x: event.clientX, y: event.clientY }; };
+  const pointOf = (event: CanvasGestureEvent) => {
+    if (Number.isFinite(event.clientX) && Number.isFinite(event.clientY)) return { x: event.clientX as number, y: event.clientY as number };
+    if (pointer) return pointer;
+    const rect = container.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  };
+  const handlers = PHASES.map(([phase, type]) => {
+    const handler = (event: Event) => {
+      const target = event.target as Node | null;
+      if (!target || typeof target.nodeType !== 'number' || !container.contains(target)) return;
+      event.preventDefault();
+      const gesture = event as CanvasGestureEvent;
+      const point = pointOf(gesture);
+      zoom.handle(phase, Number(gesture.scale ?? 1), point.x, point.y);
+    };
+    return [type, handler] as const;
+  });
+  const onMessage = (event: MessageEvent) => {
+    const data = event.data as Partial<EmbeddedGestureMessage> | null;
+    if (!data || typeof data !== 'object' || data.type !== 'EMBEDDED_GESTURE' || data.coords !== 'parent') return;
+    if (data.phase !== 'start' && data.phase !== 'change' && data.phase !== 'end') return;
+    zoom.handle(data.phase, Number(data.scale), Number(data.clientX), Number(data.clientY));
+  };
+  for (const [type, handler] of handlers) win.addEventListener(type, handler, LISTEN);
+  win.addEventListener('mousemove', onPointer, { passive: true });
+  win.addEventListener('message', onMessage);
+  return {
+    get active() { return zoom.active; },
+    dispose() {
+      for (const [type, handler] of handlers) win.removeEventListener(type, handler, LISTEN);
+      win.removeEventListener('mousemove', onPointer);
+      win.removeEventListener('message', onMessage);
+    },
+  };
+}
+
+/**
+ * 紙面(生きているエディタの iframe)で起きたピンチを親へ転送する。座標は送る前に親の座標へ直す
+ * (親の realm で作った関数なので、受け手からは送り元の iframe が分からない。ホイールの転送と同じ)。
+ */
+export function forwardEmbeddedGestures(input: {
+  doc: Document;
+  toParent: (x: number, y: number) => { clientX: number; clientY: number };
+  post: (message: EmbeddedGestureMessage) => void;
+}): () => void {
+  const { doc } = input;
+  let pointer: { x: number; y: number } | null = null;
+  const onPointer = (event: MouseEvent) => { pointer = { x: event.clientX, y: event.clientY }; };
+  const handlers = PHASES.map(([phase, type]) => {
+    const handler = (event: Event) => {
+      const gesture = event as CanvasGestureEvent;
+      event.preventDefault();
+      event.stopPropagation();
+      const hasPoint = Number.isFinite(gesture.clientX) && Number.isFinite(gesture.clientY);
+      const local = hasPoint
+        ? { x: gesture.clientX as number, y: gesture.clientY as number }
+        : pointer ?? { x: (doc.defaultView?.innerWidth ?? 0) / 2, y: (doc.defaultView?.innerHeight ?? 0) / 2 };
+      input.post({ type: 'EMBEDDED_GESTURE', coords: 'parent', phase, scale: Number(gesture.scale ?? 1), ...input.toParent(local.x, local.y) });
+    };
+    return [type, handler] as const;
+  });
+  for (const [type, handler] of handlers) doc.addEventListener(type, handler, LISTEN);
+  doc.addEventListener('mousemove', onPointer, { passive: true, capture: true });
+  return () => {
+    for (const [type, handler] of handlers) doc.removeEventListener(type, handler, LISTEN);
+    doc.removeEventListener('mousemove', onPointer, { capture: true });
+  };
+}
+
+// ------------------------------------------------------------------ 選択範囲に合わせる
+
+/**
+ * 紙面で選んでいる要素(#artboard の .selected)を囲む矩形を、キャンバスの座標で返す。無ければ null。
+ * 埋め込みの紙面は iframe の中では等倍なので、iframe の中の矩形にフレームの位置を足せばよい。
+ */
+export function selectionCanvasRect(
+  iframe: HTMLIFrameElement | null | undefined,
+  framePosition: { x: number; y: number } | null | undefined,
+): { minX: number; minY: number; maxX: number; maxY: number } | null {
+  const doc = iframe?.contentDocument;
+  if (!doc || !framePosition) return null;
+  const rects = Array.from(doc.querySelectorAll<HTMLElement>('#artboard .selected'))
+    .map((element) => element.getBoundingClientRect())
+    .filter((rect) => rect.width > 0 || rect.height > 0);
+  if (!rects.length) return null;
+  return {
+    minX: framePosition.x + Math.min(...rects.map((rect) => rect.left)),
+    minY: framePosition.y + Math.min(...rects.map((rect) => rect.top)),
+    maxX: framePosition.x + Math.max(...rects.map((rect) => rect.right)),
+    maxY: framePosition.y + Math.max(...rects.map((rect) => rect.bottom)),
+  };
+}

package/src/editor/utils/embedded-canvas-bridge.ts

@@ -8,6 +8,8 @@
  * 座標は iframe の座標のまま送る(受け手が送り元 iframe の実測矩形で親の座標へ直す)
  */
 
+import { forwardEmbeddedGestures, isImeKeyEvent } from './canvas-gestures';
+
 const ZOOM_KEYS = new Set(['=', '+', '-', '_', ';']);
 
 function isTypingTarget(target: EventTarget | null): boolean {
@@ -50,11 +52,8 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
     );
   };
 
-  // ---- Safari の gesture(ピンチ)はブラウザ拡大を止めるだけ
-  const handleGesture = (e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
+  // ---- Safari・WKWebView の gesture(ピンチ)も外へ(親が拡大縮小する。ブラウザの拡大は止める)
+  const disposeGestures = forwardEmbeddedGestures({ doc: iframeDoc, toParent, post: (message) => parent.postMessage(message, '*') });
 
   // ---- 2 本指タッチ = ピンチ
   let lastDistance: number | null = null;
@@ -90,6 +89,7 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
 
   // ---- キー: Space(パン)、Cmd+/- (ズーム)、Shift+0/1/2(100%・全体・このページ)、Shift+R(定規)
   const forwardKey = (kind: 'down' | 'up') => (e: KeyboardEvent) => {
+    if (isImeKeyEvent(e)) return; // IME の変換中のキーは奪わない
     const cmd = e.metaKey || e.ctrlKey;
     const typing = isTypingTarget(e.target);
     const isSpace = e.code === 'Space';
@@ -128,9 +128,6 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
 
   const options: AddEventListenerOptions = { passive: false, capture: true };
   iframeDoc.addEventListener('wheel', handleWheel, options);
-  iframeDoc.addEventListener('gesturestart', handleGesture, options);
-  iframeDoc.addEventListener('gesturechange', handleGesture, options);
-  iframeDoc.addEventListener('gestureend', handleGesture, options);
   iframeDoc.addEventListener('touchstart', handleTouchStart, options);
   iframeDoc.addEventListener('touchmove', handleTouchMove, options);
   iframeDoc.addEventListener('touchend', handleTouchEnd, options);
@@ -140,10 +137,8 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
   iframeDoc.addEventListener('mousedown', handleMouseDown, options);
 
   return () => {
+    disposeGestures();
     iframeDoc.removeEventListener('wheel', handleWheel, options);
-    iframeDoc.removeEventListener('gesturestart', handleGesture, options);
-    iframeDoc.removeEventListener('gesturechange', handleGesture, options);
-    iframeDoc.removeEventListener('gestureend', handleGesture, options);
     iframeDoc.removeEventListener('touchstart', handleTouchStart, options);
     iframeDoc.removeEventListener('touchmove', handleTouchMove, options);
     iframeDoc.removeEventListener('touchend', handleTouchEnd, options);