全部用静态导入
This commit is contained in:
@@ -134,10 +134,10 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
|
||||
import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus.js'
|
||||
import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus'
|
||||
import TabPage from './TabPage.vue'
|
||||
import Panel from './Panel.vue'
|
||||
import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js'
|
||||
import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers'
|
||||
|
||||
const props = defineProps({
|
||||
id: { type: String, required: true },
|
||||
|
||||
@@ -438,7 +438,7 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, ref, onUnmounted, defineProps } from 'vue'
|
||||
import { emitEvent } from './eventBus.js'
|
||||
import { emitEvent } from './eventBus'
|
||||
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
|
||||
@@ -53,15 +53,13 @@ import TabPage from './TabPage.vue';
|
||||
import DockIndicator from './DockIndicator.vue';
|
||||
import ResizeBar from './ResizeBar.vue';
|
||||
import Render from './Render.vue';
|
||||
import { zIndexManager } from './dockLayers.js';
|
||||
import { eventBus, EVENT_TYPES } from './eventBus.js';
|
||||
|
||||
// 导入事件处理器
|
||||
import { areaActions } from './handlers/AreaHandler.js';
|
||||
import { dragStateActions } from './handlers/DragStateManager.js';
|
||||
import { panelActions } from './handlers/PanelHandler.js';
|
||||
import { tabPageActions } from './handlers/TabPageHandler.js';
|
||||
import { globalEventActions } from './handlers/GlobalEventManager.js';
|
||||
import { zIndexManager } from './dockLayers';
|
||||
import { eventBus, EVENT_TYPES } from './eventBus';
|
||||
import { areaActions } from './handlers/AreaHandler';
|
||||
import { dragStateActions } from './handlers/DragStateManager';
|
||||
import { panelActions } from './handlers/PanelHandler';
|
||||
import { tabPageActions } from './handlers/TabPageHandler';
|
||||
import { globalEventActions } from './handlers/GlobalEventManager';
|
||||
|
||||
// 定义组件可以发出的事件
|
||||
const emit = defineEmits([
|
||||
@@ -287,51 +285,59 @@ const hideEdgeIndicators = computed(() => {
|
||||
|
||||
// 设置事件总线监听器
|
||||
const setupEventListeners = () => {
|
||||
// 创建一个数组来保存所有的取消订阅函数
|
||||
const unsubscribeFunctions = [];
|
||||
|
||||
// Area相关事件
|
||||
eventBus.on(EVENT_TYPES.AREA_DRAG_START, onAreaDragStart)
|
||||
eventBus.on(EVENT_TYPES.AREA_DRAG_MOVE, onAreaDragMove)
|
||||
eventBus.on(EVENT_TYPES.AREA_DRAG_END, onAreaDragEnd)
|
||||
eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition)
|
||||
eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver)
|
||||
eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave)
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_START, onAreaDragStart));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_MOVE, onAreaDragMove));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_END, onAreaDragEnd));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave));
|
||||
|
||||
// Tab相关事件
|
||||
eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange)
|
||||
eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose)
|
||||
eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd)
|
||||
eventBus.on(EVENT_TYPES.TAB_DRAG_START, onTabDragStart)
|
||||
eventBus.on(EVENT_TYPES.TAB_DRAG_MOVE, onTabDragMove)
|
||||
eventBus.on(EVENT_TYPES.TAB_DRAG_END, onTabDragEnd)
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_START, onTabDragStart));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_MOVE, onTabDragMove));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_END, onTabDragEnd));
|
||||
|
||||
// Panel相关事件
|
||||
eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'))
|
||||
eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize)
|
||||
eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea)
|
||||
eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel)
|
||||
eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'))
|
||||
eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart)
|
||||
eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove)
|
||||
eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd)
|
||||
eventBus.on(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, onPanelDragStartFromTabPage)
|
||||
eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, onPanelDragMoveFromTabPage)
|
||||
eventBus.on(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, onPanelDragEndFromTabPage)
|
||||
eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync)
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse')));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar')));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, onPanelDragStartFromTabPage));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, onPanelDragMoveFromTabPage));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, onPanelDragEndFromTabPage));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync));
|
||||
|
||||
// Resize相关事件
|
||||
eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'))
|
||||
eventBus.on(EVENT_TYPES.RESIZE_MOVE, () => emit('dragMove'))
|
||||
eventBus.on(EVENT_TYPES.RESIZE_END, () => emit('dragEnd'))
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart')));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_MOVE, () => emit('dragMove')));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_END, () => emit('dragEnd')));
|
||||
|
||||
// Window相关事件
|
||||
eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
|
||||
// 处理窗口状态变化
|
||||
})
|
||||
}));
|
||||
|
||||
// 自定义事件
|
||||
eventBus.on('area-merged', onAreaMerged)
|
||||
eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId))
|
||||
unsubscribeFunctions.push(eventBus.on('area-merged', onAreaMerged));
|
||||
unsubscribeFunctions.push(eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId)));
|
||||
|
||||
return unsubscribeFunctions;
|
||||
};
|
||||
|
||||
// 保存取消订阅函数数组
|
||||
const unsubscribeFunctions = ref([]);
|
||||
|
||||
// 清理函数
|
||||
const cleanup = () => {
|
||||
// 清理事件监听器和其他资源
|
||||
@@ -467,7 +473,7 @@ const findOrCreateMainAreaTabPage = () => {
|
||||
onMounted(() => {
|
||||
// 初始化轻量级状态
|
||||
console.log('DockLayout component mounted');
|
||||
setupEventListeners();
|
||||
unsubscribeFunctions.value = setupEventListeners();
|
||||
})
|
||||
|
||||
// 组件卸载时清理资源
|
||||
@@ -475,8 +481,9 @@ onUnmounted(() => {
|
||||
// 清理事件监听器和其他资源
|
||||
console.log('DockLayout component unmounted');
|
||||
cleanup();
|
||||
// 移除事件总线监听器
|
||||
eventBus.offAll();
|
||||
// 逐个移除事件监听器
|
||||
unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe());
|
||||
unsubscribeFunctions.value = [];
|
||||
})
|
||||
|
||||
// 暴露轻量级接口给父组件
|
||||
|
||||
@@ -118,7 +118,7 @@ import {
|
||||
EVENT_TYPES,
|
||||
emitEvent,
|
||||
onEvent
|
||||
} from './eventBus.js';
|
||||
} from './eventBus';
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
@@ -566,9 +566,6 @@ onMounted(() => {
|
||||
// 设置事件监听器
|
||||
setupEventListeners()
|
||||
|
||||
// 设置拖拽相关事件监听器
|
||||
addDocumentDragListeners()
|
||||
|
||||
// 更新活动状态
|
||||
if (window.__panelMemoryProtection) {
|
||||
window.__panelMemoryProtection.updateActivity(`panel_${props.id}`)
|
||||
|
||||
@@ -24,7 +24,7 @@ import { computed } from 'vue'
|
||||
import Area from './Area.vue'
|
||||
import TabPage from './TabPage.vue'
|
||||
import Panel from './Panel.vue'
|
||||
import { eventBus, EVENT_TYPES } from './eventBus.js'
|
||||
import { eventBus, EVENT_TYPES } from './eventBus'
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { emitEvent, EVENT_TYPES } from './eventBus.js'
|
||||
import { emitEvent, EVENT_TYPES } from './eventBus'
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted, onUnmounted, computed, useSlots } from 'vue'
|
||||
import { emitEvent, EVENT_TYPES } from './eventBus.js'
|
||||
import { emitEvent, EVENT_TYPES } from './eventBus'
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
|
||||
@@ -327,6 +327,29 @@ class EnhancedEventBus {
|
||||
}
|
||||
}
|
||||
|
||||
// 防止重复注册相同的监听器
|
||||
if (!this.bus.all.has(eventType)) {
|
||||
this.bus.all.set(eventType, [])
|
||||
}
|
||||
|
||||
const listeners = this.bus.all.get(eventType)
|
||||
// 检查是否已经存在相同的处理函数
|
||||
const existingListener = listeners.find(listener => {
|
||||
// 检查是否是同一个wrappedHandler或handler
|
||||
return listener === wrappedHandler ||
|
||||
(listener._originalHandler && listener._originalHandler === handler)
|
||||
})
|
||||
|
||||
if (existingListener) {
|
||||
// 已经存在相同的监听器,直接返回取消订阅函数
|
||||
return () => {
|
||||
this.off(eventType, wrappedHandler)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存原始处理函数,用于去重检查
|
||||
wrappedHandler._originalHandler = handler
|
||||
|
||||
// 实际监听事件
|
||||
this.bus.on(eventType, wrappedHandler)
|
||||
|
||||
@@ -494,6 +517,13 @@ class EnhancedEventBus {
|
||||
this.bus.off(eventType, callback)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消所有订阅
|
||||
*/
|
||||
offAll() {
|
||||
this.bus.all.clear()
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有监听器
|
||||
*/
|
||||
@@ -766,165 +796,41 @@ EnhancedEventBus.prototype.destroy = function() {
|
||||
console.log(`[EventBus:${this.instanceId}] 实例已销毁`)
|
||||
}
|
||||
|
||||
// 拖拽状态管理器
|
||||
export class DragStateManager {
|
||||
constructor(eventBus) {
|
||||
this.eventBus = eventBus
|
||||
this.dragStates = new Map()
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始拖拽
|
||||
*/
|
||||
startDrag(dragInfo) {
|
||||
const { type, id, event } = dragInfo
|
||||
|
||||
this.dragStates.set(id, {
|
||||
type,
|
||||
startTime: Date.now(),
|
||||
initialPosition: { x: event.clientX, y: event.clientY },
|
||||
currentPosition: { x: event.clientX, y: event.clientY },
|
||||
isActive: true
|
||||
})
|
||||
|
||||
// 触发拖拽开始事件
|
||||
const eventType = `${type}.drag.start`
|
||||
this.eventBus.emit(eventType, {
|
||||
id,
|
||||
position: { x: event.clientX, y: event.clientY },
|
||||
initialPosition: { x: event.clientX, y: event.clientY }
|
||||
})
|
||||
|
||||
return id
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖拽移动
|
||||
*/
|
||||
moveDrag(id, event) {
|
||||
const dragState = this.dragStates.get(id)
|
||||
if (!dragState || !dragState.isActive) return
|
||||
|
||||
dragState.currentPosition = { x: event.clientX, y: event.clientY }
|
||||
const delta = {
|
||||
x: event.clientX - dragState.initialPosition.x,
|
||||
y: event.clientY - dragState.initialPosition.y
|
||||
}
|
||||
|
||||
// 触发拖拽移动事件
|
||||
const eventType = `${dragState.type}.drag.move`
|
||||
this.eventBus.emit(eventType, {
|
||||
id,
|
||||
position: dragState.currentPosition,
|
||||
delta,
|
||||
startTime: dragState.startTime
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束拖拽
|
||||
*/
|
||||
endDrag(id, event) {
|
||||
const dragState = this.dragStates.get(id)
|
||||
if (!dragState) return
|
||||
|
||||
dragState.isActive = false
|
||||
dragState.endTime = Date.now()
|
||||
dragState.finalPosition = { x: event.clientX, y: event.clientY }
|
||||
|
||||
// 触发拖拽结束事件
|
||||
const eventType = `${dragState.type}.drag.end`
|
||||
this.eventBus.emit(eventType, {
|
||||
id,
|
||||
position: dragState.finalPosition,
|
||||
initialPosition: dragState.initialPosition,
|
||||
duration: dragState.endTime - dragState.startTime
|
||||
})
|
||||
|
||||
// 清理拖拽状态
|
||||
setTimeout(() => {
|
||||
this.dragStates.delete(id)
|
||||
}, 100)
|
||||
|
||||
return dragState
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取拖拽状态
|
||||
*/
|
||||
getDragState(id) {
|
||||
return this.dragStates.get(id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否有活动的拖拽
|
||||
*/
|
||||
hasActiveDrag(id = null) {
|
||||
if (id) {
|
||||
const state = this.dragStates.get(id)
|
||||
return state && state.isActive
|
||||
}
|
||||
|
||||
for (const state of this.dragStates.values()) {
|
||||
if (state.isActive) return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消所有拖拽
|
||||
*/
|
||||
cancelAllDrags() {
|
||||
for (const [id, state] of this.dragStates.entries()) {
|
||||
if (state.isActive) {
|
||||
this.endDrag(id, {
|
||||
clientX: state.currentPosition.x,
|
||||
clientY: state.currentPosition.y
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建拖拽状态管理器实例
|
||||
export const dragStateManager = new DragStateManager(eventBus)
|
||||
|
||||
// 便捷的拖拽事件触发函数
|
||||
// 便捷的事件触发函数
|
||||
export const triggerDragEvent = {
|
||||
area: {
|
||||
start: (areaId, event) => {
|
||||
return dragStateManager.startDrag({ type: 'area', id: areaId, event })
|
||||
return eventBus.emit(EVENT_TYPES.AREA_DRAG_START, { areaId, event })
|
||||
},
|
||||
move: (areaId, event) => {
|
||||
dragStateManager.moveDrag(areaId, event)
|
||||
eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, { areaId, event })
|
||||
},
|
||||
end: (areaId, event) => {
|
||||
dragStateManager.endDrag(areaId, event)
|
||||
eventBus.emit(EVENT_TYPES.AREA_DRAG_END, { areaId, event })
|
||||
}
|
||||
},
|
||||
|
||||
tab: {
|
||||
start: (tabId, event) => {
|
||||
return dragStateManager.startDrag({ type: 'tab', id: tabId, event })
|
||||
return eventBus.emit(EVENT_TYPES.TAB_DRAG_START, { tabId, event })
|
||||
},
|
||||
move: (tabId, event) => {
|
||||
dragStateManager.moveDrag(tabId, event)
|
||||
eventBus.emit(EVENT_TYPES.TAB_DRAG_MOVE, { tabId, event })
|
||||
},
|
||||
end: (tabId, event) => {
|
||||
dragStateManager.endDrag(tabId, event)
|
||||
eventBus.emit(EVENT_TYPES.TAB_DRAG_END, { tabId, event })
|
||||
}
|
||||
},
|
||||
|
||||
panel: {
|
||||
start: (panelId, event) => {
|
||||
return dragStateManager.startDrag({ type: 'panel', id: panelId, event })
|
||||
return eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, { panelId, event })
|
||||
},
|
||||
move: (panelId, event) => {
|
||||
dragStateManager.moveDrag(panelId, event)
|
||||
eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, { panelId, event })
|
||||
},
|
||||
end: (panelId, event) => {
|
||||
dragStateManager.endDrag(panelId, event)
|
||||
eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { panelId, event })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* 专门处理Area相关的所有事件,包括浮动区域管理、拖拽、停靠、合并等
|
||||
*/
|
||||
|
||||
import { eventBus } from '../eventBus.js';
|
||||
import { eventBus } from '../eventBus';
|
||||
|
||||
// Area事件类型常量
|
||||
export const AREA_EVENT_TYPES = {
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
* 统一管理所有组件的拖拽状态,提供拖拽历史、性能监控、冲突检测等功能
|
||||
*/
|
||||
|
||||
import { eventBus } from '../eventBus.js';
|
||||
import { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
|
||||
import { eventBus } from '../eventBus';
|
||||
import { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';
|
||||
|
||||
// 拖拽状态类型
|
||||
export const DRAG_STATE_TYPES = {
|
||||
@@ -520,6 +520,11 @@ class DragStateManager {
|
||||
* 注册事件监听器
|
||||
*/
|
||||
_registerEventListeners() {
|
||||
// 防止重复注册监听器
|
||||
if (this.eventListenersRegistered) {
|
||||
return;
|
||||
}
|
||||
|
||||
const dragEvents = [
|
||||
// Panel拖拽事件
|
||||
'panel.drag.start', 'panel.drag.move', 'panel.drag.end', 'panel.drag.cancel',
|
||||
@@ -535,6 +540,36 @@ class DragStateManager {
|
||||
deduplication: { type: 'EVENT_BASED', key: 'dragState' }
|
||||
});
|
||||
});
|
||||
|
||||
this.eventListenersRegistered = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁管理器
|
||||
*/
|
||||
destroy() {
|
||||
// 清理事件监听器
|
||||
const dragEvents = [
|
||||
// Panel拖拽事件
|
||||
'panel.drag.start', 'panel.drag.move', 'panel.drag.end', 'panel.drag.cancel',
|
||||
// TabPage拖拽事件
|
||||
'tabpage.drag.start', 'tabpage.drag.move', 'tabpage.drag.end', 'tabpage.drag.cancel',
|
||||
// Area拖拽事件
|
||||
'area.drag.start', 'area.drag.move', 'area.drag.end', 'area.drag.cancel'
|
||||
];
|
||||
|
||||
dragEvents.forEach(eventType => {
|
||||
eventBus.off(eventType, this._onDragEvent);
|
||||
});
|
||||
|
||||
// 清理清理调度器
|
||||
this._stopCleanupScheduler();
|
||||
|
||||
// 清理拖拽状态
|
||||
this.dragStates.clear();
|
||||
this.dragHistory = [];
|
||||
|
||||
console.log('🗑️ 拖拽状态管理器已销毁');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
* 统一管理所有事件处理器和功能模块
|
||||
*/
|
||||
|
||||
import { eventBus, eventBusActions, EVENT_TYPES } from '../eventBus.js';
|
||||
import { panelHandler, PANEL_EVENT_TYPES, panelActions } from './PanelHandler.js';
|
||||
import tabPageHandler, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler.js';
|
||||
import areaHandler, { AREA_EVENT_TYPES, areaActions } from './AreaHandler.js';
|
||||
import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
|
||||
import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager.js';
|
||||
import integrationTester, { testActions, TEST_CONFIG } from './IntegrationTester.js';
|
||||
import { eventBus, eventBusActions, EVENT_TYPES } from '../eventBus';
|
||||
import { panelHandler, PANEL_EVENT_TYPES, panelActions } from './PanelHandler';
|
||||
import tabPageHandler, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler';
|
||||
import areaHandler, { AREA_EVENT_TYPES, areaActions } from './AreaHandler';
|
||||
import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';
|
||||
import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager';
|
||||
import integrationTester, { testActions, TEST_CONFIG } from './IntegrationTester';
|
||||
|
||||
// 事件总线配置
|
||||
export const EVENT_BUS_CONFIG = {
|
||||
|
||||
@@ -3,10 +3,14 @@
|
||||
* 统一管理所有事件处理器,提供事件路由、分发、监控和调试功能
|
||||
*/
|
||||
|
||||
import { eventBus } from '../eventBus.js';
|
||||
import { panelHandler, PANEL_EVENT_TYPES, panelActions } from './PanelHandler.js';
|
||||
import tabPageHandler, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler.js';
|
||||
import areaHandler, { AREA_EVENT_TYPES, areaActions } from './AreaHandler.js';
|
||||
import { eventBus } from '../eventBus';
|
||||
import { PANEL_EVENT_TYPES, panelActions, panelHandler } from './PanelHandler';
|
||||
import tabPageHandlerModule, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler';
|
||||
import areaHandlerModule, { AREA_EVENT_TYPES, areaActions } from './AreaHandler';
|
||||
|
||||
// 获取处理器实例
|
||||
const tabPageHandler = tabPageHandlerModule.getInstance ? tabPageHandlerModule.getInstance() : tabPageHandlerModule;
|
||||
const areaHandler = areaHandlerModule;
|
||||
|
||||
// 全局事件类型常量
|
||||
export const GLOBAL_EVENT_TYPES = {
|
||||
@@ -305,21 +309,17 @@ class GlobalEventManager {
|
||||
this.crossComponentChannels = new Map();
|
||||
this.isInitialized = false;
|
||||
this.eventListenersRegistered = false;
|
||||
this.componentListenersRegistered = false;
|
||||
this.debugMode = false;
|
||||
|
||||
// 处理器映射
|
||||
this.handlerMap = {
|
||||
panelHandler,
|
||||
tabPageHandler,
|
||||
areaHandler
|
||||
};
|
||||
this.handlerMap = {};
|
||||
this.eventListenerUnsubscribers = [];
|
||||
|
||||
// 绑定方法
|
||||
this._onGlobalEvent = this._onGlobalEvent.bind(this);
|
||||
this._onSystemError = this._handleSystemError.bind(this);
|
||||
this._cleanupExpiredData = this._cleanupExpiredData.bind(this);
|
||||
|
||||
this._initialize();
|
||||
// 延迟初始化,先不调用_initialize()
|
||||
|
||||
// 保存实例到静态属性
|
||||
GlobalEventManager.instance = this;
|
||||
@@ -328,13 +328,20 @@ class GlobalEventManager {
|
||||
/**
|
||||
* 初始化事件管理器
|
||||
*/
|
||||
_initialize() {
|
||||
async _initialize() {
|
||||
// 防止重复初始化
|
||||
if (this.isInitialized) {
|
||||
console.warn('⚠️ 全局事件管理器已初始化,跳过重复初始化');
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化处理器映射
|
||||
this.handlerMap = {
|
||||
panelHandler,
|
||||
tabPageHandler,
|
||||
areaHandler
|
||||
};
|
||||
|
||||
// 注册全局事件监听器
|
||||
this._registerGlobalEventListeners();
|
||||
|
||||
@@ -367,10 +374,11 @@ class GlobalEventManager {
|
||||
|
||||
const globalEvents = Object.values(GLOBAL_EVENT_TYPES);
|
||||
globalEvents.forEach(eventType => {
|
||||
eventBus.on(eventType, this._onGlobalEvent, {
|
||||
const unsubscribe = eventBus.on(eventType, this._onGlobalEvent, {
|
||||
priority: 0, // 最高优先级
|
||||
deduplication: { type: 'TTL_BASED', ttl: 50 }
|
||||
});
|
||||
this.eventListenerUnsubscribers.push(unsubscribe);
|
||||
});
|
||||
|
||||
// 注册所有组件事件监听器
|
||||
@@ -384,26 +392,30 @@ class GlobalEventManager {
|
||||
* 注册组件事件监听器
|
||||
*/
|
||||
_registerComponentEventListeners() {
|
||||
// 防止重复注册组件事件监听器
|
||||
if (this.componentListenersRegistered) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Panel事件监听
|
||||
Object.values(PANEL_EVENT_TYPES).forEach(eventType => {
|
||||
eventBus.on(eventType, (data) => {
|
||||
this._routeEvent(eventType, data, 'panel');
|
||||
}, { priority: 1 });
|
||||
const unsubscribe = eventBus.on(eventType, this._routeEvent.bind(this, eventType, null, 'panel'), { priority: 1 });
|
||||
this.eventListenerUnsubscribers.push(unsubscribe);
|
||||
});
|
||||
|
||||
// TabPage事件监听
|
||||
Object.values(TABPAGE_EVENT_TYPES).forEach(eventType => {
|
||||
eventBus.on(eventType, (data) => {
|
||||
this._routeEvent(eventType, data, 'tabPage');
|
||||
}, { priority: 1 });
|
||||
const unsubscribe = eventBus.on(eventType, this._routeEvent.bind(this, eventType, null, 'tabPage'), { priority: 1 });
|
||||
this.eventListenerUnsubscribers.push(unsubscribe);
|
||||
});
|
||||
|
||||
// Area事件监听
|
||||
Object.values(AREA_EVENT_TYPES).forEach(eventType => {
|
||||
eventBus.on(eventType, (data) => {
|
||||
this._routeEvent(eventType, data, 'area');
|
||||
}, { priority: 1 });
|
||||
const unsubscribe = eventBus.on(eventType, this._routeEvent.bind(this, eventType, null, 'area'), { priority: 1 });
|
||||
this.eventListenerUnsubscribers.push(unsubscribe);
|
||||
});
|
||||
|
||||
this.componentListenersRegistered = true;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1022,8 +1034,15 @@ class GlobalEventManager {
|
||||
* 销毁事件管理器
|
||||
*/
|
||||
destroy() {
|
||||
// 清理所有事件监听器,包括全局事件和组件事件
|
||||
eventBus.clear();
|
||||
// 清理自己注册的所有事件监听器
|
||||
this.eventListenerUnsubscribers.forEach(unsubscribe => {
|
||||
try {
|
||||
unsubscribe();
|
||||
} catch (error) {
|
||||
console.warn('清理监听器时出错:', error);
|
||||
}
|
||||
});
|
||||
this.eventListenerUnsubscribers = [];
|
||||
|
||||
// 销毁各个处理器
|
||||
Object.values(this.handlerMap).forEach(handler => {
|
||||
@@ -1041,6 +1060,7 @@ class GlobalEventManager {
|
||||
|
||||
this.isInitialized = false;
|
||||
this.eventListenersRegistered = false;
|
||||
this.componentListenersRegistered = false;
|
||||
console.log('🗑️ 全局事件管理器已销毁,所有监听器已清理');
|
||||
}
|
||||
}
|
||||
@@ -1150,17 +1170,20 @@ export const globalEventActions = {
|
||||
/**
|
||||
* 确保单例实例存在
|
||||
*/
|
||||
function ensureInstance() {
|
||||
async function ensureInstance() {
|
||||
if (!globalEventManager) {
|
||||
globalEventManager = new GlobalEventManager();
|
||||
// 异步初始化
|
||||
await globalEventManager._initialize();
|
||||
} else if (!globalEventManager.isInitialized) {
|
||||
// 如果实例存在但未初始化,完成初始化
|
||||
await globalEventManager._initialize();
|
||||
}
|
||||
return globalEventManager;
|
||||
}
|
||||
|
||||
// 导出单例实例访问方法
|
||||
export const getGlobalEventManager = () => {
|
||||
return ensureInstance();
|
||||
};
|
||||
export const getGlobalEventManager = ensureInstance;
|
||||
|
||||
// 导出事件管理器和相关API
|
||||
export default {
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
* 对所有事件处理器进行集成测试、性能监控和优化建议
|
||||
*/
|
||||
|
||||
import { eventBus } from '../eventBus.js';
|
||||
import { panelHandler, PANEL_EVENT_TYPES } from './PanelHandler.js';
|
||||
import tabPageHandler, { TABPAGE_EVENT_TYPES } from './TabPageHandler.js';
|
||||
import areaHandler, { AREA_EVENT_TYPES } from './AreaHandler.js';
|
||||
import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
|
||||
import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager.js';
|
||||
import { eventBus } from '../eventBus';
|
||||
import { panelHandler, PANEL_EVENT_TYPES } from './PanelHandler';
|
||||
import tabPageHandler, { TABPAGE_EVENT_TYPES } from './TabPageHandler';
|
||||
import areaHandler, { AREA_EVENT_TYPES } from './AreaHandler';
|
||||
import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';
|
||||
import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager';
|
||||
|
||||
// 测试配置
|
||||
export const TEST_CONFIG = {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { emitEvent, onEvent, onceEvent, registerHandler, unregisterHandler, getHandlerSnapshot } from '../eventBus.js'
|
||||
import { emitEvent, onEvent, onceEvent, registerHandler, unregisterHandler, getHandlerSnapshot } from '../eventBus'
|
||||
import { nanoid } from 'nanoid'
|
||||
|
||||
// Panel事件类型常量
|
||||
@@ -788,8 +788,28 @@ class PanelEventHandler {
|
||||
}
|
||||
}
|
||||
|
||||
// 单例实例变量
|
||||
let panelHandler = null;
|
||||
|
||||
/**
|
||||
* 确保单例实例存在
|
||||
* @returns {PanelEventHandler} PanelEventHandler实例
|
||||
*/
|
||||
function ensureInstance() {
|
||||
if (!panelHandler) {
|
||||
panelHandler = new PanelEventHandler();
|
||||
}
|
||||
return panelHandler;
|
||||
}
|
||||
|
||||
// 导出单例实例访问方法
|
||||
export const getPanelHandler = ensureInstance;
|
||||
|
||||
// 创建全局Panel事件处理器实例
|
||||
export const panelHandler = new PanelEventHandler()
|
||||
const panelHandlerInstance = ensureInstance();
|
||||
|
||||
// 导出事件处理器实例
|
||||
export { panelHandlerInstance as panelHandler };
|
||||
|
||||
// 便捷的操作函数
|
||||
export const panelActions = {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* 专门处理TabPage相关的所有事件,包括标签页拖拽、切换、关闭、激活等
|
||||
*/
|
||||
|
||||
import { eventBus } from '../eventBus.js';
|
||||
import { eventBus } from '../eventBus';
|
||||
|
||||
// TabPage事件类型常量
|
||||
export const TABPAGE_EVENT_TYPES = {
|
||||
@@ -577,8 +577,19 @@ class TabPageEventHandler {
|
||||
}
|
||||
}
|
||||
|
||||
// 创建单例实例
|
||||
const tabPageHandler = new TabPageEventHandler();
|
||||
// 单例实例变量
|
||||
let tabPageHandler = null;
|
||||
|
||||
/**
|
||||
* 确保单例实例存在
|
||||
* @returns {TabPageEventHandler} TabPageEventHandler实例
|
||||
*/
|
||||
function ensureInstance() {
|
||||
if (!tabPageHandler) {
|
||||
tabPageHandler = new TabPageEventHandler();
|
||||
}
|
||||
return tabPageHandler;
|
||||
}
|
||||
|
||||
// TabPage便捷操作函数
|
||||
export const tabPageActions = {
|
||||
@@ -678,7 +689,8 @@ export const tabPageActions = {
|
||||
* @param {Object} updates - 状态更新
|
||||
*/
|
||||
updateState: (tabPageId, updates) => {
|
||||
tabPageHandler.tabPageStateManager.updateState(tabPageId, updates);
|
||||
const instance = ensureInstance();
|
||||
instance.tabPageStateManager.updateState(tabPageId, updates);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -700,7 +712,10 @@ export const tabPageActions = {
|
||||
};
|
||||
|
||||
// 导出事件处理器和相关API
|
||||
export default tabPageHandler;
|
||||
export default {
|
||||
getInstance: ensureInstance,
|
||||
actions: tabPageActions
|
||||
};
|
||||
|
||||
// 便利的TabPage拖拽处理函数
|
||||
export const triggerTabPageDrag = {
|
||||
|
||||
Reference in New Issue
Block a user