From 888cca65e15e00555936bfb0c58960e1d2d43a74 Mon Sep 17 00:00:00 2001 From: azure <983547216@qq.com> Date: Tue, 2 Sep 2025 17:10:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/desktop/ui/hooks/useDesktopInit.ts | 4 +- src/core/utils/DraggableResizable.ts | 68 +++++++++++++-------- src/core/window/impl/WindowFormImpl.ts | 26 +++----- 3 files changed, 55 insertions(+), 43 deletions(-) diff --git a/src/core/desktop/ui/hooks/useDesktopInit.ts b/src/core/desktop/ui/hooks/useDesktopInit.ts index 385b317..3cca5bc 100644 --- a/src/core/desktop/ui/hooks/useDesktopInit.ts +++ b/src/core/desktop/ui/hooks/useDesktopInit.ts @@ -65,8 +65,8 @@ export function useDesktopInit(containerStr: string) { const oldAppIcon = oldAppIcons.find(oldAppIcon => oldAppIcon.name === processInfo.name) // 左上角坐标原点，从上到下从左到右 索引从1开始 - const x = Math.floor(index / gridTemplate.rowCount) + 1 - const y = index % gridTemplate.rowCount + 1 + const x = index % gridTemplate.rowCount + 1 + const y = Math.floor(index / gridTemplate.rowCount) + 1 return { name: processInfo.name, diff --git a/src/core/utils/DraggableResizable.ts b/src/core/utils/DraggableResizable.ts index 16154bd..492cbd0 100644 --- a/src/core/utils/DraggableResizable.ts +++ b/src/core/utils/DraggableResizable.ts @@ -1,8 +1,12 @@ +/** 拖拽移动开始的回调 */ type TDragStartCallback = (x: number, y: number) => void; +/** 拖拽移动中的回调 */ type TDragMoveCallback = (x: number, y: number) => void; +/** 拖拽移动结束的回调 */ type TDragEndCallback = (x: number, y: number) => void; -type ResizeDirection = +/** 拖拽调整尺寸的方向 */ +type TResizeDirection = | 'top' | 'bottom' | 'left' @@ -12,12 +16,18 @@ type ResizeDirection = | 'bottom-left' | 'bottom-right'; -interface ResizeCallbackData { +/** 拖拽调整尺寸回调数据 */ +interface IResizeCallbackData { + /** 宽度 */ width: number; + /** 高度 */ height: number; + /** 顶点坐标 */ top: number; + /** 底点坐标 */ left: number; - direction: ResizeDirection; + /** 拖拽调整尺寸的方向 */ + direction: TResizeDirection; } /** 拖拽参数 */ @@ -41,28 +51,38 @@ interface IDraggableOptions { /** 是否允许超出边界 */ allowOverflow?: boolean; - /** 拖拽回调 */ + /** 拖拽开始回调 */ onStart?: TDragStartCallback; + /** 拖拽移动中的回调 */ onMove?: TDragMoveCallback; + /** 拖拽结束回调 */ onEnd?: TDragEndCallback; - /** 调整尺寸最小最大值 */ + /** 调整尺寸的最小宽度 */ minWidth?: number; + /** 调整尺寸的最小高度 */ minHeight?: number; + /** 调整尺寸的最大宽度 */ maxWidth?: number; + /** 调整尺寸的最大高度 */ maxHeight?: number; - /** 调整尺寸回调 */ - onResize?: (data: ResizeCallbackData) => void; - onResizeEnd?: (data: ResizeCallbackData) => void; + /** 拖拽调整尺寸回调 */ + onResize?: (data: IResizeCallbackData) => void; + /** 拖拽调整尺寸结束回调 */ + onResizeEnd?: (data: IResizeCallbackData) => void; } -/** 拖拽范围边界 */ +/** 拖拽的范围边界 */ interface IBoundaryRect { - minX?: number; - maxX?: number; - minY?: number; - maxY?: number; + /** 最小 X 坐标 */ + minX?: number; + /** 最大 X 坐标 */ + maxX?: number; + /** 最小 Y 坐标 */ + minY?: number; + /** 最大 Y 坐标 */ + maxY?: number; } /** @@ -70,6 +90,7 @@ interface IBoundaryRect { */ export class DraggableResizable { // ---------------- Drag 属性 ---------------- + private handle?: HTMLElement; private target: HTMLElement; private boundary?: HTMLElement | IBoundaryRect; @@ -99,7 +120,8 @@ export class DraggableResizable { private animationFrame?: number; // ---------------- Resize 属性 ---------------- - private currentDirection: ResizeDirection | null = null; + + private currentDirection: TResizeDirection | null = null; private startWidth = 0; private startHeight = 0; private startTop = 0; @@ -108,8 +130,8 @@ export class DraggableResizable { private minHeight: number; private maxWidth: number; private maxHeight: number; - private onResize?: (data: ResizeCallbackData) => void; - private onResizeEnd?: (data: ResizeCallbackData) => void; + private onResize?: (data: IResizeCallbackData) => void; + private onResizeEnd?: (data: IResizeCallbackData) => void; constructor(options: IDraggableOptions) { // Drag @@ -148,9 +170,8 @@ export class DraggableResizable { private init() { if (this.handle) { this.handle.addEventListener('mousedown', this.onMouseDown); - } else { - this.target.addEventListener('mousedown', this.onMouseDown); } + this.target.addEventListener('mousedown', this.onMouseDown); this.target.addEventListener('mousemove', this.onMouseMoveCursor); this.target.addEventListener('mouseleave', this.onMouseLeave); @@ -164,7 +185,6 @@ export class DraggableResizable { } } - // ---------------- Drag 方法 ---------------- private onMouseDown = (e: MouseEvent) => { const dir = this.getResizeDirection(e); if (dir) { @@ -359,8 +379,7 @@ export class DraggableResizable { this.containerRect = element.getBoundingClientRect(); } - // ---------------- Resize 方法 ---------------- - private getResizeDirection(e: MouseEvent): ResizeDirection | null { + private getResizeDirection(e: MouseEvent): TResizeDirection | null { const rect = this.target.getBoundingClientRect(); const offset = 8; const x = e.clientX; @@ -370,6 +389,7 @@ export class DraggableResizable { const bottom = y >= rect.bottom - offset && y <= rect.bottom; const left = x >= rect.left && x <= rect.left + offset; const right = x >= rect.right - offset && x <= rect.right; + // console.log('resize', top, bottom, left, right) if (top && left) return 'top-left'; if (top && right) return 'top-right'; @@ -383,12 +403,12 @@ export class DraggableResizable { return null; } - private updateCursor(direction: ResizeDirection | null) { + private updateCursor(direction: TResizeDirection | null) { if (!direction) { this.target.style.cursor = 'default'; return; } - const cursorMap: Record = { + const cursorMap: Record = { top: 'ns-resize', bottom: 'ns-resize', left: 'ew-resize', @@ -411,7 +431,7 @@ export class DraggableResizable { if (!this.currentDirection && !this.isDragging) this.updateCursor(null); }; - private startResize(e: MouseEvent, dir: ResizeDirection) { + private startResize(e: MouseEvent, dir: TResizeDirection) { this.currentDirection = dir; const rect = this.target.getBoundingClientRect(); this.startX = e.clientX; diff --git a/src/core/window/impl/WindowFormImpl.ts b/src/core/window/impl/WindowFormImpl.ts index a4903d4..55eeb47 100644 --- a/src/core/window/impl/WindowFormImpl.ts +++ b/src/core/window/impl/WindowFormImpl.ts @@ -48,28 +48,20 @@ export default class WindowFormImpl implements IWindowForm { dom.style.height = `${this.height}px`; dom.style.zIndex = '100'; dom.style.backgroundColor = 'white'; - // new Draggable( { - // handle: dom, - // target: dom, - // mode: 'position', - // snapThreshold: 20, - // boundary: document.body - // }) - // new Resizable({ - // target: dom, - // onResizeEnd: (data) => { - // console.log(data) - // } - // }) + const div = document.createElement('div'); + div.style.width = '100%'; + div.style.height = '20px'; + div.style.backgroundColor = 'red'; + dom.appendChild(div) + new DraggableResizable({ target: dom, - handle: dom, + handle: div, mode: 'position', snapThreshold: 20, - boundary: document.body + boundary: document.body, }) this.desktopRootDom.appendChild(dom); } - -} \ No newline at end of file +}