1050 lines
29 KiB
TypeScript
1050 lines
29 KiB
TypeScript
import { LitElement, html, css, unsafeCSS } from 'lit'
|
||
import { customElement, property } from 'lit/decorators.js';
|
||
import wfStyle from './css/wf.scss?inline'
|
||
|
||
type TWindowFormState = 'default' | 'minimized' | 'maximized';
|
||
|
||
/** 拖拽移动开始的回调 */
|
||
type TDragStartCallback = (x: number, y: number) => void;
|
||
/** 拖拽移动中的回调 */
|
||
type TDragMoveCallback = (x: number, y: number) => void;
|
||
/** 拖拽移动结束的回调 */
|
||
type TDragEndCallback = (x: number, y: number) => void;
|
||
|
||
/** 拖拽调整尺寸的方向 */
|
||
type TResizeDirection =
|
||
| 't' // 上
|
||
| 'b' // 下
|
||
| 'l' // 左
|
||
| 'r' // 右
|
||
| 'tl' // 左上
|
||
| 'tr' // 右上
|
||
| 'bl' // 左下
|
||
| 'br'; // 右下
|
||
|
||
/** 拖拽调整尺寸回调数据 */
|
||
interface IResizeCallbackData {
|
||
/** 宽度 */
|
||
width: number;
|
||
/** 高度 */
|
||
height: number;
|
||
/** 顶点坐标（相对 offsetParent） */
|
||
top: number;
|
||
/** 左点坐标（相对 offsetParent） */
|
||
left: number;
|
||
/** 拖拽调整尺寸的方向 */
|
||
direction: TResizeDirection | null;
|
||
}
|
||
|
||
/** 元素边界 */
|
||
interface IElementRect {
|
||
/** 宽度 */
|
||
width: number;
|
||
/** 高度 */
|
||
height: number;
|
||
/** x坐标 */
|
||
x: number;
|
||
/** y坐标 */
|
||
y: number;
|
||
}
|
||
|
||
/** 窗口自定义事件 */
|
||
export interface WindowFormEventMap extends HTMLElementEventMap {
|
||
'windowForm:dragStart': CustomEvent<TDragStartCallback>;
|
||
'windowForm:dragMove': CustomEvent<TDragMoveCallback>;
|
||
'windowForm:dragEnd': CustomEvent<TDragEndCallback>;
|
||
'windowForm:resizeStart': CustomEvent<IResizeCallbackData>;
|
||
'windowForm:resizeMove': CustomEvent<IResizeCallbackData>;
|
||
'windowForm:resizeEnd': CustomEvent<IResizeCallbackData>;
|
||
'windowForm:stateChange': CustomEvent<{ state: TWindowFormState }>;
|
||
'windowForm:stateChange:minimize': CustomEvent<{ state: TWindowFormState }>;
|
||
'windowForm:stateChange:maximize': CustomEvent<{ state: TWindowFormState }>;
|
||
'windowForm:stateChange:restore': CustomEvent<{ state: TWindowFormState }>;
|
||
'windowForm:close': CustomEvent;
|
||
'windowForm:minimize': CustomEvent;
|
||
}
|
||
|
||
@customElement('window-form-element')
|
||
export class WindowFormElement extends LitElement {
|
||
// ==== 公共属性 ====
|
||
@property({ type: String }) wid: string
|
||
@property({ type: String }) override title = 'Window'
|
||
@property({ type: Boolean }) resizable = true
|
||
@property({ type: Boolean }) minimizable = true
|
||
@property({ type: Boolean }) maximizable = true
|
||
@property({ type: Boolean }) closable = true
|
||
@property({ type: Boolean, reflect: true }) focused: boolean = true
|
||
@property({ type: String, reflect: true }) windowFormState: TWindowFormState = 'default'
|
||
@property({ type: Object }) dragContainer?: HTMLElement // 元素的父容器
|
||
@property({ type: Number }) snapDistance = 0 // 吸附距离
|
||
@property({ type: Boolean }) snapAnimation = false // 吸附动画
|
||
@property({ type: Number }) snapAnimationDuration = 300 // 吸附动画时长 ms
|
||
@property({ type: Number }) maxWidth?: number = Infinity
|
||
@property({ type: Number }) minWidth?: number = 200
|
||
@property({ type: Number }) maxHeight?: number = Infinity
|
||
@property({ type: Number }) minHeight?: number = 200
|
||
@property({ type: String }) taskbarElementId?: string
|
||
@property({ type: Object }) wfData: any;
|
||
|
||
private _listeners: Array<{ type: string; original: Function; wrapped: EventListener }> = []
|
||
|
||
// ==== 拖拽/缩放状态（内部变量，不触发渲染） ====
|
||
// 自身的x坐标
|
||
private x = 0
|
||
// 自身的y坐标
|
||
private y = 0
|
||
// 自身的宽度
|
||
private width = 640
|
||
// 自身的高度
|
||
private height = 360
|
||
|
||
// 记录拖拽开始时自身x坐标
|
||
private originalX = 0
|
||
// 记录拖拽开始时自身y坐标
|
||
private originalY = 0
|
||
// 鼠标开始拖拽时自身宽度
|
||
private originalWidth = 640
|
||
// 鼠标开始拖拽时高度
|
||
private originalHeight = 360
|
||
|
||
// 鼠标开始拖拽时x坐标
|
||
private pointStartX = 0
|
||
// 鼠标开始拖拽时x坐标
|
||
private pointStartY = 0
|
||
|
||
private animationFrame?: number
|
||
// 是否拖拽状态
|
||
private dragging = false
|
||
// 是否缩放状态
|
||
private resizing = false
|
||
// 缩放方向
|
||
private resizeDir: TResizeDirection | null = null
|
||
|
||
// private get x() {
|
||
// return this.wfData.state.x
|
||
// }
|
||
// private set x(value: number) {
|
||
// this.wfData.patch({ x: value })
|
||
// }
|
||
// private get y() {
|
||
// return this.wfData.state.y
|
||
// }
|
||
// private set y(value: number) {
|
||
// this.wfData.patch({ y: value })
|
||
// }
|
||
|
||
// private windowFormState: TWindowFormState = 'default';
|
||
/** 元素信息 */
|
||
private targetBounds: IElementRect
|
||
/** 最小化前的元素信息 */
|
||
private targetPreMinimizeBounds?: IElementRect
|
||
/** 最大化前的元素信息 */
|
||
private targetPreMaximizedBounds?: IElementRect
|
||
|
||
static override styles = css`
|
||
${unsafeCSS(wfStyle)}
|
||
`
|
||
|
||
protected override createRenderRoot() {
|
||
const root = this.attachShadow({ mode: 'closed' })
|
||
const sheet = new CSSStyleSheet()
|
||
sheet.replaceSync(wfStyle)
|
||
root.adoptedStyleSheets = [sheet]
|
||
return root
|
||
}
|
||
|
||
public addManagedEventListener<K extends keyof WindowFormEventMap>(
|
||
type: K,
|
||
handler: (this: WindowFormElement, ev: WindowFormEventMap[K]) => any,
|
||
options?: boolean | AddEventListenerOptions
|
||
): void
|
||
public addManagedEventListener<K extends keyof WindowFormEventMap>(
|
||
type: K,
|
||
handler: (ev: WindowFormEventMap[K]) => any,
|
||
options?: boolean | AddEventListenerOptions
|
||
): void
|
||
/**
|
||
* 添加受管理的事件监听
|
||
* @param type 事件类型
|
||
* @param handler 事件处理函数
|
||
*/
|
||
public addManagedEventListener<K extends keyof WindowFormEventMap>(
|
||
type: K,
|
||
handler:
|
||
| ((this: WindowFormElement, ev: WindowFormEventMap[K]) => any)
|
||
| ((ev: WindowFormEventMap[K]) => any),
|
||
options?: boolean | AddEventListenerOptions
|
||
) {
|
||
const wrapped: EventListener = (ev: Event) => {
|
||
(handler as any).call(this, ev as WindowFormEventMap[K])
|
||
}
|
||
|
||
this.addEventListener(type, wrapped, options)
|
||
this._listeners.push({ type, original: handler, wrapped })
|
||
}
|
||
|
||
public removeManagedEventListener<K extends keyof WindowFormEventMap>(
|
||
type: K,
|
||
handler:
|
||
| ((this: WindowFormElement, ev: WindowFormEventMap[K]) => any)
|
||
| ((ev: WindowFormEventMap[K]) => any)
|
||
) {
|
||
const index = this._listeners.findIndex(
|
||
l => l.type === type && l.original === handler
|
||
)
|
||
if (index !== -1) {
|
||
const { type: t, wrapped } = this._listeners[index]
|
||
this.removeEventListener(t, wrapped)
|
||
this._listeners.splice(index, 1)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 移除所有受管理事件监听
|
||
*/
|
||
public removeAllManagedListeners() {
|
||
for (const { type, wrapped } of this._listeners) {
|
||
this.removeEventListener(type, wrapped)
|
||
}
|
||
this._listeners = []
|
||
}
|
||
|
||
override firstUpdated() {
|
||
const { width, height } = this.getBoundingClientRect()
|
||
this.width = width || this.width
|
||
this.height = height || this.height
|
||
|
||
const container = this.dragContainer || document.body
|
||
const containerRect = container.getBoundingClientRect()
|
||
this.x = containerRect.width / 2 - this.width / 2
|
||
this.y = containerRect.height / 2 - this.height / 2
|
||
|
||
this.style.width = `${this.width}px`
|
||
this.style.height = `${this.height}px`
|
||
this.style.transform = `translate(${this.x}px, ${this.y}px)`
|
||
|
||
window.addEventListener('pointerup', this.onPointerUp)
|
||
window.addEventListener('pointermove', this.onPointerMove)
|
||
this.addEventListener('pointerdown', this.toggleFocus)
|
||
|
||
this.targetBounds = {
|
||
width: this.width,
|
||
height: this.height,
|
||
x: this.x,
|
||
y: this.y,
|
||
}
|
||
}
|
||
|
||
override disconnectedCallback() {
|
||
super.disconnectedCallback()
|
||
window.removeEventListener('pointerup', this.onPointerUp)
|
||
window.removeEventListener('pointermove', this.onPointerMove)
|
||
this.removeEventListener('pointerdown', this.toggleFocus)
|
||
// wfem.removeEventListener('windowFormFocus', this.windowFormFocusFun)
|
||
this.removeAllManagedListeners()
|
||
}
|
||
|
||
private windowFormFocusFun = (id: string) => {
|
||
if (id === this.wid) {
|
||
this.focused = true
|
||
} else {
|
||
this.focused = false
|
||
}
|
||
}
|
||
|
||
private toggleFocus = () => {
|
||
this.focused = !this.focused
|
||
// wfem.notifyEvent('windowFormFocus', this.wid)
|
||
this.dispatchEvent(
|
||
new CustomEvent('update:focused', {
|
||
detail: this.focused,
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
|
||
// ====== 拖拽 ======
|
||
private onTitlePointerDown = (e: PointerEvent) => {
|
||
if (e.pointerType === 'mouse' && e.button !== 0) return
|
||
if ((e.target as HTMLElement).closest('.controls')) return
|
||
|
||
e.preventDefault()
|
||
|
||
this.dragging = true
|
||
this.pointStartX = e.clientX
|
||
this.pointStartY = e.clientY
|
||
this.originalX = this.x
|
||
this.originalY = this.y
|
||
this.setPointerCapture?.(e.pointerId)
|
||
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:dragStart', {
|
||
detail: { x: this.x, y: this.y },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
|
||
/**
|
||
* 鼠标指针移动
|
||
* @param e
|
||
*/
|
||
private onPointerMove = (e: PointerEvent) => {
|
||
if (this.dragging) {
|
||
const dx = e.clientX - this.pointStartX
|
||
const dy = e.clientY - this.pointStartY
|
||
|
||
const x = this.originalX + dx
|
||
const y = this.originalY + dy
|
||
|
||
const pos = this.applyBoundary(x, y, e.clientX, e.clientY)
|
||
this.applyPosition(pos.x, pos.y)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:dragMove', {
|
||
detail: { x, y },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
} else if (this.resizeDir) {
|
||
this.performResize(e)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 鼠标指针抬起
|
||
* @param e
|
||
*/
|
||
private onPointerUp = (e: PointerEvent) => {
|
||
if (this.dragging) {
|
||
this.dragUp(e)
|
||
}
|
||
if (this.resizeDir) {
|
||
this.resizeUp(e)
|
||
}
|
||
this.dragging = false
|
||
this.resizing = false
|
||
this.resizeDir = null
|
||
document.body.style.cursor = ''
|
||
try {
|
||
this.releasePointerCapture?.(e.pointerId)
|
||
} catch {}
|
||
}
|
||
|
||
/** 获取所有吸附点 */
|
||
private getSnapPoints() {
|
||
const snapPoints = { x: [] as number[], y: [] as number[] }
|
||
const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
|
||
const rect = this.getBoundingClientRect()
|
||
snapPoints.x = [0, containerRect.width - rect.width]
|
||
snapPoints.y = [0, containerRect.height - rect.height]
|
||
return snapPoints
|
||
}
|
||
|
||
/**
|
||
* 根据传入的坐标点位计算吸附距离最近的坐标位置
|
||
* @param x 坐标点 x
|
||
* @param y 坐标点 y
|
||
* @returns {x: number, y: number} 新的位置坐标
|
||
*/
|
||
private calculateSnapping(x: number, y: number): { x: number, y: number} {
|
||
let snappedX = x
|
||
let snappedY = y
|
||
const containerSnap = this.getSnapPoints()
|
||
if (this.snapDistance > 0) {
|
||
for (const sx of containerSnap.x)
|
||
if (Math.abs(x - sx) <= this.snapDistance) {
|
||
snappedX = sx
|
||
break
|
||
}
|
||
for (const sy of containerSnap.y)
|
||
if (Math.abs(y - sy) <= this.snapDistance) {
|
||
snappedY = sy
|
||
break
|
||
}
|
||
}
|
||
return { x: snappedX, y: snappedY }
|
||
}
|
||
|
||
/**
|
||
* 拖拽结束
|
||
* @param e
|
||
* @private
|
||
*/
|
||
private dragUp(e: PointerEvent) {
|
||
const snapped = this.calculateSnapping(this.x, this.y)
|
||
if (this.snapAnimation) {
|
||
this.animateTo(this.x, this.y, snapped.x, snapped.y, this.snapAnimationDuration,
|
||
(x, y) => {
|
||
this.applyPosition(x, y)
|
||
},
|
||
(x, y) => {
|
||
this.applyPosition(snapped.x, snapped.y)
|
||
this.dispatchEvent(new CustomEvent('windowForm:dragEnd', {
|
||
detail: { x: snapped.x, y: snapped.y },
|
||
bubbles: true,
|
||
composed: true,
|
||
}))
|
||
})
|
||
} else {
|
||
this.applyPosition(snapped.x, snapped.y)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:dragEnd', {
|
||
detail: { x: snapped.x, y: snapped.y },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
this.updateTargetBounds(this.x, this.y, this.width, this.height)
|
||
}
|
||
|
||
/**
|
||
* 根据鼠标指针的位置是否在容器边界内来限制窗口坐标
|
||
* @param x 当前元素的左上角坐标 x
|
||
* @param y 当前元素的左上角坐标 y
|
||
* @param pointerX 当前鼠标在容器中的 X 坐标
|
||
* @param pointerY 当前鼠标在容器中的 Y 坐标
|
||
* @returns 限制后的坐标点 { x, y }
|
||
*/
|
||
private applyBoundary(x: number, y: number, pointerX: number, pointerY: number): { x: number; y: number } {
|
||
const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
|
||
|
||
// 限制指针在容器内
|
||
const limitedPointerX = Math.min(Math.max(pointerX, containerRect.left), containerRect.right)
|
||
const limitedPointerY = Math.min(Math.max(pointerY, containerRect.top), containerRect.bottom)
|
||
|
||
// 计算指针被限制后的偏移量
|
||
const dx = limitedPointerX - pointerX
|
||
const dy = limitedPointerY - pointerY
|
||
|
||
// 根据指针偏移调整窗口位置
|
||
x += dx
|
||
y += dy
|
||
|
||
return { x, y }
|
||
}
|
||
|
||
/**
|
||
* 设置拖拽的窗口位置
|
||
* @param x 当前元素的左上角坐标点 x
|
||
* @param y 当前元素的左上角坐标点 y
|
||
* @private
|
||
*/
|
||
private applyPosition(x: number, y: number) {
|
||
this.x = x
|
||
this.y = y
|
||
this.style.transform = `translate(${x}px, ${y}px)`
|
||
}
|
||
|
||
/**
|
||
* 动画移动窗口
|
||
* @param startX 窗口起始点 x
|
||
* @param startY 窗口起始点 y
|
||
* @param targetX 目标点 x
|
||
* @param targetY 目标点 y
|
||
* @param duration 动画时长
|
||
* @param onMove 移动回调
|
||
* @param onComplete 完成回调
|
||
* @private
|
||
*/
|
||
private animateTo(
|
||
startX: number,
|
||
startY: number,
|
||
targetX: number,
|
||
targetY: number,
|
||
duration: number,
|
||
onMove?: (x: number, y: number) => void,
|
||
onComplete?: (x: number, y: number) => void
|
||
) {
|
||
if (this.animationFrame) cancelAnimationFrame(this.animationFrame)
|
||
const deltaX = targetX - startX
|
||
const deltaY = targetY - startY
|
||
const startTime = performance.now()
|
||
|
||
const step = (now: number) => {
|
||
const elapsed = now - startTime
|
||
const progress = Math.min(elapsed / duration, 1)
|
||
const ease = 1 - Math.pow(1 - progress, 3)
|
||
|
||
const x = startX + deltaX * ease
|
||
const y = startY + deltaY * ease
|
||
|
||
onMove?.(x, y)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:dragMove', {
|
||
detail: { x, y },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
|
||
if (progress < 1) {
|
||
this.animationFrame = requestAnimationFrame(step)
|
||
} else {
|
||
onComplete?.(targetX, targetY)
|
||
}
|
||
}
|
||
this.animationFrame = requestAnimationFrame(step)
|
||
}
|
||
|
||
// ====== 缩放 ======
|
||
private startResize = (dir: TResizeDirection, e: PointerEvent) => {
|
||
if (!this.resizable) return
|
||
if (e.pointerType === 'mouse' && e.button !== 0) return
|
||
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
this.resizing = true
|
||
this.resizeDir = dir
|
||
this.pointStartX = e.clientX
|
||
this.pointStartY = e.clientY
|
||
this.originalX = this.x
|
||
this.originalY = this.y
|
||
this.originalWidth = this.width
|
||
this.originalHeight = this.height
|
||
|
||
const target = e.target as HTMLElement
|
||
document.body.style.cursor = target.style.cursor || window.getComputedStyle(target).cursor
|
||
|
||
this.setPointerCapture?.(e.pointerId)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:resizeStart', {
|
||
detail: { x: this.x, y: this.y, width: this.width, height: this.height, dir },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
|
||
/**
|
||
* 缩放
|
||
* @param e
|
||
* @private
|
||
*/
|
||
private performResize(e: PointerEvent) {
|
||
if (!this.resizeDir || !this.resizing) return
|
||
|
||
let newWidth = this.originalWidth
|
||
let newHeight = this.originalHeight
|
||
let newX = this.originalX
|
||
let newY = this.originalY
|
||
|
||
const dx = e.clientX - this.pointStartX
|
||
const dy = e.clientY - this.pointStartY
|
||
|
||
// ====== 根据方向计算临时尺寸与位置 ======
|
||
switch (this.resizeDir) {
|
||
case 'r': // 右侧
|
||
newWidth += dx
|
||
break
|
||
case 'b': // 下方
|
||
newHeight += dy
|
||
break
|
||
case 'l': // 左侧
|
||
newWidth -= dx
|
||
newX += dx
|
||
break
|
||
case 't': // 上方
|
||
newHeight -= dy
|
||
newY += dy
|
||
break
|
||
case 'tl': // 左上角
|
||
newWidth -= dx
|
||
newX += dx
|
||
newHeight -= dy
|
||
newY += dy
|
||
break
|
||
case 'tr': // 右上角
|
||
newWidth += dx
|
||
newHeight -= dy
|
||
newY += dy
|
||
break
|
||
case 'bl': // 左下角
|
||
newWidth -= dx
|
||
newX += dx
|
||
newHeight += dy
|
||
break
|
||
case 'br': // 右下角
|
||
newWidth += dx
|
||
newHeight += dy
|
||
break
|
||
}
|
||
|
||
const { x, y, width, height } = this.applyResizeBounds(newX, newY, newWidth, newHeight, this.resizeDir)
|
||
|
||
this.x = x
|
||
this.y = y
|
||
this.width = width
|
||
this.height = height
|
||
this.style.width = `${this.width}px`
|
||
this.style.height = `${this.height}px`
|
||
this.style.transform = `translate(${this.x}px, ${this.y}px)`
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:resizeMove', {
|
||
detail: { dir: this.resizeDir, width: width, height: height, left: x, top: y },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
|
||
/**
|
||
* 计算尺寸调整约束逻辑，返回约束后的尺寸
|
||
* @param x 坐标 x
|
||
* @param y 坐标 y
|
||
* @param width 宽度
|
||
* @param height 高度
|
||
* @private
|
||
* @returns { x: number, y: number, width: number, height: number } 约束后的尺寸
|
||
*/
|
||
private applyResizeBounds(
|
||
x: number,
|
||
y: number,
|
||
width: number,
|
||
height: number,
|
||
resizeDir: TResizeDirection
|
||
): {
|
||
x: number
|
||
y: number
|
||
width: number
|
||
height: number
|
||
} {
|
||
const { minWidth = 100, minHeight = 100, maxWidth = Infinity, maxHeight = Infinity } = this
|
||
|
||
//#region 限制最大/最小尺寸
|
||
// 限制宽度
|
||
if (width < minWidth) {
|
||
// 左缩时要修正X坐标，否则会跳动
|
||
if (resizeDir.includes('l')) x -= minWidth - width
|
||
width = minWidth
|
||
} else if (width > maxWidth) {
|
||
if (resizeDir.includes('l')) x += width - maxWidth
|
||
width = maxWidth
|
||
}
|
||
|
||
// 限制高度
|
||
if (height < minHeight) {
|
||
if (resizeDir.includes('t')) y -= minHeight - height
|
||
height = minHeight
|
||
} else if (height > maxHeight) {
|
||
if (resizeDir.includes('t')) y += height - maxHeight
|
||
height = maxHeight
|
||
}
|
||
//#endregion
|
||
|
||
//#region 限制在容器边界内
|
||
const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
|
||
const maxLeft = containerRect.width - width
|
||
const maxTop = containerRect.height - height
|
||
|
||
// 左越界（从左侧缩放时）
|
||
if (x < 0) {
|
||
if (resizeDir.includes('l')) {
|
||
// 如果是往左拉出容器，锁定边界
|
||
width += x // 因为x是负数，相当于减小宽度
|
||
}
|
||
x = 0
|
||
}
|
||
|
||
// 顶部越界（从上侧缩放时）
|
||
if (y < 0) {
|
||
if (resizeDir.includes('t')) {
|
||
height += y // y是负数，相当于减小高度
|
||
}
|
||
y = 0
|
||
}
|
||
|
||
// 右越界（从右侧缩放时）
|
||
if (x + width > containerRect.width) {
|
||
if (resizeDir.includes('r')) {
|
||
width = containerRect.width - x
|
||
} else {
|
||
x = Math.min(x, maxLeft)
|
||
}
|
||
}
|
||
|
||
// 底部越界（从下侧缩放时）
|
||
if (y + height > containerRect.height) {
|
||
if (resizeDir.includes('b')) {
|
||
height = containerRect.height - y
|
||
} else {
|
||
y = Math.min(y, maxTop)
|
||
}
|
||
}
|
||
//#endregion
|
||
|
||
// 二次防护：确保不小于最小值
|
||
width = Math.max(width, minWidth)
|
||
height = Math.max(height, minHeight)
|
||
|
||
return {
|
||
x,
|
||
y,
|
||
width,
|
||
height
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 缩放结束
|
||
* @param e
|
||
* @private
|
||
*/
|
||
private resizeUp(e: PointerEvent) {
|
||
if (!this.resizable) return
|
||
|
||
this.updateTargetBounds(this.x, this.y, this.width, this.height)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:resizeEnd', {
|
||
detail: {
|
||
dir: this.resizeDir,
|
||
width: this.width,
|
||
height: this.height,
|
||
left: this.x,
|
||
top: this.y,
|
||
},
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
|
||
// ====== 窗口操作 ======
|
||
// 最小化到任务栏
|
||
private minimize() {
|
||
if (!this.taskbarElementId) return
|
||
if (this.windowFormState === 'minimized') return
|
||
this.targetPreMinimizeBounds = { ...this.targetBounds }
|
||
this.windowFormState = 'minimized'
|
||
|
||
const taskbar = document.querySelector(this.taskbarElementId)
|
||
if (!taskbar) throw new Error('任务栏元素未找到')
|
||
|
||
const rect = taskbar.getBoundingClientRect()
|
||
const startX = this.x
|
||
const startY = this.y
|
||
const startW = this.offsetWidth
|
||
const startH = this.offsetHeight
|
||
|
||
this.animateWindow(
|
||
startX,
|
||
startY,
|
||
startW,
|
||
startH,
|
||
rect.x,
|
||
rect.y,
|
||
rect.width,
|
||
rect.height,
|
||
400,
|
||
(x, y, w, h) => {
|
||
this.applyWindowStyle(x, y, w, h)
|
||
},
|
||
(x, y, w, h) => {
|
||
this.applyWindowStyle(x, y, w, h)
|
||
this.style.display = 'none'
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:stateChange:minimize', {
|
||
detail: { state: this.windowFormState },
|
||
bubbles: true,
|
||
composed: true,
|
||
})
|
||
)
|
||
}
|
||
)
|
||
}
|
||
|
||
/** 最大化 */
|
||
private maximize() {
|
||
if (this.windowFormState === 'maximized') {
|
||
this.restore()
|
||
return
|
||
}
|
||
this.targetPreMaximizedBounds = { ...this.targetBounds }
|
||
this.windowFormState = 'maximized'
|
||
|
||
const rect = this.getBoundingClientRect()
|
||
|
||
const startX = this.x
|
||
const startY = this.y
|
||
const startW = rect.width
|
||
const startH = rect.height
|
||
|
||
const targetX = 0
|
||
const targetY = 0
|
||
const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
|
||
const targetW = containerRect?.width ?? window.innerWidth
|
||
const targetH = containerRect?.height ?? window.innerHeight
|
||
|
||
this.animateWindow(
|
||
startX,
|
||
startY,
|
||
startW,
|
||
startH,
|
||
targetX,
|
||
targetY,
|
||
targetW,
|
||
targetH,
|
||
300,
|
||
(x, y, w, h) => {
|
||
this.applyWindowStyle(x, y, w, h)
|
||
},
|
||
(x, y, w, h) => {
|
||
this.applyWindowStyle(x, y, w, h)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:stateChange:maximize', {
|
||
detail: { state: this.windowFormState },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
},
|
||
)
|
||
}
|
||
|
||
/** 恢复到默认窗体状态 */
|
||
private restore(onComplete?: () => void) {
|
||
if (this.windowFormState === 'default') return
|
||
let b: IElementRect
|
||
if (
|
||
(this.windowFormState as TWindowFormState) === 'minimized' &&
|
||
this.targetPreMinimizeBounds
|
||
) {
|
||
// 最小化恢复，恢复到最小化前的状态
|
||
b = this.targetPreMinimizeBounds
|
||
} else if (
|
||
(this.windowFormState as TWindowFormState) === 'maximized' &&
|
||
this.targetPreMaximizedBounds
|
||
) {
|
||
// 最大化恢复，恢复到最大化前的默认状态
|
||
b = this.targetPreMaximizedBounds
|
||
} else {
|
||
b = this.targetBounds
|
||
}
|
||
|
||
this.windowFormState = 'default'
|
||
|
||
this.style.display = 'block'
|
||
|
||
const startX = this.x
|
||
const startY = this.y
|
||
const startW = this.offsetWidth
|
||
const startH = this.offsetHeight
|
||
|
||
this.animateWindow(
|
||
startX,
|
||
startY,
|
||
startW,
|
||
startH,
|
||
b.x,
|
||
b.y,
|
||
b.width,
|
||
b.height,
|
||
300,
|
||
(x, y, w, h) => {
|
||
this.applyWindowStyle(x, y, w, h)
|
||
},
|
||
(x, y, w, h) => {
|
||
this.applyWindowStyle(x, y, w, h)
|
||
onComplete?.()
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:stateChange:restore', {
|
||
detail: { state: this.windowFormState },
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
},
|
||
)
|
||
}
|
||
|
||
/**
|
||
* 应用窗体样式
|
||
* @param x
|
||
* @param y
|
||
* @param w
|
||
* @param h
|
||
* @private
|
||
*/
|
||
private applyWindowStyle(x: number, y: number, w: number, h: number) {
|
||
this.width = w
|
||
this.height = h
|
||
this.x = x
|
||
this.y = y
|
||
this.style.width = `${w}px`
|
||
this.style.height = `${h}px`
|
||
this.style.transform = `translate(${x}px, ${y}px)`
|
||
}
|
||
|
||
private windowFormClose() {
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:close', {
|
||
bubbles: true,
|
||
composed: true,
|
||
}),
|
||
)
|
||
}
|
||
|
||
/**
|
||
* 窗体最大化、最小化和恢复默认 动画
|
||
* @param startX
|
||
* @param startY
|
||
* @param startW
|
||
* @param startH
|
||
* @param targetX
|
||
* @param targetY
|
||
* @param targetW
|
||
* @param targetH
|
||
* @param duration
|
||
* @param onComplete
|
||
* @private
|
||
*/
|
||
private animateWindow(
|
||
startX: number,
|
||
startY: number,
|
||
startW: number,
|
||
startH: number,
|
||
targetX: number,
|
||
targetY: number,
|
||
targetW: number,
|
||
targetH: number,
|
||
duration: number,
|
||
onUpdating?: (x: number, y: number, w: number, h: number) => void,
|
||
onComplete?: (x: number, y: number, w: number, h: number) => void,
|
||
) {
|
||
const startTime = performance.now()
|
||
const step = (now: number) => {
|
||
const elapsed = now - startTime
|
||
const progress = Math.min(elapsed / duration, 1)
|
||
const ease = 1 - Math.pow(1 - progress, 3)
|
||
|
||
const x = startX + (targetX - startX) * ease
|
||
const y = startY + (targetY - startY) * ease
|
||
const w = startW + (targetW - startW) * ease
|
||
const h = startH + (targetH - startH) * ease
|
||
|
||
onUpdating?.(x, y, w, h)
|
||
|
||
if (progress < 1) {
|
||
requestAnimationFrame(step)
|
||
} else {
|
||
this.style.width = `${targetW}px`
|
||
this.style.height = `${targetH}px`
|
||
onComplete?.(x, y, w, h)
|
||
this.dispatchEvent(
|
||
new CustomEvent('windowForm:stateChange', {
|
||
detail: { state: this.windowFormState },
|
||
bubbles: true,
|
||
composed: true,
|
||
})
|
||
)
|
||
}
|
||
}
|
||
requestAnimationFrame(step)
|
||
}
|
||
|
||
private updateTargetBounds(x: number, y: number, width?: number, height?: number) {
|
||
this.targetBounds = {
|
||
x,
|
||
y,
|
||
width: width ?? this.offsetWidth,
|
||
height: height ?? this.offsetHeight,
|
||
}
|
||
}
|
||
|
||
// ====== 渲染 ======
|
||
override render() {
|
||
return html`
|
||
<div class="window">
|
||
<div class="titlebar" @pointerdown=${this.onTitlePointerDown}>
|
||
<div class="title" title=${this.title}>${this.title}</div>
|
||
<div class="controls">
|
||
${this.minimizable
|
||
? html`<button
|
||
class="ctrl"
|
||
@click=${(e: Event) => {
|
||
e.stopPropagation()
|
||
this.minimize()
|
||
}}
|
||
>
|
||
—
|
||
</button>`
|
||
: null}
|
||
${this.maximizable
|
||
? html`<button
|
||
class="ctrl"
|
||
@click=${(e: Event) => {
|
||
e.stopPropagation()
|
||
this.maximize()
|
||
}}
|
||
>
|
||
${this.windowFormState === 'maximized' ? '▣' : '▢'}
|
||
</button>`
|
||
: null}
|
||
${this.closable
|
||
? html`<button
|
||
class="ctrl"
|
||
@click=${(e: Event) => {
|
||
e.stopPropagation()
|
||
this.windowFormClose()
|
||
}}
|
||
>
|
||
✕
|
||
</button>`
|
||
: null}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content"><slot></slot></div>
|
||
|
||
${this.resizable
|
||
? html`
|
||
<div
|
||
class="resizer t"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('t', e)}
|
||
></div>
|
||
<div
|
||
class="resizer b"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('b', e)}
|
||
></div>
|
||
<div
|
||
class="resizer r"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('r', e)}
|
||
></div>
|
||
<div
|
||
class="resizer l"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('l', e)}
|
||
></div>
|
||
<div
|
||
class="resizer tr"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('tr', e)}
|
||
></div>
|
||
<div
|
||
class="resizer tl"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('tl', e)}
|
||
></div>
|
||
<div
|
||
class="resizer br"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('br', e)}
|
||
></div>
|
||
<div
|
||
class="resizer bl"
|
||
@pointerdown=${(e: PointerEvent) => this.startResize('bl', e)}
|
||
></div>
|
||
`
|
||
: null}
|
||
</div>
|
||
`
|
||
}
|
||
}
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
'window-form-element': WindowFormElement;
|
||
}
|
||
|
||
interface WindowFormElementEventMap extends WindowFormEventMap {}
|
||
}
|