@growgroup/visual-editor 0.10.0 → 0.11.0

package/src/editor/hooks/useKeyboardShortcuts.ts

@@ -17,6 +17,13 @@
 
 import { useCallback } from 'react';
 import { refreshSelectionOverlay, getArtboardContent } from '../utils/dom-utils';
+import { useEditorContext } from '../EditorContext';
+import { COALESCE_WINDOW_MS } from '../utils/history-timing';
+import { alignElements, distributeElements, mirrorPositions, type AlignMode, type DistributeAxis } from '../utils/align-elements';
+import { applyTailwindStyles } from '../utils/tailwind-utils';
+import { extractElementInfo } from '../utils/style-utils';
+import type { ShortcutCallbacks } from '../../types/editor';
+import { LOCK_ATTR, isLockedEl, withoutLocked } from '../utils/lock';
 
 interface UseKeyboardShortcutsOptions {
   /** グループ化関数 */
@@ -91,6 +98,8 @@ export function selectAllSiblingsIn(
       return !ancestor || !artboard.contains(ancestor);
     });
   }
+  // ロック中の要素は紙面からは選ばない(⌘A。Figma の Select all もロック中を飛ばす。記憶)
+  siblings = siblings.filter((el) => !isLockedEl(el));
   if (siblings.length === 0) return { ids: [], elements: [] };
 
   iframeDoc.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
@@ -152,6 +161,8 @@ export function selectSiblingIn(
       return !ancestor || !artboard.contains(ancestor);
     });
   }
+  // Tab の巡回もロック中の要素を飛ばす
+  siblings = siblings.filter((el) => !isLockedEl(el));
   if (siblings.length === 0) return null;
 
   const index = current ? siblings.indexOf(current) : -1;
@@ -214,3 +225,479 @@ export function useKeyboardShortcuts(
 
   return { setupKeyboardShortcuts };
 }
+
+// ============================================================
+// Figma の作法に合わせたキャンバス操作(Enter / Shift+Enter / 整列 / 表示・ロック / 不透明度 / 書式)
+// ============================================================
+
+/** 選択枠などオーバーレイの中の要素は「紙面の要素」として数えない */
+function isOverlayNode(el: Element): boolean {
+  return !!el.closest('.selection-box, #gg-smart-guides, #gg-measure-layer');
+}
+
+/**
+ * el の「1段内側」の要素。編集できない包み(レイアウト用の div 等)は透過して、
+ * 枝ごとに最初に当たる編集可能な要素を拾う(Figma のレイヤーパネルの1段下と同じ見え方)
+ */
+export function editableChildrenOf(el: HTMLElement): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  const walk = (node: Element) => {
+    for (const child of Array.from(node.children)) {
+      if (isOverlayNode(child)) continue;
+      if (child.getAttribute('data-editable') === 'true' && child.getAttribute('data-element-id')) {
+        out.push(child as HTMLElement);
+      } else {
+        walk(child);
+      }
+    }
+  };
+  walk(el);
+  return out;
+}
+
+/** el の1段外側の編集可能な要素。紙面(#artboard)の外へは出ない */
+export function editableParentOf(el: HTMLElement): HTMLElement | null {
+  const artboard = el.ownerDocument.getElementById('artboard');
+  const parent = el.parentElement?.closest<HTMLElement>('[data-editable="true"][data-element-id]') ?? null;
+  if (!parent || !artboard || parent === artboard || !artboard.contains(parent)) return null;
+  // 紙面いっぱいのルート(スライドの面)は「親」として選ばない。
+  // 選べても全体が青くなるだけで、最上位の要素から Esc で抜けられなくなる
+  if (
+    parent.parentElement === artboard &&
+    parent.offsetWidth >= artboard.offsetWidth &&
+    parent.offsetHeight >= artboard.offsetHeight
+  ) {
+    return null;
+  }
+  return parent;
+}
+
+/**
+ * 文字を直に持つ要素か(Enter で「子を選ぶ」ではなく「文字の編集に入る」対象)。
+ * <p>本文<span>強調</span></p> のような段落は、中の span を子として選ぶより
+ * 文字の編集に入るほうが Figma のテキストレイヤーの感覚に近い
+ */
+function hasOwnText(el: HTMLElement): boolean {
+  return Array.from(el.childNodes).some(
+    (n) => n.nodeType === 3 && (n.textContent ?? '').trim().length > 0,
+  );
+}
+
+function selectedEls(doc: Document, ids: string[]): HTMLElement[] {
+  return ids
+    .map((id) => doc.querySelector<HTMLElement>(`[data-element-id="${id}"]`))
+    .filter((el): el is HTMLElement => !!el && !isOverlayNode(el));
+}
+
+/** DOM の選択表示を els に揃える(クラスと枠)。React 側の状態は呼び出し側で合わせる */
+function markSelected(doc: Document, els: HTMLElement[]): void {
+  doc.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
+  els.forEach((el) => el.classList.add('selected'));
+  refreshSelectionOverlay(doc);
+}
+
+/** 文字の編集に入る。既存のダブルクリック処理(選択済み+文字要素→編集)をそのまま通す */
+function startTextEditingViaDblClick(el: HTMLElement): void {
+  const view = el.ownerDocument.defaultView;
+  if (!view) return;
+  const r = el.getBoundingClientRect();
+  el.dispatchEvent(
+    new view.MouseEvent('dblclick', {
+      bubbles: true,
+      cancelable: true,
+      clientX: r.left + Math.min(8, r.width / 2),
+      clientY: r.top + r.height / 2,
+      detail: 2,
+    }),
+  );
+}
+
+/**
+ * 数字を2つ続けて押したとみなす間隔(ms)。Figma の「4→5 で 45%」(記憶にもとづく・未確認)。
+ * 履歴が同じ要素への続けての変更を1つにまとめる間隔と揃える。こうすると2打目が1打目の履歴を
+ * 置き換え、⌘Z 1回で「押す前」に戻る(間隔がずれると1打目だけが別の履歴として残る)
+ */
+const OPACITY_TWO_DIGIT_MS = COALESCE_WINDOW_MS;
+let lastOpacityDigit: { digit: number; at: number } | null = null;
+
+/**
+ * transform の中の scaleX(-1) / scaleY(-1) を付け外しする。rotate など他の関数は順序ごと残す。
+ * 回転のドラッグ(useDragResize の setTransformFn)は scaleX / scaleY を消さないので両立する
+ */
+export function toggleFlipIn(transform: string, axis: 'x' | 'y'): string {
+  const fn = axis === 'x' ? 'scaleX(-1)' : 'scaleY(-1)';
+  const pattern = axis === 'x' ? /\s*scaleX\(-1\)/g : /\s*scaleY\(-1\)/g;
+  // 回転している要素は、画面の軸で鏡写しにする(Figma と同じ見え方)。
+  // 鏡写し × rotate(a) = rotate(-a) × 鏡写し なので、角度の符号を反転してから反転を付け外しする
+  const mirrored = transform.replace(/rotate\((-?[\d.]+)deg\)/, (_, deg: string) => {
+    const next = -Number(deg);
+    return `rotate(${Object.is(next, -0) ? 0 : next}deg)`;
+  });
+  const cleaned = mirrored.replace(pattern, '').trim();
+  if (cleaned !== mirrored.trim()) return cleaned;
+  return cleaned ? `${cleaned} ${fn}` : fn;
+}
+
+/** ⌘R でレイヤー名の入力を開く合図。レイヤーパネル(と左パネルのタブ)が受け取る */
+export const RENAME_LAYER_EVENT = 'gg:rename-layer';
+
+/** ⌘\ で UI を隠すときにエディタの外枠に付けるクラス(skin.css が見る) */
+const UI_HIDDEN_CLASS = 'gg-ui-hidden';
+
+/** 文字を直に持つ要素(テキストノードの子がある要素)。⌘⇧> / ⌘⇧< の対象 */
+function textBearers(root: HTMLElement): HTMLElement[] {
+  const all = [root, ...Array.from(root.querySelectorAll<HTMLElement>('*'))];
+  return all.filter(
+    (el) =>
+      !el.closest('.selection-box') &&
+      Array.from(el.childNodes).some((n) => n.nodeType === 3 && (n.textContent ?? '').trim()),
+  );
+}
+
+/**
+ * ⌘\: エディタの外枠(.gg-editor-ui)にクラスを付け外しして、上の帯・左右のパネル・下の帯・道具箱を隠す。
+ * 紙面(キャンバス)だけが残る。もう一度 ⌘\ で戻る(Figma の Hide/Show UI)
+ */
+function toggleEditorUi(): void {
+  const shell = document.querySelector('.gg-editor-ui');
+  if (!shell) return;
+  shell.classList.toggle(UI_HIDDEN_CLASS);
+}
+
+/** ⌘⇧O のアウトライン表示。iframe の <html> にクラスを付ける(保存は #artboard の中身だけなので本文には残らない) */
+const OUTLINE_CLASS = 'gg-outline-mode';
+const OUTLINE_STYLE_ID = 'gg-outline-mode-style';
+/**
+ * 輪郭表示でも消さないエディタの飾り(選択枠・ハンドル・寸法・吸着ガイド・計測など)。
+ * #artboard の中に描かれているので、除外しないと一緒に透明になって選択枠や寸法が見えなくなる
+ */
+const OUTLINE_KEEP =
+  '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,.size-label,.element-breadcrumb,' +
+  '#gg-smart-guides,#gg-measure-layer,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui';
+const OUTLINE_TARGET = `html.${OUTLINE_CLASS} #artboard *:not(:is(${OUTLINE_KEEP})):not(:is(${OUTLINE_KEEP}) *)`;
+const OUTLINE_CSS = `
+html.${OUTLINE_CLASS} #artboard {
+  background: #fff !important;
+}
+${OUTLINE_TARGET} {
+  background: transparent !important;
+  box-shadow: none !important;
+  border-color: transparent !important;
+  outline: 1px solid rgba(0, 0, 0, 0.55) !important;
+  outline-offset: -1px;
+  -webkit-text-fill-color: transparent !important;
+  -webkit-text-stroke: 0.8px #222 !important;
+}
+${OUTLINE_TARGET}:is(img, video), ${OUTLINE_TARGET}:is(svg *) {
+  opacity: 0 !important;
+}
+`;
+
+/**
+ * ⌘⇧O: 紙面の塗り・画像を消して、各要素の枠と文字の輪郭だけを見せる(Figma の Show outlines)。
+ * 重なって見えない要素や、透明な器の大きさを確かめるのに使う。もう一度押すと戻る
+ */
+function toggleOutlineIn(doc: Document): void {
+  if (!doc.getElementById(OUTLINE_STYLE_ID)) {
+    const style = doc.createElement('style');
+    style.id = OUTLINE_STYLE_ID;
+    style.textContent = OUTLINE_CSS;
+    doc.head.appendChild(style);
+  }
+  doc.documentElement.classList.toggle(OUTLINE_CLASS);
+}
+
+const OPACITY_KEYS = ['opacity1', 'opacity2', 'opacity3', 'opacity4', 'opacity5', 'opacity6', 'opacity7', 'opacity8', 'opacity9', 'opacity0'] as const;
+
+/**
+ * Figma 準拠のキャンバス操作をショートカットのコールバック表として返す。
+ * FrontendVisualEditor の shortcutCallbacks に展開して使う。
+ * 選択が無いときは undefined を返し、キーをブラウザ既定に通す(何も奪わない)。
+ */
+export function useCanvasShortcutActions(): ShortcutCallbacks {
+  const {
+    getIframeDoc,
+    selectedElement,
+    selectedElementIds,
+    setSelectedElement,
+    setSelectedElementIds,
+    notifyIframeChange,
+    restoreFocus,
+  } = useEditorContext();
+
+  const ids = selectedElementIds.length ? selectedElementIds : selectedElement ? [selectedElement.id] : [];
+  const hasSelection = ids.length > 0;
+
+  /** DOM の選択を React 側へ反映する(右パネル・レイヤーパネルが追従する) */
+  const commit = useCallback(
+    (doc: Document, els: HTMLElement[]) => {
+      markSelected(doc, els);
+      setSelectedElementIds(els.map((el) => el.getAttribute('data-element-id') || '').filter(Boolean));
+      const info = els[0] ? extractElementInfo(els[0], doc) : null;
+      setSelectedElement(info ?? null);
+      restoreFocus();
+    },
+    [setSelectedElementIds, setSelectedElement, restoreFocus],
+  );
+
+  /** 書き換えたあとの後始末(履歴へ積み、枠と右パネルを描き直す) */
+  const afterChange = useCallback(
+    (doc: Document, changed: HTMLElement[]) => {
+      if (!changed.length) return;
+      notifyIframeChange();
+      requestAnimationFrame(() => refreshSelectionOverlay(doc));
+      const first = selectedEls(doc, ids)[0];
+      const info = first ? extractElementInfo(first, doc) : null;
+      if (info) setSelectedElement(info);
+    },
+    // ids は毎レンダー作り直すので文字列で比べる
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [notifyIframeChange, setSelectedElement, ids.join(',')],
+  );
+
+  /** Enter: 子を選ぶ。文字を直に持つ要素なら文字の編集に入る */
+  const selectChildren = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const els = selectedEls(doc, ids);
+    if (els.length === 1 && hasOwnText(els[0])) {
+      startTextEditingViaDblClick(els[0]);
+      return;
+    }
+    const children = els.flatMap(editableChildrenOf);
+    if (children.length === 0) {
+      // 子が無い葉(画像・図形・文字だけの要素)。文字を持つなら編集に入る
+      if (els.length === 1 && (els[0].textContent ?? '').trim()) startTextEditingViaDblClick(els[0]);
+      return;
+    }
+    commit(doc, children);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, commit, ids.join(',')]);
+
+  /** Shift+Enter: 親を選ぶ(複数選択なら各要素の親をまとめて)。最上位では何もしない */
+  const selectParent = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const parents = Array.from(
+      new Set(selectedEls(doc, ids).map(editableParentOf).filter((p): p is HTMLElement => !!p)),
+    );
+    if (parents.length === 0) return;
+    commit(doc, parents);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, commit, ids.join(',')]);
+
+  const runAlign = useCallback(
+    (mode: AlignMode) => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      afterChange(doc, alignElements(withoutLocked(selectedEls(doc, ids)), mode));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  const runDistribute = useCallback(
+    (axis: DistributeAxis) => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      afterChange(doc, distributeElements(withoutLocked(selectedEls(doc, ids)), axis));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⌘⇧H: 隠す/表示する。書き方はレイヤーパネルの目のアイコンと同じ
+   * (visibility:hidden + opacity:0)にそろえる。違う書き方にすると、
+   * 片方で隠したものがもう片方で「表示中」に見える
+   */
+  const toggleHidden = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const els = selectedEls(doc, ids);
+    const allHidden = els.length > 0 && els.every((el) => el.style.visibility === 'hidden');
+    els.forEach((el) => {
+      el.style.visibility = allHidden ? '' : 'hidden';
+      el.style.opacity = allHidden ? '' : '0';
+    });
+    afterChange(doc, els);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, afterChange, ids.join(',')]);
+
+  /**
+   * ⌘⇧L: ロック/解除。data-gg-locked="true" を付けると、紙面のクリックが下の要素へ
+   * 素通りする(constants.ts の EDITOR_STYLES)。選択はレイヤーパネルから行える(Figma と同じ)
+   */
+  const toggleLocked = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const els = selectedEls(doc, ids);
+    const allLocked = els.length > 0 && els.every((el) => el.getAttribute(LOCK_ATTR) === 'true');
+    els.forEach((el) => {
+      if (allLocked) el.removeAttribute(LOCK_ATTR);
+      else el.setAttribute(LOCK_ATTR, 'true');
+    });
+    afterChange(doc, els);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getIframeDoc, afterChange, ids.join(',')]);
+
+  /** 数字キー: 不透明度(1=10% … 9=90%, 0=100%) */
+  const setOpacity = useCallback(
+    (digit: number) => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      const els = withoutLocked(selectedEls(doc, ids));
+      // 素早く2つ続けたら2桁(4→5 で 45%、0→0 で 0%)。1つだけなら 1=10% … 9=90%、0=100%
+      const now = Date.now();
+      const prev = lastOpacityDigit && now - lastOpacityDigit.at < OPACITY_TWO_DIGIT_MS ? lastOpacityDigit : null;
+      let value: string;
+      if (prev) {
+        value = String((prev.digit * 10 + digit) / 100);
+        lastOpacityDigit = null;
+      } else {
+        value = digit === 0 ? '1' : String(digit / 10);
+        lastOpacityDigit = { digit, at: now };
+      }
+      els.forEach((el) => applyTailwindStyles(el, { opacity: value }));
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⇧H / ⇧V: 左右反転・上下反転(help.figma.com「Adjust alignment, rotation, position, and dimensions」の
+   * Flip layers と同じキー)。複数選択は Figma と同じく選択全体を 1 つの塊として反転する
+   * (各要素の位置を選択群の中心で鏡写しにし、各要素にも反転を付ける)。履歴は 1 回分
+   */
+  const flip = useCallback(
+    (axis: 'x' | 'y') => {
+      const doc = getIframeDoc();
+      if (!doc) return;
+      const els = withoutLocked(selectedEls(doc, ids));
+      // 複数選択は塊として鏡写し: 位置を選択群の中心で反転してから、各要素にも反転を付ける
+      if (els.length > 1) mirrorPositions(els, axis);
+      els.forEach((el) => {
+        const next = toggleFlipIn(el.style.transform || '', axis);
+        if (next) el.style.transform = next;
+        else el.style.removeProperty('transform');
+      });
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⌘⇧> / ⌘⇧<: 文字の大きさを 1px 上げる/下げる。
+   * 刻みは記憶にもとづく(help.figma.com「Explore text properties」はキーだけで刻みを書いていない)。
+   * 選んだ要素の中で文字を直に持つ要素それぞれを、今の大きさから同じ量だけ動かす
+   * (見出しと本文の大きさの差は保つ)。複数選択でも1回の変更 = ⌘Z 1回で戻る。
+   */
+  const stepFontSize = useCallback(
+    (delta: number) => {
+      const doc = getIframeDoc();
+      const view = doc?.defaultView;
+      if (!doc || !view) return;
+      const els = withoutLocked(selectedEls(doc, ids));
+      const targets = Array.from(new Set(els.flatMap(textBearers)));
+      if (!targets.length) return;
+      // 先に全部の今の大きさを読む(親を書き換えてから子を読むと継承で値が変わる)
+      const sizes = targets.map((el) => parseFloat(view.getComputedStyle(el).fontSize));
+      targets.forEach((el, i) => {
+        if (!Number.isFinite(sizes[i])) return;
+        const next = Math.max(1, Math.round(sizes[i]) + delta);
+        // tailwind-merge は text-[Npx] を入れると leading-* を消す(文字の大きさが行の高さも決めるため)。
+        // 行の高さは変えたくないので、付いていた leading-* を戻す
+        const leading = Array.from(el.classList).filter((c) => /^leading-/.test(c));
+        applyTailwindStyles(el, { fontSize: `${next}px` });
+        leading.forEach((c) => el.classList.add(c));
+      });
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  /**
+   * ⌘B / ⌘I / ⌘U: 要素の文字全体の書式を切り替える。
+   * 複数選択なら「全部が ON なら OFF、それ以外は全部 ON」(Figma と同じ揃え方)
+   */
+  const toggleTextStyle = useCallback(
+    (kind: 'bold' | 'italic' | 'underline') => {
+      const doc = getIframeDoc();
+      const view = doc?.defaultView;
+      if (!doc || !view) return;
+      const els = withoutLocked(selectedEls(doc, ids)).filter((el) => (el.textContent ?? '').trim());
+      if (!els.length) return;
+      // ホバー中の文字要素にはエディタが青い下線(.text-editable-hover)を引いている。
+      // そのまま測ると「下線あり」と読んで ⌘U が毎回 OFF 側に倒れるので、外して測る
+      const HOVER_CLASSES = ['text-editable-hover', 'hover-preview'];
+      const isOn = (el: HTMLElement) => {
+        const had = HOVER_CLASSES.filter((c) => el.classList.contains(c));
+        el.classList.remove(...had);
+        const cs = view.getComputedStyle(el);
+        const on =
+          kind === 'bold'
+            ? (parseInt(cs.fontWeight, 10) || 400) >= 600
+            : kind === 'italic'
+              ? cs.fontStyle === 'italic'
+              : cs.textDecorationLine.includes('underline');
+        el.classList.add(...had);
+        return on;
+      };
+      const turnOn = !els.every(isOn);
+      const styles: Record<string, string> =
+        kind === 'bold'
+          ? { fontWeight: turnOn ? '700' : '400' }
+          : kind === 'italic'
+            ? { fontStyle: turnOn ? 'italic' : 'normal' }
+            : { textDecoration: turnOn ? 'underline' : 'none' };
+      els.forEach((el) => applyTailwindStyles(el, styles));
+      afterChange(doc, els);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getIframeDoc, afterChange, ids.join(',')],
+  );
+
+  // ⌘\ は選択が無くても効く(UI を隠したまま選択を外しても戻せるように)
+  const always: ShortcutCallbacks = {
+    toggleUi: toggleEditorUi,
+    toggleOutline: () => {
+      const doc = getIframeDoc();
+      if (doc) toggleOutlineIn(doc);
+    },
+  };
+  if (!hasSelection) return always;
+
+  const callbacks: ShortcutCallbacks = {
+    ...always,
+    flipH: () => flip('x'),
+    flipV: () => flip('y'),
+    renameLayer: () => {
+      const id = ids[0] ?? selectedElement?.id;
+      if (id) window.dispatchEvent(new CustomEvent(RENAME_LAYER_EVENT, { detail: { id } }));
+    },
+    selectChildren,
+    selectParent,
+    alignLeft: () => runAlign('left'),
+    alignRight: () => runAlign('right'),
+    alignTop: () => runAlign('top'),
+    alignBottom: () => runAlign('bottom'),
+    alignHCenter: () => runAlign('hcenter'),
+    alignVCenter: () => runAlign('vcenter'),
+    distributeH: () => runDistribute('h'),
+    distributeV: () => runDistribute('v'),
+    toggleHidden,
+    toggleLocked,
+    toggleBold: () => toggleTextStyle('bold'),
+    toggleItalic: () => toggleTextStyle('italic'),
+    toggleUnderline: () => toggleTextStyle('underline'),
+    fontSizeUp: () => stepFontSize(1),
+    fontSizeDown: () => stepFontSize(-1),
+  };
+  OPACITY_KEYS.forEach((key, i) => {
+    callbacks[key] = () => setOpacity(i === 9 ? 0 : i + 1);
+  });
+  return callbacks;
+}

package/src/editor/hooks/useMarqueeSelection.ts

@@ -19,6 +19,7 @@ import { extractElementInfo } from '../utils/style-utils';
 import { MARQUEE_DRAG_THRESHOLD } from '../constants';
 import type { MarqueeState } from '../types';
 import { debugLog } from '../utils/debug';
+import { isLockedEl } from '../utils/lock';
 
 interface UseMarqueeSelectionOptions {
   /** マーキー選択の開始保留フラグ */
@@ -54,7 +55,10 @@ export function findElementsIntersectingMarquee(
       el.classList.contains('selection-box') ||
       el.classList.contains('marquee-selection-box') ||
       el.classList.contains('drawing-preview') ||
-      el.closest('.selection-box')
+      el.closest('.selection-box') ||
+      // ロック中(⌘⇧L)・非表示(⌘⇧H / 目のアイコン)は範囲選択でも拾わない(Figma と同じ)
+      isLockedEl(el) ||
+      el.style.visibility === 'hidden'
     ) {
       return;
     }

package/src/editor/utils/align-elements.ts

@@ -71,6 +71,8 @@ function artboardOffset(el: HTMLElement): { x: number; y: number } {
  */
 function measure(els: HTMLElement[]): Box[] {
   return els.map((el) => {
+    // <svg> などは offset* を持たない(undefined → NaN で選択群の枠ごと壊れる)。画面の矩形から測る
+    if (typeof el.offsetWidth !== 'number') return measureByRect(el);
     const { x, y } = artboardOffset(el);
     return {
       el,
@@ -85,6 +87,33 @@ function measure(els: HTMLElement[]): Box[] {
   });
 }
 
+/**
+ * offset* を持たない要素(<svg> など)の実測。アートボードの画面上の矩形と拡縮率から
+ * アートボード座標へ直す。原点は computed の left/top から逆算する
+ */
+function measureByRect(el: HTMLElement): Box {
+  const doc = el.ownerDocument;
+  const artboard = doc.getElementById('artboard');
+  const r = el.getBoundingClientRect();
+  const a = artboard?.getBoundingClientRect();
+  const scale = artboard && a && artboard.offsetWidth ? a.width / artboard.offsetWidth : 1;
+  const x = (r.left - (a?.left ?? 0)) / scale;
+  const y = (r.top - (a?.top ?? 0)) / scale;
+  const cs = doc.defaultView?.getComputedStyle(el);
+  const left = parseFloat(cs?.left ?? '') || 0;
+  const top = parseFloat(cs?.top ?? '') || 0;
+  return {
+    el,
+    x,
+    y,
+    width: r.width / scale,
+    height: r.height / scale,
+    originX: x - left,
+    originY: y - top,
+    movable: isMovable(el),
+  };
+}
+
 /** アートボード座標で指定した位置へ置く(その要素の原点に直してから書く) */
 function setX(b: Box, x: number): void {
   b.el.style.left = `${Math.round(x - b.originX)}px`;
@@ -167,3 +196,23 @@ export function distributeElements(els: HTMLElement[], axis: DistributeAxis): HT
   }
   return moved;
 }
+
+/**
+ * 複数選択の反転(⇧H / ⇧V)の位置の側。選択群の外接枠の中心を軸に、各要素の位置を鏡写しにする
+ * (Figma は選択全体を 1 つの塊として反転する)。要素そのものの反転(transform)は呼ぶ側が付ける。
+ * 中心で計算するので、回転している要素(回転は中心まわり)でも位置がずれない。
+ * 戻り値は位置を動かした要素。動かせない要素(絶対配置でない)は位置を変えない
+ */
+export function mirrorPositions(els: HTMLElement[], axis: 'x' | 'y'): HTMLElement[] {
+  const boxes = measure(els);
+  if (boxes.length < 2) return [];
+  const ref = referenceRect(boxes);
+  const moved: HTMLElement[] = [];
+  boxes.forEach((b) => {
+    if (!b.movable) return;
+    if (axis === 'x') setX(b, ref.left + ref.right - (b.x + b.width));
+    else setY(b, ref.top + ref.bottom - (b.y + b.height));
+    moved.push(b.el);
+  });
+  return moved;
+}

package/src/editor/utils/canvas-guides.ts

@@ -0,0 +1,46 @@
+/**
+ * 定規から引いたガイド(キャンバス表示)の置き場。
+ *
+ * ページごとに、そのページの紙面の座標(アートボードの px)で持つ。保存はしない(読み込み直すと消える)。
+ * 描くのは CanvasGuides、吸着の相手に加えるのは smart-guides の collectGuideCandidates。
+ * 両者は別の木(殻とエディタ)にいるので、props ではなくこのモジュールで繋ぐ。
+ * 吸着が見るのは「いま定規を出している、編集中のページ」のガイドだけ。
+ */
+
+export interface PageGuides {
+  /** 縦のガイドの x(紙面の px) */
+  xs: number[];
+  /** 横のガイドの y(紙面の px) */
+  ys: number[];
+}
+
+const EMPTY: PageGuides = { xs: [], ys: [] };
+const byPage = new Map<string, PageGuides>();
+const listeners = new Set<() => void>();
+let activePageId: string | null = null;
+
+export function getPageGuides(pageId: string | null): PageGuides {
+  return (pageId && byPage.get(pageId)) || EMPTY;
+}
+
+export function setPageGuides(pageId: string, guides: PageGuides): void {
+  byPage.set(pageId, guides);
+  listeners.forEach((fn) => fn());
+}
+
+/** 定規を出している編集中のページ。定規を隠したら null(ガイドも見えないので吸着させない) */
+export function setActiveGuidePage(pageId: string | null): void {
+  activePageId = pageId;
+}
+
+/** 吸着の相手にするガイド(編集中のページのもの) */
+export function getActiveCanvasGuides(): PageGuides {
+  return getPageGuides(activePageId);
+}
+
+export function subscribeGuides(fn: () => void): () => void {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}

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

@@ -11,6 +11,7 @@ import { debugLog } from './debug';
 // 目印クラスの定義は free-layout.ts 側が正本。ここでは選択枠の札を出すためだけに読む
 // (循環importになるが、使うのは関数の中だけなので評価順の問題は起きない)
 import { FREELAYOUT_CLASS } from './free-layout';
+import { isLockedEl } from './lock';
 
 // ========================================
 // buildDomTree キャッシュ（Phase 2 最適化）
@@ -1225,6 +1226,8 @@ const HANDLE_HIT_SCREEN = 12;
  * 角丸ハンドル(±6px)の中心が 14px 内側にあれば両者は重ならない。
  */
 const RADIUS_MIN_INSET_SCREEN = 14;
+/** 角丸ハンドルを出す要素の短い辺の下限(画面px)。これ未満では本体の掴み代を優先する */
+const RADIUS_MIN_SIDE_SCREEN = 56;
 
 /**
  * オーバーレイの寸法をズーム非依存にするための倍率を <html> に書き込む
@@ -1345,8 +1348,13 @@ function updateRadiusHandle(
   const minInset = RADIUS_MIN_INSET_SCREEN * overlayScale;
   const maxInset = Math.min(rect.width, rect.height) / 2;
 
-  // 下限すら確保できない小さな要素では角丸ハンドルを出さない
-  if (!Number.isFinite(maxInset) || maxInset < minInset) {
+  // 下限すら確保できない小さな要素では角丸ハンドルを出さない。
+  // さらに、短い辺が画面上 RADIUS_MIN_SIDE_SCREEN 未満の要素でも出さない。
+  // 40×28px ほどの矢印やアイコンでは角丸ハンドル(当たり12px)が要素の中央帯を覆い、
+  // 選択済みの小さな要素を掴んで動かそうとすると角丸の操作に化けていた(実測)。
+  // Figma も小さな図形では角丸ハンドルを出さない
+  const minSide = Math.min(rect.width, rect.height) / (overlayScale || 1);
+  if (!Number.isFinite(maxInset) || maxInset < minInset || minSide < RADIUS_MIN_SIDE_SCREEN) {
     handle?.remove();
     return;
   }
@@ -1432,6 +1440,8 @@ function drawSelectionBox(
   selectionBox.className =
     mode === 'member' ? 'selection-box selection-member' : 'selection-box';
   selectionBox.setAttribute('data-for-element', elementId);
+  // ロック中(⌘⇧L)の要素は枠だけ出してハンドルを隠す(Figma と同じく紙面では動かせない)
+  if (isLockedEl(element)) selectionBox.classList.add('selection-locked');
   // 部品(data-part)のインスタンスは枠を紫にして、名前と版を枠の上に出す(部品だと一目で分かる)。
   // 部品の中のスロットを選んでいるときも、どの部品の中かを出す
   const partRoot = element.hasAttribute('data-part') ? element : (element.parentElement?.closest('[data-part]') as HTMLElement | null) ?? null;