@flowgram-vue/renderer 0.2.0

package/src/layers/flow-debug-layer.ts

@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { domUtils } from '@flowgram-vue/utils';
+import {
+  FlowDocument,
+  FlowDocumentTransformerEntity,
+  FlowNodeEntity,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import { Layer, observeEntity, observeEntityDatas } from '@flowgram-vue/core';
+
+import { getScrollViewport } from '../utils';
+
+let rgbTimes = 0;
+
+function randomColor(percent: number): string {
+  const max = Math.min((percent / 10) * 255, 255);
+  rgbTimes += 1;
+  // rgb 轮询就可以错开颜色
+  const rgb = rgbTimes % 3;
+  const random = () => Math.floor(Math.random() * max);
+  return `rgb(${rgb === 0 ? random() : 0}, ${rgb === 1 ? random() : 0}, ${
+    rgb === 2 ? random() : 0
+  })`;
+}
+
+/**
+ * 调试用，会绘出所有节点的边界
+ */
+@injectable()
+export class FlowDebugLayer extends Layer {
+  @inject(FlowDocument) readonly document: FlowDocument;
+
+  @observeEntity(FlowDocumentTransformerEntity)
+  readonly documentTransformer: FlowDocumentTransformerEntity;
+
+  @observeEntityDatas(FlowNodeEntity, FlowNodeTransformData) _transforms: FlowNodeTransformData[];
+
+  get transforms(): FlowNodeTransformData[] {
+    return this.document.getRenderDatas<FlowNodeTransformData>(FlowNodeTransformData);
+  }
+
+  node = document.createElement('div') as HTMLElement;
+
+  viewport = domUtils.createDivWithClass('gedit-flow-debug-bounds');
+
+  boundsNodes = domUtils.createDivWithClass('gedit-flow-debug-bounds');
+
+  pointsNodes = domUtils.createDivWithClass('gedit-flow-debug-points');
+
+  versionNodes = domUtils.createDivWithClass('gedit-flow-debug-versions gedit-hidden');
+
+  /**
+   * ?debug=xxxx, 则返回 xxxx
+   */
+  filterKey = window.location.search.match(/debug=([^&]+)/)?.[1] || '';
+
+  protected originLine = document.createElement('div') as HTMLDivElement;
+
+  domCache = new WeakMap<
+    FlowNodeTransformData,
+    {
+      color: string;
+      bbox: HTMLDivElement;
+      version: HTMLDivElement;
+      input: HTMLDivElement;
+      output: HTMLDivElement;
+    }
+  >();
+
+  onReady() {
+    this.node!.style.zIndex = '20';
+    domUtils.setStyle(this.originLine, {
+      position: 'absolute',
+      width: 1,
+      height: '100%',
+      left: this.pipelineNode.style.left,
+      top: 0,
+      borderLeft: '1px dashed rgba(255, 0, 0, 0.5)',
+    });
+    this.pipelineNode.parentElement!.appendChild(this.originLine);
+    this.node.appendChild(this.viewport);
+    this.node.appendChild(this.versionNodes);
+    this.node.appendChild(this.boundsNodes);
+    this.node.appendChild(this.pointsNodes);
+    this.renderScrollViewportBounds();
+  }
+
+  onScroll() {
+    this.originLine.style.left = this.pipelineNode.style.left;
+    this.renderScrollViewportBounds();
+  }
+
+  onResize() {
+    this.renderScrollViewportBounds();
+  }
+
+  onZoom(scale: number) {
+    this.node!.style.transform = `scale(${scale})`;
+    this.renderScrollViewportBounds();
+  }
+
+  createBounds(transform: FlowNodeTransformData, color: string, depth: number): void {
+    // 根据 debug=xxxx 进行匹配过滤
+    if (this.filterKey && transform.key.indexOf(this.filterKey) === -1) return;
+    let cache = this.domCache.get(transform)!;
+    const { bounds, inputPoint, outputPoint } = transform;
+    if (!cache) {
+      const bbox = domUtils.createDivWithClass('') as HTMLDivElement;
+      const input = domUtils.createDivWithClass('') as HTMLDivElement;
+      const output = domUtils.createDivWithClass('') as HTMLDivElement;
+      const version = domUtils.createDivWithClass('') as HTMLDivElement;
+      bbox.title = transform.key;
+      input.title = transform.key + '(input)';
+      output.title = transform.key + '(output)';
+      version.title = transform.key;
+      this.boundsNodes.appendChild(bbox);
+      this.pointsNodes.appendChild(input);
+      this.pointsNodes.appendChild(output);
+      this.versionNodes.appendChild(version);
+      transform.onDispose(() => {
+        bbox.remove();
+        input.remove();
+        output.remove();
+      });
+      cache = { bbox, input, output, version, color };
+      this.domCache.set(transform, cache);
+    }
+    domUtils.setStyle(cache.version, {
+      position: 'absolute',
+      marginLeft: '-9px',
+      marginTop: '-10px',
+      borderRadius: 12,
+      background: '#f54a45',
+      padding: 4,
+      color: 'navajowhite',
+      display: transform.renderState.hidden ? 'none' : 'block',
+      zIndex: depth + 1000,
+      left: bounds.center.x,
+      top: bounds.center.y,
+    });
+    cache.version.innerHTML = transform.version.toString();
+    domUtils.setStyle(cache.input, {
+      position: 'absolute',
+      width: 10,
+      height: 10,
+      marginLeft: -5,
+      marginTop: -5,
+      borderRadius: 5,
+      left: inputPoint.x,
+      top: inputPoint.y,
+      opacity: 0.4,
+      zIndex: depth,
+      backgroundColor: cache.color,
+      whiteSpace: 'nowrap',
+      overflow: 'visible',
+    });
+    cache.input.innerHTML = `${inputPoint.x},${inputPoint.y}`;
+    domUtils.setStyle(cache.output, {
+      position: 'absolute',
+      width: 10,
+      height: 10,
+      marginLeft: -5,
+      marginTop: -5,
+      borderRadius: 5,
+      left: outputPoint.x,
+      top: outputPoint.y,
+      opacity: 0.4,
+      zIndex: depth,
+      backgroundColor: cache.color,
+      whiteSpace: 'nowrap',
+      overflow: 'visible',
+    });
+    cache.output.innerHTML = `${outputPoint.x},${outputPoint.y}`;
+    domUtils.setStyle(cache.bbox, {
+      position: 'absolute',
+      width: bounds.width,
+      height: bounds.height,
+      left: bounds.left,
+      top: bounds.top,
+      opacity: `${depth / 30}`,
+      backgroundColor: cache.color,
+    });
+  }
+
+  /**
+   * 显示 viewport 可滚动区域
+   */
+  renderScrollViewportBounds() {
+    const viewportBounds = getScrollViewport(
+      {
+        scrollX: this.config.config.scrollX,
+        scrollY: this.config.config.scrollY,
+      },
+      this.config
+    );
+    domUtils.setStyle(this.viewport, {
+      position: 'absolute',
+      width: viewportBounds.width - 2,
+      height: viewportBounds.height - 2,
+      left: viewportBounds.left + 1,
+      top: viewportBounds.top + 1,
+      border: '1px solid rgba(200, 200, 255, 0.5)',
+    });
+  }
+
+  autorun() {
+    if (this.documentTransformer.loading) return;
+    this.documentTransformer.refresh();
+    // let lastDepth = 0
+    let color = randomColor(0);
+    this.document.traverse((entity, depth) => {
+      const transform = entity.getData<FlowNodeTransformData>(FlowNodeTransformData)!;
+      // if (lastDepth !== depth) {
+      //   // 层级变化则更新颜色
+      // }
+      color = randomColor(depth);
+      this.createBounds(transform, color, depth);
+      // lastDepth = depth
+    });
+    this.renderScrollViewportBounds();
+  }
+}

package/src/layers/flow-drag-layer.ts

@@ -0,0 +1,413 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, Teleport } from 'vue';
+import type { Component } from 'vue';
+import { inject, injectable } from 'inversify';
+import { Rectangle, Xor } from '@flowgram-vue/utils';
+import {
+  FlowDocument,
+  FlowNodeBaseType,
+  FlowNodeEntity,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  FlowNodeTransitionData,
+  FlowRendererStateEntity,
+  type LABEL_SIDE_TYPE,
+  FlowDragService,
+  FlowNodeJSON,
+} from '@flowgram-vue/document';
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  Layer,
+  observeEntity,
+  observeEntityDatas,
+  PlaygroundConfigEntity,
+  PlaygroundContainerFactory,
+  PlaygroundDrag,
+} from '@flowgram-vue/core';
+
+import { wrapLayerRender } from '../layer-vue-provide';
+import {
+  type FlowRendererComponent,
+  FlowRendererKey,
+  FlowRendererRegistry,
+} from '../flow-renderer-registry';
+import { type CollisionRetType, FlowDragEntity } from '../entities/flow-drag-entity';
+import { FlowSelectConfigEntity } from '../entities';
+
+const DRAG_OFFSET = 10;
+
+const DEFAULT_DRAG_OFFSET_X = 8;
+const DEFAULT_DRAG_OFFSET_Y = 8;
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+type StartDragProps = {
+  dragEntities?: FlowNodeEntity[];
+} & Xor<
+  {
+    dragStartEntity: FlowNodeEntity;
+  },
+  {
+    dragJSON: FlowNodeJSON;
+    isBranch?: boolean;
+    onCreateNode: (json: FlowNodeJSON, dropEntity: FlowNodeEntity) => Promise<FlowNodeEntity>;
+  }
+>;
+
+export interface FlowDragOptions {
+  onDrop?: (opts: { dragNodes: FlowNodeEntity[]; dropNode: FlowNodeEntity }) => void;
+  canDrop?: (
+    opts: {
+      dropNode: FlowNodeEntity;
+      isBranch?: boolean;
+    } & Xor<
+      {
+        dragNodes: FlowNodeEntity[];
+      },
+      {
+        dragJSON: FlowNodeJSON;
+      }
+    >
+  ) => boolean;
+}
+/**
+ * 监听节点的激活状态
+ */
+@injectable()
+export class FlowDragLayer extends Layer<FlowDragOptions> {
+  @inject(FlowDocument) readonly document: FlowDocument;
+
+  @inject(FlowDragService) readonly flowDragService: FlowDragService;
+
+  @inject(PlaygroundContainerFactory) readonly playgroundContainer: PlaygroundContainerFactory;
+
+  @observeEntityDatas(FlowNodeEntity, FlowNodeTransformData) transforms: FlowNodeTransformData[];
+
+  @observeEntity(EditorStateConfigEntity)
+  protected editorStateConfig: EditorStateConfigEntity;
+
+  @observeEntity(PlaygroundConfigEntity)
+  protected playgroundConfigEntity: PlaygroundConfigEntity;
+
+  @observeEntity(FlowDragEntity)
+  protected flowDragConfigEntity: FlowDragEntity;
+
+  @observeEntity(FlowRendererStateEntity)
+  protected flowRenderStateEntity: FlowRendererStateEntity;
+
+  @observeEntity(FlowSelectConfigEntity)
+  protected selectConfigEntity: FlowSelectConfigEntity;
+
+  private initialPosition: Position;
+
+  private disableDragScroll: Boolean = false;
+
+  private dragJSON?: FlowNodeJSON;
+
+  private onCreateNode?: (
+    json: FlowNodeJSON,
+    dropEntity: FlowNodeEntity
+  ) => Promise<FlowNodeEntity>;
+
+  dragOffset = {
+    x: DEFAULT_DRAG_OFFSET_X,
+    y: DEFAULT_DRAG_OFFSET_Y,
+  };
+
+  get transitions(): FlowNodeTransitionData[] {
+    const result: FlowNodeTransitionData[] = [];
+    this.document.traverse((entity) => {
+      result.push(entity.getData<FlowNodeTransitionData>(FlowNodeTransitionData)!);
+    });
+    return result;
+  }
+
+  @inject(FlowRendererRegistry) readonly rendererRegistry: FlowRendererRegistry;
+
+  get dragStartEntity() {
+    return this.flowRenderStateEntity.getDragStartEntity()!;
+  }
+
+  set dragStartEntity(entity: FlowNodeEntity | undefined) {
+    this.flowRenderStateEntity.setDragStartEntity(entity);
+  }
+
+  get dragEntities() {
+    return this.flowRenderStateEntity.getDragEntities()!;
+  }
+
+  set dragEntities(entities: FlowNodeEntity[]) {
+    this.flowRenderStateEntity.setDragEntities(entities);
+  }
+
+  private dragNodeComp: FlowRendererComponent;
+
+  containerRef: { current: HTMLDivElement | null } = { current: null };
+
+  draggingNodeMask = document.createElement('div');
+
+  protected isGrab(): boolean {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return currentState === EditorState.STATE_GRAB;
+  }
+
+  setDraggingStatus(status: boolean): void {
+    if (this.flowDragService.nodeDragIdsWithChildren.length) {
+      this.flowDragService.nodeDragIdsWithChildren.forEach((_id) => {
+        const node = this.entityManager.getEntityById(_id);
+        const data = node?.getData<FlowNodeRenderData>(FlowNodeRenderData)!;
+        data.dragging = status;
+      });
+    }
+    this.flowRenderStateEntity.setDragging(status);
+  }
+
+  dragEnable(e: MouseEvent) {
+    return (
+      Math.abs(e.clientX - this.initialPosition.x) > DRAG_OFFSET ||
+      Math.abs(e.clientY - this.initialPosition.y) > DRAG_OFFSET
+    );
+  }
+
+  handleMouseMove(event: MouseEvent) {
+    if ((this.dragJSON || this.dragStartEntity) && this.dragEnable(event)) {
+      this.setDraggingStatus(true);
+      const scale = this.playgroundConfigEntity.finalScale;
+
+      if (this.containerRef.current) {
+        const dragNode = this.containerRef.current.children?.[0];
+        if (!dragNode) {
+          return;
+        }
+        const clientBounds = this.playgroundConfigEntity.getClientBounds();
+        const dragBlockX =
+          event.clientX -
+          (this.pipelineNode.offsetLeft || 0) -
+          clientBounds.x -
+          ((dragNode as HTMLElement).clientWidth - this.dragOffset.x) * scale;
+        const dragBlockY =
+          event.clientY -
+          (this.pipelineNode.offsetTop || 0) -
+          clientBounds.y -
+          ((dragNode as HTMLElement).clientHeight - this.dragOffset.y) * scale;
+
+        const isBranch = this.flowDragService.isDragBranch;
+
+        const draggingRect = new Rectangle(
+          dragBlockX,
+          dragBlockY,
+          (dragNode as HTMLElement).clientWidth * scale,
+          (dragNode as HTMLElement).clientHeight * scale
+        );
+        let side: LABEL_SIDE_TYPE | undefined;
+        const collisionTransition = this.transitions.find((transition) => {
+          if (transition?.entity?.parent?.collapsed) {
+            return false;
+          }
+          const { hasCollision, labelOffsetType } = this.flowDragConfigEntity.isCollision(
+            transition,
+            draggingRect,
+            isBranch
+          ) as CollisionRetType;
+          side = labelOffsetType;
+          return hasCollision;
+        });
+        if (
+          collisionTransition &&
+          (isBranch
+            ? this.flowDragService.isDroppableBranch(collisionTransition.entity, side)
+            : this.flowDragService.isDroppableNode(collisionTransition.entity)) &&
+          (!this.options.canDrop ||
+            this.options.canDrop({
+              dragNodes: this.dragEntities,
+              dropNode: collisionTransition.entity,
+              isBranch,
+            }))
+        ) {
+          this.flowRenderStateEntity.setNodeDroppingId(collisionTransition.entity.id);
+        } else {
+          this.flowRenderStateEntity.setNodeDroppingId('');
+        }
+
+        this.flowRenderStateEntity.setDragLabelSide(side);
+
+        this.containerRef.current.style.visibility = 'visible';
+        this.pipelineNode.parentElement!.appendChild(this.draggingNodeMask);
+
+        this.containerRef.current.style.left = `${
+          dragBlockX + this.pipelineNode.offsetLeft + clientBounds.x + window.scrollX
+        }px`;
+        this.containerRef.current.style.top = `${
+          dragBlockY + this.pipelineNode.offsetTop + clientBounds.y + window.scrollY
+        }px`;
+        this.containerRef.current.style.transformOrigin = 'top left';
+        this.containerRef.current.style.transform = `scale(${scale})`;
+
+        if (!this.disableDragScroll) {
+          this.flowDragConfigEntity.scrollDirection(event, dragBlockX, dragBlockY);
+        }
+      }
+    }
+  }
+
+  async handleMouseUp() {
+    this.setDraggingStatus(false);
+    if (this.dragStartEntity || this.dragJSON) {
+      const activatedNodeId = this.flowDragService.dropNodeId;
+
+      if (activatedNodeId) {
+        if (this.flowDragService.isDragBranch) {
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropBranch();
+          }
+        } else {
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropNode();
+          }
+          this.selectConfigEntity.clearSelectedNodes();
+        }
+      }
+
+      this.flowRenderStateEntity.setNodeDroppingId('');
+      this.flowRenderStateEntity.setDragLabelSide();
+      this.flowRenderStateEntity.setIsBranch(false);
+      this.dragStartEntity = undefined;
+      this.dragEntities = [];
+
+      this.flowDragConfigEntity.stopAllScroll();
+    }
+
+    this.disableDragScroll = false;
+    this.dragJSON = undefined;
+    if (this.containerRef.current) {
+      this.containerRef.current.style.visibility = 'hidden';
+      if (this.pipelineNode.parentElement!.contains(this.draggingNodeMask)) {
+        this.pipelineNode.parentElement!.removeChild(this.draggingNodeMask);
+      }
+    }
+  }
+
+  protected _dragger = new PlaygroundDrag({
+    onDrag: (e) => {
+      this.handleMouseMove(e);
+    },
+    onDragEnd: () => {
+      this.handleMouseUp();
+    },
+    stopGlobalEventNames: ['contextmenu'],
+  });
+
+  /**
+   * 开始拖拽事件
+   * @param e
+   */
+  async startDrag(
+    e: { clientX: number; clientY: number },
+    {
+      dragStartEntity: startEntityFromProps,
+      dragEntities,
+      dragJSON,
+      isBranch,
+      onCreateNode,
+    }: StartDragProps,
+    options?: {
+      dragOffsetX?: number;
+      dragOffsetY?: number;
+      disableDragScroll?: boolean;
+    }
+  ) {
+    if (this.isGrab() || this.config.disabled || this.config.readonly) {
+      return;
+    }
+
+    this.disableDragScroll = Boolean(options?.disableDragScroll);
+    this.dragJSON = dragJSON;
+    this.onCreateNode = onCreateNode;
+    this.flowRenderStateEntity.setIsBranch(Boolean(isBranch));
+
+    this.dragOffset.x = options?.dragOffsetX || DEFAULT_DRAG_OFFSET_X;
+    this.dragOffset.y = options?.dragOffsetY || DEFAULT_DRAG_OFFSET_Y;
+
+    const type = startEntityFromProps?.flowNodeType || dragJSON?.type;
+
+    const isIcon = type === FlowNodeBaseType.BLOCK_ICON;
+    const isOrderIcon = type === FlowNodeBaseType.BLOCK_ORDER_ICON;
+
+    const dragStartEntity =
+      isIcon || isOrderIcon ? startEntityFromProps!.parent! : startEntityFromProps;
+
+    if (dragStartEntity && !dragStartEntity!.getData(FlowNodeRenderData).draggable) {
+      return;
+    }
+
+    this.initialPosition = {
+      x: e.clientX,
+      y: e.clientY,
+    };
+
+    this.dragStartEntity = dragStartEntity;
+    this.dragEntities = dragEntities || (this.dragStartEntity ? [this.dragStartEntity!] : []);
+
+    return this._dragger.start(e.clientX, e.clientY);
+  }
+
+  onReady() {
+    this.draggingNodeMask.style.width = '100%';
+    this.draggingNodeMask.style.height = '100%';
+    this.draggingNodeMask.style.position = 'absolute';
+    this.draggingNodeMask.classList.add('dragging-node');
+    this.draggingNodeMask.style.zIndex = '99';
+    this.draggingNodeMask.style.cursor = 'pointer';
+
+    this.dragNodeComp = this.rendererRegistry.getRendererComponent(FlowRendererKey.DRAG_NODE);
+    if (this.options.onDrop) {
+      this.toDispose.push(this.flowDragService.onDrop(this.options.onDrop));
+    }
+  }
+
+  dispose(): void {
+    this._dragger.dispose();
+    super.dispose();
+  }
+
+  render() {
+    const DragComp = this.dragNodeComp?.renderer as Component;
+
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(Teleport, { to: 'body' }, [
+        h(
+          'div',
+          {
+            ref: (el: unknown) => {
+              this.containerRef.current = (el as HTMLDivElement) || null;
+            },
+            style: { position: 'absolute', zIndex: 99999, visibility: 'hidden' },
+            onMouseenter: (e: MouseEvent) => e.stopPropagation(),
+          },
+          [
+            DragComp
+              ? h(DragComp, {
+                  dragJSON: this.dragJSON,
+                  dragStart: this.dragStartEntity,
+                  dragNodes: this.dragEntities,
+                })
+              : null,
+          ]
+        ),
+      ])
+    );
+  }
+}