diff --git a/src/core/utils/DraggableResizableWindow.ts b/src/core/utils/DraggableResizableWindow.ts index 71a0a81..f3092d2 100644 --- a/src/core/utils/DraggableResizableWindow.ts +++ b/src/core/utils/DraggableResizableWindow.ts @@ -181,6 +181,8 @@ export class DraggableResizableWindow { this.taskbarElementId = options.taskbarElementId; this.init(); + + // this.setDefaultCenterPosition(); } /** 初始化事件 */ @@ -212,6 +214,29 @@ export class DraggableResizableWindow { } } + /** 将窗口设置在居中位置 */ + private setDefaultCenterPosition() { + console.log(JSON.parse(JSON.stringify(this.containerRect))) + const containerWidth = this.containerRect?.width ?? window.innerWidth; + const containerHeight = this.containerRect?.height ?? window.innerHeight; + const targetWidth = this.target.offsetWidth; + const targetHeight = this.target.offsetHeight; + + const x = (containerWidth - targetWidth) / 2; + const y = (containerHeight - targetHeight) / 2; + + if (this.mode === 'position') { + this.target.style.left = `${x}px`; + this.target.style.top = `${y}px`; + } else { + this.target.style.transform = `translate(${x}px, ${y}px)`; + } + + this.currentX = x; + this.currentY = y; + this.updateDefaultBounds(x, y, targetWidth, targetHeight); + } + private onMouseDownDrag = (e: MouseEvent) => { if (this.getResizeDirection(e)) return; // 避免和 resize 冲突 e.preventDefault(); @@ -223,15 +248,10 @@ export class DraggableResizableWindow { this.startX = e.clientX; this.startY = e.clientY; - if (this.mode === 'position') { - const rect = this.target.getBoundingClientRect(); - const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 }; - this.offsetX = rect.left - parentRect.left; - this.offsetY = rect.top - parentRect.top; - } else { - this.offsetX = this.currentX; - this.offsetY = this.currentY; - } + const rect = this.target.getBoundingClientRect(); + const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 }; + this.offsetX = rect.left - parentRect.left; + this.offsetY = rect.top - parentRect.top; document.addEventListener('mousemove', this.onMouseMoveDrag); document.addEventListener('mouseup', this.onMouseUpDrag); diff --git a/src/core/window/impl/WindowFormImpl.ts b/src/core/window/impl/WindowFormImpl.ts index 2f71e78..72e2038 100644 --- a/src/core/window/impl/WindowFormImpl.ts +++ b/src/core/window/impl/WindowFormImpl.ts @@ -77,7 +77,7 @@ export default class WindowFormImpl implements IWindowForm { const win = new DraggableResizableWindow({ target: dom, handle: div, - mode: 'position', + mode: 'transform', snapThreshold: 20, boundary: document.body, taskbarElementId: '#taskbar',