使用全局事件总线
This commit is contained in:
zqm
@@ -1572,6 +1572,29 @@ class DragStateManager {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据ID或Area ID查找拖拽状态
|
||||
* @private
|
||||
* @param {string} dragId - 拖拽ID
|
||||
* @param {string} areaId - Area ID
|
||||
* @returns {Object|null} 拖拽状态
|
||||
*/
|
||||
_findDragByIdOrAreaId(dragId, areaId) {
|
||||
// 首先尝试通过dragId查找
|
||||
if (dragId && this.activeDrags.has(dragId)) {
|
||||
return { dragId, dragState: this.activeDrags.get(dragId) };
|
||||
}
|
||||
|
||||
// 如果找不到，尝试通过areaId查找
|
||||
for (const [id, dragState] of this.activeDrags.entries()) {
|
||||
if (dragState.options.areaId === areaId) {
|
||||
return { dragId: id, dragState };
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测拖拽目标
|
||||
* @private
|
||||
@@ -1624,6 +1647,200 @@ class DragStateManager {
|
||||
this.isEnabled = false;
|
||||
console.log('🗑️ 拖拽状态管理器已销毁');
|
||||
}
|
||||
|
||||
/**
|
||||
* Area拖拽开始
|
||||
* @param {Object} eventData - 拖拽事件数据
|
||||
* @returns {string} 拖拽ID
|
||||
*/
|
||||
onAreaDragStart(eventData) {
|
||||
try {
|
||||
const {
|
||||
event,
|
||||
areaId,
|
||||
element,
|
||||
type = 'area',
|
||||
position = { x: 0, y: 0 },
|
||||
...options
|
||||
} = eventData;
|
||||
|
||||
// 检查是否有其他活跃拖拽
|
||||
if (this.activeDrags.size > 0) {
|
||||
console.warn('检测到其他活跃拖拽，暂停之前的拖拽');
|
||||
this.cancelAllDrags();
|
||||
}
|
||||
|
||||
// 创建拖拽ID
|
||||
const dragId = `area-${areaId}-${Date.now()}`;
|
||||
|
||||
// 创建拖拽状态
|
||||
const dragState = new DragState(dragId, DRAG_AREA_TYPES.AREA, element, {
|
||||
areaId,
|
||||
sourceType: type,
|
||||
...options
|
||||
});
|
||||
|
||||
// 设置起始位置
|
||||
const clientX = event?.clientX || eventData.clientX;
|
||||
const clientY = event?.clientY || eventData.clientY;
|
||||
const startX = position.x || clientX;
|
||||
const startY = position.y || clientY;
|
||||
dragState.startPosition = { x: startX, y: startY };
|
||||
dragState.updatePosition(startX, startY);
|
||||
|
||||
// 设置状态为活跃
|
||||
dragState.status = 'active';
|
||||
this.activeDrags.set(dragId, dragState);
|
||||
|
||||
// 触发拖拽开始事件
|
||||
eventBus.emit(DRAG_STATE_TYPES.DRAG_START, {
|
||||
dragId,
|
||||
dragState: dragState.getSummary(),
|
||||
source: 'onAreaDragStart',
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
console.log(`🎯 区域拖拽开始: ${areaId}, dragId: ${dragId}`);
|
||||
|
||||
return dragId;
|
||||
} catch (error) {
|
||||
console.error('区域拖拽开始时出错:', error);
|
||||
eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
|
||||
operation: 'onAreaDragStart',
|
||||
error: error.message,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Area拖拽移动
|
||||
* @param {Object} eventData - 拖拽事件数据
|
||||
*/
|
||||
onAreaDragMove(eventData) {
|
||||
try {
|
||||
const {
|
||||
event,
|
||||
dragId,
|
||||
areaId,
|
||||
element,
|
||||
type = 'area',
|
||||
position = { x: 0, y: 0 },
|
||||
...options
|
||||
} = eventData;
|
||||
|
||||
// 查找拖拽状态
|
||||
const activeDrag = this._findDragByIdOrAreaId(dragId, areaId);
|
||||
if (!activeDrag) {
|
||||
console.warn('找不到区域拖拽状态:', areaId);
|
||||
return false;
|
||||
}
|
||||
|
||||
const dragState = activeDrag.dragState;
|
||||
if (dragState.status !== 'active') {
|
||||
console.warn('拖拽状态不活跃:', dragId);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
const clientX = event?.clientX || eventData.clientX;
|
||||
const clientY = event?.clientY || eventData.clientY;
|
||||
const currentX = position.x || clientX;
|
||||
const currentY = position.y || clientY;
|
||||
dragState.updatePosition(currentX, currentY);
|
||||
|
||||
// 检测目标区域
|
||||
const targetElement = this._detectDragTarget(currentX, currentY);
|
||||
if (targetElement) {
|
||||
dragState.setTarget(targetElement.element, targetElement.area);
|
||||
}
|
||||
|
||||
// 触发拖拽移动事件
|
||||
eventBus.emit(DRAG_STATE_TYPES.DRAG_MOVE, {
|
||||
dragId,
|
||||
dragState: dragState.getSummary(),
|
||||
position: { x: currentX, y: currentY },
|
||||
target: targetElement,
|
||||
source: 'onAreaDragMove',
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('区域拖拽移动时出错:', error);
|
||||
eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
|
||||
operation: 'onAreaDragMove',
|
||||
error: error.message,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Area拖拽结束
|
||||
* @param {Object} eventData - 拖拽事件数据
|
||||
*/
|
||||
onAreaDragEnd(eventData) {
|
||||
try {
|
||||
const {
|
||||
event,
|
||||
dragId,
|
||||
areaId,
|
||||
type = 'area',
|
||||
finalPosition = { x: 0, y: 0 },
|
||||
dropTarget,
|
||||
...options
|
||||
} = eventData;
|
||||
|
||||
// 查找拖拽状态
|
||||
const activeDrag = this._findDragByIdOrAreaId(dragId, areaId);
|
||||
if (!activeDrag) {
|
||||
console.warn('找不到区域拖拽状态:', areaId);
|
||||
return false;
|
||||
}
|
||||
|
||||
const dragState = activeDrag.dragState;
|
||||
|
||||
// 更新最终位置
|
||||
const clientX = event?.clientX || eventData.clientX;
|
||||
const clientY = event?.clientY || eventData.clientY;
|
||||
const finalX = finalPosition.x || clientX;
|
||||
const finalY = finalPosition.y || clientY;
|
||||
dragState.updatePosition(finalX, finalY);
|
||||
|
||||
// 设置最终状态
|
||||
dragState.status = 'completed';
|
||||
dragState.setTarget(dropTarget?.element || null, dropTarget?.area || null);
|
||||
|
||||
// 触发拖拽结束事件
|
||||
eventBus.emit(DRAG_STATE_TYPES.DRAG_END, {
|
||||
dragId,
|
||||
dragState: dragState.getSummary(),
|
||||
finalPosition: { x: finalX, y: finalY },
|
||||
dropTarget,
|
||||
source: 'onAreaDragEnd',
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
// 移动到历史记录
|
||||
this.dragHistory.push(dragState.getSummary());
|
||||
this.activeDrags.delete(activeDrag.dragId);
|
||||
|
||||
console.log(`✅ 区域拖拽结束: ${areaId}, dragId: ${dragId}`);
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('区域拖拽结束时出错:', error);
|
||||
eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
|
||||
operation: 'onAreaDragEnd',
|
||||
error: error.message,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟创建单例实例
|
||||
@@ -1731,21 +1948,21 @@ export const dragStateActions = {
|
||||
* @param {Object} eventData - 拖拽事件数据
|
||||
* @returns {string} 拖拽ID
|
||||
*/
|
||||
onAreaDragStart: (eventData) => ensureDragStateManagerInstance().onPanelDragStart(eventData),
|
||||
onAreaDragStart: (eventData) => ensureDragStateManagerInstance().onAreaDragStart(eventData),
|
||||
|
||||
/**
|
||||
* Area拖拽移动
|
||||
* @param {Object} eventData - 拖拽事件数据
|
||||
* @returns {boolean} 是否成功
|
||||
*/
|
||||
onAreaDragMove: (eventData) => ensureDragStateManagerInstance().onPanelDragMove(eventData),
|
||||
onAreaDragMove: (eventData) => ensureDragStateManagerInstance().onAreaDragMove(eventData),
|
||||
|
||||
/**
|
||||
* Area拖拽结束
|
||||
* @param {Object} eventData - 拖拽事件数据
|
||||
* @returns {boolean} 是否成功
|
||||
*/
|
||||
onAreaDragEnd: (eventData) => ensureDragStateManagerInstance().onPanelDragEnd(eventData),
|
||||
onAreaDragEnd: (eventData) => ensureDragStateManagerInstance().onAreaDragEnd(eventData),
|
||||
|
||||
/**
|
||||
* Tab拖拽开始
|
||||
|
||||
Reference in New Issue
Block a user