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

package/src/components/panel-layer/float-panel.tsx

@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useRef, startTransition, useState } from 'react';
+import { useEffect, useRef, startTransition, useState, useCallback } from 'react';
 
 import { Area } from '../../types';
 import { usePanelManager } from '../../hooks/use-panel-manager';
 import { floatPanelWrap } from './css';
+import { ResizeBar } from '../resize-bar';
 
 export const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {
   const [, setVersion] = useState(0);
@@ -15,12 +16,7 @@ export const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {
   const panel = useRef(panelManager.getPanel(area));
   const render = () =>
     panel.current.elements.map((i) => (
-      <div
-        className="float-panel-wrap"
-        key={i.key}
-        style={floatPanelWrap}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
+      <div className="float-panel-wrap" key={i.key} style={{ ...floatPanelWrap, ...i.style }}>
         {i.el}
       </div>
     ));
@@ -35,6 +31,24 @@ export const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {
     });
     return () => dispose.dispose();
   }, [panel]);
+  const onResize = useCallback((newSize: number) => panel.current!.updateSize(newSize), []);
+  const size = panel.current!.currentSize;
+  const sizeStyle =
+    area === 'right' ? { width: size, height: '100%' } : { height: size, width: '100%' };
 
-  return <>{node.current}</>;
+  return (
+    <div
+      className="gedit-flow-panel"
+      style={{
+        position: 'relative',
+        display: panel.current.visible ? 'block' : 'none',
+        ...sizeStyle,
+      }}
+    >
+      {panelManager.config.autoResize && (
+        <ResizeBar size={size} isVertical={area === 'right'} onResize={onResize} />
+      )}
+      {node.current}
+    </div>
+  );
 };

package/src/components/panel-layer/panel-layer.tsx

@@ -4,19 +4,20 @@
  */
 
 import { FloatPanel } from './float-panel';
-import { panelLayer, leftArea, rightArea, mainArea, bottomArea } from './css';
+import { panelLayer, leftArea, rightArea, mainArea, bottomArea, globalCSS } from './css';
 
 export const PanelLayer: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="panel-layer" style={panelLayer}>
-    <div className="left-area" style={leftArea}>
-      <div className="main-area" style={mainArea}>
+  <div style={panelLayer}>
+    <style dangerouslySetInnerHTML={{ __html: globalCSS }} />
+    <div className="gedit-flow-panel-left-area" style={leftArea}>
+      <div className="gedit-flow-panel-main-area" style={mainArea}>
         {children}
       </div>
-      <div className="bottom-area" style={bottomArea}>
+      <div className="gedit-flow-panel-bottom-area" style={bottomArea}>
         <FloatPanel area="bottom" />
       </div>
     </div>
-    <div className="right-area" style={rightArea}>
+    <div className="gedit-flow-panel-right-area" style={rightArea}>
       <FloatPanel area="right" />
     </div>
   </div>

package/src/components/resize-bar/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useRef, useState } from 'react';
+
+interface Props {
+  onResize: (w: number) => void;
+  size: number;
+  isVertical?: boolean;
+}
+
+export const ResizeBar: React.FC<Props> = ({ onResize, size, isVertical }) => {
+  const currentPoint = useRef<null | number>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <div
+      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 = (e: MouseEvent) => {
+          const delta = currentPoint.current! - (isVertical ? e.clientX : e.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,
+            }),
+      }}
+    >
+      <div
+        style={{
+          ...(isVertical
+            ? {
+                width: 3,
+                height: '100%',
+              }
+            : {
+                height: 3,
+                width: '100%',
+              }),
+          backgroundColor: isDragging || isHovered ? 'var(--g-playground-line)' : 'transparent',
+        }}
+      />
+    </div>
+  );
+};

package/src/create-panel-manager-plugin.ts

@@ -9,14 +9,12 @@ import { defineConfig } from './services/panel-config';
 import { PanelManager, PanelManagerConfig, PanelLayer } from './services';
 
 export const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({
-  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(PanelLayer);
-    const config = defineConfig(opt);
-    ctx.container.rebind(PanelManagerConfig).toConstantValue(config);
     const panelManager = ctx.container.get<PanelManager>(PanelManager);
     panelManager.init();
   },

package/src/index.ts

@@ -12,5 +12,7 @@ export { PanelManager } from './services';
 /** react hooks */
 export { usePanelManager } from './hooks/use-panel-manager';
 
+export { ResizeBar } from './components/resize-bar';
+
 /** types */
 export type { Area, PanelFactory } from './types';

package/src/services/float-panel.ts

@@ -9,25 +9,45 @@ import type { PanelFactory, PanelConfig } from '../types';
 
 export interface PanelElement {
   key: string;
+  style?: React.CSSProperties;
   el: React.ReactNode;
 }
 
+const PANEL_SIZE_DEFAULT = 400;
+
 export class FloatPanel {
   elements: PanelElement[] = [];
 
   private onUpdateEmitter = new Emitter<void>();
 
+  sizeMap = new Map<string, number>();
+
   onUpdate = this.onUpdateEmitter.event;
 
+  currentFactoryKey = '';
+
+  updateSize(newSize: number) {
+    this.sizeMap.set(this.currentFactoryKey, newSize);
+    this.onUpdateEmitter.fire();
+  }
+
+  get currentSize(): number {
+    return this.sizeMap.get(this.currentFactoryKey) || PANEL_SIZE_DEFAULT;
+  }
+
   constructor(private config: PanelConfig) {}
 
   open(factory: PanelFactory<any>, options: any) {
     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();
       }
@@ -35,6 +55,10 @@ export class FloatPanel {
     this.onUpdateEmitter.fire();
   }
 
+  get visible() {
+    return this.elements.length > 0;
+  }
+
   close(key?: string) {
     if (!key) {
       this.elements = [];

package/src/services/panel-config.ts

@@ -3,12 +3,16 @@
  * SPDX-License-Identifier: MIT
  */
 
+import { PluginContext } from '@flowgram.ai/core';
+
 import type { PanelFactory, PanelConfig } from '../types';
 
 export interface PanelManagerConfig {
   factories: PanelFactory<any>[];
   right: PanelConfig;
   bottom: PanelConfig;
+  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement
+  autoResize: boolean;
 }
 
 export const PanelManagerConfig = Symbol('PanelManagerConfig');
@@ -22,6 +26,8 @@ export const defineConfig = (config: Partial<PanelManagerConfig>) => {
       max: 1,
     },
     factories: [],
+    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,
+    autoResize: true,
   };
   return {
     ...defaultConfig,

package/src/services/panel-layer.ts

@@ -3,42 +3,50 @@
  * SPDX-License-Identifier: MIT
  */
 
+import ReactDOM from 'react-dom';
 import { createElement } from 'react';
 
-import { injectable } from 'inversify';
-import { domUtils } from '@flowgram.ai/utils';
-import { Layer } from '@flowgram.ai/core';
+import { injectable, inject } from 'inversify';
+import { domUtils, Disposable } from '@flowgram.ai/utils';
+import { Layer, PluginContext } from '@flowgram.ai/core';
 
 import { PanelLayer as PanelLayerComp } from '../components/panel-layer';
+import { PanelManagerConfig } from './panel-config';
 
 @injectable()
 export class PanelLayer extends Layer {
-  node = domUtils.createDivWithClass('gedit-flow-panel-layer');
+  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;
+
+  @inject(PluginContext) private readonly pluginContext: PluginContext;
+
+  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');
 
   layout: JSX.Element | null = null;
 
   onReady(): void {
+    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);
+    this.toDispose.push(
+      Disposable.create(() => {
+        // Remove from PopupContainer
+        this.panelRoot.remove();
+      })
+    );
     const commonStyle = {
       pointerEvents: 'none',
-      zIndex: 11,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 100,
     };
-    domUtils.setStyle(this.node, commonStyle);
-    this.config.onDataChange(() => {
-      const { width, height, scrollX, scrollY } = this.config.config;
-      domUtils.setStyle(this.node, {
-        ...commonStyle,
-        width,
-        height,
-        left: scrollX,
-        top: scrollY,
-      });
-    });
+    domUtils.setStyle(this.panelRoot, commonStyle);
   }
 
   render(): JSX.Element {
     if (!this.layout) {
       this.layout = createElement(PanelLayerComp);
     }
-    return this.layout;
+    return ReactDOM.createPortal(this.layout, this.panelRoot);
   }
 }

package/src/services/panel-manager.ts

@@ -11,7 +11,7 @@ import { FloatPanel } from './float-panel';
 
 @injectable()
 export class PanelManager {
-  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;
+  @inject(PanelManagerConfig) readonly config: PanelManagerConfig;
 
   readonly panelRegistry = new Map<string, PanelFactory<any>>();
 
@@ -38,9 +38,9 @@ export class PanelManager {
     panel.open(factory, options);
   }
 
-  close(key: string, area: Area = 'right') {
-    const panel = this.getPanel(area);
-    panel.close(key);
+  close(key?: string) {
+    this.right.close(key);
+    this.bottom.close(key);
   }
 
   getPanel(area: Area) {

package/src/types.ts

@@ -12,5 +12,7 @@ export interface PanelConfig {
 
 export interface PanelFactory<T extends any> {
   key: string;
+  defaultSize: number;
+  style?: React.CSSProperties;
   render: (props: T) => React.ReactNode;
 }