@flowgram-vue/free-layout-core 0.2.0

package/src/typings/workflow-node.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IPoint } from '@flowgram-vue/utils';
+import type { FlowNodeJSON, FlowNodeMeta } from '@flowgram-vue/document';
+
+import type { WorkflowNodeEntity, WorkflowPorts } from '../entities';
+import type { WorkflowSubCanvas } from './workflow-sub-canvas';
+import type { WorkflowEdgeJSON } from './workflow-edge';
+
+/**
+ * 节点 meta 信息
+ */
+export interface WorkflowNodeMeta extends FlowNodeMeta {
+  position?: IPoint;
+  canvasPosition?: IPoint; // 子画布位置
+  deleteDisable?: boolean; // 是否禁用删除
+  copyDisable?: boolean; // 禁用复制
+  inputDisable?: boolean; // 禁用输入点
+  outputDisable?: boolean; // 禁用输出点
+  defaultPorts?: WorkflowPorts; // 默认点位
+  useDynamicPort?: boolean; // 使用动态点位，会计算 data-port-key
+  subCanvas?: (node: WorkflowNodeEntity) => WorkflowSubCanvas | undefined;
+  isContainer?: boolean; // 是否容器节点
+}
+
+/**
+ * 节点数据
+ */
+export interface WorkflowNodeJSON extends FlowNodeJSON {
+  id: string;
+  type: string | number;
+  /**
+   * ui 数据
+   */
+  meta?: WorkflowNodeMeta;
+  /**
+   * 表单数据
+   */
+
+  data?: any;
+  /**
+   * 子节点
+   */
+  blocks?: WorkflowNodeJSON[];
+  /**
+   * 子节点间连线
+   */
+  edges?: WorkflowEdgeJSON[];
+}

package/src/typings/workflow-operation.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IPoint, Event } from '@flowgram-vue/utils';
+import {
+  FlowNodeEntity,
+  FlowNodeEntityOrId,
+  FlowOperationBaseService,
+} from '@flowgram-vue/document';
+
+import { WorkflowJSON } from './workflow-json';
+
+export interface NodePostionUpdateEvent {
+  node: FlowNodeEntity;
+  oldPosition: IPoint;
+  newPosition: IPoint;
+}
+
+export interface WorkflowOperationBaseService extends FlowOperationBaseService {
+  /**
+   * 节点位置更新事件
+   */
+  readonly onNodePostionUpdate: Event<NodePostionUpdateEvent>;
+  /**
+   * 更新节点位置
+   * @param nodeOrId
+   * @param position
+   * @returns
+   */
+  updateNodePosition(nodeOrId: FlowNodeEntityOrId, position: IPoint): void;
+
+  /**
+   * 更新节点与线条
+   */
+  fromJSON(json: WorkflowJSON): void;
+}
+
+export const WorkflowOperationBaseService = Symbol('WorkflowOperationBaseService');

package/src/typings/workflow-registry.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { FormMeta } from '@flowgram-vue/node';
+import type { FormMetaOrFormMetaGenerator } from '@flowgram-vue/form-core';
+import type { FlowNodeRegistry } from '@flowgram-vue/document';
+
+import type { WorkflowNodeEntity, WorkflowPortEntity } from '../entities';
+import type { WorkflowNodeMeta } from './workflow-node';
+import type { WorkflowLinesManager } from '../workflow-lines-manager';
+
+/**
+ * 节点表单引擎配置
+ */
+export type WorkflowNodeFormMeta = FormMetaOrFormMetaGenerator | FormMeta;
+
+/**
+ * 节点注册
+ */
+export interface WorkflowNodeRegistry extends FlowNodeRegistry<WorkflowNodeMeta> {
+  formMeta?: WorkflowNodeFormMeta;
+  canAddLine?: (
+    fromPort: WorkflowPortEntity,
+    toPort: WorkflowPortEntity,
+    lines: WorkflowLinesManager,
+    silent?: boolean
+  ) => boolean;
+}
+
+export interface WorkflowNodeRenderProps {
+  node: WorkflowNodeEntity;
+}

package/src/typings/workflow-sub-canvas.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { WorkflowNodeEntity } from '../entities';
+
+/**
+ * 子画布配置
+ */
+export type WorkflowSubCanvas = {
+  isCanvas: boolean; // 是否画布节点
+  parentNode: WorkflowNodeEntity; // 父节点
+  canvasNode: WorkflowNodeEntity; // 画布节点
+};

package/src/utils/build-group-json.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType } from '@flowgram-vue/document';
+
+import { WorkflowJSON, WorkflowNodeJSON } from '../typings';
+
+interface WorkflowGroupJSON extends WorkflowNodeJSON {
+  data: {
+    parentID?: string;
+    blockIDs?: string[];
+  };
+}
+
+export const buildGroupJSON = (json: WorkflowJSON): WorkflowJSON => {
+  const { nodes, edges } = json;
+  const groupJSONs = nodes.filter(
+    (nodeJSON) => nodeJSON.type === FlowNodeBaseType.GROUP
+  ) as WorkflowGroupJSON[];
+
+  const nodeJSONMap = new Map<string, WorkflowNodeJSON>(nodes.map((n) => [n.id, n]));
+  const groupNodeJSONs = groupJSONs.map((groupJSON): WorkflowNodeJSON => {
+    const groupBlocks = (groupJSON.data.blockIDs ?? [])
+      .map((blockID) => nodeJSONMap.get(blockID))
+      .filter(Boolean) as WorkflowNodeJSON[];
+    const groupEdges = edges?.filter((edge) =>
+      groupBlocks.some((block) => block.id === edge.sourceNodeID || block.id === edge.targetNodeID)
+    );
+    const groupNodeJSON: WorkflowNodeJSON = {
+      ...groupJSON,
+      blocks: groupBlocks,
+      edges: groupEdges,
+    };
+    return groupNodeJSON;
+  });
+
+  const groupBlockSet = new Set(groupJSONs.map((groupJSON) => groupJSON.data.blockIDs).flat());
+  const processedNodes = nodes
+    .filter((nodeJSON) => !groupBlockSet.has(nodeJSON.id))
+    .concat(groupNodeJSONs);
+  return {
+    nodes: processedNodes,
+    edges,
+  };
+};

package/src/utils/compose.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { compose, composeAsync } from '@flowgram-vue/utils';

package/src/utils/fit-view.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+import { type PlaygroundConfigEntity, TransformData } from '@flowgram-vue/core';
+
+import { type WorkflowDocument } from '../workflow-document';
+
+export const fitView = (
+  doc: WorkflowDocument,
+  playgroundConfig: PlaygroundConfigEntity,
+  easing = true
+) => {
+  const bounds = Rectangle.enlarge(
+    doc.getAllNodes().map((node) => node.getData<TransformData>(TransformData).bounds)
+  );
+  // 留出 30 像素的边界
+  return playgroundConfig.fitView(bounds, easing, 30);
+};

package/src/utils/flow-node-form-data.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeFormData } from '@flowgram-vue/form-core';
+import { FlowNodeEntity, FlowNodeJSON } from '@flowgram-vue/document';
+
+import { type WorkflowDocument } from '../workflow-document';
+import { WorkflowContentChangeType, type WorkflowNodeRegistry } from '../typings';
+
+export function getFlowNodeFormData(node: FlowNodeEntity) {
+  return node.getData(FlowNodeFormData) as FlowNodeFormData;
+}
+
+export function toFormJSON(node: FlowNodeEntity) {
+  const formData = node.getData(FlowNodeFormData) as FlowNodeFormData;
+  if (!formData || !(node.getNodeRegistry() as WorkflowNodeRegistry).formMeta) return undefined;
+  return formData.toJSON();
+}
+
+export function initFormDataFromJSON(
+  node: FlowNodeEntity,
+  json: FlowNodeJSON,
+  isFirstCreate: boolean
+) {
+  const formData = node.getData(FlowNodeFormData) as FlowNodeFormData;
+  const registry = node.getNodeRegistry();
+  const { formMeta } = registry;
+
+  if (formData && formMeta) {
+    if (isFirstCreate) {
+      formData.createForm(formMeta, json.data);
+      formData.onDataChange(() => {
+        (node.document as WorkflowDocument).fireContentChange({
+          type: WorkflowContentChangeType.NODE_DATA_CHANGE,
+          toJSON: () => formData.toJSON(),
+          entity: node,
+        });
+      });
+    } else {
+      formData.updateFormValues(json.data);
+    }
+  }
+}

package/src/utils/get-anti-overlap-position.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { TransformData } from '@flowgram-vue/core';
+import { type IPoint } from '@flowgram-vue/utils';
+
+import { type WorkflowDocument } from '../workflow-document';
+import { WorkflowNodeEntity } from '../entities';
+
+/**
+ * 获取没有碰撞的位置
+ * 距离很小时，xy 各偏移 30
+ * @param position
+ */
+export function getAntiOverlapPosition(
+  doc: WorkflowDocument,
+  position: IPoint,
+  containerNode?: WorkflowNodeEntity,
+): IPoint {
+  let { x, y } = position;
+  const nodes = containerNode ? containerNode.collapsedChildren : doc.getAllNodes();
+  const positions = nodes
+    .map(n => {
+      const transform = n.getData<TransformData>(TransformData)!;
+      return { x: transform.position.x, y: transform.position.y };
+    })
+    .sort((a, b) => a.y - b.y);
+  const minDistance = 3;
+  for (const pos of positions) {
+    const { x: posX, y: posY } = pos;
+    if (y - posY < -minDistance) {
+      break;
+    }
+    const deltaX = Math.abs(x - posX);
+    const deltaY = Math.abs(y - posY);
+    if (deltaX <= minDistance && deltaY <= minDistance) {
+      x += 30;
+      y += 30;
+    }
+  }
+  return { x, y };
+}

package/src/utils/get-line-center.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IPoint, Rectangle } from '@flowgram-vue/utils';
+
+import { LineCenterPoint } from '../typings';
+
+export function getLineCenter(
+  from: IPoint,
+  to: IPoint,
+  bbox: Rectangle,
+  linePadding: number
+): LineCenterPoint {
+  return {
+    x: bbox.center.x,
+    y: bbox.center.y,
+    labelX: bbox.center.x - bbox.x + linePadding,
+    labelY: bbox.center.y - bbox.y + linePadding,
+  };
+}

package/src/utils/get-url-params.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export function getUrlParams(): Record<string, string> {
+  const paramsMap = new Map<string, string>();
+
+  location.search
+    .replace(/^\?/, '')
+    .split('&')
+    .forEach((key) => {
+      if (!key) return;
+
+      const [k, v] = key.split('=');
+
+      if (k) {
+        // Decode URL-encoded parameter names and values
+        const decodedKey = decodeURIComponent(k.trim());
+        const decodedValue = v ? decodeURIComponent(v.trim()) : '';
+
+        // Prevent prototype pollution by filtering dangerous property names
+        const dangerousProps = [
+          '__proto__',
+          'constructor',
+          'prototype',
+          '__defineGetter__',
+          '__defineSetter__',
+          '__lookupGetter__',
+          '__lookupSetter__',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'toString',
+          'valueOf',
+          'toLocaleString',
+        ];
+
+        if (dangerousProps.includes(decodedKey.toLowerCase())) {
+          return;
+        }
+
+        // Use Map to prevent prototype pollution
+        paramsMap.set(decodedKey, decodedValue);
+      }
+    });
+
+  // Convert Map to plain object while maintaining API compatibility
+  return Object.fromEntries(paramsMap);
+}

package/src/utils/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { bindConfigEntity } from '@flowgram-vue/core';
+export { delay } from '@flowgram-vue/utils';
+
+/**
+ * 让 entity 可以注入到类中
+ *
+ * @example
+ * ```
+ *    class SomeClass {
+ *      @inject(PlaygroundConfigEntity) playgroundConfig: PlaygroundConfigEntity
+ *    }
+ * ```
+ * @param bind
+ * @param entityRegistry
+ */
+export { bindConfigEntity };
+
+export { buildGroupJSON } from './build-group-json';
+export { getLineCenter } from './get-line-center';
+export * from './nanoid';
+export * from './compose';
+export * from './fit-view';
+export * from './get-anti-overlap-position';
+export * from './statics';

package/src/utils/layout-to-positions.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type IPoint } from '@flowgram-vue/utils';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+import { TransformData, startTween } from '@flowgram-vue/core';
+
+import { type WorkflowDocument } from '../workflow-document';
+import { type WorkflowNodeEntity } from '../entities';
+
+/**
+ * Coze 中节点坐标，以卡片顶部中间为原点。
+ * autoLayout 计算出来的对齐的坐标以节点正中为原点，需要上移当前节点一般高度。
+ * 即： newPosition.y - transform.bounds.height / 2
+ * bounds 的原点坐标为左上角。
+ */
+export const layoutToPositions = async (
+  nodes: WorkflowNodeEntity[],
+  nodePositionMap: Record<string, IPoint>
+): Promise<Record<string, IPoint>> => {
+  // 缓存上次位置，用来还原位置
+  const newNodePositionMap: Record<string, IPoint> = {};
+  nodes.forEach((node) => {
+    const transform = node.getData(TransformData);
+    const nodeTransform = node.getData(FlowNodeTransformData);
+
+    newNodePositionMap[node.id] = {
+      x: transform.position.x,
+      y: transform.position.y + nodeTransform.bounds.height / 2,
+    };
+  });
+
+  return new Promise((resolve) => {
+    startTween({
+      from: { d: 0 },
+      to: { d: 100 },
+      duration: 300,
+      onUpdate: (v) => {
+        nodes.forEach((node) => {
+          const transform = node.getData(TransformData);
+          const deltaX = ((nodePositionMap[node.id].x - transform.position.x) * v.d) / 100;
+          const deltaY =
+            ((nodePositionMap[node.id].y - transform.bounds.height / 2 - transform.position.y) *
+              v.d) /
+            100;
+
+          transform.update({
+            position: {
+              x: transform.position.x + deltaX,
+              y: transform.position.y + deltaY,
+            },
+          });
+
+          const document = node.document as WorkflowDocument;
+          document.layout.updateAffectedTransform(node);
+        });
+      },
+      onComplete: () => {
+        resolve(newNodePositionMap);
+      },
+    });
+  });
+};

package/src/utils/location-config-to-point.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle, IPoint } from '@flowgram-vue/utils';
+
+import { WorkflowPort } from '../entities';
+
+export function locationConfigToPoint(
+  bounds: Rectangle,
+  config: Required<WorkflowPort>['locationConfig'],
+  _offset: IPoint = { x: 0, y: 0 }
+): IPoint {
+  const offset = { ..._offset };
+  if (config.left !== undefined) {
+    offset.x +=
+      typeof config.left === 'string' ? parseFloat(config.left) * 0.01 * bounds.width : config.left;
+  } else if (config.right !== undefined) {
+    offset.x +=
+      bounds.width -
+      (typeof config.right === 'string'
+        ? parseFloat(config.right) * 0.01 * bounds.width
+        : config.right);
+  }
+  if (config.top !== undefined) {
+    offset.y +=
+      typeof config.top === 'string' ? parseFloat(config.top) * 0.01 * bounds.height : config.top;
+  } else if (config.bottom !== undefined) {
+    offset.y +=
+      bounds.height -
+      (typeof config.bottom === 'string'
+        ? parseFloat(config.bottom) * 0.01 * bounds.height
+        : config.bottom);
+  }
+  return {
+    x: bounds.x + offset.x,
+    y: bounds.y + offset.y,
+  };
+}

package/src/utils/nanoid.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { nanoid as nanoidOrigin } from 'nanoid';
+
+export function nanoid(n?: number): string {
+  return nanoidOrigin(n);
+}

package/src/utils/statics.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+
+import { type WorkflowNodeEntity } from '../entities/workflow-node-entity';
+export type WorkflowPortType = 'input' | 'output';
+
+export const getPortEntityIdByNodeId = (
+  nodeId: string,
+  portType: WorkflowPortType,
+  portID: string | number = ''
+): string => `port_${portType}_${nodeId}_${portID}`;
+
+export const getPortEntityId = (
+  node: WorkflowNodeEntity,
+  portType: WorkflowPortType,
+  portID: string | number = ''
+): string => getPortEntityIdByNodeId(node.id, portType, portID);
+
+export const WORKFLOW_LINE_ENTITY = 'WorkflowLineEntity';
+
+export function domReactToBounds(react: DOMRect): Rectangle {
+  return new Rectangle(react.x, react.y, react.width, react.height);
+}

package/src/vue/index.ts

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

package/src/vue/node-render-provider.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { provide } from 'vue';
+
+import { NodeRenderContextKey } from '../composables/use-node-render-context';
+import type { NodeRenderReturnType } from '../composables/typings';
+
+const props = defineProps<{
+  value: NodeRenderReturnType;
+}>();
+
+provide(NodeRenderContextKey, props.value);
+</script>
+
+<template>
+  <slot />
+</template>

package/src/workflow-commands.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export enum WorkflowCommands {
+  DELETE_NODES = 'DELETE_NODES',
+  COPY_NODES = 'COPY_NODES',
+  PASTE_NODES = 'PASTE_NODES',
+  ZOOM_IN = 'ZOOM_IN',
+  ZOOM_OUT = 'ZOOM_OUT',
+  UNDO = 'UNDO',
+  REDO = 'REDO',
+}

package/src/workflow-document-container-module.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ContainerModule } from 'inversify';
+import { bindContributions } from '@flowgram-vue/utils';
+import { FlowDocument, FlowDocumentContribution } from '@flowgram-vue/document';
+
+import { WorkflowLinesManager } from './workflow-lines-manager';
+import {
+  WorkflowDocumentOptions,
+  WorkflowDocumentOptionsDefault,
+} from './workflow-document-option';
+import { WorkflowDocumentContribution } from './workflow-document-contribution';
+import { WorkflowDocument, WorkflowDocumentProvider } from './workflow-document';
+import { getUrlParams } from './utils/get-url-params';
+import { URLParams, WorkflowOperationBaseService } from './typings';
+import {
+  WorkflowDragService,
+  WorkflowHoverService,
+  WorkflowSelectService,
+  WorkflowResetLayoutService,
+  WorkflowOperationBaseServiceImpl,
+} from './service';
+import { FreeLayout } from './layout';
+
+export const WorkflowDocumentContainerModule = new ContainerModule(
+  (bind, unbind, isBound, rebind) => {
+    bind(WorkflowDocument).toSelf().inSingletonScope();
+    bind(WorkflowLinesManager).toSelf().inSingletonScope();
+    bind(FreeLayout).toSelf().inSingletonScope();
+    bind(WorkflowDragService).toSelf().inSingletonScope();
+    bind(WorkflowSelectService).toSelf().inSingletonScope();
+    bind(WorkflowHoverService).toSelf().inSingletonScope();
+    bind(WorkflowResetLayoutService).toSelf().inSingletonScope();
+    bind(WorkflowOperationBaseService).to(WorkflowOperationBaseServiceImpl).inSingletonScope();
+    bind(URLParams)
+      .toDynamicValue(() => getUrlParams())
+      .inSingletonScope();
+    bindContributions(bind, WorkflowDocumentContribution, [FlowDocumentContribution]);
+    bind(WorkflowDocumentOptions).toConstantValue({
+      ...WorkflowDocumentOptionsDefault,
+    });
+    rebind(FlowDocument).toService(WorkflowDocument);
+    bind(WorkflowDocumentProvider)
+      .toDynamicValue((ctx) => () => ctx.container.get(WorkflowDocument))
+      .inSingletonScope();
+  }
+);