@growgroup/visual-editor 0.2.1 → 0.3.0

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

@@ -0,0 +1,164 @@
+'use client';
+
+/**
+ * 見るだけの紙面(編集していないページ)。
+ *
+ * 生きているエディタは 1 つだけなので、他のページは srcdoc の iframe で描く。
+ * - 編集用の属性は付けない(触れない。クリックはフレーム側が受けて、そのページへ編集を移す)
+ * - 同一オリジンなので #artboard の高さを親から直接測る(ResizeObserver)。
+ *   フォントや画像の読み込みで高さが変わっても追従する
+ * - 画面から遠いものは描かない(IntersectionObserver)。webpage は高さの実測が
+ *   レイアウトに要るので、順番に少しずつ先読みする(eagerMountCount)
+ */
+
+import { memo, useEffect, useRef, useState } from 'react';
+import { useMultiPageCanvas, type PageFrameLayout } from '../../contexts/MultiPageCanvasContext';
+import { generatePreviewHtml } from '../../utils/html-utils';
+
+interface PageFramePreviewProps {
+  page: PageFrameLayout;
+  /** 画面上の判定に使う容器(IntersectionObserver の root) */
+  rootRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }: PageFramePreviewProps) {
+  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot } = useMultiPageCanvas();
+  const hostRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [nearViewport, setNearViewport] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  // 画面に近づいたら描く(遠ざかっても消さない: 戻ったときに白く抜けないため)
+  useEffect(() => {
+    const host = hostRef.current;
+    const root = rootRef.current;
+    if (!host || !root) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) setNearViewport(true);
+      },
+      { root, rootMargin: '150% 150%' },
+    );
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [rootRef]);
+
+  // webpage は高さの実測がレイアウトに要る(未測定だと仮の高さで並ぶ)ので、見えていなくても読む。
+  // slide は寸法が決まっているので見えたときだけ。どちらも同時に読む枚数は絞る(順番待ち)
+  const wantsMount = editorMode === 'webpage' || nearViewport;
+  const [granted, setGranted] = useState(false);
+  const grantedRef = useRef(false);
+  useEffect(() => {
+    if (!wantsMount || grantedRef.current) return;
+    requestPreviewSlot(page.id, () => {
+      grantedRef.current = true;
+      setGranted(true);
+    });
+    // 見えなくなった: 順番待ちから外す(読み始めていれば載せたまま)
+    return () => {
+      if (!grantedRef.current) releasePreviewSlot(page.id);
+    };
+  }, [wantsMount, page.id, requestPreviewSlot, releasePreviewSlot]);
+  useEffect(() => () => releasePreviewSlot(page.id), [page.id, releasePreviewSlot]);
+  const shouldMount = granted;
+
+  useEffect(() => {
+    if (shouldMount && page.html == null && !page.loading && !page.error) void ensurePageHtml(page.id);
+  }, [shouldMount, page.html, page.loading, page.error, page.id, ensurePageHtml]);
+
+  // 本文が変わったら描き直す
+  const [doc, setDoc] = useState<string | null>(null);
+  useEffect(() => {
+    if (!shouldMount || page.html == null) return;
+    setDoc(generatePreviewHtml(page.html, editorMode, page.size.width, previewStyles));
+  }, [shouldMount, page.html, editorMode, page.size.width, previewStyles]);
+
+  // 高さの実測(同一オリジンなので親から読む)
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || doc == null) return;
+    let observer: ResizeObserver | null = null;
+    let disposed = false;
+    const measure = () => {
+      try {
+        const body = iframe.contentDocument?.body;
+        const artboard = iframe.contentDocument?.getElementById('artboard');
+        const h = artboard?.getBoundingClientRect().height || body?.scrollHeight || 0;
+        if (h > 0) setPageHeight(page.id, h, 'preview');
+      } catch {
+        /* 読めなければ仮の高さのまま */
+      }
+    };
+    const onLoad = () => {
+      if (disposed) return;
+      setLoaded(true);
+      measure();
+      try {
+        const artboard = iframe.contentDocument?.getElementById('artboard');
+        if (artboard && typeof ResizeObserver !== 'undefined') {
+          observer = new ResizeObserver(() => measure());
+          observer.observe(artboard);
+        }
+        // フォントの読み込みが終わってから測り直す(折り返しが変わる)
+        void iframe.contentDocument?.fonts?.ready.then(() => { if (!disposed) measure(); });
+      } catch {
+        /* cross-origin ではない想定 */
+      }
+    };
+    iframe.addEventListener('load', onLoad);
+    return () => {
+      disposed = true;
+      iframe.removeEventListener('load', onLoad);
+      observer?.disconnect();
+    };
+  }, [doc, page.id, setPageHeight]);
+
+  // 読み終わった(または読めない)ら枠を返して次へ。本文が来ない場合の安全弁つき
+  useEffect(() => {
+    if (!granted) return;
+    if (loaded || page.error) {
+      releasePreviewSlot(page.id);
+      return;
+    }
+    const timer = setTimeout(() => releasePreviewSlot(page.id), 8000);
+    return () => clearTimeout(timer);
+  }, [granted, loaded, page.error, page.id, releasePreviewSlot]);
+
+  return (
+    <div
+      ref={hostRef}
+      className="absolute inset-0 overflow-hidden"
+      data-page-preview={page.id}
+      style={{ background: '#fff' }}
+    >
+      {doc != null ? (
+        <iframe
+          ref={iframeRef}
+          title={page.title || page.id}
+          srcDoc={doc}
+          sandbox="allow-same-origin"
+          tabIndex={-1}
+          aria-hidden="true"
+          className="block border-0"
+          style={{
+            width: page.size.width,
+            height: page.size.height,
+            pointerEvents: 'none',
+          }}
+        />
+      ) : (
+        <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,7 +1,3 @@
-export { InfiniteCanvas } from './InfiniteCanvas';
 export { MultiPageCanvasView } from './MultiPageCanvasView';
-export { PageFrameOverlay } from './PageFrameOverlay';
-export { PageThumbnail } from './PageThumbnail';
-export { PageLivePreview } from './PageLivePreview';
-export { PageLabel } from './PageLabel';
-export { CanvasZoomControls } from './CanvasZoomControls';
+export { PageFramePreview } from './PageFramePreview';
+export { CanvasRulers } from './CanvasRulers';

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

@@ -15,6 +15,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Check, CornerUpLeft, Loader2, MapPin, RotateCcw, Send, MessageSquare, Sparkles, Trash2, X } from 'lucide-react';
 import { useEditorContext } from '../../EditorContext';
+import { useCanvasViewStateOptional } from '../../contexts/MultiPageCanvasContext';
 import { useDeck, applyDeck } from '../../../components/viewer/useDeck';
 import { commentAction, type SlideComment } from '../../../lib/deck';
 import { can, io, type EditorDeck } from '../../../io';
@@ -159,6 +160,8 @@ export function useCommentMarkers({
   const comments = deck.slides[page - 1]?.comments ?? [];
   const onOpenRef = useRef(onOpenThread);
   onOpenRef.current = onOpenThread;
+  // マルチフレームのキャンバスでは iframe の外側にも倍率が掛かる。ピンは画面上で同じ大きさに保つ
+  const outerZoom = useCanvasViewStateOptional()?.canvasZoom ?? 1;
 
   useEffect(() => {
     if (!active) return;
@@ -183,7 +186,8 @@ export function useCommentMarkers({
         if (!wanted.has(button.dataset.commentId!)) button.remove();
       });
       const rootRect = artboard.getBoundingClientRect();
-      const scale = rootRect.width / artboard.offsetWidth || 1;
+      const innerScale = rootRect.width / artboard.offsetWidth || 1;
+      const scale = innerScale * outerZoom;
       const size = 32 / scale;
       const stacks = new Map<string, number>();
       for (const c of anchored) {
@@ -214,8 +218,8 @@ export function useCommentMarkers({
         const rect = target.getBoundingClientRect();
         const stack = stacks.get(c.anchorSrc!) ?? 0;
         stacks.set(c.anchorSrc!, stack + 1);
-        const x = Math.max(0, Math.min(artboard.offsetWidth - size, (rect.right - rootRect.left) / scale - size / 2));
-        const y = Math.max(0, (rect.top - rootRect.top) / scale - size / 2) + stack * (size + 4 / scale);
+        const x = Math.max(0, Math.min(artboard.offsetWidth - size, (rect.right - rootRect.left) / innerScale - size / 2));
+        const y = Math.max(0, (rect.top - rootRect.top) / innerScale - size / 2) + stack * (size + 4 / scale);
         const styles: Partial<CSSStyleDeclaration> = {
           position: 'absolute', left: `${x}px`, top: `${y}px`, width: `${size}px`, height: `${size}px`,
           borderRadius: '50% 50% 50% 4px', background: '#2459c4', color: '#fff', fontSize: `${13 / scale}px`,
@@ -240,7 +244,7 @@ export function useCommentMarkers({
       const layer = getIframeDoc()?.querySelector('.gg-comment-layer');
       layer?.remove();
     };
-  }, [active, page, getIframeDoc, JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.resolved, c.author, c.text]))]);
+  }, [active, page, getIframeDoc, outerZoom, JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.resolved, c.author, c.text]))]);
 }
 
 /* ============================ 右パネル ============================ */

package/src/editor/components/shell/CanvasAppearance.tsx

@@ -8,8 +8,10 @@ import type { PptTheme } from '../ppt/PptChrome';
 export function CanvasAppearance({ theme }: { theme: PptTheme }) {
   const { iframeReady, getIframeDoc } = useEditorContext();
   useEffect(() => {
+    // 読み込み中(iframeReady=false)は body がまだ無いことがある。準備できてから塗る
+    if (!iframeReady) return;
     const doc = getIframeDoc();
-    if (!doc) return;
+    if (!doc?.body) return;
     const color = theme === 'dark' ? '#191d24' : '#eef1f5';
     doc.body.style.backgroundColor = color;
     const container = doc.getElementById('canvas-container');

package/src/editor/components/shell/PagesPanel.tsx

@@ -16,6 +16,7 @@ import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDeck } from '../../../components/viewer/useDeck';
 import { DeckSlideRender } from '../../../components/DeckSlideRender';
 import { flushAutoSave } from '../../autosave';
+import { useMultiPageCanvasOptional } from '../../contexts/MultiPageCanvasContext';
 
 /**
  * スライド描画はメモ化する。パネル幅の変更や他ページの選択で親が再レンダーしても、
@@ -28,6 +29,7 @@ const ROW_CHROME_PX = 8 + 8 + 16 + 6;
 
 export function PagesPanel({ page, height = '33vh' }: { page: number; height?: string }) {
   const deck = useDeck();
+  const canvas = useMultiPageCanvasOptional();
   const rootRef = useRef<HTMLDivElement>(null);
   const currentRef = useRef<HTMLButtonElement>(null);
   /**
@@ -55,6 +57,12 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
   /** ページ切替。未保存があれば黙って保存してから移る(失敗したときだけ確認する) */
   const goto = async (n: number) => {
     if (n === page) return;
+    // マルチフレームのキャンバスでは画面を移らず、そのフレームへ編集を移して画面に寄せる
+    if (canvas) {
+      const id = canvas.pages[n - 1]?.id ?? String(n);
+      if (await canvas.activatePage(id, { reveal: true })) canvas.zoomToPage(id, { animate: true });
+      return;
+    }
     if (!(await flushAutoSave())) {
       if (!window.confirm('保存に失敗しました。変更を破棄して移動しますか?')) return;
     }

package/src/editor/contexts/EditorArtboardContext.tsx

@@ -17,6 +17,12 @@
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
 import type { DOMTreeNode } from '../types';
 
+/**
+ * ページ切替の通知。戻り値に false(または false に解決する Promise)を返すと
+ * 「移れなかった」として扱う(マルチフレームのキャンバスが activatePage の結果に使う)
+ */
+export type ContentChangeHandler = (contentId: string) => void | boolean | Promise<boolean | void>;
+
 // コンテンツリスト用の軽量型（スライド、ページ、コンポーネント等で共用）
 export interface ContentListItem {
   id: string;
@@ -48,7 +54,7 @@ export interface EditorArtboardContextValue {
   // コンテンツリスト
   contentList: ContentListItem[];
   currentContentId: string | null;
-  onContentChange: ((contentId: string) => void) | null;
+  onContentChange: ContentChangeHandler | null;
 
   // Deprecated aliases
   /** @deprecated Use contentList instead */
@@ -72,7 +78,7 @@ export function useEditorArtboard(): EditorArtboardContextValue {
 interface EditorArtboardProviderProps {
   contentList?: ContentListItem[];
   currentContentId?: string;
-  onContentChange?: (contentId: string) => void;
+  onContentChange?: ContentChangeHandler;
   // 状態同期用のコールバック（ファサードで設定）
   onArtboardSwitch?: (
     newId: string,