✨ 多窗口

Author: zty012

app/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@generouted/react-router": "^1.19.9",
+    "@headlessui/react": "^2.2.4",
     "@marsidev/react-turnstile": "^1.1.0",
     "@msgpack/msgpack": "^3.1.2",
     "@octokit/rest": "^21.0.2",

app/src/core/dataStruct/shape/Rectangle.tsx

@@ -1,7 +1,7 @@
-import { Line } from "./Line";
 import { Renderer } from "../../render/canvas2d/renderer";
 import { Camera } from "../../stage/Camera";
 import { Vector } from "../Vector";
+import { Line } from "./Line";
 import { Shape } from "./Shape";
 
 export class Rectangle extends Shape {
@@ -382,6 +382,10 @@ export class Rectangle extends Shape {
     }
   }
 
+  public translate(offset: Vector): Rectangle {
+    return new Rectangle(this.location.add(offset), this.size);
+  }
+
   public transformWorld2View(): Rectangle {
     return new Rectangle(
       Renderer.transformWorld2View(this.location),

app/src/core/service/SubWindow.tsx

@@ -0,0 +1,64 @@
+import { atom, useAtomValue } from "jotai";
+import { store } from "../../state";
+import { Rectangle } from "../dataStruct/shape/Rectangle";
+import { Vector } from "../dataStruct/Vector";
+
+export namespace SubWindow {
+  export enum IdEnum {}
+  export interface Window {
+    /**
+     * 唯一的id，不能重复，如果创建了已经存在的id，会聚焦到已存在的窗口
+     * 可以是负数，可以不连续
+     */
+    id: number;
+    title: string;
+    children: React.ReactNode;
+    rect: Rectangle;
+    maximized: boolean;
+    minimized: boolean;
+    opacity: number;
+    focused: boolean;
+    zIndex: number;
+  }
+  const subWindowsAtom = atom<Window[]>([]);
+  export const use = () => useAtomValue(subWindowsAtom);
+  function getMaxZIndex() {
+    return store.get(subWindowsAtom).reduce((maxZIndex, window) => Math.max(maxZIndex, window.zIndex), 0);
+  }
+  export function create(options: Partial<Window>): Window {
+    if (options.id && store.get(subWindowsAtom).some((window) => window.id === options.id)) {
+      // 如果已经存在的id，聚焦到已存在的窗口
+      focus(options.id);
+      return store.get(subWindowsAtom).find((window) => window.id === options.id)!;
+    }
+    const win: Window = {
+      id: store.get(subWindowsAtom).reduce((maxId, window) => Math.max(maxId, window.id), 0) + 1,
+      title: "",
+      children: <></>,
+      rect: new Rectangle(Vector.getZero(), Vector.same(100)),
+      maximized: false,
+      minimized: false,
+      opacity: 1,
+      focused: false,
+      zIndex: getMaxZIndex() + 1,
+      ...options,
+    };
+    store.set(subWindowsAtom, [...store.get(subWindowsAtom), win]);
+    return win;
+  }
+  export function update(id: number, options: Partial<Omit<Window, "id">>) {
+    store.set(
+      subWindowsAtom,
+      store.get(subWindowsAtom).map((window) => (window.id === id ? { ...window, ...options } : window)),
+    );
+  }
+  export function close(id: number) {
+    store.set(
+      subWindowsAtom,
+      store.get(subWindowsAtom).filter((window) => window.id !== id),
+    );
+  }
+  export function focus(id: number) {
+    update(id, { focused: true, zIndex: getMaxZIndex() + 1 });
+  }
+}

app/src/index.css

@@ -92,6 +92,10 @@
   --color-settings-text: var(--color-appmenu-item-text);
   --color-field-group-bg: var(--color-field-group-bg);
   --color-field-group-hover-bg: var(--color-field-group-hover-bg);
+  --color-sub-window-bg: var(--color-sub-window-bg);
+  --color-sub-window-text: var(--color-sub-window-text);
+  --color-sub-window-border: var(--color-sub-window-border);
+  --color-sub-window-shadow: var(--color-sub-window-shadow);
 }
 
 @layer base {