@growgroup/visual-editor 0.2.2 → 0.3.0

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/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,

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];
+}