@flowgram-vue/panel-manager-plugin 0.2.0

package/src/composables/use-panel.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, onBeforeUnmount, shallowRef, type ShallowRef } from 'vue';
+import type { StoreApi } from 'zustand';
+import { shallow } from 'zustand/shallow';
+
+import { PanelEntity, PanelEntityState } from '../services/panel-factory';
+import { PanelContextKey } from '../contexts';
+
+export const usePanel = (): PanelEntity => {
+  const panel = inject(PanelContextKey);
+  if (!panel) {
+    throw new Error('usePanel must be used within a PanelContext provider');
+  }
+  return panel;
+};
+
+export const usePanelStore = <T>(selector: (s: PanelEntityState) => T): ShallowRef<T> => {
+  const panel = usePanel();
+  const selected = shallowRef(selector(panel.store.getState()));
+  const unsubscribe = (panel.store as StoreApi<PanelEntityState>).subscribe((state) => {
+    const next = selector(state);
+    if (!shallow(selected.value, next)) {
+      selected.value = next;
+    }
+  });
+  onBeforeUnmount(unsubscribe);
+  return selected;
+};

package/src/contexts.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { InjectionKey } from 'vue';
+
+import type { PanelEntity } from './services/panel-factory';
+
+export const PanelContextKey: InjectionKey<PanelEntity> = Symbol('PanelContext');

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

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { definePluginCreator } from '@flowgram-vue/core';
+
+import {
+  PanelEntityFactory,
+  PanelEntity,
+  PanelEntityFactoryConstant,
+  PanelEntityConfigConstant,
+} from './services/panel-factory';
+import { defineConfig } from './services/panel-config';
+import {
+  PanelManager,
+  PanelManagerConfig,
+  PanelLayer,
+  PanelRestore,
+  PanelRestoreImpl,
+} from './services';
+
+export const createPanelManagerPlugin = definePluginCreator<Partial<PanelManagerConfig>>({
+  onBind: ({ bind }, opt) => {
+    bind(PanelManager).to(PanelManager).inSingletonScope();
+    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();
+    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));
+    bind(PanelEntityFactory).toFactory(
+      (context) =>
+        ({
+          factory,
+          config,
+        }: {
+          factory: PanelEntityFactoryConstant;
+          config: PanelEntityConfigConstant;
+        }) => {
+          const container = context.container.createChild();
+          container.bind(PanelEntityFactoryConstant).toConstantValue(factory);
+          container.bind(PanelEntityConfigConstant).toConstantValue(config);
+          const panel = container.resolve(PanelEntity);
+          panel.init();
+          return panel;
+        }
+    );
+  },
+  onInit(ctx) {
+    ctx.playground.registerLayer(PanelLayer);
+    const panelManager = ctx.container.get<PanelManager>(PanelManager);
+    panelManager.init();
+  },
+});

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/** create plugin function */
+export { createPanelManagerPlugin } from './create-panel-manager-plugin';
+
+/** services */
+export { PanelManager, PanelRestore, type PanelManagerConfig } from './services';
+
+/** vue composables */
+export { usePanelManager } from './composables/use-panel-manager';
+export { usePanel } from './composables/use-panel';
+
+export { DockedPanelLayer, type DockedPanelLayerProps } from './components/panel-layer';
+export { ResizeBar } from './components/resize-bar';
+
+/** types */
+export type { Area, PanelFactory } from './types';

package/src/services/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 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';
+export { PanelRestore, PanelRestoreImpl } from './panel-restore';

package/src/services/panel-config.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { VNode } from 'vue';
+import { PluginContext } from '@flowgram-vue/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;
+  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;
+  }) => VNode | null;
+  getPopupContainer: (ctx: PluginContext) => HTMLElement; // default playground.node.parentElement
+}
+
+export const PanelManagerConfig = Symbol('PanelManagerConfig');
+
+export const defineConfig = (config: Partial<PanelManagerConfig>) => {
+  const defaultConfig: PanelManagerConfig = {
+    right: {
+      max: 1,
+    },
+    bottom: {
+      max: 1,
+    },
+    dockedRight: {
+      max: 1,
+    },
+    dockedBottom: {
+      max: 1,
+    },
+    factories: [],
+    autoResize: true,
+    layerProps: {},
+    resizeBarRender: ResizeBar,
+    getPopupContainer: (ctx: PluginContext) => ctx.playground.node.parentNode as HTMLElement,
+  };
+  return {
+    ...defaultConfig,
+    ...config,
+  };
+};

package/src/services/panel-factory.ts

@@ -0,0 +1,138 @@
+/**
+ * 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 { VNode } from 'vue';
+
+import type { PanelFactory, PanelEntityConfig, Area } from '../types';
+import { PanelRestore } from './panel-restore';
+import { PanelManagerConfig } from './panel-config';
+import { merge } from '../utils';
+
+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;
+
+export interface PanelEntityState {
+  size: number;
+  fullscreen: boolean;
+  visible: boolean;
+}
+
+@injectable()
+export class PanelEntity {
+  @inject(PanelRestore) restore: PanelRestore;
+
+  /** 面板工厂 */
+  @inject(PanelEntityFactoryConstant) public factory: PanelEntityFactoryConstant;
+
+  @inject(PanelEntityConfigConstant) public config: PanelEntityConfigConstant;
+
+  @inject(PanelManagerConfig) readonly globalConfig: PanelManagerConfig;
+
+  private initialized = false;
+
+  /** 实例唯一标识 */
+  id: string = nanoid();
+
+  /** 渲染缓存 */
+  node: VNode | null = null;
+
+  store: StoreApi<PanelEntityState>;
+
+  get area() {
+    return this.config.area;
+  }
+
+  get mode() {
+    return this.config.area.startsWith('docked') ? 'docked' : 'floating';
+  }
+
+  get key() {
+    return this.factory.key;
+  }
+
+  get renderer() {
+    if (!this.node) {
+      this.node = this.factory.render(this.config.props);
+    }
+    return this.node;
+  }
+
+  get fullscreen() {
+    return this.store.getState().fullscreen;
+  }
+
+  set fullscreen(next: boolean) {
+    this.store.setState({ fullscreen: next });
+  }
+
+  get resizable() {
+    if (this.fullscreen) {
+      return false;
+    }
+    return this.factory.resize !== undefined ? this.factory.resize : this.globalConfig.autoResize;
+  }
+
+  get keepDOM() {
+    return this.factory.keepDOM;
+  }
+
+  get visible() {
+    return this.store.getState().visible;
+  }
+
+  set visible(next: boolean) {
+    this.store.setState({ visible: next });
+  }
+
+  get layer() {
+    return document.querySelector(
+      this.mode ? '.gedit-flow-panel-layer-wrap-docked' : '.gedit-flow-panel-layer-wrap-floating'
+    );
+  }
+
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    const cache = this.restore.restore<PanelEntityState>(this.key);
+
+    const initialState = merge<PanelEntityState>(
+      {
+        size: this.config.defaultSize,
+        fullscreen: this.config.fullscreen,
+      },
+      cache ? cache : {},
+      {
+        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,
+        fullscreen: this.factory.fullscreen || false,
+        ...(this.factory.keepDOM ? { visible: true } : {}),
+      }
+    );
+
+    this.store = createStore<PanelEntityState>(() => initialState);
+  }
+
+  mergeState() {}
+
+  dispose() {
+    this.restore.store(this.key, this.store.getState());
+  }
+}

package/src/services/panel-layer.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, provide, Teleport, type VNode } from 'vue';
+import { injectable, inject } from 'inversify';
+import { domUtils, Disposable } from '@flowgram-vue/utils';
+import {
+  Layer,
+  Playground,
+  PlaygroundContainerFactory,
+  PlaygroundVueContainerKey,
+  PlaygroundVueRefKey,
+  PluginContext,
+} from '@flowgram-vue/core';
+
+import { PanelLayer as PanelLayerComp } from '../components/panel-layer';
+import { PanelManagerConfig } from './panel-config';
+
+@injectable()
+export class PanelLayer extends Layer {
+  @inject(PanelManagerConfig) private readonly panelConfig: PanelManagerConfig;
+
+  @inject(PluginContext) private readonly pluginContext: PluginContext;
+
+  @inject(PlaygroundContainerFactory)
+  private readonly playgroundContainer: PlaygroundContainerFactory;
+
+  readonly panelRoot = domUtils.createDivWithClass('gedit-flow-panel-layer');
+
+  layout: VNode | null = null;
+
+  onReady(): void {
+    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);
+    this.toDispose.push(
+      Disposable.create(() => {
+        this.panelRoot.remove();
+      })
+    );
+    const commonStyle = {
+      pointerEvents: 'none',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 100,
+    };
+    domUtils.setStyle(this.panelRoot, commonStyle);
+  }
+
+  render(): VNode {
+    if (!this.layout) {
+      const { children, ...layoutProps } = this.panelConfig.layerProps;
+      const playgroundContainer = this.playgroundContainer;
+      const panelRoot = this.panelRoot;
+      const LayerProvide = defineComponent({
+        name: 'PanelLayerProvide',
+        setup() {
+          provide(PlaygroundVueContainerKey, playgroundContainer as any);
+          try {
+            provide(PlaygroundVueRefKey, playgroundContainer.get(Playground));
+          } catch {
+            // ignore
+          }
+          return () =>
+            h(Teleport, { to: panelRoot }, [
+              h(PanelLayerComp, layoutProps as any, () => children as any),
+            ]);
+        },
+      });
+      this.layout = h(LayerProvide);
+    }
+    return this.layout;
+  }
+}

package/src/services/panel-manager.ts

@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable, inject } from 'inversify';
+import { Emitter } from '@flowgram-vue/utils';
+
+import { PanelManagerConfig } from './panel-config';
+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>>();
+
+  private panels = new Map<string, PanelEntity>();
+
+  private onPanelsChangeEvent = new Emitter<void>();
+
+  public onPanelsChange = this.onPanelsChangeEvent.event;
+
+  init() {
+    this.config.factories.forEach((factory) => this.register(factory));
+  }
+
+  /** registry panel factory */
+  register<T extends any>(factory: PanelFactory<T>) {
+    this.panelRegistry.set(factory.key, factory);
+  }
+
+  /** open panel */
+  public open(key: string, area: Area = 'right', options?: PanelEntityConfig) {
+    const factory = this.panelRegistry.get(key);
+    if (!factory) {
+      return;
+    }
+
+    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
+
+    if (factory.keepDOM && sameKeyPanels.length) {
+      const [panel] = sameKeyPanels;
+      // move to last
+      this.panels.delete(panel.id);
+      this.panels.set(panel.id, panel);
+      panel.visible = true;
+    } else {
+      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();
+  }
+
+  /** close panel */
+  public close(key?: string) {
+    const panels = this.getPanels();
+    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
+    closedPanels.forEach((panel) => {
+      this.remove(panel.id);
+    });
+    this.onPanelsChangeEvent.fire();
+  }
+
+  private trim(area: Area) {
+    /** 1. general panel; 2. keepDOM visible panel */
+    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);
+    const areaConfig = this.getAreaConfig(area);
+    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) {
+      return;
+    }
+    if (panel.keepDOM) {
+      panel.visible = false;
+    } else {
+      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.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

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties, VNode } from 'vue';
+
+export type Area = 'right' | 'bottom' | 'docked-right' | 'docked-bottom';
+
+export interface PanelConfig {
+  /** max panel */
+  max: number;
+}
+
+export interface PanelFactory<T extends any> {
+  key: string;
+  defaultSize: number;
+  fullscreen?: boolean;
+  maxSize?: number;
+  minSize?: number;
+  style?: CSSProperties;
+  /** Allows multiple panels with the same key to be rendered simultaneously  */
+  allowDuplicates?: boolean;
+  resize?: boolean;
+  keepDOM?: boolean;
+  render: (props: T) => VNode | null;
+}
+
+export interface PanelEntityConfig<T extends any = any> {
+  defaultSize?: number;
+  fullscreen?: boolean;
+  style?: CSSProperties;
+  props?: T;
+}

package/src/utils.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export const merge = <T>(...objs: Partial<T>[]) => {
+  const result: any = {};
+
+  for (const obj of objs) {
+    if (!obj || typeof obj !== 'object') continue;
+
+    for (const key of Object.keys(obj)) {
+      const value = (obj as any)[key];
+
+      if (result[key] === undefined) {
+        result[key] = value;
+      }
+    }
+  }
+
+  return result as T;
+};