@flowgram.ai/panel-manager-plugin 0.1.0-alpha.24 → 0.1.0-alpha.26

package/dist/index.d.mts

@@ -17,16 +17,19 @@ interface PanelConfig {
 interface PanelFactory<T extends any> {
     key: string;
     defaultSize: number;
+    fullscreen?: boolean;
     maxSize?: number;
     minSize?: number;
     style?: React.CSSProperties;
     /** Allows multiple panels with the same key to be rendered simultaneously  */
     allowDuplicates?: boolean;
     resize?: boolean;
+    keepDOM?: boolean;
     render: (props: T) => React.ReactNode;
 }
 interface PanelEntityConfig<T extends any = any> {
     defaultSize?: number;
+    fullscreen?: boolean;
     style?: React.CSSProperties;
     props?: T;
 }
@@ -96,12 +99,15 @@ type PanelEntityConfigConstant = PanelEntityConfig<any> & {
 };
 interface PanelEntityState {
     size: number;
+    fullscreen: boolean;
+    visible: boolean;
 }
 declare class PanelEntity {
     restore: PanelRestore;
     /** 面板工厂 */
     factory: PanelEntityFactoryConstant;
     config: PanelEntityConfigConstant;
+    readonly globalConfig: PanelManagerConfig;
     private initialized;
     /** 实例唯一标识 */
     id: string;
@@ -109,9 +115,18 @@ declare class PanelEntity {
     node: React.ReactNode;
     store: StoreApi<PanelEntityState>;
     get area(): Area;
+    get mode(): "docked" | "floating";
     get key(): string;
     get renderer(): react.ReactNode;
+    get fullscreen(): boolean;
+    set fullscreen(next: boolean);
+    get resizable(): boolean;
+    get keepDOM(): boolean | undefined;
+    get visible(): boolean;
+    set visible(next: boolean);
+    get layer(): Element | null;
     init(): void;
+    mergeState(): void;
     dispose(): void;
 }
 
@@ -145,10 +160,6 @@ declare const createPanelManagerPlugin: _flowgram_ai_core.PluginCreator<Partial<
 
 declare const usePanelManager: () => PanelManager;
 
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
 declare const usePanel: () => PanelEntity;
 
 /**

package/dist/index.d.ts

@@ -17,16 +17,19 @@ interface PanelConfig {
 interface PanelFactory<T extends any> {
     key: string;
     defaultSize: number;
+    fullscreen?: boolean;
     maxSize?: number;
     minSize?: number;
     style?: React.CSSProperties;
     /** Allows multiple panels with the same key to be rendered simultaneously  */
     allowDuplicates?: boolean;
     resize?: boolean;
+    keepDOM?: boolean;
     render: (props: T) => React.ReactNode;
 }
 interface PanelEntityConfig<T extends any = any> {
     defaultSize?: number;
+    fullscreen?: boolean;
     style?: React.CSSProperties;
     props?: T;
 }
@@ -96,12 +99,15 @@ type PanelEntityConfigConstant = PanelEntityConfig<any> & {
 };
 interface PanelEntityState {
     size: number;
+    fullscreen: boolean;
+    visible: boolean;
 }
 declare class PanelEntity {
     restore: PanelRestore;
     /** 面板工厂 */
     factory: PanelEntityFactoryConstant;
     config: PanelEntityConfigConstant;
+    readonly globalConfig: PanelManagerConfig;
     private initialized;
     /** 实例唯一标识 */
     id: string;
@@ -109,9 +115,18 @@ declare class PanelEntity {
     node: React.ReactNode;
     store: StoreApi<PanelEntityState>;
     get area(): Area;
+    get mode(): "docked" | "floating";
     get key(): string;
     get renderer(): react.ReactNode;
+    get fullscreen(): boolean;
+    set fullscreen(next: boolean);
+    get resizable(): boolean;
+    get keepDOM(): boolean | undefined;
+    get visible(): boolean;
+    set visible(next: boolean);
+    get layer(): Element | null;
     init(): void;
+    mergeState(): void;
     dispose(): void;
 }
 
@@ -145,10 +160,6 @@ declare const createPanelManagerPlugin: _flowgram_ai_core.PluginCreator<Partial<
 
 declare const usePanelManager: () => PanelManager;
 
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
 declare const usePanel: () => PanelEntity;
 
 /**

package/dist/index.js

@@ -74,59 +74,6 @@ PanelRestoreImpl = __decorateClass([
   (0, import_inversify.injectable)()
 ], PanelRestoreImpl);
 
-// src/services/panel-factory.ts
-var PanelEntityFactory = Symbol("PanelEntityFactory");
-var PanelEntityFactoryConstant = Symbol("PanelEntityFactoryConstant");
-var PanelEntityConfigConstant = Symbol("PanelEntityConfigConstant");
-var PANEL_SIZE_DEFAULT = 400;
-var PanelEntity = class {
-  constructor() {
-    this.initialized = false;
-    /** 实例唯一标识 */
-    this.id = (0, import_nanoid.nanoid)();
-    /** 渲染缓存 */
-    this.node = null;
-  }
-  get area() {
-    return this.config.area;
-  }
-  get key() {
-    return this.factory.key;
-  }
-  get renderer() {
-    if (!this.node) {
-      this.node = this.factory.render(this.config.props);
-    }
-    return this.node;
-  }
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-    const cache = this.restore.restore(this.key);
-    this.store = (0, import_vanilla.createStore)(() => ({
-      size: this.config.defaultSize || this.factory.defaultSize || PANEL_SIZE_DEFAULT,
-      ...cache ?? {}
-    }));
-  }
-  dispose() {
-    this.restore.store(this.key, this.store.getState());
-  }
-};
-__decorateClass([
-  (0, import_inversify2.inject)(PanelRestore)
-], PanelEntity.prototype, "restore", 2);
-__decorateClass([
-  (0, import_inversify2.inject)(PanelEntityFactoryConstant)
-], PanelEntity.prototype, "factory", 2);
-__decorateClass([
-  (0, import_inversify2.inject)(PanelEntityConfigConstant)
-], PanelEntity.prototype, "config", 2);
-PanelEntity = __decorateClass([
-  (0, import_inversify2.injectable)()
-], PanelEntity);
-
 // src/components/resize-bar/index.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -226,14 +173,125 @@ var defineConfig = (config) => {
   };
 };
 
+// src/utils.ts
+var merge = (...objs) => {
+  const result = {};
+  for (const obj of objs) {
+    if (!obj || typeof obj !== "object") continue;
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+      if (result[key] === void 0) {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+};
+
+// src/services/panel-factory.ts
+var PanelEntityFactory = Symbol("PanelEntityFactory");
+var PanelEntityFactoryConstant = Symbol("PanelEntityFactoryConstant");
+var PanelEntityConfigConstant = Symbol("PanelEntityConfigConstant");
+var PANEL_SIZE_DEFAULT = 400;
+var PanelEntity = class {
+  constructor() {
+    this.initialized = false;
+    /** 实例唯一标识 */
+    this.id = (0, import_nanoid.nanoid)();
+    /** 渲染缓存 */
+    this.node = null;
+  }
+  get area() {
+    return this.config.area;
+  }
+  get mode() {
+    return this.config.area.startsWith("docked") ? "docked" : "floating";
+  }
+  get key() {
+    return this.factory.key;
+  }
+  get renderer() {
+    if (!this.node) {
+      this.node = this.factory.render(this.config.props);
+    }
+    return this.node;
+  }
+  get fullscreen() {
+    return this.store.getState().fullscreen;
+  }
+  set fullscreen(next) {
+    this.store.setState({ fullscreen: next });
+  }
+  get resizable() {
+    if (this.fullscreen) {
+      return false;
+    }
+    return this.factory.resize !== void 0 ? this.factory.resize : this.globalConfig.autoResize;
+  }
+  get keepDOM() {
+    return this.factory.keepDOM;
+  }
+  get visible() {
+    return this.store.getState().visible;
+  }
+  set visible(next) {
+    this.store.setState({ visible: next });
+  }
+  get layer() {
+    return document.querySelector(
+      this.mode ? ".gedit-flow-panel-layer-wrap-docked" : ".gedit-flow-panel-layer-wrap-floating"
+    );
+  }
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    const cache = this.restore.restore(this.key);
+    const initialState = merge(
+      {
+        size: this.config.defaultSize,
+        fullscreen: this.config.fullscreen
+      },
+      cache ? cache : {},
+      {
+        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,
+        fullscreen: this.factory.fullscreen || false,
+        ...this.factory.keepDOM ? { visible: true } : {}
+      }
+    );
+    this.store = (0, import_vanilla.createStore)(() => initialState);
+  }
+  mergeState() {
+  }
+  dispose() {
+    this.restore.store(this.key, this.store.getState());
+  }
+};
+__decorateClass([
+  (0, import_inversify2.inject)(PanelRestore)
+], PanelEntity.prototype, "restore", 2);
+__decorateClass([
+  (0, import_inversify2.inject)(PanelEntityFactoryConstant)
+], PanelEntity.prototype, "factory", 2);
+__decorateClass([
+  (0, import_inversify2.inject)(PanelEntityConfigConstant)
+], PanelEntity.prototype, "config", 2);
+__decorateClass([
+  (0, import_inversify2.inject)(PanelManagerConfig)
+], PanelEntity.prototype, "globalConfig", 2);
+PanelEntity = __decorateClass([
+  (0, import_inversify2.injectable)()
+], PanelEntity);
+
 // src/services/panel-manager.ts
 var import_inversify3 = require("inversify");
-var import_utils = require("@flowgram.ai/utils");
+var import_utils2 = require("@flowgram.ai/utils");
 var PanelManager = class {
   constructor() {
     this.panelRegistry = /* @__PURE__ */ new Map();
     this.panels = /* @__PURE__ */ new Map();
-    this.onPanelsChangeEvent = new import_utils.Emitter();
+    this.onPanelsChangeEvent = new import_utils2.Emitter();
     this.onPanelsChange = this.onPanelsChangeEvent.event;
   }
   init() {
@@ -250,32 +308,39 @@ var PanelManager = class {
       return;
     }
     const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
-    if (!factory.allowDuplicates && sameKeyPanels.length) {
-      sameKeyPanels.forEach((p) => this.remove(p.id));
-    }
-    const panel = this.createPanel({
-      factory,
-      config: {
-        area,
-        ...options
+    if (factory.keepDOM && sameKeyPanels.length) {
+      const [panel] = sameKeyPanels;
+      this.panels.delete(panel.id);
+      this.panels.set(panel.id, panel);
+      panel.visible = true;
+    } else {
+      if (!factory.allowDuplicates && sameKeyPanels.length) {
+        sameKeyPanels.forEach((p) => this.remove(p.id));
       }
-    });
-    this.panels.set(panel.id, panel);
+      const panel = this.createPanel({
+        factory,
+        config: {
+          area,
+          ...options
+        }
+      });
+      this.panels.set(panel.id, panel);
+    }
     this.trim(area);
     this.onPanelsChangeEvent.fire();
-    console.log("jxj", this.panels);
   }
   /** close panel */
   close(key) {
     const panels = this.getPanels();
     const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
-    closedPanels.forEach((p) => this.remove(p.id));
+    closedPanels.forEach((panel) => {
+      this.remove(panel.id);
+    });
     this.onPanelsChangeEvent.fire();
   }
   trim(area) {
-    const panels = this.getPanels(area);
+    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);
     const areaConfig = this.getAreaConfig(area);
-    console.log("jxj", areaConfig.max, panels.length);
     while (panels.length > areaConfig.max) {
       const removed = panels.shift();
       if (removed) {
@@ -285,7 +350,12 @@ var PanelManager = class {
   }
   remove(id) {
     const panel = this.panels.get(id);
-    if (panel) {
+    if (!panel) {
+      return;
+    }
+    if (panel.keepDOM) {
+      panel.visible = false;
+    } else {
       panel.dispose();
       this.panels.delete(id);
     }
@@ -328,9 +398,9 @@ PanelManager = __decorateClass([
 
 // src/services/panel-layer.ts
 var import_react_dom = __toESM(require("react-dom"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_inversify4 = require("inversify");
-var import_utils2 = require("@flowgram.ai/utils");
+var import_utils3 = require("@flowgram.ai/utils");
 var import_core2 = require("@flowgram.ai/core");
 
 // src/components/panel-layer/panel-layer.tsx
@@ -354,28 +424,42 @@ var useGlobalCSS = ({ cssText, id, cleanup }) => {
 };
 
 // src/components/panel-layer/panel.tsx
-var import_react4 = require("react");
-var import_traditional = require("zustand/traditional");
-var import_shallow = require("zustand/shallow");
-var import_clsx = __toESM(require("clsx"));
+var import_react5 = require("react");
+var import_clsx = require("clsx");
 
 // src/hooks/use-panel-manager.ts
 var import_core = require("@flowgram.ai/core");
 var usePanelManager = () => (0, import_core.useService)(PanelManager);
 
+// src/hooks/use-panel.ts
+var import_react4 = require("react");
+var import_traditional = require("zustand/traditional");
+var import_shallow = require("zustand/shallow");
+
 // src/contexts.ts
 var import_react3 = require("react");
 var PanelContext = (0, import_react3.createContext)({});
 
+// src/hooks/use-panel.ts
+var usePanel = () => (0, import_react4.useContext)(PanelContext);
+var usePanelStore = (selector) => {
+  const panel = usePanel();
+  return (0, import_traditional.useStoreWithEqualityFn)(panel.store, selector, import_shallow.shallow);
+};
+
 // src/components/panel-layer/panel.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PanelItem = ({ panel }) => {
+var PanelItem = ({ panel, hidden }) => {
   const panelManager = usePanelManager();
-  const ref = (0, import_react4.useRef)(null);
-  const resize = panel.factory.resize !== void 0 ? panel.factory.resize : panelManager.config.autoResize;
+  const ref = (0, import_react5.useRef)(null);
   const isHorizontal = ["right", "docked-right"].includes(panel.area);
-  const size = (0, import_traditional.useStoreWithEqualityFn)(panel.store, (s) => s.size, import_shallow.shallow);
-  const sizeStyle = isHorizontal ? { width: size } : { height: size };
+  const { size, fullscreen } = usePanelStore((s) => ({
+    size: s.size,
+    fullscreen: s.fullscreen
+  }));
+  const [layerSize, setLayerSize] = (0, import_react5.useState)(size);
+  const currentSize = fullscreen ? layerSize : size;
+  const sizeStyle = isHorizontal ? { width: currentSize } : { height: currentSize };
   const handleResize = (next) => {
     let nextSize = next;
     if (typeof panel.factory.maxSize === "number" && nextSize > panel.factory.maxSize) {
@@ -385,24 +469,44 @@ var PanelItem = ({ panel }) => {
     }
     panel.store.setState({ size: nextSize });
   };
-  (0, import_react4.useEffect)(() => {
-    if (ref.current) {
+  (0, import_react5.useEffect)(() => {
+    if (ref.current && !fullscreen) {
       const { width, height } = ref.current.getBoundingClientRect();
       const realSize = isHorizontal ? width : height;
       panel.store.setState({ size: realSize });
     }
-  }, []);
+  }, [fullscreen]);
+  (0, import_react5.useEffect)(() => {
+    if (!fullscreen) {
+      return;
+    }
+    const layer = panel.layer;
+    if (!layer) {
+      return;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setLayerSize(isHorizontal ? width : height);
+    });
+    observer.observe(layer);
+    return () => observer.disconnect();
+  }, [fullscreen]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
-      className: (0, import_clsx.default)(
+      className: (0, import_clsx.clsx)(
         "gedit-flow-panel-wrap",
         isHorizontal ? "panel-horizontal" : "panel-vertical"
       ),
       ref,
-      style: { ...panel.factory.style, ...panel.config.style, ...sizeStyle },
+      style: {
+        display: hidden ? "none" : "block",
+        ...panel.factory.style,
+        ...panel.config.style,
+        ...sizeStyle
+      },
       children: [
-        resize && panelManager.config.resizeBarRender({
+        panel.resizable && panelManager.config.resizeBarRender({
           size,
           direction: isHorizontal ? "vertical" : "horizontal",
           onResize: handleResize
@@ -415,16 +519,16 @@ var PanelItem = ({ panel }) => {
 };
 var PanelArea = ({ area }) => {
   const panelManager = usePanelManager();
-  const [panels, setPanels] = (0, import_react4.useState)(panelManager.getPanels(area));
-  (0, import_react4.useEffect)(() => {
+  const [panels, setPanels] = (0, import_react5.useState)(panelManager.getPanels(area));
+  (0, import_react5.useEffect)(() => {
     const dispose = panelManager.onPanelsChange(() => {
-      (0, import_react4.startTransition)(() => {
+      (0, import_react5.startTransition)(() => {
         setPanels(panelManager.getPanels(area));
       });
     });
     return () => dispose.dispose();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelItem, { panel }) }, panel.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelItem, { panel, hidden: panel.keepDOM && !panel.visible }) }, panel.id)) });
 };
 
 // src/components/panel-layer/css.ts
@@ -445,8 +549,6 @@ var globalCSS = `
 
   }
   .gedit-flow-panel-layer-wrap-floating {
-    column-gap: 4px;
-    padding: 4px;
     pointer-events: none;
   }
 
@@ -458,16 +560,12 @@ var globalCSS = `
     display: flex;
     flex-direction: column;
   }
-  .gedit-flow-panel-layer-wrap-floating .gedit-flow-panel-left-area {
-    row-gap: 4px;
-  }
   .gedit-flow-panel-right-area {
     height: 100%;
     flex-grow: 1;
     flex-shrink: 0;
     min-width: 0;
     display: flex;
-    column-gap: 4px;
     max-width: 100%;
   }
 
@@ -539,13 +637,13 @@ var DockedPanelLayer = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(P
 var PanelLayer2 = class extends import_core2.Layer {
   constructor() {
     super(...arguments);
-    this.panelRoot = import_utils2.domUtils.createDivWithClass("gedit-flow-panel-layer");
+    this.panelRoot = import_utils3.domUtils.createDivWithClass("gedit-flow-panel-layer");
     this.layout = null;
   }
   onReady() {
     this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);
     this.toDispose.push(
-      import_utils2.Disposable.create(() => {
+      import_utils3.Disposable.create(() => {
         this.panelRoot.remove();
       })
     );
@@ -558,12 +656,12 @@ var PanelLayer2 = class extends import_core2.Layer {
       top: 0,
       zIndex: 100
     };
-    import_utils2.domUtils.setStyle(this.panelRoot, commonStyle);
+    import_utils3.domUtils.setStyle(this.panelRoot, commonStyle);
   }
   render() {
     if (!this.layout) {
       const { children, ...layoutProps } = this.panelConfig.layerProps;
-      this.layout = (0, import_react5.createElement)(PanelLayer, layoutProps, children);
+      this.layout = (0, import_react6.createElement)(PanelLayer, layoutProps, children);
     }
     return import_react_dom.default.createPortal(this.layout, this.panelRoot);
   }
@@ -604,10 +702,6 @@ var createPanelManagerPlugin = (0, import_core3.definePluginCreator)({
     panelManager.init();
   }
 });
-
-// src/hooks/use-panel.ts
-var import_react6 = require("react");
-var usePanel = () => (0, import_react6.useContext)(PanelContext);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DockedPanelLayer,