@flowgram-vue/document 0.2.0

package/src/datas/flow-node-transition-data.ts

@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Point } from '@flowgram-vue/utils';
+import { EntityData } from '@flowgram-vue/core';
+
+import {
+  FlowNodeBaseType,
+  type FlowTransitionLabel,
+  FlowTransitionLabelEnum,
+  type FlowTransitionLine,
+  FlowTransitionLineEnum,
+} from '../typings';
+import { type FlowNodeEntity } from '../entities';
+import { FlowNodeTransformData } from './flow-node-transform-data';
+import { FlowNodeRenderData } from './flow-node-render-data';
+
+export interface FlowNodeTransitionSchema {}
+
+// 画线到下一个节点
+export const drawLineToNext = (transition: FlowNodeTransitionData) => {
+  const { transform } = transition;
+
+  // 默认绘制一根连接到下一个节点的线条
+  const currentOutput = transform.outputPoint;
+  if (transform.next) {
+    return [
+      {
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: currentOutput,
+        to: transform.next.inputPoint,
+      },
+    ];
+  }
+
+  return [];
+};
+
+// 画线到父节点的结尾
+export const drawLineToBottom = (transition: FlowNodeTransitionData) => {
+  const { transform } = transition;
+
+  const currentOutput = transform.outputPoint;
+  const isParentRoot = transform.parent?.entity.flowNodeType === FlowNodeBaseType.ROOT;
+  const parentOutput = transform.parent?.outputPoint;
+  if (
+    !isParentRoot &&
+    !transform.next &&
+    parentOutput &&
+    !new Point().copyFrom(currentOutput).equals(parentOutput) &&
+    !transition.isNodeEnd
+  ) {
+    return [
+      {
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: currentOutput,
+        to: parentOutput,
+      },
+    ];
+  }
+
+  return [];
+};
+
+export class FlowNodeTransitionData extends EntityData<FlowNodeTransitionSchema> {
+  static type = 'FlowNodeTransitionData';
+
+  declare entity: FlowNodeEntity;
+
+  // 当前节点的 transform
+  declare transform: FlowNodeTransformData;
+
+  declare renderData: FlowNodeRenderData;
+
+  getDefaultData(): FlowNodeTransitionSchema {
+    return {};
+  }
+
+  formatLines(lines: FlowTransitionLine[]) {
+    if (this.entity.document.options?.formatNodeLines) {
+      return this.entity.document.options?.formatNodeLines?.(this.entity, lines);
+    }
+    return lines;
+  }
+
+  formatLabels(labels: FlowTransitionLabel[]) {
+    if (this.entity.document.options.formatNodeLabels) {
+      return this.entity.document.options?.formatNodeLabels?.(this.entity, labels);
+    }
+    return labels;
+  }
+
+  get lines(): FlowTransitionLine[] {
+    return this.entity.memoGlobal<FlowTransitionLine[]>('lines', () => {
+      const { getChildLines } = this.entity.parent?.getNodeRegistry() || {};
+
+      if (getChildLines) {
+        return this.formatLines(getChildLines(this, this.entity.document.layout));
+      }
+
+      const { getLines } = this.entity.getNodeRegistry();
+
+      if (getLines) {
+        return this.formatLines(getLines(this, this.entity.document.layout));
+      }
+
+      // 横向布局不画线
+      if (this.transform.entity.isInlineBlock) {
+        return [];
+      }
+
+      return this.formatLines([...drawLineToNext(this), ...drawLineToBottom(this)]);
+    });
+  }
+
+  get labels() {
+    return this.entity.memoGlobal<FlowTransitionLabel[]>('labels', () => {
+      const { getChildLabels } = this.entity.parent?.getNodeRegistry() || {};
+
+      if (getChildLabels) {
+        return this.formatLabels(getChildLabels(this, this.entity.document.layout));
+      }
+
+      const { getLabels } = this.entity.getNodeRegistry();
+
+      if (getLabels) {
+        return this.formatLabels(getLabels(this, this.entity.document.layout));
+      }
+
+      // 横向布局不画加号
+      if (this.transform.entity.isInlineBlock) {
+        return [];
+      }
+
+      // 默认在中间点添加一个加号
+      const currentOutput = this.transform.outputPoint;
+      if (this.transform.next) {
+        return this.formatLabels([
+          {
+            offset: Point.getMiddlePoint(currentOutput, this.transform.next.inputPoint),
+            type: FlowTransitionLabelEnum.ADDER_LABEL,
+          },
+        ]);
+      }
+
+      const parentOutput = this.transform.parent?.outputPoint;
+      if (
+        parentOutput &&
+        !new Point().copyFrom(currentOutput).equals(parentOutput) &&
+        !this.isNodeEnd
+      ) {
+        return this.formatLabels([
+          {
+            offset: parentOutput,
+            type: FlowTransitionLabelEnum.ADDER_LABEL,
+          },
+        ]);
+      }
+
+      return [];
+    });
+  }
+
+  constructor(entity: FlowNodeEntity) {
+    super(entity);
+    this.transform = this.entity.addData<FlowNodeTransformData>(FlowNodeTransformData);
+    this.renderData = this.entity.addData<FlowNodeRenderData>(FlowNodeRenderData);
+
+    this.bindChange(this.transform);
+    this.bindChange(this.renderData);
+  }
+
+  get collapsed() {
+    return this.entity.collapsed;
+  }
+
+  get isNodeEnd(): boolean {
+    return this.entity.isNodeEnd;
+  }
+}

package/src/datas/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './flow-node-transform-data';
+export * from './flow-node-transition-data';
+export * from './flow-node-render-data';

package/src/entities/flow-document-transformer-entity.ts

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Emitter } from '@flowgram-vue/utils';
+import { ConfigEntity, type EntityOpts } from '@flowgram-vue/core';
+
+import type { FlowDocument } from '../flow-document';
+import { FlowNodeTransformData } from '../datas';
+
+interface FlowDocumentTransformerEntityConfig extends EntityOpts {
+  document: FlowDocument;
+}
+
+/**
+ * 用于通知所有 layer 更新
+ */
+export class FlowDocumentTransformerEntity extends ConfigEntity<
+  {
+    loading: boolean;
+    treeVersion: number;
+  },
+  FlowDocumentTransformerEntityConfig
+> {
+  static type = 'FlowDocumentTransformerEntity';
+
+  protected onRefreshEmitter = new Emitter<void>();
+
+  protected lastTransformVersion = -1;
+
+  protected lastTreeVersion = -1;
+
+  document: FlowDocument;
+
+  readonly onRefresh = this.onRefreshEmitter.event;
+
+  constructor(conf: FlowDocumentTransformerEntityConfig) {
+    super(conf);
+    this.document = conf.document;
+    this.toDispose.push(
+      this.document.originTree.onTreeChange(() => {
+        this.config.treeVersion += 1;
+        this.fireChange();
+      })
+    );
+    this.toDispose.push(this.onRefreshEmitter);
+  }
+
+  getDefaultConfig(): { loading: boolean; treeVersion: number } {
+    return {
+      loading: true,
+      treeVersion: 0,
+    };
+  }
+
+  get loading(): boolean {
+    return this.config.loading;
+  }
+
+  set loading(loading) {
+    if (this.config.loading !== loading) {
+      this.config.loading = loading;
+      this.fireChange();
+    }
+  }
+
+  /**
+   * 更新矩阵结构 (这个只有在树结构变化时候才会触发，如：添加节点、删除节点、改变位置节点)
+   */
+  updateTransformsTree(): void {
+    // 更新 node 结构树
+    this.document.renderTree.traverse((node, depth, index) => {
+      const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData)!;
+      // 收起时清空子节点
+      if (transform.collapsed) {
+        transform.transform.clearChildren();
+      }
+      if (node.parent) {
+        transform.setParentTransform(node.parent!.getData(FlowNodeTransformData));
+      }
+      // 更新 index
+      node.index = index;
+    });
+  }
+
+  clear(): void {
+    this.lastTreeVersion = -1;
+    this.lastTransformVersion = -1;
+  }
+
+  isTreeDirty(): boolean {
+    const transformVersion = this.entityManager.getEntityDataVersion(FlowNodeTransformData);
+    const isTreeVersionChanged = this.lastTreeVersion !== this.config.treeVersion;
+    const isTransformVersionChanged = this.lastTransformVersion !== transformVersion;
+    return isTreeVersionChanged || isTransformVersionChanged;
+  }
+
+  /**
+   * 刷新节点的相对偏移
+   */
+  refresh(): void {
+    const transformVersion = this.entityManager.getEntityDataVersion(FlowNodeTransformData);
+
+    const isTreeVersionChanged = this.lastTreeVersion !== this.config.treeVersion;
+    const isTransformVersionChanged = this.lastTransformVersion !== transformVersion;
+
+    this.entityManager.changeEntityLocked = true;
+    if (isTreeVersionChanged) {
+      this.document.renderTree.updateRenderStruct(); // 重新调整 renderTree 结构
+      this.updateTransformsTree(); // 更新树结构
+      this.lastTreeVersion = this.config.treeVersion;
+    }
+
+    if (isTreeVersionChanged || isTransformVersionChanged) {
+      // 位置计算不需要重新触发 Layer 刷新
+      this.document.layout.update(); // 更新布局
+      this.lastTransformVersion = this.entityManager.getEntityDataVersion(FlowNodeTransformData);
+      this.lastTreeVersion = this.config.treeVersion;
+      this.onRefreshEmitter.fire();
+    }
+
+    this.entityManager.changeEntityLocked = false;
+  }
+}