@flowgram.ai/panel-manager-plugin 1.0.2 → 1.0.3

package/dist/esm/index.js

@@ -12,200 +12,90 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/create-panel-manager-plugin.ts
 import { definePluginCreator } from "@flowgram.ai/core";
 
-// src/services/panel-config.ts
-var PanelManagerConfig = Symbol("PanelManagerConfig");
-var defineConfig = (config) => {
-  const defaultConfig = {
-    right: {
-      max: 1
-    },
-    bottom: {
-      max: 1
-    },
-    factories: [],
-    getPopupContainer: (ctx) => ctx.playground.node.parentNode,
-    autoResize: true
-  };
-  return {
-    ...defaultConfig,
-    ...config
-  };
-};
+// src/services/panel-factory.ts
+import { createStore } from "zustand/vanilla";
+import { nanoid } from "nanoid";
+import { inject, injectable as injectable2 } from "inversify";
 
-// src/services/panel-manager.ts
-import { injectable, inject } from "inversify";
-
-// src/services/float-panel.ts
-import { Emitter } from "@flowgram.ai/utils";
-var PANEL_SIZE_DEFAULT = 400;
-var FloatPanel = class {
-  constructor(config) {
-    this.config = config;
-    this.elements = [];
-    this.onUpdateEmitter = new 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);
-    }
-    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();
-      }
-    }
-    this.onUpdateEmitter.fire();
-  }
-  get visible() {
-    return this.elements.length > 0;
+// src/services/panel-restore.ts
+import { injectable } from "inversify";
+var PanelRestore = Symbol("PanelRestore");
+var PanelRestoreImpl = class {
+  constructor() {
+    this.map = /* @__PURE__ */ new Map();
   }
-  close(key) {
-    if (!key) {
-      this.elements = [];
-    } else {
-      this.elements = this.elements.filter((e) => e.key !== key);
-    }
-    this.onUpdateEmitter.fire();
+  store(k, v) {
+    this.map.set(k, v);
   }
-  dispose() {
-    this.elements = [];
-    this.onUpdateEmitter.dispose();
+  restore(k) {
+    return this.map.get(k);
   }
 };
+PanelRestoreImpl = __decorateClass([
+  injectable()
+], PanelRestoreImpl);
 
-// src/services/panel-manager.ts
-var PanelManager = class {
+// 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.panelRegistry = /* @__PURE__ */ new Map();
+    this.initialized = false;
+    /** 实例唯一标识 */
+    this.id = nanoid();
+    /** 渲染缓存 */
+    this.node = null;
   }
-  init() {
-    this.config.factories.forEach((factory) => this.register(factory));
-    this.right = new FloatPanel(this.config.right);
-    this.bottom = new FloatPanel(this.config.bottom);
+  get area() {
+    return this.config.area;
   }
-  register(factory) {
-    this.panelRegistry.set(factory.key, factory);
+  get key() {
+    return this.factory.key;
   }
-  open(key, area = "right", options) {
-    const factory = this.panelRegistry.get(key);
-    if (!factory) {
-      return;
+  get renderer() {
+    if (!this.node) {
+      this.node = this.factory.render(this.config.props);
     }
-    const panel = this.getPanel(area);
-    panel.open(factory, options);
+    return this.node;
   }
-  close(key) {
-    this.right.close(key);
-    this.bottom.close(key);
-  }
-  getPanel(area) {
-    return area === "right" ? this.right : this.bottom;
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    const cache = this.restore.restore(this.key);
+    this.store = createStore(() => ({
+      size: this.config.defaultSize || this.factory.defaultSize || PANEL_SIZE_DEFAULT,
+      ...cache ?? {}
+    }));
   }
   dispose() {
-    this.right.dispose();
-    this.bottom.dispose();
+    this.restore.store(this.key, this.store.getState());
   }
 };
 __decorateClass([
-  inject(PanelManagerConfig)
-], PanelManager.prototype, "config", 2);
-PanelManager = __decorateClass([
-  injectable()
-], PanelManager);
-
-// src/services/panel-layer.ts
-import ReactDOM from "react-dom";
-import { createElement } from "react";
-import { injectable as injectable2, inject as inject2 } from "inversify";
-import { domUtils, Disposable } from "@flowgram.ai/utils";
-import { Layer, PluginContext } from "@flowgram.ai/core";
-
-// src/components/panel-layer/float-panel.tsx
-import { useEffect, useRef as useRef2, startTransition, useState as useState2, useCallback } from "react";
-
-// src/hooks/use-panel-manager.ts
-import { useService } from "@flowgram.ai/core";
-var usePanelManager = () => useService(PanelManager);
-
-// src/components/panel-layer/css.ts
-var globalCSS = `
-  .gedit-flow-panel-layer * {
-    box-sizing: border-box;
-  }
-`;
-var panelLayer = {
-  pointerEvents: "none",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  display: "flex",
-  columnGap: "4px",
-  width: "100%",
-  height: "100%",
-  padding: "4px",
-  boxSizing: "border-box",
-  overflow: "hidden"
-};
-var leftArea = {
-  width: "100%",
-  minWidth: 0,
-  flexGrow: 0,
-  flexShrink: 1,
-  display: "flex",
-  flexDirection: "column",
-  rowGap: "4px"
-};
-var rightArea = {
-  height: "100%",
-  flexGrow: 1,
-  flexShrink: 0,
-  minWidth: 0,
-  display: "flex",
-  columnGap: "4px"
-};
-var mainArea = {
-  position: "relative",
-  overflow: "hidden",
-  flexGrow: 0,
-  flexShrink: 1,
-  width: "100%",
-  height: "100%"
-};
-var bottomArea = {
-  flexGrow: 1,
-  flexShrink: 0,
-  width: "100%",
-  minHeight: 0
-};
-var floatPanelWrap = {
-  pointerEvents: "auto",
-  height: "100%",
-  width: "100%",
-  overflow: "auto"
-};
+  inject(PanelRestore)
+], PanelEntity.prototype, "restore", 2);
+__decorateClass([
+  inject(PanelEntityFactoryConstant)
+], PanelEntity.prototype, "factory", 2);
+__decorateClass([
+  inject(PanelEntityConfigConstant)
+], PanelEntity.prototype, "config", 2);
+PanelEntity = __decorateClass([
+  injectable2()
+], PanelEntity);
 
 // src/components/resize-bar/index.tsx
 import { useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var ResizeBar = ({ onResize, size, isVertical }) => {
+var ResizeBar = ({ onResize, size, direction }) => {
   const currentPoint = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const isVertical = direction === "vertical";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -269,53 +159,342 @@ var ResizeBar = ({ onResize, size, isVertical }) => {
   );
 };
 
-// src/components/panel-layer/float-panel.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var FloatPanel2 = ({ area }) => {
-  const [, setVersion] = useState2(0);
-  const panelManager = usePanelManager();
-  const panel = useRef2(panelManager.getPanel(area));
-  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ jsx2("div", { className: "float-panel-wrap", style: { ...floatPanelWrap, ...i.style }, children: i.el }, i.key));
-  const node = useRef2(render());
+// src/services/panel-config.ts
+var PanelManagerConfig = Symbol("PanelManagerConfig");
+var defineConfig = (config) => {
+  const defaultConfig = {
+    right: {
+      max: 1
+    },
+    bottom: {
+      max: 1
+    },
+    dockedRight: {
+      max: 1
+    },
+    dockedBottom: {
+      max: 1
+    },
+    factories: [],
+    autoResize: true,
+    layerProps: {},
+    resizeBarRender: ResizeBar,
+    getPopupContainer: (ctx) => ctx.playground.node.parentNode
+  };
+  return {
+    ...defaultConfig,
+    ...config
+  };
+};
+
+// src/services/panel-manager.ts
+import { injectable as injectable3, inject as inject2 } from "inversify";
+import { Emitter } from "@flowgram.ai/utils";
+var PanelManager = class {
+  constructor() {
+    this.panelRegistry = /* @__PURE__ */ new Map();
+    this.panels = /* @__PURE__ */ new Map();
+    this.onPanelsChangeEvent = new Emitter();
+    this.onPanelsChange = this.onPanelsChangeEvent.event;
+  }
+  init() {
+    this.config.factories.forEach((factory) => this.register(factory));
+  }
+  /** 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 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();
+    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));
+    this.onPanelsChangeEvent.fire();
+  }
+  trim(area) {
+    const panels = this.getPanels(area);
+    const areaConfig = this.getAreaConfig(area);
+    console.log("jxj", areaConfig.max, panels.length);
+    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.config.dockedBottom;
+      case "docked-right":
+        return this.config.dockedRight;
+      case "bottom":
+        return this.config.bottom;
+      case "right":
+      default:
+        return this.config.right;
+    }
+  }
+  dispose() {
+    this.onPanelsChangeEvent.dispose();
+  }
+};
+__decorateClass([
+  inject2(PanelManagerConfig)
+], PanelManager.prototype, "config", 2);
+__decorateClass([
+  inject2(PanelEntityFactory)
+], PanelManager.prototype, "createPanel", 2);
+PanelManager = __decorateClass([
+  injectable3()
+], PanelManager);
+
+// src/services/panel-layer.ts
+import ReactDOM from "react-dom";
+import { createElement } from "react";
+import { injectable as injectable4, inject as inject3 } from "inversify";
+import { domUtils, Disposable } from "@flowgram.ai/utils";
+import { Layer, PluginContext } from "@flowgram.ai/core";
+
+// src/components/panel-layer/panel-layer.tsx
+import clsx2 from "clsx";
+
+// src/hooks/use-global-css.ts
+import { useEffect } from "react";
+var useGlobalCSS = ({ cssText, id, cleanup }) => {
   useEffect(() => {
-    const dispose = panel.current.onUpdate(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return () => {
+      const existing = document.getElementById(id);
+      if (existing && cleanup) existing.remove();
+    };
+  }, [id]);
+};
+
+// src/components/panel-layer/panel.tsx
+import { useEffect as useEffect2, startTransition, useState as useState2, useRef as useRef2 } from "react";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/shallow";
+import clsx from "clsx";
+
+// src/hooks/use-panel-manager.ts
+import { useService } from "@flowgram.ai/core";
+var usePanelManager = () => useService(PanelManager);
+
+// src/contexts.ts
+import { createContext } from "react";
+var PanelContext = createContext({});
+
+// src/components/panel-layer/panel.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PanelItem = ({ panel }) => {
+  const panelManager = usePanelManager();
+  const ref = useRef2(null);
+  const resize = panel.factory.resize !== void 0 ? panel.factory.resize : panelManager.config.autoResize;
+  const isHorizontal = ["right", "docked-right"].includes(panel.area);
+  const size = useStoreWithEqualityFn(panel.store, (s) => s.size, shallow);
+  const sizeStyle = isHorizontal ? { width: size } : { height: size };
+  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 });
+  };
+  useEffect2(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect();
+      const realSize = isHorizontal ? width : height;
+      panel.store.setState({ size: realSize });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "gedit-flow-panel-wrap",
+        isHorizontal ? "panel-horizontal" : "panel-vertical"
+      ),
+      ref,
+      style: { ...panel.factory.style, ...panel.config.style, ...sizeStyle },
+      children: [
+        resize && panelManager.config.resizeBarRender({
+          size,
+          direction: isHorizontal ? "vertical" : "horizontal",
+          onResize: handleResize
+        }),
+        panel.renderer
+      ]
+    },
+    panel.id
+  );
+};
+var PanelArea = ({ area }) => {
+  const panelManager = usePanelManager();
+  const [panels, setPanels] = useState2(panelManager.getPanels(area));
+  useEffect2(() => {
+    const dispose = panelManager.onPanelsChange(() => {
       startTransition(() => {
-        node.current = render();
-        setVersion((v) => v + 1);
+        setPanels(panelManager.getPanels(area));
       });
     });
     return () => dispose.dispose();
-  }, [panel]);
-  const onResize = useCallback((newSize) => panel.current.updateSize(newSize), []);
-  const size = panel.current.currentSize;
-  const sizeStyle = area === "right" ? { width: size, height: "100%" } : { height: size, width: "100%" };
-  return /* @__PURE__ */ jsxs(
+  }, []);
+  return /* @__PURE__ */ jsx2(Fragment, { children: panels.map((panel) => /* @__PURE__ */ jsx2(PanelContext.Provider, { value: panel, children: /* @__PURE__ */ jsx2(PanelItem, { panel }) }, panel.id)) });
+};
+
+// src/components/panel-layer/css.ts
+var globalCSS = `
+  .gedit-flow-panel-layer-wrap * {
+    box-sizing: border-box;
+  }
+  .gedit-flow-panel-layer-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .gedit-flow-panel-layer-wrap-docked {
+
+  }
+  .gedit-flow-panel-layer-wrap-floating {
+    column-gap: 4px;
+    padding: 4px;
+    pointer-events: none;
+  }
+
+  .gedit-flow-panel-left-area {
+    width: 100%;
+    min-width: 0;
+    flex-grow: 0;
+    flex-shrink: 1;
+    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;
+    flex-grow: 0;
+    flex-shrink: 1;
+    width: 100%;
+    height: 100%;
+  }
+  .gedit-flow-panel-bottom-area {
+    flex-grow: 1;
+    flex-shrink: 0;
+    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%;
+  }
+`;
+
+// src/components/panel-layer/panel-layer.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PanelLayer = ({
+  mode = "floating",
+  className,
+  style,
+  children
+}) => {
+  useGlobalCSS({
+    cssText: globalCSS,
+    id: "flow-panel-layer-css"
+  });
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: "gedit-flow-panel",
-      style: {
-        position: "relative",
-        display: panel.current.visible ? "block" : "none",
-        ...sizeStyle
-      },
+      className: clsx2(
+        "gedit-flow-panel-layer-wrap",
+        mode === "docked" && "gedit-flow-panel-layer-wrap-docked",
+        mode === "floating" && "gedit-flow-panel-layer-wrap-floating",
+        className
+      ),
+      style,
       children: [
-        panelManager.config.autoResize && panel.current.elements.length > 0 && /* @__PURE__ */ jsx2(ResizeBar, { size, isVertical: area === "right", onResize }),
-        node.current
+        /* @__PURE__ */ jsxs2("div", { className: "gedit-flow-panel-left-area", children: [
+          /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-main-area", children }),
+          /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-bottom-area", children: /* @__PURE__ */ jsx3(PanelArea, { area: mode === "docked" ? "docked-bottom" : "bottom" }) })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-right-area", children: /* @__PURE__ */ jsx3(PanelArea, { area: mode === "docked" ? "docked-right" : "right" }) })
       ]
     }
   );
 };
 
-// src/components/panel-layer/panel-layer.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var PanelLayer = ({ children }) => /* @__PURE__ */ jsxs2("div", { style: panelLayer, children: [
-  /* @__PURE__ */ jsx3("style", { dangerouslySetInnerHTML: { __html: globalCSS } }),
-  /* @__PURE__ */ jsxs2("div", { className: "gedit-flow-panel-left-area", style: leftArea, children: [
-    /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-main-area", style: mainArea, children }),
-    /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-bottom-area", style: bottomArea, children: /* @__PURE__ */ jsx3(FloatPanel2, { area: "bottom" }) })
-  ] }),
-  /* @__PURE__ */ jsx3("div", { className: "gedit-flow-panel-right-area", style: rightArea, children: /* @__PURE__ */ jsx3(FloatPanel2, { area: "right" }) })
-] });
+// src/components/panel-layer/docked-panel-layer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DockedPanelLayer = (props) => /* @__PURE__ */ jsx4(PanelLayer, { mode: "docked", ...props });
 
 // src/services/panel-layer.ts
 var PanelLayer2 = class extends Layer {
@@ -344,37 +523,59 @@ var PanelLayer2 = class extends Layer {
   }
   render() {
     if (!this.layout) {
-      this.layout = createElement(PanelLayer);
+      const { children, ...layoutProps } = this.panelConfig.layerProps;
+      this.layout = createElement(PanelLayer, layoutProps, children);
     }
     return ReactDOM.createPortal(this.layout, this.panelRoot);
   }
 };
 __decorateClass([
-  inject2(PanelManagerConfig)
+  inject3(PanelManagerConfig)
 ], PanelLayer2.prototype, "panelConfig", 2);
 __decorateClass([
-  inject2(PluginContext)
+  inject3(PluginContext)
 ], PanelLayer2.prototype, "pluginContext", 2);
 PanelLayer2 = __decorateClass([
-  injectable2()
+  injectable4()
 ], PanelLayer2);
 
 // src/create-panel-manager-plugin.ts
 var createPanelManagerPlugin = 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, opt) {
+  onInit(ctx) {
     ctx.playground.registerLayer(PanelLayer2);
     const panelManager = ctx.container.get(PanelManager);
     panelManager.init();
   }
 });
+
+// src/hooks/use-panel.ts
+import { useContext } from "react";
+var usePanel = () => useContext(PanelContext);
 export {
+  DockedPanelLayer,
   PanelManager,
+  PanelRestore,
   ResizeBar,
   createPanelManagerPlugin,
+  usePanel,
   usePanelManager
 };
 //# sourceMappingURL=index.js.map