@growgroup/visual-editor 0.1.0

package/src/editor/contexts/EditorRefsContext.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+/**
+ * EditorRefsContext
+ *
+ * エディタのRef関連を管理するContext
+ * 変更頻度: 極低（初期化後は変更なし）
+ *
+ * 含まれる状態:
+ * - iframeRef: iframeのRef
+ * - containerRef: コンテナのRef
+ * - clipboardRef: クリップボードデータのRef
+ * - styleClipboardRef: スタイルクリップボードのRef
+ * - iframeHtmlRef: iframeのHTML状態のRef
+ * - isUndoRedoRef: Undo/Redo実行中フラグ
+ * - drawingStateRef: 描画状態のRef
+ * - getIframeDoc: iframeドキュメント取得ヘルパー
+ */
+
+import React, { createContext, useContext, useRef, useCallback, useState, MutableRefObject } from 'react';
+import type { ClipboardData, DrawingState, StyleClipboard } from '../types';
+
+// スタイルクリップボードをモジュールレベルで保持（スライド間で共有するため）
+let globalStyleClipboard: StyleClipboard | null = null;
+
+// グローバルスタイルクリップボードへのRef-likeアクセサ
+export const globalStyleClipboardRef = {
+  get current() {
+    return globalStyleClipboard;
+  },
+  set current(value: StyleClipboard | null) {
+    globalStyleClipboard = value;
+  },
+};
+
+/**
+ * 最後に使用したスタイル（Figmaスタイル継承用）
+ * 要素タイプごとにスタイルを保持
+ */
+export interface LastUsedStyles {
+  // 図形（rectangle, ellipse, frame）用
+  shape: {
+    backgroundColor: string;
+    borderRadius: string;
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    opacity: string;
+  };
+  // テキスト用
+  text: {
+    color: string;
+    fontSize: string;
+    fontFamily: string;
+    fontWeight: string;
+    lineHeight: string;
+    letterSpacing: string;
+    textAlign: string;
+  };
+  // 線・矢印用
+  line: {
+    stroke: string;
+    strokeWidth: string;
+  };
+}
+
+// デフォルトのスタイル
+const defaultLastUsedStyles: LastUsedStyles = {
+  shape: {
+    backgroundColor: '#3B82F6',
+    borderRadius: '4px',
+    borderColor: 'transparent',
+    borderWidth: '0',
+    borderStyle: 'solid',
+    opacity: '1',
+  },
+  text: {
+    color: '#1F2937',
+    fontSize: '16px',
+    fontFamily: 'inherit',
+    fontWeight: '400',
+    lineHeight: '1.5',
+    letterSpacing: '0',
+    textAlign: 'left',
+  },
+  line: {
+    stroke: '#1F2937',
+    strokeWidth: '2',
+  },
+};
+
+// 最後に使用したスタイルをモジュールレベルで保持
+let globalLastUsedStyles: LastUsedStyles = { ...defaultLastUsedStyles };
+
+// グローバル最後使用スタイルへのRef-likeアクセサ
+export const globalLastUsedStylesRef = {
+  get current() {
+    return globalLastUsedStyles;
+  },
+  set current(value: LastUsedStyles) {
+    globalLastUsedStyles = value;
+  },
+  // 部分更新用ヘルパー
+  updateShape(styles: Partial<LastUsedStyles['shape']>) {
+    globalLastUsedStyles = {
+      ...globalLastUsedStyles,
+      shape: { ...globalLastUsedStyles.shape, ...styles },
+    };
+  },
+  updateText(styles: Partial<LastUsedStyles['text']>) {
+    globalLastUsedStyles = {
+      ...globalLastUsedStyles,
+      text: { ...globalLastUsedStyles.text, ...styles },
+    };
+  },
+  updateLine(styles: Partial<LastUsedStyles['line']>) {
+    globalLastUsedStyles = {
+      ...globalLastUsedStyles,
+      line: { ...globalLastUsedStyles.line, ...styles },
+    };
+  },
+};
+
+export interface EditorRefsContextValue {
+  iframeRef: MutableRefObject<HTMLIFrameElement | null>;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  clipboardRef: MutableRefObject<ClipboardData | null>;
+  styleClipboardRef: typeof globalStyleClipboardRef;
+  lastUsedStylesRef: typeof globalLastUsedStylesRef;
+  iframeHtmlRef: MutableRefObject<string>;
+  isUndoRedoRef: MutableRefObject<boolean>;
+  drawingStateRef: MutableRefObject<DrawingState>;
+  getIframeDoc: () => Document | null;
+  /** iframeが読み込み完了したかどうか */
+  iframeReady: boolean;
+  /** iframeの読み込み完了状態をセット */
+  setIframeReady: (ready: boolean) => void;
+}
+
+const EditorRefsContext = createContext<EditorRefsContextValue | null>(null);
+
+export function useEditorRefs(): EditorRefsContextValue {
+  const context = useContext(EditorRefsContext);
+  if (!context) {
+    throw new Error('useEditorRefs must be used within EditorRefsProvider');
+  }
+  return context;
+}
+
+interface EditorRefsProviderProps {
+  initialHtml: string;
+  children: React.ReactNode;
+}
+
+export function EditorRefsProvider({
+  initialHtml,
+  children,
+}: EditorRefsProviderProps) {
+  // Refs
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const clipboardRef = useRef<ClipboardData | null>(null);
+  const styleClipboardRef = globalStyleClipboardRef;
+  const iframeHtmlRef = useRef<string>(initialHtml);
+  const isUndoRedoRef = useRef<boolean>(false);
+  const drawingStateRef = useRef<DrawingState>({
+    isDrawing: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    previewElement: null,
+    points: [],
+  });
+
+  // iframeの読み込み完了状態
+  const [iframeReady, setIframeReady] = useState(false);
+
+  // iframeドキュメント取得
+  const getIframeDoc = useCallback(() => {
+    const iframe = iframeRef.current;
+    return iframe?.contentDocument || iframe?.contentWindow?.document || null;
+  }, []);
+
+  const value: EditorRefsContextValue = {
+    iframeRef,
+    containerRef,
+    clipboardRef,
+    styleClipboardRef,
+    lastUsedStylesRef: globalLastUsedStylesRef,
+    iframeHtmlRef,
+    isUndoRedoRef,
+    drawingStateRef,
+    getIframeDoc,
+    iframeReady,
+    setIframeReady,
+  };
+
+  return (
+    <EditorRefsContext.Provider value={value}>
+      {children}
+    </EditorRefsContext.Provider>
+  );
+}

package/src/editor/contexts/EditorSelectionContext.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+/**
+ * EditorSelectionContext
+ *
+ * エディタの選択状態を管理するContext
+ * 変更頻度: 高（ユーザー操作で頻繁に変更）
+ *
+ * 含まれる状態:
+ * - selectedElement: 選択された要素の詳細情報
+ * - selectedElementIds: 選択された要素のID配列（複数選択対応）
+ */
+
+import React, { createContext, useContext, useState } from 'react';
+import type { SelectedElementInfo } from '../types';
+
+export interface EditorSelectionContextValue {
+  selectedElement: SelectedElementInfo | null;
+  setSelectedElement: (element: SelectedElementInfo | null) => void;
+  selectedElementIds: string[];
+  setSelectedElementIds: (ids: string[]) => void;
+}
+
+const EditorSelectionContext = createContext<EditorSelectionContextValue | null>(null);
+
+export function useEditorSelection(): EditorSelectionContextValue {
+  const context = useContext(EditorSelectionContext);
+  if (!context) {
+    throw new Error('useEditorSelection must be used within EditorSelectionProvider');
+  }
+  return context;
+}
+
+interface EditorSelectionProviderProps {
+  children: React.ReactNode;
+}
+
+export function EditorSelectionProvider({ children }: EditorSelectionProviderProps) {
+  const [selectedElement, setSelectedElement] = useState<SelectedElementInfo | null>(null);
+  const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
+
+  const value: EditorSelectionContextValue = {
+    selectedElement,
+    setSelectedElement,
+    selectedElementIds,
+    setSelectedElementIds,
+  };
+
+  return (
+    <EditorSelectionContext.Provider value={value}>
+      {children}
+    </EditorSelectionContext.Provider>
+  );
+}

package/src/editor/contexts/EditorToolContext.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+/**
+ * EditorToolContext
+ *
+ * エディタのツール状態を管理するContext
+ * 変更頻度: 低（ツール切り替え時のみ）
+ *
+ * 含まれる状態:
+ * - activeTool: 現在選択されているツール
+ * - editorMode: エディタモード（slide/webpage）
+ */
+
+import React, { createContext, useContext, useState } from 'react';
+import type { EditorTool } from '../types';
+
+/** エディタモード: スライド（16:9固定）またはWebページ（可変高さ） */
+export type EditorMode = 'slide' | 'webpage';
+
+export interface EditorToolContextValue {
+  activeTool: EditorTool;
+  setActiveTool: (tool: EditorTool) => void;
+  editorMode: EditorMode;
+}
+
+const EditorToolContext = createContext<EditorToolContextValue | null>(null);
+
+export function useEditorTool(): EditorToolContextValue {
+  const context = useContext(EditorToolContext);
+  if (!context) {
+    throw new Error('useEditorTool must be used within EditorToolProvider');
+  }
+  return context;
+}
+
+interface EditorToolProviderProps {
+  editorMode?: EditorMode;
+  children: React.ReactNode;
+}
+
+export function EditorToolProvider({
+  editorMode = 'slide',
+  children,
+}: EditorToolProviderProps) {
+  const [activeTool, setActiveTool] = useState<EditorTool>('select');
+
+  const value: EditorToolContextValue = {
+    activeTool,
+    setActiveTool,
+    editorMode,
+  };
+
+  return (
+    <EditorToolContext.Provider value={value}>
+      {children}
+    </EditorToolContext.Provider>
+  );
+}

package/src/editor/contexts/EditorUIStateContext.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+/**
+ * EditorUIStateContext
+ *
+ * エディタのUI状態を管理するContext
+ * 変更頻度: 中〜高（DOMツリー、パネル状態、マーキー等）
+ *
+ * 含まれる状態:
+ * - domTree: DOMツリー構造
+ * - searchQuery: レイヤー検索クエリ
+ * - expandedNodes: 展開されたノードのSet
+ * - openSections: プロパティパネルのセクション開閉状態
+ * - marqueeState: マーキー選択状態
+ * - restoreFocus: フォーカス復元関数
+ */
+
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import type { DOMTreeNode, PanelSections, MarqueeState } from '../types';
+import { DEFAULT_PANEL_SECTIONS } from '../constants';
+
+export interface EditorUIStateContextValue {
+  // DOMツリー
+  domTree: DOMTreeNode[];
+  setDomTree: (tree: DOMTreeNode[]) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  expandedNodes: Set<string>;
+  setExpandedNodes: React.Dispatch<React.SetStateAction<Set<string>>>;
+
+  // パネル状態
+  openSections: PanelSections;
+  setOpenSections: React.Dispatch<React.SetStateAction<PanelSections>>;
+
+  // マーキー選択
+  marqueeState: MarqueeState;
+  setMarqueeState: React.Dispatch<React.SetStateAction<MarqueeState>>;
+
+  // フォーカス管理
+  restoreFocus: () => void;
+}
+
+const EditorUIStateContext = createContext<EditorUIStateContextValue | null>(null);
+
+export function useEditorUIState(): EditorUIStateContextValue {
+  const context = useContext(EditorUIStateContext);
+  if (!context) {
+    throw new Error('useEditorUIState must be used within EditorUIStateProvider');
+  }
+  return context;
+}
+
+interface EditorUIStateProviderProps {
+  // フォーカス復元用のgetIframeDoc関数
+  getIframeDoc: () => Document | null;
+  children: React.ReactNode;
+}
+
+export function EditorUIStateProvider({
+  getIframeDoc,
+  children,
+}: EditorUIStateProviderProps) {
+  // DOMツリー
+  const [domTree, setDomTree] = useState<DOMTreeNode[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  // パネル状態
+  const [openSections, setOpenSections] = useState<PanelSections>(DEFAULT_PANEL_SECTIONS);
+
+  // マーキー選択状態
+  const [marqueeState, setMarqueeState] = useState<MarqueeState>({
+    isActive: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+  });
+
+  // フォーカス復元（ショートカットが効かなくなる問題対策）
+  const restoreFocus = useCallback(() => {
+    const iframeDoc = getIframeDoc();
+    if (!iframeDoc) {
+      console.log('[EditorUIStateContext] restoreFocus: iframe doc not available');
+      return;
+    }
+
+    // テキスト編集中の要素があればそこにフォーカス
+    const editingElement = iframeDoc.querySelector('[contenteditable="true"]') as HTMLElement;
+    if (editingElement) {
+      editingElement.focus();
+      console.log('[EditorUIStateContext] restoreFocus: focused editing element');
+      return;
+    }
+
+    // iframeのbodyにフォーカスを設定
+    if (iframeDoc.body) {
+      iframeDoc.body.focus();
+      console.log('[EditorUIStateContext] restoreFocus: focused iframe body');
+    }
+  }, [getIframeDoc]);
+
+  const value: EditorUIStateContextValue = {
+    domTree,
+    setDomTree,
+    searchQuery,
+    setSearchQuery,
+    expandedNodes,
+    setExpandedNodes,
+    openSections,
+    setOpenSections,
+    marqueeState,
+    setMarqueeState,
+    restoreFocus,
+  };
+
+  return (
+    <EditorUIStateContext.Provider value={value}>
+      {children}
+    </EditorUIStateContext.Provider>
+  );
+}