保存一下
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', this.onMouseMoveDrag);
|
||||
document.addEventListener('mouseup', this.onMouseUpDrag);
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user