@flowgram-vue/document 0.2.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@flowgram-vue/document",
+  "version": "0.2.0",
+  "description": "automation flow engine",
+  "keywords": [
+    "flow",
+    "engine"
+  ],
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.0.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "@flowgram-vue/build-config": "0.2.0",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "test:update": "vitest run --update",
+    "ts-check": "tsc --noEmit",
+    "watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
+  }
+}

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

@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Compare, Disposable, domUtils, Emitter } from '@flowgram-vue/utils';
+import { EntityData } from '@flowgram-vue/core';
+
+import { FlowNodeBaseType } from '../typings';
+import type { FlowNodeEntity } from '../entities';
+import { FlowNodeTransformData } from './index';
+
+export interface FlowNodeRenderSchema {
+  addable: boolean; // 是否可添加节点
+  expandable: boolean; // 是否可展开
+  collapsed?: boolean; // 复合节点是否收起
+  expanded: boolean;
+  activated: boolean; // 是否高亮节点
+  hovered: boolean; // 是否悬浮在节点上
+  dragging: boolean; // 是否正在拖拽
+  stackIndex: number; // 渲染层级
+  extInfo?: Record<string, any>; // 扩展渲染状态字段
+}
+
+/**
+ * 节点渲染状态相关数据
+ */
+export class FlowNodeRenderData extends EntityData<FlowNodeRenderSchema> {
+  static type = 'FlowNodeRenderData';
+
+  declare entity: FlowNodeEntity;
+
+  private _node?: HTMLDivElement;
+
+  protected onExtInfoChangeEmitter = new Emitter<{ newInfo: any; oldInfo: any }>();
+
+  readonly onExtInfoChange = this.onExtInfoChangeEmitter.event;
+
+  get key(): string {
+    return this.entity.id;
+  }
+
+  getDefaultData(): FlowNodeRenderSchema {
+    const { addable, expandable, defaultExpanded } = this.entity.getNodeMeta();
+    return {
+      addable,
+      expandable,
+      expanded: defaultExpanded || false,
+      activated: false,
+      hovered: false,
+      dragging: false,
+      stackIndex: 0,
+    };
+  }
+
+  updateExtInfo(info: Record<string, any>, fullUpdate?: boolean) {
+    const oldInfo = this.data.extInfo;
+    const newInfo = fullUpdate ? info : { ...oldInfo, ...info };
+    if (Compare.isChanged(oldInfo, newInfo)) {
+      this.update({
+        extInfo: newInfo,
+      });
+      this.onExtInfoChangeEmitter.fire({ oldInfo, newInfo });
+    }
+  }
+
+  getExtInfo(): Record<string, any> | undefined {
+    return this.data.extInfo;
+  }
+
+  constructor(entity: FlowNodeEntity) {
+    super(entity);
+    this.toDispose.push(
+      Disposable.create(() => {
+        if (this._node) this._node.remove();
+      })
+    );
+  }
+
+  get addable(): boolean {
+    return this.data.addable;
+  }
+
+  get expandable(): boolean {
+    return this.data.expandable;
+  }
+
+  get draggable(): boolean {
+    const { draggable } = this.entity.getNodeMeta();
+
+    if (typeof draggable === 'function') {
+      return draggable(this.entity);
+    }
+
+    return draggable;
+  }
+
+  get expanded(): boolean {
+    return this.data.expanded;
+  }
+
+  set expanded(expanded: boolean) {
+    if (this.expandable && this.data.expanded !== expanded) {
+      this.data.expanded = expanded;
+      this.fireChange();
+    }
+  }
+
+  toggleExpand() {
+    this.expanded = !this.expanded;
+  }
+
+  mouseLeaveTimeout?: ReturnType<typeof setTimeout>;
+
+  toggleMouseEnter(silent = false) {
+    this.entity.document.renderState.setNodeHovered(this.entity);
+    if (silent) return;
+    const transform = this.entity.getData(FlowNodeTransformData)!;
+    if (transform.renderState.hidden) {
+      return;
+    }
+    if (this.mouseLeaveTimeout) {
+      clearTimeout(this.mouseLeaveTimeout);
+      this.mouseLeaveTimeout = undefined;
+    }
+
+    transform.renderState.hovered = true;
+
+    if (this.entity.isFirst && this.entity.parent?.id !== 'root') {
+      // 分支中第一个节点 hover，parent activated 设置为 true
+      transform.parent!.renderState.activated = true;
+    } else {
+      transform.renderState.activated = true;
+    }
+  }
+
+  toggleMouseLeave(silent = false) {
+    this.entity.document.renderState.setNodeHovered(undefined);
+    if (silent) return;
+    const transform = this.entity.getData(FlowNodeTransformData)!;
+    this.mouseLeaveTimeout = setTimeout(() => {
+      transform.renderState.hovered = false;
+
+      if (this.entity.isFirst && this.entity.parent?.id !== 'root') {
+        transform.parent!.renderState.activated = false;
+      }
+      transform.renderState.activated = false;
+    }, 200);
+  }
+
+  get hidden(): boolean {
+    return this.entity.hidden;
+  }
+
+  set hovered(hovered: boolean) {
+    this.data.hovered = hovered;
+    this.fireChange();
+  }
+
+  get hovered() {
+    return this.data.hovered;
+  }
+
+  get dragging(): boolean {
+    return this.data.dragging;
+  }
+
+  set dragging(dragging: boolean) {
+    if (this.data.dragging !== dragging) {
+      this.data.dragging = dragging;
+      this.fireChange();
+    }
+  }
+
+  set activated(activated: boolean) {
+    if (this.entity.flowNodeType === FlowNodeBaseType.BLOCK_ICON && this.entity.parent) {
+      this.entity.parent.getData<FlowNodeRenderData>(FlowNodeRenderData)!.activated = activated;
+      return;
+    }
+    if (this.data.activated !== activated) {
+      this.data.activated = activated;
+      this.fireChange();
+    }
+  }
+
+  get activated() {
+    const { entity } = this;
+    if (entity.parent && entity.parent.getData<FlowNodeRenderData>(FlowNodeRenderData)!.activated) {
+      return true;
+    }
+    return this.data.activated;
+  }
+
+  get stackIndex(): number {
+    return this.data.stackIndex;
+  }
+
+  set stackIndex(index: number) {
+    this.data.stackIndex = index;
+  }
+
+  get lineActivated() {
+    const { activated } = this;
+    if (!activated) return false;
+    // 只有 parent 高亮的情况才高亮下面的线条，否则只高亮 node
+    // inlineBlock 仅看自身
+    // 圈选情况下个节点被高量，则也跟着高量
+    return Boolean(
+      this.entity.parent?.getData(FlowNodeRenderData)?.activated ||
+        this.entity.isInlineBlock ||
+        this.entity.next?.getData(FlowNodeRenderData)!.activated
+    );
+  }
+
+  get node(): HTMLDivElement {
+    if (this._node) return this._node;
+    this._node = domUtils.createDivWithClass('gedit-flow-activity-node');
+    this._node.dataset.testid = 'sdk.workflow.canvas.node';
+    this._node.dataset.nodeId = this.entity.id;
+    return this._node;
+  }
+
+  dispose() {
+    super.dispose();
+    this.onExtInfoChangeEmitter.dispose();
+  }
+}

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

@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Disposable, type IPoint, Rectangle } from '@flowgram-vue/utils';
+import {
+  Bounds,
+  EntityData,
+  PositionSchema,
+  type SizeSchema,
+  TransformData,
+} from '@flowgram-vue/core';
+
+import type { FlowNodeEntity } from '../entities';
+import { FlowNodeRenderData } from './flow-node-render-data';
+
+export interface FlowNodeTransformSchema {
+  size: SizeSchema; // 当前节点大小
+}
+
+export class FlowNodeTransformData extends EntityData<FlowNodeTransformSchema> {
+  static type = 'FlowNodeTransformData';
+
+  // 这里加 declare 原因：覆盖了 EntityData 默认的 EntityType，如果不声明会报 TS2612 错误
+  declare entity: FlowNodeEntity;
+
+  transform: TransformData;
+
+  renderState: FlowNodeRenderData;
+
+  localDirty = true;
+
+  get origin() {
+    return this.transform.origin;
+  }
+
+  get key(): string {
+    return this.entity.id;
+  }
+
+  getDefaultData(): FlowNodeTransformSchema {
+    const { size, hidden } = this.entity.getNodeMeta();
+    // 更新默认 size 大小
+    return {
+      size: !hidden ? { ...size } : { width: 0, height: 0 },
+    };
+  }
+
+  constructor(entity: FlowNodeEntity) {
+    super(entity);
+    const { origin } = this.entity.getNodeMeta();
+    this.transform = this.entity.addData<TransformData>(TransformData);
+    this.transform.changeLocked = true;
+    this.transform.update({ origin: { ...origin } });
+    this.transform.changeLocked = false;
+    this.renderState = this.entity.addData<FlowNodeRenderData>(FlowNodeRenderData);
+    this.bindChange(this.transform);
+    // 删除节点要让下一个节点或者父节点变成 dirty
+    this.toDispose.push(
+      Disposable.create(() => {
+        const { next, parent } = this;
+        if (next) next.localDirty = true;
+        if (parent) parent.localDirty = true;
+      })
+    );
+    // this.bindChange(this.renderState)
+  }
+
+  /**
+   * 获取节点是否展开
+   */
+  get collapsed(): boolean {
+    return this.entity.collapsed;
+  }
+
+  set collapsed(collapsed: boolean) {
+    this.entity.collapsed = collapsed;
+    this.localDirty = true;
+
+    // 第一个子节点也设置为 dirty
+    if (this.firstChild) this.firstChild.localDirty = true;
+
+    this.fireChange();
+  }
+
+  /**
+   * 获取节点的大小
+   */
+  get size(): SizeSchema {
+    return this.entity.memoGlobal<SizeSchema>('size', () => {
+      if (this.isContainer) return this.transform.localSize;
+      return this.data.size;
+    });
+  }
+
+  get position(): PositionSchema {
+    const { position } = this.transform;
+    return {
+      x: position.x,
+      y: position.y,
+    };
+  }
+
+  set position(position: PositionSchema) {
+    this.transform.update({
+      position,
+    });
+  }
+
+  set size(size: SizeSchema) {
+    const { width, height } = this.data.size;
+    // Container size 由子节点决定
+    if (this.isContainer) return;
+    if (size.width !== width || size.height !== height) {
+      this._data.size = { ...size };
+      this.localDirty = true;
+      this.fireChange();
+    }
+  }
+
+  get inputPoint() {
+    return this.entity.memoGlobal<IPoint>('inputPoint', () => {
+      const { getInputPoint } = this.entity.getNodeRegistry();
+      return getInputPoint
+        ? getInputPoint(this, this.entity.document.layout)
+        : this.defaultInputPoint;
+    });
+  }
+
+  get defaultInputPoint() {
+    return this.entity.memoGlobal<IPoint>('defaultInputPoint', () =>
+      this.entity.document.layout.getDefaultInputPoint(this.entity)
+    );
+  }
+
+  get defaultOutputPoint() {
+    return this.entity.memoGlobal<IPoint>('defaultOutputPoint', () =>
+      this.entity.document.layout.getDefaultOutputPoint(this.entity)
+    );
+  }
+
+  get outputPoint() {
+    return this.entity.memoGlobal<IPoint>('outputPoint', () => {
+      const { getOutputPoint } = this.entity.getNodeRegistry();
+      return getOutputPoint
+        ? getOutputPoint(this, this.entity.document.layout)
+        : this.defaultOutputPoint;
+    });
+  }
+
+  /**
+   * 原点的最左偏移
+   */
+  get originDeltaX(): number {
+    return this.entity.memoLocal<number>('originDeltaX', () => {
+      const { children } = this;
+      const { getOriginDeltaX } = this.entity.getNodeRegistry();
+      if (getOriginDeltaX) return getOriginDeltaX(this, this.entity.document.layout);
+      // 没有子节点，则采用自身的原点偏移
+      if (children.length === 0) {
+        return -this.size.width * this.origin.x;
+      }
+      // 采用子节点的最左偏移量来计算
+      if (children.length === 1) return children[0].originDeltaX;
+      // 这里代表水平偏移，则采用第一个节点加上自身偏移
+      if (this.entity.isInlineBlocks && children.length > 1) {
+        return children[0].originDeltaX + this.transform.position.x;
+      }
+      return children.reduce((res: undefined | number, child) => {
+        const deltaX = child.originDeltaX;
+        return res === undefined || deltaX < res ? deltaX : (res as number);
+      }, undefined) as number;
+    });
+  }
+
+  /**
+   * 原点 y 轴偏移
+   */
+  get originDeltaY(): number {
+    return this.entity.memoLocal<number>('originDeltaY', () => {
+      const { children } = this;
+      const { getOriginDeltaY } = this.entity.getNodeRegistry();
+      if (getOriginDeltaY) return getOriginDeltaY(this, this.entity.document.layout);
+      // 没有子节点，则采用自身的原点偏移
+      if (children.length === 0) {
+        return -this.size.height * this.origin.y;
+      }
+      // 采用子节点的最上偏移量来计算
+      if (children.length === 1) return children[0].originDeltaY;
+      // 这里代表水平偏移，则采用第一个节点加上自身偏移
+      if (this.entity.isInlineBlocks && children.length > 1) {
+        return children[0].originDeltaY + this.transform.position.y;
+      }
+      return children.reduce((res: undefined | number, child) => {
+        const deltaY = child.originDeltaY;
+        return res === undefined || deltaY < res ? deltaY : (res as number);
+      }, undefined) as number;
+    });
+  }
+
+  /**
+   * 绝对坐标 bbox, 不包含自身的 spacing(marginBottom), 但是包含 inlineSpacing 和 子节点的 spacing
+   */
+  get bounds(): Rectangle {
+    return this.entity.memoGlobal<Rectangle>('bounds', () => {
+      const { transform } = this;
+
+      if (this.isContainer) {
+        const childrenRects = transform.children.map(
+          (c) => c.entity.getData<FlowNodeTransformData>(FlowNodeTransformData)!.boundsWithPadding
+        );
+        // Container 要加上 inlineSpacing
+        return Rectangle.enlarge(childrenRects).withPadding(this.padding);
+      }
+      return transform.bounds; // 单个节点取默认的 bounds
+    });
+  }
+
+  get boundsWithPadding(): Rectangle {
+    return this.entity.memoGlobal<Rectangle>('boundsWithPadding', () => {
+      const { transform } = this;
+
+      if (this.isContainer) {
+        const childrenRects = transform.children.map(
+          (c) => c.entity.getData<FlowNodeTransformData>(FlowNodeTransformData)!.boundsWithPadding
+        );
+        return Rectangle.enlarge(childrenRects).withPadding(this.padding);
+      }
+      return transform.bounds.clone().withPadding(this.padding);
+    });
+  }
+
+  get isContainer(): boolean {
+    return this.transform.isContainer;
+  }
+
+  /**
+   * 相对坐标 bbox, 这里的 localBounds 会加入 padding 一起算
+   */
+  get localBounds(): Rectangle {
+    return this.entity.memoLocal<Rectangle>('localBounds', () => {
+      const { transform } = this;
+
+      if (this.isContainer) {
+        const childrenRects = transform.children.map(
+          (c) => c.entity.getData<FlowNodeTransformData>(FlowNodeTransformData)!.localBounds
+        );
+        const childrenBounds = Rectangle.enlarge(childrenRects).withPadding(this.padding);
+        return Bounds.applyMatrix(childrenBounds, transform.localTransform);
+      }
+
+      return transform.localBounds.clone().withPadding(this.padding);
+    });
+  }
+
+  get padding() {
+    return this.entity.document.layout.getPadding(this.entity);
+  }
+
+  setParentTransform(transform?: FlowNodeTransformData): void {
+    // 拖拽父元素变化需要重新布局
+    if (this.transform.parent !== transform?.transform) {
+      this.localDirty = true;
+    }
+    this.transform.setParent(transform?.transform);
+  }
+
+  get spacing(): number {
+    const { spacing } = this.entity.getNodeMeta();
+    return typeof spacing === 'function' ? spacing(this) : spacing;
+  }
+
+  get inlineSpacingPre(): number {
+    const { inlineSpacingPre } = this.entity.getNodeMeta();
+    return typeof inlineSpacingPre === 'function' ? inlineSpacingPre(this) : inlineSpacingPre;
+  }
+
+  get inlineSpacingAfter(): number {
+    const { inlineSpacingAfter } = this.entity.getNodeMeta();
+    return typeof inlineSpacingAfter === 'function' ? inlineSpacingAfter(this) : inlineSpacingAfter;
+  }
+
+  get minInlineBlockSpacing(): number {
+    const { minInlineBlockSpacing } = this.entity.getNodeMeta();
+    return typeof minInlineBlockSpacing === 'function'
+      ? minInlineBlockSpacing(this)
+      : minInlineBlockSpacing;
+  }
+
+  get children(): FlowNodeTransformData[] {
+    return this.entity.children.map(
+      (child) => child.getData<FlowNodeTransformData>(FlowNodeTransformData)!
+    );
+  }
+
+  /**
+   * 上一个节点的 transform 数据
+   */
+  get pre(): FlowNodeTransformData | undefined {
+    return this.entity.pre?.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+
+  get originParent(): FlowNodeTransformData | undefined {
+    return this.entity.originParent?.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+
+  get isFirst(): boolean {
+    return this.entity.isFirst;
+  }
+
+  get isLast(): boolean {
+    return this.entity.isLast;
+  }
+
+  get lastChild(): FlowNodeTransformData | undefined {
+    return this.entity.lastChild?.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+
+  get firstChild(): FlowNodeTransformData | undefined {
+    return this.entity.firstChild?.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+
+  /**
+   * 下一个节点的 transform 数据
+   */
+  get next(): FlowNodeTransformData | undefined {
+    return this.entity.next?.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+
+  /**
+   * parent 节点的 transform 数据
+   */
+  get parent(): FlowNodeTransformData | undefined {
+    return this.entity.parent?.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+}