@flowgram.ai/panel-manager-plugin 0.1.0-alpha.23 → 0.1.0-alpha.25

package/dist/index.js

@@ -40,14 +40,39 @@ var index_exports = {};
 __export(index_exports, {
   DockedPanelLayer: () => DockedPanelLayer,
   PanelManager: () => PanelManager,
+  PanelRestore: () => PanelRestore,
   ResizeBar: () => ResizeBar,
   createPanelManagerPlugin: () => createPanelManagerPlugin,
+  usePanel: () => usePanel,
   usePanelManager: () => usePanelManager
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/create-panel-manager-plugin.ts
-var import_core4 = require("@flowgram.ai/core");
+var import_core3 = require("@flowgram.ai/core");
+
+// src/services/panel-factory.ts
+var import_vanilla = require("zustand/vanilla");
+var import_nanoid = require("nanoid");
+var import_inversify2 = require("inversify");
+
+// src/services/panel-restore.ts
+var import_inversify = require("inversify");
+var PanelRestore = Symbol("PanelRestore");
+var PanelRestoreImpl = class {
+  constructor() {
+    this.map = /* @__PURE__ */ new Map();
+  }
+  store(k, v) {
+    this.map.set(k, v);
+  }
+  restore(k) {
+    return this.map.get(k);
+  }
+};
+PanelRestoreImpl = __decorateClass([
+  (0, import_inversify.injectable)()
+], PanelRestoreImpl);
 
 // src/components/resize-bar/index.tsx
 var import_react = require("react");
@@ -148,131 +173,214 @@ var defineConfig = (config) => {
   };
 };
 
-// src/services/panel-manager.ts
-var import_inversify = require("inversify");
-var import_core = require("@flowgram.ai/core");
+// 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/float-panel.ts
-var import_utils = require("@flowgram.ai/utils");
+// src/services/panel-factory.ts
+var PanelEntityFactory = Symbol("PanelEntityFactory");
+var PanelEntityFactoryConstant = Symbol("PanelEntityFactoryConstant");
+var PanelEntityConfigConstant = Symbol("PanelEntityConfigConstant");
 var PANEL_SIZE_DEFAULT = 400;
-var FloatPanel = class {
-  constructor(config) {
-    this.config = config;
-    this.elements = [];
-    this.onUpdateEmitter = new import_utils.Emitter();
-    this.sizeMap = /* @__PURE__ */ new Map();
-    this.onUpdate = this.onUpdateEmitter.event;
-    this.currentFactoryKey = "";
-  }
-  updateSize(newSize) {
-    this.sizeMap.set(this.currentFactoryKey, newSize);
-    this.onUpdateEmitter.fire();
-  }
-  get currentSize() {
-    return this.sizeMap.get(this.currentFactoryKey) || PANEL_SIZE_DEFAULT;
-  }
-  open(factory, options) {
-    const el = factory.render(options?.props);
-    const idx = this.elements.findIndex((e) => e.key === factory.key);
-    this.currentFactoryKey = factory.key;
-    if (!this.sizeMap.has(factory.key)) {
-      this.sizeMap.set(factory.key, factory.defaultSize || PANEL_SIZE_DEFAULT);
+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);
     }
-    if (idx >= 0) {
-      this.elements[idx] = { el, key: factory.key, style: factory.style };
-    } else {
-      this.elements.push({ el, key: factory.key, style: factory.style });
-      if (this.elements.length > this.config.max) {
-        this.elements.shift();
-      }
+    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;
     }
-    this.onUpdateEmitter.fire();
+    return this.factory.resize !== void 0 ? this.factory.resize : this.globalConfig.autoResize;
   }
-  get visible() {
-    return this.elements.length > 0;
+  get layer() {
+    return document.querySelector(
+      this.mode ? ".gedit-flow-panel-layer-wrap-docked" : ".gedit-flow-panel-layer-wrap-floating"
+    );
   }
-  close(key) {
-    if (!key) {
-      this.elements = [];
-    } else {
-      this.elements = this.elements.filter((e) => e.key !== key);
+  init() {
+    if (this.initialized) {
+      return;
     }
-    this.onUpdateEmitter.fire();
+    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.store = (0, import_vanilla.createStore)(() => initialState);
+  }
+  mergeState() {
   }
   dispose() {
-    this.elements = [];
-    this.onUpdateEmitter.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_utils2 = require("@flowgram.ai/utils");
 var PanelManager = class {
   constructor() {
     this.panelRegistry = /* @__PURE__ */ new Map();
+    this.panels = /* @__PURE__ */ new Map();
+    this.onPanelsChangeEvent = new import_utils2.Emitter();
+    this.onPanelsChange = this.onPanelsChangeEvent.event;
   }
   init() {
     this.config.factories.forEach((factory) => this.register(factory));
-    this.right = new FloatPanel(this.config.right);
-    this.bottom = new FloatPanel(this.config.bottom);
-    this.dockedRight = new FloatPanel(this.config.dockedRight);
-    this.dockedBottom = new FloatPanel(this.config.dockedBottom);
   }
+  /** registry panel factory */
   register(factory) {
     this.panelRegistry.set(factory.key, factory);
   }
+  /** open panel */
   open(key, area = "right", options) {
     const factory = this.panelRegistry.get(key);
     if (!factory) {
       return;
     }
-    const panel = this.getPanel(area);
-    panel.open(factory, options);
+    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
+      }
+    });
+    this.panels.set(panel.id, panel);
+    this.trim(area);
+    this.onPanelsChangeEvent.fire();
   }
+  /** close panel */
   close(key) {
-    this.right.close(key);
-    this.bottom.close(key);
-    this.dockedRight.close(key);
-    this.dockedBottom.close(key);
+    const panels = this.getPanels();
+    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
+    closedPanels.forEach((p) => this.remove(p.id));
+    this.onPanelsChangeEvent.fire();
   }
-  getPanel(area) {
+  trim(area) {
+    const panels = this.getPanels(area);
+    const areaConfig = this.getAreaConfig(area);
+    while (panels.length > areaConfig.max) {
+      const removed = panels.shift();
+      if (removed) {
+        this.remove(removed.id);
+      }
+    }
+  }
+  remove(id) {
+    const panel = this.panels.get(id);
+    if (panel) {
+      panel.dispose();
+      this.panels.delete(id);
+    }
+  }
+  getPanels(area) {
+    const panels = [];
+    this.panels.forEach((panel) => {
+      if (!area || panel.area === area) {
+        panels.push(panel);
+      }
+    });
+    return panels;
+  }
+  getAreaConfig(area) {
     switch (area) {
       case "docked-bottom":
-        return this.dockedBottom;
+        return this.config.dockedBottom;
       case "docked-right":
-        return this.dockedRight;
+        return this.config.dockedRight;
       case "bottom":
-        return this.bottom;
+        return this.config.bottom;
       case "right":
       default:
-        return this.right;
+        return this.config.right;
     }
   }
   dispose() {
-    this.right.dispose();
-    this.bottom.dispose();
-    this.dockedBottom.dispose();
-    this.dockedRight.dispose();
+    this.onPanelsChangeEvent.dispose();
   }
 };
 __decorateClass([
-  (0, import_inversify.inject)(import_core.Playground)
-], PanelManager.prototype, "playground", 2);
-__decorateClass([
-  (0, import_inversify.inject)(PanelManagerConfig)
+  (0, import_inversify3.inject)(PanelManagerConfig)
 ], PanelManager.prototype, "config", 2);
+__decorateClass([
+  (0, import_inversify3.inject)(PanelEntityFactory)
+], PanelManager.prototype, "createPanel", 2);
 PanelManager = __decorateClass([
-  (0, import_inversify.injectable)()
+  (0, import_inversify3.injectable)()
 ], PanelManager);
 
 // src/services/panel-layer.ts
 var import_react_dom = __toESM(require("react-dom"));
-var import_react4 = require("react");
-var import_inversify2 = require("inversify");
-var import_utils2 = require("@flowgram.ai/utils");
-var import_core3 = require("@flowgram.ai/core");
+var import_react6 = require("react");
+var import_inversify4 = require("inversify");
+var import_utils3 = require("@flowgram.ai/utils");
+var import_core2 = require("@flowgram.ai/core");
 
 // src/components/panel-layer/panel-layer.tsx
-var import_clsx = __toESM(require("clsx"));
+var import_clsx2 = __toESM(require("clsx"));
 
 // src/hooks/use-global-css.ts
 var import_react2 = require("react");
@@ -291,12 +399,105 @@ var useGlobalCSS = ({ cssText, id, cleanup }) => {
   }, [id]);
 };
 
-// src/components/panel-layer/float-panel.tsx
-var import_react3 = require("react");
+// src/components/panel-layer/panel.tsx
+var import_react5 = require("react");
+var import_clsx = require("clsx");
 
 // src/hooks/use-panel-manager.ts
-var import_core2 = require("@flowgram.ai/core");
-var usePanelManager = () => (0, import_core2.useService)(PanelManager);
+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 }) => {
+  const panelManager = usePanelManager();
+  const ref = (0, import_react5.useRef)(null);
+  const isHorizontal = ["right", "docked-right"].includes(panel.area);
+  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) {
+      nextSize = panel.factory.maxSize;
+    } else if (typeof panel.factory.minSize === "number" && nextSize < panel.factory.minSize) {
+      nextSize = panel.factory.minSize;
+    }
+    panel.store.setState({ size: nextSize });
+  };
+  (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.clsx)(
+        "gedit-flow-panel-wrap",
+        isHorizontal ? "panel-horizontal" : "panel-vertical"
+      ),
+      ref,
+      style: { ...panel.factory.style, ...panel.config.style, ...sizeStyle },
+      children: [
+        panel.resizable && panelManager.config.resizeBarRender({
+          size,
+          direction: isHorizontal ? "vertical" : "horizontal",
+          onResize: handleResize
+        }),
+        panel.renderer
+      ]
+    },
+    panel.id
+  );
+};
+var PanelArea = ({ area }) => {
+  const panelManager = usePanelManager();
+  const [panels, setPanels] = (0, import_react5.useState)(panelManager.getPanels(area));
+  (0, import_react5.useEffect)(() => {
+    const dispose = panelManager.onPanelsChange(() => {
+      (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)) });
+};
 
 // src/components/panel-layer/css.ts
 var globalCSS = `
@@ -316,8 +517,6 @@ var globalCSS = `
 
   }
   .gedit-flow-panel-layer-wrap-floating {
-    column-gap: 4px;
-    padding: 4px;
     pointer-events: none;
   }
 
@@ -329,18 +528,15 @@ 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%;
   }
-  
+
   .gedit-flow-panel-main-area {
     position: relative;
     overflow: hidden;
@@ -355,55 +551,18 @@ var globalCSS = `
     width: 100%;
     min-height: 0;
   }
+  .gedit-flow-panel-wrap {
+    pointer-events: auto;
+    overflow: auto;
+    position: relative;
+  }
+  .gedit-flow-panel-wrap.panel-horizontal {
+    height: 100%;
+  }
+  .gedit-flow-panel-wrap.panel-vertical {
+    width: 100%;
+  }
 `;
-var floatPanelWrap = {
-  pointerEvents: "auto",
-  height: "100%",
-  width: "100%",
-  overflow: "auto"
-};
-
-// src/components/panel-layer/float-panel.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FloatPanel2 = ({ area }) => {
-  const [, setVersion] = (0, import_react3.useState)(0);
-  const panelManager = usePanelManager();
-  const panel = (0, import_react3.useRef)(panelManager.getPanel(area));
-  const isHorizontal = ["right", "docked-right"].includes(area);
-  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "float-panel-wrap", style: { ...floatPanelWrap, ...i.style }, children: i.el }, i.key));
-  const node = (0, import_react3.useRef)(render());
-  (0, import_react3.useEffect)(() => {
-    const dispose = panel.current.onUpdate(() => {
-      (0, import_react3.startTransition)(() => {
-        node.current = render();
-        setVersion((v) => v + 1);
-      });
-    });
-    return () => dispose.dispose();
-  }, [panel]);
-  const onResize = (0, import_react3.useCallback)((newSize) => panel.current.updateSize(newSize), []);
-  const size = panel.current.currentSize;
-  const sizeStyle = isHorizontal ? { width: size, height: "100%" } : { height: size, width: "100%" };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      className: "gedit-flow-panel",
-      style: {
-        position: "relative",
-        display: panel.current.visible ? "block" : "none",
-        ...sizeStyle
-      },
-      children: [
-        panelManager.config.resizeBarRender({
-          size,
-          direction: isHorizontal ? "vertical" : "horizontal",
-          onResize
-        }),
-        node.current
-      ]
-    }
-  );
-};
 
 // src/components/panel-layer/panel-layer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -420,7 +579,7 @@ var PanelLayer = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
-      className: (0, import_clsx.default)(
+      className: (0, import_clsx2.default)(
         "gedit-flow-panel-layer-wrap",
         mode === "docked" && "gedit-flow-panel-layer-wrap-docked",
         mode === "floating" && "gedit-flow-panel-layer-wrap-floating",
@@ -430,9 +589,9 @@ var PanelLayer = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gedit-flow-panel-left-area", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-main-area", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-bottom-area", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatPanel2, { area: mode === "docked" ? "docked-bottom" : "bottom" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-bottom-area", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelArea, { area: mode === "docked" ? "docked-bottom" : "bottom" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatPanel2, { area: mode === "docked" ? "docked-right" : "right" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }) })
       ]
     }
   );
@@ -443,16 +602,16 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var DockedPanelLayer = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelLayer, { mode: "docked", ...props });
 
 // src/services/panel-layer.ts
-var PanelLayer2 = class extends import_core3.Layer {
+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();
       })
     );
@@ -465,31 +624,45 @@ var PanelLayer2 = class extends import_core3.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_react4.createElement)(PanelLayer, layoutProps, children);
+      this.layout = (0, import_react6.createElement)(PanelLayer, layoutProps, children);
     }
     return import_react_dom.default.createPortal(this.layout, this.panelRoot);
   }
 };
 __decorateClass([
-  (0, import_inversify2.inject)(PanelManagerConfig)
+  (0, import_inversify4.inject)(PanelManagerConfig)
 ], PanelLayer2.prototype, "panelConfig", 2);
 __decorateClass([
-  (0, import_inversify2.inject)(import_core3.PluginContext)
+  (0, import_inversify4.inject)(import_core2.PluginContext)
 ], PanelLayer2.prototype, "pluginContext", 2);
 PanelLayer2 = __decorateClass([
-  (0, import_inversify2.injectable)()
+  (0, import_inversify4.injectable)()
 ], PanelLayer2);
 
 // src/create-panel-manager-plugin.ts
-var createPanelManagerPlugin = (0, import_core4.definePluginCreator)({
+var createPanelManagerPlugin = (0, import_core3.definePluginCreator)({
   onBind: ({ bind }, opt) => {
     bind(PanelManager).to(PanelManager).inSingletonScope();
+    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();
     bind(PanelManagerConfig).toConstantValue(defineConfig(opt));
+    bind(PanelEntityFactory).toFactory(
+      (context) => ({
+        factory,
+        config
+      }) => {
+        const container = context.container.createChild();
+        container.bind(PanelEntityFactoryConstant).toConstantValue(factory);
+        container.bind(PanelEntityConfigConstant).toConstantValue(config);
+        const panel = container.resolve(PanelEntity);
+        panel.init();
+        return panel;
+      }
+    );
   },
   onInit(ctx) {
     ctx.playground.registerLayer(PanelLayer2);
@@ -501,8 +674,10 @@ var createPanelManagerPlugin = (0, import_core4.definePluginCreator)({
 0 && (module.exports = {
   DockedPanelLayer,
   PanelManager,
+  PanelRestore,
   ResizeBar,
   createPanelManagerPlugin,
+  usePanel,
   usePanelManager
 });
 //# sourceMappingURL=index.js.map