🔄 React FlowとZustandでUndo/Redo機能を実装する

// AppState: アプリケーション全体の状態を示す型
// const { appState, onStateUpdate } = useYourStore();

// 再レンダリングを発生させないuseRefでフラグを管理
const isInteractingRef = useRef(false);

// ... (handleNodeDragStart, handleNodeResizeStartなどで isInteractingRef.current = true とする) ...

const handleNodesChange: OnNodesChange = useCallback((changes) => {
  // フラグが立っている間は、UIのみを更新して描画をスムーズにする
  if (isInteractingRef.current) {
    setNodes((nodes) => applyNodeChanges(changes, nodes));
    return;
  }

  // 通常時のみ、アプリケーションの状態を更新してUndo履歴に記録
  setNodes((nodes) => {
    const updatedNodes = applyNodeChanges(changes, nodes);
    const updatedState = updateStateFromFlow(appState, updatedNodes, edges);
    onStateUpdate(updatedState); // Zustandの状態を更新し、履歴に記録
    return updatedNodes;
  });
}, [setNodes, edges, appState, onStateUpdate]);

const handleNodeDragStop = useCallback((_event, node, nodes) => {
  // スナップ処理などのUI補助機能をここで行う ...

  // 条件分岐なしで、常に最終的な状態をアプリケーションに反映
  const updatedState = updateStateFromFlow(appState, nodes, edges);
  onStateUpdate(updatedState);

  // フラグをリセット
  isInteractingRef.current = false;
}, [appState, edges, onStateUpdate]);

// リサイズ終了時も同様
const handleNodeResizeStop = useCallback((_event, node, nodes) => {
  const updatedState = updateStateFromFlow(appState, nodes, edges);
  onStateUpdate(updatedState);
  isInteractingRef.current = false;
}, [nodes, edges, appState, onStateUpdate]);

// アプリケーションの状態変更を検知し、React FlowのUIに反映させる
useEffect(() => {
  if (!appState) return;

  setNodes((currentNodes) =>
    currentNodes.map((node) => {
      if (node.type === 'laneNode') {
        const laneData = appState.lanes.find((l) => l.id === node.data.lane.id);
        if (laneData) {
          // 状態に保存された位置とサイズをノードに反映
          return {
            ...node,
            position: laneData.position,     // 1. 位置を更新
            width: laneData.size.width,      // 2. トップレベルの幅を更新
            height: laneData.size.height,    // 3. トップレベルの高さを更新
            style: {                         // 4. style内の幅と高さも更新
              ...node.style,
              width: laneData.size.width,
              height: laneData.size.height,
            },
            data: { ...node.data, lane: laneData }, // データも更新
          };
        }
      }
      // 他のノードタイプも同様に更新...
      return node;
    })
  );
}, [appState, setNodes]); // appStateの変更を依存配列に指定

const skipNodesChangeRef = useRef(0);

// プロパティパネルの保存処理など
const handleProgrammaticUpdate = useCallback((updatedData) => {
  // 1. 先にアプリケーションの状態を更新し、履歴に記録
  const updatedState = createNewState(appState, updatedData);
  onStateUpdate(updatedState);

  // 2. この直後のonNodesChangeを1回スキップするよう設定
  skipNodesChangeRef.current = 1;

  // 3. React Flowのノードを更新し、UIに即時反映
  setNodes((nodes) => /* ...ノードの更新処理... */);
}, [appState, onStateUpdate, setNodes]);

// onNodesChange内での処理
const handleNodesChange: OnNodesChange = useCallback((changes) => {
  if (skipNodesChangeRef.current > 0) {
    skipNodesChangeRef.current--;
    setNodes((nodes) => applyNodeChanges(changes, nodes));
    return;
  }
  // ... 通常のドラッグ操作などの処理（対策1を参照）
}, [/* ... */]);

// React Flow → アプリケーションの状態 への変換
export function updateStateFromFlow(currentState: AppState, nodes: Node[], edges: Edge[]): AppState {
  const lanes = nodes
    .filter((node) => node.type === 'laneNode')
    .map((node) => {
      const lane = node.data.lane;
      return {
        ...lane,
        position: node.position, // 位置を正確に保存
        size: { // サイズを複数のプロパティから評価し、最も信頼できる値を保存
          width: node.measured?.width ?? node.width ?? node.style?.width ?? 500,
          height: node.measured?.height ?? node.height ?? node.style?.height ?? 300,
        },
      };
    });

  // ... tasksの更新処理も同様 ...

  return { ...currentState, lanes, tasks, edges };
}