@growgroup/visual-editor 0.6.0 → 0.7.0

package/src/editor/hooks/useLinkNavigation.ts

@@ -0,0 +1,160 @@
+/**
+ * ⌘ / Ctrl + クリックでリンク先へ移る(utils/link-navigation.ts)の、エディタ側の行き先。
+ *
+ * ページの切替は、ページ一覧で切り替えるときと同じ経路を通す
+ * (未保存の変更は FrontendVisualEditor.handleContentChange が保存してから移る):
+ * - キャンバス   … focusPage で視点を寄せ、activatePage で編集中のページにする
+ * - 1 ページ表示 … onContentChange(= handleContentChange。保存 → 読み込み → 利用側へ通知)
+ */
+import { useCallback, useRef } from 'react';
+import { useEditorContext } from '../EditorContext';
+import { RULER_SIZE, useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+import {
+  attachLinkNavigation,
+  clearPendingAnchor,
+  findAnchorTarget,
+  peekPendingAnchor,
+  resolveLinkTarget,
+  setPendingAnchor,
+  type LinkTarget,
+} from '../utils/link-navigation';
+
+/** アンカーの要素を、画面の上端からこれだけ下に置く(定規・フレーム名に隠れないように) */
+const ANCHOR_MARGIN = 48;
+/** 別のページのアンカーへ移ってきたとき、紙面の高さ・初期位置が落ち着くのを待つ */
+const PENDING_ANCHOR_DELAY_MS = 500;
+
+const prefersReducedMotion = () =>
+  typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+export function useLinkNavigation() {
+  const { contentList, currentContentId, onContentChange } = useEditorContext();
+  const canvas = useMultiPageCanvasOptional();
+  const stateRef = useRef({ contentList, currentContentId, onContentChange, canvas });
+  stateRef.current = { contentList, currentContentId, onContentChange, canvas };
+
+  /** 紙面の中の要素(`'top'` なら先頭)が見える位置へ紙面を移す。見つからなければ false */
+  const revealAnchor = useCallback((iframeDoc: Document, hash: string): boolean => {
+    const found = findAnchorTarget(iframeDoc, hash);
+    const el = found === 'top' ? iframeDoc.getElementById('artboard') : found;
+    if (!el) return false;
+    const c = stateRef.current.canvas;
+
+    if (c?.isEnabled) {
+      // キャンバス: 紙面(iframe)は伸びきっていてスクロールしない。キャンバスの位置を動かす
+      const frameEl = iframeDoc.defaultView?.frameElement as HTMLElement | null;
+      const container = c.containerRef.current;
+      if (!frameEl || !container) return false;
+      const fr = frameEl.getBoundingClientRect();
+      const scale = fr.width / (frameEl.clientWidth || fr.width) || 1;
+      const er = el.getBoundingClientRect();
+      const cr = container.getBoundingClientRect();
+      const inset = c.rulersVisible ? RULER_SIZE : 0;
+      const left = fr.left + er.left * scale;
+      const top = fr.top + er.top * scale;
+      const width = Math.min(er.width * scale, cr.width - inset);
+      const dy = cr.top + inset + ANCHOR_MARGIN - top;
+      const fitsX = left >= cr.left + inset && left + width <= cr.right;
+      const dx = fitsX ? 0 : cr.left + inset + ANCHOR_MARGIN - left;
+      const { canvasZoom, canvasOffset } = c.viewStore.get();
+      c.setView({ zoom: canvasZoom, offset: { x: canvasOffset.x + dx, y: canvasOffset.y + dy } }, { animate: true });
+      return true;
+    }
+
+    // 1 ページ表示: 紙面の中の #canvas-container がスクロールする
+    const container = iframeDoc.getElementById('canvas-container');
+    if (!container) {
+      el.scrollIntoView({ block: 'start' });
+      return true;
+    }
+    const cr = container.getBoundingClientRect();
+    const er = el.getBoundingClientRect();
+    const fitsX = er.left >= cr.left && er.left + Math.min(er.width, cr.width) <= cr.right;
+    container.scrollTo({
+      top: container.scrollTop + er.top - cr.top - ANCHOR_MARGIN,
+      left: fitsX ? container.scrollLeft : container.scrollLeft + er.left - cr.left - ANCHOR_MARGIN,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+    return true;
+  }, []);
+
+  const navigate = useCallback(
+    (target: LinkTarget, iframeDoc: Document): string | void => {
+      const { currentContentId: currentId, onContentChange: change, canvas: c } = stateRef.current;
+      const missingAnchor = (hash: string) => `このページに #${hash} の場所がありません`;
+      switch (target.kind) {
+        case 'ignore':
+          return;
+        case 'unresolved':
+          return 'このリンク先はページ一覧にありません';
+        case 'external':
+          // 紙面の iframe は sandbox(allow-popups 無し)なので、親のウィンドウで開く
+          window.open(target.url, '_blank', 'noopener,noreferrer');
+          return;
+        case 'anchor':
+          return revealAnchor(iframeDoc, target.hash) ? undefined : missingAnchor(target.hash);
+        case 'page': {
+          if (target.id === currentId) {
+            if (target.hash) return revealAnchor(iframeDoc, target.hash) ? undefined : missingAnchor(target.hash);
+            if (c?.isEnabled) c.focusPage(target.id);
+            else revealAnchor(iframeDoc, '');
+            return;
+          }
+          setPendingAnchor(target.id, target.hash);
+          if (c?.isEnabled) {
+            c.focusPage(target.id);
+            void c.activatePage(target.id).then((ok) => {
+              if (!ok) clearPendingAnchor(target.id);
+            });
+            return;
+          }
+          if (!change) {
+            clearPendingAnchor(target.id);
+            return 'このエディタではページを移れません';
+          }
+          void Promise.resolve(change(target.id)).then((ok) => {
+            if (ok === false) clearPendingAnchor(target.id);
+          });
+          return;
+        }
+      }
+    },
+    [revealAnchor],
+  );
+
+  /** 紙面に ⌘ / Ctrl + クリックの移動を付ける。戻り値は後始末 */
+  const setupLinkNavigation = useCallback(
+    (iframeDoc: Document) => {
+      const detach = attachLinkNavigation(iframeDoc, {
+        resolve: (href) => {
+          const s = stateRef.current;
+          return resolveLinkTarget(href, {
+            pages: s.contentList,
+            currentId: s.currentContentId,
+            origin: window.location.origin,
+          });
+        },
+        navigate,
+      });
+      // 別のページのアンカー(`/company#access`)で移ってきた
+      let timer: ReturnType<typeof setTimeout> | null = null;
+      if (peekPendingAnchor(stateRef.current.currentContentId)) {
+        timer = setTimeout(() => {
+          timer = null;
+          const hash = peekPendingAnchor(stateRef.current.currentContentId);
+          // 作り直される途中のエディタ(1 ページ表示で利用側が読み直す前の 1 枚)なら次に任せる
+          if (!hash || !iframeDoc.defaultView?.frameElement?.isConnected) return;
+          clearPendingAnchor();
+          revealAnchor(iframeDoc, hash);
+        }, PENDING_ANCHOR_DELAY_MS);
+      }
+      return () => {
+        detach();
+        if (timer) clearTimeout(timer);
+      };
+    },
+    [navigate, revealAnchor],
+  );
+
+  return { setupLinkNavigation };
+}

package/src/editor/parts.ts

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

package/src/editor/types.ts

@@ -159,6 +159,10 @@ export interface SelectedElementInfo {
   // CSS Variable references (raw inline style values if they contain var())
   rawWidth?: string;          // width (e.g., "var(--spacing-lg)")
   rawHeight?: string;         // height
+  rawMinWidth?: string;       // min-width(サイズ欄の最小・最大。指定が無ければ undefined)
+  rawMaxWidth?: string;       // max-width
+  rawMinHeight?: string;      // min-height
+  rawMaxHeight?: string;      // max-height
   rawPaddingTop?: string;     // padding-top
   rawPaddingRight?: string;   // padding-right
   rawPaddingBottom?: string;  // padding-bottom

package/src/editor/utils/dom-utils.ts

@@ -8,6 +8,9 @@
 import type { ElementCapture, DOMTreeNode, MarqueeState } from '../types';
 import { removeConflictingClasses } from './tailwind-utils';
 import { debugLog } from './debug';
+// 目印クラスの定義は free-layout.ts 側が正本。ここでは選択枠の札を出すためだけに読む
+// (循環importになるが、使うのは関数の中だけなので評価順の問題は起きない)
+import { FREELAYOUT_CLASS } from './free-layout';
 
 // ========================================
 // buildDomTree キャッシュ（Phase 2 最適化）
@@ -295,6 +298,29 @@ export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   if (!topAnchored && h * scale <= ch) container.scrollTop = Math.max(0, (scrollArea.offsetHeight - ch) / 2);
 }
 
+/**
+ * 1 ページ表示のキャンバスを、横のスクロール位置 scrollLeft へ動かす。
+ * スクロールできる範囲の外なら #canvas-scroll-area を左右へ e ずつ広げて届かせる
+ * (紙面は中央寄せなので、広げると紙面が e だけ右へ動く。行き先も e だけ先へ足す)。
+ * 広げた幅は、次に倍率が変わったとき applyCanvasZoomDom が測り直す
+ */
+export function scrollCanvasLeftTo(iframeDoc: Document, scrollLeft: number): void {
+  if (iframeDoc.body?.dataset.embedded === '1') return;
+  const scrollArea = iframeDoc.getElementById('canvas-scroll-area');
+  const container = iframeDoc.getElementById('canvas-container');
+  if (!scrollArea || !container) return;
+  const areaWidth = scrollArea.getBoundingClientRect().width;
+  // 負になりうる(スクロール領域が容器より狭い)。そのときスクロールできるのは 0 だけ
+  const maxRaw = areaWidth - container.clientWidth;
+  let target = scrollLeft;
+  if (target < 0 || target > Math.max(0, maxRaw)) {
+    const e = Math.max(-target, target - maxRaw);
+    scrollArea.style.width = `${areaWidth + e * 2}px`;
+    target += e;
+  }
+  container.scrollLeft = target;
+}
+
 /* ============================ 原本への書き戻し支援 ============================
  *
  * エディタは開いた時点で全要素を絶対配置へ変換する。この変換はエディタ内の
@@ -925,6 +951,15 @@ export function restoreArtboardAutoHeight(iframeDoc: Document): void {
   }
 }
 
+/**
+ * 編集対象(選択・レイヤー)にしない要素か。
+ * 改行(<br>)と改行の候補位置(<wbr>)は文字の一部で、箱として掴むものではない。
+ * 印を付けるとレイヤー一覧に中身の無い「シェイプ」として並び、紙面でも幅 0 の要素として選べてしまう
+ */
+export function isNonEditableTag(el: Element): boolean {
+  return el.tagName === 'BR' || el.tagName === 'WBR';
+}
+
 /**
  * DOMツリー構築の内部実装
  * キャッシュを使用しない純粋な構築処理
@@ -940,6 +975,8 @@ function buildDomTreeInternal(iframeDoc: Document, rootElement?: Element): DOMTr
 
       // スキップする要素
       if (htmlChild.tagName === 'SCRIPT' || htmlChild.tagName === 'STYLE') return;
+      // 改行はレイヤーにしない(印が残っていても出さない)
+      if (isNonEditableTag(htmlChild)) return;
       if (htmlChild.classList?.contains('selection-box')) return;
       if (htmlChild.classList?.contains('resize-handle')) return;
       if (htmlChild.classList?.contains('drawing-preview')) return;
@@ -1349,6 +1386,14 @@ function drawSelectionBox(
       selectionBox.appendChild(badge);
     }
   }
+  // 自由配置の器は、選んだときに「ここは流し込みではない」と分かる札を出す。
+  // 部品の札(左上)とぶつからないよう右上に置く
+  if (mode !== 'member' && element.classList.contains(FREELAYOUT_CLASS)) {
+    const badge = iframeDoc.createElement('div');
+    badge.className = 'freelayout-badge';
+    badge.textContent = '自由配置';
+    selectionBox.appendChild(badge);
+  }
   selectionBox.style.cssText = `
     left: ${relativeLeft}px;
     top: ${relativeTop}px;