@flowgram.ai/panel-manager-plugin 0.1.0-alpha.18 → 0.1.0-alpha.20

package/dist/index.d.mts

@@ -1,5 +1,7 @@
 import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { PluginContext } from '@flowgram.ai/core';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
+import React$1 from 'react';
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -12,20 +14,52 @@ interface PanelConfig {
 }
 interface PanelFactory<T extends any> {
     key: string;
+    defaultSize: number;
+    style?: React.CSSProperties;
     render: (props: T) => React.ReactNode;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+type PanelLayerProps = React.PropsWithChildren<{
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface PanelManagerConfig {
+    factories: PanelFactory<any>[];
+    right: PanelConfig;
+    bottom: PanelConfig;
+    autoResize: boolean;
+    layerProps: PanelLayerProps;
+    getPopupContainer: (ctx: PluginContext) => HTMLElement;
+}
+declare const PanelManagerConfig: unique symbol;
+
 interface PanelElement {
     key: string;
+    style?: React.CSSProperties;
     el: React.ReactNode;
 }
 declare class FloatPanel {
     private config;
     elements: PanelElement[];
     private onUpdateEmitter;
+    sizeMap: Map<string, number>;
     onUpdate: _flowgram_ai_utils.Event<void>;
+    currentFactoryKey: string;
+    updateSize(newSize: number): void;
+    get currentSize(): number;
     constructor(config: PanelConfig);
     open(factory: PanelFactory<any>, options: any): void;
+    get visible(): boolean;
     close(key?: string): void;
     dispose(): void;
 }
@@ -36,37 +70,37 @@ declare class FloatPanel {
  */
 
 declare class PanelManager {
-    private readonly config;
+    readonly config: PanelManagerConfig;
     readonly panelRegistry: Map<string, PanelFactory<any>>;
     right: FloatPanel;
     bottom: FloatPanel;
     init(): void;
     register<T extends any>(factory: PanelFactory<T>): void;
     open(key: string, area?: Area, options?: any): void;
-    close(key: string, area?: Area): void;
+    close(key?: string): void;
     getPanel(area: Area): FloatPanel;
     dispose(): void;
 }
 
+declare const createPanelManagerPlugin: _flowgram_ai_core.PluginCreator<Partial<PanelManagerConfig>>;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
 
-interface PanelManagerConfig {
-    factories: PanelFactory<any>[];
-    right: PanelConfig;
-    bottom: PanelConfig;
-}
-declare const PanelManagerConfig: unique symbol;
-
-declare const createPanelManagerPlugin: _flowgram_ai_core.PluginCreator<Partial<PanelManagerConfig>>;
+declare const usePanelManager: () => PanelManager;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
 
-declare const usePanelManager: () => PanelManager;
+interface Props {
+    onResize: (w: number) => void;
+    size: number;
+    isVertical?: boolean;
+}
+declare const ResizeBar: React$1.FC<Props>;
 
-export { type Area, type PanelFactory, PanelManager, createPanelManagerPlugin, usePanelManager };
+export { type Area, type PanelFactory, PanelManager, PanelManagerConfig, ResizeBar, createPanelManagerPlugin, usePanelManager };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { PluginContext } from '@flowgram.ai/core';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
+import React$1 from 'react';
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -12,20 +14,52 @@ interface PanelConfig {
 }
 interface PanelFactory<T extends any> {
     key: string;
+    defaultSize: number;
+    style?: React.CSSProperties;
     render: (props: T) => React.ReactNode;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+type PanelLayerProps = React.PropsWithChildren<{
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface PanelManagerConfig {
+    factories: PanelFactory<any>[];
+    right: PanelConfig;
+    bottom: PanelConfig;
+    autoResize: boolean;
+    layerProps: PanelLayerProps;
+    getPopupContainer: (ctx: PluginContext) => HTMLElement;
+}
+declare const PanelManagerConfig: unique symbol;
+
 interface PanelElement {
     key: string;
+    style?: React.CSSProperties;
     el: React.ReactNode;
 }
 declare class FloatPanel {
     private config;
     elements: PanelElement[];
     private onUpdateEmitter;
+    sizeMap: Map<string, number>;
     onUpdate: _flowgram_ai_utils.Event<void>;
+    currentFactoryKey: string;
+    updateSize(newSize: number): void;
+    get currentSize(): number;
     constructor(config: PanelConfig);
     open(factory: PanelFactory<any>, options: any): void;
+    get visible(): boolean;
     close(key?: string): void;
     dispose(): void;
 }
@@ -36,37 +70,37 @@ declare class FloatPanel {
  */
 
 declare class PanelManager {
-    private readonly config;
+    readonly config: PanelManagerConfig;
     readonly panelRegistry: Map<string, PanelFactory<any>>;
     right: FloatPanel;
     bottom: FloatPanel;
     init(): void;
     register<T extends any>(factory: PanelFactory<T>): void;
     open(key: string, area?: Area, options?: any): void;
-    close(key: string, area?: Area): void;
+    close(key?: string): void;
     getPanel(area: Area): FloatPanel;
     dispose(): void;
 }
 
+declare const createPanelManagerPlugin: _flowgram_ai_core.PluginCreator<Partial<PanelManagerConfig>>;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
 
-interface PanelManagerConfig {
-    factories: PanelFactory<any>[];
-    right: PanelConfig;
-    bottom: PanelConfig;
-}
-declare const PanelManagerConfig: unique symbol;
-
-declare const createPanelManagerPlugin: _flowgram_ai_core.PluginCreator<Partial<PanelManagerConfig>>;
+declare const usePanelManager: () => PanelManager;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
 
-declare const usePanelManager: () => PanelManager;
+interface Props {
+    onResize: (w: number) => void;
+    size: number;
+    isVertical?: boolean;
+}
+declare const ResizeBar: React$1.FC<Props>;
 
-export { type Area, type PanelFactory, PanelManager, createPanelManagerPlugin, usePanelManager };
+export { type Area, type PanelFactory, PanelManager, PanelManagerConfig, ResizeBar, createPanelManagerPlugin, usePanelManager };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
@@ -29,6 +39,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 var index_exports = {};
 __export(index_exports, {
   PanelManager: () => PanelManager,
+  ResizeBar: () => ResizeBar,
   createPanelManagerPlugin: () => createPanelManagerPlugin,
   usePanelManager: () => usePanelManager
 });
@@ -47,7 +58,10 @@ var defineConfig = (config) => {
     bottom: {
       max: 1
     },
-    factories: []
+    factories: [],
+    autoResize: true,
+    layerProps: {},
+    getPopupContainer: (ctx) => ctx.playground.node.parentNode
   };
   return {
     ...defaultConfig,
@@ -60,26 +74,43 @@ var import_inversify = require("inversify");
 
 // src/services/float-panel.ts
 var import_utils = require("@flowgram.ai/utils");
+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);
+    }
     if (idx >= 0) {
-      this.elements[idx] = { el, key: factory.key };
+      this.elements[idx] = { el, key: factory.key, style: factory.style };
     } else {
-      this.elements.push({ el, key: factory.key });
+      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;
+  }
   close(key) {
     if (!key) {
       this.elements = [];
@@ -115,9 +146,9 @@ var PanelManager = class {
     const panel = this.getPanel(area);
     panel.open(factory, options);
   }
-  close(key, area = "right") {
-    const panel = this.getPanel(area);
-    panel.close(key);
+  close(key) {
+    this.right.close(key);
+    this.bottom.close(key);
   }
   getPanel(area) {
     return area === "right" ? this.right : this.bottom;
@@ -135,31 +166,57 @@ PanelManager = __decorateClass([
 ], PanelManager);
 
 // src/services/panel-layer.ts
-var import_react2 = require("react");
+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_core2 = require("@flowgram.ai/core");
 
-// src/components/panel-layer/float-panel.tsx
+// src/components/panel-layer/panel-layer.tsx
+var import_clsx = __toESM(require("clsx"));
+
+// src/hooks/use-global-css.ts
 var import_react = require("react");
+var useGlobalCSS = ({ cssText, id, cleanup }) => {
+  (0, import_react.useEffect)(() => {
+    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/float-panel.tsx
+var import_react3 = require("react");
 
 // src/hooks/use-panel-manager.ts
 var import_core = require("@flowgram.ai/core");
 var usePanelManager = () => (0, import_core.useService)(PanelManager);
 
 // src/components/panel-layer/css.ts
-var panelLayer = {
-  pointerEvents: "none",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  display: "flex",
-  columnGap: "4px",
-  width: "100%",
-  height: "100%",
-  padding: "4px",
-  boxSizing: "border-box"
-};
+var globalCSS = `
+  .gedit-flow-panel-layer * {
+    box-sizing: border-box;
+  }
+  .gedit-flow-panel-layer-wrap {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    column-gap: 4px;
+    width: 100%;
+    height: 100%;
+    padding: 4px;
+    overflow: hidden;
+  }
+`;
 var leftArea = {
   width: "100%",
   minWidth: 0,
@@ -194,93 +251,184 @@ var bottomArea = {
 var floatPanelWrap = {
   pointerEvents: "auto",
   height: "100%",
-  width: "100%"
+  width: "100%",
+  overflow: "auto"
 };
 
-// src/components/panel-layer/float-panel.tsx
+// src/components/resize-bar/index.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var FloatPanel2 = ({ area }) => {
-  const [, setVersion] = (0, import_react.useState)(0);
-  const panelManager = usePanelManager();
-  const panel = (0, import_react.useRef)(panelManager.getPanel(area));
-  const render = () => panel.current.elements.map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var ResizeBar = ({ onResize, size, isVertical }) => {
+  const currentPoint = (0, import_react2.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: "float-panel-wrap",
-      style: floatPanelWrap,
-      onMouseDown: (e) => e.stopPropagation(),
-      children: i.el
-    },
-    i.key
-  ));
-  const node = (0, import_react.useRef)(render());
-  (0, import_react.useEffect)(() => {
+      onMouseDown: (e) => {
+        currentPoint.current = isVertical ? e.clientX : e.clientY;
+        e.stopPropagation();
+        e.preventDefault();
+        setIsDragging(true);
+        const mouseUp = () => {
+          currentPoint.current = null;
+          document.body.removeEventListener("mouseup", mouseUp);
+          document.body.removeEventListener("mousemove", mouseMove);
+          setIsDragging(false);
+        };
+        const mouseMove = (e2) => {
+          const delta = currentPoint.current - (isVertical ? e2.clientX : e2.clientY);
+          onResize(size + delta);
+        };
+        document.body.addEventListener("mouseup", mouseUp);
+        document.body.addEventListener("mousemove", mouseMove);
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "auto",
+        ...isVertical ? {
+          cursor: "ew-resize",
+          height: "100%",
+          marginLeft: -5,
+          width: 10
+        } : {
+          cursor: "ns-resize",
+          width: "100%",
+          marginTop: -5,
+          height: 10
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            ...isVertical ? {
+              width: 3,
+              height: "100%"
+            } : {
+              height: 3,
+              width: "100%"
+            },
+            backgroundColor: isDragging || isHovered ? "var(--g-playground-line)" : "transparent"
+          }
+        }
+      )
+    }
+  );
+};
+
+// 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 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_react.startTransition)(() => {
+      (0, import_react3.startTransition)(() => {
         node.current = render();
         setVersion((v) => v + 1);
       });
     });
     return () => dispose.dispose();
   }, [panel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: node.current });
+  const onResize = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: "gedit-flow-panel",
+      style: {
+        position: "relative",
+        display: panel.current.visible ? "block" : "none",
+        ...sizeStyle
+      },
+      children: [
+        panelManager.config.autoResize && panel.current.elements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResizeBar, { size, isVertical: area === "right", onResize }),
+        node.current
+      ]
+    }
+  );
 };
 
 // src/components/panel-layer/panel-layer.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var PanelLayer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-layer", style: panelLayer, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "left-area", style: leftArea, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "main-area", style: mainArea, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "bottom-area", style: bottomArea, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FloatPanel2, { area: "bottom" }) })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "right-area", style: rightArea, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FloatPanel2, { area: "right" }) })
-] });
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PanelLayer = ({ className, style, children }) => {
+  useGlobalCSS({
+    cssText: globalCSS,
+    id: "flow-panel-layer-css"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)("gedit-flow-panel-layer-wrap", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "gedit-flow-panel-left-area", style: leftArea, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-main-area", style: mainArea, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-bottom-area", style: bottomArea, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatPanel2, { area: "bottom" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "gedit-flow-panel-right-area", style: rightArea, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatPanel2, { area: "right" }) })
+  ] });
+};
 
 // src/services/panel-layer.ts
 var PanelLayer2 = class extends import_core2.Layer {
   constructor() {
     super(...arguments);
-    this.node = import_utils2.domUtils.createDivWithClass("gedit-flow-panel-layer");
+    this.panelRoot = import_utils2.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(() => {
+        this.panelRoot.remove();
+      })
+    );
     const commonStyle = {
       pointerEvents: "none",
-      zIndex: 11
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      zIndex: 100
     };
-    import_utils2.domUtils.setStyle(this.node, commonStyle);
-    this.config.onDataChange(() => {
-      const { width, height, scrollX, scrollY } = this.config.config;
-      import_utils2.domUtils.setStyle(this.node, {
-        ...commonStyle,
-        width,
-        height,
-        left: scrollX,
-        top: scrollY
-      });
-    });
+    import_utils2.domUtils.setStyle(this.panelRoot, commonStyle);
   }
   render() {
     if (!this.layout) {
-      this.layout = (0, import_react2.createElement)(PanelLayer);
+      const { children, ...layoutProps } = this.panelConfig.layerProps;
+      this.layout = (0, import_react4.createElement)(PanelLayer, layoutProps, children);
     }
-    return this.layout;
+    return import_react_dom.default.createPortal(this.layout, this.panelRoot);
   }
 };
+__decorateClass([
+  (0, import_inversify2.inject)(PanelManagerConfig)
+], PanelLayer2.prototype, "panelConfig", 2);
+__decorateClass([
+  (0, import_inversify2.inject)(import_core2.PluginContext)
+], PanelLayer2.prototype, "pluginContext", 2);
 PanelLayer2 = __decorateClass([
   (0, import_inversify2.injectable)()
 ], PanelLayer2);
 
 // src/create-panel-manager-plugin.ts
 var createPanelManagerPlugin = (0, import_core3.definePluginCreator)({
-  onBind: ({ bind }) => {
+  onBind: ({ bind }, opt) => {
     bind(PanelManager).to(PanelManager).inSingletonScope();
-    bind(PanelManagerConfig).toConstantValue(defineConfig({}));
+    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));
   },
-  onInit(ctx, opt) {
+  onInit(ctx) {
     ctx.playground.registerLayer(PanelLayer2);
-    const config = defineConfig(opt);
-    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);
     const panelManager = ctx.container.get(PanelManager);
     panelManager.init();
   }
@@ -288,6 +436,7 @@ var createPanelManagerPlugin = (0, import_core3.definePluginCreator)({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PanelManager,
+  ResizeBar,
   createPanelManagerPlugin,
   usePanelManager
 });