@flowgram.ai/panel-manager-plugin 0.1.0-alpha.23 → 0.1.0-alpha.24

package/src/services/panel-manager.ts

@@ -4,74 +4,114 @@
  */
 
 import { injectable, inject } from 'inversify';
-import { Playground } from '@flowgram.ai/core';
+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(Playground) readonly playground: Playground;
-
   @inject(PanelManagerConfig) readonly config: PanelManagerConfig;
 
-  readonly panelRegistry = new Map<string, PanelFactory<any>>();
+  @inject(PanelEntityFactory) readonly createPanel: PanelEntityFactory;
 
-  right: FloatPanel;
+  readonly panelRegistry = new Map<string, PanelFactory<any>>();
 
-  bottom: FloatPanel;
+  private panels = new Map<string, PanelEntity>();
 
-  dockedRight: FloatPanel;
+  private onPanelsChangeEvent = new Emitter<void>();
 
-  dockedBottom: 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);
-    this.dockedRight = new FloatPanel(this.config.dockedRight);
-    this.dockedBottom = new FloatPanel(this.config.dockedBottom);
   }
 
+  /** 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 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();
+  }
+
+  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);
+    }
   }
 
-  close(key?: string) {
-    this.right.close(key);
-    this.bottom.close(key);
-    this.dockedRight.close(key);
-    this.dockedBottom.close(key);
+  getPanels(area?: Area) {
+    const panels: PanelEntity[] = [];
+    this.panels.forEach((panel) => {
+      if (!area || panel.area === area) {
+        panels.push(panel);
+      }
+    });
+    return panels;
   }
 
-  getPanel(area: Area) {
+  getAreaConfig(area: Area) {
     switch (area) {
       case 'docked-bottom':
-        return this.dockedBottom;
+        return this.config.dockedBottom;
       case 'docked-right':
-        return this.dockedRight;
+        return this.config.dockedRight;
       case 'bottom':
-        return this.bottom;
+        return this.config.bottom;
       case 'right':
       default:
-        return this.right;
+        return this.config.right;
     }
   }
 
   dispose() {
-    this.right.dispose();
-    this.bottom.dispose();
-    this.dockedBottom.dispose();
-    this.dockedRight.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

@@ -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,59 +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';
-
-export const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {
-  const [, setVersion] = useState(0);
-  const panelManager = usePanelManager();
-  const panel = useRef(panelManager.getPanel(area));
-
-  const isHorizontal = ['right', 'docked-right'].includes(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 = isHorizontal
-    ? { 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.resizeBarRender({
-        size,
-        direction: isHorizontal ? 'vertical' : 'horizontal',
-        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();
-  }
-}