@flowgram-vue/renderer 0.2.0

package/src/entities/selector-box-config-entity.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  PositionSchema,
+  SizeSchema,
+  ConfigEntity,
+  PlaygroundDragEvent,
+} from '@flowgram-vue/core';
+import { Rectangle } from '@flowgram-vue/utils';
+
+export interface SelectorBoxConfigData extends PlaygroundDragEvent {
+  disabled?: boolean; // 是否禁用选择框
+}
+
+/**
+ * 选择框配置
+ */
+export class SelectorBoxConfigEntity extends ConfigEntity<SelectorBoxConfigData> {
+  static type = 'SelectorBoxConfigEntity';
+
+  get dragInfo(): PlaygroundDragEvent {
+    return this.config;
+  }
+
+  setDragInfo(info: PlaygroundDragEvent): void {
+    this.updateConfig(info);
+  }
+
+  get disabled(): boolean {
+    return this.config && !!this.config.disabled;
+  }
+
+  set disabled(disabled: boolean) {
+    this.updateConfig({
+      disabled,
+    });
+  }
+
+  get isStart(): boolean {
+    return this.dragInfo.isStart;
+  }
+
+  get isMoving(): boolean {
+    return this.dragInfo.isMoving;
+  }
+
+  get position(): PositionSchema {
+    const { dragInfo } = this;
+    return {
+      x: dragInfo.startPos.x < dragInfo.endPos.x ? dragInfo.startPos.x : dragInfo.endPos.x,
+      y: dragInfo.startPos.y < dragInfo.endPos.y ? dragInfo.startPos.y : dragInfo.endPos.y,
+    };
+  }
+
+  get size(): SizeSchema {
+    const { dragInfo } = this;
+    return {
+      width: Math.abs(dragInfo.startPos.x - dragInfo.endPos.x),
+      height: Math.abs(dragInfo.startPos.y - dragInfo.endPos.y),
+    };
+  }
+
+  get collapsed(): boolean {
+    const { size } = this;
+    return size.width === 0 && size.height === 0;
+  }
+
+  collapse(): void {
+    this.setDragInfo({
+      ...this.dragInfo,
+      isMoving: false,
+      isStart: false,
+    });
+  }
+
+  toRectangle(scale: number): Rectangle {
+    const { position, size } = this;
+    return new Rectangle(
+      position.x / scale,
+      position.y / scale,
+      size.width / scale,
+      size.height / scale,
+    );
+  }
+}

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/flow-renderer-container-module.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ContainerModule } from 'inversify';
+
+import { FlowRendererResizeObserver } from './flow-renderer-resize-observer';
+import { FlowRendererRegistry } from './flow-renderer-registry';
+
+export const FlowRendererContainerModule = new ContainerModule(bind => {
+  bind(FlowRendererRegistry).toSelf().inSingletonScope();
+  bind(FlowRendererResizeObserver).toSelf().inSingletonScope();
+});

package/src/flow-renderer-contribution.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { FlowRendererRegistry } from './flow-renderer-registry';
+
+export const FlowRendererContribution = Symbol('FlowRendererContribution');
+
+export interface FlowRendererContribution {
+  registerRenderer?(registry: FlowRendererRegistry): void;
+}

package/src/flow-renderer-registry.ts

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable, multiInject, optional } from 'inversify';
+import type { Component } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+import { type Layer, type LayerRegistry, PipelineRegistry } from '@flowgram-vue/core';
+
+import { FlowRendererContribution } from './flow-renderer-contribution';
+
+export enum FlowRendererComponentType {
+  VUE, // vue 组件
+  DOM, // dom 组件
+  TEXT, // 文案
+}
+
+export enum FlowRendererKey {
+  NODE_RENDER = 'node-render', // 节点渲染
+  ADDER = 'adder', // 添加按钮渲染
+  COLLAPSE = 'collapse', // 节点展开收起标签（包含展开态和收起态）
+  BRANCH_ADDER = 'branch-adder', // 分支添加按钮
+  TRY_CATCH_COLLAPSE = 'try-catch-collapse', // 错误处理分支整体收起
+  DRAG_NODE = 'drag-node', // 拖拽节点
+  DRAGGABLE_ADDER = 'draggable-adder', // 拖拽可被拖入
+  DRAG_HIGHLIGHT_ADDER = 'drag-highlight-adder', // 拖拽高亮
+  DRAG_BRANCH_HIGHLIGHT_ADDER = 'drag-branch-highlight-adder', // 分支拖拽添加高亮
+  SELECTOR_BOX_POPOVER = 'selector-box-popover', // 选择框右上角菜单
+  /**
+   * @deprecated
+   */
+  CONTEXT_MENU_POPOVER = 'context-menu-popover', // 右键菜单
+  SUB_CANVAS = 'sub-canvas', // 子画布渲染
+
+  SLOT_ADDER = 'slot-adder', // 插槽添加按钮
+  SLOT_LABEL = 'slot-label', // 插槽标签
+  SLOT_COLLAPSE = 'slot-collapse', // 插槽收起按钮渲染
+
+  // 工作流线条箭头自定义渲染
+  ARROW_RENDERER = 'arrow-renderer', // 工作流线条箭头渲染器
+
+  // 下边两个不一定存在
+  MARKER_ARROW = 'marker-arrow', // loop 的默认箭头
+  MARKER_ACTIVATE_ARROW = 'marker-active-arrow', // loop 的激活态箭头
+}
+
+export enum FlowTextKey {
+  // 循环节点相关
+  LOOP_END_TEXT = 'loop-end-text', // 文案：循环结束
+  LOOP_TRAVERSE_TEXT = 'loop-traverse-text', // 文案：循环遍历
+  LOOP_WHILE_TEXT = 'loop-while-text', // 文案：满足条件时
+  // TryCatch 相关
+  TRY_START_TEXT = 'try-start-text', // 文案：监控开始
+  TRY_END_TEXT = 'try-end-text', // 文案：监控结束
+  CATCH_TEXT = 'catch-text', // 发生错误
+}
+
+export interface FlowRendererComponent {
+  type: FlowRendererComponentType;
+  renderer: Component | ((props?: any) => any);
+}
+
+/**
+ * 命令分类
+ */
+export enum FlowRendererCommandCategory {
+  SELECTOR_BOX = 'SELECTOR_BOX', // 选择框
+}
+
+@injectable()
+export class FlowRendererRegistry {
+  private componentsMap = new Map<string, FlowRendererComponent>();
+
+  private textMap = new Map<string, string>();
+
+  @multiInject(FlowRendererContribution)
+  @optional()
+  private contribs: FlowRendererContribution[] = [];
+
+  @inject(PipelineRegistry) readonly pipeline: PipelineRegistry;
+
+  init() {
+    this.contribs.forEach((contrib) => contrib.registerRenderer?.(this));
+  }
+
+  /**
+   * 注册 组件数据
+   */
+  registerRendererComponents(
+    renderKey: FlowRendererKey | string,
+    comp: FlowRendererComponent
+  ): void {
+    this.componentsMap.set(renderKey, comp);
+  }
+
+  registerVueComponent(
+    renderKey: FlowRendererKey | string,
+    renderer: Component | ((props: any) => any)
+  ): void {
+    this.componentsMap.set(renderKey, {
+      type: FlowRendererComponentType.VUE,
+      renderer,
+    });
+  }
+
+  /**
+   * 注册文案
+   */
+  registerText(configs: Record<FlowTextKey | string, string>): void {
+    Object.entries(configs).forEach(([key, value]) => {
+      this.textMap.set(key, value);
+    });
+  }
+
+  getText(textKey: string) {
+    return I18n.t(textKey, { defaultValue: '' }) || this.textMap.get(textKey);
+  }
+
+  /**
+   * TODO: support memo
+   */
+  public getRendererComponent(renderKey: FlowRendererKey | string): FlowRendererComponent {
+    const comp = this.componentsMap.get(renderKey);
+    if (!comp) {
+      throw new Error(`Unknown render key ${renderKey}`);
+    }
+    return comp;
+  }
+
+  tryToGetRendererComponent(
+    renderKey: FlowRendererKey | string
+  ): FlowRendererComponent | undefined {
+    return this.componentsMap.get(renderKey);
+  }
+
+  /**
+   * 注册画布层
+   */
+  registerLayers(...layerRegistries: LayerRegistry[]): void {
+    layerRegistries.forEach((layer) => this.pipeline.registerLayer(layer));
+  }
+
+  /**
+   * 根据配置注册画布
+   * @param layerRegistry
+   * @param options
+   */
+  registerLayer<P extends Layer = Layer>(
+    layerRegistry: LayerRegistry<Layer>,
+    options?: P['options']
+  ): void {
+    this.pipeline.registerLayer(layerRegistry, options);
+  }
+}

package/src/flow-renderer-resize-observer.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+import { type FlowNodeTransformData } from '@flowgram-vue/document';
+import { Disposable } from '@flowgram-vue/utils';
+
+import { isHidden, isRectInit } from './utils/element';
+
+/**
+ * 监听 dom 元素的 size 变化，用于画布节点的大小变化重新计算
+ */
+@injectable()
+export class FlowRendererResizeObserver {
+  /**
+   * 监听元素 size，并同步到 transform
+   * @param el
+   * @param transform
+   */
+  observe(el: HTMLElement, transform: FlowNodeTransformData): Disposable {
+    const observer = new ResizeObserver(entries => {
+      /**
+       * NOTICE: 不加 window.requestAnimationFrame
+       * 会导致 "ResizeObserver loop completed with undelivered notifications." 报错
+       * 这个报错在 chrome 和 firefox 是默认被忽略的，但本地调试会被编译工具弹窗打断
+       */
+      window.requestAnimationFrame(() => {
+        if (!Array.isArray(entries) || !entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        const { contentRect, target } = entry;
+        // 元素宽高未计算时，不更新节点 size
+        const isContentRectInit = isRectInit(contentRect);
+        // 目标节点脱离 DOM 树，忽略本次变更
+        const isLeaveDOMTree = !target.parentNode;
+        // IDE 环境下画布元素可能 display none，这时候会监听到元素宽高 0 导致闪屏
+        // 此情况下不作 resize 重渲染
+        const isHiddenElement = isHidden(target.parentNode as HTMLElement);
+        if (isContentRectInit && !isLeaveDOMTree && !isHiddenElement) {
+          // 更新节点 size 数据
+          transform.size = {
+            width: Math.round(contentRect.width * 10) / 10,
+            height: Math.round(contentRect.height * 10) / 10,
+          };
+        }
+      });
+    });
+    observer.observe(el);
+    return Disposable.create(() => {
+      observer.unobserve(el);
+    });
+  }
+}

package/src/hooks/use-base-color.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ConstantKeys, FlowDocumentOptions } from '@flowgram-vue/document';
+import { useService } from '@flowgram-vue/core';
+
+export const BASE_DEFAULT_COLOR = '#BBBFC4';
+export const BASE_DEFAULT_ACTIVATED_COLOR = '#82A7FC';
+
+export function getBaseColor(options?: FlowDocumentOptions | null): {
+  baseColor: string;
+  baseActivatedColor: string;
+} {
+  return {
+    baseColor: options?.constants?.[ConstantKeys.BASE_COLOR] || BASE_DEFAULT_COLOR,
+    baseActivatedColor:
+      options?.constants?.[ConstantKeys.BASE_ACTIVATED_COLOR] || BASE_DEFAULT_ACTIVATED_COLOR,
+  };
+}
+
+export function useBaseColor(): { baseColor: string; baseActivatedColor: string } {
+  const options = useService<FlowDocumentOptions>(FlowDocumentOptions);
+  return getBaseColor(options);
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './entities';
+export * from './layers';
+export * from './flow-renderer-contribution';
+export * from './flow-renderer-registry';
+export * from './flow-renderer-container-module';
+
+export { ScrollBarEvents } from './utils';
+export { MARK_ARROW_ID } from './components/MarkerArrow';
+export { MARK_ACTIVATED_ARROW_ID } from './components/MarkerActivatedArrow';
+export { useBaseColor } from './hooks/use-base-color';
+export { createLines } from './components/LinesRenderer';

package/src/layer-vue-provide.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, provide, type VNodeChild } from 'vue';
+import {
+  Playground,
+  PlaygroundVueContainerKey,
+  PlaygroundVueRefKey,
+  type PlaygroundContainerFactory,
+} from '@flowgram-vue/core';
+
+/**
+ * 给 Layer 独立 createApp 注入 playground 容器，使子组件里的 useService / usePlayground 可用。
+ */
+export const LayerVueProvide = defineComponent({
+  name: 'LayerVueProvide',
+  props: {
+    factory: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const factory = props.factory as PlaygroundContainerFactory;
+    provide(PlaygroundVueContainerKey, factory as any);
+    try {
+      provide(PlaygroundVueRefKey, factory.get(Playground));
+    } catch {
+      // 测试容器可能重复 bind PlaygroundConfig，此时仅 provide container
+    }
+  },
+  render() {
+    return this.$slots.default?.();
+  },
+});
+
+export function wrapLayerRender(
+  factory: PlaygroundContainerFactory,
+  children: VNodeChild
+) {
+  return h(LayerVueProvide, { factory }, () => children);
+}

package/src/layers/flow-context-menu-layer.ts

@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, type Component, type VNode } from 'vue';
+import { inject, injectable } from 'inversify';
+import { domUtils } from '@flowgram-vue/utils';
+import {
+  CommandRegistry,
+  ContextMenuService,
+  EditorState,
+  EditorStateConfigEntity,
+  Layer,
+  observeEntity,
+  PipelineLayerPriority,
+  PlaygroundConfigEntity,
+  PlaygroundContainerFactory,
+  SelectionService,
+} from '@flowgram-vue/core';
+
+import { wrapLayerRender } from '../layer-vue-provide';
+import {
+  FlowRendererCommandCategory,
+  FlowRendererKey,
+  FlowRendererRegistry,
+} from '../flow-renderer-registry';
+import { SelectorBoxConfigEntity } from '../entities/selector-box-config-entity';
+import { FlowSelectConfigEntity } from '../entities/flow-select-config-entity';
+
+/**
+ * 流程右键菜单
+ */
+@injectable()
+export class FlowContextMenuLayer extends Layer {
+  @inject(CommandRegistry) readonly commandRegistry: CommandRegistry;
+
+  @inject(FlowRendererRegistry) readonly rendererRegistry: FlowRendererRegistry;
+
+  @inject(ContextMenuService) readonly contextMenuService: ContextMenuService;
+
+  @inject(PlaygroundContainerFactory) readonly playgroundContainer: PlaygroundContainerFactory;
+
+  @observeEntity(FlowSelectConfigEntity) protected flowSelectConfigEntity: FlowSelectConfigEntity;
+
+  @inject(SelectionService) readonly selectionService: SelectionService;
+
+  @observeEntity(PlaygroundConfigEntity)
+  protected playgroundConfigEntity: PlaygroundConfigEntity;
+
+  @observeEntity(EditorStateConfigEntity)
+  protected editorStateConfig: EditorStateConfigEntity;
+
+  @observeEntity(SelectorBoxConfigEntity)
+  protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+
+  readonly node = domUtils.createDivWithClass('gedit-context-menu-layer');
+
+  readonly nodeRef: { current: { setVisible: (v: boolean) => void } | null } = { current: null };
+
+  isEnabled(): boolean {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return (
+      !this.config.disabled &&
+      !this.config.readonly &&
+      currentState === EditorState.STATE_SELECT &&
+      !this.selectorBoxConfigEntity.disabled
+    );
+  }
+
+  onReady(): void {
+    this.node!.style.zIndex = '30';
+    this.node!.style.display = 'block';
+    this.toDispose.pushAll([
+      this.listenPlaygroundEvent(
+        'contextmenu',
+        (e: MouseEvent): boolean | undefined => {
+          if (!this.isEnabled()) return;
+          this.contextMenuService.rightPanelVisible = true;
+          const bounds = this.flowSelectConfigEntity.getSelectedBounds();
+          if (bounds.width === 0 || bounds.height === 0) {
+            return;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+
+          this.nodeRef.current?.setVisible(true);
+          const clientBounds = this.playgroundConfigEntity.getClientBounds();
+          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x;
+          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y;
+          this.node.style.left = `${dragBlockX}px`;
+          this.node.style.top = `${dragBlockY}px`;
+        },
+        PipelineLayerPriority.BASE_LAYER
+      ),
+      this.listenPlaygroundEvent('mousedown', () => {
+        this.nodeRef.current?.setVisible(false);
+        this.contextMenuService.rightPanelVisible = false;
+      }),
+    ]);
+  }
+
+  onScroll() {
+    this.nodeRef.current?.setVisible(false);
+  }
+
+  onZoom() {
+    this.nodeRef.current?.setVisible(false);
+  }
+
+  /**
+   * Destroy
+   */
+  dispose(): void {
+    super.dispose();
+  }
+
+  /**
+   * 渲染工具栏
+   */
+  renderCommandMenus(): VNode[] {
+    return this.commandRegistry.commands
+      .filter((cmd) => cmd.category === FlowRendererCommandCategory.SELECTOR_BOX)
+      .map((cmd) => {
+        const CommandRenderer = this.rendererRegistry.getRendererComponent(
+          (cmd.icon as string) || cmd.id
+        )?.renderer as Component;
+        return h(CommandRenderer, {
+          key: cmd.id,
+          command: cmd,
+          isContextMenu: true,
+          disabled: !this.commandRegistry.isEnabled(cmd.id),
+          onClick: (e: any) => this.commandRegistry.executeCommand(cmd.id, e),
+        });
+      })
+      .filter((c) => c);
+  }
+
+  render() {
+    const SelectorBoxPopover = this.rendererRegistry.getRendererComponent(
+      FlowRendererKey.CONTEXT_MENU_POPOVER
+    ).renderer as Component;
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(SelectorBoxPopover, {
+        ref: (inst: any) => {
+          this.nodeRef.current = inst;
+        },
+        content: this.renderCommandMenus(),
+      })
+    );
+  }
+}