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): 重构节点子节点约束系统，实现元数据驱动的架构
This commit is contained in:
YHH
GitHub
4
packages/editor-app/src/presentation/hooks/index.ts
Normal file
4
packages/editor-app/src/presentation/hooks/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { useCommandHistory } from './useCommandHistory';
|
||||
export { useNodeOperations } from './useNodeOperations';
|
||||
export { useConnectionOperations } from './useConnectionOperations';
|
||||
export { useCanvasInteraction } from './useCanvasInteraction';
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useUIStore } from '../../application/state/UIStore';
|
||||
|
||||
/**
|
||||
* 画布交互 Hook
|
||||
* 封装画布的缩放、平移等交互逻辑
|
||||
*/
|
||||
export function useCanvasInteraction() {
|
||||
const {
|
||||
canvasOffset,
|
||||
canvasScale,
|
||||
isPanning,
|
||||
panStart,
|
||||
setCanvasOffset,
|
||||
setCanvasScale,
|
||||
setIsPanning,
|
||||
setPanStart,
|
||||
resetView
|
||||
} = useUIStore();
|
||||
|
||||
const handleWheel = useCallback((e: React.WheelEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const delta = e.deltaY;
|
||||
const scaleFactor = 1.1;
|
||||
|
||||
if (delta < 0) {
|
||||
setCanvasScale(Math.min(canvasScale * scaleFactor, 3));
|
||||
} else {
|
||||
setCanvasScale(Math.max(canvasScale / scaleFactor, 0.1));
|
||||
}
|
||||
}, [canvasScale, setCanvasScale]);
|
||||
|
||||
const startPanning = useCallback((clientX: number, clientY: number) => {
|
||||
setIsPanning(true);
|
||||
setPanStart({ x: clientX, y: clientY });
|
||||
}, [setIsPanning, setPanStart]);
|
||||
|
||||
const updatePanning = useCallback((clientX: number, clientY: number) => {
|
||||
if (!isPanning) return;
|
||||
|
||||
const dx = clientX - panStart.x;
|
||||
const dy = clientY - panStart.y;
|
||||
|
||||
setCanvasOffset({
|
||||
x: canvasOffset.x + dx,
|
||||
y: canvasOffset.y + dy
|
||||
});
|
||||
|
||||
setPanStart({ x: clientX, y: clientY });
|
||||
}, [isPanning, panStart, canvasOffset, setCanvasOffset, setPanStart]);
|
||||
|
||||
const stopPanning = useCallback(() => {
|
||||
setIsPanning(false);
|
||||
}, [setIsPanning]);
|
||||
|
||||
const zoomIn = useCallback(() => {
|
||||
setCanvasScale(Math.min(canvasScale * 1.2, 3));
|
||||
}, [canvasScale, setCanvasScale]);
|
||||
|
||||
const zoomOut = useCallback(() => {
|
||||
setCanvasScale(Math.max(canvasScale / 1.2, 0.1));
|
||||
}, [canvasScale, setCanvasScale]);
|
||||
|
||||
const zoomToFit = useCallback(() => {
|
||||
resetView();
|
||||
}, [resetView]);
|
||||
|
||||
const screenToCanvas = useCallback((screenX: number, screenY: number) => {
|
||||
return {
|
||||
x: (screenX - canvasOffset.x) / canvasScale,
|
||||
y: (screenY - canvasOffset.y) / canvasScale
|
||||
};
|
||||
}, [canvasOffset, canvasScale]);
|
||||
|
||||
const canvasToScreen = useCallback((canvasX: number, canvasY: number) => {
|
||||
return {
|
||||
x: canvasX * canvasScale + canvasOffset.x,
|
||||
y: canvasY * canvasScale + canvasOffset.y
|
||||
};
|
||||
}, [canvasOffset, canvasScale]);
|
||||
|
||||
return useMemo(() => ({
|
||||
canvasOffset,
|
||||
canvasScale,
|
||||
isPanning,
|
||||
handleWheel,
|
||||
startPanning,
|
||||
updatePanning,
|
||||
stopPanning,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoomToFit,
|
||||
screenToCanvas,
|
||||
canvasToScreen
|
||||
}), [
|
||||
canvasOffset,
|
||||
canvasScale,
|
||||
isPanning,
|
||||
handleWheel,
|
||||
startPanning,
|
||||
updatePanning,
|
||||
stopPanning,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoomToFit,
|
||||
screenToCanvas,
|
||||
canvasToScreen
|
||||
]);
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import { RefObject } from 'react';
|
||||
import { BehaviorTreeNode, ROOT_NODE_ID } from '../../stores/behaviorTreeStore';
|
||||
|
||||
interface QuickCreateMenuState {
|
||||
visible: boolean;
|
||||
position: { x: number; y: number };
|
||||
searchText: string;
|
||||
selectedIndex: number;
|
||||
mode: 'create' | 'replace';
|
||||
replaceNodeId: string | null;
|
||||
}
|
||||
|
||||
interface UseCanvasMouseEventsParams {
|
||||
canvasRef: RefObject<HTMLDivElement>;
|
||||
canvasOffset: { x: number; y: number };
|
||||
canvasScale: number;
|
||||
connectingFrom: string | null;
|
||||
connectingToPos: { x: number; y: number } | null;
|
||||
isBoxSelecting: boolean;
|
||||
boxSelectStart: { x: number; y: number } | null;
|
||||
boxSelectEnd: { x: number; y: number } | null;
|
||||
nodes: BehaviorTreeNode[];
|
||||
selectedNodeIds: string[];
|
||||
quickCreateMenu: QuickCreateMenuState;
|
||||
setConnectingToPos: (pos: { x: number; y: number } | null) => void;
|
||||
setIsBoxSelecting: (isSelecting: boolean) => void;
|
||||
setBoxSelectStart: (pos: { x: number; y: number } | null) => void;
|
||||
setBoxSelectEnd: (pos: { x: number; y: number } | null) => void;
|
||||
setSelectedNodeIds: (ids: string[]) => void;
|
||||
setSelectedConnection: (connection: { from: string; to: string } | null) => void;
|
||||
setQuickCreateMenu: (menu: QuickCreateMenuState) => void;
|
||||
clearConnecting: () => void;
|
||||
clearBoxSelect: () => void;
|
||||
}
|
||||
|
||||
export function useCanvasMouseEvents(params: UseCanvasMouseEventsParams) {
|
||||
const {
|
||||
canvasRef,
|
||||
canvasOffset,
|
||||
canvasScale,
|
||||
connectingFrom,
|
||||
connectingToPos,
|
||||
isBoxSelecting,
|
||||
boxSelectStart,
|
||||
boxSelectEnd,
|
||||
nodes,
|
||||
selectedNodeIds,
|
||||
quickCreateMenu,
|
||||
setConnectingToPos,
|
||||
setIsBoxSelecting,
|
||||
setBoxSelectStart,
|
||||
setBoxSelectEnd,
|
||||
setSelectedNodeIds,
|
||||
setSelectedConnection,
|
||||
setQuickCreateMenu,
|
||||
clearConnecting,
|
||||
clearBoxSelect
|
||||
} = params;
|
||||
|
||||
const handleCanvasMouseMove = (e: React.MouseEvent) => {
|
||||
if (connectingFrom && canvasRef.current && !quickCreateMenu.visible) {
|
||||
const rect = canvasRef.current.getBoundingClientRect();
|
||||
const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
|
||||
const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
|
||||
setConnectingToPos({
|
||||
x: canvasX,
|
||||
y: canvasY
|
||||
});
|
||||
}
|
||||
|
||||
if (isBoxSelecting && boxSelectStart) {
|
||||
const rect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
|
||||
const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
|
||||
setBoxSelectEnd({ x: canvasX, y: canvasY });
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanvasMouseUp = (e: React.MouseEvent) => {
|
||||
if (quickCreateMenu.visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (connectingFrom && connectingToPos) {
|
||||
setQuickCreateMenu({
|
||||
visible: true,
|
||||
position: {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
},
|
||||
searchText: '',
|
||||
selectedIndex: 0,
|
||||
mode: 'create',
|
||||
replaceNodeId: null
|
||||
});
|
||||
setConnectingToPos(null);
|
||||
return;
|
||||
}
|
||||
|
||||
clearConnecting();
|
||||
|
||||
if (isBoxSelecting && boxSelectStart && boxSelectEnd) {
|
||||
const minX = Math.min(boxSelectStart.x, boxSelectEnd.x);
|
||||
const maxX = Math.max(boxSelectStart.x, boxSelectEnd.x);
|
||||
const minY = Math.min(boxSelectStart.y, boxSelectEnd.y);
|
||||
const maxY = Math.max(boxSelectStart.y, boxSelectEnd.y);
|
||||
|
||||
const selectedInBox = nodes
|
||||
.filter((node: BehaviorTreeNode) => {
|
||||
if (node.id === ROOT_NODE_ID) return false;
|
||||
|
||||
const nodeElement = canvasRef.current?.querySelector(`[data-node-id="${node.id}"]`);
|
||||
if (!nodeElement) {
|
||||
return node.position.x >= minX && node.position.x <= maxX &&
|
||||
node.position.y >= minY && node.position.y <= maxY;
|
||||
}
|
||||
|
||||
const rect = nodeElement.getBoundingClientRect();
|
||||
const canvasRect = canvasRef.current!.getBoundingClientRect();
|
||||
|
||||
const nodeLeft = (rect.left - canvasRect.left - canvasOffset.x) / canvasScale;
|
||||
const nodeRight = (rect.right - canvasRect.left - canvasOffset.x) / canvasScale;
|
||||
const nodeTop = (rect.top - canvasRect.top - canvasOffset.y) / canvasScale;
|
||||
const nodeBottom = (rect.bottom - canvasRect.top - canvasOffset.y) / canvasScale;
|
||||
|
||||
return nodeRight > minX && nodeLeft < maxX && nodeBottom > minY && nodeTop < maxY;
|
||||
})
|
||||
.map((node: BehaviorTreeNode) => node.id);
|
||||
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
const newSet = new Set([...selectedNodeIds, ...selectedInBox]);
|
||||
setSelectedNodeIds(Array.from(newSet));
|
||||
} else {
|
||||
setSelectedNodeIds(selectedInBox);
|
||||
}
|
||||
}
|
||||
|
||||
clearBoxSelect();
|
||||
};
|
||||
|
||||
const handleCanvasMouseDown = (e: React.MouseEvent) => {
|
||||
if (e.button === 0 && !e.altKey) {
|
||||
const rect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
|
||||
const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
|
||||
|
||||
setIsBoxSelecting(true);
|
||||
setBoxSelectStart({ x: canvasX, y: canvasY });
|
||||
setBoxSelectEnd({ x: canvasX, y: canvasY });
|
||||
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
setSelectedNodeIds([]);
|
||||
setSelectedConnection(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handleCanvasMouseMove,
|
||||
handleCanvasMouseUp,
|
||||
handleCanvasMouseDown
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { useRef, useCallback, useMemo, useEffect } from 'react';
|
||||
import { CommandManager } from '../../application/commands/CommandManager';
|
||||
|
||||
/**
|
||||
* 撤销/重做功能 Hook
|
||||
*/
|
||||
export function useCommandHistory() {
|
||||
const commandManagerRef = useRef<CommandManager>(new CommandManager({
|
||||
maxHistorySize: 100,
|
||||
autoMerge: true
|
||||
}));
|
||||
|
||||
const commandManager = commandManagerRef.current;
|
||||
|
||||
const canUndo = useCallback(() => {
|
||||
return commandManager.canUndo();
|
||||
}, [commandManager]);
|
||||
|
||||
const canRedo = useCallback(() => {
|
||||
return commandManager.canRedo();
|
||||
}, [commandManager]);
|
||||
|
||||
const undo = useCallback(() => {
|
||||
if (commandManager.canUndo()) {
|
||||
commandManager.undo();
|
||||
}
|
||||
}, [commandManager]);
|
||||
|
||||
const redo = useCallback(() => {
|
||||
if (commandManager.canRedo()) {
|
||||
commandManager.redo();
|
||||
}
|
||||
}, [commandManager]);
|
||||
|
||||
const getUndoHistory = useCallback(() => {
|
||||
return commandManager.getUndoHistory();
|
||||
}, [commandManager]);
|
||||
|
||||
const getRedoHistory = useCallback(() => {
|
||||
return commandManager.getRedoHistory();
|
||||
}, [commandManager]);
|
||||
|
||||
const clear = useCallback(() => {
|
||||
commandManager.clear();
|
||||
}, [commandManager]);
|
||||
|
||||
// 键盘快捷键
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
const isCtrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
|
||||
|
||||
if (isCtrlOrCmd && e.key === 'z') {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
redo();
|
||||
} else {
|
||||
undo();
|
||||
}
|
||||
} else if (isCtrlOrCmd && e.key === 'y') {
|
||||
e.preventDefault();
|
||||
redo();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [undo, redo]);
|
||||
|
||||
return useMemo(() => ({
|
||||
commandManager,
|
||||
canUndo: canUndo(),
|
||||
canRedo: canRedo(),
|
||||
undo,
|
||||
redo,
|
||||
getUndoHistory,
|
||||
getRedoHistory,
|
||||
clear
|
||||
}), [commandManager, canUndo, canRedo, undo, redo, getUndoHistory, getRedoHistory, clear]);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { ConnectionType } from '../../domain/models/Connection';
|
||||
import { IValidator } from '../../domain/interfaces/IValidator';
|
||||
import { CommandManager } from '../../application/commands/CommandManager';
|
||||
import { TreeStateAdapter } from '../../application/state/BehaviorTreeDataStore';
|
||||
import { AddConnectionUseCase } from '../../application/use-cases/AddConnectionUseCase';
|
||||
import { RemoveConnectionUseCase } from '../../application/use-cases/RemoveConnectionUseCase';
|
||||
|
||||
/**
|
||||
* 连接操作 Hook
|
||||
*/
|
||||
export function useConnectionOperations(
|
||||
validator: IValidator,
|
||||
commandManager: CommandManager
|
||||
) {
|
||||
const treeState = useMemo(() => new TreeStateAdapter(), []);
|
||||
|
||||
const addConnectionUseCase = useMemo(
|
||||
() => new AddConnectionUseCase(commandManager, treeState, validator),
|
||||
[commandManager, treeState, validator]
|
||||
);
|
||||
|
||||
const removeConnectionUseCase = useMemo(
|
||||
() => new RemoveConnectionUseCase(commandManager, treeState),
|
||||
[commandManager, treeState]
|
||||
);
|
||||
|
||||
const addConnection = useCallback((
|
||||
from: string,
|
||||
to: string,
|
||||
connectionType: ConnectionType = 'node',
|
||||
fromProperty?: string,
|
||||
toProperty?: string
|
||||
) => {
|
||||
try {
|
||||
return addConnectionUseCase.execute(from, to, connectionType, fromProperty, toProperty);
|
||||
} catch (error) {
|
||||
console.error('添加连接失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}, [addConnectionUseCase]);
|
||||
|
||||
const removeConnection = useCallback((
|
||||
from: string,
|
||||
to: string,
|
||||
fromProperty?: string,
|
||||
toProperty?: string
|
||||
) => {
|
||||
try {
|
||||
removeConnectionUseCase.execute(from, to, fromProperty, toProperty);
|
||||
} catch (error) {
|
||||
console.error('移除连接失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}, [removeConnectionUseCase]);
|
||||
|
||||
return useMemo(() => ({
|
||||
addConnection,
|
||||
removeConnection
|
||||
}), [addConnection, removeConnection]);
|
||||
}
|
||||
129
packages/editor-app/src/presentation/hooks/useDropHandler.ts
Normal file
129
packages/editor-app/src/presentation/hooks/useDropHandler.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import { useState, RefObject } from 'react';
|
||||
import { NodeTemplate, NodeType } from '@esengine/behavior-tree';
|
||||
import { Position } from '../../domain/value-objects/Position';
|
||||
import { useNodeOperations } from './useNodeOperations';
|
||||
|
||||
interface DraggedVariableData {
|
||||
variableName: string;
|
||||
}
|
||||
|
||||
interface UseDropHandlerParams {
|
||||
canvasRef: RefObject<HTMLDivElement>;
|
||||
canvasOffset: { x: number; y: number };
|
||||
canvasScale: number;
|
||||
nodeOperations: ReturnType<typeof useNodeOperations>;
|
||||
onNodeCreate?: (template: NodeTemplate, position: { x: number; y: number }) => void;
|
||||
}
|
||||
|
||||
export function useDropHandler(params: UseDropHandlerParams) {
|
||||
const {
|
||||
canvasRef,
|
||||
canvasOffset,
|
||||
canvasScale,
|
||||
nodeOperations,
|
||||
onNodeCreate
|
||||
} = params;
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
try {
|
||||
const rect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
const position = {
|
||||
x: (e.clientX - rect.left - canvasOffset.x) / canvasScale,
|
||||
y: (e.clientY - rect.top - canvasOffset.y) / canvasScale
|
||||
};
|
||||
|
||||
const blackboardVariableData = e.dataTransfer.getData('application/blackboard-variable');
|
||||
if (blackboardVariableData) {
|
||||
const variableData = JSON.parse(blackboardVariableData) as DraggedVariableData;
|
||||
|
||||
const variableTemplate: NodeTemplate = {
|
||||
type: NodeType.Action,
|
||||
displayName: variableData.variableName,
|
||||
category: 'Blackboard Variable',
|
||||
icon: 'Database',
|
||||
description: `Blackboard variable: ${variableData.variableName}`,
|
||||
color: '#9c27b0',
|
||||
defaultConfig: {
|
||||
nodeType: 'blackboard-variable',
|
||||
variableName: variableData.variableName
|
||||
},
|
||||
properties: [
|
||||
{
|
||||
name: 'variableName',
|
||||
label: '变量名',
|
||||
type: 'variable',
|
||||
defaultValue: variableData.variableName,
|
||||
description: '黑板变量的名称',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
nodeOperations.createNode(
|
||||
variableTemplate,
|
||||
new Position(position.x, position.y),
|
||||
{
|
||||
nodeType: 'blackboard-variable',
|
||||
variableName: variableData.variableName
|
||||
}
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
let templateData = e.dataTransfer.getData('application/behavior-tree-node');
|
||||
if (!templateData) {
|
||||
templateData = e.dataTransfer.getData('text/plain');
|
||||
}
|
||||
if (!templateData) {
|
||||
return;
|
||||
}
|
||||
|
||||
const template = JSON.parse(templateData) as NodeTemplate;
|
||||
|
||||
nodeOperations.createNode(
|
||||
template,
|
||||
new Position(position.x, position.y),
|
||||
template.defaultConfig
|
||||
);
|
||||
|
||||
onNodeCreate?.(template, position);
|
||||
} catch (error) {
|
||||
console.error('Failed to create node:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
if (!isDragging) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
if (e.currentTarget === e.target) {
|
||||
setIsDragging(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnter = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return {
|
||||
isDragging,
|
||||
handleDrop,
|
||||
handleDragOver,
|
||||
handleDragLeave,
|
||||
handleDragEnter
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { ask } from '@tauri-apps/plugin-dialog';
|
||||
import { BehaviorTreeNode } from '../../stores/behaviorTreeStore';
|
||||
import { Node } from '../../domain/models/Node';
|
||||
import { Position } from '../../domain/value-objects/Position';
|
||||
import { NodeTemplate } from '@esengine/behavior-tree';
|
||||
|
||||
interface UseEditorHandlersParams {
|
||||
isDraggingNode: boolean;
|
||||
selectedNodeIds: string[];
|
||||
setSelectedNodeIds: (ids: string[]) => void;
|
||||
setNodes: (nodes: Node[]) => void;
|
||||
setConnections: (connections: any[]) => void;
|
||||
resetView: () => void;
|
||||
triggerForceUpdate: () => void;
|
||||
onNodeSelect?: (node: BehaviorTreeNode) => void;
|
||||
rootNodeId: string;
|
||||
rootNodeTemplate: NodeTemplate;
|
||||
}
|
||||
|
||||
export function useEditorHandlers(params: UseEditorHandlersParams) {
|
||||
const {
|
||||
isDraggingNode,
|
||||
selectedNodeIds,
|
||||
setSelectedNodeIds,
|
||||
setNodes,
|
||||
setConnections,
|
||||
resetView,
|
||||
triggerForceUpdate,
|
||||
onNodeSelect,
|
||||
rootNodeId,
|
||||
rootNodeTemplate
|
||||
} = params;
|
||||
|
||||
const handleNodeClick = (e: React.MouseEvent, node: BehaviorTreeNode) => {
|
||||
if (isDraggingNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
if (selectedNodeIds.includes(node.id)) {
|
||||
setSelectedNodeIds(selectedNodeIds.filter((id: string) => id !== node.id));
|
||||
} else {
|
||||
setSelectedNodeIds([...selectedNodeIds, node.id]);
|
||||
}
|
||||
} else {
|
||||
setSelectedNodeIds([node.id]);
|
||||
}
|
||||
onNodeSelect?.(node);
|
||||
};
|
||||
|
||||
const handleResetView = () => {
|
||||
resetView();
|
||||
requestAnimationFrame(() => {
|
||||
triggerForceUpdate();
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearCanvas = async () => {
|
||||
const confirmed = await ask('确定要清空画布吗？此操作不可撤销。', {
|
||||
title: '清空画布',
|
||||
kind: 'warning'
|
||||
});
|
||||
|
||||
if (confirmed) {
|
||||
setNodes([
|
||||
new Node(
|
||||
rootNodeId,
|
||||
rootNodeTemplate,
|
||||
{ nodeType: 'root' },
|
||||
new Position(400, 100),
|
||||
[]
|
||||
)
|
||||
]);
|
||||
setConnections([]);
|
||||
setSelectedNodeIds([]);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handleNodeClick,
|
||||
handleResetView,
|
||||
handleClearCanvas
|
||||
};
|
||||
}
|
||||
18
packages/editor-app/src/presentation/hooks/useEditorState.ts
Normal file
18
packages/editor-app/src/presentation/hooks/useEditorState.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import { BehaviorTreeExecutor } from '../../utils/BehaviorTreeExecutor';
|
||||
|
||||
export function useEditorState() {
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
const stopExecutionRef = useRef<(() => void) | null>(null);
|
||||
const executorRef = useRef<BehaviorTreeExecutor | null>(null);
|
||||
|
||||
const [selectedConnection, setSelectedConnection] = useState<{from: string; to: string} | null>(null);
|
||||
|
||||
return {
|
||||
canvasRef,
|
||||
stopExecutionRef,
|
||||
executorRef,
|
||||
selectedConnection,
|
||||
setSelectedConnection
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { ExecutionController, ExecutionMode } from '../../application/services/ExecutionController';
|
||||
import { BlackboardManager } from '../../application/services/BlackboardManager';
|
||||
import { BehaviorTreeNode, Connection } from '../../stores/behaviorTreeStore';
|
||||
import { ExecutionLog } from '../../utils/BehaviorTreeExecutor';
|
||||
import { BlackboardValue } from '../../domain/models/Blackboard';
|
||||
|
||||
type BlackboardVariables = Record<string, BlackboardValue>;
|
||||
|
||||
interface UseExecutionControllerParams {
|
||||
rootNodeId: string;
|
||||
projectPath: string | null;
|
||||
blackboardVariables: BlackboardVariables;
|
||||
nodes: BehaviorTreeNode[];
|
||||
connections: Connection[];
|
||||
initialBlackboardVariables: BlackboardVariables;
|
||||
onBlackboardUpdate: (variables: BlackboardVariables) => void;
|
||||
onInitialBlackboardSave: (variables: BlackboardVariables) => void;
|
||||
onExecutingChange: (isExecuting: boolean) => void;
|
||||
}
|
||||
|
||||
export function useExecutionController(params: UseExecutionControllerParams) {
|
||||
const {
|
||||
rootNodeId,
|
||||
projectPath,
|
||||
blackboardVariables,
|
||||
nodes,
|
||||
connections,
|
||||
onBlackboardUpdate,
|
||||
onInitialBlackboardSave,
|
||||
onExecutingChange
|
||||
} = params;
|
||||
|
||||
const [executionMode, setExecutionMode] = useState<ExecutionMode>('idle');
|
||||
const [executionLogs, setExecutionLogs] = useState<ExecutionLog[]>([]);
|
||||
const [executionSpeed, setExecutionSpeed] = useState<number>(1.0);
|
||||
const [tickCount, setTickCount] = useState(0);
|
||||
|
||||
const controller = useMemo(() => {
|
||||
return new ExecutionController({
|
||||
rootNodeId,
|
||||
projectPath,
|
||||
onLogsUpdate: setExecutionLogs,
|
||||
onBlackboardUpdate,
|
||||
onTickCountUpdate: setTickCount
|
||||
});
|
||||
}, [rootNodeId, projectPath]);
|
||||
|
||||
const blackboardManager = useMemo(() => new BlackboardManager(), []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
controller.destroy();
|
||||
};
|
||||
}, [controller]);
|
||||
|
||||
useEffect(() => {
|
||||
controller.setConnections(connections);
|
||||
}, [connections, controller]);
|
||||
|
||||
useEffect(() => {
|
||||
if (executionMode === 'idle') return;
|
||||
|
||||
const executorVars = controller.getBlackboardVariables();
|
||||
|
||||
Object.entries(blackboardVariables).forEach(([key, value]) => {
|
||||
if (executorVars[key] !== value) {
|
||||
controller.updateBlackboardVariable(key, value);
|
||||
}
|
||||
});
|
||||
}, [blackboardVariables, executionMode, controller]);
|
||||
|
||||
const handlePlay = async () => {
|
||||
try {
|
||||
blackboardManager.setInitialVariables(blackboardVariables);
|
||||
blackboardManager.setCurrentVariables(blackboardVariables);
|
||||
onInitialBlackboardSave(blackboardManager.getInitialVariables());
|
||||
onExecutingChange(true);
|
||||
|
||||
setExecutionMode('running');
|
||||
await controller.play(nodes, blackboardVariables, connections);
|
||||
} catch (error) {
|
||||
console.error('Failed to start execution:', error);
|
||||
setExecutionMode('idle');
|
||||
onExecutingChange(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePause = async () => {
|
||||
try {
|
||||
await controller.pause();
|
||||
const newMode = controller.getMode();
|
||||
setExecutionMode(newMode);
|
||||
} catch (error) {
|
||||
console.error('Failed to pause/resume execution:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStop = async () => {
|
||||
try {
|
||||
await controller.stop();
|
||||
setExecutionMode('idle');
|
||||
setTickCount(0);
|
||||
|
||||
const restoredVars = blackboardManager.restoreInitialVariables();
|
||||
onBlackboardUpdate(restoredVars);
|
||||
onExecutingChange(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to stop execution:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStep = () => {
|
||||
controller.step();
|
||||
setExecutionMode('step');
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
try {
|
||||
await controller.reset();
|
||||
setExecutionMode('idle');
|
||||
setTickCount(0);
|
||||
} catch (error) {
|
||||
console.error('Failed to reset execution:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSpeedChange = (speed: number) => {
|
||||
setExecutionSpeed(speed);
|
||||
controller.setSpeed(speed);
|
||||
};
|
||||
|
||||
return {
|
||||
executionMode,
|
||||
executionLogs,
|
||||
executionSpeed,
|
||||
tickCount,
|
||||
handlePlay,
|
||||
handlePause,
|
||||
handleStop,
|
||||
handleStep,
|
||||
handleReset,
|
||||
handleSpeedChange,
|
||||
setExecutionLogs,
|
||||
controller,
|
||||
blackboardManager
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Connection, ROOT_NODE_ID } from '../../stores/behaviorTreeStore';
|
||||
import { useNodeOperations } from './useNodeOperations';
|
||||
import { useConnectionOperations } from './useConnectionOperations';
|
||||
|
||||
interface UseKeyboardShortcutsParams {
|
||||
selectedNodeIds: string[];
|
||||
selectedConnection: { from: string; to: string } | null;
|
||||
connections: Connection[];
|
||||
nodeOperations: ReturnType<typeof useNodeOperations>;
|
||||
connectionOperations: ReturnType<typeof useConnectionOperations>;
|
||||
setSelectedNodeIds: (ids: string[]) => void;
|
||||
setSelectedConnection: (connection: { from: string; to: string } | null) => void;
|
||||
}
|
||||
|
||||
export function useKeyboardShortcuts(params: UseKeyboardShortcutsParams) {
|
||||
const {
|
||||
selectedNodeIds,
|
||||
selectedConnection,
|
||||
connections,
|
||||
nodeOperations,
|
||||
connectionOperations,
|
||||
setSelectedNodeIds,
|
||||
setSelectedConnection
|
||||
} = params;
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const activeElement = document.activeElement;
|
||||
const isEditingText = activeElement instanceof HTMLInputElement ||
|
||||
activeElement instanceof HTMLTextAreaElement ||
|
||||
activeElement instanceof HTMLSelectElement ||
|
||||
(activeElement as HTMLElement)?.isContentEditable;
|
||||
|
||||
if (isEditingText) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
e.preventDefault();
|
||||
|
||||
if (selectedConnection) {
|
||||
const conn = connections.find(
|
||||
(c: Connection) => c.from === selectedConnection.from && c.to === selectedConnection.to
|
||||
);
|
||||
if (conn) {
|
||||
connectionOperations.removeConnection(
|
||||
conn.from,
|
||||
conn.to,
|
||||
conn.fromProperty,
|
||||
conn.toProperty
|
||||
);
|
||||
}
|
||||
|
||||
setSelectedConnection(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedNodeIds.length > 0) {
|
||||
const nodesToDelete = selectedNodeIds.filter((id: string) => id !== ROOT_NODE_ID);
|
||||
if (nodesToDelete.length > 0) {
|
||||
nodeOperations.deleteNodes(nodesToDelete);
|
||||
setSelectedNodeIds([]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [selectedNodeIds, selectedConnection, nodeOperations, connectionOperations, connections, setSelectedNodeIds, setSelectedConnection]);
|
||||
}
|
||||
161
packages/editor-app/src/presentation/hooks/useNodeDrag.ts
Normal file
161
packages/editor-app/src/presentation/hooks/useNodeDrag.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
import { useState, RefObject } from 'react';
|
||||
import { BehaviorTreeNode, ROOT_NODE_ID } from '../../stores/behaviorTreeStore';
|
||||
import { Position } from '../../domain/value-objects/Position';
|
||||
import { useNodeOperations } from './useNodeOperations';
|
||||
|
||||
interface UseNodeDragParams {
|
||||
canvasRef: RefObject<HTMLDivElement>;
|
||||
canvasOffset: { x: number; y: number };
|
||||
canvasScale: number;
|
||||
nodes: BehaviorTreeNode[];
|
||||
selectedNodeIds: string[];
|
||||
draggingNodeId: string | null;
|
||||
dragStartPositions: Map<string, { x: number; y: number }>;
|
||||
isDraggingNode: boolean;
|
||||
dragDelta: { dx: number; dy: number };
|
||||
nodeOperations: ReturnType<typeof useNodeOperations>;
|
||||
setSelectedNodeIds: (ids: string[]) => 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;
|
||||
setIsBoxSelecting: (isSelecting: boolean) => void;
|
||||
setBoxSelectStart: (pos: { x: number; y: number } | null) => void;
|
||||
setBoxSelectEnd: (pos: { x: number; y: number } | null) => void;
|
||||
sortChildrenByPosition: () => void;
|
||||
}
|
||||
|
||||
export function useNodeDrag(params: UseNodeDragParams) {
|
||||
const {
|
||||
canvasRef,
|
||||
canvasOffset,
|
||||
canvasScale,
|
||||
nodes,
|
||||
selectedNodeIds,
|
||||
draggingNodeId,
|
||||
dragStartPositions,
|
||||
isDraggingNode,
|
||||
dragDelta,
|
||||
nodeOperations,
|
||||
setSelectedNodeIds,
|
||||
startDragging,
|
||||
stopDragging,
|
||||
setIsDraggingNode,
|
||||
setDragDelta,
|
||||
setIsBoxSelecting,
|
||||
setBoxSelectStart,
|
||||
setBoxSelectEnd,
|
||||
sortChildrenByPosition
|
||||
} = params;
|
||||
|
||||
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
||||
|
||||
const handleNodeMouseDown = (e: React.MouseEvent, nodeId: string) => {
|
||||
if (e.button !== 0) return;
|
||||
|
||||
if (nodeId === ROOT_NODE_ID) return;
|
||||
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.getAttribute('data-port')) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
|
||||
setIsBoxSelecting(false);
|
||||
setBoxSelectStart(null);
|
||||
setBoxSelectEnd(null);
|
||||
const node = nodes.find((n: BehaviorTreeNode) => n.id === nodeId);
|
||||
if (!node) return;
|
||||
|
||||
const rect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
|
||||
const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
|
||||
|
||||
let nodesToDrag: string[];
|
||||
if (selectedNodeIds.includes(nodeId)) {
|
||||
nodesToDrag = selectedNodeIds;
|
||||
} else {
|
||||
nodesToDrag = [nodeId];
|
||||
setSelectedNodeIds([nodeId]);
|
||||
}
|
||||
|
||||
const startPositions = new Map<string, { x: number; y: number }>();
|
||||
nodesToDrag.forEach((id: string) => {
|
||||
const n = nodes.find((node: BehaviorTreeNode) => node.id === id);
|
||||
if (n) {
|
||||
startPositions.set(id, { x: n.position.x, y: n.position.y });
|
||||
}
|
||||
});
|
||||
|
||||
startDragging(nodeId, startPositions);
|
||||
setDragOffset({
|
||||
x: canvasX - node.position.x,
|
||||
y: canvasY - node.position.y
|
||||
});
|
||||
};
|
||||
|
||||
const handleNodeMouseMove = (e: React.MouseEvent) => {
|
||||
if (!draggingNodeId) return;
|
||||
|
||||
if (!isDraggingNode) {
|
||||
setIsDraggingNode(true);
|
||||
}
|
||||
|
||||
const rect = canvasRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
|
||||
const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
|
||||
|
||||
const newX = canvasX - dragOffset.x;
|
||||
const newY = canvasY - dragOffset.y;
|
||||
|
||||
const draggedNodeStartPos = dragStartPositions.get(draggingNodeId);
|
||||
if (!draggedNodeStartPos) return;
|
||||
|
||||
const deltaX = newX - draggedNodeStartPos.x;
|
||||
const deltaY = newY - draggedNodeStartPos.y;
|
||||
|
||||
setDragDelta({ dx: deltaX, dy: deltaY });
|
||||
};
|
||||
|
||||
const handleNodeMouseUp = () => {
|
||||
if (!draggingNodeId) return;
|
||||
|
||||
if (dragDelta.dx !== 0 || dragDelta.dy !== 0) {
|
||||
const moves: Array<{ nodeId: string; position: Position }> = [];
|
||||
dragStartPositions.forEach((startPos: { x: number; y: number }, nodeId: string) => {
|
||||
moves.push({
|
||||
nodeId,
|
||||
position: new Position(
|
||||
startPos.x + dragDelta.dx,
|
||||
startPos.y + dragDelta.dy
|
||||
)
|
||||
});
|
||||
});
|
||||
nodeOperations.moveNodes(moves);
|
||||
|
||||
setTimeout(() => {
|
||||
sortChildrenByPosition();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
setDragDelta({ dx: 0, dy: 0 });
|
||||
|
||||
stopDragging();
|
||||
|
||||
setTimeout(() => {
|
||||
setIsDraggingNode(false);
|
||||
}, 10);
|
||||
};
|
||||
|
||||
return {
|
||||
handleNodeMouseDown,
|
||||
handleNodeMouseMove,
|
||||
handleNodeMouseUp,
|
||||
dragOffset
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { NodeTemplate } from '@esengine/behavior-tree';
|
||||
import { Position } from '../../domain/value-objects/Position';
|
||||
import { INodeFactory } from '../../domain/interfaces/INodeFactory';
|
||||
import { IValidator } from '../../domain/interfaces/IValidator';
|
||||
import { CommandManager } from '../../application/commands/CommandManager';
|
||||
import { TreeStateAdapter } from '../../application/state/BehaviorTreeDataStore';
|
||||
import { CreateNodeUseCase } from '../../application/use-cases/CreateNodeUseCase';
|
||||
import { DeleteNodeUseCase } from '../../application/use-cases/DeleteNodeUseCase';
|
||||
import { MoveNodeUseCase } from '../../application/use-cases/MoveNodeUseCase';
|
||||
import { UpdateNodeDataUseCase } from '../../application/use-cases/UpdateNodeDataUseCase';
|
||||
|
||||
/**
|
||||
* 节点操作 Hook
|
||||
*/
|
||||
export function useNodeOperations(
|
||||
nodeFactory: INodeFactory,
|
||||
validator: IValidator,
|
||||
commandManager: CommandManager
|
||||
) {
|
||||
const treeState = useMemo(() => new TreeStateAdapter(), []);
|
||||
|
||||
const createNodeUseCase = useMemo(
|
||||
() => new CreateNodeUseCase(nodeFactory, commandManager, treeState),
|
||||
[nodeFactory, commandManager, treeState]
|
||||
);
|
||||
|
||||
const deleteNodeUseCase = useMemo(
|
||||
() => new DeleteNodeUseCase(commandManager, treeState),
|
||||
[commandManager, treeState]
|
||||
);
|
||||
|
||||
const moveNodeUseCase = useMemo(
|
||||
() => new MoveNodeUseCase(commandManager, treeState),
|
||||
[commandManager, treeState]
|
||||
);
|
||||
|
||||
const updateNodeDataUseCase = useMemo(
|
||||
() => new UpdateNodeDataUseCase(commandManager, treeState),
|
||||
[commandManager, treeState]
|
||||
);
|
||||
|
||||
const createNode = useCallback((
|
||||
template: NodeTemplate,
|
||||
position: Position,
|
||||
data?: Record<string, unknown>
|
||||
) => {
|
||||
return createNodeUseCase.execute(template, position, data);
|
||||
}, [createNodeUseCase]);
|
||||
|
||||
const createNodeByType = useCallback((
|
||||
nodeType: string,
|
||||
position: Position,
|
||||
data?: Record<string, unknown>
|
||||
) => {
|
||||
return createNodeUseCase.executeByType(nodeType, position, data);
|
||||
}, [createNodeUseCase]);
|
||||
|
||||
const deleteNode = useCallback((nodeId: string) => {
|
||||
deleteNodeUseCase.execute(nodeId);
|
||||
}, [deleteNodeUseCase]);
|
||||
|
||||
const deleteNodes = useCallback((nodeIds: string[]) => {
|
||||
deleteNodeUseCase.executeBatch(nodeIds);
|
||||
}, [deleteNodeUseCase]);
|
||||
|
||||
const moveNode = useCallback((nodeId: string, position: Position) => {
|
||||
moveNodeUseCase.execute(nodeId, position);
|
||||
}, [moveNodeUseCase]);
|
||||
|
||||
const moveNodes = useCallback((moves: Array<{ nodeId: string; position: Position }>) => {
|
||||
moveNodeUseCase.executeBatch(moves);
|
||||
}, [moveNodeUseCase]);
|
||||
|
||||
const updateNodeData = useCallback((nodeId: string, data: Record<string, unknown>) => {
|
||||
updateNodeDataUseCase.execute(nodeId, data);
|
||||
}, [updateNodeDataUseCase]);
|
||||
|
||||
return useMemo(() => ({
|
||||
createNode,
|
||||
createNodeByType,
|
||||
deleteNode,
|
||||
deleteNodes,
|
||||
moveNode,
|
||||
moveNodes,
|
||||
updateNodeData
|
||||
}), [createNode, createNodeByType, deleteNode, deleteNodes, moveNode, moveNodes, updateNodeData]);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { BehaviorTreeNode } from '../../stores/behaviorTreeStore';
|
||||
import { ExecutionMode } from '../../application/services/ExecutionController';
|
||||
|
||||
interface UseNodeTrackingParams {
|
||||
nodes: BehaviorTreeNode[];
|
||||
executionMode: ExecutionMode;
|
||||
}
|
||||
|
||||
export function useNodeTracking(params: UseNodeTrackingParams) {
|
||||
const { nodes, executionMode } = params;
|
||||
|
||||
const [uncommittedNodeIds, setUncommittedNodeIds] = useState<Set<string>>(new Set());
|
||||
const activeNodeIdsRef = useRef<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
if (executionMode === 'idle') {
|
||||
setUncommittedNodeIds(new Set());
|
||||
activeNodeIdsRef.current = new Set(nodes.map((n) => n.id));
|
||||
} else if (executionMode === 'running' || executionMode === 'paused') {
|
||||
const currentNodeIds = new Set(nodes.map((n) => n.id));
|
||||
const newNodeIds = new Set<string>();
|
||||
|
||||
currentNodeIds.forEach((id) => {
|
||||
if (!activeNodeIdsRef.current.has(id)) {
|
||||
newNodeIds.add(id);
|
||||
}
|
||||
});
|
||||
|
||||
if (newNodeIds.size > 0) {
|
||||
setUncommittedNodeIds((prev) => new Set([...prev, ...newNodeIds]));
|
||||
}
|
||||
}
|
||||
}, [nodes, executionMode]);
|
||||
|
||||
return {
|
||||
uncommittedNodeIds
|
||||
};
|
||||
}
|
||||
182
packages/editor-app/src/presentation/hooks/usePortConnection.ts
Normal file
182
packages/editor-app/src/presentation/hooks/usePortConnection.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import { RefObject } from 'react';
|
||||
import { BehaviorTreeNode, Connection, ROOT_NODE_ID } from '../../stores/behaviorTreeStore';
|
||||
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,
|
||||
connectingFrom,
|
||||
connectingFromProperty,
|
||||
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();
|
||||
if (!connectingFrom) {
|
||||
clearConnecting();
|
||||
return;
|
||||
}
|
||||
|
||||
if (connectingFrom === 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 = connectingFrom;
|
||||
let actualTo = nodeId;
|
||||
let actualFromProperty = connectingFromProperty;
|
||||
let actualToProperty = propertyName;
|
||||
|
||||
const needReverse =
|
||||
(fromPortType === 'node-input' || fromPortType === 'property-input') &&
|
||||
(toPortType === 'node-output' || toPortType === 'variable-output');
|
||||
|
||||
if (needReverse) {
|
||||
actualFrom = nodeId;
|
||||
actualTo = connectingFrom;
|
||||
actualFromProperty = propertyName || null;
|
||||
actualToProperty = connectingFromProperty ?? 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) => {
|
||||
if (connectingFrom && connectingFrom !== nodeId) {
|
||||
handlePortMouseUp(e, nodeId);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handlePortMouseDown,
|
||||
handlePortMouseUp,
|
||||
handleNodeMouseUpForConnection
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user