Refactor/clean architecture phase1 (#215)

* refactor(editor): 建立Clean Architecture领域模型层 * refactor(editor): 实现应用层架构 - 命令模式、用例和状态管理 * refactor(editor): 实现展示层核心Hooks * refactor(editor): 实现基础设施层和展示层组件 * refactor(editor): 迁移画布和连接渲染到 Clean Architecture 组件 * feat(editor): 集成应用层架构和命令模式，实现撤销/重做功能 * refactor(editor): UI组件拆分 * refactor(editor): 提取快速创建菜单逻辑 * refactor(editor): 重构BehaviorTreeEditor，提取组件和Hook * refactor(editor): 提取端口连接和键盘事件Hook * refactor(editor): 提取拖放处理Hook * refactor(editor): 提取画布交互Hook和工具函数 * refactor(editor): 完成核心重构 * fix(editor): 修复节点无法创建和连接 * refactor(behavior-tree,editor): 重构节点子节点约束系统，实现元数据驱动的架构
2025-11-03 21:22:16 +08:00
parent 40cde9c050
commit adfc7e91b3
104 changed files with 8232 additions and 2506 deletions
--- a/packages/editor-app/src/application/commands/tree/AddConnectionCommand.ts
+++ b/packages/editor-app/src/application/commands/tree/AddConnectionCommand.ts
@@ -0,0 +1,36 @@
+import { Connection } from '../../../domain/models/Connection';
+import { BaseCommand } from '../BaseCommand';
+import { ITreeState } from '../ITreeState';
+
+/**
+ * 添加连接命令
+ */
+export class AddConnectionCommand extends BaseCommand {
+    constructor(
+        private readonly state: ITreeState,
+        private readonly connection: Connection
+    ) {
+        super();
+    }
+
+    execute(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.addConnection(this.connection);
+        this.state.setTree(newTree);
+    }
+
+    undo(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.removeConnection(
+            this.connection.from,
+            this.connection.to,
+            this.connection.fromProperty,
+            this.connection.toProperty
+        );
+        this.state.setTree(newTree);
+    }
+
+    getDescription(): string {
+        return `添加连接: ${this.connection.from} -> ${this.connection.to}`;
+    }
+}
--- a/packages/editor-app/src/application/commands/tree/CreateNodeCommand.ts
+++ b/packages/editor-app/src/application/commands/tree/CreateNodeCommand.ts
@@ -0,0 +1,34 @@
+import { Node } from '../../../domain/models/Node';
+import { BaseCommand } from '../BaseCommand';
+import { ITreeState } from '../ITreeState';
+
+/**
+ * 创建节点命令
+ */
+export class CreateNodeCommand extends BaseCommand {
+    private createdNodeId: string;
+
+    constructor(
+        private readonly state: ITreeState,
+        private readonly node: Node
+    ) {
+        super();
+        this.createdNodeId = node.id;
+    }
+
+    execute(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.addNode(this.node);
+        this.state.setTree(newTree);
+    }
+
+    undo(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.removeNode(this.createdNodeId);
+        this.state.setTree(newTree);
+    }
+
+    getDescription(): string {
+        return `创建节点: ${this.node.template.displayName}`;
+    }
+}
--- a/packages/editor-app/src/application/commands/tree/DeleteNodeCommand.ts
+++ b/packages/editor-app/src/application/commands/tree/DeleteNodeCommand.ts
@@ -0,0 +1,38 @@
+import { Node } from '../../../domain/models/Node';
+import { BaseCommand } from '../BaseCommand';
+import { ITreeState } from '../ITreeState';
+
+/**
+ * 删除节点命令
+ */
+export class DeleteNodeCommand extends BaseCommand {
+    private deletedNode: Node | null = null;
+
+    constructor(
+        private readonly state: ITreeState,
+        private readonly nodeId: string
+    ) {
+        super();
+    }
+
+    execute(): void {
+        const tree = this.state.getTree();
+        this.deletedNode = tree.getNode(this.nodeId);
+        const newTree = tree.removeNode(this.nodeId);
+        this.state.setTree(newTree);
+    }
+
+    undo(): void {
+        if (!this.deletedNode) {
+            throw new Error('无法撤销：未保存已删除的节点');
+        }
+
+        const tree = this.state.getTree();
+        const newTree = tree.addNode(this.deletedNode);
+        this.state.setTree(newTree);
+    }
+
+    getDescription(): string {
+        return `删除节点: ${this.deletedNode?.template.displayName ?? this.nodeId}`;
+    }
+}
--- a/packages/editor-app/src/application/commands/tree/MoveNodeCommand.ts
+++ b/packages/editor-app/src/application/commands/tree/MoveNodeCommand.ts
@@ -0,0 +1,75 @@
+import { Position } from '../../../domain/value-objects/Position';
+import { BaseCommand } from '../BaseCommand';
+import { ITreeState } from '../ITreeState';
+import { ICommand } from '../ICommand';
+
+/**
+ * 移动节点命令
+ * 支持合并连续的移动操作
+ */
+export class MoveNodeCommand extends BaseCommand {
+    private oldPosition: Position;
+
+    constructor(
+        private readonly state: ITreeState,
+        private readonly nodeId: string,
+        private readonly newPosition: Position
+    ) {
+        super();
+        const tree = this.state.getTree();
+        const node = tree.getNode(nodeId);
+        this.oldPosition = node.position;
+    }
+
+    execute(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.updateNode(this.nodeId, (node) =>
+            node.moveToPosition(this.newPosition)
+        );
+        this.state.setTree(newTree);
+    }
+
+    undo(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.updateNode(this.nodeId, (node) =>
+            node.moveToPosition(this.oldPosition)
+        );
+        this.state.setTree(newTree);
+    }
+
+    getDescription(): string {
+        return `移动节点: ${this.nodeId}`;
+    }
+
+    /**
+     * 移动命令可以合并
+     */
+    canMergeWith(other: ICommand): boolean {
+        if (!(other instanceof MoveNodeCommand)) {
+            return false;
+        }
+        return this.nodeId === other.nodeId;
+    }
+
+    /**
+     * 合并移动命令
+     * 保留初始位置，更新最终位置
+     */
+    mergeWith(other: ICommand): ICommand {
+        if (!(other instanceof MoveNodeCommand)) {
+            throw new Error('只能与 MoveNodeCommand 合并');
+        }
+
+        if (this.nodeId !== other.nodeId) {
+            throw new Error('只能合并同一节点的移动命令');
+        }
+
+        const merged = new MoveNodeCommand(
+            this.state,
+            this.nodeId,
+            other.newPosition
+        );
+        merged.oldPosition = this.oldPosition;
+        return merged;
+    }
+}
--- a/packages/editor-app/src/application/commands/tree/RemoveConnectionCommand.ts
+++ b/packages/editor-app/src/application/commands/tree/RemoveConnectionCommand.ts
@@ -0,0 +1,50 @@
+import { Connection } from '../../../domain/models/Connection';
+import { BaseCommand } from '../BaseCommand';
+import { ITreeState } from '../ITreeState';
+
+/**
+ * 移除连接命令
+ */
+export class RemoveConnectionCommand extends BaseCommand {
+    private removedConnection: Connection | null = null;
+
+    constructor(
+        private readonly state: ITreeState,
+        private readonly from: string,
+        private readonly to: string,
+        private readonly fromProperty?: string,
+        private readonly toProperty?: string
+    ) {
+        super();
+    }
+
+    execute(): void {
+        const tree = this.state.getTree();
+
+        const connection = tree.connections.find((c) =>
+            c.matches(this.from, this.to, this.fromProperty, this.toProperty)
+        );
+
+        if (!connection) {
+            throw new Error(`连接不存在: ${this.from} -> ${this.to}`);
+        }
+
+        this.removedConnection = connection;
+        const newTree = tree.removeConnection(this.from, this.to, this.fromProperty, this.toProperty);
+        this.state.setTree(newTree);
+    }
+
+    undo(): void {
+        if (!this.removedConnection) {
+            throw new Error('无法撤销：未保存已删除的连接');
+        }
+
+        const tree = this.state.getTree();
+        const newTree = tree.addConnection(this.removedConnection);
+        this.state.setTree(newTree);
+    }
+
+    getDescription(): string {
+        return `移除连接: ${this.from} -> ${this.to}`;
+    }
+}
--- a/packages/editor-app/src/application/commands/tree/UpdateNodeDataCommand.ts
+++ b/packages/editor-app/src/application/commands/tree/UpdateNodeDataCommand.ts
@@ -0,0 +1,40 @@
+import { BaseCommand } from '../BaseCommand';
+import { ITreeState } from '../ITreeState';
+
+/**
+ * 更新节点数据命令
+ */
+export class UpdateNodeDataCommand extends BaseCommand {
+    private oldData: Record<string, unknown>;
+
+    constructor(
+        private readonly state: ITreeState,
+        private readonly nodeId: string,
+        private readonly newData: Record<string, unknown>
+    ) {
+        super();
+        const tree = this.state.getTree();
+        const node = tree.getNode(nodeId);
+        this.oldData = node.data;
+    }
+
+    execute(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.updateNode(this.nodeId, (node) =>
+            node.updateData(this.newData)
+        );
+        this.state.setTree(newTree);
+    }
+
+    undo(): void {
+        const tree = this.state.getTree();
+        const newTree = tree.updateNode(this.nodeId, (node) =>
+            node.updateData(this.oldData)
+        );
+        this.state.setTree(newTree);
+    }
+
+    getDescription(): string {
+        return `更新节点数据: ${this.nodeId}`;
+    }
+}
--- a/packages/editor-app/src/application/commands/tree/index.ts
+++ b/packages/editor-app/src/application/commands/tree/index.ts
@@ -0,0 +1,6 @@
+export { CreateNodeCommand } from './CreateNodeCommand';
+export { DeleteNodeCommand } from './DeleteNodeCommand';
+export { AddConnectionCommand } from './AddConnectionCommand';
+export { RemoveConnectionCommand } from './RemoveConnectionCommand';
+export { MoveNodeCommand } from './MoveNodeCommand';
+export { UpdateNodeDataCommand } from './UpdateNodeDataCommand';