431 lines
9.5 KiB
TypeScript
431 lines
9.5 KiB
TypeScript
import { v4 as uuidv4 } from 'uuid'
|
||
import type { IEventBuilder, IEventMap } from '@/events/IEventBuilder'
|
||
|
||
/** 窗口状态枚举 */
|
||
export enum EWindowFormState {
|
||
/** 创建中 */
|
||
CREATING = 'creating',
|
||
/** 加载中 */
|
||
LOADING = 'loading',
|
||
/** 激活 */
|
||
ACTIVE = 'active',
|
||
/** 未激活 - 在后台，失去焦点 */
|
||
INACTIVE = 'inactive',
|
||
/** 最小化 */
|
||
MINIMIZED = 'minimized',
|
||
/** 最大化状态 */
|
||
MAXIMIZED = 'maximized',
|
||
/** 关闭中 */
|
||
CLOSING = 'closing',
|
||
/** 销毁 */
|
||
DESTROYED = 'destroyed',
|
||
/** 错误 */
|
||
ERROR = 'error'
|
||
}
|
||
|
||
/** 窗口系统事件接口 */
|
||
export interface IWindowFormEvents extends IEventMap {
|
||
onWindowFormDataUpdate: (data: {
|
||
id: string
|
||
state: EWindowFormState
|
||
width: number
|
||
height: number
|
||
x: number
|
||
y: number
|
||
}) => void
|
||
|
||
/**
|
||
* 窗体创建事件
|
||
*/
|
||
onCreating: (wid: string) => void
|
||
/**
|
||
* 窗体加载事件
|
||
*/
|
||
onLoading: (wid: string) => void
|
||
/**
|
||
* 窗体加载完成事件
|
||
*/
|
||
onLoaded: (wid: string) => void
|
||
/**
|
||
* 窗体聚焦事件
|
||
*/
|
||
onFocus: (wid: string) => void
|
||
/**
|
||
* 窗体失焦事件
|
||
*/
|
||
onBlur: (wid: string) => void
|
||
/**
|
||
* 窗体激活事件
|
||
*/
|
||
onActivate: (wid: string) => void
|
||
/**
|
||
* 窗体失活事件
|
||
*/
|
||
onDeactivate: (wid: string) => void
|
||
/**
|
||
* 窗体最小化事件
|
||
*/
|
||
onMinimize: (wid: string) => void
|
||
/**
|
||
* 窗体最大化事件
|
||
*/
|
||
onMaximize: (wid: string) => void
|
||
/**
|
||
* 窗体还原、恢复事件
|
||
*/
|
||
onRestore: (wid: string) => void
|
||
/**
|
||
* 窗体关闭前事件
|
||
* @param id 窗体ID
|
||
* @param cancel
|
||
*/
|
||
onBeforeClose: (id: string, cancel: () => void) => void
|
||
/**
|
||
* 窗体关闭事件
|
||
*/
|
||
onClose: (wid: string) => void
|
||
/**
|
||
* 窗体销毁事件
|
||
*/
|
||
onDestroy: (wid: string) => void
|
||
/**
|
||
* 窗体错误事件
|
||
*/
|
||
onError: (wid: string, error: Error) => void
|
||
}
|
||
|
||
/** 窗口配置参数 */
|
||
export interface IWindowFormConfig {
|
||
/**
|
||
* 窗体标题
|
||
*/
|
||
title?: string
|
||
/**
|
||
* 窗体宽度(像素)
|
||
*/
|
||
width: number
|
||
/**
|
||
* 窗体高度(像素)
|
||
*/
|
||
height: number
|
||
/**
|
||
* 窗体最小宽度(像素)
|
||
*/
|
||
minWidth?: number
|
||
/**
|
||
* 窗体最小高度(像素)
|
||
*/
|
||
minHeight?: number
|
||
/**
|
||
* 窗体最大宽度(像素)
|
||
*/
|
||
maxWidth?: number
|
||
/**
|
||
* 窗体最大高度(像素)
|
||
*/
|
||
maxHeight?: number
|
||
/**
|
||
* 是否可调整大小
|
||
*/
|
||
resizable?: boolean
|
||
/**
|
||
* 是否可移动
|
||
*/
|
||
movable?: boolean
|
||
/**
|
||
* 是否可关闭
|
||
*/
|
||
closable?: boolean
|
||
/**
|
||
* 是否可最小化
|
||
*/
|
||
minimizable?: boolean
|
||
/**
|
||
* 是否可最大化
|
||
*/
|
||
maximizable?: boolean
|
||
/**
|
||
* 是否为模态窗体
|
||
*/
|
||
modal?: boolean
|
||
/**
|
||
* 是否始终置顶
|
||
*/
|
||
alwaysOnTop?: boolean
|
||
/**
|
||
* 窗体X坐标位置
|
||
*/
|
||
x?: number
|
||
/**
|
||
* 窗体Y坐标位置
|
||
*/
|
||
y?: number
|
||
}
|
||
|
||
/** 窗口参数 */
|
||
export interface IWindowFormData {
|
||
/**
|
||
* 窗体标题
|
||
*/
|
||
title: string
|
||
/**
|
||
* 窗体宽度(像素)
|
||
*/
|
||
width: number
|
||
/**
|
||
* 窗体高度(像素)
|
||
*/
|
||
height: number
|
||
/**
|
||
* 窗体最小宽度(像素)
|
||
*/
|
||
minWidth: number
|
||
/**
|
||
* 窗体最小高度(像素)
|
||
*/
|
||
minHeight: number
|
||
/**
|
||
* 窗体最大宽度(像素)
|
||
*/
|
||
maxWidth: number
|
||
/**
|
||
* 窗体最大高度(像素)
|
||
*/
|
||
maxHeight: number
|
||
/**
|
||
* 是否可调整大小
|
||
*/
|
||
resizable: boolean
|
||
/**
|
||
* 是否可移动
|
||
*/
|
||
movable: boolean
|
||
/**
|
||
* 是否可关闭
|
||
*/
|
||
closable: boolean
|
||
/**
|
||
* 是否可最小化
|
||
*/
|
||
minimizable: boolean
|
||
/**
|
||
* 是否可最大化
|
||
*/
|
||
maximizable: boolean
|
||
/**
|
||
* 是否为模态窗体
|
||
*/
|
||
modal: boolean
|
||
/**
|
||
* 是否始终置顶
|
||
*/
|
||
alwaysOnTop: boolean
|
||
/**
|
||
* 窗体X坐标位置
|
||
*/
|
||
x: number
|
||
/**
|
||
* 窗体Y坐标位置
|
||
*/
|
||
y: number
|
||
}
|
||
|
||
/** 窗口实例对象 */
|
||
export interface IWindowFormInstance {
|
||
/** 窗口ID */
|
||
id: string
|
||
/** 应用ID */
|
||
appId: string
|
||
/** 窗口参数 */
|
||
config: IWindowFormData
|
||
/** 窗口状态 */
|
||
state: EWindowFormState
|
||
/** 窗口ZIndex */
|
||
zIndex: number
|
||
/** 创建时间 - 时间戳 */
|
||
createdAt: number
|
||
/** 更新时间 - 时间戳 */
|
||
updatedAt: number
|
||
/** 窗口DOM元素 */
|
||
element?: HTMLElement
|
||
/** 窗口iframe元素 */
|
||
iframe?: HTMLIFrameElement
|
||
/** 记录事件解绑函数 */
|
||
subscriptions: (() => void)[]
|
||
}
|
||
|
||
/**
|
||
* WindowFormDataManager
|
||
* -------------------
|
||
* 窗口数据与状态的中心管理器。
|
||
* - 管理 Map<id, IWindowFormInstance>
|
||
* - 控制 ZIndex
|
||
* - 管理状态变更与事件通知
|
||
*/
|
||
export class WindowFormDataManager {
|
||
private windowForms = new Map<string, IWindowFormInstance>()
|
||
private activeWindowId: string | null = null
|
||
private nextZIndex = 1000
|
||
private wfEventBus: IEventBuilder<IWindowFormEvents>
|
||
|
||
constructor(wfEventBus: IEventBuilder<IWindowFormEvents>) {
|
||
this.wfEventBus = wfEventBus
|
||
}
|
||
|
||
/** 创建窗口实例数据对象（不含DOM） */
|
||
async createWindowForm(appId: string, config: IWindowFormConfig): Promise<IWindowFormInstance> {
|
||
const id = uuidv4()
|
||
const now = new Date().getTime()
|
||
const mergeConfig: IWindowFormData = {
|
||
title: config.title ?? '窗口',
|
||
width: config.width ?? 300,
|
||
height: config.height ?? 300,
|
||
minWidth: config.minWidth ?? 0,
|
||
minHeight: config.minHeight ?? 0,
|
||
maxWidth: config.maxWidth ?? window.innerWidth,
|
||
maxHeight: config.maxHeight ?? window.innerHeight,
|
||
resizable: config.resizable ?? true,
|
||
movable: config.movable ?? true,
|
||
closable: config.closable ?? true,
|
||
minimizable: config.minimizable ?? true,
|
||
maximizable: config.maximizable ?? true,
|
||
modal: config.modal ?? false,
|
||
alwaysOnTop: config.alwaysOnTop ?? false,
|
||
x: config.x ?? 0,
|
||
y: config.y ?? 0
|
||
}
|
||
|
||
const instance: IWindowFormInstance = {
|
||
id,
|
||
appId,
|
||
config: mergeConfig,
|
||
state: EWindowFormState.CREATING,
|
||
zIndex: this.nextZIndex++,
|
||
createdAt: now,
|
||
updatedAt: now,
|
||
subscriptions: []
|
||
}
|
||
this.windowForms.set(id, instance)
|
||
return instance
|
||
}
|
||
|
||
/** 获取窗口实例 */
|
||
getWindowForm(windowId: string): IWindowFormInstance | undefined {
|
||
return this.windowForms.get(windowId)
|
||
}
|
||
|
||
/** 删除窗口实例 */
|
||
removeWindowForm(windowId: string) {
|
||
this.windowForms.delete(windowId)
|
||
}
|
||
|
||
/** 更新窗口状态 */
|
||
updateState(windowId: string, newState: EWindowFormState, error?: Error) {
|
||
const win = this.windowForms.get(windowId)
|
||
if (!win) return
|
||
const old = win.state
|
||
if (old === newState) return
|
||
win.state = newState
|
||
|
||
this.wfEventBus.notify('onStateChange', windowId, newState, old)
|
||
|
||
this.notifyUpdate(win)
|
||
this.transition(win, newState, error)
|
||
}
|
||
|
||
/** 生命周期状态分发器 */
|
||
private transition(win: IWindowFormInstance, newState: EWindowFormState, error?: Error) {
|
||
const id = win.id
|
||
switch (newState) {
|
||
case EWindowFormState.CREATING:
|
||
this.wfEventBus.notify('onCreating', id)
|
||
break
|
||
case EWindowFormState.LOADING:
|
||
this.wfEventBus.notify('onLoading', id)
|
||
break
|
||
case EWindowFormState.ACTIVE:
|
||
this.wfEventBus.notify('onActivate', id)
|
||
break
|
||
case EWindowFormState.INACTIVE:
|
||
this.wfEventBus.notify('onDeactivate', id)
|
||
break
|
||
case EWindowFormState.MINIMIZED:
|
||
this.wfEventBus.notify('onMinimize', id)
|
||
break
|
||
case EWindowFormState.MAXIMIZED:
|
||
this.wfEventBus.notify('onMaximize', id)
|
||
break
|
||
case EWindowFormState.CLOSING:
|
||
this.wfEventBus.notify('onClose', id)
|
||
break
|
||
case EWindowFormState.DESTROYED:
|
||
this.wfEventBus.notify('onDestroy', id)
|
||
break
|
||
case EWindowFormState.ERROR:
|
||
this.wfEventBus.notify('onError', id, error ?? new Error('未知错误'))
|
||
break
|
||
}
|
||
}
|
||
|
||
/** 聚焦窗口 */
|
||
focus(windowId: string) {
|
||
const win = this.windowForms.get(windowId)
|
||
if (!win) return
|
||
this.activeWindowId = windowId
|
||
win.zIndex = this.nextZIndex++
|
||
if (win.element) win.element.style.zIndex = `${win.zIndex}`
|
||
this.wfEventBus.notify('onFocus', windowId)
|
||
this.notifyUpdate(win)
|
||
}
|
||
|
||
/** 最小化窗口 */
|
||
minimize(windowId: string) {
|
||
const win = this.windowForms.get(windowId)
|
||
if (!win || !win.element) return
|
||
win.element.style.display = 'none'
|
||
this.updateState(windowId, EWindowFormState.MINIMIZED)
|
||
}
|
||
|
||
/** 最大化窗口 */
|
||
maximize(windowId: string) {
|
||
const win = this.windowForms.get(windowId)
|
||
if (!win || !win.element) return
|
||
win.element.dataset.originalWidth = win.element.style.width
|
||
win.element.dataset.originalHeight = win.element.style.height
|
||
win.element.style.position = 'fixed'
|
||
Object.assign(win.element.style, {
|
||
top: '0',
|
||
left: '0',
|
||
width: '100vw',
|
||
height: '100vh'
|
||
})
|
||
this.updateState(windowId, EWindowFormState.MAXIMIZED)
|
||
}
|
||
|
||
/** 还原窗口 */
|
||
restore(windowId: string) {
|
||
const win = this.windowForms.get(windowId)
|
||
if (!win || !win.element) return
|
||
Object.assign(win.element.style, {
|
||
position: 'absolute',
|
||
width: win.element.dataset.originalWidth,
|
||
height: win.element.dataset.originalHeight
|
||
})
|
||
this.updateState(windowId, EWindowFormState.ACTIVE)
|
||
}
|
||
|
||
/** 通知窗口数据更新 */
|
||
private notifyUpdate(win: IWindowFormInstance) {
|
||
const rect = win.element?.getBoundingClientRect()
|
||
if (!rect) return
|
||
this.wfEventBus.notify('onWindowFormDataUpdate', {
|
||
id: win.id,
|
||
state: win.state,
|
||
width: rect.width,
|
||
height: rect.height,
|
||
x: rect.left,
|
||
y: rect.top
|
||
})
|
||
}
|
||
}
|