@flowgram-vue/free-lines-plugin 0.2.0

package/src/layer/workflow-lines-layer.ts

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Fragment, h, Teleport, type Component, type VNode } from 'vue';
+
+import { inject, injectable } from 'inversify';
+import { domUtils } from '@flowgram-vue/utils';
+import { FlowRendererRegistry } from '@flowgram-vue/renderer';
+import { StackingContextManager } from '@flowgram-vue/free-stack-plugin';
+import {
+  nanoid,
+  WorkflowDocument,
+  WorkflowHoverService,
+  WorkflowLineEntity,
+  WorkflowLineRenderData,
+  WorkflowNodeEntity,
+  WorkflowPortEntity,
+  WorkflowSelectService,
+} from '@flowgram-vue/free-layout-core';
+import {
+  Layer,
+  observeEntities,
+  observeEntityDatas,
+  PlaygroundContainerFactory,
+  TransformData,
+} from '@flowgram-vue/core';
+
+import { wrapLayerRender } from '../wrap-layer-render';
+import { LineRenderProps, LinesLayerOptions } from '../type';
+import { WorkflowLineRender } from '../components';
+
+@injectable()
+export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
+  static type = 'WorkflowLinesLayer';
+
+  @inject(WorkflowHoverService) hoverService: WorkflowHoverService;
+
+  @inject(WorkflowSelectService) selectService: WorkflowSelectService;
+
+  @inject(StackingContextManager) stackContext: StackingContextManager;
+
+  @inject(FlowRendererRegistry) rendererRegistry: FlowRendererRegistry;
+
+  @inject(PlaygroundContainerFactory) playgroundContainer: PlaygroundContainerFactory;
+
+  @observeEntities(WorkflowLineEntity) readonly lines: WorkflowLineEntity[];
+
+  @observeEntities(WorkflowPortEntity) readonly ports: WorkflowPortEntity[];
+
+  @observeEntityDatas(WorkflowNodeEntity, TransformData)
+  readonly trans: TransformData[];
+
+  @inject(WorkflowDocument) protected workflowDocument: WorkflowDocument;
+
+  private layerID = nanoid();
+
+  private mountedLines: Map<
+    string,
+    {
+      line: WorkflowLineEntity;
+      portal: VNode;
+      version: string;
+    }
+  > = new Map();
+
+  private _version = 0;
+
+  private rafId?: number;
+
+  /**
+   * 节点线条
+   */
+  public node = domUtils.createDivWithClass('gedit-playground-layer gedit-flow-lines-layer');
+
+  public onZoom(scale: number): void {
+    this.node.style.transform = `scale(${scale})`;
+  }
+
+  public onReady() {
+    this.pipelineNode.appendChild(this.node);
+    this.toDispose.pushAll([
+      this.selectService.onSelectionChanged(() => this.render()),
+      this.hoverService.onHoveredChange(() => this.render()),
+      this.workflowDocument.linesManager.onForceUpdate(() => {
+        this.mountedLines.clear();
+        this.bumpVersion();
+        this.render();
+      }),
+    ]);
+  }
+
+  public dispose() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = undefined;
+    }
+    this.mountedLines.clear();
+  }
+
+  public render(): VNode {
+    this.scheduleLineRenderUpdate();
+    const lines = this.lines.map((line) => this.renderLine(line));
+    return wrapLayerRender(this.playgroundContainer, h(Fragment, null, lines));
+  }
+
+  private scheduleLineRenderUpdate(): void {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = undefined;
+      let needsUpdate = false;
+      this.lines.forEach((line) => {
+        const renderData = line.getData(WorkflowLineRenderData);
+        const oldVersion = renderData.renderVersion;
+        renderData.update();
+        if (renderData.renderVersion !== oldVersion) {
+          needsUpdate = true;
+        }
+      });
+      if (needsUpdate) {
+        this.render();
+      }
+    });
+  }
+
+  // 用来绕过 memo
+  private bumpVersion() {
+    this._version = this._version + 1;
+    if (this._version === Number.MAX_SAFE_INTEGER) {
+      this._version = 0;
+    }
+  }
+
+  private lineProps(line: WorkflowLineEntity): LineRenderProps {
+    const { lineType } = this.workflowDocument.linesManager;
+    const selected = this.selectService.isSelected(line.id);
+    const hovered = this.hoverService.isHovered(line.id);
+    const version = this.lineVersion(line);
+
+    const oldProps: LineRenderProps = {
+      key: line.id,
+      color: line.color,
+      selected,
+      hovered,
+      line,
+      lineType,
+      version,
+      strokePrefix: this.layerID,
+      rendererRegistry: this.rendererRegistry,
+    };
+    return this.options.customLineProps ? this.options.customLineProps(line, oldProps) : oldProps;
+  }
+
+  private lineVersion(line: WorkflowLineEntity): string {
+    const renderData = line.getData(WorkflowLineRenderData);
+    const { renderVersion } = renderData;
+    const selected = this.selectService.isSelected(line.id);
+    const hovered = this.hoverService.isHovered(line.id);
+    const { version: lineVersion, color } = line;
+
+    const version = `v:${this._version},lv:${lineVersion},rv:${renderVersion},c:${color},s:${
+      selected ? 'T' : 'F'
+    },h:${hovered ? 'T' : 'F'}`;
+
+    return version;
+  }
+
+  private lineComponent(props: LineRenderProps): VNode {
+    const RenderInsideLine = this.options.renderInsideLine;
+    const RenderLine = (this.options.renderLine ?? WorkflowLineRender) as Component;
+    const inside = RenderInsideLine ? h(RenderInsideLine, props) : null;
+    return h(RenderLine, props, () => inside);
+  }
+
+  private renderLine(line: WorkflowLineEntity): VNode {
+    const lineProps = this.lineProps(line);
+    const cache = this.mountedLines.get(line.id);
+    const isCached = cache !== undefined;
+    const { portal: cachedPortal, version: cachedVersion } = cache ?? {};
+    if (isCached && cachedVersion === lineProps.version) {
+      return cachedPortal!;
+    }
+    if (!isCached) {
+      this.renderElement.appendChild(line.node);
+      line.onDispose(() => {
+        this.mountedLines.delete(line.id);
+        line.node.remove();
+      });
+    }
+    const portal = h(Teleport, { to: line.node, key: line.id }, [this.lineComponent(lineProps)]);
+    this.mountedLines.set(line.id, { line, portal, version: lineProps.version });
+    return portal;
+  }
+
+  private get renderElement(): HTMLElement {
+    return this.stackContext.node;
+  }
+}

package/src/type.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Component, VNodeChild } from 'vue';
+
+import { type FlowRendererRegistry } from '@flowgram-vue/renderer';
+import type {
+  WorkflowLineEntity,
+  WorkflowLineRenderContributionFactory,
+  WorkflowLineUIState,
+} from '@flowgram-vue/free-layout-core';
+import { LineRenderType } from '@flowgram-vue/free-layout-core';
+
+export interface LineRenderProps {
+  key: string;
+  color?: string; // 高亮颜色，优先级最高
+  selected?: boolean;
+  hovered?: boolean;
+  line: WorkflowLineEntity;
+  lineType: LineRenderType;
+  version: string; // 用于控制 memo 刷新
+  strokePrefix?: string;
+  children?: VNodeChild;
+  rendererRegistry?: FlowRendererRegistry; // 渲染器注册表，用于获取自定义箭头组件
+  [key: string]: any;
+}
+
+export interface LinesLayerOptions {
+  renderInsideLine?: Component;
+  renderLine?: Component;
+  customLineProps?: (line: WorkflowLineEntity, oldProps: LineRenderProps) => LineRenderProps; // 自定义线条属性
+}
+
+export interface FreeLinesPluginOptions extends LinesLayerOptions {
+  contributions?: WorkflowLineRenderContributionFactory[];
+  defaultLineUIState?: Partial<WorkflowLineUIState>;
+  defaultLineType?: LineRenderType;
+}

package/src/types/arrow-renderer.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Component } from 'vue';
+
+import { type IPoint } from '@flowgram-vue/utils';
+import { LinePointLocation } from '@flowgram-vue/free-layout-core';
+import { type WorkflowLineEntity } from '@flowgram-vue/free-layout-core';
+
+/**
+ * 箭头渲染器属性接口
+ */
+export interface ArrowRendererProps {
+  /** 用于渐变的唯一ID */
+  id: string;
+  /** 箭头位置 */
+  pos: IPoint;
+  location: LinePointLocation;
+  /** 描边宽度 */
+  strokeWidth: number;
+  /** 是否隐藏箭头 */
+  hide?: boolean;
+  /** 线条实体，提供更多上下文信息 */
+  line: WorkflowLineEntity;
+}
+
+/**
+ * 箭头渲染器组件类型
+ */
+export type ArrowRendererComponent = Component;

package/src/wrap-layer-render.ts

@@ -0,0 +1,38 @@
+/**
+ * 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';
+
+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);
+}