refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构 (#216)
* refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构 * feat(editor): 添加插件市场功能 * feat(editor): 重构插件市场以支持版本管理和ZIP打包 * feat(editor): 重构插件发布流程并修复React渲染警告 * fix(plugin): 修复插件发布和市场的路径不一致问题 * feat: 重构插件发布流程并添加插件删除功能 * fix(editor): 完善插件删除功能并修复多个关键问题 * fix(auth): 修复自动登录与手动登录的竞态条件问题 * feat(editor): 重构插件管理流程 * feat(editor): 支持 ZIP 文件直接发布插件 - 新增 PluginSourceParser 解析插件源 - 重构发布流程支持文件夹和 ZIP 两种方式 - 优化发布向导 UI * feat(editor): 插件市场支持多版本安装 - 插件解压到项目 plugins 目录 - 新增 Tauri 后端安装/卸载命令 - 支持选择任意版本安装 - 修复打包逻辑，保留完整 dist 目录结构 * feat(editor): 个人中心支持多版本管理 - 合并同一插件的不同版本 - 添加版本历史展开/折叠功能 - 禁止有待审核 PR 时更新插件 * fix(editor): 修复 InspectorRegistry 服务注册 - InspectorRegistry 实现 IService 接口 - 注册到 Core.services 供插件使用 * feat(behavior-tree-editor): 完善插件注册和文件操作 - 添加文件创建模板和操作处理器 - 实现右键菜单创建行为树功能 - 修复文件读取权限问题（使用 Tauri 命令） - 添加 BehaviorTreeEditorPanel 组件 - 修复 rollup 配置支持动态导入 * feat(plugin): 完善插件构建和发布流程 * fix(behavior-tree-editor): 完整恢复编辑器并修复 Toast 集成 * fix(behavior-tree-editor): 修复节点选中、连线跟随和文件加载问题并优化性能 * fix(behavior-tree-editor): 修复端口连接失败问题并优化连线样式 * refactor(behavior-tree-editor): 移除调试面板功能简化代码结构 * refactor(behavior-tree-editor): 清理冗余代码合并重复逻辑 * feat(behavior-tree-editor): 完善编辑器核心功能增强扩展性 * fix(lint): 修复ESLint错误确保CI通过 * refactor(behavior-tree-editor): 优化编辑器工具栏和编译器功能 * refactor(behavior-tree-editor): 清理技术债务，优化代码质量 * fix(editor-app): 修复字符串替换安全问题
This commit is contained in:
YHH
GitHub
209
packages/behavior-tree-editor/src/stores/useUIStore.ts
Normal file
209
packages/behavior-tree-editor/src/stores/useUIStore.ts
Normal file
@@ -0,0 +1,209 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
/**
|
||||
* UI 状态 Store
|
||||
* 只包含 UI 交互状态，不包含业务数据
|
||||
*/
|
||||
interface UIState {
|
||||
/**
|
||||
* 选中的节点 ID 列表
|
||||
*/
|
||||
selectedNodeIds: string[];
|
||||
|
||||
/**
|
||||
* 选中的连接
|
||||
*/
|
||||
selectedConnection: { from: string; to: string } | null;
|
||||
|
||||
/**
|
||||
* 正在拖拽的节点 ID
|
||||
*/
|
||||
draggingNodeId: string | null;
|
||||
|
||||
/**
|
||||
* 拖拽起始位置映射
|
||||
*/
|
||||
dragStartPositions: Map<string, { x: number; y: number }>;
|
||||
|
||||
/**
|
||||
* 是否正在拖拽节点
|
||||
*/
|
||||
isDraggingNode: boolean;
|
||||
|
||||
/**
|
||||
* 拖拽偏移量（临时状态）
|
||||
*/
|
||||
dragDelta: { dx: number; dy: number };
|
||||
|
||||
/**
|
||||
* 画布偏移（临时，用于平移操作中）
|
||||
*/
|
||||
tempCanvasOffset: { x: number; y: number } | null;
|
||||
|
||||
/**
|
||||
* 是否正在平移画布
|
||||
*/
|
||||
isPanning: boolean;
|
||||
|
||||
/**
|
||||
* 平移起始位置
|
||||
*/
|
||||
panStart: { x: number; y: number };
|
||||
|
||||
/**
|
||||
* 正在连接的起始节点 ID
|
||||
*/
|
||||
connectingFrom: string | null;
|
||||
|
||||
/**
|
||||
* 正在连接的起始属性名
|
||||
*/
|
||||
connectingFromProperty: string | null;
|
||||
|
||||
/**
|
||||
* 连接线的临时终点位置
|
||||
*/
|
||||
connectingToPos: { x: number; y: number } | null;
|
||||
|
||||
/**
|
||||
* 是否正在框选
|
||||
*/
|
||||
isBoxSelecting: boolean;
|
||||
|
||||
/**
|
||||
* 框选起始位置
|
||||
*/
|
||||
boxSelectStart: { x: number; y: number } | null;
|
||||
|
||||
/**
|
||||
* 框选结束位置
|
||||
*/
|
||||
boxSelectEnd: { x: number; y: number } | null;
|
||||
|
||||
/**
|
||||
* 选择操作
|
||||
*/
|
||||
setSelectedNodeIds: (nodeIds: string[]) => void;
|
||||
toggleNodeSelection: (nodeId: string) => void;
|
||||
clearSelection: () => void;
|
||||
setSelectedConnection: (connection: { from: string; to: string } | null) => void;
|
||||
|
||||
/**
|
||||
* 拖拽操作
|
||||
*/
|
||||
startDragging: (nodeId: string, startPositions: Map<string, { x: number; y: number }>) => void;
|
||||
stopDragging: () => void;
|
||||
setIsDraggingNode: (isDragging: boolean) => void;
|
||||
setDragDelta: (delta: { dx: number; dy: number }) => void;
|
||||
|
||||
/**
|
||||
* 画布操作
|
||||
*/
|
||||
setTempCanvasOffset: (offset: { x: number; y: number } | null) => void;
|
||||
setIsPanning: (isPanning: boolean) => void;
|
||||
setPanStart: (panStart: { x: number; y: number }) => void;
|
||||
|
||||
/**
|
||||
* 连接操作
|
||||
*/
|
||||
setConnectingFrom: (nodeId: string | null) => void;
|
||||
setConnectingFromProperty: (propertyName: string | null) => void;
|
||||
setConnectingToPos: (pos: { x: number; y: number } | null) => void;
|
||||
clearConnecting: () => void;
|
||||
|
||||
/**
|
||||
* 框选操作
|
||||
*/
|
||||
setIsBoxSelecting: (isSelecting: boolean) => void;
|
||||
setBoxSelectStart: (pos: { x: number; y: number } | null) => void;
|
||||
setBoxSelectEnd: (pos: { x: number; y: number } | null) => void;
|
||||
clearBoxSelect: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* UI Store
|
||||
*/
|
||||
export const useUIStore = create<UIState>((set, get) => ({
|
||||
selectedNodeIds: [],
|
||||
selectedConnection: null,
|
||||
draggingNodeId: null,
|
||||
dragStartPositions: new Map(),
|
||||
isDraggingNode: false,
|
||||
dragDelta: { dx: 0, dy: 0 },
|
||||
tempCanvasOffset: null,
|
||||
isPanning: false,
|
||||
panStart: { x: 0, y: 0 },
|
||||
connectingFrom: null,
|
||||
connectingFromProperty: null,
|
||||
connectingToPos: null,
|
||||
isBoxSelecting: false,
|
||||
boxSelectStart: null,
|
||||
boxSelectEnd: null,
|
||||
|
||||
setSelectedNodeIds: (nodeIds: string[]) => set({ selectedNodeIds: nodeIds }),
|
||||
|
||||
toggleNodeSelection: (nodeId: string) => {
|
||||
const { selectedNodeIds } = get();
|
||||
if (selectedNodeIds.includes(nodeId)) {
|
||||
set({ selectedNodeIds: selectedNodeIds.filter((id) => id !== nodeId) });
|
||||
} else {
|
||||
set({ selectedNodeIds: [...selectedNodeIds, nodeId] });
|
||||
}
|
||||
},
|
||||
|
||||
clearSelection: () => set({ selectedNodeIds: [], selectedConnection: null }),
|
||||
|
||||
setSelectedConnection: (connection: { from: string; to: string } | null) =>
|
||||
set({ selectedConnection: connection }),
|
||||
|
||||
startDragging: (nodeId: string, startPositions: Map<string, { x: number; y: number }>) =>
|
||||
set({
|
||||
draggingNodeId: nodeId,
|
||||
dragStartPositions: startPositions,
|
||||
isDraggingNode: true
|
||||
}),
|
||||
|
||||
stopDragging: () =>
|
||||
set({
|
||||
draggingNodeId: null,
|
||||
dragStartPositions: new Map(),
|
||||
isDraggingNode: false,
|
||||
dragDelta: { dx: 0, dy: 0 }
|
||||
}),
|
||||
|
||||
setIsDraggingNode: (isDragging: boolean) => set({ isDraggingNode: isDragging }),
|
||||
|
||||
setDragDelta: (delta: { dx: number; dy: number }) => set({ dragDelta: delta }),
|
||||
|
||||
setTempCanvasOffset: (offset: { x: number; y: number } | null) => set({ tempCanvasOffset: offset }),
|
||||
|
||||
setIsPanning: (isPanning: boolean) => set({ isPanning }),
|
||||
|
||||
setPanStart: (panStart: { x: number; y: number }) => set({ panStart }),
|
||||
|
||||
setConnectingFrom: (nodeId: string | null) => set({ connectingFrom: nodeId }),
|
||||
|
||||
setConnectingFromProperty: (propertyName: string | null) => set({ connectingFromProperty: propertyName }),
|
||||
|
||||
setConnectingToPos: (pos: { x: number; y: number } | null) => set({ connectingToPos: pos }),
|
||||
|
||||
clearConnecting: () =>
|
||||
set({
|
||||
connectingFrom: null,
|
||||
connectingFromProperty: null,
|
||||
connectingToPos: null
|
||||
}),
|
||||
|
||||
setIsBoxSelecting: (isSelecting: boolean) => set({ isBoxSelecting: isSelecting }),
|
||||
|
||||
setBoxSelectStart: (pos: { x: number; y: number } | null) => set({ boxSelectStart: pos }),
|
||||
|
||||
setBoxSelectEnd: (pos: { x: number; y: number } | null) => set({ boxSelectEnd: pos }),
|
||||
|
||||
clearBoxSelect: () =>
|
||||
set({
|
||||
isBoxSelecting: false,
|
||||
boxSelectStart: null,
|
||||
boxSelectEnd: null
|
||||
})
|
||||
}));
|
||||
Reference in New Issue
Block a user