@growgroup/visual-editor 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growgroup/visual-editor",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "HTMLをブラウザ上で直接編集するビジュアルエディタ。スライド(固定サイズ)とWebページ(可変高さ)の両方に使え、保存先はアダプタで差し替えられます。",
   "keywords": [
     "visual-editor",

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

@@ -24,7 +24,7 @@ import { useState } from '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 { describeRect, fmtTime, unresolvedCount } from '../ppt/PptComments';
+import { anchorRectOf, describeRect, fmtTime, unresolvedCount } from '../ppt/PptComments';
 
 /**
  * アンカー・返信のリンク色。
@@ -371,14 +371,14 @@ function BoardCard({
       {/* 何に対する指摘か。範囲 > 要素 > ページ全体 */}
       <div
         className="mt-1.5 flex items-center gap-1 text-[10px]"
-        style={{ color: comment.anchorRect || comment.anchorSrc ? accent : pal.sub }}
+        style={{ color: anchorRectOf(comment) || comment.anchorSrc ? accent : pal.sub }}
         title={comment.anchorSrc}
       >
-        {comment.anchorRect ? <Crosshair className="h-3 w-3 shrink-0" /> : <MapPin className="h-3 w-3 shrink-0" />}
+        {anchorRectOf(comment) ? <Crosshair className="h-3 w-3 shrink-0" /> : <MapPin className="h-3 w-3 shrink-0" />}
         <span className="truncate">
           {comment.seq != null && <span className="mr-1 tabular-nums">#{comment.seq}</span>}
-          {comment.anchorRect
-            ? describeRect(comment.anchorRect)
+          {anchorRectOf(comment)
+            ? describeRect(anchorRectOf(comment)!)
             : comment.anchorSrc ? (comment.anchorLabel ? `「${comment.anchorLabel}」` : '要素に添付') : 'ページ全体'}
         </span>
       </div>

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

@@ -223,6 +223,26 @@ export function fitRect(rect: CommentRect, artboard: HTMLElement): CommentRect {
   return { x: rect.x * sx, y: rect.y, width: rect.width * sx, height: rect.height };
 }
 
+/**
+ * コメントの範囲。anchorRect が無くても、表示用の文言(「範囲 (x, y) w×h」「点 (x, y)」)から戻す。
+ *
+ * 【なぜ文言から戻すか】
+ * 範囲コメント(0.4.0)より前の提案書・構成ラフの殻は、コメントの保存で anchorRect と seq を捨て、
+ * anchorLabel だけを残す(殻の vite-plugin の許可リストに無いため)。そのままだと範囲を指定して投稿しても
+ * 紙面に枠が出ず、「範囲が表示されない」になる。文言はエディタが describeRect で書いた形なので、そこから戻せる。
+ * 要素に付けたコメント(anchorSrc)の anchorLabel は要素の文字なので読まない
+ */
+export function anchorRectOf(c: Pick<SlideComment, 'anchorRect' | 'anchorLabel' | 'anchorSrc'>): CommentRect | undefined {
+  if (c.anchorRect) return c.anchorRect;
+  if (c.anchorSrc || !c.anchorLabel) return undefined;
+  const num = '(-?\\d+(?:\\.\\d+)?)';
+  const range = c.anchorLabel.match(new RegExp(`^範囲 \\(${num}, ${num}\\) ${num}×${num}$`));
+  if (range) return { x: +range[1], y: +range[2], width: +range[3], height: +range[4] };
+  const point = c.anchorLabel.match(new RegExp(`^点 \\(${num}, ${num}\\)$`));
+  if (point) return { x: +point[1], y: +point[2], width: 0, height: 0 };
+  return undefined;
+}
+
 /** 矩形を人が読む形に(「範囲 (120, 840) 600×240」「点 (120, 840)」) */
 export function describeRect(r: CommentRect): string {
   const n = (v: number) => String(Math.round(v));
@@ -282,7 +302,7 @@ export function useCommentMarkers({
       const artboard = doc?.getElementById('artboard');
       if (!doc || !artboard) return;
       const layer = ensureCommentLayer(doc, artboard);
-      const shown = comments.filter((c) => (c.anchorRect || c.anchorSrc) && !c.resolved);
+      const shown = comments.filter((c) => (anchorRectOf(c) || 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();
@@ -318,8 +338,9 @@ export function useCommentMarkers({
         const isActive = c.id === activeThreadId;
         let x = 0;
         let y = 0;
-        if (c.anchorRect) {
-          const r = fitRect(c.anchorRect, artboard);
+        const anchorRect = anchorRectOf(c);
+        if (anchorRect) {
+          const r = fitRect(anchorRect, artboard);
           if (isPointRect(r)) {
             layer.querySelector(`[data-comment-id="${CSS.escape(c.id)}"][data-comment-rect]`)?.remove();
             x = r.x - size / 2;
@@ -404,7 +425,7 @@ export function useCommentMarkers({
   }, [
     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])),
+    JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.anchorRect, c.anchorLabel, c.seq, c.resolved, c.author, c.text])),
   ]);
 }
 
@@ -770,10 +791,10 @@ export function PptCommentsPanel({
         </button>
       </div>
 
-      {c.anchorRect ? (
+      {anchorRectOf(c) ? (
         <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)}
+          {describeRect(anchorRectOf(c)!)}
         </div>
       ) : c.anchorSrc && (
         <div className="mt-1.5 flex items-center gap-1 text-[10px]" style={{ color: 'var(--ed-accent)' }}>

package/src/editor/hooks/useContextMenuHandler.ts

@@ -9,6 +9,7 @@ import { useCallback, useRef, useEffect, MutableRefObject } from 'react';
 import { useEditorContext } from '../EditorContext';
 import { updateSelectionBox } from '../utils/dom-utils';
 import { extractElementInfo } from '../utils/style-utils';
+import { passThroughSvg } from '../utils/svg-hit';
 
 interface UseContextMenuHandlerOptions {
   /** 編集可能要素を取得する関数 */
@@ -86,7 +87,8 @@ export function useContextMenuHandler(
         const y = iframeRect.top + e.clientY * outerScale;
 
         // 要素がクリックされた場合は選択
-        const element = getEditableElement(e.target, iframeDoc);
+        // SVG の箱の空きは素通りさせる(クリックの判別と同じ。utils/svg-hit.ts)
+        const element = getEditableElement(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc);
         if (element) {
           const elementId = element.getAttribute('data-element-id') || '';
           const currentIds = selectedElementIdsRef.current;

package/src/editor/hooks/useElementSelection.ts

@@ -26,6 +26,7 @@ import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
 import type { DragState, ResizeState, MarqueeState } from "../types";
 import { debugLog } from '../utils/debug';
+import { passThroughSvg } from '../utils/svg-hit';
 
 /**
  * mousedown で保留し、mouseup で意味を確定するクリック情報
@@ -1181,6 +1182,9 @@ export function useElementSelection(
                   ),
               ) ?? null;
         }
+        // SVG の箱の中で何も描かれていない所を押したら、SVG を素通りして下の要素を押したことにする。
+        // 装飾の SVG が文字やボタンに重なっていると、素のクリックも Cmd+クリックも SVG しか選べなかった(utils/svg-hit.ts)
+        hitSource = passThroughSvg(iframeDoc, hitSource, e.clientX, e.clientY);
         const hit = getEditableElement(hitSource, iframeDoc);
         // 空白＝押した点の祖先に編集可能要素がまったく無い状態。
         // #artboard / 紙面と同じ大きさの器 / #artboard-wrapper / #canvas-container は
@@ -1432,7 +1436,7 @@ export function useElementSelection(
 
 
         const isCtrlCmd = e.ctrlKey || e.metaKey;
-        const deepElement = getEditableElement(e.target, iframeDoc);
+        const deepElement = getEditableElement(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc);
 
         if (!deepElement) return;
 

package/src/editor/hooks/useIframeSetup.ts

@@ -12,6 +12,7 @@ import { buildDomTree, isInlineElement, isNonEditableTag } from '../utils/dom-ut
 import { EDITOR_IFRAME_STYLES } from '../constants';
 import { isLockedInsidePart } from '../parts';
 import { debugLog } from '../utils/debug';
+import { isInsideSvg, passThroughSvg } from '../utils/svg-hit';
 
 interface UseIframeSetupReturn {
   /**
@@ -107,7 +108,14 @@ export function useIframeSetup(): UseIframeSetupReturn {
         element.removeAttribute('data-inline');
         return;
       }
-      if (element.closest('script, style, svg path, svg g')) return;
+      if (element.closest('script, style')) return;
+      // SVG の中(path / circle / g など)は SVG ごと 1 つの図として扱う(utils/svg-hit.ts)。
+      // 以前は path と g だけを外していたので、circle や rect が単独で選ばれていた
+      if (isInsideSvg(element)) {
+        element.removeAttribute('data-editable');
+        element.removeAttribute('data-element-id');
+        return;
+      }
       if (element.classList.contains('material-icons')) return;
       if (element.classList.contains('material-icons-outlined')) return;
       // selection-box およびその子要素はスキップ
@@ -274,7 +282,8 @@ export function useIframeSetup(): UseIframeSetupReturn {
           clearPreview();
           return;
         }
-        const next = resolveHoverTarget(e.target, iframeDoc, {
+        // SVG の箱の空きは素通りさせる(クリックの判別と同じ。utils/svg-hit.ts)
+        const next = resolveHoverTarget(passThroughSvg(iframeDoc, e.target, e.clientX, e.clientY), iframeDoc, {
           meta: e.metaKey || e.ctrlKey,
         });
         if (next === currentPreviewElement) return;

package/src/editor/parts.ts

@@ -17,6 +17,7 @@
 import type { EditorPartDef } from '../io';
 import { findFlowInsertion } from './utils/drop-target';
 import { isNonEditableTag } from './utils/dom-utils';
+import { isInsideSvg } from './utils/svg-hit';
 
 export const PART_ATTR = 'data-part';
 export const PART_VERSION_ATTR = 'data-part-v';
@@ -317,7 +318,7 @@ export function unlockPartDescendants(root: HTMLElement): number {
   let i = 0;
   const stamp = Date.now();
   for (const el of Array.from(root.querySelectorAll('*'))) {
-    if (el.closest('script, style, svg path, svg g')) continue;
+    if (el.closest('script, style') || isInsideSvg(el)) continue;
     if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') continue;
     if (isNonEditableTag(el)) continue;
     if (!el.getAttribute('data-element-id')) {

package/src/editor/utils/svg-hit.ts

@@ -0,0 +1,141 @@
+/**
+ * SVG をクリックしたときの当たり判定。
+ *
+ * 【なぜ要るか】
+ * HTML の中の `<svg>` は、描いた線や塗りが無い所も含めて**箱全体**でクリックを受ける。
+ * 装飾の SVG(斜めの線・背景の図形)が文字やボタンの上に重なっていると、その箱の中を
+ * どこを押しても SVG が選ばれ、下の要素を選べなかった。Cmd/Ctrl+クリック(最下層を選ぶ)も
+ * 押した点の最上面から探すので同じだった。
+ *
+ * 【どう直したか】
+ * Figma と同じく、見えている形(線・塗り・画像)の上を押したときだけ SVG を選び、
+ * 箱の中の何も描かれていない所は**素通り**して下の要素を選ぶ。
+ * 形の上かどうかは elementsFromPoint で見る。SVG の子(path / circle など)は
+ * 描かれている所でしか当たらない(pointer-events の既定 visiblePainted)ので、
+ * その点に子が返らなければ「箱の空き」と分かる。細い線は掴みにくいので、周り 3px も見る。
+ *
+ * SVG の中の要素(path / circle / g など)は、SVG ごと 1 つの図として扱う。
+ * 編集の印(data-editable)は付けない(isInsideSvg)。
+ */
+
+/** エディタが紙面に重ねる層(選択枠・マーキー・ガイド)。当たり判定から外す */
+const EDITOR_LAYERS =
+  '.selection-box,.marquee-selection-box,[data-editor-overlay],#gg-smart-guides,#gg-measure-layer,.gg-collab-layer';
+
+/** 細い線を掴めるようにする許容(px) */
+const STROKE_TOLERANCE = 3;
+
+/** SVG の中の要素か(`<svg>` 自身は含まない)。中身は SVG ごと 1 つの図として扱う */
+export function isInsideSvg(el: Element): boolean {
+  const parent = el.parentElement;
+  return !!parent && typeof parent.closest === 'function' && !!parent.closest('svg');
+}
+
+/** 入れ子の SVG なら一番外の `<svg>` */
+function outermostSvg(el: Element): Element | null {
+  let svg = typeof el.closest === 'function' ? el.closest('svg') : null;
+  while (svg) {
+    const up = svg.parentElement?.closest('svg') ?? null;
+    if (!up) return svg;
+    svg = up;
+  }
+  return null;
+}
+
+function isEditorLayer(el: Element): boolean {
+  return typeof el.closest === 'function' && !!el.closest(EDITOR_LAYERS);
+}
+
+/** SVG 自身に背景(CSS の background)が塗られていれば、箱全体が見えている */
+function hasOwnBackground(svg: Element, doc: Document): boolean {
+  const cs = doc.defaultView?.getComputedStyle(svg);
+  if (!cs) return false;
+  const bg = cs.backgroundColor;
+  const transparent = !bg || bg === 'transparent' || /rgba\([^)]*,\s*0\)$/.test(bg);
+  return !transparent || (cs.backgroundImage && cs.backgroundImage !== 'none') || false;
+}
+
+/**
+ * SVG を包んでいるだけの透明な器か(図形ツールで描いた線・矢印・ペンは
+ * `<div style="position:absolute;background-color:transparent"><svg …></div>` の形)。
+ * 子が全部「素通りさせた要素」で、自分の文字も背景・枠線・影も無ければ、器も素通りさせる。
+ * これが無いと、SVG を素通りした先で器の箱が当たり、線の周りの空きで結局同じことが起きる
+ */
+function isBareWrapper(el: Element, doc: Document, skipped: Set<Element>): boolean {
+  if (el.children.length === 0) return false;
+  if (!Array.from(el.children).every((c) => skipped.has(c))) return false;
+  if (Array.from(el.childNodes).some((n) => n.nodeType === 3 && (n.textContent ?? '').trim() !== '')) return false;
+  const cs = doc.defaultView?.getComputedStyle(el);
+  if (!cs) return false;
+  const paintsBox =
+    hasOwnBackground(el, doc) ||
+    ['Top', 'Right', 'Bottom', 'Left'].some(
+      (s) => parseFloat(cs.getPropertyValue(`border-${s.toLowerCase()}-width`)) > 0 && cs.getPropertyValue(`border-${s.toLowerCase()}-style`) !== 'none',
+    ) ||
+    (!!cs.boxShadow && cs.boxShadow !== 'none');
+  // outline は見ない。エディタが編集できる要素すべてに透明な outline(ホバー予告用)を付けているため
+  return !paintsBox;
+}
+
+/**
+ * 図形ツールの線・矢印・ペンは、位置と大きさを持つ透明な器の中に `position:absolute` の SVG が 1 つだけ入る。
+ * 動かす・大きさを変える対象は器なので、SVG を押したら器を選ぶ(SVG を選ぶと器の中で SVG だけが動く)
+ */
+function drawnShapeOf(svg: Element, doc: Document): Element {
+  const parent = svg.parentElement;
+  if (!parent || parent.children.length !== 1) return svg;
+  if (parent.hasAttribute('data-gg-fx-host')) return svg;
+  if (doc.defaultView?.getComputedStyle(svg).position !== 'absolute') return svg;
+  return isBareWrapper(parent, doc, new Set([svg])) ? parent : svg;
+}
+
+/** (x, y) の近くで、その SVG の形(子要素)が描かれているか */
+function paintedNear(doc: Document, svg: Element, x: number, y: number): boolean {
+  const t = STROKE_TOLERANCE;
+  const offsets = [[0, 0], [t, 0], [-t, 0], [0, t], [0, -t], [t, t], [t, -t], [-t, t], [-t, -t]];
+  for (const [dx, dy] of offsets) {
+    for (const el of doc.elementsFromPoint(x + dx, y + dy)) {
+      if (el !== svg && svg.contains(el)) return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * クリック(ホバー・右クリック・ダブルクリック)の対象を、SVG の空きを素通りさせて決める。
+ * SVG と関係の無い点では target をそのまま返す(elementsFromPoint も呼ばない)。
+ *
+ * @param target 生のイベント対象(e.target、または選択枠の下から拾った要素)
+ * @param x, y   紙面(iframe)の中の座標(e.clientX / e.clientY)
+ * @returns 選択の判別に使う要素。空白(body 等)になることもある
+ */
+export function passThroughSvg(
+  doc: Document,
+  target: EventTarget | null,
+  x: number,
+  y: number,
+): Element | null {
+  const el = target as Element | null;
+  if (!el || el.nodeType !== 1 || typeof el.closest !== 'function') return el;
+  if (!el.closest('svg')) return el;
+  if (typeof doc.elementsFromPoint !== 'function') return el;
+
+  const skipped = new Set<Element>();
+  for (const candidate of doc.elementsFromPoint(x, y)) {
+    if (isEditorLayer(candidate)) continue;
+    const svg = outermostSvg(candidate);
+    if (!svg) {
+      // 素通りさせた SVG を包むだけの透明な器なら、それも素通りする
+      if (skipped.size > 0 && isBareWrapper(candidate, doc, skipped)) {
+        skipped.add(candidate);
+        continue;
+      }
+      return candidate; // SVG の外の要素 = 下にあるもの
+    }
+    if (skipped.has(svg)) continue;
+    if (candidate !== svg) return drawnShapeOf(svg, doc); // 形の上を押した = その SVG
+    if (hasOwnBackground(svg, doc) || paintedNear(doc, svg, x, y)) return drawnShapeOf(svg, doc);
+    skipped.add(svg); // 箱の空き = 素通りして下を見る
+  }
+  return null;
+}

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.9.0';
+export const EDITOR_VERSION = '0.9.1';