chore(drag): remove alt key copy node (bytedance#149)

* chore(drag): remove alt key copy node

* fix: tsc error

Author: louisyoungx

apps/demo-free-layout/src/shortcuts/shortcuts.ts

@@ -80,27 +80,11 @@ export function shortcuts(shortcutsRegistry: ShortcutsRegistry, ctx: FreeLayoutP
   shortcutsRegistry.addHandlers({
     commandId: FlowCommandId.PASTE,
     shortcuts: ['meta v', 'ctrl v'],
-    execute: async (selectedNodes?: WorkflowNodeEntity[]) => {
+    execute: async (e: KeyboardEvent) => {
       const document = ctx.get<WorkflowDocument>(WorkflowDocument);
       const selectService = ctx.get<WorkflowSelectService>(WorkflowSelectService);
       const dragService = ctx.get<WorkflowDragService>(WorkflowDragService);
 
-      if (selectedNodes && Array.isArray(selectedNodes)) {
-        const newNodes = await Promise.all(
-          selectedNodes.map(async (node) => {
-            const nodeJSON = await document.toNodeJSON(node);
-            return document.copyNodeFromJSON(
-              nodeJSON.type as string,
-              nodeJSON,
-              '',
-              getAntiOverlapPosition(document, nodeJSON.meta!.position!),
-              node.parent?.id
-            );
-          })
-        );
-        return newNodes;
-      }
-
       const text: string = (await navigator.clipboard.readText()) || '';
       let clipboardData: {
         nodes: {

packages/canvas-engine/free-layout-core/__tests__/service/workflow-drag-service.test.ts

@@ -1,8 +1,8 @@
 import { interfaces } from 'inversify';
 import { fireEvent, waitFor } from '@testing-library/react';
-import { IPoint, logger } from '@flowgram.ai/utils';
+import { IPoint } from '@flowgram.ai/utils';
 import { FlowNodeBaseType } from '@flowgram.ai/document';
-import { CommandRegistry, PlaygroundConfigEntity, PositionData } from '@flowgram.ai/core';
+import { PlaygroundConfigEntity, PositionData } from '@flowgram.ai/core';
 import { TransformData } from '@flowgram.ai/core';
 
 import { createWorkflowContainer, baseJSON, nestJSON } from '../mocks';
@@ -13,7 +13,6 @@ import {
   WorkflowLineEntity,
   WorkflowSelectService,
   WorkflowNodeEntity,
-  WorkflowCommands,
   WorkflowLinesManager,
   WorkflowPortEntity,
 } from '../../src';
@@ -323,39 +322,6 @@ describe('workflow-drag-service', () => {
     });
     expect(endNode.getData(PositionData).toJSON()).toEqual({ x: 900, y: 100 });
   });
-  it('startDragSelectedNodes with altKey', async () => {
-    container.get(CommandRegistry).registerCommand(
-      {
-        id: WorkflowCommands.PASTE_NODES,
-      },
-      {
-        execute: (nodes: WorkflowNodeEntity[]) =>
-          Promise.all(nodes.map((n) => document.copyNode(n, n.id + '_copy'))),
-      }
-    );
-    container.get(WorkflowSelectService).selection = [startNode, endNode];
-    const promise = dragService.startDragSelectedNodes({
-      clientX: 0,
-      clientY: 0,
-      altKey: true,
-    } as any);
-    await fireMouseEvent('mousemove', { x: 10, y: 10 });
-    await fireMouseEvent('mousemove', { x: 100, y: 100 });
-    await fireMouseEvent('mouseup', { x: 100, y: 100 });
-    const dragResult = await promise;
-    expect(dragResult).toEqual(true);
-    expect(startNode.getData(PositionData).toJSON()).toEqual({ x: 10, y: 10 });
-    expect(endNode.getData(PositionData).toJSON()).toEqual({ x: 810, y: 10 });
-    logger.warn('nodeInfo', document.getNode('start_0_copy')!.getData(PositionData).toJSON());
-    expect(document.getNode('start_0_copy')!.getData(PositionData).toJSON()).toEqual({
-      x: 110,
-      y: 110,
-    });
-    expect(document.getNode('end_0_copy')!.getData(PositionData).toJSON()).toEqual({
-      x: 910,
-      y: 110,
-    });
-  });
   it('startDragSelectedNodes with same parent', async () => {
     await document.fromJSON({
       nodes: nestJSON.nodes,

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

@@ -31,7 +31,6 @@ import {
 import { WorkflowLinesManager } from '../workflow-lines-manager';
 import { WorkflowDocumentOptions } from '../workflow-document-option';
 import { WorkflowDocument } from '../workflow-document';
-import { WorkflowCommands } from '../workflow-commands';
 import { LineEventProps, NodesDragEvent, OnDragLineEnd } from '../typings/workflow-drag';
 import { type WorkflowNodeJSON, type WorkflowNodeMeta } from '../typings';
 import { WorkflowNodePortsData } from '../entity-datas';
@@ -136,7 +135,6 @@ export class WorkflowDragService {
     if (sameParent && sameParent.flowNodeType !== FlowNodeBaseType.ROOT) {
       selectedNodes = [sameParent];
     }
-    const { altKey } = triggerEvent;
     // 节点整体开始位置
     let startPosition = this.getNodesPosition(selectedNodes);
     // 单个节点开始位置
@@ -152,7 +150,6 @@ export class WorkflowDragService {
           type: 'onDragStart',
           nodes: selectedNodes,
           startPositions,
-          altKey,
           dragEvent,
           triggerEvent,
           dragger,
@@ -161,30 +158,6 @@ export class WorkflowDragService {
       onDrag: (dragEvent) => {
         if (!dragSuccess && checkDragSuccess(Date.now() - startTime, dragEvent)) {
           dragSuccess = true;
-          if (altKey) {
-            // 按住 alt 为复制
-            const tryCopyNodes = selectedNodes;
-            if (tryCopyNodes.length > 0) {
-              this.selectService.clear();
-              this.commandService
-                .executeCommand(WorkflowCommands.PASTE_NODES, tryCopyNodes, true)
-                .then((newNodes) => {
-                  if (newNodes && Array.isArray(newNodes) && newNodes.length > 0) {
-                    selectedNodes = newNodes as WorkflowNodeEntity[];
-                    startPosition = this.getNodesPosition(tryCopyNodes);
-                    startPositions = tryCopyNodes
-                      .filter((n) => !n.getNodeMeta<WorkflowNodeMeta>().copyDisable)
-                      .map((node) => {
-                        const transform = node.getData(TransformData);
-                        return {
-                          x: transform.position.x,
-                          y: transform.position.y,
-                        };
-                      });
-                  }
-                });
-            }
-          }
         }
 
         // 计算拖拽偏移量
@@ -222,7 +195,6 @@ export class WorkflowDragService {
           nodes: selectedNodes,
           startPositions,
           positions,
-          altKey,
           dragEvent,
           triggerEvent,
           dragger,
@@ -234,7 +206,6 @@ export class WorkflowDragService {
           type: 'onDragEnd',
           nodes: selectedNodes,
           startPositions,
-          altKey,
           dragEvent,
           triggerEvent,
           dragger,

packages/canvas-engine/free-layout-core/src/typings/workflow-drag.ts

@@ -16,7 +16,6 @@ interface INodesDragEvent {
   type: string;
   nodes: FlowNodeEntity[];
   startPositions: PositionSchema[];
-  altKey: boolean;
   dragEvent: PlaygroundDragEvent;
   triggerEvent: MouseEvent | React.MouseEvent;
   dragger: PlaygroundDrag;

packages/plugins/free-history-plugin/src/handlers/drag-nodes-handler.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { injectable, inject } from 'inversify';
-import { TransformData } from '@flowgram.ai/core';
-import { type NodesDragEndEvent } from '@flowgram.ai/free-layout-core';
 import { HistoryService } from '@flowgram.ai/history';
+import { type NodesDragEndEvent } from '@flowgram.ai/free-layout-core';
+import { TransformData } from '@flowgram.ai/core';
 
 import { FreeOperationType, type IHandler } from '../types';
 
@@ -12,10 +12,7 @@ export class DragNodesHandler implements IHandler<NodesDragEndEvent> {
   private _historyService: HistoryService;
 
   handle(event: NodesDragEndEvent) {
-    if (
-      event.type === 'onDragEnd' &&
-      !event.altKey // altKey代表创建，这个通过add-node监听处理
-    ) {
+    if (event.type === 'onDragEnd') {
       this._dragNode(event);
     }
   }
@@ -25,8 +22,8 @@ export class DragNodesHandler implements IHandler<NodesDragEndEvent> {
       {
         type: FreeOperationType.dragNodes,
         value: {
-          ids: event.nodes.map(node => node.id),
-          value: event.nodes.map(node => {
+          ids: event.nodes.map((node) => node.id),
+          value: event.nodes.map((node) => {
             const { x, y } = node.getData(TransformData).position;
             return {
               x,
@@ -36,7 +33,7 @@ export class DragNodesHandler implements IHandler<NodesDragEndEvent> {
           oldValue: event.startPositions,
         },
       },
-      { noApply: true },
+      { noApply: true }
     );
   }
 }