@growgroup/visual-editor 0.3.1 → 0.4.0

package/src/editor/components/EditorCanvas.tsx

@@ -32,6 +32,9 @@ import { useMultiPageCanvasOptional } from "../contexts/MultiPageCanvasContext";
 import { applyDocumentAttributes } from "./multi-page/PageFramePreview";
 import { setupEmbeddedCanvasBridge } from "../utils/embedded-canvas-bridge";
 import { endContentSwitch } from "../autosave";
+import { showPartDropIndicator, clearPartDropIndicator, findFlowInsertion } from "../utils/drop-target";
+import { debugLog } from '../utils/debug';
+import { useEditorComponents } from "../contexts/EditorComponentsContext";
 import type {
   DOMTreeNode,
   DragState,
@@ -189,6 +192,9 @@ export function EditorCanvas() {
   const setHtmlRef = useRef(setHtml);
   const clearHistoryRef = useRef(clearHistory);
   const editorModeRef = useRef(editorMode);
+  // 部品モードか(io に loadParts があるか)。挿入位置の印を出してよいかの判定に使う
+  const { partsMode } = useEditorComponents();
+  const partsModeRef = useRef(partsMode);
 
   // Webページモード用のコンテンツ高さ追跡
   const [contentHeight, setContentHeight] = useState(WEBPAGE_MIN_HEIGHT);
@@ -208,6 +214,7 @@ export function EditorCanvas() {
     setHtmlRef.current = setHtml;
     clearHistoryRef.current = clearHistory;
     editorModeRef.current = editorMode;
+    partsModeRef.current = partsMode;
     contentHeightRef.current = contentHeight;
   }, [
     activeTool,
@@ -218,6 +225,7 @@ export function EditorCanvas() {
     setHtml,
     clearHistory,
     editorMode,
+    partsMode,
     contentHeight,
   ]);
 
@@ -467,7 +475,7 @@ export function EditorCanvas() {
     const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
     if (!iframeDoc) return;
 
-    console.log("[Canvas] iframe loaded, initializing...");
+    debugLog("[Canvas] iframe loaded, initializing...");
 
     // 最初のペイントより先に現在の倍率を当ててから見せる。
     // initLayout はフォント待ち等で数百msかかるため、その後に適用すると
@@ -481,7 +489,7 @@ export function EditorCanvas() {
     // これにより、iframeがリロードされたり状態が変わるたびに
     // 古いリスナーを削除せずに新しいリスナーが追加される問題を防ぐ
     if (cleanupFunctionsRef.current.length > 0) {
-      console.log("[Canvas] Cleaning up", cleanupFunctionsRef.current.length, "previous listeners");
+      debugLog("[Canvas] Cleaning up", cleanupFunctionsRef.current.length, "previous listeners");
       cleanupFunctionsRef.current.forEach(cleanup => {
         try {
           cleanup();
@@ -634,7 +642,7 @@ export function EditorCanvas() {
           if (iframe) iframe.focus();
           if (iframeDoc.body) {
             iframeDoc.body.focus();
-            console.log('[Canvas] Focus restored after background click');
+            debugLog('[Canvas] Focus restored after background click');
           }
         });
       }
@@ -667,10 +675,28 @@ export function EditorCanvas() {
     // 7. ドラッグ&ドロップ（画像アップロード用）
     let dragCounter = 0;
 
+    // 部品のドラッグか(ファイルのドラッグと見分ける)。
+    // dragover 中は getData が使えないので types だけで判定する
+    const isPartDrag = (e: DragEvent) =>
+      !!e.dataTransfer?.types.includes("application/x-editor-component");
+
+    // 挿入位置の横棒を出してよい場面か。
+    // FrontendVisualEditor の drop 処理が insertIntoFlow(フローに差し込む)を使うのは
+    // 「部品モード かつ Web ページモード」のときだけで、それ以外(スライド、および
+    // Firestore のコンポーネント)は落とした座標に絶対配置する。条件を揃えないと
+    // 「横棒の位置と実際に入る位置が違う」という一番たちの悪いズレ方をする
+    const canShowFlowIndicator = () =>
+      partsModeRef.current && editorModeRef.current === "webpage";
+
+    // 前回の挿入先。同じなら描き直さない(dragover は毎秒数十回来るので、
+    // 毎回 DOM を差し替えると強制レイアウトが走り、印もちらつく)
+    let lastTarget: { parent: Element; before: Element | null } | null = null;
+
     const handleDragEnter = (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
       dragCounter++;
+      // 画像のオーバーレイはファイルのときだけ。部品は挿入位置の横棒で示す
       if (e.dataTransfer?.types.includes("Files")) {
         window.parent.postMessage({ type: "IFRAME_DRAG_ENTER" }, "*");
       }
@@ -681,6 +707,17 @@ export function EditorCanvas() {
       e.stopPropagation();
       if (e.dataTransfer?.types.includes("Files")) {
         e.dataTransfer.dropEffect = "copy";
+        return;
+      }
+      if (isPartDrag(e)) {
+        e.dataTransfer!.dropEffect = "copy";
+        if (!canShowFlowIndicator()) return;
+        // 落とす先を紙面の中に描く。実際の挿入と同じ関数で位置を出しているので、
+        // 印の場所とずれない(drop-target.ts)
+        const next = findFlowInsertion(iframeDoc, e.clientX, e.clientY);
+        if (lastTarget && lastTarget.parent === next.parent && lastTarget.before === next.before) return;
+        lastTarget = next;
+        showPartDropIndicator(iframeDoc, e.clientX, e.clientY);
       }
     };
 
@@ -689,19 +726,33 @@ export function EditorCanvas() {
       e.stopPropagation();
       dragCounter--;
       if (dragCounter === 0) {
+        lastTarget = null;
+        clearPartDropIndicator(iframeDoc);
         window.parent.postMessage({ type: "IFRAME_DRAG_LEAVE" }, "*");
       }
     };
 
+    // ドラッグが途中で捨てられた(Esc・パネルの上で離した)ときも印を残さない。
+    // dragend が起きるのはドラッグ「元」= 親ドキュメントのパネル項目なので、
+    // iframe ではなく親の document で受ける
+    const handleDragEnd = () => {
+      dragCounter = 0;
+      lastTarget = null;
+      clearPartDropIndicator(iframeDoc);
+    };
+
     const handleDrop = (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
       dragCounter = 0;
+      lastTarget = null;
+      // 印は挿入より先に消す。残っていると履歴と保存HTMLに混ざる
+      clearPartDropIndicator(iframeDoc);
 
       // コンポーネントのドロップをチェックして親ウィンドウに転送
       const componentData = e.dataTransfer?.getData('application/x-editor-component');
       if (componentData) {
-        console.log('[EditorCanvas] Component drop detected, forwarding to parent:', componentData);
+        debugLog('[EditorCanvas] Component drop detected, forwarding to parent:', componentData);
         window.parent.postMessage(
           {
             type: "IFRAME_COMPONENT_DROP",
@@ -756,12 +807,15 @@ export function EditorCanvas() {
     iframeDoc.addEventListener("dragenter", handleDragEnter);
     iframeDoc.addEventListener("dragover", handleDragOver);
     iframeDoc.addEventListener("dragleave", handleDragLeave);
+    document.addEventListener("dragend", handleDragEnd);
     iframeDoc.addEventListener("drop", handleDrop);
     cleanupFunctions.push(() => {
       iframeDoc.removeEventListener("dragenter", handleDragEnter);
       iframeDoc.removeEventListener("dragover", handleDragOver);
       iframeDoc.removeEventListener("dragleave", handleDragLeave);
+      document.removeEventListener("dragend", handleDragEnd);
       iframeDoc.removeEventListener("drop", handleDrop);
+      clearPartDropIndicator(iframeDoc);
     });
 
     // [修正] ここにあった「iframe内のpasteを親へpostMessageして画像を挿入する」
@@ -769,7 +823,7 @@ export function EditorCanvas() {
     // 直接 paste リスナーを張っており、2系統が同時に走るため1回の貼り付けで
     // 画像が2枚入っていた。ペーストの処理は FrontendVisualEditor の1本に集約する。
 
-    console.log("[Canvas] Drag/drop handlers registered");
+    debugLog("[Canvas] Drag/drop handlers registered");
 
     // 9. レイアウトモードに応じた初期化とDOMツリー構築
     const initLayout = async () => {
@@ -818,17 +872,17 @@ export function EditorCanvas() {
           // 別の幅で崩れ、デザインツールへの取り込みで意味を失う。
         if (editorModeRef.current !== "webpage") {
           const converted = convertToAbsolutePositioning(iframeDoc);
-          console.log('[Canvas] 絶対配置へ一括変換:', converted, '要素');
+          debugLog('[Canvas] 絶対配置へ一括変換:', converted, '要素');
         }
 
         // ここまでが「開いただけ」の姿。以後の変化=ユーザーの編集、と
         // 切り分けるための指紋を全要素に刻む(保存時の変換ノイズ巻き戻しに使う)
         const stamped = stampBaselines(iframeDoc);
-        console.log('[Canvas] 書き戻し用ベースライン:', stamped, '要素');
+        debugLog('[Canvas] 書き戻し用ベースライン:', stamped, '要素');
 
         const artboardEl = iframeDoc.getElementById("artboard");
         const tree = buildDomTree(iframeDoc, artboardEl || undefined);
-        console.log("[Canvas] Built DOM tree with", tree.length, "root nodes");
+        debugLog("[Canvas] Built DOM tree with", tree.length, "root nodes");
 
         setDomTreeRef.current(tree);
         const firstLevelIds = new Set<string>(
@@ -844,7 +898,7 @@ export function EditorCanvas() {
         // 変換後の姿を「変更なし」の基準にする。これをしないと開いただけで
         // 未保存扱いになり、サムネイル移動のたびに確認ダイアログが出る
         setOriginalHtml(initializedHtml);
-        console.log(
+        debugLog(
           "[Canvas] History reset with initialized HTML from artboard"
         );
 
@@ -879,7 +933,7 @@ export function EditorCanvas() {
         resizeObserver.observe(artboardEl);
         cleanupFunctions.push(() => resizeObserver.disconnect());
 
-        console.log(
+        debugLog(
           "[Canvas] Webpage mode: content height tracking initialized on artboard"
         );
       }
@@ -888,11 +942,11 @@ export function EditorCanvas() {
     // 重要: クリーンアップ関数をrefに保存して、
     // 次のiframeロード時やアンマウント時にクリーンアップできるようにする
     cleanupFunctionsRef.current = cleanupFunctions;
-    console.log("[Canvas] Registered", cleanupFunctions.length, "cleanup functions");
+    debugLog("[Canvas] Registered", cleanupFunctions.length, "cleanup functions");
 
     // iframeの読み込み完了をマーク（CSS変数注入等のトリガー用）
     setIframeReady(true);
-    console.log("[Canvas] iframe ready, setIframeReady(true) called");
+    debugLog("[Canvas] iframe ready, setIframeReady(true) called");
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -924,7 +978,7 @@ export function EditorCanvas() {
       // 重要: アンマウント時にすべてのイベントリスナーをクリーンアップ
       // これにより、メモリリークとゴーストリスナーを防ぐ
       if (cleanupFunctionsRef.current.length > 0) {
-        console.log("[Canvas] Unmounting: cleaning up", cleanupFunctionsRef.current.length, "listeners");
+        debugLog("[Canvas] Unmounting: cleaning up", cleanupFunctionsRef.current.length, "listeners");
         cleanupFunctionsRef.current.forEach(cleanup => {
           try {
             cleanup();
@@ -946,6 +1000,7 @@ export function EditorCanvas() {
         "move-mode",
         "draw-mode",
         "text-mode",
+        "comment-mode",
         "tool-rectangle",
         "tool-ellipse",
         "tool-line",
@@ -975,6 +1030,9 @@ export function EditorCanvas() {
         iframeDoc.body.classList.add("draw-mode", `tool-${activeTool}`);
       } else if (activeTool === "text") {
         iframeDoc.body.classList.add("text-mode", "tool-text");
+      } else if (activeTool === "comment") {
+        // コメントの範囲指定。要素の選択・ホバーを止め、紙面のドラッグを範囲にする
+        iframeDoc.body.classList.add("comment-mode");
       }
     }
   }, [activeTool, getIframeDoc]);
@@ -1001,7 +1059,7 @@ export function EditorCanvas() {
       refreshSelectionOverlay(iframeDoc);
     });
 
-    console.log(
+    debugLog(
       `[Canvas] Applied zoom: ${zoom}%, wrapper transform: scale(${currentScale})`
     );
   }, [zoom, editorMode, contentHeight, viewportWidth, getIframeDoc]);
@@ -1067,7 +1125,7 @@ export function EditorCanvas() {
       : SLIDE_HEIGHT;
     recalculateViewportUnits(iframeDoc, canvasWidth, canvasHeight);
 
-    console.log(`[Canvas] Viewport width changed to ${viewportWidth}px, recalculated viewport units with canvas dimensions: ${canvasWidth}x${canvasHeight}`);
+    debugLog(`[Canvas] Viewport width changed to ${viewportWidth}px, recalculated viewport units with canvas dimensions: ${canvasWidth}x${canvasHeight}`);
   }, [viewportWidth, editorMode, getIframeDoc, calculateFitZoom, setFitZoom]);
 
   return (

package/src/editor/components/EditorFooter.tsx

@@ -10,11 +10,13 @@ export function EditorFooter() {
   const cmd = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl+';
   const hint = activeTool === 'move' ? 'ドラッグで紙面を移動 · V で選択に戻る'
     : activeTool === 'scale' ? 'ドラッグで拡大・縮小 · V で選択に戻る'
+    : activeTool === 'comment' ? '紙面をドラッグして範囲を指定 · クリックで点 · Esc で選択に戻る'
     : activeTool !== 'select' ? 'ドラッグで追加 · Esc でキャンセル'
     : selectedElement || selectedElementIds.length ? 'ダブルクリックで文字を編集 · Esc で選択を解除'
     : 'クリックで選択 · Space＋ドラッグで紙面を移動';
   const shortcuts = [
     ['選択 / 移動 / 拡大・縮小', 'V / H / K'],
+    ['コメント(範囲を指定)', 'C'],
     ['元に戻す / やり直し', `${cmd}Z / ${cmd}⇧Z`],
     ['保存', `${cmd}S`], ['複製', `${cmd}D`],
     ['全体表示 / 100% / 選択範囲', `${cmd}0 / ${cmd}1 / ${cmd}2`],

package/src/editor/components/EditorHeader.tsx

@@ -38,6 +38,7 @@ import {
   getArtboardContent,
 } from "../utils/dom-utils";
 import { can } from "../../io";
+import { debugLog } from '../utils/debug';
 
 interface EditorHeaderProps {
   theme?: "light" | "dark";
@@ -164,7 +165,7 @@ export function EditorHeader({
 
       // 全要素を絶対配置に変換
       const count = convertToAbsolutePositioning(iframeDoc);
-      console.log(
+      debugLog(
         "[Header] Converted",
         count,
         "elements to absolute positioning",
@@ -226,7 +227,7 @@ export function EditorHeader({
         element.style.removeProperty("flex-grow");
         element.style.removeProperty("flex-shrink");
       });
-      console.log(
+      debugLog(
         "[Header] Removed absolute positioning from",
         editableElements.length,
         "elements",

package/src/editor/components/FigmaColorPicker.tsx

@@ -53,6 +53,7 @@ import { useEditorVariables } from "../EditorContext";
 import { isEyeDropperSupported, pickScreenColor } from "../utils/eyedropper";
 import type { CSSVariableDefinition } from "../../types/css-variables";
 import { isVariableReference, extractVariableName, generateVarReference } from "../../types/css-variables";
+import { debugLog } from '../utils/debug';
 
 // 塗りのタイプ
 export type FillType = "solid" | "linear" | "radial" | "image" | "variable" | "none";
@@ -794,7 +795,7 @@ export function FigmaColorPicker({
   // 変数選択ハンドラ
   const handleVariableSelect = useCallback((variable: CSSVariableDefinition) => {
     const varRef = generateVarReference(variable);
-    console.log('[DEBUG FigmaColorPicker] handleVariableSelect:', {
+    debugLog('[DEBUG FigmaColorPicker] handleVariableSelect:', {
       variable: { id: variable.id, name: variable.name, cssName: variable.cssName },
       generatedVarReference: varRef,
       hasOnVariableSelect: !!onVariableSelect,

package/src/editor/components/JsEditorDialog.tsx

@@ -10,6 +10,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Button } from '../../components/ui/button';
 import { Textarea } from '../../components/ui/textarea';
 import { Braces, Trash2, RefreshCw, AlertTriangle } from 'lucide-react';
+import { debugLog } from '../utils/debug';
 
 export interface JsEditorDialogProps {
   isOpen: boolean;

package/src/editor/components/PageSettingsDialog.tsx

@@ -14,6 +14,7 @@ import { Label } from '../../components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
 import { Switch } from '../../components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { debugLog } from '../utils/debug';
 import {
   Settings,
   Search,

package/src/editor/components/comments/CommentBoard.tsx

@@ -21,10 +21,10 @@
  */
 
 import { useState } from 'react';
-import { Check, CornerUpLeft, ExternalLink, MapPin, MessageSquare, RotateCcw, Send, Trash2 } from 'lucide-react';
+import { Check, CornerUpLeft, Crosshair, ExternalLink, MapPin, MessageSquare, RotateCcw, Send, Trash2 } from 'lucide-react';
 import type { Deck, SlideComment } from '../../../lib/deck';
 import { PPT_PALETTES, type PptTheme } from '../ppt/PptChrome';
-import { fmtTime, unresolvedCount } from '../ppt/PptComments';
+import { describeRect, fmtTime, unresolvedCount } from '../ppt/PptComments';
 
 /**
  * アンカー・返信のリンク色。
@@ -368,15 +368,18 @@ function BoardCard({
         </span>
       </div>
 
-      {/* 何に対する指摘か。要素に紐づいていなければページ全体 */}
+      {/* 何に対する指摘か。範囲 > 要素 > ページ全体 */}
       <div
         className="mt-1.5 flex items-center gap-1 text-[10px]"
-        style={{ color: comment.anchorSrc ? accent : pal.sub }}
+        style={{ color: comment.anchorRect || comment.anchorSrc ? accent : pal.sub }}
         title={comment.anchorSrc}
       >
-        <MapPin className="h-3 w-3 shrink-0" />
+        {comment.anchorRect ? <Crosshair className="h-3 w-3 shrink-0" /> : <MapPin className="h-3 w-3 shrink-0" />}
         <span className="truncate">
-          {comment.anchorSrc ? (comment.anchorLabel ? `「${comment.anchorLabel}」` : '要素に添付') : 'ページ全体'}
+          {comment.seq != null && <span className="mr-1 tabular-nums">#{comment.seq}</span>}
+          {comment.anchorRect
+            ? describeRect(comment.anchorRect)
+            : comment.anchorSrc ? (comment.anchorLabel ? `「${comment.anchorLabel}」` : '要素に添付') : 'ページ全体'}
         </span>
       </div>
 

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

@@ -0,0 +1,172 @@
+'use client';
+
+/**
+ * フレームの枠線と階層の線を <canvas> に描く(画面の座標)。
+ *
+ * [なぜ DOM ではなく canvas か]
+ * 枠線を転写層の中の要素に持たせる(box-shadow / outline / border のどれでも)と、
+ * 倍率が変わるたびに転写層まるごとが塗り直される。26 ページで 1 段あたり 10〜20ms、
+ * 30 段の縮小で主スレッドの Paint が 870ms になる(実測)。階層の線(SVG)も同じ。
+ * 逆に、転写層の中身が「白い矩形 + 合成済みの iframe」だけなら 1 段の Paint は 0.5ms 前後。
+ *
+ * 26 ページ・30 段の縮小での実測(DPR 2、CPU 4 倍遅く):
+ *   枠線 box-shadow + 線 SVG … Paint 287 回 / 1293ms、フレーム p95 42ms
+ *   枠線 outline + 線 SVG    … Paint 218 回 /  793ms、フレーム p95 42ms
+ *   どちらも消す(この実装と同じ状態) … Paint  82 回 /   64ms、フレーム p95 25ms
+ *
+ * そこで枠線と線は転写層から出し、画面の座標で 1 枚の canvas に描く。倍率・位置が
+ * 変わるたびに描き直すが、26 本の矩形と 25 本の折れ線を 1600×1000 に描くだけなので
+ * 1ms もかからない。定規(CanvasRulers)と同じ考え方
+ *
+ * [書き方の約束]
+ * - canvas の寸法(width / height / style)は載せたときと容器の大きさが変わったときだけ書く。
+ *   毎段書くと再確保が起き、パン・ズームで style が変わる要素の数も増える(検証が数えている)
+ * - 色は載せたときとテーマが変わったときだけ読む(毎回 getComputedStyle すると同期のレイアウトが走る)
+ */
+
+import { memo, useEffect, useRef } from 'react';
+import { FRAME_GAP, useMultiPageCanvas, type CanvasLayoutKind, type PageFrameLayout } from '../../contexts/MultiPageCanvasContext';
+
+/** 枠線の太さ(画面上の px)。以前の box-shadow: 0 0 0 1px と同じ見え方 */
+const EDGE_WIDTH = 1;
+/** 階層の線の太さ(画面上の px) */
+const CONNECTOR_WIDTH = 1.5;
+
+function readVar(el: HTMLElement, name: string, fallback: string): string {
+  const v = getComputedStyle(el).getPropertyValue(name).trim();
+  return v || fallback;
+}
+
+export const CanvasFrameDecor = memo(function CanvasFrameDecor({ theme }: { theme: 'light' | 'dark' }) {
+  const { pages, layout, editorMode, viewStore } = useMultiPageCanvas();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // 描き直しの入口。倍率・位置の購読と、ページ・テーマの変化の両方から呼ぶ
+  const drawRef = useRef<() => void>(() => undefined);
+  // 購読のコールバックは載せたときの props を閉じ込めてしまうので、ref 越しに読む
+  const pagesRef = useRef<PageFrameLayout[]>(pages);
+  pagesRef.current = pages;
+  const layoutRef = useRef<CanvasLayoutKind>(layout);
+  layoutRef.current = layout;
+  const gapYRef = useRef(FRAME_GAP[editorMode].y);
+  gapYRef.current = FRAME_GAP[editorMode].y;
+  const colorsRef = useRef({ edge: 'rgba(0,0,0,0.08)', line: '#e6e6e6' });
+  const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    // 容器は自分の親をそのまま使う。context の containerRef は親(MultiPageCanvasView)の
+    // useEffect で入るので、子のこの useEffect が走る時点ではまだ null
+    const host = canvas.parentElement as HTMLElement | null;
+    if (!host) return;
+
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const width = host.clientWidth;
+      const height = host.clientHeight;
+      const prev = sizeRef.current;
+      if (width === prev.width && height === prev.height && dpr === prev.dpr) return width > 0 && height > 0;
+      sizeRef.current = { width, height, dpr };
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      return width > 0 && height > 0;
+    };
+
+    const readColors = () => {
+      colorsRef.current = {
+        edge: readVar(host, '--ed-frame-edge', theme === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'),
+        line: readVar(host, '--ed-line-strong', theme === 'dark' ? '#5a5a5a' : '#d0d0d0'),
+      };
+    };
+
+    const draw = () => {
+      const { width, height, dpr } = sizeRef.current;
+      if (width === 0 || height === 0) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      const { canvasOffset: o, canvasZoom: z } = viewStore.get();
+      const list = pagesRef.current;
+      if (list.length === 0) return;
+      // 画面の座標へ。半 px ずらして 1px の線がぼやけないようにする
+      const rectOf = (p: PageFrameLayout) => ({
+        x: Math.round(o.x + p.position.x * z),
+        y: Math.round(o.y + p.position.y * z),
+        w: Math.round(p.size.width * z),
+        h: Math.round(p.size.height * z),
+      });
+      const visible = (r: { x: number; y: number; w: number; h: number }) =>
+        r.x + r.w >= -2 && r.x <= width + 2 && r.y + r.h >= -2 && r.y <= height + 2;
+
+      // 階層の線 → 枠線の順(線の端が枠に隠れる)
+      if (layoutRef.current === 'tree') {
+        const byId = new Map(list.map((p) => [p.id, p] as const));
+        ctx.strokeStyle = colorsRef.current.line;
+        ctx.lineWidth = CONNECTOR_WIDTH;
+        ctx.lineJoin = 'round';
+        ctx.beginPath();
+        for (const child of list) {
+          const parent = child.parentId ? byId.get(child.parentId) : undefined;
+          if (!parent) continue;
+          // 画素の境目に載せる(端数のままだと 1.5px の線が 3 画素に散ってぼやける)
+          const x1 = Math.round(o.x + (parent.position.x + parent.size.width / 2) * z);
+          const y1 = Math.round(o.y + (parent.position.y + parent.size.height) * z);
+          const x2 = Math.round(o.x + (child.position.x + child.size.width / 2) * z);
+          const y2 = Math.round(o.y + child.position.y * z);
+          // 画面から外れている組はたどらない(150 枚でも描く本数は見えている分だけ)
+          if (Math.max(x1, x2) < -2 || Math.min(x1, x2) > width + 2 || y2 < -2 || y1 > height + 2) continue;
+          // 親の下から、子の行との隙間の真ん中まで下り、横へ移って子の上へ
+          const ym = Math.round(y2 - (gapYRef.current * z) / 2);
+          ctx.moveTo(x1, y1);
+          ctx.lineTo(x1, ym);
+          ctx.lineTo(x2, ym);
+          ctx.lineTo(x2, y2);
+        }
+        ctx.stroke();
+      }
+
+      ctx.strokeStyle = colorsRef.current.edge;
+      ctx.lineWidth = EDGE_WIDTH;
+      ctx.lineJoin = 'miter';
+      ctx.beginPath();
+      for (const p of list) {
+        const r = rectOf(p);
+        if (!visible(r)) continue;
+        // 以前の box-shadow: 0 0 0 1px は枠の外側に出ていたので、境目に重ねて同じ見え方にする
+        ctx.rect(r.x - 0.5, r.y - 0.5, r.w + 1, r.h + 1);
+      }
+      ctx.stroke();
+    };
+
+    drawRef.current = draw;
+    readColors();
+    resize();
+    draw();
+    const unsubscribe = viewStore.subscribe(draw);
+    let observer: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(() => { resize(); draw(); });
+      observer.observe(host);
+    }
+    return () => {
+      unsubscribe();
+      observer?.disconnect();
+    };
+  }, [viewStore, theme]);
+
+  // ページの並び・高さが変わったら描き直す(倍率・位置は上の購読が受ける)。
+  // viewStore を空更新して呼ぶことはしない ── 他の購読者(定規・コメントのピン)まで巻き込むので
+  useEffect(() => { drawRef.current(); }, [pages, layout, editorMode]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      data-canvas-decor
+      aria-hidden="true"
+      className="pointer-events-none absolute left-0 top-0"
+    />
+  );
+});