Files
esengine/packages/behavior-tree-editor/src/hooks/usePortConnection.ts
YHH bce3a6e253 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): 修复字符串替换安全问题
2025-11-18 14:46:51 +08:00

187 lines
6.9 KiB
TypeScript

import { RefObject } from 'react';
import { BehaviorTreeNode, Connection, ROOT_NODE_ID, useUIStore } from '../stores';
import { PropertyDefinition } from '@esengine/behavior-tree';
import { useConnectionOperations } from './useConnectionOperations';
interface UsePortConnectionParams {
canvasRef: RefObject<HTMLDivElement>;
canvasOffset: { x: number; y: number };
canvasScale: number;
nodes: BehaviorTreeNode[];
connections: Connection[];
connectingFrom: string | null;
connectingFromProperty: string | null;
connectionOperations: ReturnType<typeof useConnectionOperations>;
setConnectingFrom: (nodeId: string | null) => void;
setConnectingFromProperty: (propertyName: string | null) => void;
clearConnecting: () => void;
sortChildrenByPosition: () => void;
showToast?: (message: string, type: 'success' | 'error' | 'info' | 'warning') => void;
}
export function usePortConnection(params: UsePortConnectionParams) {
const {
canvasRef,
nodes,
connections,
connectionOperations,
setConnectingFrom,
setConnectingFromProperty,
clearConnecting,
sortChildrenByPosition,
showToast
} = params;
const handlePortMouseDown = (e: React.MouseEvent, nodeId: string, propertyName?: string) => {
e.stopPropagation();
const target = e.currentTarget as HTMLElement;
const portType = target.getAttribute('data-port-type');
setConnectingFrom(nodeId);
setConnectingFromProperty(propertyName || null);
if (canvasRef.current) {
canvasRef.current.setAttribute('data-connecting-from-port-type', portType || '');
}
};
const handlePortMouseUp = (e: React.MouseEvent, nodeId: string, propertyName?: string) => {
e.stopPropagation();
// 从 store 读取最新状态避免闭包陷阱
const currentConnectingFrom = useUIStore.getState().connectingFrom;
const currentConnectingFromProperty = useUIStore.getState().connectingFromProperty;
if (!currentConnectingFrom) {
clearConnecting();
return;
}
if (currentConnectingFrom === nodeId) {
showToast?.('不能将节点连接到自己', 'warning');
clearConnecting();
return;
}
const target = e.currentTarget as HTMLElement;
const toPortType = target.getAttribute('data-port-type');
const fromPortType = canvasRef.current?.getAttribute('data-connecting-from-port-type');
let actualFrom = currentConnectingFrom;
let actualTo = nodeId;
let actualFromProperty = currentConnectingFromProperty;
let actualToProperty = propertyName;
const needReverse =
(fromPortType === 'node-input' || fromPortType === 'property-input') &&
(toPortType === 'node-output' || toPortType === 'variable-output');
if (needReverse) {
actualFrom = nodeId;
actualTo = currentConnectingFrom;
actualFromProperty = propertyName || null;
actualToProperty = currentConnectingFromProperty ?? undefined;
}
if (actualFromProperty || actualToProperty) {
const existingConnection = connections.find(
(conn: Connection) =>
(conn.from === actualFrom && conn.to === actualTo &&
conn.fromProperty === actualFromProperty && conn.toProperty === actualToProperty) ||
(conn.from === actualTo && conn.to === actualFrom &&
conn.fromProperty === actualToProperty && conn.toProperty === actualFromProperty)
);
if (existingConnection) {
showToast?.('该连接已存在', 'warning');
clearConnecting();
return;
}
const toNode = nodes.find((n: BehaviorTreeNode) => n.id === actualTo);
if (toNode && actualToProperty) {
const targetProperty = toNode.template.properties.find(
(p: PropertyDefinition) => p.name === actualToProperty
);
if (!targetProperty?.allowMultipleConnections) {
const existingPropertyConnection = connections.find(
(conn: Connection) =>
conn.connectionType === 'property' &&
conn.to === actualTo &&
conn.toProperty === actualToProperty
);
if (existingPropertyConnection) {
showToast?.('该属性已有连接,请先删除现有连接', 'warning');
clearConnecting();
return;
}
}
}
try {
connectionOperations.addConnection(
actualFrom,
actualTo,
'property',
actualFromProperty || undefined,
actualToProperty || undefined
);
} catch (error) {
showToast?.(error instanceof Error ? error.message : '添加连接失败', 'error');
clearConnecting();
return;
}
} else {
if (actualFrom === ROOT_NODE_ID) {
const rootNode = nodes.find((n: BehaviorTreeNode) => n.id === ROOT_NODE_ID);
if (rootNode && rootNode.children.length > 0) {
showToast?.('根节点只能连接一个子节点', 'warning');
clearConnecting();
return;
}
}
const existingConnection = connections.find(
(conn: Connection) =>
(conn.from === actualFrom && conn.to === actualTo && conn.connectionType === 'node') ||
(conn.from === actualTo && conn.to === actualFrom && conn.connectionType === 'node')
);
if (existingConnection) {
showToast?.('该连接已存在', 'warning');
clearConnecting();
return;
}
try {
connectionOperations.addConnection(actualFrom, actualTo, 'node');
setTimeout(() => {
sortChildrenByPosition();
}, 0);
} catch (error) {
showToast?.(error instanceof Error ? error.message : '添加连接失败', 'error');
clearConnecting();
return;
}
}
clearConnecting();
};
const handleNodeMouseUpForConnection = (e: React.MouseEvent, nodeId: string) => {
const currentConnectingFrom = useUIStore.getState().connectingFrom;
if (currentConnectingFrom && currentConnectingFrom !== nodeId) {
handlePortMouseUp(e, nodeId);
}
};
return {
handlePortMouseDown,
handlePortMouseUp,
handleNodeMouseUpForConnection
};
}