@growgroup/visual-editor 0.2.2 → 0.3.1

package/src/editor/components/EditorContextMenu.tsx

@@ -5,6 +5,7 @@
  * 右クリックで要素操作メニューを表示
  */
 
+import { createPortal } from 'react-dom';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../components/ui/dropdown-menu';
 import { useEditorContext } from '../EditorContext';
 import {
@@ -201,11 +202,19 @@ export function EditorContextMenu({
     }
   };
 
+  // 見えない起点(右クリックの位置)。position は画面(viewport)の座標なので、document.body に出して
+  // position: fixed の基準を viewport にする。エディタの木の中に置くと、利用側がエディタを transform の付いた
+  // 器に入れているとき(構成ラフの殻の .wf-editor-main は translateZ(0))、fixed の基準がその器になり、
+  // メニューが右クリックの位置から器の左端ぶん(左パネルの幅 248px)ずれていた(実測)
+  const anchor = (
+    <DropdownMenuTrigger asChild>
+      <button tabIndex={-1} aria-label="要素の操作" style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} />
+    </DropdownMenuTrigger>
+  );
+
   return (
     <DropdownMenu open onOpenChange={(open) => { if (!open) onClose(); }}>
-      <DropdownMenuTrigger asChild>
-        <button tabIndex={-1} aria-label="要素の操作" style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} />
-      </DropdownMenuTrigger>
+      {typeof document === 'undefined' ? anchor : createPortal(anchor, document.body)}
       <DropdownMenuContent align="start" sideOffset={0} collisionPadding={8} className="w-60"
         onCloseAutoFocus={(e) => { e.preventDefault(); restoreFocus(); }}>
       {/* クリップボード操作 */}

package/src/editor/components/EditorHeader.tsx

@@ -28,6 +28,7 @@ import { useEditorContext } from "../EditorContext";
 import { ConfirmDialog } from "./shell/ConfirmDialog";
 import { EditorTopBar } from "./shell/EditorTopBar";
 import { MIN_ZOOM, MAX_ZOOM, editorZoomApiRef } from "../hooks/useCanvasControls";
+import { useMultiPageCanvasOptional, useCanvasViewStateOptional, MIN_ZOOM as CANVAS_MIN_ZOOM, MAX_ZOOM as CANVAS_MAX_ZOOM } from "../contexts/MultiPageCanvasContext";
 import { generateEditableHtml } from "../utils/html-utils";
 import { useDeck } from "../../components/viewer/useDeck";
 import { unresolvedCount } from "./ppt/PptComments";
@@ -99,8 +100,8 @@ export function EditorHeader({
   const {
     iframeRef,
     originalHtml,
-    zoom,
-    setZoom,
+    zoom: singleZoom,
+    setZoom: setSingleZoom,
     fitZoom,
     setSelectedElement,
     setSelectedElementIds,
@@ -118,6 +119,17 @@ export function EditorHeader({
 
   const [resetOpen, setResetOpen] = useState(false);
 
+  // マルチフレームのキャンバスでは倍率はキャンバス全体のもの。表示も操作もそちらへ向ける
+  const canvas = useMultiPageCanvasOptional();
+  const canvasView = useCanvasViewStateOptional();
+  const zoom = canvas && canvasView ? canvasView.canvasZoom * 100 : singleZoom;
+  const minZoom = canvas ? CANVAS_MIN_ZOOM * 100 : MIN_ZOOM;
+  const maxZoom = canvas ? CANVAS_MAX_ZOOM * 100 : MAX_ZOOM;
+  const setZoom = (value: number) => {
+    if (canvas) canvas.zoomTo(value / 100, { animate: true });
+    else setSingleZoom(value);
+  };
+
   // 保存・共有・プレビュー・閉じるは共通トップバー(EditorTopBar)が持つ。
   // ここに実装を残すと、PowerPoint風UIと2本の保存経路ができてしまう
 
@@ -245,12 +257,12 @@ export function EditorHeader({
   // 以前は上限200%/下限25%で止めていたが、キャンバス側(useCanvasControls)の
   // 実際の可動域は 10〜400%。ボタンだけ手前で止まるため、ホイールで250%まで
   // 拡大したあとに「＋を押しても何も起きない」状態が生まれていた。
-  const clampZoom = (v: number) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, v));
-  const canZoomIn = zoom < MAX_ZOOM - 0.01;
-  const canZoomOut = zoom > MIN_ZOOM + 0.01;
+  const clampZoom = (v: number) => Math.max(minZoom, Math.min(maxZoom, v));
+  const canZoomIn = zoom < maxZoom - 0.01;
+  const canZoomOut = zoom > minZoom + 0.01;
 
-  const handleZoomIn = () => setZoom(clampZoom(Math.floor(zoom / 10) * 10 + 10));
-  const handleZoomOut = () => setZoom(clampZoom(Math.ceil(zoom / 10) * 10 - 10));
+  const handleZoomIn = () => (canvas ? canvas.zoomIn() : setZoom(clampZoom(Math.floor(zoom / 10) * 10 + 10)));
+  const handleZoomOut = () => (canvas ? canvas.zoomOut() : setZoom(clampZoom(Math.ceil(zoom / 10) * 10 - 10)));
   // 全体表示/100% はキャンバス側(useCanvasControls)の実装に委ねる。
   // Cmd+0 / Cmd+1 と同じ関数を呼ぶことで、「ヘッダーから押したときだけ
   // 固定点の扱いが違う」というズレを作らない。未登録時は従来どおり値を入れる。
@@ -333,7 +345,7 @@ export function EditorHeader({
             data-zoom-out
             onClick={handleZoomOut}
             disabled={!canZoomOut}
-            title={canZoomOut ? "縮小" : `これ以上縮小できません（下限 ${MIN_ZOOM}%）`}
+            title={canZoomOut ? "縮小" : `これ以上縮小できません（下限 ${minZoom}%）`}
             className="h-8 w-8 text-gray-400 hover:text-white hover:bg-[#444444] disabled:opacity-30"
           >
             <ZoomOut className="h-4 w-4" />
@@ -361,8 +373,8 @@ export function EditorHeader({
                   ref={zoomInputRef}
                   data-zoom-input
                   type="number"
-                  min={MIN_ZOOM}
-                  max={MAX_ZOOM}
+                  min={minZoom}
+                  max={maxZoom}
                   value={zoomInput}
                   onChange={(e) => setZoomInput(e.target.value)}
                   onKeyDown={(e) => {
@@ -373,7 +385,7 @@ export function EditorHeader({
                     if (e.key === "Escape") setZoomMenuOpen(false);
                   }}
                   className="h-7 w-full rounded border border-[#4a4a4a] bg-[#1e1e1e] px-2 text-xs tabular-nums text-white outline-none focus:border-[#0d99ff]"
-                  aria-label={`表示倍率(%) ${MIN_ZOOM}〜${MAX_ZOOM}`}
+                  aria-label={`表示倍率(%) ${minZoom}〜${maxZoom}`}
                 />
                 <span className="text-xs text-gray-500">%</span>
                 <Button
@@ -403,6 +415,16 @@ export function EditorHeader({
                 100%
                 <span className="text-[10px] text-gray-500">⌘1</span>
               </DropdownMenuItem>
+              {canvas && (
+                <DropdownMenuItem
+                  data-zoom-preset="page"
+                  onClick={() => { const id = canvas.viewStore.get().activePageId; if (id) canvas.zoomToPage(id, { animate: true }); }}
+                  className="cursor-pointer justify-between text-gray-300 hover:bg-[#444444] hover:text-white"
+                >
+                  編集中のページに合わせる
+                  <span className="text-[10px] text-gray-500">⇧2</span>
+                </DropdownMenuItem>
+              )}
               <DropdownMenuItem
                 data-zoom-preset="50"
                 onClick={() => setZoom(50)}
@@ -417,6 +439,19 @@ export function EditorHeader({
               >
                 200%
               </DropdownMenuItem>
+              {canvas && (
+                <>
+                  <DropdownMenuSeparator className="bg-[#444444]" />
+                  <DropdownMenuItem
+                    data-zoom-rulers
+                    onClick={canvas.toggleRulers}
+                    className="cursor-pointer justify-between text-gray-300 hover:bg-[#444444] hover:text-white"
+                  >
+                    <span className="flex items-center gap-2"><Ruler className="h-3.5 w-3.5" />定規{canvas.rulersVisible ? "を隠す" : "を表示"}</span>
+                    <span className="text-[10px] text-gray-500">⇧R</span>
+                  </DropdownMenuItem>
+                </>
+              )}
             </DropdownMenuContent>
           </DropdownMenu>
           <Button
@@ -425,7 +460,7 @@ export function EditorHeader({
             data-zoom-in
             onClick={handleZoomIn}
             disabled={!canZoomIn}
-            title={canZoomIn ? "拡大" : `これ以上拡大できません（上限 ${MAX_ZOOM}%）`}
+            title={canZoomIn ? "拡大" : `これ以上拡大できません（上限 ${maxZoom}%）`}
             className="h-8 w-8 text-gray-400 hover:text-white hover:bg-[#444444] disabled:opacity-30"
           >
             <ZoomIn className="h-4 w-4" />

package/src/editor/components/EditorLayerPanel.tsx

@@ -17,8 +17,10 @@ import {
   ChevronRight,
   ChevronDown,
   Presentation,
+  ArrowUpRight,
 } from 'lucide-react';
 import { useEditorContext, type ContentListItem } from '../EditorContext';
+import { computeContentDepths } from '../contexts/EditorArtboardContext';
 import { useElementActions } from '../hooks/useElementActions';
 import { useResizablePanel } from '../hooks/useResizablePanel';
 import { refreshSelectionOverlay, buildDomTree } from '../utils/dom-utils';
@@ -297,10 +299,13 @@ return (
 const ContentListItemComponent = memo(function ContentListItemComponent({
   slide,
   isCurrent,
+  depth = 0,
   onClick,
 }: {
   slide: ContentListItem;
   isCurrent: boolean;
+  /** 階層の深さ(parentId から)。段を付ける */
+  depth?: number;
   onClick: () => void;
 }) {
   return (
@@ -313,6 +318,8 @@ const ContentListItemComponent = memo(function ContentListItemComponent({
           : 'text-gray-400 hover:bg-[#2c2c2c] border-l-2 border-transparent'
         }
       `}
+      style={depth > 0 ? { paddingLeft: 8 + depth * 14 } : undefined}
+      data-depth={depth}
       disabled={isCurrent}
       title={slide.title || `スライド ${slide.order}`}
     >
@@ -347,12 +354,14 @@ const ContentList = memo(function ContentList({
   currentContentId: string | null;
   onContentClick: (slideId: string) => void;
 }) {
+  const depths = useMemo(() => computeContentDepths(slides), [slides]);
   return (
     <>
       {slides.map((slide) => (
         <ContentListItemComponent
           key={slide.id}
           slide={slide}
+          depth={depths.get(slide.id) ?? 0}
           isCurrent={slide.id === currentContentId}
           onClick={() => onContentClick(slide.id)}
         />
@@ -387,6 +396,8 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
   } = useEditorContext();
 
   const [contentListExpanded, setContentListExpanded] = useState(true);
+  // 階層(parentId)の深さ。一覧に段を付ける
+  const slideDepths = useMemo(() => computeContentDepths(slides), [slides]);
   // 各スライドのツリー展開状態（スライドID → 展開状態）
   const [slideTreeExpanded, setSlideTreeExpanded] = useState<Map<string, boolean>>(new Map());
 
@@ -1132,6 +1143,7 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
           {!hideSlideList && slides.length > 0 ? (
             slides.map((slide, index) => {
               const isActive = slide.id === currentContentId;
+              const depth = slideDepths.get(slide.id) ?? 0;
               const isTreeExpanded = slideTreeExpanded.get(slide.id) ?? isActive;
               const slideTree = searchQuery ?
                 // 検索時は該当スライドのフィルタ済みツリーを表示
@@ -1139,14 +1151,15 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
                 getSlideTree(slide.id);
 
               return (
-                <div key={slide.id} className="mb-1">
-                  {/* スライドヘッダー */}
+                <div key={slide.id} className="mb-1" data-depth={depth}>
+                  {/* スライドヘッダー(階層があれば深さぶん段を付ける) */}
                   <div
                     className={`flex items-center gap-1 py-1 px-1 rounded cursor-pointer text-xs transition-colors ${
                       isActive
                         ? 'bg-[#0d99ff]/20 text-[#4fb8ff] border-l-2 border-[#0d99ff]'
                         : 'text-gray-300 hover:bg-[#444444] border-l-2 border-transparent'
                     }`}
+                    style={depth > 0 ? { marginLeft: depth * 14 } : undefined}
                     onClick={() => handleContentClick(slide.id)}
                   >
                     {/* 展開/折りたたみボタン */}
@@ -1175,6 +1188,19 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
                         編集中
                       </span>
                     )}
+                    {slide.href && (
+                      <a
+                        href={slide.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="ed-icon-button !h-5 !w-5 flex-shrink-0 opacity-60 hover:opacity-100"
+                        title="別タブで開く(編集しない表示)"
+                        aria-label={`${slide.title || '無題'} を別タブで開く`}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <ArrowUpRight className="w-3 h-3" />
+                      </a>
+                    )}
                   </div>
 
                   {/* スライドのDOMツリー */}

package/src/editor/components/EditorPropertyPanel.tsx

@@ -370,6 +370,8 @@ function LiveGeometryProvider({
     // ドラッグ/リサイズは style を、確定時の Tailwind 変換は class を書き換える。
     // 親のリフローで矩形が変わる場合もあるので artboard 全体を subtree で監視する。
     const target = doc.getElementById("artboard") || doc.body;
+    // 読み込み中の文書(body 無し)には付けない。準備できたら iframeReady で張り直る
+    if (!target) return;
     const observer = new MutationObserver(schedule);
     observer.observe(target, {
       attributes: true,
@@ -846,38 +848,52 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     return getInstanceByDomId(selectedElement.id);
   }, [selectedElement?.id, getInstanceByDomId]);
 
-  // 部品(data-part)のインスタンスか(DOM の属性で判定)
-  const selectedPart = useMemo(() => {
+  // 部品(data-part)のインスタンスか(DOM の属性で判定)。ルートを選んでいても、中のスロットを選んでいても
+  // 「どの部品の中か」を出す(中を編集しているときに、部品だと分からずに直してしまうのを防ぐ)
+  const selectedPartRoot = useMemo(() => {
     if (!selectedElement?.id) return null;
     const doc = getIframeDoc();
-    return partInfoOf(doc?.querySelector(`[data-element-id="${selectedElement.id}"]`));
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
+    if (!el) return null;
+    const root = el.hasAttribute("data-part") ? el : (el.parentElement?.closest("[data-part]") as HTMLElement | null) ?? null;
+    if (!root) return null;
+    const slot = root === el ? null : (el.closest("[data-slot]") as HTMLElement | null);
+    return { root, isRoot: root === el, slotName: slot && root.contains(slot) && slot !== root ? slot.getAttribute("data-slot") : null };
   }, [selectedElement, getIframeDoc]);
+  const selectedPart = useMemo(() => (selectedPartRoot ? partInfoOf(selectedPartRoot.root) : null), [selectedPartRoot]);
   const selectedPartLabel = useMemo(() => {
     if (!selectedPart) return "";
     const def = getPartDef(selectedPart.id);
     return `${def?.name || selectedPart.id} v${selectedPart.version}`;
   }, [selectedPart, getPartDef]);
   const handleUpdatePartFromPanel = useCallback(async () => {
-    if (!selectedElement?.id) return;
-    const doc = getIframeDoc();
-    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
-    if (!el) return;
-    const def = await updatePartFromElement(el);
+    const root = selectedPartRoot?.root;
+    if (!root) return;
+    const def = await updatePartFromElement(root);
     if (def) notifyIframeChange(true);
-  }, [selectedElement?.id, getIframeDoc, updatePartFromElement, notifyIframeChange]);
+  }, [selectedPartRoot, updatePartFromElement, notifyIframeChange]);
   const handleDetachPartFromPanel = useCallback(() => {
-    if (!selectedElement?.id) return;
     const doc = getIframeDoc();
-    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
-    if (!doc || !el || !partInfoOf(el)) return;
-    detachPart(el);
-    unlockPartDescendants(el);
+    const root = selectedPartRoot?.root;
+    if (!doc || !root || !partInfoOf(root)) return;
+    detachPart(root);
+    unlockPartDescendants(root);
     notifyIframeChange(true);
     void import("../utils/style-utils").then(({ extractElementInfo }) => {
-      const info = extractElementInfo(el, doc);
+      const info = extractElementInfo(root, doc);
       if (info) setSelectedElement(info);
     });
-  }, [selectedElement?.id, getIframeDoc, notifyIframeChange, setSelectedElement]);
+  }, [selectedPartRoot, getIframeDoc, notifyIframeChange, setSelectedElement]);
+  // 中のスロットを選んでいるとき: 部品のルートを選び直す(移動・削除・「この姿で更新」の対象を部品全体にする)
+  const handleSelectPartRoot = useCallback(() => {
+    const doc = getIframeDoc();
+    const root = selectedPartRoot?.root;
+    if (!doc || !root) return;
+    void import("../utils/style-utils").then(({ extractElementInfo }) => {
+      const info = extractElementInfo(root, doc);
+      if (info) setSelectedElement(info);
+    });
+  }, [selectedPartRoot, getIframeDoc, setSelectedElement]);
 
   const selectedMaster = useMemo(() => {
     if (!selectedInstance) return null;
@@ -1285,29 +1301,44 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
             />
           )}
 
-          {/* 部品(data-part)のインスタンス */}
-          {selectedPart && (
-            <div className="space-y-2 rounded border border-[#444444] bg-[#2a2a2a] p-2 text-xs text-gray-300">
+          {/* 部品(data-part)のインスタンス。紙面の選択枠も紫になる(部品だと一目で分かるように) */}
+          {selectedPart && selectedPartRoot && (
+            <div className="ed-part-card space-y-2 rounded p-2 text-xs" data-part-card={selectedPart.id} data-part-inside={selectedPartRoot.isRoot ? undefined : "true"}>
               <div className="flex items-center gap-2">
-                <PartIcon className="h-3.5 w-3.5 text-purple-400" />
-                <span className="truncate font-medium">部品: {selectedPartLabel}</span>
+                <PartIcon className="h-3.5 w-3.5 ed-part-accent" />
+                <span className="truncate font-medium">部品 {selectedPartLabel}</span>
               </div>
-              <p className="text-[10px] leading-snug text-gray-500">
-                スロット(data-slot)の中だけ編集できます。「この姿で部品を更新」で定義が変わり、他ページへの反映は利用側(savePart)が行います。
+              <p className="text-[10px] leading-snug ed-part-note">
+                {selectedPartRoot.isRoot
+                  ? "スロット(点線の枠)の中だけ編集できます。外側を直したいときは切り離してください。"
+                  : `スロット「${selectedPartRoot.slotName ?? "—"}」の中を編集しています。ここの変更はこのページだけに残ります(定義には入りません)。`}
               </p>
-              <div className="flex gap-1">
+              <div className="flex flex-wrap gap-1">
+                {!selectedPartRoot.isRoot && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-6 px-2 text-[10px]"
+                    title="部品のルート要素を選ぶ(移動・削除・更新の対象を部品全体にする)"
+                    onClick={handleSelectPartRoot}
+                  >
+                    部品全体を選ぶ
+                  </Button>
+                )}
                 <Button
                   size="sm"
                   variant="outline"
                   className="h-6 px-2 text-[10px]"
+                  title="このインスタンスの今の姿を定義にする(版 +1)。他のページの同じ部品もその場で描き直されます"
                   onClick={() => void handleUpdatePartFromPanel()}
                 >
-                  この姿で更新
+                  この姿で更新(全ページ)
                 </Button>
                 <Button
                   size="sm"
                   variant="outline"
                   className="h-6 px-2 text-[10px]"
+                  title="部品から切り離して普通の HTML にする(以後、定義の更新が及ばない)"
                   onClick={handleDetachPartFromPanel}
                 >
                   切り離す

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

@@ -0,0 +1,166 @@
+'use client';
+
+/**
+ * 定規(上・左)。Figma と同じく紙面の座標(等倍の px)で目盛りを打ち、
+ * 編集中のフレームの範囲を淡く塗る。倍率に応じて目盛りの間隔を切り替える。
+ * <canvas> に描くので、ズーム・パンの毎フレームでも DOM を作り直さない
+ */
+
+import { memo, useEffect, useRef } from 'react';
+import { RULER_SIZE, useMultiPageCanvas, useCanvasViewState } from '../../contexts/MultiPageCanvasContext';
+
+/** 目盛りの候補(紙面の px)。画面上で 60px 以上離れる最小のものを選ぶ */
+const STEPS = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000, 10000];
+
+function pickStep(zoom: number): number {
+  return STEPS.find((s) => s * zoom >= 60) ?? STEPS[STEPS.length - 1];
+}
+
+function readVar(el: HTMLElement, name: string, fallback: string): string {
+  const v = getComputedStyle(el).getPropertyValue(name).trim();
+  return v || fallback;
+}
+
+export const CanvasRulers = memo(function CanvasRulers({ theme }: { theme: 'light' | 'dark' }) {
+  const { pages } = useMultiPageCanvas();
+  const viewState = useCanvasViewState();
+  const topRef = useRef<HTMLCanvasElement>(null);
+  const leftRef = useRef<HTMLCanvasElement>(null);
+  const { canvasOffset, canvasZoom, activePageId } = viewState;
+  const active = pages.find((p) => p.id === activePageId);
+  const activeKey = active ? `${active.position.x},${active.position.y},${active.size.width},${active.size.height}` : '';
+
+  useEffect(() => {
+    const top = topRef.current;
+    const left = leftRef.current;
+    if (!top || !left) return;
+    const host = top.parentElement as HTMLElement | null;
+    if (!host) return;
+    const dpr = window.devicePixelRatio || 1;
+    const width = host.clientWidth;
+    const height = host.clientHeight;
+    if (width === 0 || height === 0) return;
+
+    const colors = {
+      bg: readVar(host, '--ed-panel', theme === 'dark' ? '#2c2c2c' : '#ffffff'),
+      line: readVar(host, '--ed-line', theme === 'dark' ? '#444444' : '#e6e6e6'),
+      text: readVar(host, '--ed-muted', theme === 'dark' ? '#b3b3b3' : '#6b6b6b'),
+      accent: readVar(host, '--ed-accent', '#0d99ff'),
+    };
+    const step = pickStep(canvasZoom);
+    const minor = step / 5;
+
+    const setup = (cv: HTMLCanvasElement, w: number, h: number) => {
+      cv.width = Math.round(w * dpr);
+      cv.height = Math.round(h * dpr);
+      cv.style.width = `${w}px`;
+      cv.style.height = `${h}px`;
+      const ctx = cv.getContext('2d')!;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = colors.bg;
+      ctx.fillRect(0, 0, w, h);
+      ctx.font = '10px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif';
+      ctx.fillStyle = colors.text;
+      ctx.strokeStyle = colors.line;
+      ctx.lineWidth = 1;
+      return ctx;
+    };
+
+    // ---- 上の定規
+    {
+      const ctx = setup(top, width, RULER_SIZE);
+      if (active) {
+        ctx.fillStyle = theme === 'dark' ? 'rgba(13,153,255,0.22)' : 'rgba(13,153,255,0.16)';
+        const x0 = canvasOffset.x + active.position.x * canvasZoom;
+        ctx.fillRect(x0, 0, active.size.width * canvasZoom, RULER_SIZE);
+        ctx.fillStyle = colors.text;
+      }
+      const first = Math.floor((RULER_SIZE - canvasOffset.x) / canvasZoom / minor) * minor;
+      const last = (width - canvasOffset.x) / canvasZoom;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
+      ctx.beginPath();
+      for (let v = first; v <= last; v += minor) {
+        const x = Math.round(canvasOffset.x + v * canvasZoom) + 0.5;
+        if (x < RULER_SIZE) continue;
+        const major = Math.abs(v / step - Math.round(v / step)) < 1e-6;
+        ctx.moveTo(x, RULER_SIZE);
+        ctx.lineTo(x, major ? RULER_SIZE - 9 : RULER_SIZE - 4);
+        if (major) ctx.fillText(String(Math.round(v)), x + 3, 3);
+      }
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(0, RULER_SIZE - 0.5);
+      ctx.lineTo(width, RULER_SIZE - 0.5);
+      ctx.stroke();
+    }
+
+    // ---- 左の定規(文字は縦書きにせず、横のまま小さく置く)
+    {
+      const ctx = setup(left, RULER_SIZE, height);
+      if (active) {
+        ctx.fillStyle = theme === 'dark' ? 'rgba(13,153,255,0.22)' : 'rgba(13,153,255,0.16)';
+        const y0 = canvasOffset.y + active.position.y * canvasZoom;
+        ctx.fillRect(0, y0, RULER_SIZE, active.size.height * canvasZoom);
+        ctx.fillStyle = colors.text;
+      }
+      const first = Math.floor((RULER_SIZE - canvasOffset.y) / canvasZoom / minor) * minor;
+      const last = (height - canvasOffset.y) / canvasZoom;
+      ctx.beginPath();
+      for (let v = first; v <= last; v += minor) {
+        const y = Math.round(canvasOffset.y + v * canvasZoom) + 0.5;
+        if (y < RULER_SIZE) continue;
+        const major = Math.abs(v / step - Math.round(v / step)) < 1e-6;
+        ctx.moveTo(RULER_SIZE, y);
+        ctx.lineTo(major ? RULER_SIZE - 9 : RULER_SIZE - 4, y);
+        if (major) {
+          ctx.save();
+          ctx.translate(3, y + 3);
+          ctx.rotate(-Math.PI / 2);
+          ctx.textAlign = 'right';
+          ctx.textBaseline = 'top';
+          ctx.fillText(String(Math.round(v)), 0, 0);
+          ctx.restore();
+        }
+      }
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(RULER_SIZE - 0.5, 0);
+      ctx.lineTo(RULER_SIZE - 0.5, height);
+      ctx.stroke();
+    }
+  }, [canvasOffset.x, canvasOffset.y, canvasZoom, activeKey, theme, active]);
+
+  // 容器のサイズ変更でも描き直す
+  const [, force] = useForceRedraw(topRef);
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-20" data-canvas-rulers aria-hidden="true" data-redraw={force}>
+      <canvas ref={topRef} className="absolute left-0 top-0" />
+      <canvas ref={leftRef} className="absolute left-0 top-0" />
+      <div
+        className="absolute left-0 top-0"
+        style={{ width: RULER_SIZE, height: RULER_SIZE, background: 'var(--ed-panel)', borderRight: '1px solid var(--ed-line)', borderBottom: '1px solid var(--ed-line)' }}
+      />
+    </div>
+  );
+});
+
+function useForceRedraw(ref: React.RefObject<HTMLCanvasElement | null>): [number, number] {
+  const tick = useRef(0);
+  const [, set] = useStateSafe();
+  useEffect(() => {
+    const host = ref.current?.parentElement;
+    if (!host || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => { tick.current++; set(tick.current); });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [ref, set]);
+  return [tick.current, tick.current];
+}
+
+import { useState } from 'react';
+function useStateSafe(): [number, (v: number) => void] {
+  const [v, set] = useState(0);
+  return [v, set];
+}