@flowgram-vue/core 0.2.0

package/src/core/pipeline/pipeline-registry.ts

@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import {
+  ConflatableMessage,
+  type IMessageHandler,
+  type Message,
+  MessageLoop,
+} from '@phosphor/messaging';
+import { Disposable, DisposableCollection, Emitter } from '@flowgram-vue/utils';
+
+import { type Layer, type LayerRegistry, PlaygroundConfigEntity } from '../layer';
+import {
+  // AbleManager,
+  ConfigEntity,
+  Entity,
+  EntityManager,
+  // getAbleMetadata,
+  getEntityDatasMetadata,
+  getEntityMetadata,
+  injectPlaygroundContext,
+  PlaygroundContext,
+} from '../../common';
+import { PipelineRenderer } from './pipeline-renderer';
+import { PipelineEntitiesSelector } from './pipeline-entities-selector';
+import { PipelineEntitiesImpl } from './pipeline-entities';
+// import { PipelineDispatcher } from './pipeline-dispatcher';
+import {
+  type PipeEventName,
+  type PipelineDimension,
+  type PipelineEventHandler,
+  type PipelineEventRegsiter,
+  PipelineLayerFactory,
+  type PipeSupportEvent,
+} from './pipeline';
+
+export enum PipelineMessage {
+  ZOOM = 'PIPELINE_ZOOM',
+  SCROLL = 'PIPELINE_SCROLL',
+}
+const zoomMessage = new ConflatableMessage(PipelineMessage.ZOOM);
+const scrollMessage = new ConflatableMessage(PipelineMessage.SCROLL);
+/**
+ * pipeline 注册器，用于注册一些事件
+ */
+@injectable()
+export class PipelineRegistry implements Disposable, IMessageHandler {
+  private _isFocused = false;
+
+  protected toDispose = new DisposableCollection();
+
+  protected allLayersMap = new Map<LayerRegistry, Layer>();
+
+  readonly onResizeEmitter = new Emitter<PipelineDimension>();
+
+  readonly onFocusEmitter = new Emitter<void>();
+
+  readonly onBlurEmitter = new Emitter<void>();
+
+  readonly onZoomEmitter = new Emitter<number>();
+
+  readonly onScrollEmitter = new Emitter<{ scrollX: number; scrollY: number }>();
+
+  readonly onFocus = this.onFocusEmitter.event;
+
+  readonly onBlur = this.onBlurEmitter.event;
+
+  readonly onZoom = this.onZoomEmitter.event;
+
+  readonly onScroll = this.onScrollEmitter.event;
+
+  constructor() {
+    this.toDispose.pushAll([
+      this.onResizeEmitter,
+      this.onFocusEmitter,
+      this.onZoomEmitter,
+      this.onBlurEmitter,
+      this.onScrollEmitter,
+    ]);
+    this.onFocusEmitter.event(() => {
+      this._isFocused = true;
+    });
+    this.onBlurEmitter.event(() => {
+      this._isFocused = false;
+    });
+  }
+
+  // @inject(PipelineDispatcher) dispatcher: PipelineDispatcher;
+
+  @inject(PipelineRenderer) renderer: PipelineRenderer;
+
+  @inject(PipelineEntitiesSelector) selector: PipelineEntitiesSelector;
+
+  @inject(EntityManager) entityManager: EntityManager;
+
+  // @inject(AbleManager) ableManager: AbleManager;
+
+  @injectPlaygroundContext() context: PlaygroundContext;
+
+  @inject(PipelineLayerFactory) layerFactory: PipelineLayerFactory;
+
+  // @inject(SelectionService) @optional() selectionService?: SelectionService;
+  protected playgroundEvents: {
+    [key: string]: { handlers: PipelineEventRegsiter[] } & Disposable;
+  } = {};
+
+  protected globalEvents: {
+    [key: string]: { handlers: PipelineEventRegsiter[] } & Disposable;
+  } = {};
+
+  _listenEvent(
+    name: PipeEventName,
+    handle: PipelineEventHandler,
+    isGlobal: boolean,
+    priority = 0,
+    options?: AddEventListenerOptions
+  ): Disposable {
+    const eventsCache = isGlobal ? this.globalEvents : this.playgroundEvents;
+    const domNode = isGlobal ? document : this.renderer.node.parentNode!;
+    let eventRegister = eventsCache[name];
+    if (!eventRegister) {
+      const realHandler = {
+        handleEvent: (e: PipeSupportEvent) => {
+          const list = eventRegister.handlers;
+          for (let i = 0, len = list.length; i < len; i++) {
+            const prevent = list[i].handle(e);
+            /* v8 ignore next 1 */
+            if (prevent) return;
+          }
+        },
+      };
+      domNode.addEventListener(name, realHandler, options);
+      eventRegister = eventsCache[name] = {
+        handlers: [],
+        dispose: () => {
+          domNode.removeEventListener(name, realHandler);
+          delete eventsCache[name];
+        },
+      };
+    }
+    const { handlers } = eventRegister;
+    const item = { handle, priority };
+    /**
+     * handlers 排序：
+     * 1. 后注册先执行 (符合冒泡规则)
+     * 2. 按 priority 排序
+     */
+    handlers.unshift(item);
+    handlers.sort((a, b) => b.priority - a.priority);
+    const dispose = Disposable.create(() => {
+      const index = eventRegister.handlers.indexOf(item);
+      if (index !== -1) eventRegister.handlers.splice(index, 1);
+      if (eventRegister.handlers.length === 0) {
+        eventRegister.dispose();
+      }
+    });
+    this.toDispose.push(dispose);
+    return dispose;
+  }
+
+  /**
+   * 监听画布上的浏览器事件
+   */
+  listenPlaygroundEvent(
+    name: PipeEventName,
+    handle: (event: PipeSupportEvent) => boolean | undefined,
+    priority?: number,
+    options?: AddEventListenerOptions
+  ): Disposable {
+    return this._listenEvent(name, handle, false, priority, options);
+  }
+
+  /**
+   * 监听全局的事件
+   * @param name
+   * @param handle
+   */
+  listenGlobalEvent(
+    name: PipeEventName,
+    handle: (event: PipeSupportEvent) => boolean | undefined,
+    priority?: number,
+    options?: AddEventListenerOptions
+  ): Disposable {
+    return this._listenEvent(name, handle, true, priority, options);
+  }
+
+  /**
+   * 注册 layer
+   * @param layerRegistry
+   * @param layerOptions 配置
+   */
+  registerLayer<P extends Layer = Layer>(
+    layerRegistry: LayerRegistry<P>,
+    layerOptions?: P['options']
+  ): void {
+    // layer 不允许重复添加
+    if (this.allLayersMap.has(layerRegistry)) return;
+    const layer = this.layerFactory(layerRegistry, layerOptions);
+    this.allLayersMap.set(layerRegistry, layer);
+    // const ableRegistries = getAbleMetadata(layerRegistry);
+    const entityRegistries = getEntityMetadata(layerRegistry);
+    const entityDataRegistries = getEntityDatasMetadata(layerRegistry);
+    // ableRegistries.forEach(r => this.ableManager.registerAble(r));
+    entityRegistries.forEach((r) => {
+      this.entityManager.registerEntity(r);
+      if (Entity.isRegistryOf(r, ConfigEntity)) {
+        // 自动创建注册的 entity
+        this.entityManager.createEntity(r);
+      }
+    });
+    entityDataRegistries.forEach((r) => {
+      this.entityManager.registerEntity(r.entity);
+      this.entityManager.registerEntityData(r.data);
+    });
+    // this.selector.subscribeAVbles(layer, ableRegistries);
+    this.selector.subscribeEntities(layer, entityRegistries);
+    entityDataRegistries.forEach((r) =>
+      this.selector.subscribleEntityByData(layer, r.entity, r.data)
+    );
+    layer.observeManager = new PipelineEntitiesImpl(this.entityManager);
+    // layer.commands = this.commands;
+    // layer.menus = this.menus;
+    // layer.keybindings = this.keybindings;
+    // layer.selectionService = this.selectionService;
+    layer.reloadEntities = () => {
+      const result = this.selector.getLayerData(layer);
+      if (result.changed) {
+        (layer.observeManager as PipelineEntitiesImpl).load(
+          result.observeEntities,
+          result.observeDatas
+        );
+      }
+      return result.changed;
+    };
+    // layer.dispatch = (payloadKey: string | symbol, payloadValue: object, cb?: () => void) => {
+    //   const changedEntities = this.dispatcher.dispatch(payloadKey, payloadValue);
+    //   if (cb) {
+    //     if (changedEntities.length > 0) {
+    //       const changed = layer.reloadEntities();
+    //       if (changed && layer.autorun) layer.autorun();
+    //     }
+    //     cb();
+    //   }
+    // };
+    // @ts-ignore
+    layer.listenPlaygroundEvent = this.listenPlaygroundEvent.bind(this);
+    // @ts-ignore
+    layer.listenGlobalEvent = this.listenGlobalEvent.bind(this);
+    layer.config = this.configEntity;
+    layer.getOtherLayer = this.getLayer.bind(this);
+    Object.defineProperty(layer, 'isFocused', {
+      get: () => this._isFocused,
+    });
+    if (layer.onResize) {
+      this.onResize(layer.onResize.bind(layer));
+    }
+    if (layer.onBlur) {
+      this.onBlurEmitter.event(layer.onBlur.bind(layer));
+    }
+    if (layer.onFocus) {
+      this.onFocusEmitter.event(layer.onFocus.bind(layer));
+    }
+    if (layer.onZoom) {
+      this.onZoomEmitter.event(layer.onZoom.bind(layer));
+    }
+    if (layer.onScroll) {
+      this.onScrollEmitter.event(layer.onScroll.bind(layer));
+    }
+    if (layer.onViewportChange) {
+      const viewportChange = layer.onViewportChange.bind(layer);
+      this.onResize(viewportChange);
+      this.onZoomEmitter.event(viewportChange);
+      this.onScrollEmitter.event(viewportChange);
+    }
+    if (layer.onReadonlyOrDisabledChange) {
+      this.configEntity.onReadonlyOrDisabledChange(layer.onReadonlyOrDisabledChange.bind(layer));
+    }
+    this.renderer.addLayer(layer);
+  }
+
+  /**
+   * 获取 layer
+   */
+  getLayer<T extends Layer>(layerRegistry: LayerRegistry<T>): T | undefined {
+    return this.allLayersMap.get(layerRegistry) as T;
+  }
+
+  get configEntity(): PlaygroundConfigEntity {
+    return this.entityManager.getEntity<PlaygroundConfigEntity>(PlaygroundConfigEntity, true)!;
+  }
+
+  ready(): void {
+    const config = this.configEntity;
+    let lastScale = config.finalScale;
+    let lastScroll = config.scrollData;
+    // 监听 zoom
+    config.onConfigChanged(() => {
+      /* v8 ignore next 10 */
+      const newScale = config.finalScale;
+      const newScroll = config.scrollData;
+      if (newScale !== lastScale) {
+        lastScale = newScale;
+        if (process.env.NODE_ENV === 'test') {
+          this.processMessage(zoomMessage);
+        } else {
+          MessageLoop.postMessage(this, zoomMessage);
+        }
+      }
+      if (lastScroll.scrollX !== newScroll.scrollX || lastScroll.scrollY !== newScroll.scrollY) {
+        lastScroll = newScroll;
+        if (process.env.NODE_ENV === 'test') {
+          this.processMessage(scrollMessage);
+        } else {
+          MessageLoop.postMessage(this, scrollMessage);
+        }
+      }
+    });
+  }
+
+  processMessage(msg: Message): void {
+    const config = this.configEntity;
+    switch (msg.type) {
+      case PipelineMessage.SCROLL:
+        this.onScrollEmitter.fire(config.scrollData);
+        break;
+      case PipelineMessage.ZOOM:
+        this.onZoomEmitter.fire(config.finalScale);
+        break;
+      default:
+    }
+  }
+
+  /**
+   * pipline 大小变化时候会触发
+   */
+  readonly onResize = this.onResizeEmitter.event;
+
+  dispose(): void {
+    this.toDispose.dispose();
+  }
+}

package/src/core/pipeline/pipeline-renderer.ts

@@ -0,0 +1,248 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import {
+  ConflatableMessage,
+  type IMessageHandler,
+  type Message,
+  MessageLoop,
+} from '@phosphor/messaging';
+import { Disposable, DisposableCollection, domUtils, Emitter } from '@flowgram-vue/utils';
+import { defineComponent, type Component } from 'vue';
+
+import { type Layer } from '../layer';
+import { LoggerService } from '../../services';
+import { EntityManager } from '../../common';
+import { createLayerVueAutorun } from './pipeline-vue-utils';
+import { PipelineEntitiesSelector } from './pipeline-entities-selector';
+import { type PipelineEntitiesImpl } from './pipeline-entities';
+
+export const FLUSH_LAYER_REQUEST = 'flush-layer-request';
+
+let id = 0;
+
+export class FlushLayerMessage extends ConflatableMessage {
+  constructor(readonly layer: Layer) {
+    super(`${FLUSH_LAYER_REQUEST}_layer${id++}`);
+  }
+}
+
+/**
+ * pipeline 渲染器
+ */
+@injectable()
+export class PipelineRenderer implements Disposable, IMessageHandler {
+  public isReady = false;
+
+  protected onAllLayersRenderedEmitter = new Emitter<void>();
+
+  protected toDispose = new DisposableCollection();
+
+  readonly layers: Layer[] = [];
+
+  protected forceUpdates: Set<Layer> = new Set();
+
+  readonly layerAutorunMap: Map<Layer, () => void> = new Map();
+
+  readonly layerRenderedMap: Map<Layer, boolean> = new Map();
+
+  readonly layerFlushMessages: Map<Layer, FlushLayerMessage> = new Map();
+
+  readonly node = domUtils.createDivWithClass('gedit-playground-pipeline');
+
+  /**
+   * 所有 Layer 第一次渲染完成后触发
+   */
+  readonly onAllLayersRendered = this.onAllLayersRenderedEmitter.event;
+
+  @inject(LoggerService) protected readonly loggerService: LoggerService;
+
+  constructor(
+    @inject(PipelineEntitiesSelector)
+    protected readonly selector: PipelineEntitiesSelector,
+    @inject(EntityManager) entityManager: EntityManager
+    // @inject(AbleManager) ableManager: AbleManager,
+  ) {
+    /**
+     * entity 修改触发 layer 更新
+     */
+    this.toDispose.push(
+      entityManager.onEntityChange((entityType: string) => {
+        const layers = this.selector.entityLayerMap.get(entityType);
+        if (layers) layers.forEach((layer) => this.updateLayer(layer));
+      })
+    );
+    this.toDispose.push(this.onAllLayersRenderedEmitter);
+  }
+
+  reportLayerRendered(layer: Layer): void {
+    this.layerRenderedMap.set(layer, true);
+    const allLayersRendered = Array.from(this.layerRenderedMap.values()).every((v) => v);
+    if (allLayersRendered) {
+      // logger 事件点位上报
+      this.loggerService.onAllLayersRendered();
+      this.onAllLayersRenderedEmitter.fire();
+      // e2e 性能测试时会注入以下全局变量
+      if ((window as any).REPORT_TTI_FOR_E2E) {
+        (window as any).REPORT_TTI_FOR_E2E(
+          // 由于 e2e 环境，performance 耗时即为 tti 的完整耗时。
+          performance.now(),
+          performance.getEntriesByType('resource')
+        );
+      }
+    }
+  }
+
+  addLayer(layer: Layer): void {
+    this.layers.push(layer);
+    this.toDispose.push(layer);
+    this.layerFlushMessages.set(layer, new FlushLayerMessage(layer));
+    layer.pipelineNode = this.node;
+    layer.playgroundNode = this.node.parentElement!;
+    // Auto create node
+    if ((layer.autorun || layer.render) && !layer.node) {
+      layer.node = document.createElement('div');
+    }
+    // 把 layer 加到父亲节点上
+    if (layer.node) {
+      this.node.appendChild(layer.node);
+      layer.node.classList.add('gedit-playground-layer');
+    }
+    if (layer.autorun) {
+      const autorun = layer.autorun.bind(layer);
+      this.layerAutorunMap.set(layer, autorun);
+      // 重载 layer autorun
+      layer.autorun = () => {
+        this.updateLayer(layer, true);
+      };
+    } else if (layer.render) {
+      this.layerRenderedMap.set(layer, false);
+      const render = layer.render.bind(layer);
+      const autorun = createLayerVueAutorun(
+        layer,
+        render,
+        this.reportLayerRendered.bind(this),
+        this
+      );
+      this.layerAutorunMap.set(layer, autorun.autorun);
+      this.toDispose.push(Disposable.create(() => autorun.dispose()));
+      if (process.env.NODE_ENV === 'test') {
+        // 不对外暴露_render 字段
+        (layer as any)._render = layer.render;
+      }
+      // 重载 layer.render：外部调用时走 flush，而不是直接画
+      layer.render = () => {
+        this.updateLayer(layer, true);
+        return null;
+      };
+    }
+  }
+
+  flush(forceUpdate?: boolean): void {
+    this.layers.forEach((layer) => {
+      this.updateLayer(layer, forceUpdate);
+    });
+  }
+
+  ready(): void {
+    this.layers.forEach((layer) => {
+      // 先加载一次数据，保证 ready 时候能运行
+      this.loadLayerEntities(layer);
+      if (layer.onReady) layer.onReady();
+    });
+    this.isReady = true;
+    // 第一次先渲染一次
+    this.flush(true);
+  }
+
+  dispose(): void {
+    this.toDispose.dispose();
+    this.node.remove();
+  }
+
+  processMessage(msg: Message): void {
+    if (msg instanceof FlushLayerMessage) {
+      this.onFlushRequest(msg.layer);
+    }
+  }
+
+  protected loadLayerEntities(layer: Layer): boolean {
+    const result = this.selector.getLayerData(layer);
+    if (result.changed) {
+      // 这里更新 layer 的 entities
+      (layer.observeManager as PipelineEntitiesImpl).load(
+        result.observeEntities,
+        result.observeDatas
+      );
+    }
+    return result.changed;
+  }
+
+  protected onFlushRequest(layer: Layer): boolean {
+    // 只有 ready 之后才能执行 autorun
+    if (!this.isReady || this.toDispose.disposed) return false;
+    const startRenderTime = performance.now();
+    const trackRenderPerformance = () => {
+      const renderDuration = performance.now() - startRenderTime;
+      // 小于 4ms 的渲染时间不需要记录
+      if (renderDuration < 4) {
+        return;
+      }
+      this.loggerService.onFlushRequest(renderDuration);
+    };
+    const autorun = this.layerAutorunMap.get(layer);
+    const changed = this.loadLayerEntities(layer);
+    // 只有修改或强制刷新才会刷新
+    if (autorun && (changed || this.forceUpdates.has(layer))) {
+      this.forceUpdates.delete(layer);
+      try {
+        // console.time(`layer ${layer.constructor.name}`)
+        autorun();
+        // console.timeEnd(`layer ${layer.constructor.name}`)
+        /* v8 ignore next 3 */
+      } catch (e) {
+        console.error(e);
+      }
+      trackRenderPerformance();
+      return true;
+      /* v8 ignore next 2 */
+    }
+    trackRenderPerformance();
+    return false;
+  }
+
+  /**
+   * 1. PostMessage: 会将消息在 nextTick 执行
+   * 2. ConflatableMessage: 当多个消息进来会在下一个 nextTick 做合并
+   * 3. 图层相互隔离，即时一层挂了也不受影响
+   */
+  updateLayer(layer: Layer, forceUpdate?: boolean): void {
+    if (forceUpdate) {
+      this.forceUpdates.add(layer);
+    }
+    if (process.env.NODE_ENV === 'test') {
+      this.onFlushRequest(layer);
+    } else {
+      MessageLoop.postMessage(this, this.layerFlushMessages.get(layer)!);
+    }
+  }
+
+  private vueComp?: Component;
+
+  /**
+   * 转成 Vue 组件。Layer 已通过 createApp 挂到 layer.node，这里仅保留 API 兼容。
+   */
+  toVueComponent(): Component {
+    if (this.vueComp) return this.vueComp;
+    this.vueComp = defineComponent({
+      name: 'PipelineVueLayers',
+      setup() {
+        return () => null;
+      },
+    });
+    return this.vueComp;
+  }
+}

package/src/core/pipeline/pipeline-vue-utils.ts

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { NOOP } from '@flowgram-vue/utils';
+import {
+  createApp,
+  defineComponent,
+  h,
+  isVNode,
+  nextTick,
+  onMounted,
+  shallowRef,
+  type App,
+  type Component,
+  type VNode,
+} from 'vue';
+
+import type { Layer } from '../layer';
+import { type PipelineRenderer } from './pipeline-renderer';
+
+export type LayerRenderResult = Component | VNode | null | void;
+
+export interface LayerVueAutorun {
+  autorun: () => void;
+  dispose: () => void;
+}
+
+export function createLayerVueAutorun(
+  layer: Layer,
+  originRenderer: () => LayerRenderResult,
+  renderedCb: (layer: Layer) => void,
+  pipelineRenderer: PipelineRenderer
+): LayerVueAutorun {
+  let app: App | null = null;
+  let update = NOOP;
+
+  const Root = defineComponent({
+    name: `PlaygroundVueLayer_${layer.constructor.name}`,
+    setup() {
+      const version = shallowRef(0);
+      update = () => {
+        version.value += 1;
+      };
+      onMounted(() => {
+        // 等 ready() 栈（含 contribution onReady）结束后再上报
+        nextTick(() => renderedCb(layer));
+      });
+      return () => {
+        void version.value;
+        if (!pipelineRenderer.isReady) {
+          return null;
+        }
+        try {
+          const result = originRenderer();
+          if (result == null) {
+            return null;
+          }
+          if (isVNode(result)) {
+            return result;
+          }
+          return h(result as Component);
+        } catch (e) {
+          console.error(`Render Layer "${layer.constructor.name}" error `, e);
+          return null;
+        }
+      };
+    },
+  });
+
+  function ensureMounted(): void {
+    if (app || !layer.node) {
+      return;
+    }
+    app = createApp(Root);
+    app.mount(layer.node);
+  }
+
+  return {
+    autorun: () => {
+      if (!app) {
+        ensureMounted();
+        return;
+      }
+      update();
+    },
+    dispose: () => {
+      if (app) {
+        app.unmount();
+        app = null;
+      }
+      update = NOOP;
+    },
+  };
+}

package/src/core/pipeline/pipeline.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type Layer, type LayerRegistry } from '../layer';
+
+export type PipeSupportEvent = MouseEvent | DragEvent | KeyboardEvent | UIEvent | TouchEvent | any;
+export type PipeEventName = string;
+export interface PipelineDimension {
+  width: number;
+  height: number;
+}
+
+export type PipelineEventHandler = (event: PipeSupportEvent) => boolean | undefined;
+
+export interface PipelineEventRegsiter {
+  handle: PipelineEventHandler;
+  priority: number;
+}
+
+export enum PipelineLayerPriority {
+  BASE_LAYER = -2, // 优先级最低
+  TOOL_LAYER = -1, // 工具层
+  NORMAL_LAYER, // 使用层
+}
+export const PipelineLayerFactory = Symbol('PipelineLayerFactory');
+export type PipelineLayerFactory = (layerRegistry: LayerRegistry, layerOptions?: any) => Layer;