@growgroup/visual-editor 0.3.1 → 0.4.1

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

@@ -6,19 +6,22 @@
  * - スレッド形式(返信・解決/再開・削除)。deck.json のエントリに永続化
  * - 要素アンカー: 追加時に要素を選択していれば、その要素の刻印(data-gg-src / data-wf-src)に
  *   紐づき、キャンバス上にコメントバブル(マーカー)が出る。クリックでパネルの該当スレッドへ。
- *   投稿する前に「何に対するコメントか」を必ず出す(選択中の要素名 / ページ全体)
+ *   刻印の無い HTML(構成ラフの HTML 正本)では、紙面からの CSS パス(`css:…`)を刻印の代わりにする
+ * - 範囲アンカー: コメントツール(C)で紙面をドラッグすると、その矩形(紙面の px)に紐づく。
+ *   クリックだけなら点。gg-manager のフィードバックシートの「指摘」と同じ考え方
+ *   投稿する前に「何に対するコメントか」を必ず出す(指定した範囲 / 選択中の要素名 / ページ全体)
  * - マーカーは iframe 内のオーバーレイ層(.gg-comment-layer)に描く。
  *   保存時に丸ごと剥がされるため、上書きHTML・原本TSXには一切混入しない
  * - 名前は localStorage に記憶(ローカルツールなのでアカウントは要求しない)
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Check, CornerUpLeft, Loader2, MapPin, RotateCcw, Send, MessageSquare, Sparkles, Trash2, X } from 'lucide-react';
+import { Check, CornerUpLeft, Crosshair, 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';
+import { can, io, type CommentRect, type EditorDeck } from '../../../io';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
 import { ConfirmDialog } from '../shell/ConfirmDialog';
 import { PPT_PALETTES, type PptTheme } from './PptChrome';
@@ -37,7 +40,11 @@ const AUTHOR_KEY = 'gg-editor:comment-author';
  */
 const ANCHOR_ATTRS = ['data-gg-src', 'data-wf-src'] as const;
 
-/** 要素からアンカー値を作る。刻印が無ければ null（＝ページ全体へのコメント） */
+/**
+ * 要素からアンカー値を作る。
+ * 刻印があればそれ、無ければ紙面(`#artboard`)からの CSS パス(`css:#artboard>main>section:nth-of-type(2)>h2`)。
+ * どちらも作れなければ null（＝ページ全体へのコメント）
+ */
 export function anchorValueOf(root: HTMLElement, el: HTMLElement): string | null {
   for (const attr of ANCHOR_ATTRS) {
     const raw = el.getAttribute(attr);
@@ -47,6 +54,34 @@ export function anchorValueOf(root: HTMLElement, el: HTMLElement): string | null
     const index = same.indexOf(el);
     return index <= 0 ? raw : `${raw}#${index}`;
   }
+  return cssPathOf(el);
+}
+
+const CSS_ANCHOR = 'css:';
+
+/**
+ * 刻印の無い HTML 向けの要素アンカー。紙面(`#artboard`)から要素までを
+ * `tag:nth-of-type(n)` で辿る短いパス。途中に一意な id があればそこから始める。
+ * エディタが付ける data-element-id は読み込みのたびに変わるので使えない。
+ */
+function cssPathOf(el: HTMLElement): string | null {
+  const doc = el.ownerDocument;
+  const parts: string[] = [];
+  let cur: HTMLElement | null = el;
+  while (cur) {
+    const tag = cur.tagName.toLowerCase();
+    if (tag === 'body' || tag === 'html') return null;
+    const id = cur.id;
+    if (id && /^[A-Za-z][\w-]*$/.test(id) && doc.querySelectorAll(`#${CSS.escape(id)}`).length === 1) {
+      parts.unshift(`#${id}`);
+      return CSS_ANCHOR + parts.join('>');
+    }
+    const parent: HTMLElement | null = cur.parentElement;
+    if (!parent) return null;
+    const same = Array.from(parent.children).filter((sibling) => sibling.tagName === cur!.tagName);
+    parts.unshift(same.length > 1 ? `${tag}:nth-of-type(${same.indexOf(cur) + 1})` : tag);
+    cur = parent;
+  }
   return null;
 }
 
@@ -85,8 +120,29 @@ export function describeElement(el: HTMLElement): { label: string; kind: 'text'
   return { label: `<${el.tagName.toLowerCase()}>`, kind: 'tag' };
 }
 
-/** アンカー値から要素を引く。`#N` が付いていれば N 番目 */
-function findAnchored(root: HTMLElement, value: string): HTMLElement | null {
+/**
+ * アンカー値から要素を引く。刻印なら `#N` が N 番目。
+ * `css:` パスは見つからなければ、辿れる所まで戻ってその下から同じタグ・同じラベルの要素を
+ * 1 つだけ探す(構造が少し変わっても付いてくる。ページ全体を文字だけで探すことはしない)
+ */
+export function findAnchored(root: HTMLElement, value: string, label?: string): HTMLElement | null {
+  if (value.startsWith(CSS_ANCHOR)) {
+    const path = value.slice(CSS_ANCHOR.length);
+    const doc = root.ownerDocument;
+    const q = (sel: string) => { try { return doc.querySelector<HTMLElement>(sel); } catch { return null; } };
+    const exact = q(path);
+    if (exact) return exact;
+    const segments = path.split('>');
+    const tag = (segments[segments.length - 1] ?? '').replace(/:nth-of-type\(\d+\)$/, '');
+    if (!label || !tag || tag.startsWith('#')) return null;
+    for (let depth = segments.length - 1; depth >= 1; depth -= 1) {
+      const scope = q(segments.slice(0, depth).join('>'));
+      if (!scope) continue;
+      const hits = Array.from(scope.querySelectorAll<HTMLElement>(tag)).filter((el) => describeElement(el).label === label);
+      return hits.length === 1 ? hits[0] : null;
+    }
+    return null;
+  }
   const hash = value.lastIndexOf('#');
   const index = hash >= 0 ? Number(value.slice(hash + 1)) : NaN;
   const raw = Number.isFinite(index) ? value.slice(0, hash) : value;
@@ -142,18 +198,76 @@ function Avatar({ name }: { name: string }) {
 
 /* ============================ キャンバス上のマーカー ============================ */
 
+/** マーカーを描く表示専用の層。保存時に丸ごと剥がされる(html-utils が除く) */
+export function ensureCommentLayer(doc: Document, artboard: HTMLElement): HTMLElement {
+  let layer = artboard.querySelector<HTMLElement>(':scope > .gg-comment-layer');
+  if (!layer) {
+    layer = doc.createElement('div');
+    layer.className = 'gg-comment-layer';
+    layer.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9000;';
+    artboard.appendChild(layer);
+  }
+  return layer;
+}
+
+/** 紙面の倍率(iframe 内の transform × 外側のキャンバス倍率)。ピンや枠線を画面上で同じ太さに保つ */
+function artboardScale(artboard: HTMLElement, outerZoom: number) {
+  const rootRect = artboard.getBoundingClientRect();
+  const innerScale = rootRect.width / artboard.offsetWidth || 1;
+  return { rootRect, innerScale, scale: innerScale * outerZoom || 1 };
+}
+
+/** 点(クリックで置いたピン)か */
+export function isPointRect(r: CommentRect): boolean {
+  return r.width < 1 && r.height < 1;
+}
+
+/** 保存した矩形を今の紙面に合わせる。幅が変わっていたら横方向だけ比で補正する */
+export function fitRect(rect: CommentRect, artboard: HTMLElement): CommentRect {
+  const sx = rect.ref?.width ? artboard.offsetWidth / rect.ref.width : 1;
+  return { x: rect.x * sx, y: rect.y, width: rect.width * sx, height: rect.height };
+}
+
+/** 矩形を人が読む形に(「範囲 (120, 840) 600×240」「点 (120, 840)」) */
+export function describeRect(r: CommentRect): string {
+  const n = (v: number) => String(Math.round(v));
+  return isPointRect(r) ? `点 (${n(r.x)}, ${n(r.y)})` : `範囲 (${n(r.x)}, ${n(r.y)}) ${n(r.width)}×${n(r.height)}`;
+}
+
+/** ピンの文字。通し番号があれば番号、無ければ投稿者の頭文字 */
+function pinText(c: SlideComment): string {
+  return c.seq != null ? String(c.seq) : (c.author || '?').slice(0, 1);
+}
+
+/** 同じ値の再代入で MutationObserver を起こさない(フォーカス中の DOM も保つ) */
+function applyStyles(el: HTMLElement, styles: Partial<CSSStyleDeclaration>) {
+  const style = el.style as unknown as Record<string, string>;
+  for (const [key, value] of Object.entries(styles)) {
+    if (style[key] !== value) style[key] = value as string;
+  }
+}
+
 /**
- * アンカー付きコメントのバブルを iframe 内へ描く。
+ * アンカー付きコメントのマーカーを iframe 内へ描く。
  * 座標はアートボード座標(要素の offset 系)なので、ズーム・パンに自動追従する。
+ *
+ * - 要素アンカー: 要素の右上に丸いピン(同じ要素に複数あれば縦に積む)
+ * - 範囲アンカー: 矩形の枠 + 左上にピン。点なら ピンだけ
+ * - 下書き(まだ投稿していない範囲): 破線の枠
+ * パネルで開いているスレッドのマーカーは太く出す
  */
 export function useCommentMarkers({
   page,
   active,
   onOpenThread,
+  activeThreadId = null,
+  draftRect = null,
 }: {
   page: number;
   active: boolean;
   onOpenThread: (commentId: string) => void;
+  activeThreadId?: string | null;
+  draftRect?: CommentRect | null;
 }) {
   const { getIframeDoc } = useEditorContext();
   const deck = useDeck();
@@ -172,66 +286,114 @@ export function useCommentMarkers({
       const doc = getIframeDoc();
       const artboard = doc?.getElementById('artboard');
       if (!doc || !artboard) return;
-      let layer = artboard.querySelector<HTMLElement>(':scope > .gg-comment-layer');
-      if (!layer) {
-        layer = doc.createElement('div');
-        layer.className = 'gg-comment-layer';
-        // 保存時に丸ごと剥がされる前提の表示専用レイヤー
-        layer.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9000;';
-        artboard.appendChild(layer);
-      }
-      const anchored = comments.filter((c) => c.anchorSrc && !c.resolved);
-      const wanted = new Set(anchored.map((c) => c.id));
-      layer.querySelectorAll<HTMLButtonElement>('button').forEach((button) => {
-        if (!wanted.has(button.dataset.commentId!)) button.remove();
+      const layer = ensureCommentLayer(doc, artboard);
+      const shown = comments.filter((c) => (c.anchorRect || c.anchorSrc) && !c.resolved);
+      const wanted = new Set(shown.map((c) => c.id));
+      layer.querySelectorAll<HTMLElement>('[data-comment-id]').forEach((el) => {
+        if (!wanted.has(el.dataset.commentId!)) el.remove();
       });
-      const rootRect = artboard.getBoundingClientRect();
-      const innerScale = rootRect.width / artboard.offsetWidth || 1;
-      const scale = innerScale * outerZoom;
+      const { rootRect, innerScale, scale } = artboardScale(artboard, outerZoom);
       const size = 32 / scale;
+      const maxX = Math.max(0, artboard.offsetWidth - size);
       const stacks = new Map<string, number>();
-      for (const c of anchored) {
-        const target = findAnchored(artboard, c.anchorSrc!);
-        // 要素が削除されたコメントは一覧から参照できる。別の場所に誤って付けない。
-        if (!target) {
-          layer.querySelector(`[data-comment-id="${CSS.escape(c.id)}"]`)?.remove();
-          continue;
-        }
-        let bubble = layer.querySelector<HTMLButtonElement>(`[data-comment-id="${CSS.escape(c.id)}"]`);
-        if (!bubble) {
-          bubble = doc.createElement('button');
-          bubble.type = 'button';
-          bubble.setAttribute('data-comment-id', c.id);
-          bubble.addEventListener('mousedown', (e) => { e.stopPropagation(); });
-          bubble.addEventListener('click', (e) => {
+
+      const ensure = <T extends HTMLElement>(c: SlideComment, role: 'pin' | 'rect'): T => {
+        const sel = `[data-comment-id="${CSS.escape(c.id)}"][data-comment-${role}]`;
+        let el = layer.querySelector<T>(sel);
+        if (!el) {
+          el = doc.createElement(role === 'pin' ? 'button' : 'div') as unknown as T;
+          if (role === 'pin') (el as unknown as HTMLButtonElement).type = 'button';
+          el.setAttribute('data-comment-id', c.id);
+          el.setAttribute(`data-comment-${role}`, '');
+          el.addEventListener('mousedown', (e) => { e.stopPropagation(); });
+          el.addEventListener('pointerdown', (e) => { e.stopPropagation(); });
+          el.addEventListener('click', (e) => {
             e.preventDefault(); e.stopPropagation(); onOpenRef.current(c.id);
           });
-          bubble.addEventListener('focus', () => { bubble!.style.outline = '3px solid #2459c4'; });
-          bubble.addEventListener('blur', () => { bubble!.style.outline = ''; });
-          layer.appendChild(bubble);
+          if (role === 'pin') {
+            el.addEventListener('focus', () => { el!.style.outline = '3px solid #2459c4'; });
+            el.addEventListener('blur', () => { el!.style.outline = ''; });
+          }
+          layer.appendChild(el);
+        }
+        return el;
+      };
+
+      for (const c of shown) {
+        const isActive = c.id === activeThreadId;
+        let x = 0;
+        let y = 0;
+        if (c.anchorRect) {
+          const r = fitRect(c.anchorRect, artboard);
+          if (isPointRect(r)) {
+            layer.querySelector(`[data-comment-id="${CSS.escape(c.id)}"][data-comment-rect]`)?.remove();
+            x = r.x - size / 2;
+            y = r.y - size / 2;
+          } else {
+            const box = ensure<HTMLDivElement>(c, 'rect');
+            box.title = `${c.author}のコメント：${c.text.slice(0, 80)}`;
+            applyStyles(box, {
+              position: 'absolute', left: `${r.x}px`, top: `${r.y}px`, width: `${r.width}px`, height: `${r.height}px`,
+              boxSizing: 'border-box', border: `${(isActive ? 3 : 2) / scale}px solid #2459c4`,
+              borderRadius: `${3 / scale}px`, background: isActive ? 'rgba(36,89,196,.16)' : 'rgba(36,89,196,.07)',
+              pointerEvents: 'auto', cursor: 'pointer',
+            });
+            // ピンは矩形の左上の角に掛ける
+            x = r.x - size / 2;
+            y = r.y - size / 2;
+          }
+        } else {
+          const target = findAnchored(artboard, c.anchorSrc!, c.anchorLabel);
+          // 要素が削除されたコメントは一覧から参照できる。別の場所に誤って付けない。
+          if (!target) {
+            layer.querySelectorAll(`[data-comment-id="${CSS.escape(c.id)}"]`).forEach((el) => el.remove());
+            continue;
+          }
+          const rect = target.getBoundingClientRect();
+          const stack = stacks.get(c.anchorSrc!) ?? 0;
+          stacks.set(c.anchorSrc!, stack + 1);
+          x = (rect.right - rootRect.left) / innerScale - size / 2;
+          y = (rect.top - rootRect.top) / innerScale - size / 2 + stack * (size + 4 / scale);
         }
-        const label = `${c.author}のコメント：${c.text.slice(0, 80)}`;
-        bubble.title = label;
-        bubble.setAttribute('aria-label', label);
-        const letter = (c.author || '?').slice(0, 1);
-        if (bubble.textContent !== letter) bubble.textContent = letter;
-        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) / 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`,
+        const pin = ensure<HTMLButtonElement>(c, 'pin');
+        const label = `${c.seq != null ? `#${c.seq} ` : ''}${c.author}のコメント：${c.text.slice(0, 80)}`;
+        pin.title = label;
+        pin.setAttribute('aria-label', label);
+        const text = pinText(c);
+        if (pin.textContent !== text) pin.textContent = text;
+        applyStyles(pin, {
+          position: 'absolute', left: `${Math.max(0, Math.min(maxX, x))}px`, top: `${Math.max(0, y)}px`,
+          width: `${size}px`, height: `${size}px`,
+          borderRadius: '50% 50% 50% 4px', background: '#2459c4', color: '#fff',
+          fontSize: `${(text.length > 1 ? 12 : 13) / scale}px`,
           fontFamily: 'system-ui, sans-serif', fontWeight: '700', border: `${2 / scale}px solid #fff`,
-          boxShadow: '0 2px 8px #0003', cursor: 'pointer', pointerEvents: 'auto', display: 'flex',
-          alignItems: 'center', justifyContent: 'center', padding: '0px',
-        };
-        // 同じ値を再代入してMutationObserverを起こさない。フォーカス中のDOMも維持する。
-        const style = bubble.style as unknown as Record<string, string>;
-        for (const [key, value] of Object.entries(styles)) {
-          if (style[key] !== value) style[key] = value as string;
+          boxShadow: isActive ? `0 0 0 ${3 / scale}px rgba(36,89,196,.35), 0 2px 8px #0003` : '0 2px 8px #0003',
+          cursor: 'pointer', pointerEvents: 'auto', display: 'flex',
+          alignItems: 'center', justifyContent: 'center', padding: '0px', lineHeight: '1',
+        });
+      }
+
+      // 下書き(投稿前の範囲)。破線で出し、投稿・解除で消える
+      let draft = layer.querySelector<HTMLElement>('[data-comment-draft]');
+      if (draftRect) {
+        if (!draft) {
+          draft = doc.createElement('div');
+          draft.setAttribute('data-comment-draft', '');
+          layer.appendChild(draft);
         }
+        const r = fitRect(draftRect, artboard);
+        const point = isPointRect(r);
+        const d = 14 / scale;
+        applyStyles(draft, {
+          position: 'absolute',
+          left: `${point ? r.x - d / 2 : r.x}px`, top: `${point ? r.y - d / 2 : r.y}px`,
+          width: `${point ? d : r.width}px`, height: `${point ? d : r.height}px`,
+          boxSizing: 'border-box', border: `${2 / scale}px dashed #2459c4`,
+          borderRadius: point ? '50%' : `${3 / scale}px`, background: 'rgba(36,89,196,.10)',
+          pointerEvents: 'none',
+        });
+      } else {
+        draft?.remove();
       }
     };
 
@@ -244,7 +406,114 @@ export function useCommentMarkers({
       const layer = getIframeDoc()?.querySelector('.gg-comment-layer');
       layer?.remove();
     };
-  }, [active, page, getIframeDoc, outerZoom, JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.resolved, c.author, c.text]))]);
+  }, [
+    active, page, getIframeDoc, outerZoom, activeThreadId,
+    JSON.stringify(draftRect),
+    JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.anchorRect, c.seq, c.resolved, c.author, c.text])),
+  ]);
+}
+
+/**
+ * コメントツール(C)。紙面をドラッグして範囲を決める。クリックだけなら点。
+ * iframe の document でポインタを捕まえ(要素は comment-mode で反応しない)、
+ * 紙面の外へ出ても離した位置まで追う(setPointerCapture)。
+ * 決まった矩形は onRegion に渡す(投稿はパネル側)。
+ */
+export function useCommentRegionTool({
+  active,
+  onRegion,
+}: {
+  active: boolean;
+  onRegion: (rect: CommentRect) => void;
+}) {
+  const { getIframeDoc, iframeReady } = useEditorContext();
+  const onRegionRef = useRef(onRegion);
+  onRegionRef.current = onRegion;
+  const outerZoom = useCanvasViewStateOptional()?.canvasZoom ?? 1;
+
+  useEffect(() => {
+    if (!active) return;
+    const doc = getIframeDoc();
+    const artboard = doc?.getElementById('artboard');
+    if (!doc || !artboard) return;
+
+    let start: { x: number; y: number } | null = null;
+    let box: HTMLElement | null = null;
+
+    const clamp = (v: number, max: number) => Math.max(0, Math.min(max, v));
+    const toArtboard = (e: PointerEvent) => {
+      const r = artboard.getBoundingClientRect();
+      const s = r.width / artboard.offsetWidth || 1;
+      return {
+        x: clamp((e.clientX - r.left) / s, artboard.offsetWidth),
+        y: clamp((e.clientY - r.top) / s, artboard.offsetHeight),
+      };
+    };
+    const rectOf = (a: { x: number; y: number }, b: { x: number; y: number }) => ({
+      x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(a.x - b.x), height: Math.abs(a.y - b.y),
+    });
+
+    const onDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      // 既にあるピンのクリックは「スレッドを開く」。矩形の上からは新しい範囲を描ける(comment-mode で矩形は反応しない)
+      if ((e.target as HTMLElement | null)?.closest?.('[data-comment-pin]')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      start = toArtboard(e);
+      try { artboard.setPointerCapture(e.pointerId); } catch { /* 捕まえられなくても続行 */ }
+      const { scale } = artboardScale(artboard, outerZoom);
+      box = doc.createElement('div');
+      box.setAttribute('data-comment-drafting', '');
+      box.style.cssText = `position:absolute;left:${start.x}px;top:${start.y}px;width:0;height:0;box-sizing:border-box;` +
+        `border:${2 / scale}px dashed #2459c4;background:rgba(36,89,196,.10);pointer-events:none;`;
+      ensureCommentLayer(doc, artboard).appendChild(box);
+    };
+    const onMove = (e: PointerEvent) => {
+      if (!start || !box) return;
+      e.preventDefault();
+      const r = rectOf(start, toArtboard(e));
+      box.style.left = `${r.x}px`;
+      box.style.top = `${r.y}px`;
+      box.style.width = `${r.width}px`;
+      box.style.height = `${r.height}px`;
+    };
+    const finish = (e: PointerEvent, cancelled: boolean) => {
+      if (!start) return;
+      const from = start;
+      const r = rectOf(from, toArtboard(e));
+      start = null;
+      try { artboard.releasePointerCapture(e.pointerId); } catch { /* 捕まえていない */ }
+      box?.remove();
+      box = null;
+      if (cancelled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      // 4px 未満の動きはクリック＝点
+      const point = r.width < 4 && r.height < 4;
+      const round = (v: number) => Math.round(v);
+      onRegionRef.current({
+        x: round(point ? from.x : r.x),
+        y: round(point ? from.y : r.y),
+        width: point ? 0 : round(r.width),
+        height: point ? 0 : round(r.height),
+        ref: { width: artboard.offsetWidth, height: artboard.offsetHeight },
+      });
+    };
+    const onUp = (e: PointerEvent) => finish(e, false);
+    const onCancel = (e: PointerEvent) => finish(e, true);
+
+    doc.addEventListener('pointerdown', onDown, true);
+    doc.addEventListener('pointermove', onMove, true);
+    doc.addEventListener('pointerup', onUp, true);
+    doc.addEventListener('pointercancel', onCancel, true);
+    return () => {
+      doc.removeEventListener('pointerdown', onDown, true);
+      doc.removeEventListener('pointermove', onMove, true);
+      doc.removeEventListener('pointerup', onUp, true);
+      doc.removeEventListener('pointercancel', onCancel, true);
+      box?.remove();
+    };
+  }, [active, iframeReady, getIframeDoc, outerZoom]);
 }
 
 /* ============================ 右パネル ============================ */
@@ -256,6 +525,9 @@ export function PptCommentsPanel({
   focusSignal,
   activeThreadId,
   onActiveThread,
+  pendingRect = null,
+  onClearPendingRect,
+  onPickRegion,
 }: {
   page: number;
   theme: PptTheme;
@@ -264,6 +536,11 @@ export function PptCommentsPanel({
   focusSignal: number;
   activeThreadId: string | null;
   onActiveThread: (id: string | null) => void;
+  /** コメントツールで指定した範囲(投稿前)。投稿か解除で消える */
+  pendingRect?: CommentRect | null;
+  onClearPendingRect?: () => void;
+  /** 「範囲を指定」= コメントツールに切り替える */
+  onPickRegion?: () => void;
 }) {
   const pal = PPT_PALETTES[theme];
   const deck = useDeck();
@@ -419,15 +696,17 @@ export function PptCommentsPanel({
   const post = () => {
     const text = draft.trim();
     if (!text) return;
+    // 範囲を指定していればそれが対象(要素の選択より優先)
     void run(() =>
       commentAction(page, {
         action: 'add',
         author: author.trim() || 'ゲスト',
         text,
-        anchorSrc: currentAnchor?.src,
-        anchorLabel: currentAnchor?.label,
+        anchorSrc: pendingRect ? undefined : currentAnchor?.src,
+        anchorLabel: pendingRect ? describeRect(pendingRect) : currentAnchor?.label,
+        anchorRect: pendingRect ?? undefined,
       }),
-    ).then((ok) => { if (ok) setDraft(''); });
+    ).then((ok) => { if (ok) { setDraft(''); onClearPendingRect?.(); } });
   };
 
   const open = comments.filter((c) => !c.resolved);
@@ -461,7 +740,10 @@ export function PptCommentsPanel({
       <div className="flex items-center gap-2">
         <Avatar name={c.author} />
         <div className="min-w-0 flex-1">
-          <div className="truncate text-[12px] font-medium" style={{ color: pal.text }}>{c.author}</div>
+          <div className="truncate text-[12px] font-medium" style={{ color: pal.text }}>
+            {c.seq != null && <span className="mr-1 tabular-nums" style={{ color: 'var(--ed-accent)' }}>#{c.seq}</span>}
+            {c.author}
+          </div>
           <div className="text-[10px]" style={{ color: pal.sub }}>{fmtTime(c.createdAt)}</div>
         </div>
         {c.resolved ? (
@@ -493,7 +775,12 @@ export function PptCommentsPanel({
         </button>
       </div>
 
-      {c.anchorSrc && (
+      {c.anchorRect ? (
+        <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }} data-comment-rect-label>
+          <Crosshair className="h-3 w-3" />
+          {describeRect(c.anchorRect)}
+        </div>
+      ) : c.anchorSrc && (
         <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }}>
           <MapPin className="h-3 w-3" />
           {c.anchorLabel ? `「${c.anchorLabel}」` : '要素に添付'}
@@ -652,10 +939,37 @@ export function PptCommentsPanel({
             style={{ backgroundColor: pal.control, borderColor: pal.border, color: pal.text }}
           />
         </div>
-        {/* 何に対するコメントかを、投稿する前に必ず見せる */}
-        {currentAnchor ? (
+        {/* 何に対するコメントかを、投稿する前に必ず見せる(範囲 > 要素 > ページ全体) */}
+        {pendingRect ? (
           <div
             className="mt-1.5 flex items-start gap-1.5 rounded border px-1.5 py-1 text-[10px]"
+            data-comment-pending-rect
+            style={{
+              color: 'var(--ed-accent)',
+              borderColor: 'var(--ed-accent)',
+              backgroundColor: 'rgba(15,108,189,.08)',
+            }}
+          >
+            <Crosshair className="mt-px h-3 w-3 shrink-0" />
+            <span className="min-w-0 flex-1">
+              指定した<span className="font-bold">{describeRect(pendingRect)}</span>へのコメント
+            </span>
+            {onClearPendingRect && (
+              <button
+                type="button"
+                onClick={onClearPendingRect}
+                aria-label="範囲の指定を解除"
+                title="範囲の指定を解除"
+                className="shrink-0 rounded p-0.5"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+        ) : currentAnchor ? (
+          <div
+            className="mt-1.5 flex items-start gap-1.5 rounded border px-1.5 py-1 text-[10px]"
+            data-comment-anchor="element"
             style={{
               color: 'var(--ed-accent)',
               borderColor: 'var(--ed-accent)',
@@ -680,14 +994,28 @@ export function PptCommentsPanel({
         ) : (
           <div
             className="mt-1.5 flex items-start gap-1.5 rounded border border-dashed px-1.5 py-1 text-[10px]"
+            data-comment-anchor="page"
             style={{ color: pal.sub, borderColor: pal.border }}
           >
             <MapPin className="mt-px h-3 w-3 shrink-0" />
             <span>
-              ページ全体へのコメント（要素を選ぶと、その要素へのコメントになります）
+              ページ全体へのコメント（要素を選ぶとその要素へ、「範囲を指定」で紙面の場所へ）
             </span>
           </div>
         )}
+        {onPickRegion && !pendingRect && (
+          <button
+            type="button"
+            onClick={onPickRegion}
+            data-comment-pick-region
+            title="紙面をドラッグして、コメントする範囲を指定します (C)"
+            className="mt-1.5 flex items-center gap-1 rounded border px-1.5 py-1 text-[11px]"
+            style={{ borderColor: pal.border, color: 'var(--ed-accent)' }}
+          >
+            <Crosshair className="h-3 w-3" />
+            範囲を指定 <span style={{ color: pal.sub }}>C</span>
+          </button>
+        )}
         <div className="mt-1.5 flex items-end gap-1.5">
           <textarea
             ref={composerRef}
@@ -723,7 +1051,7 @@ export function PptCommentsPanel({
       <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
         {open.length === 0 && resolved.length === 0 && (
           <p className="px-1 pt-2 text-[12px]" style={{ color: pal.sub }}>
-            まだコメントはありません。要素を選択して投稿すると、その要素に吹き出しが付きます。
+            まだコメントはありません。要素を選ぶか「範囲を指定」で場所を決めて投稿すると、紙面にピンが付きます。
           </p>
         )}
         {open.length === 0 && resolved.length > 0 && <p className="py-2 text-xs text-gray-400">未解決のコメントはありません。</p>}
@@ -749,14 +1077,26 @@ export function PptCommentsPanel({
 }
 
 
-/** マーカーだけを常駐させる薄いホスト(パネルが閉じていても吹き出しは見える) */
+/**
+ * マーカーだけを常駐させる薄いホスト(パネルが閉じていても吹き出しは見える)。
+ * コメントツールの範囲指定もここで動かす(パネルは開くまでマウントされないため)
+ */
 export function PptCommentMarkers({
   page,
   onOpenThread,
+  activeThreadId = null,
+  draftRect = null,
+  regionActive = false,
+  onRegion,
 }: {
   page: number;
   onOpenThread: (commentId: string) => void;
+  activeThreadId?: string | null;
+  draftRect?: CommentRect | null;
+  regionActive?: boolean;
+  onRegion?: (rect: CommentRect) => void;
 }) {
-  useCommentMarkers({ page, active: true, onOpenThread });
+  useCommentMarkers({ page, active: true, onOpenThread, activeThreadId, draftRect });
+  useCommentRegionTool({ active: regionActive && !!onRegion, onRegion: (rect) => onRegion?.(rect) });
   return null;
 }

package/src/editor/constants.ts

@@ -183,7 +183,22 @@ export const EDITOR_IFRAME_STYLES = `
   body.text-mode [data-editable="true"] {
     pointer-events: none;
   }
-  body:not(.draw-mode):not(.text-mode):not(.move-mode) [data-editable="true"] {
+  /* コメントの範囲指定中: 要素は反応せず、紙面のドラッグが範囲になる */
+  body.comment-mode {
+    cursor: crosshair !important;
+  }
+  body.comment-mode [data-editable="true"] {
+    pointer-events: none;
+  }
+  body.comment-mode .selection-box,
+  body.comment-mode .hover-preview {
+    display: none !important;
+  }
+  /* 範囲の枠の上からも新しい範囲を描けるように(ピンはクリックでスレッドを開く) */
+  body.comment-mode .gg-comment-layer [data-comment-rect] {
+    pointer-events: none !important;
+  }
+  body:not(.draw-mode):not(.text-mode):not(.move-mode):not(.comment-mode) [data-editable="true"] {
     pointer-events: auto !important;
     cursor: pointer;
   }