@growgroup/visual-editor 0.10.0 → 0.11.0

package/src/editor/components/EditorContextMenu.tsx

@@ -22,6 +22,9 @@ import {
   Ungroup,
   Lock,
   Unlock,
+  EyeOff,
+  FlipHorizontal2,
+  FlipVertical2,
   Sparkles,
   Code,
   Paintbrush,
@@ -88,6 +91,12 @@ export interface ContextMenuProps {
   onSendToBack?: () => void;
   onGroup?: () => void;
   onUngroup?: () => void;
+  /** 表示/非表示(⌘⇧H)とロック/解除(⌘⇧L)。Figma の右クリックの Show/Hide・Lock/Unlock */
+  onToggleHidden?: () => void;
+  onToggleLocked?: () => void;
+  /** 左右反転(⇧H)・上下反転(⇧V)。Figma の右クリックの Flip horizontal / vertical */
+  onFlipH?: () => void;
+  onFlipV?: () => void;
   /** 表の編集(右クリックしたセルが表の中のときだけ渡される) */
   onInsertRowAbove?: () => void;
   onInsertRowBelow?: () => void;
@@ -198,6 +207,10 @@ export function EditorContextMenu({
   onSendToBack,
   onGroup,
   onUngroup,
+  onToggleHidden,
+  onToggleLocked,
+  onFlipH,
+  onFlipV,
   onInsertRowAbove,
   onInsertRowBelow,
   onInsertColumnLeft,
@@ -480,17 +493,54 @@ export function EditorContextMenu({
       <MenuItem
         icon={<ChevronsUp className="w-3.5 h-3.5" />}
         label="最前面へ"
-        shortcut="⌘⇧]"
+        shortcut="⌥⌘]"
         onClick={() => handleAction(onBringToFront)}
         disabled={!hasSelection}
       />
       <MenuItem
         icon={<ChevronsDown className="w-3.5 h-3.5" />}
         label="最背面へ"
-        shortcut="⌘⇧["
+        shortcut="⌥⌘["
         onClick={() => handleAction(onSendToBack)}
         disabled={!hasSelection}
       />
+      {(onToggleHidden || onToggleLocked) && (
+        <>
+          <MenuDivider />
+          <MenuItem
+            icon={<EyeOff className="w-3.5 h-3.5" />}
+            label="表示 / 非表示"
+            shortcut="⌘⇧H"
+            onClick={() => handleAction(onToggleHidden)}
+            disabled={!hasSelection || !onToggleHidden}
+          />
+          <MenuItem
+            icon={<Lock className="w-3.5 h-3.5" />}
+            label="ロック / 解除"
+            shortcut="⌘⇧L"
+            onClick={() => handleAction(onToggleLocked)}
+            disabled={!hasSelection || !onToggleLocked}
+          />
+          {(onFlipH || onFlipV) && (
+            <>
+              <MenuItem
+                icon={<FlipHorizontal2 className="w-3.5 h-3.5" />}
+                label="左右反転"
+                shortcut="⇧H"
+                onClick={() => handleAction(onFlipH)}
+                disabled={!hasSelection || !onFlipH}
+              />
+              <MenuItem
+                icon={<FlipVertical2 className="w-3.5 h-3.5" />}
+                label="上下反転"
+                shortcut="⇧V"
+                onClick={() => handleAction(onFlipV)}
+                disabled={!hasSelection || !onFlipV}
+              />
+            </>
+          )}
+        </>
+      )}
 
       {/* グループ操作（複数選択時のみ表示） */}
       {(selectionCount > 1 || isGroup) && (

package/src/editor/components/EditorFooter.tsx

@@ -14,19 +14,42 @@ export function EditorFooter() {
     : activeTool === 'scale' ? 'ドラッグで拡大・縮小 · V で選択に戻る'
     : activeTool === 'comment' ? '紙面をドラッグして範囲を指定 · クリックで点 · Esc で選択に戻る'
     : activeTool !== 'select' ? 'ドラッグで追加 · Esc でキャンセル'
-    : selectedElement || selectedElementIds.length ? 'ダブルクリックで文字を編集 · Esc で選択を解除'
+    : selectedElement || selectedElementIds.length ? `ダブルクリック・Enter で内側へ · Esc で外側へ · ${alt}ドラッグで複製`
     : 'クリックで選択 · Space＋ドラッグで紙面を移動';
+  const shift = isMac ? '⇧' : 'Shift+';
+  const ctrl = isMac ? '⌃' : 'Ctrl+';
+  // Figma の割り当てに合わせている(出典と差分は docs/figma-parity-2026-11.md)
   const shortcuts = [
     ['選択 / 移動 / 拡大・縮小', 'V / H / K'],
     ['コメント(範囲を指定)', 'C'],
-    ['元に戻す / やり直し', `${cmd}Z / ${cmd}⇧Z`],
-    ['保存', `${cmd}S`], ['複製', `${cmd}D`],
+    ['元に戻す / やり直し', `${cmd}Z / ${cmd}${shift}Z`],
+    ['貼り付け(元と同じ位置。枠を選んでいれば中へ)', `${cmd}V / ${cmd}${shift}V`],
+    ['保存', `${cmd}S`], ['複製(動かしてから押すと同じずれで続ける)', `${cmd}D / ${alt}ドラッグ`],
     ['全体表示 / 100% / 選択範囲', `${cmd}0 / ${cmd}1 / ${cmd}2`],
     ['複数選択', 'Shift＋クリック'], ['最下層の要素を選択', `${cmd}クリック`],
+    ['子を選択 / 親を選択', `Enter / ${shift}Enter`],
+    ['兄弟を順に選択', `Tab / ${shift}Tab`],
+    ['同じ階層をすべて選択', `${cmd}A`],
+    ['移動(1px / 10px)', `矢印 / ${shift}矢印`],
+    ['サイズ変更(1px / 10px)', `${cmd}矢印 / ${cmd}${shift}矢印`],
+    ['前面へ / 背面へ', `${cmd}] / ${cmd}[`],
+    ['最前面へ / 最背面へ', isMac ? '⌥⌘] / ⌥⌘[' : 'Ctrl+Shift+] / ['],
+    ['整列(左・右・上・下)', `${alt}A / ${alt}D / ${alt}W / ${alt}S`],
+    ['整列(左右中央・上下中央)', `${alt}H / ${alt}V`],
+    ['等間隔(横 / 縦)', `${shift}${alt}H / ${shift}${alt}V`],
+    ['グループ化 / 解除', `${cmd}G / ${cmd}${shift}G`],
+    ['隠す / ロック', `${cmd}${shift}H / ${cmd}${shift}L`],
+    ['左右反転 / 上下反転', `${shift}H / ${shift}V`],
+    ['レイヤー名を変える(紙面にフォーカスがあるときの ⌘R は、何も選んでいなくてもページを再読み込みしない)', `${cmd}R / 名前をダブルクリック`],
+    ['UI を隠す / 出す', `${cmd}\\`],
+    ['アウトライン表示', `${cmd}${shift}O`],
+    ['書式のコピー / 貼り付け', `${alt}${cmd}C / ${alt}${cmd}V`],
+    ['不透明度 10〜100%(2つ続けて 45% など)', '1〜9 / 0'],
+    ['太字 / 斜体 / 下線(要素全体)', `${cmd}B / ${cmd}I / ${cmd}U`],
+    ['文字を大きく / 小さく(1px)', `${cmd}${shift}> / ${cmd}${shift}<`],
     ['リンク先へ移動', `${alt}クリック`],
     ['選択・入力を終了', 'Esc'],
-  ];
-  return (
+  ];  return (
     <div className="ed-footer">
       <span className="ed-footer-hint">{hint}</span>
       <div className="flex shrink-0 items-center gap-4">
@@ -37,7 +60,7 @@ export function EditorFooter() {
               <Keyboard className="h-4 w-4" />ショートカット
             </button>
           </PopoverTrigger>
-          <PopoverContent side="top" align="end" className="w-[400px]">
+          <PopoverContent side="top" align="end" className="max-h-[70vh] w-[400px] overflow-y-auto">
             <h2 className="mb-4 text-sm font-semibold">キーボードショートカット</h2>
             <dl className="space-y-3">
               {shortcuts.map(([label, key]) => <div key={label} className="flex items-center justify-between gap-4 text-xs">

package/src/editor/components/EditorLayerPanel.tsx

@@ -27,6 +27,8 @@ import { refreshSelectionOverlay, buildDomTree } from '../utils/dom-utils';
 import { extractElementInfo } from '../utils/style-utils';
 import type { DOMTreeNode } from '../types';
 import { LayerTreeItem, type LayerKind } from './LayerTreeItem';
+import { RENAME_LAYER_EVENT } from '../hooks/useKeyboardShortcuts';
+import { LOCK_ATTR, LOCK_SELECTOR } from '../utils/lock';
 
 // ========================================
 // レイヤー名の生成
@@ -843,6 +845,76 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
     notifyIframeChange();
   }, [getIframeDoc, notifyIframeChange]);
 
+  // レイヤー名の変更(名前のダブルクリック・⌘R。Figma の Rename)。名前は data-layer-name に保存する
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  useEffect(() => {
+    const onRename = (e: Event) => {
+      const id = (e as CustomEvent<{ id: string }>).detail?.id;
+      if (id) setRenamingId(id);
+    };
+    window.addEventListener(RENAME_LAYER_EVENT, onRename);
+    return () => window.removeEventListener(RENAME_LAYER_EVENT, onRename);
+  }, []);
+  const handleRenameStart = useCallback((nodeId: string) => setRenamingId(nodeId), []);
+  const handleRenameCommit = useCallback((nodeId: string, name: string | null) => {
+    setRenamingId((current) => (current === nodeId ? null : current));
+    if (name === null) return;
+    const iframeDoc = getIframeDoc();
+    const el = iframeDoc?.querySelector(`[data-element-id="${nodeId}"]`) as HTMLElement | null;
+    if (!el) return;
+    const next = name.trim();
+    const before = el.getAttribute('data-layer-name') ?? '';
+    if (next === before) return;
+    // 空にしたら自動の名前(見出しの文言など)に戻す
+    if (next) el.setAttribute('data-layer-name', next);
+    else el.removeAttribute('data-layer-name');
+    notifyIframeChange();
+  }, [getIframeDoc, notifyIframeChange]);
+
+  // ロック/解除(⌘⇧L と同じ data-gg-locked="true")。紙面ではロック中の要素を選べないので、ここが解除の入口
+  const handleToggleLock = useCallback((nodeId: string) => {
+    const iframeDoc = getIframeDoc();
+    if (!iframeDoc) return;
+
+    const el = iframeDoc.querySelector(`[data-element-id="${nodeId}"]`) as HTMLElement;
+    if (!el) return;
+
+    if (el.getAttribute(LOCK_ATTR) === 'true') {
+      el.removeAttribute(LOCK_ATTR);
+    } else {
+      el.setAttribute(LOCK_ATTR, 'true');
+    }
+    notifyIframeChange();
+    // 選択枠のハンドルの出し分け(selection-locked)を描き直す
+    requestAnimationFrame(() => refreshSelectionOverlay(iframeDoc));
+  }, [getIframeDoc, notifyIframeChange]);
+
+  const lockedNodes = useMemo(() => {
+    const iframeDoc = getIframeDoc();
+    // domTree が作り直されたとき(属性の変更を含む)に数え直す
+    if (!iframeDoc || domTree.length === 0) return new Set<string>();
+    const locked = new Set<string>();
+    iframeDoc.querySelectorAll<HTMLElement>(`${LOCK_SELECTOR}[data-element-id]`).forEach((el) => {
+      const id = el.getAttribute('data-element-id');
+      if (id) locked.add(id);
+    });
+    return locked;
+  }, [domTree, getIframeDoc]);
+
+  // 祖先がロック中の要素(自分はロックしていない)。行に薄い鍵を出す(Figma と同じ見せ方)
+  const lockedByParentNodes = useMemo(() => {
+    const iframeDoc = getIframeDoc();
+    if (!iframeDoc || lockedNodes.size === 0) return new Set<string>();
+    const inherited = new Set<string>();
+    iframeDoc
+      .querySelectorAll<HTMLElement>(`${LOCK_SELECTOR} [data-element-id]`)
+      .forEach((el) => {
+        const id = el.getAttribute('data-element-id');
+        if (id && !lockedNodes.has(id) && !el.closest('.selection-box')) inherited.add(id);
+      });
+    return inherited;
+  }, [lockedNodes, getIframeDoc]);
+
   // hiddenNodesの計算（メモ化）
   const hiddenNodes = useMemo(() => {
     const iframeDoc = getIframeDoc();
@@ -991,6 +1063,8 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
     const isDragging = draggedNodeId === node.id;
     const isDragOver = dragOverNodeId === node.id;
     const isHidden = hiddenNodes.has(node.id);
+    const isLocked = lockedNodes.has(node.id);
+    const isLockedByParent = lockedByParentNodes.has(node.id);
     const label = labelMap.get(node.id) ?? fallbackLabel(node);
 
     return (
@@ -1004,6 +1078,11 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
         isDragOver={isDragOver}
         dragOverPosition={isDragOver ? dragOverPosition : null}
         isHidden={isHidden}
+        isLocked={isLocked}
+        isLockedByParent={isLockedByParent}
+        isRenaming={renamingId === node.id}
+        onRenameStart={handleRenameStart}
+        onRenameCommit={handleRenameCommit}
         hasStyleInClipboard={styleInClipboard}
         label={label.name}
         kind={label.kind}
@@ -1014,6 +1093,7 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
         labelKey={labelKey}
         onToggleExpand={handleToggleExpand}
         onToggleVisibility={handleToggleVisibility}
+        onToggleLock={handleToggleLock}
         onNodeClick={handleNodeClick}
         onRowMouseEnter={handleRowMouseEnter}
         onRowMouseLeave={handleRowMouseLeave}
@@ -1050,6 +1130,12 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
     dragOverNodeId,
     dragOverPosition,
     hiddenNodes,
+    lockedNodes,
+    lockedByParentNodes,
+    handleToggleLock,
+    renamingId,
+    handleRenameStart,
+    handleRenameCommit,
     styleInClipboard,
     labelMap,
     labelKey,

package/src/editor/components/LayerTreeItem.tsx

@@ -8,7 +8,7 @@
  * - カスタム比較関数で必要な変更のみ検知
  */
 
-import React, { memo } from 'react';
+import React, { memo, useRef } from 'react';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -27,6 +27,8 @@ import {
   ChevronsDown,
   Eye,
   EyeOff,
+  Lock,
+  Unlock,
   GripVertical,
   Paintbrush,
   ClipboardPaste,
@@ -90,6 +92,12 @@ export interface LayerTreeItemProps {
   isDragOver: boolean;
   dragOverPosition: 'before' | 'after' | 'inside' | null;
   isHidden: boolean;
+  /** ロック中(data-gg-locked="true")。紙面では選べないので、ここが解除の入口になる */
+  isLocked: boolean;
+  /** 祖先がロック中(自分はロックしていない)。薄い鍵を出すだけで、押せない */
+  isLockedByParent: boolean;
+  /** 名前を入力中(ダブルクリック・⌘R) */
+  isRenaming: boolean;
   hasStyleInClipboard: boolean;
   /** 行に出す人が読める名前（実 DOM から生成） */
   label: string;
@@ -113,6 +121,11 @@ export interface LayerTreeItemProps {
   // Event handlers
   onToggleExpand: (nodeId: string) => void;
   onToggleVisibility: (nodeId: string) => void;
+  onToggleLock: (nodeId: string) => void;
+  /** 名前の入力を始める(名前のダブルクリック) */
+  onRenameStart: (nodeId: string) => void;
+  /** 名前を確定する。null は取り消し、空文字は自動の名前に戻す */
+  onRenameCommit: (nodeId: string, name: string | null) => void;
   onNodeClick: (e: React.MouseEvent | React.KeyboardEvent, nodeId: string) => void;
   /** 行ホバー開始（キャンバス側をハイライトする） */
   onRowMouseEnter: (nodeId: string) => void;
@@ -156,6 +169,9 @@ export const LayerTreeItem = memo(function LayerTreeItem({
   isDragOver,
   dragOverPosition,
   isHidden,
+  isLocked,
+  isLockedByParent,
+  isRenaming,
   hasStyleInClipboard,
   label,
   kind,
@@ -166,6 +182,9 @@ export const LayerTreeItem = memo(function LayerTreeItem({
   labelKey: _labelKey, // 比較用のみ、レンダリングには使用しない
   onToggleExpand,
   onToggleVisibility,
+  onToggleLock,
+  onRenameStart,
+  onRenameCommit,
   onNodeClick,
   onRowMouseEnter,
   onRowMouseLeave,
@@ -189,6 +208,11 @@ export const LayerTreeItem = memo(function LayerTreeItem({
   const hasChildren = node.children.length > 0;
   const KindIcon = KIND_ICONS[kind] ?? Frame;
 
+  // 表示中の名前のまま確定したら何もしない(自動の名前を固定の名前として書き込まない)
+  const commitRename = (value: string) => onRenameCommit(node.id, value === label ? null : value);
+  // Esc で取り消したあと、入力欄が消えるときの blur で確定しないための印
+  const renameCancelledRef = useRef(false);
+
   return (
     <div className={isDragging ? 'opacity-50' : ''}>
       <ContextMenu>
@@ -294,7 +318,10 @@ export const LayerTreeItem = memo(function LayerTreeItem({
                   : isSelected
                   ? 'text-white'
                   : 'text-gray-400'
-              } opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 ${
+              } ${
+                // 隠しているあいだは常に出す(Figma と同じく、どれを隠したか一覧で分かる)
+                isHidden ? 'opacity-100' : 'opacity-0'
+              } group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 ${
                 isSelected ? 'hover:bg-[#0d99ff]' : 'hover:bg-gray-600'
               }`}
             >
@@ -305,6 +332,42 @@ export const LayerTreeItem = memo(function LayerTreeItem({
               )}
             </button>
 
+            {/* ロック/解除。ロック中は常に出す。紙面ではロック中の要素を選べないので、ここから外す。
+                祖先がロック中なら薄い鍵だけ(外すのは親の行で) */}
+            {isLockedByParent && !isLocked ? (
+              <span
+                className={`p-0.5 ${isSelected ? 'text-white/50' : 'text-gray-500/60'}`}
+                title="親の要素がロックされています"
+                aria-label="親の要素がロックされています"
+              >
+                <Lock className="w-3 h-3" />
+              </span>
+            ) : (
+            <button
+              aria-label={isLocked ? 'ロックを解除' : 'ロック'}
+              title={isLocked ? 'ロックを解除(⌘⇧L)' : 'ロック(⌘⇧L)'}
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleLock(node.id);
+              }}
+              className={`p-0.5 rounded ${
+                isLocked
+                  ? isSelected
+                    ? 'text-white'
+                    : 'text-gray-300'
+                  : isSelected
+                  ? 'text-white'
+                  : 'text-gray-400'
+              } ${
+                isLocked ? 'opacity-100' : 'opacity-0'
+              } group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 ${
+                isSelected ? 'hover:bg-[#0d99ff]' : 'hover:bg-gray-600'
+              }`}
+            >
+              {isLocked ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
+            </button>
+            )}
+
             {/* コンポーネントインスタンスアイコン */}
             {node.componentInstanceId && (
               <Component
@@ -340,8 +403,46 @@ export const LayerTreeItem = memo(function LayerTreeItem({
                   : 'text-gray-200'
               }`}
               title={`${label} (${node.tagName})`}
+              onDoubleClick={(e) => {
+                e.stopPropagation();
+                onRenameStart(node.id);
+              }}
             >
-              {label}
+              {isRenaming ? (
+                <input
+                  // autoFocus だとパネルが横へスクロールして行の頭が切れるので、スクロールさせずに当てる
+                  ref={(input) => input?.focus({ preventScroll: true })}
+                  defaultValue={label}
+                  aria-label="レイヤー名"
+                  draggable={false}
+                  onClick={(e) => e.stopPropagation()}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onDragStart={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onKeyDown={(e) => {
+                    e.stopPropagation();
+                    if (e.nativeEvent.isComposing) return; // 日本語の変換の確定 Enter では閉じない
+                    if (e.key === 'Enter') commitRename(e.currentTarget.value);
+                    if (e.key === 'Escape') {
+                      renameCancelledRef.current = true;
+                      onRenameCommit(node.id, null);
+                    }
+                  }}
+                  onFocus={(e) => {
+                    renameCancelledRef.current = false;
+                    e.currentTarget.select();
+                  }}
+                  onBlur={(e) => {
+                    if (renameCancelledRef.current) return;
+                    commitRename(e.currentTarget.value);
+                  }}
+                  className="w-full min-w-0 rounded-sm border border-[#0d99ff] bg-[#1e1e1e] px-1 text-[11px] text-white outline-none"
+                />
+              ) : (
+                label
+              )}
             </span>
             <span
               className={`text-[10px] flex-shrink-0 tabular-nums ${
@@ -503,6 +604,9 @@ export const LayerTreeItem = memo(function LayerTreeItem({
     prevProps.isDragOver === nextProps.isDragOver &&
     prevProps.dragOverPosition === nextProps.dragOverPosition &&
     prevProps.isHidden === nextProps.isHidden &&
+    prevProps.isLocked === nextProps.isLocked &&
+    prevProps.isLockedByParent === nextProps.isLockedByParent &&
+    prevProps.isRenaming === nextProps.isRenaming &&
     prevProps.hasStyleInClipboard === nextProps.hasStyleInClipboard &&
     // selectionKeyが変わると子要素も再レンダリングが必要
     prevProps.selectionKey === nextProps.selectionKey &&