@flowgram-vue/renderer 0.2.0

package/src/components/utils.ts

@@ -0,0 +1,295 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowNodeTransformData,
+  type FlowNodeTransitionData,
+  type FlowTransitionLine,
+  FlowTransitionLineEnum,
+  type Vertex,
+  DefaultSpacingKey,
+  DEFAULT_SPACING,
+} from '@flowgram-vue/document';
+
+import { BASE_DEFAULT_COLOR } from '../hooks/use-base-color';
+
+export const DEFAULT_LINE_ATTRS: Record<string, string> = {
+  stroke: BASE_DEFAULT_COLOR,
+  fill: 'transparent',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+};
+
+// 默认的圆角半径
+export const DEFAULT_RADIUS = DEFAULT_SPACING[DefaultSpacingKey.ROUNDED_LINE_RADIUS];
+
+// 小圆角
+export const MINI_RADIUS = 10;
+
+// 默认 label 激活高度
+export const DEFAULT_LABEL_ACTIVATE_HEIGHT = 32;
+
+/**
+ * 根据椭圆方程计算 y 坐标
+ *
+ * x^2 / rx^2 + y^2 / ry^2 = 1
+ */
+export const calcEllipseY = (x: number, rx: number, ry: number) =>
+  Math.sqrt(ry ** 2 * (1 - x ** 2 / rx ** 2));
+
+/**
+ * 获取转弯线的转折点 (水平布局)
+ */
+export function getHorizontalVertices(
+  line: FlowTransitionLine,
+  xRadius = 16,
+  yRadius = 20
+): Vertex[] {
+  const { from, to, type } = line || {};
+
+  // 空间可以容纳的圆角数
+  const deltaY = Math.abs(to.y - from.y);
+  const deltaX = Math.abs(to.x - from.x);
+
+  const radiusXCount = deltaX / xRadius;
+  const radiusYCount = deltaY / yRadius;
+
+  let res: Vertex[] = [];
+
+  // 容纳不下一个圆角，直接连线
+  if (radiusXCount < 1) {
+    return [];
+  }
+
+  switch (type) {
+    case FlowTransitionLineEnum.DIVERGE_LINE:
+    case FlowTransitionLineEnum.DRAGGING_LINE:
+      if (radiusXCount <= 1) {
+        return [
+          {
+            x: to.x,
+            y: from.y,
+            radiusX: deltaX,
+          },
+        ];
+      }
+      res = [
+        {
+          x: from.x + yRadius,
+          y: from.y,
+        },
+        {
+          x: from.x + yRadius,
+          y: to.y,
+        },
+      ];
+      if (radiusXCount < 2) {
+        const firstRadius = deltaX - yRadius;
+        res = [
+          {
+            x: from.x + firstRadius,
+            y: from.y,
+            // 第一个圆角收缩 y 半径
+            radiusX: firstRadius,
+          },
+          {
+            x: from.x + firstRadius,
+            y: to.y,
+          },
+        ];
+      }
+
+      // y 轴空间不足处理
+      if (radiusYCount < 2) {
+        res[0].moveY = deltaY / 2;
+        res[1].moveY = deltaY / 2;
+      }
+
+      return res;
+
+    case FlowTransitionLineEnum.MERGE_LINE:
+      // 聚合线 y 轴空间不足时直接连上
+      if (radiusXCount < 2) {
+        return [
+          {
+            x: to.x,
+            y: from.y,
+          },
+        ];
+      }
+
+      res = [
+        {
+          x: to.x - yRadius,
+          y: from.y,
+        },
+        {
+          x: to.x - yRadius,
+          y: to.y,
+        },
+      ];
+
+      // y 轴空间不足处理
+      if (radiusYCount < 2) {
+        res[0].moveY = deltaY / 2;
+        res[1].moveY = deltaY / 2;
+      }
+
+      return res;
+
+    default:
+      break;
+  }
+
+  return [];
+}
+/**
+ * 获取转弯线的转折点 (垂直布局)
+ */
+export function getVertices(line: FlowTransitionLine, xRadius = 16, yRadius = 20): Vertex[] {
+  const { from, to, type } = line || {};
+
+  // 空间可以容纳的圆角数
+  const deltaY = Math.abs(to.y - from.y);
+  const deltaX = Math.abs(to.x - from.x);
+
+  const radiusYCount = deltaY / yRadius;
+  const radiusXCount = deltaX / xRadius;
+
+  let res: Vertex[] = [];
+
+  // 容纳不下一个圆角，直接连线
+  if (radiusYCount < 1) {
+    return [];
+  }
+
+  switch (type) {
+    case FlowTransitionLineEnum.DIVERGE_LINE:
+    case FlowTransitionLineEnum.DRAGGING_LINE:
+      if (radiusYCount <= 1) {
+        return [
+          {
+            x: to.x,
+            y: from.y,
+            radiusY: deltaY,
+          },
+        ];
+      }
+      res = [
+        {
+          x: from.x,
+          y: from.y + yRadius,
+        },
+        {
+          x: to.x,
+          y: from.y + yRadius,
+        },
+      ];
+      if (radiusYCount < 2) {
+        const firstRadius = deltaY - yRadius;
+        res = [
+          {
+            x: from.x,
+            y: from.y + firstRadius,
+            // 第一个圆角收缩 y 半径
+            radiusY: firstRadius,
+          },
+          {
+            x: to.x,
+            y: from.y + firstRadius,
+          },
+        ];
+      }
+
+      // x 轴空间不足处理
+      if (radiusXCount < 2) {
+        res[0].moveX = deltaX / 2;
+        res[1].moveX = deltaX / 2;
+      }
+
+      return res;
+
+    case FlowTransitionLineEnum.MERGE_LINE:
+      // 聚合线 y 轴空间不足时直接连上
+      if (radiusYCount < 2) {
+        return [
+          {
+            x: from.x,
+            y: to.y,
+          },
+        ];
+      }
+
+      res = [
+        {
+          x: from.x,
+          y: to.y - yRadius,
+        },
+        {
+          x: to.x,
+          y: to.y - yRadius,
+        },
+      ];
+
+      // x 轴空间不足处理
+      if (radiusXCount < 2) {
+        res[0].moveX = deltaX / 2;
+        res[1].moveX = deltaX / 2;
+      }
+
+      return res;
+
+    default:
+      break;
+  }
+
+  return [];
+}
+
+// 获取上一个节点和下一个节点中较宽的宽度作为 hover 热区
+export function getTransitionLabelHoverWidth(data: FlowNodeTransitionData) {
+  const { isVertical } = data.entity;
+  if (isVertical) {
+    const nextWidth =
+      data.entity.next?.firstChild && !data.entity.next.isInlineBlocks
+        ? data.entity.next.firstChild!.getData(FlowNodeTransformData)!.size.width
+        : data.entity.next?.getData(FlowNodeTransformData)!.size.width;
+
+    // 获取上一个节点和下一个节点中较宽的宽度作为 hover 热区
+    const maxWidth = Math.max(
+      data.entity.getData(FlowNodeTransformData)?.size.width ??
+        DEFAULT_SPACING[DefaultSpacingKey.HOVER_AREA_WIDTH],
+      nextWidth || 0
+    );
+
+    return maxWidth;
+  }
+  if (data.transform.next) {
+    return data.transform.next.inputPoint.x - data.transform.outputPoint.x;
+  }
+  return DEFAULT_LABEL_ACTIVATE_HEIGHT;
+}
+
+export function getTransitionLabelHoverHeight(data: FlowNodeTransitionData) {
+  const { isVertical } = data.entity;
+  if (isVertical) {
+    if (data.transform.next) {
+      return data.transform.next.inputPoint.y - data.transform.outputPoint.y;
+    }
+    return DEFAULT_LABEL_ACTIVATE_HEIGHT;
+  }
+  const nextHeight =
+    data.entity.next?.firstChild && !data.entity.next.isInlineBlocks
+      ? data.entity.next.firstChild!.getData(FlowNodeTransformData)!.size.height
+      : data.entity.next?.getData(FlowNodeTransformData)!.size.height;
+
+  // 获取上一个节点和下一个节点中较宽的宽度作为 hover 热区
+  const maxHeight = Math.max(
+    data.entity.getData(FlowNodeTransformData)?.size.height || 280,
+    nextHeight || 0
+  );
+
+  return maxHeight;
+}

package/src/entities/README.md

@@ -0,0 +1,3 @@
+## 画布渲染相关 entity 数据
+
+这里存放的是和画布渲染强耦合的数据

package/src/entities/flow-drag-entity.ts

@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+import {
+  type FlowNodeTransitionData,
+  FlowTransitionLabelEnum,
+  LABEL_SIDE_TYPE,
+} from '@flowgram-vue/document';
+import { ConfigEntity, type EntityOpts, PlaygroundConfigEntity } from '@flowgram-vue/core';
+
+import { DEFAULT_LABEL_ACTIVATE_HEIGHT } from '../components/utils';
+
+const BRANCH_HOVER_HEIGHT = 64;
+
+interface FlowDragEntityConfig extends EntityOpts {}
+
+enum ScrollDirection {
+  TOP,
+  BOTTOM,
+  LEFT,
+  RIGHT,
+}
+
+const SCROLL_DELTA = 4;
+
+const SCROLL_INTERVAL = 20;
+
+const SCROLL_BOUNDING = 20;
+
+const EDITOR_LEFT_BAR_WIDTH = 60;
+
+export interface CollisionRetType {
+  hasCollision: boolean;
+  labelOffsetType?: LABEL_SIDE_TYPE;
+}
+
+export class FlowDragEntity extends ConfigEntity<FlowDragEntityConfig> {
+  private playgroundConfigEntity: PlaygroundConfigEntity;
+
+  static type = 'FlowDragEntity';
+
+  private containerX = 0;
+
+  private containerY = 0;
+
+  private _scrollXInterval: { interval: number; origin: number } | undefined;
+
+  private _scrollYInterval: { interval: number; origin: number } | undefined;
+
+  get hasScroll(): boolean {
+    return Boolean(this._scrollXInterval || this._scrollYInterval);
+  }
+
+  constructor(conf: any) {
+    super(conf);
+    this.playgroundConfigEntity = this.entityManager.getEntity<PlaygroundConfigEntity>(
+      PlaygroundConfigEntity,
+      true
+    )!;
+  }
+
+  isCollision(
+    transition: FlowNodeTransitionData,
+    rect: Rectangle,
+    isBranch: boolean
+  ): CollisionRetType {
+    const scale = this.playgroundConfigEntity.finalScale || 0;
+    if (isBranch) {
+      return this.isBranchCollision(transition, rect, scale);
+    }
+    return this.isNodeCollision(transition, rect, scale);
+  }
+
+  // 检测节点维度碰撞方法
+  isNodeCollision(
+    transition: FlowNodeTransitionData,
+    rect: Rectangle,
+    scale: number
+  ): CollisionRetType {
+    const { labels } = transition;
+    const { isVertical } = transition.entity;
+
+    const hasCollision = labels.some((label) => {
+      if (
+        !label ||
+        ![
+          FlowTransitionLabelEnum.ADDER_LABEL,
+          FlowTransitionLabelEnum.COLLAPSE_ADDER_LABEL,
+        ].includes(label.type)
+      ) {
+        return false;
+      }
+
+      const hoverWidth = isVertical
+        ? transition.transform.bounds.width
+        : DEFAULT_LABEL_ACTIVATE_HEIGHT;
+      const hoverHeight = isVertical
+        ? DEFAULT_LABEL_ACTIVATE_HEIGHT
+        : transition.transform.bounds.height;
+
+      const labelRect = new Rectangle(
+        (label.offset.x - hoverWidth / 2) * scale,
+        (label.offset.y - hoverHeight / 2) * scale,
+        hoverWidth * scale,
+        hoverHeight * scale
+      );
+      // 检测两个正方形是否相互碰撞
+      return Rectangle.intersects(labelRect, rect);
+    });
+
+    return {
+      hasCollision,
+      // 节点不关心 offsetType
+      labelOffsetType: undefined,
+    };
+  }
+
+  // 检测分支维度碰撞
+  isBranchCollision(
+    transition: FlowNodeTransitionData,
+    rect: Rectangle,
+    scale: number
+  ): CollisionRetType {
+    const { labels } = transition;
+    const { isVertical } = transition.entity;
+
+    let labelOffsetType: LABEL_SIDE_TYPE = LABEL_SIDE_TYPE.NORMAL_BRANCH;
+    const hasCollision = labels.some((label) => {
+      if (!label || label.type !== FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL) {
+        return false;
+      }
+      const hoverHeight = isVertical ? BRANCH_HOVER_HEIGHT : label.width || 0;
+      // BRANCH_DRAGGING_LABEL 类型的 label 一定存在 width 属性
+      const hoverWidth = isVertical ? label.width || 0 : BRANCH_HOVER_HEIGHT;
+
+      const labelRect = new Rectangle(
+        (label.offset.x - hoverWidth / 2) * scale,
+        (label.offset.y - hoverHeight / 2) * scale,
+        hoverWidth * scale,
+        hoverHeight * scale
+      );
+      // 检测两个正方形是否相互碰撞
+      const collision = Rectangle.intersects(labelRect, rect);
+      if (collision) {
+        labelOffsetType = label.props!.side;
+      }
+      return collision;
+    });
+
+    return {
+      hasCollision,
+      labelOffsetType,
+    };
+  }
+
+  private _startScrollX(origin: number, added: boolean): void {
+    if (this._scrollXInterval) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      const current = this._scrollXInterval;
+      if (!current) return;
+      // eslint-disable-next-line no-multi-assign
+      const scrollX = (current.origin = added
+        ? current.origin + SCROLL_DELTA
+        : current.origin - SCROLL_DELTA);
+      this.playgroundConfigEntity.updateConfig({
+        scrollX,
+      });
+      const playgroundConfig = this.playgroundConfigEntity.config;
+      if (playgroundConfig?.scrollX === scrollX) {
+        if (added) {
+          this.containerX += SCROLL_DELTA;
+        } else {
+          this.containerX -= SCROLL_DELTA;
+        }
+      }
+    }, SCROLL_INTERVAL);
+    this._scrollXInterval = { interval, origin };
+  }
+
+  private _stopScrollX(): void {
+    if (this._scrollXInterval) {
+      clearInterval(this._scrollXInterval.interval);
+      this._scrollXInterval = undefined;
+    }
+  }
+
+  private _startScrollY(origin: number, added: boolean): void {
+    if (this._scrollYInterval) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      const current = this._scrollYInterval;
+      if (!current) return;
+      // eslint-disable-next-line no-multi-assign
+      const scrollY = (current.origin = added
+        ? current.origin + SCROLL_DELTA
+        : current.origin - SCROLL_DELTA);
+      this.playgroundConfigEntity.updateConfig({
+        scrollY,
+      });
+      const playgroundConfig = this.playgroundConfigEntity.config;
+      if (playgroundConfig?.scrollY === scrollY) {
+        if (added) {
+          this.containerY += SCROLL_DELTA;
+        } else {
+          this.containerY -= SCROLL_DELTA;
+        }
+      }
+    }, SCROLL_INTERVAL);
+    this._scrollYInterval = { interval, origin };
+  }
+
+  private _stopScrollY(): void {
+    if (this._scrollYInterval) {
+      clearInterval(this._scrollYInterval.interval);
+      this._scrollYInterval = undefined;
+    }
+  }
+
+  stopAllScroll(): void {
+    this._stopScrollX();
+    this._stopScrollY();
+  }
+
+  scrollDirection(e: MouseEvent, x: number, y: number): ScrollDirection | undefined {
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const currentScrollX = playgroundConfig.scrollX;
+    const currentScrollY = playgroundConfig.scrollY;
+    this.containerX = x;
+    this.containerY = y;
+    const clientRect = this.playgroundConfigEntity.playgroundDomNode.getBoundingClientRect();
+
+    const mouseToBottom = playgroundConfig.height + clientRect.y - e.clientY;
+    if (mouseToBottom < SCROLL_BOUNDING) {
+      this._startScrollY(currentScrollY, true);
+      return ScrollDirection.BOTTOM;
+    }
+    const mouseToTop = e.clientY - clientRect.y;
+    if (mouseToTop < SCROLL_BOUNDING) {
+      this._startScrollY(currentScrollY, false);
+      return ScrollDirection.TOP;
+    }
+    this._stopScrollY();
+    const mouseToRight = playgroundConfig.width + clientRect.x - e.clientX;
+    if (mouseToRight < SCROLL_BOUNDING) {
+      this._startScrollX(currentScrollX, true);
+      return ScrollDirection.RIGHT;
+    }
+    const mouseToLeft = e.clientX - clientRect.x;
+    if (mouseToLeft < SCROLL_BOUNDING + EDITOR_LEFT_BAR_WIDTH) {
+      this._startScrollX(currentScrollX, false);
+      return ScrollDirection.LEFT;
+    }
+    this._stopScrollX();
+
+    return undefined;
+  }
+
+  dispose(): void {
+    this.toDispose.dispose();
+  }
+}

package/src/entities/flow-select-config-entity.ts

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  type FlowNodeEntity,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import { ConfigEntity } from '@flowgram-vue/core';
+import { Compare, Rectangle } from '@flowgram-vue/utils';
+
+import { findSelectedNodes } from '../utils/find-selected-nodes';
+
+interface FlowSelectConfigEntityData {
+  selectedNodes: FlowNodeEntity[];
+}
+
+const BOUNDS_PADDING_DEFAULT = 10;
+
+/**
+ * 圈选节点相关数据存储
+ */
+export class FlowSelectConfigEntity extends ConfigEntity<FlowSelectConfigEntityData> {
+  static type = 'FlowSelectConfigEntity';
+
+  boundsPadding = BOUNDS_PADDING_DEFAULT;
+
+  getDefaultConfig(): FlowSelectConfigEntityData {
+    return {
+      selectedNodes: [],
+    };
+  }
+
+  get selectedNodes(): FlowNodeEntity[] {
+    return this.config.selectedNodes;
+  }
+
+  /**
+   * 选中节点
+   * @param nodes
+   */
+  set selectedNodes(nodes: FlowNodeEntity[]) {
+    nodes = findSelectedNodes(nodes);
+    // if (nodes.length === 1 && nodes[0].flowNodeType === FlowNodeBaseType.END) {
+    //   nodes = [];
+    // }
+    if (
+      nodes.length !== this.config.selectedNodes.length ||
+      nodes.some(n => !this.config.selectedNodes.includes(n))
+    ) {
+      this.config.selectedNodes.forEach(oldNode => {
+        if (!nodes.includes(oldNode)) {
+          oldNode.getData(FlowNodeRenderData)!.activated = false;
+        }
+      });
+      // 高亮选中的节点
+      nodes.forEach(node => {
+        node.getData(FlowNodeRenderData)!.activated = true;
+      });
+      if (Compare.isArrayShallowChanged(this.config.selectedNodes, nodes)) {
+        this.updateConfig({
+          selectedNodes: nodes,
+        });
+      }
+    }
+  }
+
+  /**
+   * 清除选中节点
+   */
+  clearSelectedNodes() {
+    if (this.config.selectedNodes.length === 0) return;
+    this.config.selectedNodes.forEach(node => {
+      node.getData(FlowNodeRenderData)!.activated = false;
+    });
+    this.updateConfig({
+      selectedNodes: [],
+    });
+  }
+
+  /**
+   * 通过选择框选中节点
+   * @param rect
+   * @param transforms
+   */
+  selectFromBounds(rect: Rectangle, transforms: FlowNodeTransformData[]): void {
+    const selectedNodes: FlowNodeEntity[] = [];
+    transforms.forEach(transform => {
+      if (Rectangle.intersects(rect, transform.bounds)) {
+        if (transform.entity.originParent) {
+          selectedNodes.push(transform.entity.originParent);
+        } else {
+          selectedNodes.push(transform.entity);
+        }
+      }
+    });
+    this.selectedNodes = selectedNodes;
+  }
+
+  /**
+   * 获取选中节点外围的最大边框
+   */
+  getSelectedBounds(): Rectangle {
+    const nodes = this.selectedNodes;
+    if (nodes.length === 0) {
+      return Rectangle.EMPTY;
+    }
+    return Rectangle.enlarge(nodes.map(n => n.getData(FlowNodeTransformData)!.bounds)).pad(
+      this.boundsPadding,
+    );
+  }
+}

package/src/entities/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './flow-drag-entity';
+export * from './flow-select-config-entity';
+export * from './selector-box-config-entity';