@flowgram-vue/renderer 0.2.0

package/src/layers/flow-selector-box-layer.ts

@@ -0,0 +1,244 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { domUtils, PositionSchema } from '@flowgram-vue/utils';
+import { FlowDocument, FlowNodeEntity, FlowNodeTransformData } from '@flowgram-vue/document';
+import {
+  ContextMenuService,
+  EditorState,
+  EditorStateConfigEntity,
+  Layer,
+  LayerOptions,
+  observeEntity,
+  PipelineLayerPriority,
+  PlaygroundConfigEntity,
+  PlaygroundDrag,
+  SelectionService,
+} from '@flowgram-vue/core';
+
+import { FlowSelectConfigEntity, SelectorBoxConfigEntity } from '../entities';
+
+export interface FlowSelectorBoxOptions extends LayerOptions {
+  /**
+   * 默认不提供则为点击空白地方可以框选
+   * @param e
+   * @param entity
+   */
+  canSelect?: (e: MouseEvent, entity: SelectorBoxConfigEntity) => boolean;
+}
+/**
+ * 流程选择框
+ */
+@injectable()
+export class FlowSelectorBoxLayer extends Layer<FlowSelectorBoxOptions> {
+  @inject(FlowDocument)
+  protected flowDocument: FlowDocument;
+
+  @inject(ContextMenuService)
+  readonly contextMenuService: ContextMenuService;
+
+  @observeEntity(PlaygroundConfigEntity)
+  protected playgroundConfigEntity: PlaygroundConfigEntity;
+
+  @inject(SelectionService) readonly selectionService: SelectionService;
+
+  @observeEntity(SelectorBoxConfigEntity)
+  protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+
+  @observeEntity(FlowSelectConfigEntity)
+  protected selectConfigEntity: FlowSelectConfigEntity;
+
+  @observeEntity(EditorStateConfigEntity)
+  protected editorStateConfig: EditorStateConfigEntity;
+
+  readonly node = domUtils.createDivWithClass('gedit-selector-box-layer');
+
+  /**
+   * 选择框
+   */
+  protected selectorBox = this.createDOMCache('gedit-selector-box');
+
+  /**
+   * 用于遮挡鼠标，避免触发 hover
+   */
+  protected selectorBoxBlock = this.createDOMCache('gedit-selector-box-block');
+
+  protected transformVisibles: FlowNodeTransformData[];
+
+  /**
+   * 拖动选择框
+   */
+  protected selectboxDragger = new PlaygroundDrag({
+    onDragStart: (e) => {
+      this.selectConfigEntity.clearSelectedNodes();
+      const mousePos = this.playgroundConfigEntity.getPosFromMouseEvent(e);
+      this.transformVisibles = this.flowDocument
+        .getRenderDatas(FlowNodeTransformData, false)
+        .filter((transform) => {
+          const { entity } = transform;
+          if (entity.originParent) {
+            return (
+              this.nodeSelectable(entity, mousePos) &&
+              this.nodeSelectable(entity.originParent, mousePos)
+            );
+          }
+          return this.nodeSelectable(entity, mousePos);
+        });
+      this.selectorBoxConfigEntity.setDragInfo(e);
+      this.updateSelectorBox(this.selectorBoxConfigEntity);
+    },
+    onDrag: (e) => {
+      this.selectorBoxConfigEntity.setDragInfo(e);
+      // 更新选择框
+      this.selectConfigEntity.selectFromBounds(
+        this.selectorBoxConfigEntity.toRectangle(this.playgroundConfigEntity.finalScale),
+        this.transformVisibles
+      );
+      this.updateSelectorBox(this.selectorBoxConfigEntity);
+    },
+    onDragEnd: (e) => {
+      this.selectorBoxConfigEntity.setDragInfo(e);
+      this.transformVisibles.length = 0;
+      this.updateSelectorBox(this.selectorBoxConfigEntity);
+    },
+  });
+
+  onReady(): void {
+    if (!this.options.canSelect) {
+      this.options.canSelect = (e: MouseEvent) => {
+        const target = e.target as HTMLElement | undefined;
+        // 默认点击空白地方可以框选
+        return target === this.pipelineNode || target === this.playgroundNode;
+      };
+    }
+    // 将选中的节点同步到全局
+    // TODO 后续要统一到 selection service
+    this.toDispose.pushAll([
+      this.selectConfigEntity.onConfigChanged(() => {
+        this.selectionService.selection = this.selectConfigEntity.selectedNodes;
+      }),
+      this.selectionService.onSelectionChanged(() => {
+        const selectedNodes = this.selectionService.selection.filter(
+          (entity) => entity instanceof FlowNodeEntity
+        );
+
+        this.selectConfigEntity.selectedNodes = selectedNodes as FlowNodeEntity[];
+      }),
+    ]);
+    this.listenPlaygroundEvent(
+      'mousedown',
+      (e: MouseEvent): boolean | undefined => {
+        if (!this.isEnabled()) return;
+        // 自定义拦截选择框事件
+        if (this.options.canSelect && !this.options.canSelect(e, this.selectorBoxConfigEntity)) {
+          return;
+        }
+
+        const currentState = this.editorStateConfig.getCurrentState();
+
+        // 鼠标友好模式，框选后，再次点击其他地方或者框选其他地方，需要清空已有选择的节点
+        if (currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT) {
+          this.selectConfigEntity.clearSelectedNodes();
+        }
+
+        // const target = e.target as HTMLElement | undefined;
+        // TODO 下边这些特化逻辑迁移到固定布局逻辑
+        // const linesLayer = document.querySelector('.gedit-flow-lines-layer');
+        // const toolsTarget = document.querySelector('.flow-canvas-selector-box-tools');
+        // const isInTools = toolsTarget && (toolsTarget === target || toolsTarget.contains(target!));
+        // 保证 service 更新后进行是否清除的计算
+        // setTimeout(() => {
+        //   // 如果点击到选中区域的菜单栏
+        //   if (!isInTools && !this.contextMenuService.rightPanelVisible) {
+        //     // 取消之前的选择状态
+        //     this.selectConfigEntity.clearSelectedNodes();
+        //   }
+        // }, 0);
+        // if (
+        //   target === this.pipelineNode ||
+        //   target === this.playgroundNode // 点击空白区域
+        //   linesLayer?.contains(target!) // 点击 svg 线条
+        //   target?.classList.contains('flow-canvas-adder') || // 点击添加按钮的留白区域
+        //   target?.classList.contains('flow-canvas-block-icon') // 点击添加按钮的留白区域
+        // ) {
+        //   return true;
+        // }
+        this.selectboxDragger.start(e.clientX, e.clientY, this.config);
+        return true;
+      },
+      PipelineLayerPriority.BASE_LAYER
+    );
+  }
+
+  isEnabled(): boolean {
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+
+    return (
+      !this.config.disabled &&
+      !this.config.readonly &&
+      // 鼠标友好模式下，需要按下 shift 启动框选
+      ((isMouseFriendly && this.editorStateConfig.isPressingShift) ||
+        currentState === EditorState.STATE_SELECT) &&
+      !this.selectorBoxConfigEntity.disabled
+    );
+  }
+
+  /**
+   * Destroy
+   */
+  dispose(): void {
+    this.selectorBox.dispose();
+    this.selectorBoxBlock.dispose();
+    super.dispose();
+  }
+
+  protected updateSelectorBox(selector: SelectorBoxConfigEntity): void {
+    const node = this.selectorBox.get();
+    const block = this.selectorBoxBlock.get();
+    // 非可用状态且在 moving 则关闭选择框
+    if (!this.isEnabled() && selector.isMoving) {
+      this.selectorBoxConfigEntity.collapse();
+    }
+    if (!this.isEnabled() || !selector.isMoving) {
+      node.setStyle({
+        display: 'none',
+      });
+      block.setStyle({
+        display: 'none',
+      });
+    } else {
+      node.setStyle({
+        display: 'block',
+        left: selector.position.x,
+        top: selector.position.y,
+        width: selector.size.width,
+        height: selector.size.height,
+      });
+      // 这是遮挡滑块，防止触发节点 hover
+      block.setStyle({
+        display: 'block',
+        left: selector.position.x - 10,
+        top: selector.position.y - 10,
+        width: selector.size.width + 20,
+        height: selector.size.height + 20,
+      });
+    }
+  }
+
+  private nodeSelectable(node: FlowNodeEntity, mousePos: PositionSchema) {
+    const selectable = node.getNodeMeta().selectable;
+    if (typeof selectable === 'function') {
+      return selectable(node, mousePos);
+    } else {
+      return selectable;
+    }
+  }
+
+  // autorun(): void {
+  //   this.updateSelectorBox(this.selectorBoxConfigEntity);
+  // }
+}

package/src/layers/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './flow-nodes-transform-layer';
+export * from './flow-nodes-content-layer';
+export * from './flow-lines-layer';
+export * from './flow-labels-layer';
+export * from './flow-debug-layer';
+export * from './flow-scroll-bar-layer';
+export * from './flow-drag-layer';
+export * from './flow-selector-box-layer';
+export * from './flow-selector-bounds-layer';
+export * from './flow-context-menu-layer';
+export * from './flow-scroll-limit-layer';

package/src/utils/element.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isNil } from 'lodash-es';
+export const isHidden = (dom?: HTMLElement) => {
+  if (!dom || isNil(dom?.offsetParent)) {
+    return true;
+  }
+  const style = window.getComputedStyle(dom);
+  if (style?.display === 'none') {
+    return true;
+  }
+  return false;
+};
+
+export const isRectInit = (rect?: DOMRect): boolean => {
+  if (!rect) {
+    return false;
+  }
+  // 检查所有属性是否都为0,表示DOMRect未初始化
+  if (
+    rect.bottom === 0 &&
+    rect.height === 0 &&
+    rect.left === 0 &&
+    rect.right === 0 &&
+    rect.top === 0 &&
+    rect.width === 0 &&
+    rect.x === 0 &&
+    rect.y === 0
+  ) {
+    return false;
+  }
+  return true;
+};

package/src/utils/find-selected-nodes.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { uniq } from 'lodash-es';
+import { type FlowNodeEntity } from '@flowgram-vue/document';
+
+function getNodePath(node: FlowNodeEntity): FlowNodeEntity[] {
+  const path: FlowNodeEntity[] = [node];
+  node = node.parent as FlowNodeEntity;
+  while (node) {
+    path.push(node);
+    node = node.parent as FlowNodeEntity;
+  }
+  return path.reverse();
+}
+
+/**
+ * 过滤掉画布节点, 有 originParent，都是非独立节点
+ * @param entity
+ */
+function findRealEntity(entity: FlowNodeEntity): FlowNodeEntity {
+  while (entity.originParent) {
+    entity = entity.originParent;
+  }
+  return entity;
+}
+/**
+ * 生成选中节点的路径
+ * 如
+ *   [
+ *     'root',
+ *     'exclusiveSplit_30baf8b1da0',
+ *     'exclusiveSplit_d0070ce5d04',
+ *     'createRecord_47e8fe1dfc3'
+ *   ],
+ *   [
+ *     'root',
+ *     'exclusiveSplit_30baf8b1da0',
+ *     'exclusiveSplit_d0070ce5d04',
+ *     'createRecord_32dcdd10274'
+ *   ],
+ *   [
+ *     'root',
+ *     'exclusiveSplit_30baf8b1da0',
+ *     'exclusiveSplit_d0070ce5d04',
+ *     'exclusiveSplit_a5579b3997d', // 这里产生分叉
+ *     'createRecord_b57b00eee94' // 父亲节点分叉了，这里就忽略了
+ *   ]
+ * ]
+ * 1. 相同分支的节点，选择每个节点
+ * 2. 跨分支的节点选择共同的父节点
+ */
+export function findSelectedNodes(nodes: FlowNodeEntity[]): FlowNodeEntity[] {
+  if (nodes.length === 0) return [];
+  /**
+   * 生成节点的路径
+   */
+  const nodePathList: FlowNodeEntity[][] = nodes.map((n) => getNodePath(n));
+  /**
+   * 只需要比较最小的路径
+   */
+  const minLength = Math.min(...nodePathList.map((n) => n.length));
+  let index = 0;
+  let selectedItems: FlowNodeEntity[] = [];
+  /**
+   * 从二维数组的每一层打平去看，看看有没有分叉，如果有分叉就在当前层停止并作为选中的节点
+   */
+  while (index < minLength) {
+    // eslint-disable-next-line no-loop-func
+    selectedItems = uniq(nodePathList.map((p) => p[index]));
+    // 存在分叉
+    if (selectedItems.length > 1) {
+      break;
+    }
+    index += 1;
+  }
+  return uniq(selectedItems.map((item) => findRealEntity(item)));
+}

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './scroll-limit';
+export * from './scroll-bar-events';

package/src/utils/scroll-bar-events.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 滚动条点击事件监听
+ */
+export const ScrollBarEvents = Symbol('ScrollBarEvents');
+
+export interface ScrollBarEvents {
+  dragStart: () => void;
+}

package/src/utils/scroll-limit.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+import { type PlaygroundConfigEntity } from '@flowgram-vue/core';
+
+export interface ScrollData {
+  scrollX: number;
+  scrollY: number;
+}
+
+// viewport 缩小 30 像素
+const SCROLL_LIMIT_PADDING = -120;
+
+export function getScrollViewport(
+  scrollData: ScrollData,
+  config: PlaygroundConfigEntity
+): Rectangle {
+  const scale = config.finalScale;
+  return new Rectangle(
+    scrollData.scrollX / scale,
+    scrollData.scrollY / scale,
+    config.config.width / scale,
+    config.config.height / scale
+  ).pad(SCROLL_LIMIT_PADDING / scale, SCROLL_LIMIT_PADDING / scale);
+}
+
+/**
+ * 限制滚动
+ */
+export function scrollLimit(
+  scroll: ScrollData,
+  boundsList: Rectangle[],
+  config: PlaygroundConfigEntity,
+  initScroll: () => ScrollData
+): ScrollData {
+  scroll = { ...scroll };
+  const configData = config.config;
+  const oldScroll = { scrollX: configData.scrollX, scrollY: configData.scrollY };
+  // 画布 size 还没初始化滚动不限制
+  if (boundsList.length === 0 || configData.width === 0 || configData.height === 0) return scroll;
+  const viewport = getScrollViewport(scroll, config);
+  const isVisible = boundsList.find((bounds) => Rectangle.isViewportVisible(bounds, viewport));
+  if (!isVisible) {
+    const oldViewport = getScrollViewport(oldScroll, config);
+    const isOldVisible = boundsList.find((bounds) =>
+      Rectangle.isViewportVisible(bounds, oldViewport)
+    );
+    // 如果之前也是不可见就不阻止
+    if (!isOldVisible) {
+      return initScroll();
+    }
+    return oldScroll;
+  }
+  return scroll;
+}