@flowgram-vue/free-container-plugin 0.2.0

package/src/node-into-container/service.ts

@@ -0,0 +1,370 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- no need */
+import { throttle } from 'lodash-es';
+import { inject, injectable } from 'inversify';
+import { type Disposable, DisposableCollection, Emitter } from '@flowgram-vue/utils';
+import {
+  type NodesDragEvent,
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowLinesManager,
+  type WorkflowNodeEntity,
+  WorkflowNodeMeta,
+  WorkflowOperationBaseService,
+  WorkflowSelectService,
+} from '@flowgram-vue/free-layout-core';
+import { HistoryService } from '@flowgram-vue/free-history-plugin';
+import { FlowNodeRenderData, FlowNodeBaseType } from '@flowgram-vue/document';
+import { PlaygroundConfigEntity, TransformData } from '@flowgram-vue/core';
+
+import type { NodeIntoContainerEvent, NodeIntoContainerState } from './type';
+import { NodeIntoContainerType } from './constant';
+import { ContainerUtils } from '../utils';
+
+@injectable()
+export class NodeIntoContainerService {
+  public state: NodeIntoContainerState;
+
+  @inject(WorkflowDragService)
+  private dragService: WorkflowDragService;
+
+  @inject(WorkflowDocument)
+  private document: WorkflowDocument;
+
+  @inject(PlaygroundConfigEntity)
+  private playgroundConfig: PlaygroundConfigEntity;
+
+  @inject(WorkflowOperationBaseService)
+  private operationService: WorkflowOperationBaseService;
+
+  @inject(WorkflowLinesManager)
+  private linesManager: WorkflowLinesManager;
+
+  @inject(HistoryService) private historyService: HistoryService;
+
+  @inject(WorkflowSelectService) private selectService: WorkflowSelectService;
+
+  private emitter = new Emitter<NodeIntoContainerEvent>();
+
+  private toDispose = new DisposableCollection();
+
+  public readonly on = this.emitter.event;
+
+  public init(): void {
+    this.initState();
+    this.toDispose.push(this.emitter);
+  }
+
+  public ready(): void {
+    this.toDispose.push(this.listenDragToContainer());
+  }
+
+  public dispose(): void {
+    this.initState();
+    this.toDispose.dispose();
+  }
+
+  /** 将节点移出容器 */
+  public async moveOutContainer(params: { node: WorkflowNodeEntity }): Promise<void> {
+    const { node } = params;
+    const parentNode = node.parent;
+    const containerNode = parentNode?.parent;
+    const nodeJSON = this.document.toNodeJSON(node);
+    if (
+      !parentNode ||
+      !containerNode ||
+      !ContainerUtils.isContainer(parentNode) ||
+      !nodeJSON.meta?.position
+    ) {
+      return;
+    }
+    const parentTransform = parentNode.getData<TransformData>(TransformData);
+    this.operationService.moveNode(node, {
+      parent: containerNode,
+    });
+    await ContainerUtils.nextFrame();
+    parentTransform.fireChange();
+    this.operationService.updateNodePosition(node, {
+      x: parentTransform.position.x + nodeJSON.meta!.position!.x,
+      y: parentTransform.position.y + nodeJSON.meta!.position!.y,
+    });
+    this.emitter.fire({
+      type: NodeIntoContainerType.Out,
+      node,
+      sourceContainer: parentNode,
+      targetContainer: containerNode,
+    });
+  }
+
+  /** 能否将节点移出容器 */
+  public canMoveOutContainer(node: WorkflowNodeEntity): boolean {
+    const parentNode = node.parent;
+    const containerNode = parentNode?.parent;
+    if (!parentNode || !containerNode || !ContainerUtils.isContainer(parentNode)) {
+      return false;
+    }
+    const canDrop = this.dragService.canDropToNode({
+      dragNodeType: node.flowNodeType,
+      dragNode: node,
+      dropNodeType: containerNode?.flowNodeType,
+      dropNode: containerNode,
+    });
+    if (!canDrop.allowDrop) {
+      return false;
+    }
+    return true;
+  }
+
+  /** 移除节点所有非法连线 */
+  public async clearInvalidLines(params: {
+    dragNode?: WorkflowNodeEntity;
+    sourceParent?: WorkflowNodeEntity;
+  }): Promise<void> {
+    const { dragNode, sourceParent } = params;
+    if (!dragNode) {
+      return;
+    }
+    if (dragNode.parent === sourceParent) {
+      // 容器节点未改变
+      return;
+    }
+    if (
+      dragNode.parent?.flowNodeType === FlowNodeBaseType.GROUP ||
+      sourceParent?.flowNodeType === FlowNodeBaseType.GROUP
+    ) {
+      // 移入移出 group 节点无需删除节点
+      return;
+    }
+    await this.removeNodeLines(dragNode);
+  }
+
+  /** 移除节点连线 */
+  public async removeNodeLines(node: WorkflowNodeEntity): Promise<void> {
+    const lines = this.linesManager.getAllLines();
+    lines.forEach((line) => {
+      if (line.from?.id !== node.id && line.to?.id !== node.id) {
+        return;
+      }
+      line.dispose();
+    });
+    await ContainerUtils.nextFrame();
+  }
+
+  /** 初始化状态 */
+  private initState(): void {
+    this.state = {
+      isDraggingNode: false,
+      isSkipEvent: false,
+      transforms: undefined,
+      dragNode: undefined,
+      dropNode: undefined,
+      sourceParent: undefined,
+    };
+  }
+
+  /** 监听节点拖拽 */
+  private listenDragToContainer(): Disposable {
+    const draggingNode = (e: NodesDragEvent) => this.draggingNode(e);
+    const throttledDraggingNode = throttle(draggingNode, 200); // 200ms触发一次计算
+    return this.dragService.onNodesDrag(async (event) => {
+      if (this.selectService.selectedNodes.length !== 1) {
+        return;
+      }
+      if (event.type === 'onDragStart') {
+        if (this.state.isSkipEvent) {
+          // 拖出容器后重新进入
+          this.state.isSkipEvent = false;
+          return;
+        }
+        this.historyService.startTransaction(); // 开始合并历史记录
+        this.state.isDraggingNode = true;
+        this.state.transforms = ContainerUtils.getContainerTransforms(this.document.getAllNodes());
+        this.state.dragNode = this.selectService.selectedNodes[0];
+        this.state.dropNode = undefined;
+        this.state.sourceParent = this.state.dragNode?.parent;
+        await this.dragOutContainer(event); // 检查是否需拖出容器
+      }
+      if (event.type === 'onDragging') {
+        throttledDraggingNode(event);
+      }
+      if (event.type === 'onDragEnd') {
+        if (this.state.isSkipEvent) {
+          // 拖出容器情况下需跳过本次事件
+          return;
+        }
+        throttledDraggingNode.cancel();
+        draggingNode(event); // 直接触发一次计算，防止延迟
+        await this.dropNodeToContainer(); // 放置节点
+        await this.clearInvalidLines({
+          dragNode: this.state.dragNode,
+          sourceParent: this.state.sourceParent,
+        }); // 清除非法线条
+        this.setDropNode(undefined);
+        this.initState(); // 重置状态
+        this.historyService.endTransaction(); // 结束合并历史记录
+      }
+    });
+  }
+
+  /** 监听节点拖拽出容器 */
+  private async dragOutContainer(event: NodesDragEvent): Promise<void> {
+    const { dragNode } = this.state;
+    const activated = event.triggerEvent.metaKey || event.triggerEvent.ctrlKey;
+    if (
+      !activated || // 必须按住指定按键
+      !dragNode || // 必须有一个节点
+      !this.canMoveOutContainer(dragNode) // 需要能被移出容器
+    ) {
+      return;
+    }
+    this.moveOutContainer({ node: dragNode });
+    this.state.isSkipEvent = true;
+    event.dragger.stop(event.dragEvent.clientX, event.dragEvent.clientY);
+    await ContainerUtils.nextFrame();
+    this.dragService.startDragSelectedNodes(event.triggerEvent);
+  }
+
+  /** 设置放置节点高亮 */
+  private setDropNode(dropNode?: WorkflowNodeEntity) {
+    if (this.state.dropNode === dropNode) {
+      return;
+    }
+    if (this.state.dropNode) {
+      // 清除上一个节点高亮
+      const renderData = this.state.dropNode.getData(FlowNodeRenderData);
+      const renderDom = renderData.node?.children?.[0] as HTMLElement;
+      if (renderDom) {
+        renderDom.classList.remove('selected');
+      }
+    }
+    this.state.dropNode = dropNode;
+    if (!dropNode) {
+      return;
+    }
+    // 设置当前节点高亮
+    const renderData = dropNode.getData(FlowNodeRenderData);
+    const renderDom = renderData.node?.children?.[0] as HTMLElement;
+    if (renderDom) {
+      renderDom.classList.add('selected');
+    }
+  }
+
+  /** 放置节点到容器 */
+  private async dropNodeToContainer(): Promise<void> {
+    const { dropNode, dragNode, isDraggingNode } = this.state;
+    if (!isDraggingNode || !dragNode || !dropNode) {
+      return;
+    }
+    return await this.moveIntoContainer({
+      node: dragNode,
+      containerNode: dropNode,
+    });
+  }
+
+  /** 拖拽节点 */
+  private draggingNode(nodeDragEvent: NodesDragEvent): void {
+    const { dragNode, isDraggingNode, transforms = [] } = this.state;
+    if (!isDraggingNode || !dragNode || !transforms?.length) {
+      return this.setDropNode(undefined);
+    }
+    const mousePos = this.playgroundConfig.getPosFromMouseEvent(nodeDragEvent.dragEvent);
+    const availableTransforms = transforms.filter(
+      (transform) => transform.entity.id !== dragNode.id
+    );
+    const collisionTransform = ContainerUtils.getCollisionTransform({
+      targetPoint: mousePos,
+      transforms: availableTransforms,
+      document: this.document,
+    });
+    const dropNode = collisionTransform?.entity;
+    const canDrop = this.canDropToContainer({
+      dragNode,
+      dropNode,
+    });
+    if (!canDrop) {
+      return this.setDropNode(undefined);
+    }
+    return this.setDropNode(dropNode);
+  }
+
+  /** 判断能否将节点拖入容器 */
+  protected canDropToContainer(params: {
+    dragNode: WorkflowNodeEntity;
+    dropNode?: WorkflowNodeEntity;
+  }): boolean {
+    const { dragNode, dropNode } = params;
+    const isDropContainer = dropNode?.getNodeMeta<WorkflowNodeMeta>().isContainer;
+    if (
+      !dropNode ||
+      !isDropContainer ||
+      this.isParent(dragNode, dropNode) ||
+      this.isParent(dropNode, dragNode)
+    ) {
+      return false;
+    }
+    if (
+      dragNode.flowNodeType === FlowNodeBaseType.GROUP &&
+      dropNode.flowNodeType !== FlowNodeBaseType.GROUP
+    ) {
+      // 禁止将 group 节点拖入非 group 节点（由于目前不支持多节点拖入容器，无法计算有效线条，因此进行屏蔽）
+      return false;
+    }
+    const canDrop = this.dragService.canDropToNode({
+      dragNodeType: dragNode.flowNodeType,
+      dropNodeType: dropNode?.flowNodeType,
+      dragNode,
+      dropNode,
+    });
+    if (!canDrop.allowDrop) {
+      return false;
+    }
+    return true;
+  }
+
+  /** 判断一个节点是否为另一个节点的父节点(向上查找直到根节点) */
+  private isParent(node: WorkflowNodeEntity, parent: WorkflowNodeEntity): boolean {
+    let current = node.parent;
+    while (current) {
+      if (current.id === parent.id) {
+        return true;
+      }
+      current = current.parent;
+    }
+    return false;
+  }
+
+  /** 将节点移入容器 */
+  private async moveIntoContainer(params: {
+    node: WorkflowNodeEntity;
+    containerNode: WorkflowNodeEntity;
+  }): Promise<void> {
+    const { node, containerNode } = params;
+    const parentNode = node.parent;
+
+    this.operationService.moveNode(node, {
+      parent: containerNode,
+    });
+
+    const containerPadding = this.document.layout.getPadding(containerNode);
+    const position = ContainerUtils.adjustSubNodePosition({
+      targetNode: node,
+      containerNode,
+      containerPadding,
+    });
+
+    this.operationService.updateNodePosition(node, position);
+
+    await ContainerUtils.nextFrame();
+
+    this.emitter.fire({
+      type: NodeIntoContainerType.In,
+      node,
+      sourceContainer: parentNode,
+      targetContainer: containerNode,
+    });
+  }
+}

package/src/node-into-container/type.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import type { FlowNodeTransformData } from '@flowgram-vue/document';
+
+import type { NodeIntoContainerType } from './constant';
+
+export interface NodeIntoContainerState {
+  isDraggingNode: boolean;
+  isSkipEvent: boolean;
+  transforms?: FlowNodeTransformData[];
+  dragNode?: WorkflowNodeEntity;
+  dropNode?: WorkflowNodeEntity;
+  sourceParent?: WorkflowNodeEntity;
+}
+
+export interface NodeIntoContainerEvent {
+  type: NodeIntoContainerType;
+  node: WorkflowNodeEntity;
+  sourceContainer?: WorkflowNodeEntity;
+  targetContainer: WorkflowNodeEntity;
+}
+
+export interface WorkflowContainerPluginOptions {
+  disableNodeIntoContainer?: boolean;
+}

package/src/sub-canvas/components/background/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as SubCanvasBackground } from './sub-canvas-background.vue';

package/src/sub-canvas/components/background/sub-canvas-background.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useCurrentEntity } from '@flowgram-vue/free-layout-core';
+import { useService } from '@flowgram-vue/core';
+import { BackgroundConfig, type BackgroundLayerOptions } from '@flowgram-vue/background-plugin';
+
+const node = useCurrentEntity();
+
+let backgroundConfig: BackgroundLayerOptions = {};
+try {
+  backgroundConfig = useService<BackgroundLayerOptions>(BackgroundConfig);
+} catch {
+  // 如果 BackgroundConfig 没有注册，使用默认配置
+}
+
+const gridSize = backgroundConfig.gridSize ?? 20;
+const dotSize = backgroundConfig.dotSize ?? 1;
+const dotColor = backgroundConfig.dotColor ?? '#eceeef';
+const dotOpacity = backgroundConfig.dotOpacity ?? 0.5;
+const backgroundColor = backgroundConfig.backgroundColor ?? '#f2f3f5';
+const dotFillColor =
+  backgroundConfig.dotFillColor === dotColor ? '' : backgroundConfig.dotFillColor;
+
+const patternId = `sub-canvas-dot-pattern-${node.id}`;
+</script>
+
+<template>
+  <div
+    class="sub-canvas-background"
+    data-flow-editor-selectable="true"
+    :style="{ backgroundColor }"
+  >
+    <svg width="100%" height="100%">
+      <pattern :id="patternId" :width="gridSize" :height="gridSize" patternUnits="userSpaceOnUse">
+        <circle
+          :cx="dotSize"
+          :cy="dotSize"
+          :r="dotSize"
+          :stroke="dotColor"
+          :fill="dotFillColor"
+          :fill-opacity="dotOpacity"
+        />
+      </pattern>
+      <rect
+        width="100%"
+        height="100%"
+        :fill="`url(#${patternId})`"
+        :data-node-panel-container="node.id"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.sub-canvas-background {
+  width: 100%;
+  height: 100%;
+  inset: 56px 18px 18px;
+}
+</style>

package/src/sub-canvas/components/border/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as SubCanvasBorder } from './sub-canvas-border.vue';

package/src/sub-canvas/components/border/sub-canvas-border.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties } from 'vue';
+
+defineProps<{
+  style?: CSSProperties;
+}>();
+</script>
+
+<template>
+  <div class="sub-canvas-border" :style="style">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.sub-canvas-border {
+  pointer-events: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
+  border-color: var(--coz-bg-plus, rgb(249, 249, 249));
+  border-style: solid;
+  border-width: 8px;
+  border-radius: 8px;
+}
+
+.sub-canvas-border::before {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  inset: -4px;
+  background-color: transparent;
+  border-color: var(--coz-bg-plus, rgb(249, 249, 249));
+  border-style: solid;
+  border-width: 4px;
+  border-radius: 8px;
+}
+</style>

package/src/sub-canvas/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { SubCanvasBackground } from './background';
+export { SubCanvasBorder } from './border';
+export { SubCanvasRender } from './render';
+export { SubCanvasTips } from './tips';

package/src/sub-canvas/components/render/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as SubCanvasRender } from './sub-canvas-render.vue';

package/src/sub-canvas/components/render/sub-canvas-render.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, type CSSProperties, type VNode } from 'vue';
+
+import { SubCanvasTips } from '../tips';
+import { SubCanvasBorder } from '../border';
+import { SubCanvasBackground } from '../background';
+import { useNodeSize, useSyncNodeRenderSize } from '../../hooks';
+
+defineProps<{
+  offsetY?: number;
+  className?: string;
+  style?: CSSProperties;
+  tipText?: string | VNode;
+}>();
+
+const nodeSize = useNodeSize();
+const nodeHeight = computed(() => nodeSize?.height ?? 0);
+
+useSyncNodeRenderSize(nodeSize);
+
+const handleDragStart = (e: DragEvent) => {
+  e.stopPropagation();
+};
+</script>
+
+<template>
+  <div
+    class="sub-canvas-render"
+    :class="className"
+    :style="{
+      height: `${nodeHeight + (offsetY ?? 0)}px`,
+      ...style,
+    }"
+    data-flow-editor-selectable="true"
+    @dragstart="handleDragStart"
+  >
+    <SubCanvasBorder>
+      <SubCanvasBackground />
+      <SubCanvasTips :tip-text="tipText" />
+    </SubCanvasBorder>
+  </div>
+</template>
+
+<style scoped>
+.sub-canvas-render {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/sub-canvas/components/tips/global-store.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable @typescript-eslint/naming-convention -- no need */
+
+const STORAGE_KEY = 'workflow-move-into-sub-canvas-tip-visible';
+const STORAGE_VALUE = 'false';
+
+export class TipsGlobalStore {
+  private static _instance?: TipsGlobalStore;
+
+  public static get instance(): TipsGlobalStore {
+    if (!this._instance) {
+      this._instance = new TipsGlobalStore();
+    }
+    return this._instance;
+  }
+
+  private closed = false;
+
+  public isClosed(): boolean {
+    return this.isCloseForever() || this.closed;
+  }
+
+  public close(): void {
+    this.closed = true;
+  }
+
+  public isCloseForever(): boolean {
+    return localStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;
+  }
+
+  public closeForever(): void {
+    localStorage.setItem(STORAGE_KEY, STORAGE_VALUE);
+  }
+}

package/src/sub-canvas/components/tips/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as SubCanvasTips } from './sub-canvas-tips.vue';

package/src/sub-canvas/components/tips/is-mac-os.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export const isMacOS = /(Macintosh|MacIntel|MacPPC|Mac68K|iPad)/.test(navigator.userAgent);