修改内容区显示逻辑,改为配置驱动
This commit is contained in:
@@ -397,22 +397,40 @@ const onDragStart = (e) => {
|
||||
|
||||
console.log(`[Panel:${props.id}] 开始拖拽, dragId: ${currentDragId}`)
|
||||
|
||||
// 2. 使用事件总线触发拖拽开始事件,包含统一的 dragId 和标准化数据格式
|
||||
const areaId = getCurrentAreaId();
|
||||
|
||||
// 2. 使用事件总线触发面板拖拽开始事件,包含统一的 dragId 和标准化数据格式
|
||||
emitEvent(EVENT_TYPES.PANEL_DRAG_START, {
|
||||
dragId: currentDragId,
|
||||
panelId: props.id,
|
||||
areaId: getCurrentAreaId(),
|
||||
areaId: areaId,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
})
|
||||
|
||||
// 3. 防止文本选择和默认行为
|
||||
// 3. 同时触发Area拖拽开始事件,实现通过Panel标题栏拖拽Area
|
||||
emitEvent(EVENT_TYPES.AREA_DRAG_START, {
|
||||
dragId: currentDragId,
|
||||
areaId: areaId,
|
||||
event: e,
|
||||
element: null,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
clientX: e.clientX,
|
||||
clientY: e.clientY,
|
||||
startLeft: 0,
|
||||
startTop: 0,
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
})
|
||||
|
||||
// 4. 防止文本选择和默认行为
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
// 4. 添加Document事件监听器,使用一次性变量避免内存泄漏
|
||||
// 5. 添加Document事件监听器,使用一次性变量避免内存泄漏
|
||||
addDocumentDragListeners()
|
||||
}
|
||||
};
|
||||
@@ -424,16 +442,31 @@ const onDragMove = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 使用事件总线触发拖拽移动事件,包含 dragId
|
||||
const areaId = getCurrentAreaId();
|
||||
|
||||
// 1. 使用事件总线触发面板拖拽移动事件,包含 dragId
|
||||
emitEvent(EVENT_TYPES.PANEL_DRAG_MOVE, {
|
||||
dragId: currentDragId,
|
||||
panelId: props.id,
|
||||
areaId: getCurrentAreaId(),
|
||||
areaId: areaId,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
})
|
||||
|
||||
// 2. 同时触发Area拖拽移动事件,实现通过Panel标题栏拖拽Area
|
||||
emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
|
||||
dragId: currentDragId,
|
||||
areaId: areaId,
|
||||
event: e,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
clientX: e.clientX,
|
||||
clientY: e.clientY,
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
@@ -444,20 +477,33 @@ const onDragEnd = () => {
|
||||
|
||||
console.log(`[Panel:${props.id}] 结束拖拽, dragId: ${currentDragId}`)
|
||||
|
||||
// 使用事件总线触发拖拽结束事件,包含 dragId
|
||||
const areaId = getCurrentAreaId();
|
||||
|
||||
// 1. 使用事件总线触发面板拖拽结束事件,包含 dragId
|
||||
emitEvent(EVENT_TYPES.PANEL_DRAG_END, {
|
||||
dragId: currentDragId,
|
||||
panelId: props.id,
|
||||
areaId: getCurrentAreaId(),
|
||||
areaId: areaId,
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
})
|
||||
|
||||
// 使用统一的清理方法,确保一致性和完整性
|
||||
// 2. 同时触发Area拖拽结束事件,实现通过Panel标题栏拖拽Area
|
||||
emitEvent(EVENT_TYPES.AREA_DRAG_END, {
|
||||
dragId: currentDragId,
|
||||
areaId: areaId,
|
||||
event: null,
|
||||
position: null,
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
})
|
||||
|
||||
// 3. 使用统一的清理方法,确保一致性和完整性
|
||||
cleanupDragEventListeners()
|
||||
|
||||
// 重置 dragId
|
||||
// 4. 重置 dragId
|
||||
currentDragId = null
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user