@flowgram-vue/fixed-layout-editor 0.2.0

package/src/components/fixed-layout-editor-provider.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { interfaces } from 'inversify';
+import { HistoryService } from '@flowgram-vue/history';
+import {
+  FlowDocument,
+  createPluginContextDefault,
+  PlaygroundVueProvider,
+  ClipboardService,
+  SelectionService,
+  Playground,
+} from '@flowgram-vue/editor';
+import { ref } from 'vue';
+
+import { FlowOperationService } from '../types';
+import {
+  createFixedLayoutPreset,
+  type FixedLayoutPluginContext,
+  type FixedLayoutPluginTools,
+  type FixedLayoutProps,
+} from '../preset';
+
+defineOptions({ name: 'FixedLayoutEditorProvider' });
+
+const props = defineProps<FixedLayoutProps>();
+const providerRef = ref<FixedLayoutPluginContext | null>(null);
+
+const preset = createFixedLayoutPreset(props);
+
+const customPluginContext = (container: interfaces.Container) =>
+  ({
+    ...createPluginContextDefault(container),
+    get document(): FlowDocument {
+      return container.get<FlowDocument>(FlowDocument);
+    },
+    get operation(): FlowOperationService {
+      return container.get<FlowOperationService>(FlowOperationService);
+    },
+    get clipboard(): ClipboardService {
+      return container.get<ClipboardService>(ClipboardService);
+    },
+    get selection(): SelectionService {
+      return container.get<SelectionService>(SelectionService);
+    },
+    get history(): HistoryService {
+      return container.get<HistoryService>(HistoryService);
+    },
+    get tools(): FixedLayoutPluginTools {
+      return {
+        fitView: (easing?: boolean) => {
+          const playgroundConfig = container.get<Playground>(Playground).config;
+          const doc = container.get(FlowDocument);
+          return playgroundConfig.fitView(doc.root.bounds, easing, 30);
+        },
+      };
+    },
+  }) as FixedLayoutPluginContext;
+
+defineExpose({
+  get playground() {
+    return providerRef.value?.playground as FixedLayoutPluginContext['playground'];
+  },
+  get container() {
+    return providerRef.value?.container as FixedLayoutPluginContext['container'];
+  },
+  get document() {
+    return providerRef.value?.document as FixedLayoutPluginContext['document'];
+  },
+  get operation() {
+    return providerRef.value?.operation as FixedLayoutPluginContext['operation'];
+  },
+  get clipboard() {
+    return providerRef.value?.clipboard as FixedLayoutPluginContext['clipboard'];
+  },
+  get selection() {
+    return providerRef.value?.selection as FixedLayoutPluginContext['selection'];
+  },
+  get history() {
+    return providerRef.value?.history as FixedLayoutPluginContext['history'];
+  },
+  get tools() {
+    return providerRef.value?.tools as FixedLayoutPluginContext['tools'];
+  },
+  get: ((identifier) => providerRef.value?.get(identifier)) as FixedLayoutPluginContext['get'],
+  getAll: ((identifier) =>
+    providerRef.value?.getAll(identifier) ?? []) as FixedLayoutPluginContext['getAll'],
+});
+</script>
+
+<template>
+  <PlaygroundVueProvider
+    ref="providerRef"
+    :plugins="preset"
+    :custom-plugin-context="customPluginContext"
+    :parent-container="props.parentContainer"
+  >
+    <slot />
+  </PlaygroundVueProvider>
+</template>

package/src/components/fixed-layout-editor.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { EditorRenderer } from '@flowgram-vue/editor';
+import { ref } from 'vue';
+
+import { type FixedLayoutPluginContext, type FixedLayoutProps } from '../preset';
+import FixedLayoutEditorProvider from './fixed-layout-editor-provider.vue';
+
+defineOptions({ name: 'FixedLayoutEditor' });
+
+const props = defineProps<FixedLayoutProps>();
+const providerRef = ref<FixedLayoutPluginContext | null>(null);
+
+defineExpose({
+  get playground() {
+    return providerRef.value?.playground as FixedLayoutPluginContext['playground'];
+  },
+  get container() {
+    return providerRef.value?.container as FixedLayoutPluginContext['container'];
+  },
+  get document() {
+    return providerRef.value?.document as FixedLayoutPluginContext['document'];
+  },
+  get operation() {
+    return providerRef.value?.operation as FixedLayoutPluginContext['operation'];
+  },
+  get clipboard() {
+    return providerRef.value?.clipboard as FixedLayoutPluginContext['clipboard'];
+  },
+  get selection() {
+    return providerRef.value?.selection as FixedLayoutPluginContext['selection'];
+  },
+  get history() {
+    return providerRef.value?.history as FixedLayoutPluginContext['history'];
+  },
+  get tools() {
+    return providerRef.value?.tools as FixedLayoutPluginContext['tools'];
+  },
+  get: ((identifier) => providerRef.value?.get(identifier)) as FixedLayoutPluginContext['get'],
+  getAll: ((identifier) =>
+    providerRef.value?.getAll(identifier) ?? []) as FixedLayoutPluginContext['getAll'],
+});
+</script>
+
+<template>
+  <FixedLayoutEditorProvider ref="providerRef" v-bind="props">
+    <EditorRenderer>
+      <slot />
+    </EditorRenderer>
+  </FixedLayoutEditorProvider>
+</template>

package/src/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as FixedLayoutEditorProvider } from './fixed-layout-editor-provider.vue';
+export { default as FixedLayoutEditor } from './fixed-layout-editor.vue';

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/hooks/use-client-context.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useService, PluginContext } from '@flowgram-vue/editor';
+
+import { FixedLayoutPluginContext } from '../preset';
+
+export function useClientContext(): FixedLayoutPluginContext {
+  return useService<FixedLayoutPluginContext>(PluginContext);
+}

package/src/hooks/use-node-render.ts

@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, onBeforeUnmount } from 'vue';
+
+import { useObserve } from '@flowgram-vue/reactive';
+import { useStartDragNode } from '@flowgram-vue/fixed-drag-plugin';
+import {
+  usePlayground,
+  FlowNodeBaseType,
+  FlowNodeEntity,
+  FlowNodeRenderData,
+  useService,
+  type Disposable,
+  PlaygroundEntityContextKey,
+  type NodeFormProps,
+  getNodeForm,
+} from '@flowgram-vue/editor';
+
+import { FlowOperationService } from '../types';
+
+export interface NodeRenderReturnType {
+  id: string;
+  type: string | number;
+  /**
+   * 节点 data 数据
+   */
+  data: any;
+  /**
+   * 更新节点 data 数据
+   */
+  updateData: (newData: any) => void;
+  /**
+   * BlockOrderIcon节点，一般用于分支的第一个占位节点
+   */
+  isBlockOrderIcon: boolean;
+  /**
+   * BlockIcon 节点，一般用于带有分支的占位节点
+   */
+  isBlockIcon: boolean;
+  /**
+   * 当前节点 (如果是 icon 则会返回它的父节点)
+   */
+  node: FlowNodeEntity;
+  /**
+   * 是否在拖拽中
+   */
+  dragging: boolean;
+  /**
+   * 节点是否激活
+   */
+  activated: boolean;
+  /**
+   * 节点是否展开
+   */
+  expanded: boolean;
+  /**
+   * 触发拖拽
+   * @param e
+   */
+  startDrag: (e: MouseEvent) => void;
+  /**
+   * 鼠标进入, 主要用于控制 activated 状态
+   */
+  onMouseEnter: (e: MouseEvent) => void;
+  /**
+   * 鼠标离开, 主要用于控制 activated 状态
+   */
+  onMouseLeave: (e: MouseEvent) => void;
+
+  /**
+   * 渲染表单，只有节点引擎开启才能使用
+   */
+  form: NodeFormProps<any> | undefined;
+
+  /**
+   * 获取节点的扩展数据
+   */
+  getExtInfo<T = any>(): T;
+
+  /**
+   * 更新节点的扩展数据
+   * @param extInfo
+   */
+  updateExtInfo<T = any>(extInfo: T, fullUpdate?: boolean): void;
+
+  /**
+   * 展开/收起节点
+   * @param expanded
+   */
+  toggleExpand(): void;
+
+  /**
+   * 删除节点
+   */
+  deleteNode: () => void;
+  /**
+   * 全局 readonly 状态
+   */
+  readonly: boolean;
+}
+
+/**
+ * Provides methods related to node rendering
+ * @param nodeFromProps
+ */
+export function useNodeRender(nodeFromProps?: FlowNodeEntity): NodeRenderReturnType {
+  const renderNode =
+    nodeFromProps || (inject(PlaygroundEntityContextKey, undefined) as FlowNodeEntity);
+  const nodeCache = { current: undefined as FlowNodeEntity | undefined };
+  const renderData = renderNode.getData<FlowNodeRenderData>(FlowNodeRenderData)!;
+  const { startDrag: startDragOrigin, dragOffset } = useStartDragNode();
+  const playground = usePlayground();
+  const isBlockOrderIcon = renderNode.flowNodeType === FlowNodeBaseType.BLOCK_ORDER_ICON;
+  const isBlockIcon = renderNode.flowNodeType === FlowNodeBaseType.BLOCK_ICON;
+  const formValueDependRef = { current: false };
+  formValueDependRef.current = false;
+  const node =
+    (isBlockOrderIcon || isBlockIcon ? renderNode.parent! : renderNode) || nodeCache.current!;
+  nodeCache.current = node;
+  const operationService = useService<FlowOperationService>(FlowOperationService);
+  const deleteNode = () => {
+    operationService.deleteNode(node);
+  };
+
+  const startDrag = (e: MouseEvent) => {
+    startDragOrigin(
+      e,
+      { dragStartEntity: renderNode },
+      { dragOffsetX: dragOffset.x, dragOffsetY: dragOffset.y }
+    );
+  };
+
+  const onMouseEnter = (_e: MouseEvent) => {
+    renderData.toggleMouseEnter();
+  };
+
+  const onMouseLeave = (_e: MouseEvent) => {
+    renderData.toggleMouseLeave();
+  };
+
+  const toggleExpand = () => {
+    renderData.toggleExpand();
+  };
+
+  const getExtInfo = () => node.getExtInfo() as any;
+  const updateExtInfo = (data: any, fullUpdate?: boolean) => {
+    node.updateExtInfo(data, fullUpdate);
+  };
+  const form = getNodeForm(node);
+  const formState = useObserve<any>(form?.state);
+
+  let extInfoDispose: Disposable | undefined;
+  if (isBlockIcon || isBlockOrderIcon) {
+    extInfoDispose = renderNode.parent!.onExtInfoChange(() => renderNode.renderData.fireChange());
+  }
+  const formValuesDispose = form?.onFormValuesChange(() => {
+    if (formValueDependRef.current) {
+      renderData.fireChange();
+    }
+  });
+  onBeforeUnmount(() => {
+    extInfoDispose?.dispose();
+    formValuesDispose?.dispose();
+  });
+
+  const readonly = playground.config.readonly;
+
+  return {
+    id: node.id,
+    type: node.flowNodeType,
+    get data() {
+      if (form) {
+        formValueDependRef.current = true;
+        return form.values;
+      }
+      return getExtInfo();
+    },
+    updateData(values: any) {
+      if (form) {
+        form.updateFormValues(values);
+      } else {
+        updateExtInfo(values, true);
+      }
+    },
+    node,
+    isBlockOrderIcon,
+    isBlockIcon,
+    get activated() {
+      return renderData.activated;
+    },
+    readonly,
+    get expanded() {
+      return renderData.expanded;
+    },
+    get dragging() {
+      return renderData.dragging;
+    },
+    startDrag,
+    deleteNode,
+    onMouseEnter,
+    onMouseLeave,
+    getExtInfo,
+    updateExtInfo,
+    toggleExpand,
+    get form() {
+      if (!form) return undefined;
+      return {
+        ...form,
+        get values() {
+          formValueDependRef.current = true;
+          return form.values!;
+        },
+        get state() {
+          return formState;
+        },
+      };
+    },
+  };
+}

package/src/hooks/use-playground-tools.ts

@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
+
+import { DisposableCollection } from '@flowgram-vue/utils';
+import { HistoryService } from '@flowgram-vue/history';
+import {
+  FlowDocument,
+  FlowLayoutDefault,
+  FlowNodeRenderData,
+  PlaygroundInteractiveType,
+  EditorState,
+  usePlayground,
+  usePlaygroundContainer,
+  useService,
+} from '@flowgram-vue/editor';
+
+export interface PlaygroundToolsPropsType {
+  /**
+   * 最大缩放比，默认 2
+   */
+  maxZoom?: number;
+  /**
+   * 最小缩放比，默认 0.25
+   */
+  minZoom?: number;
+}
+
+export interface PlaygroundTools {
+  /**
+   * 缩放 zoom 大小比例
+   */
+  zoom: number;
+  /**
+   * 放大
+   */
+  zoomin: (easing?: boolean) => void;
+  /**
+   * 缩小
+   */
+  zoomout: (easing?: boolean) => void;
+  /**
+   * 设置缩放比例
+   * @param zoom
+   */
+  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;
+  /**
+   * 自适应视区
+   */
+  fitView: (easing?: boolean, easingDuration?: number, padding?: number) => Promise<void>;
+  /**
+   * 是否垂直布局
+   */
+  isVertical: boolean;
+  /**
+   * 切换布局, 如果不传入则直接切换
+   */
+  changeLayout: (layout?: FlowLayoutDefault) => void;
+
+  /** 交互模式：鼠标 or 触控板 */
+  interactiveType: PlaygroundInteractiveType;
+  setInteractiveType: (type: PlaygroundInteractiveType) => void;
+  /**
+   * 是否可 redo
+   */
+  canRedo: boolean;
+  /**
+   * 是否可 undo
+   */
+  canUndo: boolean;
+  /**
+   * redo
+   */
+  redo: () => void;
+  /**
+   * undo
+   */
+  undo: () => void;
+}
+
+export function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools {
+  const { maxZoom, minZoom } = props || {};
+  const playground = usePlayground();
+  const container = usePlaygroundContainer();
+  const historyService = container.isBound(HistoryService)
+    ? container.get(HistoryService)
+    : undefined;
+  const doc = useService<FlowDocument>(FlowDocument);
+  const interactiveType = ref<PlaygroundInteractiveType>('PAD');
+  const zoom = ref(1);
+  const currentLayout = ref(doc.layout);
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+
+  const handleFitView = (easing?: boolean, easingDuration?: number, padding?: number) => {
+    padding = padding || 30;
+    return playground.config.fitView(doc.root.bounds, easing, padding, easingDuration);
+  };
+
+  const changeLayout = (newLayout?: FlowLayoutDefault) => {
+    const allNodes = doc.getAllNodes();
+    newLayout =
+      newLayout ||
+      (doc.layout.name === FlowLayoutDefault.HORIZONTAL_FIXED_LAYOUT
+        ? FlowLayoutDefault.VERTICAL_FIXED_LAYOUT
+        : FlowLayoutDefault.HORIZONTAL_FIXED_LAYOUT);
+    allNodes.map((node) => {
+      const renderData = node.getData(FlowNodeRenderData);
+      renderData.node.classList.add('gedit-transition-ease');
+    });
+    setTimeout(() => {
+      handleFitView();
+    }, 10);
+    setTimeout(() => {
+      allNodes.map((node) => {
+        const renderData = node.getData(FlowNodeRenderData);
+        renderData.node.classList.remove('gedit-transition-ease');
+      });
+    }, 500);
+    doc.setLayout(newLayout);
+    currentLayout.value = doc.layout;
+  };
+
+  const handleZoomOut = (easing?: boolean) => {
+    playground?.config.zoomout(easing);
+  };
+
+  const handleZoomIn = (easing?: boolean) => {
+    playground?.config.zoomin(easing);
+  };
+
+  const handleUpdateZoom = (value: number, easing?: boolean, easingDuration?: number) => {
+    playground.config.updateZoom(value, easing, easingDuration);
+  };
+
+  const handleUndo = () => historyService?.undo();
+  const handleRedo = () => historyService?.redo();
+
+  function handleUpdateInteractiveType(nextType: PlaygroundInteractiveType) {
+    if (nextType === 'MOUSE') {
+      playground.editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);
+    } else if (nextType === 'PAD') {
+      playground.editorState.changeState(EditorState.STATE_SELECT.id);
+    }
+    interactiveType.value = nextType;
+  }
+
+  const dispose = new DisposableCollection();
+  if (playground) {
+    dispose.push(playground.onZoom((z) => (zoom.value = z)));
+  }
+  if (historyService) {
+    dispose.push(
+      historyService.undoRedoService.onChange(() => {
+        canUndo.value = historyService.canUndo();
+        canRedo.value = historyService.canRedo();
+      })
+    );
+  }
+  onBeforeUnmount(() => dispose.dispose());
+
+  watch(
+    () => [maxZoom, minZoom],
+    () => {
+      const config = playground.config.config;
+      playground.config.updateConfig({
+        maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom,
+        minZoom: minZoom !== undefined ? minZoom : config.minZoom,
+      });
+    },
+    { immediate: true }
+  );
+
+  return reactive({
+    zoomin: handleZoomIn,
+    zoomout: handleZoomOut,
+    fitView: handleFitView,
+    updateZoom: handleUpdateZoom,
+    zoom,
+    isVertical: computed(() => currentLayout.value.name === FlowLayoutDefault.VERTICAL_FIXED_LAYOUT),
+    changeLayout,
+    canRedo,
+    canUndo,
+    undo: handleUndo,
+    redo: handleRedo,
+    interactiveType,
+    setInteractiveType: handleUpdateInteractiveType,
+  }) as PlaygroundTools;
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import 'reflect-metadata';
+
+/* 核心模块导出 */
+export * from '@flowgram-vue/editor';
+
+/**
+ * 固定布局模块导出
+ */
+export * from '@flowgram-vue/fixed-layout-core';
+export { useStartDragNode } from '@flowgram-vue/fixed-drag-plugin';
+export * from './preset';
+export * from './components';
+export * from '@flowgram-vue/fixed-history-plugin';
+export * from './hooks/use-node-render';
+export * from './hooks/use-playground-tools';
+export { useClientContext } from './hooks/use-client-context';
+export * from './types';
+export { createOperationPlugin } from './plugins/create-operation-plugin';

package/src/plugins/create-operation-plugin.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { definePluginCreator } from '@flowgram-vue/core';
+
+import { FlowOperationService } from '../types';
+import { HistoryOperationServiceImpl } from '../services/history-operation-service';
+import { FlowOperationServiceImpl } from '../services/flow-operation-service';
+import { FixedLayoutProps } from '../preset';
+
+export const createOperationPlugin = definePluginCreator<FixedLayoutProps>({
+  onBind: ({ bind }, opts) => {
+    bind(FlowOperationService)
+      .to(opts?.history?.enable ? HistoryOperationServiceImpl : FlowOperationServiceImpl)
+      .inSingletonScope();
+  },
+  onDispose: ctx => {
+    const flowOperationService = ctx.container.get<FlowOperationService>(FlowOperationService);
+    flowOperationService.dispose();
+  },
+});