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

package/src/services/panel-config.ts

@@ -6,13 +6,26 @@
 import { PluginContext } from '@flowgram.ai/core';
 
 import type { PanelFactory, PanelConfig } from '../types';
+import { ResizeBar } from '../components/resize-bar';
+import type { PanelLayerProps } from '../components/panel-layer';
 
 export interface PanelManagerConfig {
   factories: PanelFactory<any>[];
   right: PanelConfig;
   bottom: PanelConfig;
-  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement
+  dockedRight: PanelConfig;
+  dockedBottom: PanelConfig;
+  /** Resizable, and multi-panel options mutually exclusive */
   autoResize: boolean;
+  layerProps: PanelLayerProps;
+  resizeBarRender: ({
+    size,
+  }: {
+    size: number;
+    direction?: 'vertical' | 'horizontal';
+    onResize: (size: number) => void;
+  }) => React.ReactNode;
+  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement
 }
 
 export const PanelManagerConfig = Symbol('PanelManagerConfig');
@@ -25,9 +38,17 @@ export const defineConfig = (config: Partial<PanelManagerConfig>) => {
     bottom: {
       max: 1,
     },
+    dockedRight: {
+      max: 1,
+    },
+    dockedBottom: {
+      max: 1,
+    },
     factories: [],
-    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,
     autoResize: true,
+    layerProps: {},
+    resizeBarRender: ResizeBar,
+    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,
   };
   return {
     ...defaultConfig,

package/src/services/panel-factory.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createStore, StoreApi } from 'zustand/vanilla';
+import { nanoid } from 'nanoid';
+import { inject, injectable } from 'inversify';
+
+import type { PanelFactory, PanelEntityConfig, Area } from '../types';
+import { PanelRestore } from './panel-restore';
+
+export const PanelEntityFactory = Symbol('PanelEntityFactory');
+export type PanelEntityFactory = (options: {
+  factory: PanelEntityFactoryConstant;
+  config: PanelEntityConfigConstant;
+}) => PanelEntity;
+
+export const PanelEntityFactoryConstant = Symbol('PanelEntityFactoryConstant');
+export type PanelEntityFactoryConstant = PanelFactory<any>;
+export const PanelEntityConfigConstant = Symbol('PanelEntityConfigConstant');
+export type PanelEntityConfigConstant = PanelEntityConfig<any> & {
+  area: Area;
+};
+
+const PANEL_SIZE_DEFAULT = 400;
+
+interface PanelEntityState {
+  size: number;
+}
+
+@injectable()
+export class PanelEntity {
+  @inject(PanelRestore) restore: PanelRestore;
+
+  /** 面板工厂 */
+  @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;
+
+  @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;
+
+  private initialized = false;
+
+  /** 实例唯一标识 */
+  id: string = nanoid();
+
+  /** 渲染缓存 */
+  node: React.ReactNode = null;
+
+  store: StoreApi<PanelEntityState>;
+
+  get area() {
+    return this.config.area;
+  }
+
+  get key() {
+    return this.factory.key;
+  }
+
+  get renderer() {
+    if (!this.node) {
+      this.node = this.factory.render(this.config.props);
+    }
+    return this.node;
+  }
+
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    const cache = this.restore.restore<PanelEntityState>(this.key);
+    this.store = createStore<PanelEntityState>(() => ({
+      size: this.config.defaultSize || this.factory.defaultSize || PANEL_SIZE_DEFAULT,
+      ...(cache ?? {}),
+    }));
+  }
+
+  dispose() {
+    this.restore.store(this.key, this.store.getState());
+  }
+}

package/src/services/panel-layer.ts

@@ -45,7 +45,8 @@ export class PanelLayer extends Layer {
 
   render(): JSX.Element {
     if (!this.layout) {
-      this.layout = createElement(PanelLayerComp);
+      const { children, ...layoutProps } = this.panelConfig.layerProps;
+      this.layout = createElement(PanelLayerComp, layoutProps, children);
     }
     return ReactDOM.createPortal(this.layout, this.panelRoot);
   }

package/src/services/panel-manager.ts

@@ -4,51 +4,114 @@
  */
 
 import { injectable, inject } from 'inversify';
+import { Emitter } from '@flowgram.ai/utils';
 
 import { PanelManagerConfig } from './panel-config';
-import type { Area, PanelFactory } from '../types';
-import { FloatPanel } from './float-panel';
+import type { Area, PanelEntityConfig, PanelFactory } from '../types';
+import { PanelEntity, PanelEntityFactory } from './panel-factory';
 
 @injectable()
 export class PanelManager {
   @inject(PanelManagerConfig) readonly config: PanelManagerConfig;
 
+  @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;
+
   readonly panelRegistry = new Map<string, PanelFactory<any>>();
 
-  right: FloatPanel;
+  private panels = new Map<string, PanelEntity>();
+
+  private onPanelsChangeEvent = new Emitter<void>();
 
-  bottom: FloatPanel;
+  public onPanelsChange = this.onPanelsChangeEvent.event;
 
   init() {
     this.config.factories.forEach((factory) => this.register(factory));
-    this.right = new FloatPanel(this.config.right);
-    this.bottom = new FloatPanel(this.config.bottom);
   }
 
+  /** registry panel factory */
   register<T extends any>(factory: PanelFactory<T>) {
     this.panelRegistry.set(factory.key, factory);
   }
 
-  open(key: string, area: Area = 'right', options?: any) {
+  /** open panel */
+  public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {
     const factory = this.panelRegistry.get(key);
     if (!factory) {
       return;
     }
-    const panel = this.getPanel(area);
-    panel.open(factory, options);
+
+    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
+    if (!factory.allowDuplicates && sameKeyPanels.length) {
+      sameKeyPanels.forEach((p) => this.remove(p.id));
+    }
+
+    const panel = this.createPanel({
+      factory,
+      config: {
+        area,
+        ...options,
+      },
+    });
+
+    this.panels.set(panel.id, panel);
+    this.trim(area);
+    this.onPanelsChangeEvent.fire();
+    console.log('jxj', this.panels);
   }
 
-  close(key?: string) {
-    this.right.close(key);
-    this.bottom.close(key);
+  /** close panel */
+  public close(key?: string) {
+    const panels = this.getPanels();
+    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
+    closedPanels.forEach((p) => this.remove(p.id));
+    this.onPanelsChangeEvent.fire();
   }
 
-  getPanel(area: Area) {
-    return area === 'right' ? this.right : this.bottom;
+  private trim(area: 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);
+      }
+    }
+  }
+
+  private remove(id: string) {
+    const panel = this.panels.get(id);
+    if (panel) {
+      panel.dispose();
+      this.panels.delete(id);
+    }
+  }
+
+  getPanels(area?: Area) {
+    const panels: PanelEntity[] = [];
+    this.panels.forEach((panel) => {
+      if (!area || panel.area === area) {
+        panels.push(panel);
+      }
+    });
+    return panels;
+  }
+
+  getAreaConfig(area: 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.right.dispose();
-    this.bottom.dispose();
+    this.onPanelsChangeEvent.dispose();
   }
 }

package/src/services/panel-restore.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+
+export const PanelRestore = Symbol('PanelRestore');
+export interface PanelRestore {
+  store: (k: string, v: any) => void;
+  restore: <T>(k: string) => T | undefined;
+}
+
+@injectable()
+export class PanelRestoreImpl implements PanelRestore {
+  map = new Map<string, any>();
+
+  store(k: string, v: any) {
+    this.map.set(k, v);
+  }
+
+  restore<T>(k: string): T | undefined {
+    return this.map.get(k) as T;
+  }
+}

package/src/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-export type Area = 'right' | 'bottom';
+export type Area = 'right' | 'bottom' | 'docked-right' | 'docked-bottom';
 
 export interface PanelConfig {
   /** max panel */
@@ -13,6 +13,17 @@ export interface PanelConfig {
 export interface PanelFactory<T extends any> {
   key: string;
   defaultSize: number;
+  maxSize?: number;
+  minSize?: number;
   style?: React.CSSProperties;
+  /** Allows multiple panels with the same key to be rendered simultaneously  */
+  allowDuplicates?: boolean;
+  resize?: boolean;
   render: (props: T) => React.ReactNode;
 }
+
+export interface PanelEntityConfig<T extends any = any> {
+  defaultSize?: number;
+  style?: React.CSSProperties;
+  props?: T;
+}

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

@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-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);
-  const panelManager = usePanelManager();
-  const panel = useRef(panelManager.getPanel(area));
-  const render = () =>
-    panel.current.elements.map((i) => (
-      <div className="float-panel-wrap" key={i.key} style={{ ...floatPanelWrap, ...i.style }}>
-        {i.el}
-      </div>
-    ));
-  const node = useRef(render());
-
-  useEffect(() => {
-    const dispose = panel.current.onUpdate(() => {
-      startTransition(() => {
-        node.current = render();
-        setVersion((v) => v + 1);
-      });
-    });
-    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 (
-    <div
-      className="gedit-flow-panel"
-      style={{
-        position: 'relative',
-        display: panel.current.visible ? 'block' : 'none',
-        ...sizeStyle,
-      }}
-    >
-      {panelManager.config.autoResize && panel.current.elements.length > 0 && (
-        <ResizeBar size={size} isVertical={area === 'right'} onResize={onResize} />
-      )}
-      {node.current}
-    </div>
-  );
-};

package/src/services/float-panel.ts

@@ -1,75 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import { Emitter } from '@flowgram.ai/utils';
-
-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, 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;
-  }
-
-  close(key?: string) {
-    if (!key) {
-      this.elements = [];
-    } else {
-      this.elements = this.elements.filter((e) => e.key !== key);
-    }
-    this.onUpdateEmitter.fire();
-  }
-
-  dispose() {
-    this.elements = [];
-    this.onUpdateEmitter.dispose();
-  }
-}