@growgroup/visual-editor 0.9.1 → 0.11.0

package/src/editor/contexts/EditorHistoryContext.tsx

@@ -38,6 +38,7 @@ import React, {
   useState,
 } from 'react';
 import { MAX_HISTORY_SIZE } from '../../types/editor';
+import { COALESCE_WINDOW_MS } from '../utils/history-timing';
 import { useEditorRefs } from './EditorRefsContext';
 
 export interface EditorHistoryContextValue {
@@ -77,8 +78,8 @@ export function useEditorHistory(): EditorHistoryContextValue {
  * - 矢印キーのキーリピート(約30ms間隔)・テキスト入力・プロパティ入力が1エントリにまとまる
  * - 意図的に間を空けた操作(400ms超)は別エントリのまま残る
  * ドラッグ/リサイズはmouseupで1回しかpushされないため、この窓に依存せず元から1エントリ。
+ * 値は utils/history-timing.ts の COALESCE_WINDOW_MS(数字キーの2桁入力と共有)。
  */
-const COALESCE_WINDOW_MS = 400;
 
 /**
  * 履歴に残してはいけないエディタUIのノード。
@@ -156,6 +157,10 @@ function normalizeSnapshot(rawHtml: string): { html: string; signature: string }
         node.classList.remove(cls);
       });
     });
+    // レイヤーパネルの行のホバー強調(属性)も一時状態。焼き付けると ⌘Z で強調が戻ってくる
+    template.content.querySelectorAll('[data-layer-hover]').forEach((node) => {
+      node.removeAttribute('data-layer-hover');
+    });
     // 空になったclass属性は落とす。
     // 「元から空」と「剥がして空になった」が同じ表記になるようにして、
     // 見た目が同じなのに別状態と判定される（＝何も起きないUndoが増える）のを防ぐ。

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;
@@ -72,6 +76,14 @@ export const RULER_SIZE = 20;
 const VIEW_ANIMATION_MS = 240;
 /** 見るだけの紙面を同時に読む枚数 */
 const PREVIEW_PARALLEL = 4;
+
+/** 主スレッドが空いたときに 1 回呼ぶ(requestIdleCallback が無い環境は次のタスク)。待つのは最大 200ms */
+function scheduleIdle(cb: () => void): void {
+  const w = typeof window !== 'undefined' ? (window as Window & { requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number }) : null;
+  if (w?.requestIdleCallback) w.requestIdleCallback(cb, { timeout: 200 });
+  else setTimeout(cb, 16);
+}
+
 /**
  * 見るだけの紙面を画像で描く倍率の **上限の最大値**。これ以上に拡大されていれば、
  * どんなに解像度の高い画像でも iframe で描く(画像は文字を選べない・検索できないため)。
@@ -225,6 +237,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 +500,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 +544,8 @@ interface MultiPageCanvasProviderProps {
   enabled: boolean;
   /** 見えている範囲を保存するキー(利用側の parentId 等)。無ければ保存しない */
   storageKey?: string | null;
+  /** 拡大縮小の設定(範囲・刻み・⌘2 の合わせ先)。省略時は従来の挙動(0.10.0) */
+  zoomOptions?: CanvasZoomOptions;
 }
 
 type PersistedView = {
@@ -546,7 +574,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 +900,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 +921,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);
@@ -1086,6 +1139,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   // 保存と読み込みは利用側(FrontendVisualEditor.handleContentChange)が 1 か所で行う。
   // ここでは「どこへ移ろうとしているか」を持ち、リングを先に動かして押した手応えを返す
   const [activatingPageId, setActivatingPageId] = useState<string | null>(null);
+  // 移っている最中の数。activatePage が重なっても、全部が終わるまで 0 に戻らない(boolean だと先に終わった側が戻してしまう)
+  const activatingCountRef = useRef(0);
   const onContentChangeRef = useRef(artboard.onContentChange);
   onContentChangeRef.current = artboard.onContentChange;
   const activatePage = useCallback<MultiPageCanvasContextValue['activatePage']>(
@@ -1101,14 +1156,19 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       // この切替は終わっているので、state ではなく ref で残す
       editorInitiatedPageIdRef.current = id;
       setActivatingPageId(id);
-      if (options?.reveal) revealPage(id);
       let moved = false;
+      // 移る先の本文を読むあいだは、見るだけの紙面を新しく載せない(編集するページを先に出す)。
+      // 数を上げるのは try の直前。ここから先で例外が出ても finally で必ず下がる(下がらないと紙面が二度と載らない)
+      activatingCountRef.current += 1;
       try {
+        if (options?.reveal) revealPage(id);
         const result = await (notify as (contentId: string) => unknown)(id);
         moved = result !== false;
         return moved;
       } finally {
         setActivatingPageId((v) => (v === id ? null : v));
+        activatingCountRef.current -= 1;
+        pumpAfterInteractionRef.current();
         // 移れなかったら印を消す(残すと、あとで同じページへホスト発で移るときに視点が動かない)。
         // 別のページへ移ったあとなら消さない ── その印はそちらの切替のもの
         if (!moved && editorInitiatedPageIdRef.current === id) editorInitiatedPageIdRef.current = null;
@@ -1120,10 +1180,22 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   // ---- 操作状態
   const [isInteracting, setIsInteracting] = useState(false);
   const interactingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // パン・ズームの最中は見るだけの紙面を新しく載せない(下の pumpPreviewSlots)。
+  // iframe を載せると本文の解析・スタイル・レイアウトがその段のフレームに乗り、
+  // ズームアウトの途中で 50〜200ms のフレームが混じる(ヘッドレス 150 枚で実測)。
+  // 止まったら(160ms 後)編集中のページに近い順に、空いた時間に 1 枚ずつ載せる。
+  // それまでは骨組み(または画像)が見える。止まらずにパンし続けると、その間は 1 枚も増えない
+  const interactingRef = useRef(false);
+  const pumpAfterInteractionRef = useRef<() => void>(() => undefined);
   const markInteracting = useCallback(() => {
+    interactingRef.current = true;
     setIsInteracting(true);
     if (interactingTimer.current) clearTimeout(interactingTimer.current);
-    interactingTimer.current = setTimeout(() => setIsInteracting(false), 160);
+    interactingTimer.current = setTimeout(() => {
+      interactingRef.current = false;
+      setIsInteracting(false);
+      pumpAfterInteractionRef.current();
+    }, 160);
   }, []);
   useEffect(() => () => { if (interactingTimer.current) clearTimeout(interactingTimer.current); }, []);
 
@@ -1132,21 +1204,32 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   // ---- 見るだけの紙面の読み込み枠(同時に PREVIEW_PARALLEL 枚まで。編集中のページに近い順)
   const slotQueueRef = useRef<{ id: string; grant: () => void }[]>([]);
   const slotHoldersRef = useRef(new Set<string>());
+  // 枠は 1 回に 1 枚だけ、主スレッドが空いたとき(requestIdleCallback)に渡す。
+  // iframe を載せると本文の解析・スタイル・レイアウト・初回のラスタが同じ主スレッドに乗る。
+  // 4 枚を同じフレームで渡すと 1 フレームに 4 枚分が積まれ、編集中のページの読み込みや
+  // 直後のクリック・ページ移動の描画を押し出す(ヘッドレス 150 枚のページ移動で 30〜60ms のフレームが続いた)
+  const pumpScheduledRef = useRef(false);
   const pumpPreviewSlots = useCallback(() => {
     const holders = slotHoldersRef.current;
-    const queue = slotQueueRef.current;
-    if (holders.size >= PREVIEW_PARALLEL || queue.length === 0) return;
-    const indexById = new Map(pagesRef.current.map((p) => [p.id, p.index] as const));
-    const indexOf = (id: string) => indexById.get(id) ?? 0;
-    const activeId = viewStore.get().activePageId;
-    const activeIndex = activeId ? indexOf(activeId) : 0;
-    queue.sort((a, b) => Math.abs(indexOf(a.id) - activeIndex) - Math.abs(indexOf(b.id) - activeIndex));
-    while (holders.size < PREVIEW_PARALLEL && queue.length > 0) {
+    if (pumpScheduledRef.current) return;
+    if (holders.size >= PREVIEW_PARALLEL || slotQueueRef.current.length === 0 || interactingRef.current || activatingCountRef.current > 0) return;
+    pumpScheduledRef.current = true;
+    scheduleIdle(() => {
+      pumpScheduledRef.current = false;
+      const queue = slotQueueRef.current;
+      if (holders.size >= PREVIEW_PARALLEL || queue.length === 0 || interactingRef.current || activatingCountRef.current > 0) return;
+      const indexById = new Map(pagesRef.current.map((p) => [p.id, p.index] as const));
+      const indexOf = (id: string) => indexById.get(id) ?? 0;
+      const activeId = viewStore.get().activePageId;
+      const activeIndex = activeId ? indexOf(activeId) : 0;
+      queue.sort((a, b) => Math.abs(indexOf(a.id) - activeIndex) - Math.abs(indexOf(b.id) - activeIndex));
       const next = queue.shift()!;
       holders.add(next.id);
       next.grant();
-    }
+      pumpAfterInteractionRef.current();
+    });
   }, [viewStore]);
+  pumpAfterInteractionRef.current = pumpPreviewSlots;
   const requestPreviewSlot = useCallback<MultiPageCanvasContextValue['requestPreviewSlot']>(
     (id, grant) => {
       if (slotHoldersRef.current.has(id)) {
@@ -1223,6 +1306,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       zoomToFit,
       zoomToPage,
       zoomToActual,
+      zoomToRect,
+      zoomOptions,
       revealPage,
       focusPage,
       activatePage,
@@ -1244,7 +1329,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 +1344,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

@@ -45,6 +45,8 @@ import { SLIDE_WIDTH, SLIDE_HEIGHT, WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT } from '..
 
 // ズーム設定
 export const MIN_ZOOM = 10;    // 10%
+/** この大きさ(px)に満たない容器はまだ組み上がっていないとみなし、フィットの計算に使わない */
+const FIT_MIN_CONTAINER_PX = 120;
 export const MAX_ZOOM = 400;   // 400%
 
 /**
@@ -169,6 +171,13 @@ export function useCanvasControls() {
   // 初期ズーム設定済みフラグ
   const initialZoomSetRef = useRef(false);
 
+  // 人が倍率を動かしたか。true の間は、容器の大きさが変わってもフィットに合わせ直さない(下の updateFitZoomValue)。
+  // ホイール・ピンチ・100%・選択範囲へのズーム・倍率の直接入力で true、全体表示(⌘0 など zoomToFit)で false。
+  // 「いまの倍率がフィット値に近いか」だけで決めると、手でズームしてたまたまフィット値の近くで止めたとき、次のリサイズで追従に戻ってしまう
+  const userZoomedRef = useRef(false);
+  // このフックが自分で入れた倍率(フィット・全体表示)。これと違う倍率が入ってきたら、人(ヘッダーの倍率など外の setZoom)が動かした
+  const selfAppliedZoomRef = useRef<number | null>(null);
+
   // パンモードが有効かどうか（スペースキーまたはハンドツール）
   const isPanModeActive = isSpacePressed || activeTool === 'move';
 
@@ -307,6 +316,7 @@ export function useCanvasControls() {
   const zoomRef = useRef(zoom);
   useEffect(() => {
     zoomRef.current = zoom;
+    if (selfAppliedZoomRef.current !== null && Math.abs(zoom - selfAppliedZoomRef.current) >= 0.5) userZoomedRef.current = true;
   }, [zoom]);
 
   /**
@@ -359,6 +369,7 @@ export function useCanvasControls() {
         heldAnchorRef.current = { anchor, time: now };
       }
 
+      userZoomedRef.current = true;
       zoomRef.current = clamped;
 
       if (options?.continuous) {
@@ -422,6 +433,7 @@ export function useCanvasControls() {
         ly: rect.y + rect.h / 2,
       };
       heldAnchorRef.current = null;
+      userZoomedRef.current = true;
 
       // すでに同じ倍率なら setZoom しても再レンダーが起きない＝補正の useEffect も走らない。
       // 「押しても何も起きない」を作らないため、その場合はここで直接寄せる。
@@ -444,6 +456,8 @@ export function useCanvasControls() {
   const zoomToFit = useCallback(() => {
     heldAnchorRef.current = null;
     zoomAnchorRef.current = null;
+    userZoomedRef.current = false;
+    selfAppliedZoomRef.current = fitZoom;
     zoomRef.current = fitZoom;
     setZoom(fitZoom);
   }, [fitZoom, setZoom]);
@@ -452,6 +466,7 @@ export function useCanvasControls() {
   const zoomToActual = useCallback(() => {
     heldAnchorRef.current = null;
     zoomAnchorRef.current = null;
+    userZoomedRef.current = true;
     zoomRef.current = 100;
     setZoom(100);
   }, [setZoom]);
@@ -545,26 +560,48 @@ export function useCanvasControls() {
     return Math.floor(Math.min(scaleX, scaleY) * 100);
   }, [containerRef, canvasWidth, canvasHeight]);
 
-  // 初期化時とウィンドウリサイズ時にフィットズームを計算
+  // 初期化時と容器の大きさが変わったときにフィットズームを計算する。
+  // 「全体表示のまま」(人がまだ倍率を動かしていない = userZoomedRef が false)なら
+  // 倍率もフィットに合わせ直す(PowerPoint の「スライドを画面に合わせる」と同じ)。
+  // 合わせ直すのはスライド(高さが決まっている)だけ。webpage は本文の高さ(canvasHeight)が変わるたびに
+  // フィット値が変わるので、追従させると編集中に倍率が勝手に動く。webpage は最初の 1 回だけ合わせる(以前と同じ)。
+  // 以前は 100ms 後に 1 回だけ合わせていたので、その時点で容器が組み上がっていない
+  // (キャンバス →「1 枚」の切替直後・パネルが後から開く)と 3〜19% の豆粒のまま残った。
+  // 容器の大きさの変化は window の resize では拾えない(パネルの開閉)ので ResizeObserver で見る
+  const fitZoomRef = useRef(fitZoom);
+  fitZoomRef.current = fitZoom;
   useEffect(() => {
     if (isInMultiPageMode) return;
 
     const updateFitZoomValue = () => {
+      const container = containerRef.current;
+      // 組み上がる前(幅・高さがほぼ 0)の値で倍率を決めない
+      if (!container || container.clientWidth < FIT_MIN_CONTAINER_PX || container.clientHeight < FIT_MIN_CONTAINER_PX) return;
       const newFitZoom = calculateFitZoom();
+      const followsFit = !initialZoomSetRef.current || (editorMode !== 'webpage' && !userZoomedRef.current);
+      fitZoomRef.current = newFitZoom;
       setFitZoom(newFitZoom);
-      if (!initialZoomSetRef.current) {
+      if (followsFit && Math.abs(zoomRef.current - newFitZoom) >= 0.5) {
+        selfAppliedZoomRef.current = newFitZoom;
+        zoomRef.current = newFitZoom;
         setZoom(newFitZoom);
-        initialZoomSetRef.current = true;
+      } else if (followsFit) {
+        selfAppliedZoomRef.current = zoomRef.current;
       }
+      initialZoomSetRef.current = true;
     };
 
     const timer = setTimeout(updateFitZoomValue, 100);
     window.addEventListener('resize', updateFitZoomValue);
+    const container = containerRef.current;
+    const observer = container && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => updateFitZoomValue()) : null;
+    if (container) observer?.observe(container);
     return () => {
       clearTimeout(timer);
       window.removeEventListener('resize', updateFitZoomValue);
+      observer?.disconnect();
     };
-  }, [calculateFitZoom, setFitZoom, setZoom, isInMultiPageMode]);
+  }, [calculateFitZoom, setFitZoom, setZoom, isInMultiPageMode, containerRef, editorMode]);
 
   // 初回マウント時に中央配置
   useEffect(() => {
@@ -610,12 +647,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 });