@growgroup/visual-editor 0.9.1 → 0.11.0

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-gestures.ts

@@ -0,0 +1,210 @@
+/**
+ * マルチフレームのキャンバスの拡大縮小を Figma にそろえる部品(0.10.0)。
+ *
+ * - Safari・WKWebView のトラックパッドのピンチは gesturestart / gesturechange / gestureend で届く
+ *   (Chrome・Edge・Electron は ctrl 付きの wheel で届く)。以前は止めるだけで拡大縮小に使っていなかった。
+ *   scale は gesturestart からの累積なので、始まりの倍率に掛ける。紙面(iframe)の中で起きたものは親へ転送する
+ * - ⌘+ / ⌘− とヘッダーの +/− は 2 の累乗の段(…50% → 100% → 200%…。段の間からは向きの側の段へ)
+ * - IME の変換中のキーは奪わない
+ * - 選んでいる要素に合わせる(⌘2 / ⇧2)ための矩形
+ *
+ * DOM と数値だけを扱い、React やキャンバスの Context には触らない(受け手が zoomAt 等を渡す)。
+ */
+
+export interface ZoomRange {
+  min: number;
+  max: number;
+}
+
+/**
+ * マルチフレームのキャンバスの拡大縮小の設定(`canvasZoomOptions`)。どれも省略時は従来の挙動。
+ * Figma にそろえるなら `{ min: 0.02, max: 256, steps: 'powers-of-two', fitShortcut: 'selection' }`
+ */
+export interface CanvasZoomOptions {
+  /** 倍率の下限(省略時 0.02 = 2%) */
+  min?: number;
+  /** 倍率の上限(省略時 4 = 400%。Figma は 256 = 25600%) */
+  max?: number;
+  /** ⌘+ / ⌘− とヘッダーの +/− の刻み。'ratio' = 1.25 倍ずつ(省略時)、'powers-of-two' = 2 の累乗の段(Figma) */
+  steps?: 'ratio' | 'powers-of-two';
+  /** ⌘2 / ⇧2 の合わせ先。'page' = 編集中のページ(省略時)、'selection' = 選んでいる要素(無ければページ。Figma) */
+  fitShortcut?: 'page' | 'selection';
+}
+export type ResolvedCanvasZoomOptions = ZoomRange & Required<Pick<CanvasZoomOptions, 'steps' | 'fitShortcut'>>;
+
+const clamp = (zoom: number, range: ZoomRange) => Math.max(range.min, Math.min(range.max, zoom));
+
+/** ⌘+ / ⌘− の次の倍率。2 の累乗の段へ寄せる(今が段の上なら 1 段、段の間なら向きの側の段へ) */
+export function nextZoomLevel(current: number, direction: 1 | -1, range: ZoomRange): number {
+  if (!Number.isFinite(current) || current <= 0) return clamp(1, range);
+  const exponent = Math.log2(current);
+  const EPSILON = 1e-6;
+  const next = direction > 0 ? Math.floor(exponent + EPSILON) + 1 : Math.ceil(exponent - EPSILON) - 1;
+  return clamp(2 ** next, range);
+}
+
+/** IME の変換中のキーか(Safari・Chrome は変換中の keydown に keyCode 229 を出す) */
+export function isImeKeyEvent(event: KeyboardEvent): boolean {
+  return event.isComposing === true || event.keyCode === 229;
+}
+
+// ------------------------------------------------------------------ ピンチ(GestureEvent)
+
+/** WebKit の GestureEvent(型定義は標準の lib に無い) */
+export type CanvasGestureEvent = Event & { scale?: number; clientX?: number; clientY?: number };
+export type CanvasGesturePhase = 'start' | 'change' | 'end';
+export interface EmbeddedGestureMessage {
+  type: 'EMBEDDED_GESTURE';
+  coords: 'parent';
+  phase: CanvasGesturePhase;
+  scale: number;
+  clientX: number;
+  clientY: number;
+}
+
+export interface GestureZoomTarget {
+  getZoom: () => number;
+  /** client 座標の点を動かさずに倍率を変える(倍率の範囲は受け手が収める) */
+  zoomAt: (zoom: number, clientX: number, clientY: number) => void;
+  markInteracting?: () => void;
+}
+
+/** これだけピンチの続きが来なければ、終わったものとみなす(ms) */
+const GESTURE_IDLE_MS = 1000;
+const PHASES: Array<[CanvasGesturePhase, string]> = [['start', 'gesturestart'], ['change', 'gesturechange'], ['end', 'gestureend']];
+const LISTEN = { passive: false, capture: true } as const;
+
+/**
+ * ピンチの状態。始まりの倍率を覚え、scale(累積)を掛ける。
+ * `active` の間は ctrl 付き wheel での拡大をしない(両方届く環境で二重に拡大しない)。
+ * end を取りこぼしたまま止まったら GESTURE_IDLE_MS で解く(ctrl 付き wheel の拡大が戻らなくならない)
+ */
+export function createGestureZoom(target: () => GestureZoomTarget | null, now: () => number = () => Date.now()) {
+  let base: number | null = null;
+  let lastAt = 0;
+  const isLive = () => base !== null && now() - lastAt < GESTURE_IDLE_MS;
+  return {
+    get active() { return isLive(); },
+    handle(phase: CanvasGesturePhase, scale: number, clientX: number, clientY: number) {
+      const canvas = target();
+      if (!canvas) return;
+      if (phase === 'start') { base = canvas.getZoom(); lastAt = now(); return; }
+      // start を取りこぼしても(iframe の読み込み直し等)、今の倍率を始まりにして続ける
+      const start = isLive() && base !== null ? base : canvas.getZoom();
+      base = start;
+      lastAt = now();
+      if (Number.isFinite(scale) && scale > 0) {
+        canvas.markInteracting?.();
+        canvas.zoomAt(start * scale, clientX, clientY);
+      }
+      if (phase === 'end') base = null;
+    },
+  };
+}
+
+/**
+ * 親(キャンバスの容器がある文書)でピンチを受ける。容器の上で起きたものと、紙面の iframe から転送されてきたもの。
+ * 容器の外(ヘッダー・パネル)のピンチは拡大しない(ブラウザ自体の拡大は useBrowserZoomPrevention が止める)。
+ * GestureEvent に座標が無い環境では、最後にポインタがあった所を中心にする。
+ */
+export function listenCanvasGestures(input: {
+  win: Window;
+  container: HTMLElement;
+  target: () => GestureZoomTarget | null;
+}): { readonly active: boolean; dispose: () => void } {
+  const { win, container } = input;
+  const zoom = createGestureZoom(input.target);
+  let pointer: { x: number; y: number } | null = null;
+  const onPointer = (event: MouseEvent) => { pointer = { x: event.clientX, y: event.clientY }; };
+  const pointOf = (event: CanvasGestureEvent) => {
+    if (Number.isFinite(event.clientX) && Number.isFinite(event.clientY)) return { x: event.clientX as number, y: event.clientY as number };
+    if (pointer) return pointer;
+    const rect = container.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  };
+  const handlers = PHASES.map(([phase, type]) => {
+    const handler = (event: Event) => {
+      const target = event.target as Node | null;
+      if (!target || typeof target.nodeType !== 'number' || !container.contains(target)) return;
+      event.preventDefault();
+      const gesture = event as CanvasGestureEvent;
+      const point = pointOf(gesture);
+      zoom.handle(phase, Number(gesture.scale ?? 1), point.x, point.y);
+    };
+    return [type, handler] as const;
+  });
+  const onMessage = (event: MessageEvent) => {
+    const data = event.data as Partial<EmbeddedGestureMessage> | null;
+    if (!data || typeof data !== 'object' || data.type !== 'EMBEDDED_GESTURE' || data.coords !== 'parent') return;
+    if (data.phase !== 'start' && data.phase !== 'change' && data.phase !== 'end') return;
+    zoom.handle(data.phase, Number(data.scale), Number(data.clientX), Number(data.clientY));
+  };
+  for (const [type, handler] of handlers) win.addEventListener(type, handler, LISTEN);
+  win.addEventListener('mousemove', onPointer, { passive: true });
+  win.addEventListener('message', onMessage);
+  return {
+    get active() { return zoom.active; },
+    dispose() {
+      for (const [type, handler] of handlers) win.removeEventListener(type, handler, LISTEN);
+      win.removeEventListener('mousemove', onPointer);
+      win.removeEventListener('message', onMessage);
+    },
+  };
+}
+
+/**
+ * 紙面(生きているエディタの iframe)で起きたピンチを親へ転送する。座標は送る前に親の座標へ直す
+ * (親の realm で作った関数なので、受け手からは送り元の iframe が分からない。ホイールの転送と同じ)。
+ */
+export function forwardEmbeddedGestures(input: {
+  doc: Document;
+  toParent: (x: number, y: number) => { clientX: number; clientY: number };
+  post: (message: EmbeddedGestureMessage) => void;
+}): () => void {
+  const { doc } = input;
+  let pointer: { x: number; y: number } | null = null;
+  const onPointer = (event: MouseEvent) => { pointer = { x: event.clientX, y: event.clientY }; };
+  const handlers = PHASES.map(([phase, type]) => {
+    const handler = (event: Event) => {
+      const gesture = event as CanvasGestureEvent;
+      event.preventDefault();
+      event.stopPropagation();
+      const hasPoint = Number.isFinite(gesture.clientX) && Number.isFinite(gesture.clientY);
+      const local = hasPoint
+        ? { x: gesture.clientX as number, y: gesture.clientY as number }
+        : pointer ?? { x: (doc.defaultView?.innerWidth ?? 0) / 2, y: (doc.defaultView?.innerHeight ?? 0) / 2 };
+      input.post({ type: 'EMBEDDED_GESTURE', coords: 'parent', phase, scale: Number(gesture.scale ?? 1), ...input.toParent(local.x, local.y) });
+    };
+    return [type, handler] as const;
+  });
+  for (const [type, handler] of handlers) doc.addEventListener(type, handler, LISTEN);
+  doc.addEventListener('mousemove', onPointer, { passive: true, capture: true });
+  return () => {
+    for (const [type, handler] of handlers) doc.removeEventListener(type, handler, LISTEN);
+    doc.removeEventListener('mousemove', onPointer, { capture: true });
+  };
+}
+
+// ------------------------------------------------------------------ 選択範囲に合わせる
+
+/**
+ * 紙面で選んでいる要素(#artboard の .selected)を囲む矩形を、キャンバスの座標で返す。無ければ null。
+ * 埋め込みの紙面は iframe の中では等倍なので、iframe の中の矩形にフレームの位置を足せばよい。
+ */
+export function selectionCanvasRect(
+  iframe: HTMLIFrameElement | null | undefined,
+  framePosition: { x: number; y: number } | null | undefined,
+): { minX: number; minY: number; maxX: number; maxY: number } | null {
+  const doc = iframe?.contentDocument;
+  if (!doc || !framePosition) return null;
+  const rects = Array.from(doc.querySelectorAll<HTMLElement>('#artboard .selected'))
+    .map((element) => element.getBoundingClientRect())
+    .filter((rect) => rect.width > 0 || rect.height > 0);
+  if (!rects.length) return null;
+  return {
+    minX: framePosition.x + Math.min(...rects.map((rect) => rect.left)),
+    minY: framePosition.y + Math.min(...rects.map((rect) => rect.top)),
+    maxX: framePosition.x + Math.max(...rects.map((rect) => rect.right)),
+    maxY: framePosition.y + Math.max(...rects.map((rect) => rect.bottom)),
+  };
+}

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;

package/src/editor/utils/embedded-canvas-bridge.ts

@@ -8,6 +8,8 @@
  * 座標は iframe の座標のまま送る(受け手が送り元 iframe の実測矩形で親の座標へ直す)
  */
 
+import { forwardEmbeddedGestures, isImeKeyEvent } from './canvas-gestures';
+
 const ZOOM_KEYS = new Set(['=', '+', '-', '_', ';']);
 
 function isTypingTarget(target: EventTarget | null): boolean {
@@ -50,11 +52,8 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
     );
   };
 
-  // ---- Safari の gesture(ピンチ)はブラウザ拡大を止めるだけ
-  const handleGesture = (e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
+  // ---- Safari・WKWebView の gesture(ピンチ)も外へ(親が拡大縮小する。ブラウザの拡大は止める)
+  const disposeGestures = forwardEmbeddedGestures({ doc: iframeDoc, toParent, post: (message) => parent.postMessage(message, '*') });
 
   // ---- 2 本指タッチ = ピンチ
   let lastDistance: number | null = null;
@@ -90,6 +89,7 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
 
   // ---- キー: Space(パン)、Cmd+/- (ズーム)、Shift+0/1/2(100%・全体・このページ)、Shift+R(定規)
   const forwardKey = (kind: 'down' | 'up') => (e: KeyboardEvent) => {
+    if (isImeKeyEvent(e)) return; // IME の変換中のキーは奪わない
     const cmd = e.metaKey || e.ctrlKey;
     const typing = isTypingTarget(e.target);
     const isSpace = e.code === 'Space';
@@ -128,9 +128,6 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
 
   const options: AddEventListenerOptions = { passive: false, capture: true };
   iframeDoc.addEventListener('wheel', handleWheel, options);
-  iframeDoc.addEventListener('gesturestart', handleGesture, options);
-  iframeDoc.addEventListener('gesturechange', handleGesture, options);
-  iframeDoc.addEventListener('gestureend', handleGesture, options);
   iframeDoc.addEventListener('touchstart', handleTouchStart, options);
   iframeDoc.addEventListener('touchmove', handleTouchMove, options);
   iframeDoc.addEventListener('touchend', handleTouchEnd, options);
@@ -140,10 +137,8 @@ export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFram
   iframeDoc.addEventListener('mousedown', handleMouseDown, options);
 
   return () => {
+    disposeGestures();
     iframeDoc.removeEventListener('wheel', handleWheel, options);
-    iframeDoc.removeEventListener('gesturestart', handleGesture, options);
-    iframeDoc.removeEventListener('gesturechange', handleGesture, options);
-    iframeDoc.removeEventListener('gestureend', handleGesture, options);
     iframeDoc.removeEventListener('touchstart', handleTouchStart, options);
     iframeDoc.removeEventListener('touchmove', handleTouchMove, options);
     iframeDoc.removeEventListener('touchend', handleTouchEnd, options);

package/src/editor/utils/history-timing.ts

@@ -0,0 +1,9 @@
+/**
+ * 履歴が「同じ要素への続けての変更」を1つにまとめる間隔(ms)。
+ * EditorHistoryContext と、数字キーの不透明度(2桁入力)の両方が使う。
+ *
+ * EditorHistoryContext.tsx から直接 export しないのは、コンポーネント以外の値を export すると
+ * React Fast Refresh がそのファイルを差し替えられず、編集のたびにページ全体が読み込み直される
+ * (開いている編集の ⌘Z 履歴が消える)ため。
+ */
+export const COALESCE_WINDOW_MS = 400;

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

@@ -371,6 +371,10 @@ export function getCleanHtml(doc: Document): string {
   // ドラッグ中の整列ガイド(表示専用)も保存しない
   tempContainer.querySelectorAll('#gg-smart-guides').forEach(el => el.remove());
 
+  // レイヤーパネルの行に乗せたときの紙面側の強調(表示専用)。
+  // 行の目・鍵のボタンを押すと、マウスが行に乗ったまま保存が走るので、ここで外さないと HTML に残る(実測)
+  tempContainer.querySelectorAll('[data-layer-hover]').forEach(el => el.removeAttribute('data-layer-hover'));
+
   // トリミングモードのUI(枠・ハンドル)。確定/中断で消えるが、保険で除去
   tempContainer.querySelectorAll('.gg-crop-ui').forEach(el => el.remove());
 

package/src/editor/utils/lock.ts

@@ -0,0 +1,24 @@
+/**
+ * ユーザーのロック(⌘⇧L・レイヤーパネルの鍵)。
+ *
+ * 属性名は `data-gg-locked`。部品定義の `element.locked` が以前から `data-locked="true"` を
+ * 付けている(component-renderer.ts)ので、同じ名前にするとロックの CSS(pointer-events:none)や
+ * 鍵の印が部品にまで効いてしまう。`data-gg-*` は部品の定義を作るとき(parts.ts の stripEditorAttrs)に
+ * 落ちるので、ロックが部品の定義に持ち込まれることもない。
+ *
+ * ロック中(本人か祖先がロック)の要素は、選ぶことはできるが(レイヤーパネル・Figma と同じ)、
+ * 位置・大きさ・見た目を変える操作の対象からは一律に外す(isLockedEl / withoutLocked)。
+ */
+
+export const LOCK_ATTR = 'data-gg-locked';
+export const LOCK_SELECTOR = `[${LOCK_ATTR}="true"]`;
+
+/** 本人か祖先がロックされているか */
+export function isLockedEl(el: Element): boolean {
+  return typeof el.closest === 'function' && !!el.closest(LOCK_SELECTOR);
+}
+
+/** 編集の対象からロック中の要素を外す */
+export function withoutLocked<T extends Element>(els: T[]): T[] {
+  return els.filter((el) => !isLockedEl(el));
+}

package/src/editor/utils/smart-duplicate.ts

@@ -0,0 +1,51 @@
+/**
+ * ⌘D の「直前のずれを繰り返す」複製(Figma の Duplicate / PowerPoint の Ctrl+D と同じ作法)。
+ *
+ * Figma(help.figma.com「Copy and paste objects」): ⌘D は元の真上に複製する(最上位フレームを除く)。
+ * ⌥ドラッグで複製したあとに ⌘D を続けると、同じ距離で複製を続ける。
+ * ⌘D で複製 → 動かす → ⌘D でも、同じずれを繰り返す(PowerPoint の Ctrl+D と同じ)。
+ *
+ * 「どの要素を、どこから複製したか」を1組だけ覚え、次の ⌘D で選択がその要素のままなら
+ * 「今の位置 − 複製元の位置」をずれとして使う。選択が変わっていれば真上(ずれ 0)。
+ */
+
+interface Point {
+  left: number;
+  top: number;
+}
+
+let memory: { key: string; from: Point } | null = null;
+
+const keyOf = (ids: string[]) => [...ids].sort().join(',');
+
+/** 位置指定の要素の left/top(使用値)。フロー要素など読めないときは null */
+export function readPosition(el: HTMLElement): Point | null {
+  const view = el.ownerDocument.defaultView;
+  if (!view) return null;
+  const cs = view.getComputedStyle(el);
+  if (cs.position !== 'absolute' && cs.position !== 'fixed') return null;
+  const left = parseFloat(cs.left);
+  const top = parseFloat(cs.top);
+  return Number.isFinite(left) && Number.isFinite(top) ? { left, top } : null;
+}
+
+/** 複製した(または ⌥ドラッグで複製を置いた)要素と、その複製元の位置を覚える */
+export function rememberDuplicate(ids: string[], from: Point | null): void {
+  memory = ids.length && from ? { key: keyOf(ids), from } : null;
+}
+
+export function forgetDuplicate(): void {
+  memory = null;
+}
+
+/**
+ * 次の ⌘D のずれ。覚えた要素が今も選ばれていて、動いていればそのずれ。それ以外は 0
+ * @param ids 今の選択
+ * @param first 今の選択の先頭の要素(位置を読む)
+ */
+export function repeatOffsetFor(ids: string[], first: HTMLElement | null): { dx: number; dy: number } {
+  if (!memory || !first || memory.key !== keyOf(ids)) return { dx: 0, dy: 0 };
+  const now = readPosition(first);
+  if (!now) return { dx: 0, dy: 0 };
+  return { dx: now.left - memory.from.left, dy: now.top - memory.from.top };
+}