Sfoglia il codice sorgente

feat(canvas): set onDragLineEnd through editorProps

liuyangxing 10 mesi fa
parent
commit
c0ee319eba

+ 15 - 4
packages/canvas-engine/free-layout-core/src/service/workflow-drag-service.ts

@@ -28,6 +28,7 @@ import {
 } from '@flowgram.ai/core';
 
 import { WorkflowLinesManager } from '../workflow-lines-manager';
+import { WorkflowDocumentOptions } from '../workflow-document-option';
 import { WorkflowDocument } from '../workflow-document';
 import { WorkflowCommands } from '../workflow-commands';
 import { type WorkflowNodeJSON, type WorkflowNodeMeta } from '../typings';
@@ -77,14 +78,17 @@ export interface NodesDragEndEvent extends INodesDragEvent {
 }
 
 export type NodesDragEvent = NodesDragEndEvent;
-type OnDragNodeEnd = (params: {
+
+export type onDragLineEndParams = {
   fromPort: WorkflowPortEntity;
   toPort?: WorkflowPortEntity;
   mousePos: PositionSchema;
   line?: WorkflowLineEntity;
   originLine?: WorkflowLineEntity;
   event: PlaygroundDragEvent;
-}) => Promise<void>;
+};
+
+export type OnDragLineEnd = (params: onDragLineEndParams) => Promise<void>;
 
 @injectable()
 export class WorkflowDragService {
@@ -104,6 +108,9 @@ export class WorkflowDragService {
   @inject(FlowOperationBaseService)
   protected operationService: FlowOperationBaseService;
 
+  @inject(WorkflowDocumentOptions)
+  readonly options: WorkflowDocumentOptions;
+
   private _onDragLineEventEmitter = new Emitter<LineEventProps>();
 
   readonly onDragLineEventChange = this._onDragLineEventEmitter.event;
@@ -124,11 +131,14 @@ export class WorkflowDragService {
     (params: { selectedNodes: WorkflowNodeEntity[]; position: IPoint }) => IPoint
   > = new Set();
 
-  private _onDragLineEndCallbacks: Map<string, OnDragNodeEnd> = new Map();
+  private _onDragLineEndCallbacks: Map<string, OnDragLineEnd> = new Map();
 
   @postConstruct()
   init() {
     this._toDispose.pushAll([this._onDragLineEventEmitter, this._nodesDragEmitter]);
+    if (this.options.onDragLineEnd) {
+      this._toDispose.push(this.onDragLineEnd(this.options.onDragLineEnd));
+    }
   }
 
   dispose() {
@@ -173,6 +183,7 @@ export class WorkflowDragService {
             // 按住 alt 为复制
             const tryCopyNodes = selectedNodes;
             if (tryCopyNodes.length > 0) {
+              this.selectService.clear();
               this.commandService
                 .executeCommand(WorkflowCommands.PASTE_NODES, tryCopyNodes, true)
                 .then((newNodes) => {
@@ -744,7 +755,7 @@ export class WorkflowDragService {
   }
 
   /** 线条拖拽结束 */
-  public onDragLineEnd(callback: OnDragNodeEnd): Disposable {
+  public onDragLineEnd(callback: OnDragLineEnd): Disposable {
     const id = nanoid();
     this._onDragLineEndCallbacks.set(id, callback);
     return {

+ 3 - 0
packages/canvas-engine/free-layout-core/src/workflow-document-option.ts

@@ -5,6 +5,7 @@ import { TransformData } from '@flowgram.ai/core';
 import { type WorkflowLinesManager } from './workflow-lines-manager';
 import { toFormJSON } from './utils/flow-node-form-data';
 import { LineColor, LineRenderType, WorkflowNodeJSON, WorkflowNodeMeta } from './typings';
+import { onDragLineEndParams } from './service';
 import {
   type WorkflowLineEntity,
   type WorkflowLinePortInfo,
@@ -44,6 +45,8 @@ export interface WorkflowDocumentOptions extends FlowDocumentOptions {
   isDisabledLine?: (line: WorkflowLineEntity) => boolean;
   /** 是否竖向线条 */
   isVerticalLine?: (line: WorkflowLineEntity) => boolean;
+  /** 拖拽线条结束 */
+  onDragLineEnd?: (params: onDragLineEndParams) => Promise<void>;
   /** 获取线条渲染器 */
   setLineRenderType?: (line: WorkflowLineEntity) => LineRenderType | undefined;
   /** 设置线条样式 */

+ 1 - 0
packages/client/free-layout-editor/src/preset/free-layout-preset.ts

@@ -153,6 +153,7 @@ export function createFreeLayoutPreset(
             isFlowingLine: opts.isFlowingLine?.bind(null, ctx),
             isDisabledLine: opts.isDisabledLine?.bind(null, ctx),
             isVerticalLine: opts.isVerticalLine?.bind(null, ctx),
+            onDragLineEnd: opts.onDragLineEnd?.bind(null, ctx),
             setLineRenderType: opts.setLineRenderType?.bind(null, ctx),
             setLineClassName: opts.setLineClassName?.bind(null, ctx),
             canDeleteNode: opts.canDeleteNode?.bind(null, ctx),

+ 7 - 0
packages/client/free-layout-editor/src/preset/free-layout-props.ts

@@ -3,6 +3,7 @@ import { HistoryService } from '@flowgram.ai/history';
 import {
   LineColor,
   LineRenderType,
+  onDragLineEndParams,
   WorkflowContentChangeEvent,
   WorkflowContentChangeType,
   WorkflowDocument,
@@ -123,6 +124,12 @@ export interface FreeLayoutProps extends EditorProps<FreeLayoutPluginContext, Wo
    * @param line
    */
   isVerticalLine?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => boolean;
+  /**
+   * 拖拽线条结束
+   * @param ctx
+   * @param params
+   */
+  onDragLineEnd?: (ctx: FreeLayoutPluginContext, params: onDragLineEndParams) => Promise<void>;
   /**
    * 设置线条渲染器类型
    * @param ctx

+ 2 - 2
packages/plugins/free-lines-plugin/src/layer/workflow-lines-layer.tsx

@@ -27,6 +27,8 @@ export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
 
   @inject(WorkflowSelectService) selectService: WorkflowSelectService;
 
+  @inject(StackingContextManager) stackContext: StackingContextManager;
+
   @observeEntities(WorkflowLineEntity) readonly lines: WorkflowLineEntity[];
 
   @observeEntities(WorkflowPortEntity) readonly ports: WorkflowPortEntity[];
@@ -36,8 +38,6 @@ export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
 
   @inject(WorkflowDocument) protected workflowDocument: WorkflowDocument;
 
-  @inject(StackingContextManager) protected stackContext: StackingContextManager;
-
   private layerID = nanoid();
 
   private mountedLines: Map<