保存一下
This commit is contained in:
@@ -181,6 +181,8 @@ export class DraggableResizableWindow {
|
|||||||
this.taskbarElementId = options.taskbarElementId;
|
this.taskbarElementId = options.taskbarElementId;
|
||||||
|
|
||||||
this.init();
|
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) => {
|
private onMouseDownDrag = (e: MouseEvent) => {
|
||||||
if (this.getResizeDirection(e)) return; // 避免和 resize 冲突
|
if (this.getResizeDirection(e)) return; // 避免和 resize 冲突
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -223,15 +248,10 @@ export class DraggableResizableWindow {
|
|||||||
this.startX = e.clientX;
|
this.startX = e.clientX;
|
||||||
this.startY = e.clientY;
|
this.startY = e.clientY;
|
||||||
|
|
||||||
if (this.mode === 'position') {
|
|
||||||
const rect = this.target.getBoundingClientRect();
|
const rect = this.target.getBoundingClientRect();
|
||||||
const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };
|
const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };
|
||||||
this.offsetX = rect.left - parentRect.left;
|
this.offsetX = rect.left - parentRect.left;
|
||||||
this.offsetY = rect.top - parentRect.top;
|
this.offsetY = rect.top - parentRect.top;
|
||||||
} else {
|
|
||||||
this.offsetX = this.currentX;
|
|
||||||
this.offsetY = this.currentY;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('mousemove', this.onMouseMoveDrag);
|
document.addEventListener('mousemove', this.onMouseMoveDrag);
|
||||||
document.addEventListener('mouseup', this.onMouseUpDrag);
|
document.addEventListener('mouseup', this.onMouseUpDrag);
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export default class WindowFormImpl implements IWindowForm {
|
|||||||
const win = new DraggableResizableWindow({
|
const win = new DraggableResizableWindow({
|
||||||
target: dom,
|
target: dom,
|
||||||
handle: div,
|
handle: div,
|
||||||
mode: 'position',
|
mode: 'transform',
|
||||||
snapThreshold: 20,
|
snapThreshold: 20,
|
||||||
boundary: document.body,
|
boundary: document.body,
|
||||||
taskbarElementId: '#taskbar',
|
taskbarElementId: '#taskbar',
|
||||||
|
|||||||
Reference in New Issue
Block a user