@flowgram.ai/panel-manager-plugin 0.4.19 → 0.5.0

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,42 @@ 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
+ */
+
+interface PanelManagerConfig {
+    factories: PanelFactory<any>[];
+    right: PanelConfig;
+    bottom: PanelConfig;
+    getPopupContainer: (ctx: PluginContext) => HTMLElement;
+    autoResize: boolean;
+}
+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 +60,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, 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,9 @@ var defineConfig = (config) => {
     bottom: {
       max: 1
     },
-    factories: []
+    factories: [],
+    getPopupContainer: (ctx) => ctx.playground.node.parentNode,
+    autoResize: true
   };
   return {
     ...defaultConfig,
@@ -60,26 +73,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 +145,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,19 +165,25 @@ PanelManager = __decorateClass([
 ], PanelManager);
 
 // src/services/panel-layer.ts
-var import_react2 = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+var import_react3 = 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
-var import_react = require("react");
+var import_react2 = 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 globalCSS = `
+  .gedit-flow-panel-layer * {
+    box-sizing: border-box;
+  }
+`;
 var panelLayer = {
   pointerEvents: "none",
   position: "absolute",
@@ -158,7 +194,8 @@ var panelLayer = {
   width: "100%",
   height: "100%",
   padding: "4px",
-  boxSizing: "border-box"
+  boxSizing: "border-box",
+  overflow: "hidden"
 };
 var leftArea = {
   width: "100%",
@@ -194,93 +231,178 @@ 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_react = 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_react.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react.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_react2.useState)(0);
+  const panelManager = usePanelManager();
+  const panel = (0, import_react2.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_react2.useRef)(render());
+  (0, import_react2.useEffect)(() => {
     const dispose = panel.current.onUpdate(() => {
-      (0, import_react.startTransition)(() => {
+      (0, import_react2.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_react2.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 && /* @__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" }) })
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PanelLayer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: panelLayer, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { dangerouslySetInnerHTML: { __html: globalCSS } }),
+  /* @__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_runtime2.jsx)("div", { className: "right-area", style: rightArea, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FloatPanel2, { area: "right" }) })
+  /* @__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);
+      this.layout = (0, import_react3.createElement)(PanelLayer);
     }
-    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) {
     ctx.playground.registerLayer(PanelLayer2);
-    const config = defineConfig(opt);
-    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);
     const panelManager = ctx.container.get(PanelManager);
     panelManager.init();
   }
@@ -288,6 +410,7 @@ var createPanelManagerPlugin = (0, import_core3.definePluginCreator)({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PanelManager,
+  ResizeBar,
   createPanelManagerPlugin,
   usePanelManager
 });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-config.ts","../src/services/panel-manager.ts","../src/services/float-panel.ts","../src/services/panel-layer.ts","../src/components/panel-layer/float-panel.tsx","../src/hooks/use-panel-manager.ts","../src/components/panel-layer/css.ts","../src/components/panel-layer/panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/** create plugin function */\nexport { createPanelManagerPlugin } from './create-panel-manager-plugin';\n\n/** services */\nexport { PanelManager } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\n\n/** types */\nexport type { Area, PanelFactory } from './types';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig({}));\n  },\n  onInit(ctx, opt) {\n    ctx.playground.registerLayer(PanelLayer);\n    const config = defineConfig(opt);\n    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    factories: [],\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key: string, area: Area = 'right') {\n    const panel = this.getPanel(area);\n    panel.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  el: React.ReactNode;\n}\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key };\n    } else {\n      this.elements.push({ el, key: factory.key });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createElement } from 'react';\n\nimport { injectable } from 'inversify';\nimport { domUtils } from '@flowgram.ai/utils';\nimport { Layer } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  node = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    const commonStyle = {\n      pointerEvents: 'none',\n      zIndex: 11,\n    };\n    domUtils.setStyle(this.node, commonStyle);\n    this.config.onDataChange(() => {\n      const { width, height, scrollX, scrollY } = this.config.config;\n      domUtils.setStyle(this.node, {\n        ...commonStyle,\n        width,\n        height,\n        left: scrollX,\n        top: scrollY,\n      });\n    });\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      this.layout = createElement(PanelLayerComp);\n    }\n    return this.layout;\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, useRef, startTransition, useState } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div\n        className=\"float-panel-wrap\"\n        key={i.key}\n        style={floatPanelWrap}\n        onMouseDown={(e) => e.stopPropagation()}\n      >\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n\n  return <>{node.current}</>;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const panelLayer: React.CSSProperties = {\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n  width: '100%',\n  height: '100%',\n  padding: '4px',\n  boxSizing: 'border-box',\n};\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FloatPanel } from './float-panel';\nimport { panelLayer, leftArea, rightArea, mainArea, bottomArea } from './css';\n\nexport const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"panel-layer\" style={panelLayer}>\n    <div className=\"left-area\" style={leftArea}>\n      <div className=\"main-area\" style={mainArea}>\n        {children}\n      </div>\n      <div className=\"bottom-area\" style={bottomArea}>\n        <FloatPanel area=\"bottom\" />\n      </div>\n    </div>\n    <div className=\"right-area\" style={rightArea}>\n      <FloatPanel area=\"right\" />\n    </div>\n  </div>\n);\n"],"mappings":"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","names":["import_core","import_react","import_inversify","import_utils","import_core","FloatPanel","import_jsx_runtime","FloatPanel","PanelLayer","PanelLayer"]}
+{"version":3,"sources":["../src/index.ts","../src/create-panel-manager-plugin.ts","../src/services/panel-config.ts","../src/services/panel-manager.ts","../src/services/float-panel.ts","../src/services/panel-layer.ts","../src/components/panel-layer/float-panel.tsx","../src/hooks/use-panel-manager.ts","../src/components/panel-layer/css.ts","../src/components/resize-bar/index.tsx","../src/components/panel-layer/panel-layer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/** create plugin function */\nexport { createPanelManagerPlugin } from './create-panel-manager-plugin';\n\n/** services */\nexport { PanelManager } from './services';\n\n/** react hooks */\nexport { usePanelManager } from './hooks/use-panel-manager';\n\nexport { ResizeBar } from './components/resize-bar';\n\n/** types */\nexport type { Area, PanelFactory } from './types';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram.ai/core';\n\nimport { defineConfig } from './services/panel-config';\nimport { PanelManager, PanelManagerConfig, PanelLayer } from './services';\n\nexport const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({\n  onBind: ({ bind }, opt) => {\n    bind(PanelManager).to(PanelManager).inSingletonScope();\n    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));\n  },\n  onInit(ctx, opt) {\n    ctx.playground.registerLayer(PanelLayer);\n    const panelManager = ctx.container.get<PanelManager>(PanelManager);\n    panelManager.init();\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { PluginContext } from '@flowgram.ai/core';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelManagerConfig {\n  factories: PanelFactory<any>[];\n  right: PanelConfig;\n  bottom: PanelConfig;\n  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement\n  autoResize: boolean;\n}\n\nexport const PanelManagerConfig = Symbol('PanelManagerConfig');\n\nexport const defineConfig = (config: Partial<PanelManagerConfig>) => {\n  const defaultConfig: PanelManagerConfig = {\n    right: {\n      max: 1,\n    },\n    bottom: {\n      max: 1,\n    },\n    factories: [],\n    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,\n    autoResize: true,\n  };\n  return {\n    ...defaultConfig,\n    ...config,\n  };\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { injectable, inject } from 'inversify';\n\nimport { PanelManagerConfig } from './panel-config';\nimport type { Area, PanelFactory } from '../types';\nimport { FloatPanel } from './float-panel';\n\n@injectable()\nexport class PanelManager {\n  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;\n\n  readonly panelRegistry = new Map<string, PanelFactory<any>>();\n\n  right: FloatPanel;\n\n  bottom: FloatPanel;\n\n  init() {\n    this.config.factories.forEach((factory) => this.register(factory));\n    this.right = new FloatPanel(this.config.right);\n    this.bottom = new FloatPanel(this.config.bottom);\n  }\n\n  register<T extends any>(factory: PanelFactory<T>) {\n    this.panelRegistry.set(factory.key, factory);\n  }\n\n  open(key: string, area: Area = 'right', options?: any) {\n    const factory = this.panelRegistry.get(key);\n    if (!factory) {\n      return;\n    }\n    const panel = this.getPanel(area);\n    panel.open(factory, options);\n  }\n\n  close(key?: string) {\n    this.right.close(key);\n    this.bottom.close(key);\n  }\n\n  getPanel(area: Area) {\n    return area === 'right' ? this.right : this.bottom;\n  }\n\n  dispose() {\n    this.right.dispose();\n    this.bottom.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Emitter } from '@flowgram.ai/utils';\n\nimport type { PanelFactory, PanelConfig } from '../types';\n\nexport interface PanelElement {\n  key: string;\n  style?: React.CSSProperties;\n  el: React.ReactNode;\n}\n\nconst PANEL_SIZE_DEFAULT = 400;\n\nexport class FloatPanel {\n  elements: PanelElement[] = [];\n\n  private onUpdateEmitter = new Emitter<void>();\n\n  sizeMap = new Map<string, number>();\n\n  onUpdate = this.onUpdateEmitter.event;\n\n  currentFactoryKey = '';\n\n  updateSize(newSize: number) {\n    this.sizeMap.set(this.currentFactoryKey, newSize);\n    this.onUpdateEmitter.fire();\n  }\n\n  get currentSize(): number {\n    return this.sizeMap.get(this.currentFactoryKey) || PANEL_SIZE_DEFAULT;\n  }\n\n  constructor(private config: PanelConfig) {}\n\n  open(factory: PanelFactory<any>, options: any) {\n    const el = factory.render(options?.props);\n    const idx = this.elements.findIndex((e) => e.key === factory.key);\n    this.currentFactoryKey = factory.key;\n    if (!this.sizeMap.has(factory.key)) {\n      this.sizeMap.set(factory.key, factory.defaultSize || PANEL_SIZE_DEFAULT);\n    }\n    if (idx >= 0) {\n      this.elements[idx] = { el, key: factory.key, style: factory.style };\n    } else {\n      this.elements.push({ el, key: factory.key, style: factory.style });\n      if (this.elements.length > this.config.max) {\n        this.elements.shift();\n      }\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  get visible() {\n    return this.elements.length > 0;\n  }\n\n  close(key?: string) {\n    if (!key) {\n      this.elements = [];\n    } else {\n      this.elements = this.elements.filter((e) => e.key !== key);\n    }\n    this.onUpdateEmitter.fire();\n  }\n\n  dispose() {\n    this.elements = [];\n    this.onUpdateEmitter.dispose();\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport ReactDOM from 'react-dom';\nimport { createElement } from 'react';\n\nimport { injectable, inject } from 'inversify';\nimport { domUtils, Disposable } from '@flowgram.ai/utils';\nimport { Layer, PluginContext } from '@flowgram.ai/core';\n\nimport { PanelLayer as PanelLayerComp } from '../components/panel-layer';\nimport { PanelManagerConfig } from './panel-config';\n\n@injectable()\nexport class PanelLayer extends Layer {\n  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;\n\n  @inject(PluginContext) private readonly pluginContext: PluginContext;\n\n  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');\n\n  layout: JSX.Element | null = null;\n\n  onReady(): void {\n    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);\n    this.toDispose.push(\n      Disposable.create(() => {\n        // Remove from PopupContainer\n        this.panelRoot.remove();\n      })\n    );\n    const commonStyle = {\n      pointerEvents: 'none',\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      zIndex: 100,\n    };\n    domUtils.setStyle(this.panelRoot, commonStyle);\n  }\n\n  render(): JSX.Element {\n    if (!this.layout) {\n      this.layout = createElement(PanelLayerComp);\n    }\n    return ReactDOM.createPortal(this.layout, this.panelRoot);\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useEffect, useRef, startTransition, useState, useCallback } from 'react';\n\nimport { Area } from '../../types';\nimport { usePanelManager } from '../../hooks/use-panel-manager';\nimport { floatPanelWrap } from './css';\nimport { ResizeBar } from '../resize-bar';\n\nexport const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {\n  const [, setVersion] = useState(0);\n  const panelManager = usePanelManager();\n  const panel = useRef(panelManager.getPanel(area));\n  const render = () =>\n    panel.current.elements.map((i) => (\n      <div className=\"float-panel-wrap\" key={i.key} style={{ ...floatPanelWrap, ...i.style }}>\n        {i.el}\n      </div>\n    ));\n  const node = useRef(render());\n\n  useEffect(() => {\n    const dispose = panel.current.onUpdate(() => {\n      startTransition(() => {\n        node.current = render();\n        setVersion((v) => v + 1);\n      });\n    });\n    return () => dispose.dispose();\n  }, [panel]);\n  const onResize = useCallback((newSize: number) => panel.current!.updateSize(newSize), []);\n  const size = panel.current!.currentSize;\n  const sizeStyle =\n    area === 'right' ? { width: size, height: '100%' } : { height: size, width: '100%' };\n\n  return (\n    <div\n      className=\"gedit-flow-panel\"\n      style={{\n        position: 'relative',\n        display: panel.current.visible ? 'block' : 'none',\n        ...sizeStyle,\n      }}\n    >\n      {panelManager.config.autoResize && (\n        <ResizeBar size={size} isVertical={area === 'right'} onResize={onResize} />\n      )}\n      {node.current}\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useService } from '@flowgram.ai/core';\n\nimport { PanelManager } from '../services/panel-manager';\n\nexport const usePanelManager = () => useService<PanelManager>(PanelManager);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport const globalCSS = `\n  .gedit-flow-panel-layer * {\n    box-sizing: border-box;\n  }\n`;\n\nexport const panelLayer: React.CSSProperties = {\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n  width: '100%',\n  height: '100%',\n  padding: '4px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n};\n\nexport const leftArea: React.CSSProperties = {\n  width: '100%',\n  minWidth: 0,\n  flexGrow: 0,\n  flexShrink: 1,\n\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: '4px',\n};\n\nexport const rightArea: React.CSSProperties = {\n  height: '100%',\n  flexGrow: 1,\n  flexShrink: 0,\n  minWidth: 0,\n\n  display: 'flex',\n  columnGap: '4px',\n};\n\nexport const mainArea: React.CSSProperties = {\n  position: 'relative',\n  overflow: 'hidden',\n  flexGrow: 0,\n  flexShrink: 1,\n  width: '100%',\n  height: '100%',\n};\n\nexport const bottomArea: React.CSSProperties = {\n  flexGrow: 1,\n  flexShrink: 0,\n  width: '100%',\n  minHeight: 0,\n};\n\nexport const floatPanelWrap: React.CSSProperties = {\n  pointerEvents: 'auto',\n  height: '100%',\n  width: '100%',\n  overflow: 'auto',\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useRef, useState } from 'react';\n\ninterface Props {\n  onResize: (w: number) => void;\n  size: number;\n  isVertical?: boolean;\n}\n\nexport const ResizeBar: React.FC<Props> = ({ onResize, size, isVertical }) => {\n  const currentPoint = useRef<null | number>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  return (\n    <div\n      onMouseDown={(e) => {\n        currentPoint.current = isVertical ? e.clientX : e.clientY;\n        e.stopPropagation();\n        e.preventDefault();\n        setIsDragging(true);\n        const mouseUp = () => {\n          currentPoint.current = null;\n          document.body.removeEventListener('mouseup', mouseUp);\n          document.body.removeEventListener('mousemove', mouseMove);\n          setIsDragging(false);\n        };\n        const mouseMove = (e: MouseEvent) => {\n          const delta = currentPoint.current! - (isVertical ? e.clientX : e.clientY);\n          onResize(size + delta);\n        };\n        document.body.addEventListener('mouseup', mouseUp);\n        document.body.addEventListener('mousemove', mouseMove);\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        zIndex: 999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pointerEvents: 'auto',\n        ...(isVertical\n          ? {\n              cursor: 'ew-resize',\n              height: '100%',\n              marginLeft: -5,\n              width: 10,\n            }\n          : {\n              cursor: 'ns-resize',\n              width: '100%',\n              marginTop: -5,\n              height: 10,\n            }),\n      }}\n    >\n      <div\n        style={{\n          ...(isVertical\n            ? {\n                width: 3,\n                height: '100%',\n              }\n            : {\n                height: 3,\n                width: '100%',\n              }),\n          backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',\n        }}\n      />\n    </div>\n  );\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FloatPanel } from './float-panel';\nimport { panelLayer, leftArea, rightArea, mainArea, bottomArea, globalCSS } from './css';\n\nexport const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div style={panelLayer}>\n    <style dangerouslySetInnerHTML={{ __html: globalCSS }} />\n    <div className=\"gedit-flow-panel-left-area\" style={leftArea}>\n      <div className=\"gedit-flow-panel-main-area\" style={mainArea}>\n        {children}\n      </div>\n      <div className=\"gedit-flow-panel-bottom-area\" style={bottomArea}>\n        <FloatPanel area=\"bottom\" />\n      </div>\n    </div>\n    <div className=\"gedit-flow-panel-right-area\" style={rightArea}>\n      <FloatPanel area=\"right\" />\n    </div>\n  </div>\n);\n"],"mappings":"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","names":["import_core","import_react","import_inversify","import_utils","import_core","import_react","e","import_jsx_runtime","FloatPanel","import_jsx_runtime","FloatPanel","PanelLayer","ReactDOM","PanelLayer"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/panel-manager-plugin",
-  "version": "0.4.19",
+  "version": "0.5.0",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -14,19 +14,22 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "inversify": "^6.0.1",
-    "@flowgram.ai/core": "0.4.19",
-    "@flowgram.ai/utils": "0.4.19"
+    "@flowgram.ai/core": "0.5.0",
+    "@flowgram.ai/utils": "0.5.0"
   },
   "devDependencies": {
     "react": "^18",
+    "react-dom": "^18",
     "@types/react": "^18",
+    "@types/react-dom": "^18",
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
-    "@flowgram.ai/eslint-config": "0.4.19",
-    "@flowgram.ai/ts-config": "0.4.19"
+    "@flowgram.ai/eslint-config": "0.5.0",
+    "@flowgram.ai/ts-config": "0.5.0"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "peerDependenciesMeta": {
     "react": {

package/rush-logs/panel-manager-plugin.build.log

@@ -9,13 +9,13 @@ CLI tsup v8.5.0
 CLI Target: es2020
 CJS Build start
 ESM Build start
-CJS dist/index.js     8.51 KB
-CJS dist/index.js.map 13.80 KB
-CJS ⚡️ Build success in 104ms
-ESM dist/esm/index.js     7.03 KB
-ESM dist/esm/index.js.map 13.34 KB
-ESM ⚡️ Build success in 104ms
+CJS dist/index.js     12.98 KB
+CJS dist/index.js.map 20.53 KB
+CJS ⚡️ Build success in 119ms
+ESM dist/esm/index.js     10.73 KB
+ESM dist/esm/index.js.map 20.09 KB
+ESM ⚡️ Build success in 120ms
 DTS Build start
-DTS ⚡️ Build success in 3001ms
-DTS dist/index.d.ts  1.87 KB
-DTS dist/index.d.mts 1.87 KB
+DTS ⚡️ Build success in 3925ms
+DTS dist/index.d.ts  2.53 KB
+DTS dist/index.d.mts 2.53 KB

package/src/components/panel-layer/css.ts

@@ -3,6 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
+export const globalCSS = `
+  .gedit-flow-panel-layer * {
+    box-sizing: border-box;
+  }
+`;
+
 export const panelLayer: React.CSSProperties = {
   pointerEvents: 'none',
   position: 'absolute',
@@ -15,6 +21,7 @@ export const panelLayer: React.CSSProperties = {
   height: '100%',
   padding: '4px',
   boxSizing: 'border-box',
+  overflow: 'hidden',
 };
 
 export const leftArea: React.CSSProperties = {
@@ -58,4 +65,5 @@ export const floatPanelWrap: React.CSSProperties = {
   pointerEvents: 'auto',
   height: '100%',
   width: '100%',
+  overflow: 'auto',
 };