ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

找不到区域拖拽状态

Browse Source
This commit is contained in:
zqm
2025-12-26 14:59:20 +08:00
parent 7f2f31156f
commit e89d3254e8
3 changed files with 1041 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -102,55 +102,6 @@ const mainAreaResizeBars = ref([])
// 检查主区域内是否有其他Area（简化版）
const hasAreasInMainContent = ref(false)
// 代理到事件处理器的方法
const onPanelDragStart = (areaId, event) => {
dragStateActions.onPanelDragStart(areaId, event);
};
const onPanelDragMove = (areaId, event) => {
dragStateActions.onPanelDragMove(areaId, event);
};
const onPanelDragEnd = () => {
dragStateActions.onPanelDragEnd();
};
const onPanelDragStartFromTabPage = (event) => {
dragStateActions.onPanelDragStartFromTabPage(event);
};
const onPanelDragMoveFromTabPage = (event) => {
dragStateActions.onPanelDragMoveFromTabPage(event);
};
const onPanelDragEndFromTabPage = () => {
dragStateActions.onPanelDragEndFromTabPage();
};
const onAreaDragStart = (event) => {
dragStateActions.onAreaDragStart(event);
};
const onAreaDragMove = (event) => {
dragStateActions.onAreaDragMove(event);
};
const onAreaDragEnd = (event) => {
dragStateActions.onAreaDragEnd(event);
};
const onTabDragStart = (event) => {
dragStateActions.onTabDragStart(event);
};
const onTabDragMove = (event) => {
dragStateActions.onTabDragMove(event);
};
const onTabDragEnd = () => {
dragStateActions.onTabDragEnd();
};
// Area相关事件处理
const onCloseFloatingArea = (event) => {
const id = event.areaId;
@@ -289,9 +240,6 @@ const setupEventListeners = () => {
const unsubscribeFunctions = [];
// Area相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_START, onAreaDragStart, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_MOVE, onAreaDragMove, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_END, onAreaDragEnd, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave, { componentId: 'dock-layout' }));
@@ -300,9 +248,6 @@ const setupEventListeners = () => {
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_START, onTabDragStart, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_MOVE, onTabDragMove, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_END, onTabDragEnd, { componentId: 'dock-layout' }));
// Panel相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'), { componentId: 'dock-layout' }));
@@ -310,12 +255,6 @@ const setupEventListeners = () => {
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'), { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, onPanelDragStartFromTabPage, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, onPanelDragMoveFromTabPage, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, onPanelDragEndFromTabPage, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync, { componentId: 'dock-layout' }));
// Resize相关事件

1081
AutoRobot/Windows/Robot/Web/src/DockLayout/README.md
View File

File diff suppressed because it is too large Load Diff

61
AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
View File

@@ -610,18 +610,22 @@ class DragStateManager {
try {
const { eventType = data.type, dragId, componentType, sourceElement } = data;
console.log('🔍 _onDragEvent 接收到的数据:', { eventType, dragId, componentType, data });
// 从事件数据中提取 dragId，如果没有则根据组件类型推断
let actualDragId = dragId;
if (!actualDragId) {
if (data.panelId) {
actualDragId = `panel_${data.panelId}_${data.timestamp || Date.now()}`;
actualDragId = `panel_${data.panelId}_${data.timestamp || Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
} else if (data.tabIndex !== undefined) {
actualDragId = `tabpage_${data.tabId}_${data.tabIndex}_${data.timestamp || Date.now()}`;
actualDragId = `tabpage_${data.tabId}_${data.tabIndex}_${data.timestamp || Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
} else if (data.areaId) {
actualDragId = `area_${data.areaId}_${data.timestamp || Date.now()}`;
actualDragId = `area_${data.areaId}_${data.timestamp || Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
}
}
console.log('🔍 _onDragEvent 处理后的 dragId:', { originalDragId: dragId, actualDragId });
// 推断组件类型
let actualComponentType = componentType;
if (!actualComponentType) {
@@ -686,9 +690,19 @@ class DragStateManager {
async _handleDragStart(data) {
const { dragId, componentType, sourceElement, position, options = {} } = data;
// 如果没有提供 dragId，生成一个唯一的 dragId
console.log('🔍 _handleDragStart 接收到的数据:', { dragId, componentType, position, data });
// 使用传入的 dragId，如果没有则生成一个唯一的 dragId
const actualDragId = dragId || this._generateDragId(componentType);
console.log('🔍 _handleDragStart 处理后的 dragId:', { originalDragId: dragId, actualDragId });
// 检查是否已存在相同 dragId 的拖拽状态
if (this.activeDrags.has(actualDragId)) {
console.log(`⚠️ 拖拽状态已存在: ${actualDragId}，跳过创建`);
return actualDragId;
}
// 创建拖拽状态
const dragState = new DragState(actualDragId, componentType, sourceElement, options);
dragState.startPosition = { ...position };
@@ -1277,6 +1291,18 @@ class DragStateManager {
dragId,
reason: 'manager_cancelled'
});
// 立即从活跃拖拽中移除，不依赖异步事件处理
this.activeDrags.delete(dragId);
// 清除反馈
this._hideDragFeedback(dragId);
// 从冲突检测器注销
this.conflictDetector.unregisterDrag(dragId);
// 清理拖拽目标
this.dragTargets.delete(dragId);
}
});
@@ -1295,6 +1321,7 @@ class DragStateManager {
element,
type = 'panel',
position = { x: 0, y: 0 },
dragId: incomingDragId,
...options
} = eventData;
@@ -1304,8 +1331,8 @@ class DragStateManager {
this.cancelAllDrags();
}
// 创建拖拽ID
const dragId = `panel-${panelId}-${Date.now()}`;
// 使用传入的 dragId，如果没有则生成新的
const dragId = incomingDragId || `panel-${panelId}-${Date.now()}`;
// 创建拖拽状态
const dragState = new DragState(dragId, DRAG_AREA_TYPES.PANEL, element, {
@@ -1487,11 +1514,12 @@ class DragStateManager {
tabPageId,
element,
tabIndex,
dragId: incomingDragId,
...options
} = eventData;
// 创建拖拽ID
const dragId = `tabpage-${tabPageId}-${Date.now()}`;
// 使用传入的 dragId，如果没有则生成新的
const dragId = incomingDragId || `tabpage-${tabPageId}-${Date.now()}`;
// 创建拖拽状态
const dragState = new DragState(dragId, DRAG_AREA_TYPES.TABPAGE, element, {
@@ -1767,17 +1795,19 @@ class DragStateManager {
element,
type = 'area',
position = { x: 0, y: 0 },
dragId: incomingDragId,
...options
} = eventData;
// 检查是否有其他活跃拖拽
if (this.activeDrags.size > 0) {
console.warn('检测到其他活跃拖拽，暂停之前的拖拽');
this.cancelAllDrags();
console.warn('检测到其他活跃拖拽，跳过创建新拖拽状态');
// 如果已经有活跃拖拽，直接返回现有拖拽的dragId
return Array.from(this.activeDrags.keys())[0];
}
// 创建拖拽ID
const dragId = `area-${areaId}-${Date.now()}`;
// 使用传入的 dragId，如果没有则生成新的
const dragId = incomingDragId || `area-${areaId}-${Date.now()}`;
// 创建拖拽状态
const dragState = new DragState(dragId, DRAG_AREA_TYPES.AREA, element, {
@@ -1900,10 +1930,12 @@ class DragStateManager {
...options
} = eventData;
console.log('🔍 onAreaDragEnd 接收到的数据:', { dragId, areaId, eventData });
// 查找拖拽状态
const activeDrag = this._findDragByIdOrAreaId(dragId, areaId);
if (!activeDrag) {
console.warn('找不到区域拖拽状态:', areaId);
console.warn('找不到区域拖拽状态:', { dragId, areaId, activeDrags: Array.from(this.activeDrags.keys()) });
return false;
}
@@ -1950,7 +1982,7 @@ class DragStateManager {
}
// 立即创建单例实例，避免并发初始化问题
const dragStateManager = new DragStateManager();
let dragStateManager = new DragStateManager();
// 便捷操作函数
export const dragStateActions = {
@@ -2097,7 +2129,6 @@ export const dragStateActions = {
} catch (e) {
console.warn('销毁拖拽状态管理器时出错:', e);
}
dragStateManager = null;
console.log('🗑️ 拖拽状态管理器已销毁');
}
}