@growgroup/visual-editor 0.3.1 → 0.4.0

package/src/editor/components/multi-page/MultiPageCanvasView.tsx

@@ -9,25 +9,37 @@
  * 層の構成(下から):
  *   1. 転写層(translate + scale)… フレームの白地 + 見るだけの紙面(PageFramePreview)
  *   2. 転写層の中、編集中のフレームの位置に EditorCanvas(1 つだけ。ページを移っても作り直さない)
- *   3. 画面座標のオーバーレイ … フレーム名・選択リング(倍率に関係なく同じ太さ・同じ文字サイズ)
- *   4. 定規
+ *   3. 飾りの canvas(画面の座標)… フレームの枠線・階層の線
+ *   4. オーバーレイ(転写層と同じ translate + scale)… フレーム名・選択リング。
+ *      中身は紙面の座標に置いて scale(1/倍率) で打ち消すので、画面上は倍率に関係なく同じ大きさ
+ *   5. 定規
  *
  * EditorCanvas を pages.map の中に置くとページを移るたびに React が作り直して
  * iframe が読み直される。map の外に 1 つだけ置き、位置だけ動かす
  *
  * [パン・ズームの軽さ]
- * パンは 2 つの層の transform 文字列を変えるだけにする。フレーム 1 枚ずつの要素
- * (FrameShell / FrameChrome)は memo で、位置は倍率だけに依存させる(画面上の位置 =
- * 層の translate + 紙面の位置 × 倍率)。150 枚あってもパンで描き直る要素は 2 つ。
- * ズームは倍率に依存する要素が描き直る(それでも小さな要素が 300 個ほど)
+ * ホイール 1 段の仕事を「合成だけ」にする。倍率・位置は React を通さず、viewStore を
+ * 直接購読して 2 つの層の style へ書く(転写層とオーバーレイの transform、オーバーレイの
+ * --ed-zoom / --ed-inv、容器の data-canvas-zoom の 4 つだけ)。フレーム 1 枚ずつの要素は
+ * memo で、倍率を props に持たない。
+ *
+ * 転写層の中には「白い矩形 + 合成済みの iframe」しか置かない。枠線(box-shadow / outline /
+ * border のどれでも)や階層の線(SVG)を中に置くと、倍率が変わるたびに転写層まるごとが
+ * 塗り直され、1 段 10〜20ms の Paint になる(実測)。枠線と線は画面の座標の canvas
+ * (CanvasFrameDecor)へ出した。
+ *
+ * 名前の幅と出し分けだけは DOM のままなので、段ごとではなく **粗い倍率**
+ * (coarseZoom、150ms に 1 回まで。操作の終わりに必ず追いつく)から決める
  */
 
-import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   useMultiPageCanvas,
-  useCanvasViewState,
+  useCanvasActivePageId,
   RULER_SIZE,
   FRAME_GAP,
+  PREVIEW_IMAGE_ZOOM,
+  PREVIEW_IMAGE_ZOOM_OUT,
   type PageFrameLayout,
 } from '../../contexts/MultiPageCanvasContext';
 import { useEditorContext } from '../../EditorContext';
@@ -38,11 +50,25 @@ import { EditorAppearanceContext } from '../../contexts/EditorAppearanceContext'
 import { EditorCanvas } from '../EditorCanvas';
 import { PageFramePreview } from './PageFramePreview';
 import { CanvasRulers } from './CanvasRulers';
+import { CanvasFrameDecor } from './CanvasFrameDecor';
 import { cn } from '../../../lib/utils';
 import { ArrowUpRight } from 'lucide-react';
 
 /** フレーム名の高さ(px、画面上)。フレームの上端との間隔 */
 const LABEL_HEIGHT = 20;
+/**
+ * 粗い倍率を更新する間隔(ms)。これを短くすると縮小中の塗り直しが増える。
+ * 操作の終わりには必ず本当の倍率に追いつく(末尾で 1 回)
+ */
+const COARSE_ZOOM_MS = 150;
+/** 紙面を画像に落とすかの判定を、操作が止まってから何 ms 後に見るか(全体表示の 240ms の動きを跨がない) */
+const PREVIEW_MODE_SETTLE_MS = 300;
+/**
+ * この倍率より小さいところにいる間は、紙面の画像(thumbnail)を裏で先に読んでおく。
+ * 読めていない画像は縮小の途中で使えない(空白のフレームになるので iframe を見せ続ける)。
+ * 1 ページを大きく開いて編集しているときは読まない(利用側に 26 枚の画像を作らせない)
+ */
+const PREVIEW_IMAGE_PRELOAD_ZOOM = 1.2;
 
 // ------------------------------------------------------------
 // フレームの白地 + 見るだけの紙面(転写層の中。紙面の座標)
@@ -50,47 +76,53 @@ const LABEL_HEIGHT = 20;
 
 interface FrameShellProps {
   page: PageFrameLayout;
-  zoom: number;
   isActive: boolean;
   passThrough: boolean;
+  /** 大きく縮小している間は紙面を画像で描く(この層の zoom には依存しない真偽値) */
+  imageMode: boolean;
+  /** 画像を裏で先に読んでおく(縮小の途中で切り替えられるように) */
+  preloadImage: boolean;
   rootRef: React.RefObject<HTMLDivElement | null>;
   onMouseDown: (e: React.MouseEvent, id: string) => void;
   onHover: (id: string | null) => void;
 }
 
-const FrameShell = memo(function FrameShell({ page, zoom, isActive, passThrough, rootRef, onMouseDown, onHover }: FrameShellProps) {
+/**
+ * 倍率を props に持たない(持たせるとホイール 1 段ごとに 26 枚が React を通る)。
+ * 枠線はこの要素には無い ── 画面の座標の canvas(CanvasFrameDecor)が描く
+ */
+const FrameShell = memo(function FrameShell({ page, isActive, passThrough, imageMode, preloadImage, rootRef, onMouseDown, onHover }: FrameShellProps) {
   return (
     <div
       data-page-frame={page.id}
       data-page-active={isActive ? 'true' : undefined}
-      className="absolute"
+      className="ed-frame-shell absolute"
       style={{
         left: page.position.x,
         top: page.position.y,
         width: page.size.width,
         height: page.size.height,
-        background: '#fff',
-        boxShadow: `0 0 0 ${1 / zoom}px var(--ed-frame-edge, rgba(0,0,0,0.08))`,
         cursor: isActive || passThrough ? undefined : 'pointer',
       }}
       onMouseDown={(e) => onMouseDown(e, page.id)}
       onMouseEnter={() => onHover(page.id)}
       onMouseLeave={() => onHover(null)}
     >
-      <PageFramePreview page={page} rootRef={rootRef} />
+      <PageFramePreview page={page} rootRef={rootRef} imageMode={imageMode} preloadImage={preloadImage} />
     </div>
   );
 });
 
 // ------------------------------------------------------------
-// フレーム名・リング(オーバーレイの中。画面の座標 = 紙面の位置 × 倍率)
+// フレーム名・リング(オーバーレイの中)
 // ------------------------------------------------------------
 
 interface FrameChromeProps {
   page: PageFrameLayout;
-  zoom: number;
-  /** 名前を出せる倍率か(行の隙間に名前が収まる)。全フレーム共通なので親で判定する */
-  labelsVisible: boolean;
+  /** 名前を出すか(粗い倍率から親が判定する。全フレーム共通の条件 + このフレームの幅) */
+  showLabel: boolean;
+  /** 「別タブで開く」を出すか(名前の右。フレームが細いときは出さない) */
+  showLink: boolean;
   /** リングと名前の強調(切替中はクリックしたページへ先に移る) */
   isSelected: boolean;
   isHover: boolean;
@@ -100,18 +132,31 @@ interface FrameChromeProps {
   onZoomTo: (id: string) => void;
 }
 
-const FrameChrome = memo(function FrameChrome({ page, zoom, labelsVisible, isSelected, isHover, isBusy, onActivate, onZoomTo }: FrameChromeProps) {
-  const sx = page.position.x * zoom;
-  const sy = page.position.y * zoom;
-  const sw = page.size.width * zoom;
-  const sh = page.size.height * zoom;
-  // 縮小してフレームが細くなったら名前は幅に収める(重ならない)。極端に小さければ出さない
-  const showLabel = labelsVisible && sw >= 28;
+/**
+ * オーバーレイは転写層と同じ transform(translate + scale)なので、ここで scale(1/倍率) を
+ * 掛けて打ち消す。こうすると中身は画面上の大きさのまま、位置は紙面の座標で書ける
+ * (段ごとに React を通さず、--ed-inv が変わるだけで動く)。
+ * リングだけは画面上の寸法が要るので --ed-zoom から CSS で出す(段ごとに変わるのは 1〜2 個)
+ */
+const FrameChrome = memo(function FrameChrome({ page, showLabel, showLink, isSelected, isHover, isBusy, onActivate, onZoomTo }: FrameChromeProps) {
+  const hasRing = isSelected || isHover;
   return (
-    <div className="absolute left-0 top-0" data-frame-chrome={page.id} style={{ transform: `translate(${sx}px, ${sy}px)` }}>
+    <div
+      className="absolute left-0 top-0"
+      data-frame-chrome={page.id}
+      style={{
+        transform: `translate(${page.position.x}px, ${page.position.y}px) scale(var(--ed-inv, 1))`,
+        transformOrigin: '0 0',
+        // 名前だけの小さな層にしておく(倍率が変わっても塗り直さずに動く)。
+        // リングが出ているフレームはフレームと同じ大きさになるので層にしない(巨大な合成層を作らない)
+        willChange: hasRing ? undefined : 'transform',
+        ['--ed-fw' as string]: `${page.size.width}px`,
+        ['--ed-fh' as string]: `${page.size.height}px`,
+      }}
+    >
       {/* フレーム名(Figma: フレームの左上、倍率に関係なく同じ大きさ)+ 別タブで開く(href があるとき) */}
       {showLabel && (
-        <div className="ed-frame-label-row" style={{ top: -LABEL_HEIGHT, maxWidth: Math.max(28, sw) }}>
+        <div className="ed-frame-label-row" style={{ top: -LABEL_HEIGHT, maxWidth: 'max(28px, calc(var(--ed-fw) * var(--ed-zoom, 1)))' }}>
           <button
             type="button"
             data-frame-label={page.id}
@@ -126,7 +171,7 @@ const FrameChrome = memo(function FrameChrome({ page, zoom, labelsVisible, isSel
             {page.isDirty && <span className="ed-frame-label-dirty" aria-label="未保存の変更" />}
             {isBusy && <span className="ed-frame-label-loading" aria-label="読み込み中" />}
           </button>
-          {page.href && sw >= 96 && (
+          {page.href && showLink && (
             <a
               className="ed-frame-label-link"
               data-frame-link={page.id}
@@ -143,46 +188,17 @@ const FrameChrome = memo(function FrameChrome({ page, zoom, labelsVisible, isSel
           )}
         </div>
       )}
-      {/* リング(選択中 = 実線、ホバー = 淡い実線) */}
-      {(isSelected || isHover) && (
+      {/* リング(選択中 = 実線、ホバー = 淡い実線)。画面上の寸法 = 紙面の寸法 × 倍率 */}
+      {hasRing && (
         <div
           className={cn('ed-frame-ring', isSelected ? 'ed-frame-ring-active' : 'ed-frame-ring-hover')}
-          style={{ width: sw, height: sh }}
+          style={{ width: 'calc(var(--ed-fw) * var(--ed-zoom, 1))', height: 'calc(var(--ed-fh) * var(--ed-zoom, 1))' }}
         />
       )}
     </div>
   );
 });
 
-// ------------------------------------------------------------
-// 階層の線(親の下端の中央 → 子の上端の中央。転写層の中、紙面の座標)
-// ------------------------------------------------------------
-
-const TreeConnectors = memo(function TreeConnectors({ pages, gapY }: { pages: PageFrameLayout[]; gapY: number }) {
-  const byId = useMemo(() => new Map(pages.map((p) => [p.id, p] as const)), [pages]);
-  const d = useMemo(() => {
-    const parts: string[] = [];
-    pages.forEach((child) => {
-      const parent = child.parentId ? byId.get(child.parentId) : undefined;
-      if (!parent) return;
-      const x1 = parent.position.x + parent.size.width / 2;
-      const y1 = parent.position.y + parent.size.height;
-      const x2 = child.position.x + child.size.width / 2;
-      const y2 = child.position.y;
-      // 親の下から、子の行との隙間の真ん中まで下り、横へ移って子の上へ
-      const ym = y2 - gapY / 2;
-      parts.push(`M${x1} ${y1} V${ym} H${x2} V${y2}`);
-    });
-    return parts.join(' ');
-  }, [pages, byId, gapY]);
-  if (!d) return null;
-  return (
-    <svg className="ed-frame-connectors" data-canvas-connectors aria-hidden="true" width={1} height={1} style={{ overflow: 'visible' }}>
-      <path d={d} fill="none" vectorEffect="non-scaling-stroke" />
-    </svg>
-  );
-});
-
 // ------------------------------------------------------------
 // キャンバス
 // ------------------------------------------------------------
@@ -192,7 +208,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const {
     pages,
     bounds,
-    layout,
+    viewStore,
     registerContainer,
     activatePage,
     activatingPageId,
@@ -203,10 +219,14 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     isInteracting,
     initialViewRestored,
   } = canvas;
-  const { canvasOffset, canvasZoom, activePageId } = useCanvasViewState();
+  // 倍率・位置は購読しない(ホイール 1 段ごとにキャンバス全体が React を通ってしまう)。
+  // 描画に要る「粗い倍率」だけを下の useLayoutEffect が間引いて渡す
+  const activePageId = useCanvasActivePageId();
   const { setZoom, setFitZoom, activeTool, iframeReady } = useEditorContext();
   const theme = useContext(EditorAppearanceContext) ?? 'light';
   const containerRef = useRef<HTMLDivElement>(null);
+  const layerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
   const active = useMemo(() => pages.find((p) => p.id === activePageId) ?? null, [pages, activePageId]);
   // リング・名前の強調は「移ろうとしているページ」を優先する(押した瞬間に手応えを返す)
   const selectedId = activatingPageId ?? activePageId;
@@ -223,6 +243,60 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     return () => registerContainer(null);
   }, [registerContainer]);
 
+  // ---- 倍率・位置の反映(React を通さない)
+  const [coarseZoom, setCoarseZoom] = useState(() => viewStore.get().canvasZoom);
+  const coarseZoomRef = useRef(coarseZoom);
+  coarseZoomRef.current = coarseZoom;
+
+  useLayoutEffect(() => {
+    let lastZoom = NaN;
+    let coarseTimer: ReturnType<typeof setTimeout> | null = null;
+    let coarseAt = 0;
+    const pushCoarse = () => {
+      coarseAt = performance.now();
+      const z = viewStore.get().canvasZoom;
+      if (coarseZoomRef.current === z) return;
+      coarseZoomRef.current = z;
+      setCoarseZoom(z);
+    };
+    const write = () => {
+      const { canvasOffset: o, canvasZoom: z } = viewStore.get();
+      const transform = `translate(${o.x}px, ${o.y}px) scale(${z})`;
+      if (layerRef.current) layerRef.current.style.transform = transform;
+      const overlay = overlayRef.current;
+      if (overlay) overlay.style.transform = transform;
+      if (z === lastZoom) return;
+      lastZoom = z;
+      if (overlay) {
+        // 中身の scale(1/倍率) とリングの寸法に使う。この 1 要素だけが段ごとに変わる
+        overlay.style.setProperty('--ed-zoom', String(z));
+        overlay.style.setProperty('--ed-inv', String(1 / z));
+      }
+      // 検証スクリプトとヘッダーの表示が読む(四捨五入した %)
+      const el = containerRef.current;
+      const pct = String(Math.round(z * 100));
+      if (el && el.getAttribute('data-canvas-zoom') !== pct) el.setAttribute('data-canvas-zoom', pct);
+      // 縮小の途中でも 0.4 を割ったら、画像が読めている紙面は iframe を止めて画像を前に出す
+      // (CSS が拾う。属性 1 つの書き換えで 26 枚がいっぺんに切り替わり、React は通らない)。
+      // iframe を外してメモリを返すのは操作が止まってから(下の imageMode)。
+      // 外す向き(画像 → iframe)もここではやらない ── 止まってから 0.5 以上で判定する
+      if (el && z < PREVIEW_IMAGE_ZOOM_OUT && el.getAttribute('data-canvas-preview-image') !== '1') {
+        el.setAttribute('data-canvas-preview-image', '1');
+      }
+      // 粗い倍率: 150ms に 1 回まで。末尾のタイマーで操作の終わりに必ず追いつく
+      if (coarseTimer) clearTimeout(coarseTimer);
+      const elapsed = performance.now() - coarseAt;
+      if (elapsed >= COARSE_ZOOM_MS) pushCoarse();
+      else coarseTimer = setTimeout(() => { coarseTimer = null; pushCoarse(); }, COARSE_ZOOM_MS - elapsed);
+    };
+    write();
+    const unsubscribe = viewStore.subscribe(write);
+    return () => {
+      unsubscribe();
+      if (coarseTimer) clearTimeout(coarseTimer);
+    };
+  }, [viewStore]);
+
   // エディタの内側の倍率は 100% 固定(倍率は外側の transform が持つ)
   useEffect(() => {
     setZoom(100);
@@ -289,44 +363,59 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const handleActivate = useCallback((id: string) => { void activatePage(id, { reveal: true }); }, [activatePage]);
   const handleZoomTo = useCallback((id: string) => zoomToPage(id, { animate: true }), [zoomToPage]);
 
+  // ---- 紙面を画像に落とすか(大きく縮小している間だけ)
+  // 判定は操作が止まってからしか動かさない。縮小の途中で 26 枚の iframe を差し替えると、
+  // 軽くするための切替そのものが重いフレームを作る
+  const [imageMode, setImageMode] = useState(() => viewStore.get().canvasZoom < PREVIEW_IMAGE_ZOOM_OUT);
+  const imageModeRef = useRef(imageMode);
+  imageModeRef.current = imageMode;
+  useEffect(() => {
+    if (isInteracting) return;
+    const timer = setTimeout(() => {
+      const z = viewStore.get().canvasZoom;
+      // ヒステリシス: 画像 → iframe は 0.5 以上、iframe → 画像は 0.4 未満(境目で行き来しない)
+      const next = imageModeRef.current ? z < PREVIEW_IMAGE_ZOOM : z < PREVIEW_IMAGE_ZOOM_OUT;
+      if (next !== imageModeRef.current) setImageMode(next);
+      // iframe に戻す向きに決まったら、縮小の途中で立てた掛け金も外す(iframe がまた見える)
+      if (!next) containerRef.current?.removeAttribute('data-canvas-preview-image');
+    }, PREVIEW_MODE_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [isInteracting, coarseZoom, viewStore]);
+  // 画像を裏で先に読んでおくか(粗い倍率なので、段ごとには変わらない真偽値)
+  const preloadImage = coarseZoom < PREVIEW_IMAGE_PRELOAD_ZOOM;
+
   const cursor = isPanning ? 'grabbing' : isSpaceHeld || activeTool === 'move' ? 'grab' : undefined;
   // 行の隙間(画面上)に名前が収まらない倍率では名前を出さない。出すと下の行の名前が
   // 上の行のフレームに被り、フレームのクリックを奪う(150 枚の全体表示で実測)
-  const labelsVisible = FRAME_GAP[canvas.editorMode].y * canvasZoom >= LABEL_HEIGHT + 6;
-  // data-interacting はズーム・パン中の印(CSS・検証用のフック。中では willChange に使う)
-  const layerTransform = `translate(${canvasOffset.x}px, ${canvasOffset.y}px) scale(${canvasZoom})`;
-  const overlayTransform = `translate(${canvasOffset.x}px, ${canvasOffset.y}px)`;
+  const labelsVisible = FRAME_GAP[canvas.editorMode].y * coarseZoom >= LABEL_HEIGHT + 6;
 
   return (
     <div
       ref={containerRef}
       data-infinite-canvas="true"
-      data-canvas-zoom={Math.round(canvasZoom * 100)}
       data-interacting={isInteracting ? 'true' : undefined}
       className="absolute inset-0 overflow-hidden select-none"
       style={{ background: 'var(--ed-canvas, var(--ed-bg))', cursor, touchAction: 'none', overscrollBehavior: 'none' }}
       onMouseDown={onMarqueeMouseDown}
     >
-      {/* 転写層 */}
+      {/* 転写層(transform は useLayoutEffect が直接書く。React の style には入れない) */}
       <div
+        ref={layerRef}
         data-canvas-transform-layer
         className="absolute left-0 top-0"
         style={{
-          transform: layerTransform,
           transformOrigin: '0 0',
           willChange: isInteracting ? 'transform' : undefined,
         }}
       >
-        {/* 階層の線(フレームの下に描く。線の太さは倍率に関係なく一定 = non-scaling-stroke) */}
-        {layout === 'tree' && <TreeConnectors pages={pages} gapY={FRAME_GAP[canvas.editorMode].y} />}
-
         {pages.map((page) => (
           <FrameShell
             key={page.id}
             page={page}
-            zoom={canvasZoom}
             isActive={page.id === activePageId}
             passThrough={passThrough}
+            imageMode={imageMode}
+            preloadImage={preloadImage}
             rootRef={containerRef}
             onMouseDown={handleFrameMouseDown}
             onHover={handleHover}
@@ -356,20 +445,27 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
         )}
       </div>
 
-      {/* 画面座標のオーバーレイ: フレーム名・リング(層ごと平行移動。倍率だけ各要素に渡す) */}
+      {/* フレームの枠線と階層の線(画面の座標の canvas)。転写層の中に置くと 1 段ごとに
+          転写層まるごとが塗り直される ── 詳しくは CanvasFrameDecor の頭の注記 */}
+      <CanvasFrameDecor theme={theme} />
+
+      {/* オーバーレイ: フレーム名・リング。転写層と同じ transform を掛け、中身が scale(1/倍率) で戻す */}
       <div
+        ref={overlayRef}
         className="pointer-events-none absolute left-0 top-0 z-10"
         data-canvas-overlay
-        style={{ transform: overlayTransform, willChange: isInteracting ? 'transform' : undefined }}
+        style={{ transformOrigin: '0 0', willChange: isInteracting ? 'transform' : undefined }}
       >
         {pages.map((page) => {
           const isSelected = page.id === selectedId;
+          // 縮小してフレームが細くなったら名前は出さない(重ならない)。粗い倍率で判定する
+          const screenWidth = page.size.width * coarseZoom;
           return (
             <FrameChrome
               key={page.id}
               page={page}
-              zoom={canvasZoom}
-              labelsVisible={labelsVisible}
+              showLabel={labelsVisible && screenWidth >= 28}
+              showLink={screenWidth >= 96}
               isSelected={isSelected}
               isHover={hoverId === page.id && !isSelected && !passThrough}
               isBusy={page.loading || page.id === activatingPageId || (page.id === activePageId && !iframeReady)}

package/src/editor/components/multi-page/PageFramePreview.tsx

@@ -14,6 +14,12 @@
  *   1 枚ごとに「Blocked script execution in 'about:srcdoc'」をコンソールへ出す(実測 26 枚 = 26 件)
  * - 本文が外から変わった(revision / invalidatePages)ときは、次の本文が来るまで前の姿を出したまま読み直す
  * - 文書の属性(documentAttributes)は読み直さずに <html> へ付け替える
+ *
+ * [大きく縮小している間は画像]
+ * 全体が見えるところまで縮めると、26 枚の iframe を倍率が変わるたびにラスタライズし直す
+ * のが一番重い。利用側が contentList[].thumbnail(ページ全体を写した画像)を渡していれば、
+ * 倍率が PREVIEW_IMAGE_ZOOM 未満の間は iframe を外して画像 1 枚にする(本文も読まない)。
+ * 画像が無いページ・画像が読めなかったページは今までどおり iframe
  */
 
 import { memo, useEffect, useRef, useState } from 'react';
@@ -36,9 +42,16 @@ interface PageFramePreviewProps {
   page: PageFrameLayout;
   /** 画面上の判定に使う容器(IntersectionObserver の root) */
   rootRef: React.RefObject<HTMLDivElement | null>;
+  /** キャンバスが大きく縮小されている(親が操作の終わりに決める。段ごとには変わらない) */
+  imageMode?: boolean;
+  /**
+   * 画像を裏で先に読んでおく。縮小の途中(倍率 0.4 未満)で iframe を止めて画像を前に出すのは
+   * CSS の仕事だが、そのとき画像が読めていないと空白のフレームになる。だから先に読ませる
+   */
+  preloadImage?: boolean;
 }
 
-export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }: PageFramePreviewProps) {
+export const PageFramePreview = memo(function PageFramePreview({ page, rootRef, imageMode = false, preloadImage = false }: PageFramePreviewProps) {
   const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes } = useMultiPageCanvas();
   const documentAttributesRef = useRef(documentAttributes);
   documentAttributesRef.current = documentAttributes;
@@ -47,6 +60,13 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
   const [nearViewport, setNearViewport] = useState(false);
   const [loaded, setLoaded] = useState(false);
 
+  // 画像の URL が変わったら、前の URL で失敗した記録は捨てる(直った画像が二度と出ないのを防ぐ)
+  const [imageFailed, setImageFailed] = useState(false);
+  useEffect(() => { setImageFailed(false); }, [page.thumbnail]);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  useEffect(() => { setImageLoaded(false); }, [page.thumbnail]);
+  const useImage = imageMode && !!page.thumbnail && !imageFailed;
+
   // 画面に近づいたら描く(遠ざかっても消さない: 戻ったときに白く抜けないため)
   useEffect(() => {
     const host = hostRef.current;
@@ -63,8 +83,9 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
   }, [rootRef]);
 
   // webpage は高さの実測がレイアウトに要る(未測定だと仮の高さで並ぶ)ので、見えていなくても読む。
-  // slide は寸法が決まっているので見えたときだけ。どちらも同時に読む枚数は絞る(順番待ち)
-  const wantsMount = editorMode === 'webpage' || nearViewport;
+  // slide は寸法が決まっているので見えたときだけ。どちらも同時に読む枚数は絞る(順番待ち)。
+  // 画像で描いている間は本文を読まない(iframe も載せない)
+  const wantsMount = !useImage && (editorMode === 'webpage' || nearViewport);
   const [granted, setGranted] = useState(false);
   const grantedRef = useRef(false);
   useEffect(() => {
@@ -79,7 +100,17 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
     };
   }, [wantsMount, page.id, requestPreviewSlot, releasePreviewSlot]);
   useEffect(() => () => releasePreviewSlot(page.id), [page.id, releasePreviewSlot]);
-  const shouldMount = granted;
+
+  // 画像に落ちたら iframe を外してメモリを返す(戻ってきたら順番待ちから取り直す)
+  useEffect(() => {
+    if (!useImage) return;
+    grantedRef.current = false;
+    setGranted(false);
+    setLoaded(false);
+    releasePreviewSlot(page.id);
+  }, [useImage, page.id, releasePreviewSlot]);
+
+  const shouldMount = granted && !useImage;
 
   useEffect(() => {
     if (shouldMount && page.html == null && !page.loading && !page.error) void ensurePageHtml(page.id);
@@ -92,10 +123,12 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
     setDoc(generatePreviewHtml(page.html, editorMode, page.size.width, previewStyles));
   }, [shouldMount, page.html, editorMode, page.size.width, previewStyles]);
 
-  // 高さの実測(同一オリジンなので親から読む)
+  // 高さの実測(同一オリジンなので親から読む)。
+  // shouldMount を deps に入れるのは、画像から iframe に戻ったとき(doc は前のまま)にも
+  // 新しい iframe へ load を張り直すため
   useEffect(() => {
     const iframe = iframeRef.current;
-    if (!iframe || doc == null) return;
+    if (!iframe || doc == null || !shouldMount) return;
     let observer: ResizeObserver | null = null;
     let disposed = false;
     const measure = () => {
@@ -126,12 +159,14 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
       }
     };
     iframe.addEventListener('load', onLoad);
+    // 画像から戻ったときは srcdoc が同じなので load が来ないことがある。読めていればその場で測る
+    if (iframe.contentDocument?.readyState === 'complete') onLoad();
     return () => {
       disposed = true;
       iframe.removeEventListener('load', onLoad);
       observer?.disconnect();
     };
-  }, [doc, page.id, setPageHeight]);
+  }, [doc, shouldMount, page.id, setPageHeight]);
 
   // 文書の属性が変わったら、読み直さずに <html> へ付け替える(読み込み前なら onLoad が付ける)
   useEffect(() => {
@@ -154,21 +189,60 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
     return () => clearTimeout(timer);
   }, [granted, loaded, page.error, page.id, releasePreviewSlot]);
 
+  /**
+   * 画像を出す(または iframe の下に敷いておく)か。敷いておく理由は 2 つ:
+   * - 画像 → iframe に戻る途中、本文が描けるまで下に見せる(26 枚が一度白く抜けない)
+   * - 縮小の途中で 0.4 を割ったとき、CSS が iframe を止めるだけで画像に切り替わる
+   *   (読めていない画像は data-image-ready が付かないので、iframe を見せたまま)
+   */
+  const showImage = !!page.thumbnail && !imageFailed && (useImage || preloadImage || !loaded);
+
   return (
     <div
       ref={hostRef}
       className="absolute inset-0 overflow-hidden"
       data-page-preview={page.id}
+      data-preview-mode={useImage ? 'image' : 'iframe'}
+      // 画像が読めている = 縮小の途中でも iframe を止めて前に出せる(skin.css が拾う)
+      data-image-ready={showImage && imageLoaded ? '1' : undefined}
       style={{ background: '#fff' }}
     >
-      {doc != null ? (
+      {showImage && (
+        <img
+          src={page.thumbnail}
+          alt=""
+          aria-hidden="true"
+          draggable={false}
+          decoding="async"
+          className="absolute inset-0 block"
+          style={{
+            width: '100%', height: '100%', objectFit: 'fill', pointerEvents: 'none',
+            // iframe と同じ理由。無いと倍率が変わるたびに 26 枚の画像がラスタライズし直され、
+            // 画像に落としたのに縮小 p95 が 19〜23ms のままになる(付けると 16ms 台。実測)
+            willChange: 'transform',
+          }}
+          onLoad={(e) => {
+            setImageLoaded(true);
+            // 画像しか出していないページは iframe が高さを測れない。画像はページと同じ縦横比
+            // (利用側との約束)なので、フレームの幅から高さを出して並びを正す
+            const img = e.currentTarget;
+            if (!img.naturalWidth || !img.naturalHeight) return;
+            setPageHeight(page.id, (page.size.width * img.naturalHeight) / img.naturalWidth, 'preview');
+          }}
+          onError={() => setImageFailed(true)}
+        />
+      )}
+      {useImage ? (
+        // 画像がまだ来ていない間は骨組みを下に敷く(白く抜けない)
+        !imageLoaded && <div className="ed-frame-skeleton" aria-hidden="true" />
+      ) : doc != null ? (
         <iframe
           ref={iframeRef}
           title={page.title || page.id}
           srcDoc={doc}
           tabIndex={-1}
           aria-hidden="true"
-          className="block border-0"
+          className="relative block border-0"
           style={{
             width: page.size.width,
             height: page.size.height,
@@ -180,17 +254,19 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
           }}
         />
       ) : (
-        <div className="ed-frame-skeleton" aria-hidden="true">
-          {page.error ? (
-            <span className="ed-frame-skeleton-note">読み込めませんでした</span>
-          ) : (
-            <>
-              <span className="ed-frame-skeleton-bar" style={{ width: '38%' }} />
-              <span className="ed-frame-skeleton-bar" style={{ width: '72%' }} />
-              <span className="ed-frame-skeleton-bar" style={{ width: '56%' }} />
-            </>
-          )}
-        </div>
+        !showImage && (
+          <div className="ed-frame-skeleton" aria-hidden="true">
+            {page.error ? (
+              <span className="ed-frame-skeleton-note">読み込めませんでした</span>
+            ) : (
+              <>
+                <span className="ed-frame-skeleton-bar" style={{ width: '38%' }} />
+                <span className="ed-frame-skeleton-bar" style={{ width: '72%' }} />
+                <span className="ed-frame-skeleton-bar" style={{ width: '56%' }} />
+              </>
+            )}
+          </div>
+        )
       )}
     </div>
   );

package/src/editor/components/multi-page/index.ts

@@ -1,3 +1,4 @@
 export { MultiPageCanvasView } from './MultiPageCanvasView';
 export { PageFramePreview } from './PageFramePreview';
 export { CanvasRulers } from './CanvasRulers';
+export { CanvasFrameDecor } from './CanvasFrameDecor';

package/src/editor/components/ppt/PptChrome.tsx

@@ -27,7 +27,7 @@ import {
   Undo2, Redo2, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight,
   Type, Square, Circle, Minus, MoveUpRight, Image as ImageIcon, LayoutGrid,
   Boxes, Trash2, Copy, X, Save, PenTool, Loader2, ZoomIn, ZoomOut, Maximize,
-  Search, Sun, Moon, ChevronDown, Plus, MousePointer2, Pencil, Play,
+  Search, Sun, Moon, ChevronDown, Plus, MousePointer2, Pencil, Play, Crosshair,
   Palette, Sparkles, EyeOff, ArrowUp, ArrowDown, Film,
   MoreHorizontal, MessageSquare, ChevronLeft, ChevronRight, Crop, Monitor, MonitorUp,
   PaintBucket, PenLine, Eraser, Highlighter, Table, Shapes, Sticker, Wand2,
@@ -1010,7 +1010,7 @@ export function PptRibbon({
   onSwitchUi: () => void;
   page: number;
   deckTitle?: string;
-  comments: { open: boolean; toggle: () => void; newComment: () => void };
+  comments: { open: boolean; toggle: () => void; newComment: () => void; pickRegion?: () => void };
 }) {
   const pal = PALETTES[theme];
   const [tab, setTab] = useState<TabId>('home');
@@ -1820,6 +1820,10 @@ export function PptRibbon({
           <>
             <BigButton icon={MessageSquare} label={'新しい\nコメント'} onClick={comments.newComment}
               title="コメントを追加(要素を選択していればその要素に添付)" pal={pal} />
+            {comments.pickRegion && (
+              <BigButton icon={Crosshair} label={'範囲を\n指定'} active={actions.activeTool === 'comment'} onClick={comments.pickRegion}
+                title="スライドをドラッグして、コメントする範囲を指定します (C)" pal={pal} />
+            )}
             <BigButton icon={MessageSquare} label={'コメント\nの表示'} active={comments.open} onClick={comments.toggle} pal={pal} />
             <Sep pal={pal} />
             {(() => {