@flowgram-vue/fixed-layout-editor 0.2.0

package/src/preset/fixed-layout-preset.ts

@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createSelectBoxPlugin } from '@flowgram-vue/select-box-plugin';
+import { FixedLayoutContainerModule } from '@flowgram-vue/fixed-layout-core';
+import { FixedHistoryService, createFixedHistoryPlugin } from '@flowgram-vue/fixed-history-plugin';
+import { createFixedDragPlugin } from '@flowgram-vue/fixed-drag-plugin';
+import {
+  PluginsProvider,
+  createDefaultPreset,
+  createVariablePlugin,
+  createPlaygroundPlugin,
+  createShortcutsPlugin,
+  SelectionService,
+  Command,
+  Plugin,
+  FlowDocument,
+  FlowNodeEntity,
+  FlowDocumentOptionsDefault,
+  FlowDocumentOptions,
+  FlowNodesContentLayer,
+  FlowNodesTransformLayer,
+  FlowScrollBarLayer,
+  FlowScrollLimitLayer,
+  createPlaygroundVuePreset,
+} from '@flowgram-vue/editor';
+
+import { compose } from '../utils/compose';
+import { FlowOperationService } from '../types';
+import { createOperationPlugin } from '../plugins/create-operation-plugin';
+import { fromNodeJSON, toNodeJSON } from './node-serialize';
+import { FixedLayoutPluginContext, FixedLayoutProps } from './fixed-layout-props';
+
+export function createFixedLayoutPreset(
+  opts: FixedLayoutProps
+): PluginsProvider<FixedLayoutPluginContext> {
+  return (ctx: FixedLayoutPluginContext) => {
+    opts = { ...FixedLayoutProps.DEFAULT, ...opts };
+    let plugins: Plugin[] = [createOperationPlugin(opts)];
+    /**
+     * 注册默认的快捷键
+     */
+    plugins.push(
+      createShortcutsPlugin({
+        registerShortcuts(registry) {
+          const selection = ctx.get<SelectionService>(SelectionService);
+          registry.addHandlers({
+            commandId: Command.Default.DELETE,
+            shortcuts: ['backspace', 'delete'],
+            isEnabled: () =>
+              selection.selection.length > 0 && !ctx.playground.config.readonlyOrDisabled,
+            execute: () => {
+              // TODO 这里要判断 CurrentEditor
+              const nodes = selection.selection.filter(
+                (entity) => entity instanceof FlowNodeEntity
+              ) as FlowNodeEntity[];
+
+              const flowOperationService = ctx.get<FlowOperationService>(FlowOperationService);
+              flowOperationService.deleteNodes(nodes);
+              selection.selection = selection.selection.filter((s) => !s.disposed);
+            },
+          });
+
+          if (opts?.history?.enable) {
+            const fixedHistoryService = ctx.get<FixedHistoryService>(FixedHistoryService);
+
+            if (!opts.history.disableShortcuts) {
+              registry.addHandlers({
+                commandId: Command.Default.UNDO,
+                shortcuts: ['meta z', 'ctrl z'],
+                isEnabled: () => true,
+                execute: () => {
+                  fixedHistoryService.undo();
+                },
+              });
+              registry.addHandlers({
+                commandId: Command.Default.REDO,
+                shortcuts: ['meta shift z', 'ctrl shift z'],
+                isEnabled: () => true,
+                execute: () => {
+                  fixedHistoryService.redo();
+                },
+              });
+            }
+          }
+        },
+      }),
+      /**
+       * 圈选逻辑实现
+       */
+      createSelectBoxPlugin({
+        canSelect: (e) =>
+          // 需满足以下条件：
+          // - 鼠标左键
+          e.button === 0 &&
+          !(ctx.get(FlowDocument) as FlowDocument).renderState.config.nodeHoveredId,
+        ...(opts.selectBox || {}),
+      }),
+      /**
+       * 固定布局拖拽逻辑实现
+       */
+      createFixedDragPlugin((opts.dragdrop || {}) as Parameters<typeof createFixedDragPlugin>[0])
+    );
+    /**
+     * 加载默认编辑器配置
+     */
+    plugins = createDefaultPreset(opts, plugins)(ctx);
+    /**
+     * 注册 变量系统
+     */
+    if (opts.variableEngine?.enable) {
+      plugins.push(
+        createVariablePlugin({
+          ...opts.variableEngine,
+          layout: 'fixed',
+        })
+      );
+    }
+    /**
+     * 注册 历史记录
+     */
+    if (opts.history?.enable) {
+      plugins.push(createFixedHistoryPlugin(opts.history as Parameters<typeof createFixedHistoryPlugin>[0]));
+    }
+    /*
+     * 加载固定布局画布模块
+     * */
+    plugins.push(
+      createPlaygroundPlugin<FixedLayoutPluginContext>({
+        containerModules: [FixedLayoutContainerModule],
+        onBind(bindConfig) {
+          if (!bindConfig.isBound(FlowDocumentOptions)) {
+            bindConfig.bind(FlowDocumentOptions).toConstantValue({
+              ...FlowDocumentOptionsDefault,
+              defaultLayout: opts.defaultLayout,
+              toNodeJSON: (node) => toNodeJSON(opts, node),
+              fromNodeJSON: (node, json, isFirstCreate) =>
+                fromNodeJSON(opts, node, json, isFirstCreate),
+              allNodesDefaultExpanded: opts.allNodesDefaultExpanded,
+            } as FlowDocumentOptions);
+          }
+        },
+        onInit: (ctx) => {
+          ctx.playground.registerLayers(
+            FlowNodesContentLayer, // 节点内容渲染
+            FlowNodesTransformLayer // 节点位置偏移计算
+          );
+          // 劫持节点线条
+          if (opts.formatNodeLines) {
+            ctx.document.options.formatNodeLines = compose([
+              ctx.document.options.formatNodeLines,
+              opts.formatNodeLines,
+            ]);
+          }
+          // 劫持节点 label
+          if (opts.formatNodeLabels) {
+            ctx.document.options.formatNodeLabels = compose([
+              ctx.document.options.formatNodeLabels,
+              opts.formatNodeLabels,
+            ]);
+          }
+          if (opts.scroll?.enableScrollLimit) {
+            // 控制滚动范围
+            ctx.playground.registerLayer(FlowScrollLimitLayer);
+          }
+          if (!opts.scroll?.disableScrollBar) {
+            // 控制条
+            ctx.playground.registerLayer(FlowScrollBarLayer);
+          }
+          if (opts.scroll?.disableScroll) {
+            ctx.playground.config.scrollDisable = true;
+          }
+          if (opts.nodeRegistries) {
+            ctx.document.registerFlowNodes(...opts.nodeRegistries);
+          }
+        },
+      })
+    );
+
+    return createPlaygroundVuePreset(opts, plugins)(ctx);
+  };
+}

package/src/preset/fixed-layout-props.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { SelectBoxPluginOptions } from '@flowgram-vue/select-box-plugin';
+import { FixedHistoryPluginOptions, HistoryService } from '@flowgram-vue/fixed-history-plugin';
+import { type FixDragPluginOptions } from '@flowgram-vue/fixed-drag-plugin';
+import {
+  ClipboardService,
+  EditorPluginContext,
+  EditorProps,
+  FlowDocument,
+  FlowDocumentJSON,
+  FlowLayoutDefault,
+  SelectionService,
+  PluginContext,
+  FlowNodeEntity,
+  FlowTransitionLine,
+  FlowTransitionLabel,
+} from '@flowgram-vue/editor';
+
+import { FlowOperationService } from '../types';
+
+export const FixedLayoutPluginContext = PluginContext;
+
+export interface FixedLayoutPluginTools {
+  fitView: (easing?: boolean) => Promise<void>;
+}
+export interface FixedLayoutPluginContext extends EditorPluginContext {
+  document: FlowDocument;
+  /**
+   * 提供对画布节点相关操作方法, 并 支持 redo/undo
+   */
+  operation: FlowOperationService;
+  clipboard: ClipboardService;
+  selection: SelectionService;
+  history: HistoryService;
+  tools: FixedLayoutPluginTools;
+}
+
+/**
+ * 固定布局配置
+ */
+export interface FixedLayoutProps extends EditorProps<FixedLayoutPluginContext, FlowDocumentJSON> {
+  /**
+   * SelectBox config
+   */
+  selectBox?: SelectBoxPluginOptions;
+  /**
+   * Drag/Drop config
+   */
+  dragdrop?: FixDragPluginOptions<FixedLayoutPluginContext>;
+  /**
+   * Redo/Undo enable
+   */
+  history?: FixedHistoryPluginOptions<FixedLayoutPluginContext> & { disableShortcuts?: boolean };
+  /**
+   * vertical or horizontal layout
+   */
+  defaultLayout?: FlowLayoutDefault | string; // 默认布局
+  /**
+   * Customize the node line
+   * 自定义节点线条
+   */
+  formatNodeLines?: (node: FlowNodeEntity, lines: FlowTransitionLine[]) => FlowTransitionLine[];
+  /**
+   * Custom node label
+   * 自定义节点 label
+   */
+  formatNodeLabels?: (node: FlowNodeEntity, lines: FlowTransitionLabel[]) => FlowTransitionLabel[];
+}
+
+export namespace FixedLayoutProps {
+  /**
+   * 默认配置
+   */
+  export const DEFAULT: FixedLayoutProps = {
+    ...EditorProps.DEFAULT,
+    scroll: {
+      enableScrollLimit: true,
+    },
+  } as FixedLayoutProps;
+}

package/src/preset/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './fixed-layout-props';
+export * from './fixed-layout-preset';

package/src/preset/node-serialize.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeEntity, FlowNodeJSON, FlowNodeFormData } from '@flowgram-vue/editor';
+
+import { FixedLayoutProps } from './fixed-layout-props';
+
+export function fromNodeJSON(
+  opts: FixedLayoutProps,
+  node: FlowNodeEntity,
+  json: FlowNodeJSON,
+  isFirstCreate: boolean
+) {
+  json = opts.fromNodeJSON ? opts.fromNodeJSON(node, json, isFirstCreate) : json;
+  const formData = node.getData(FlowNodeFormData)!;
+  // 如果没有使用表单引擎，将 data 数据填入 extInfo
+  if (!formData) {
+    if (json.data) {
+      node.updateExtInfo(json.data, true);
+    }
+  } else {
+    const defaultFormMeta = opts.nodeEngine?.createDefaultFormMeta?.(node);
+
+    const formMeta = node.getNodeRegistry()?.formMeta || defaultFormMeta;
+
+    if (formMeta) {
+      if (isFirstCreate) {
+        formData.createForm(formMeta, json.data);
+      } else {
+        formData.updateFormValues(json.data);
+      }
+    }
+  }
+}
+
+export function toNodeJSON(opts: FixedLayoutProps, node: FlowNodeEntity): FlowNodeJSON {
+  const nodesMap: Record<string, FlowNodeJSON> = {};
+  let startNodeJSON: FlowNodeJSON;
+  node.document.traverse((node) => {
+    const isSystemNode = node.id.startsWith('$');
+    if (isSystemNode) return;
+    const formData = node.getData(FlowNodeFormData);
+    let formJSON =
+      formData && formData.formModel && formData.formModel.initialized
+        ? formData.toJSON()
+        : undefined;
+    let nodeJSON: FlowNodeJSON = {
+      id: node.id,
+      type: node.flowNodeType,
+      data: formData ? formJSON : node.getExtInfo(),
+      blocks: [],
+    };
+    if (opts.toNodeJSON) {
+      nodeJSON = opts.toNodeJSON(node, nodeJSON);
+    }
+    if (!startNodeJSON) startNodeJSON = nodeJSON;
+    let { parent } = node;
+    if (parent && parent.id.startsWith('$')) {
+      parent = parent.originParent;
+    }
+    const parentJSON = parent ? nodesMap[parent.id] : undefined;
+    if (parentJSON) {
+      parentJSON.blocks?.push(nodeJSON);
+    }
+    nodesMap[node.id] = nodeJSON;
+  }, node);
+
+  // @ts-ignore
+  return startNodeJSON;
+}

package/src/services/flow-operation-service.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import {
+  FlowGroupService,
+  FlowNodeEntity,
+  FlowNodeEntityOrId,
+  FlowNodeFormData,
+  FlowOperationBaseServiceImpl,
+  FormModel,
+  FormModelV2,
+  isFormModelV2,
+} from '@flowgram-vue/editor';
+
+import { FlowOperationService } from '../types';
+
+@injectable()
+export class FlowOperationServiceImpl
+  extends FlowOperationBaseServiceImpl
+  implements FlowOperationService
+{
+  @inject(FlowGroupService)
+  protected groupService: FlowGroupService;
+
+  createGroup(nodes: FlowNodeEntity[]): FlowNodeEntity | undefined {
+    return this.groupService.createGroup(nodes);
+  }
+
+  ungroup(groupNode: FlowNodeEntity): void {
+    return this.groupService.ungroup(groupNode);
+  }
+
+  setFormValue(nodeOrId: FlowNodeEntityOrId, path: string, value: unknown): void {
+    const node = this.toNodeEntity(nodeOrId);
+    const formModel = node?.getData(FlowNodeFormData)?.getFormModel<FormModel | FormModelV2>();
+
+    if (!formModel) {
+      return;
+    }
+
+    if (isFormModelV2(formModel)) {
+      (formModel as FormModelV2).setValueIn(path, value);
+    } else {
+      const formItem = (formModel as FormModel).getFormItemByPath(path);
+
+      if (!formItem) {
+        return;
+      }
+      formItem.value = value;
+    }
+  }
+
+  startTransaction(): void {}
+
+  endTransaction(): void {}
+}

package/src/services/history-operation-service.ts

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable, postConstruct } from 'inversify';
+import { HistoryService } from '@flowgram-vue/history';
+import { FixedHistoryService } from '@flowgram-vue/fixed-history-plugin';
+import {
+  AddBlockConfig,
+  AddOrDeleteNodeValue,
+  FlowDocument,
+  FlowNodeEntity,
+  FlowNodeEntityOrId,
+  FlowNodeJSON,
+  FlowOperation,
+  MoveChildNodesOperationValue,
+  OnNodeAddEvent,
+  OperationType,
+} from '@flowgram-vue/editor';
+
+import { FlowOperationService } from '../types';
+import { FlowOperationServiceImpl } from './flow-operation-service';
+
+@injectable()
+export class HistoryOperationServiceImpl
+  extends FlowOperationServiceImpl
+  implements FlowOperationService
+{
+  @inject(FixedHistoryService)
+  protected fixedHistoryService: FixedHistoryService;
+
+  @inject(HistoryService)
+  protected historyService: HistoryService;
+
+  @inject(FlowDocument)
+  protected document: FlowDocument;
+
+  @postConstruct()
+  protected init() {
+    this.toDispose.push(this.onNodeAdd(this.handleNodeAdd.bind(this)));
+  }
+
+  addFromNode(fromNode: FlowNodeEntityOrId, nodeJSON: FlowNodeJSON): FlowNodeEntity {
+    return this.fixedHistoryService.addFromNode(fromNode, nodeJSON);
+  }
+
+  addBlock(
+    target: FlowNodeEntityOrId,
+    blockJSON: FlowNodeJSON,
+    config: AddBlockConfig = {}
+  ): FlowNodeEntity {
+    const { parent, index } = config;
+    return this.fixedHistoryService.addBlock(target, blockJSON, parent, index);
+  }
+
+  deleteNode(nodeOrId: FlowNodeEntityOrId): void {
+    const node = this.toNodeEntity(nodeOrId);
+    if (!node) {
+      return;
+    }
+    this.fixedHistoryService.deleteNode(node);
+  }
+
+  deleteNodes(nodes: FlowNodeEntityOrId[]): void {
+    const nodesEntities = nodes.map((node) =>
+      typeof node === 'string' ? this.document.getNode(node) : node
+    ) as FlowNodeEntity[];
+    return this.fixedHistoryService.deleteNodes(nodesEntities);
+  }
+
+  startTransaction(): void {
+    this.historyService.startTransaction();
+  }
+
+  endTransaction(): void {
+    this.historyService.endTransaction();
+  }
+
+  apply(operation: FlowOperation) {
+    this.historyService.pushOperation(operation);
+  }
+
+  protected doMoveNode(node: FlowNodeEntity, newParent: FlowNodeEntity, index: number) {
+    const fromParentId = node.parent?.id;
+
+    if (!fromParentId) {
+      return;
+    }
+
+    const value: MoveChildNodesOperationValue = {
+      nodeIds: [this.toId(node)],
+      fromParentId: node.parent.id,
+      toParentId: this.toId(newParent),
+      fromIndex: this.getNodeIndex(node),
+      toIndex: index,
+    };
+
+    return this.historyService.pushOperation({
+      type: OperationType.moveChildNodes,
+      value,
+    });
+  }
+
+  protected handleNodeAdd({ data: addNodeData }: OnNodeAddEvent): FlowNodeEntity {
+    const { parent, index, hidden, originParent, ...nodeJSON } = addNodeData;
+    const value: AddOrDeleteNodeValue = {
+      data: nodeJSON,
+      parentId: parent?.id,
+      index,
+      hidden,
+    };
+
+    return this.historyService.pushOperation(
+      {
+        type: OperationType.addNode,
+        value: value,
+        uri: this.fixedHistoryService.config.getNodeURI(nodeJSON.id),
+      },
+      {
+        noApply: true,
+      }
+    );
+  }
+}

package/src/types.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowNodeEntity,
+  FlowNodeEntityOrId,
+  FlowOperationBaseService,
+} from '@flowgram-vue/editor';
+
+export interface FlowOperationService extends FlowOperationBaseService {
+  /**
+   * 创建分组
+   * @param nodes 节点列表
+   */
+  createGroup(nodes: FlowNodeEntity[]): FlowNodeEntity | undefined;
+  /**
+   * 取消分组
+   * @param groupNode
+   */
+  ungroup(groupNode: FlowNodeEntity): void;
+  /**
+   * 开始事务
+   */
+  startTransaction(): void;
+  /**
+   * 结束事务
+   */
+  endTransaction(): void;
+  /**
+   * 修改表单数据
+   * @param node 节点
+   * @param path 属性路径
+   * @param value 值
+   */
+  setFormValue(node: FlowNodeEntityOrId, path: string, value: unknown): void;
+}
+
+export const FlowOperationService = Symbol('FlowOperationService');

package/src/utils/compose.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeEntity } from '@flowgram-vue/editor';
+
+export type ComposeListItem<T> = (node: FlowNodeEntity, data: T[]) => T[];
+
+export const compose =
+  <T>(fnList: (ComposeListItem<T> | undefined)[]) =>
+  (node: FlowNodeEntity, data: T[]): T[] => {
+    const list = fnList.filter(Boolean) as ComposeListItem<T>[];
+    if (!list.length) {
+      return data;
+    }
+    return list.reduce((acc: T[], fn) => fn(node, acc), data);
+  };