@flowgram.ai/panel-manager-plugin 0.1.8

package/src/services/float-panel.ts

@@ -0,0 +1,51 @@
+/**
+ * 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;
+  el: React.ReactNode;
+}
+
+export class FloatPanel {
+  elements: PanelElement[] = [];
+
+  private onUpdateEmitter = new Emitter<void>();
+
+  onUpdate = this.onUpdateEmitter.event;
+
+  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);
+    if (idx >= 0) {
+      this.elements[idx] = { el, key: factory.key };
+    } else {
+      this.elements.push({ el, key: factory.key });
+      if (this.elements.length > this.config.max) {
+        this.elements.shift();
+      }
+    }
+    this.onUpdateEmitter.fire();
+  }
+
+  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();
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { PanelManager } from './panel-manager';
+export { PanelManagerConfig } from './panel-config';
+export { PanelLayer } from './panel-layer';

package/src/services/panel-config.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { PanelFactory, PanelConfig } from '../types';
+
+export interface PanelManagerConfig {
+  factories: PanelFactory<any>[];
+  right: PanelConfig;
+  bottom: PanelConfig;
+}
+
+export const PanelManagerConfig = Symbol('PanelManagerConfig');
+
+export const defineConfig = (config: Partial<PanelManagerConfig>) => {
+  const defaultConfig: PanelManagerConfig = {
+    right: {
+      max: 1,
+    },
+    bottom: {
+      max: 1,
+    },
+    factories: [],
+  };
+  return {
+    ...defaultConfig,
+    ...config,
+  };
+};

package/src/services/panel-layer.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createElement } from 'react';
+
+import { injectable } from 'inversify';
+import { domUtils } from '@flowgram.ai/utils';
+import { Layer } from '@flowgram.ai/core';
+
+import { PanelLayer as PanelLayerComp } from '../components/panel-layer';
+
+@injectable()
+export class PanelLayer extends Layer {
+  node = domUtils.createDivWithClass('gedit-flow-panel-layer');
+
+  layout: JSX.Element | null = null;
+
+  onReady(): void {
+    const commonStyle = {
+      pointerEvents: 'none',
+      zIndex: 11,
+    };
+    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,
+      });
+    });
+  }
+
+  render(): JSX.Element {
+    if (!this.layout) {
+      this.layout = createElement(PanelLayerComp);
+    }
+    return this.layout;
+  }
+}

package/src/services/panel-manager.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable, inject } from 'inversify';
+
+import { PanelManagerConfig } from './panel-config';
+import type { Area, PanelFactory } from '../types';
+import { FloatPanel } from './float-panel';
+
+@injectable()
+export class PanelManager {
+  @inject(PanelManagerConfig) private readonly config: PanelManagerConfig;
+
+  readonly panelRegistry = new Map<string, PanelFactory<any>>();
+
+  right: FloatPanel;
+
+  bottom: FloatPanel;
+
+  init() {
+    this.config.factories.forEach((factory) => this.register(factory));
+    this.right = new FloatPanel(this.config.right);
+    this.bottom = new FloatPanel(this.config.bottom);
+  }
+
+  register<T extends any>(factory: PanelFactory<T>) {
+    this.panelRegistry.set(factory.key, factory);
+  }
+
+  open(key: string, area: Area = 'right', options?: any) {
+    const factory = this.panelRegistry.get(key);
+    if (!factory) {
+      return;
+    }
+    const panel = this.getPanel(area);
+    panel.open(factory, options);
+  }
+
+  close(key: string, area: Area = 'right') {
+    const panel = this.getPanel(area);
+    panel.close(key);
+  }
+
+  getPanel(area: Area) {
+    return area === 'right' ? this.right : this.bottom;
+  }
+
+  dispose() {
+    this.right.dispose();
+    this.bottom.dispose();
+  }
+}

package/src/types.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export type Area = 'right' | 'bottom';
+
+export interface PanelConfig {
+  /** max panel */
+  max: number;
+}
+
+export interface PanelFactory<T extends any> {
+  key: string;
+  render: (props: T) => React.ReactNode;
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@flowgram.ai/ts-config/tsconfig.flow.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "./src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}