WindowFormElement

src/core/window/ui/WindowFormElement.ts

@@ -47,6 +47,16 @@ interface IElementRect {
   left: number;
 }
 
+export interface WindowFormEventMap {
+  '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 }>;
+}
+
 @customElement('window-form-element')
 export class WindowFormElement extends LitElement {
   // ==== 公共属性 ====
@@ -84,6 +94,7 @@ export class WindowFormElement extends LitElement {
   private width = 640;
   private height = 360;
   private animationFrame?: number;
+  private resizing = false;
 
   private minimized = false;
   private maximized = false;
@@ -97,6 +108,14 @@ export class WindowFormElement extends LitElement {
 
   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
+  }
+
   override firstUpdated() {
     window.addEventListener('pointerup', this.onPointerUp);
     window.addEventListener('pointermove', this.onPointerMove);
@@ -177,7 +196,9 @@ export class WindowFormElement extends LitElement {
       this.resizeUp(e);
     }
     this.dragging = false;
+    this.resizing = false;
     this.resizeDir = null;
+    document.body.style.cursor = ''
     try { this.releasePointerCapture?.(e.pointerId); } catch {}
   };
 
@@ -287,6 +308,7 @@ export class WindowFormElement extends LitElement {
 
     e.preventDefault();
     e.stopPropagation();
+    this.resizing = true;
     this.resizeDir = dir;
     this.startX = e.clientX;
     this.startY = e.clientY;
@@ -297,6 +319,9 @@ export class WindowFormElement extends LitElement {
     this.startX_host = rect.left;
     this.startY_host = rect.top;
 
+    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 },
@@ -306,7 +331,7 @@ export class WindowFormElement extends LitElement {
   };
 
   private performResize(e: PointerEvent) {
-    if (!this.resizeDir) return;
+    if (!this.resizeDir || !this.resizing) return;
 
     let newWidth = this.startWidth;
     let newHeight = this.startHeight;