copy & paste values on connections and start flow from there

Author: devhelpr

libs/app-canvas/src/app/command-handlers/command-context.ts

@@ -19,4 +19,9 @@ export interface ICommandContext<T extends BaseNodeInfo> {
   getNodeTaskFactory: (name: string) => NodeTaskFactory<T>;
   setupTasksInDropdown: (selectNodeTypeHTMLElement: HTMLSelectElement) => void;
   commandRegistry: Map<string, ICommandHandler>;
+  onBeforeExecuteCommand?: (
+    commandName: string,
+    parameter1: any,
+    parameter2: any
+  ) => boolean;
 }

libs/app-canvas/src/app/command-handlers/paste-node-command/paste-node-command.ts

@@ -19,7 +19,10 @@ export class PasteNodeCommand<
     this.rootElement = commandContext.rootElement;
     this.setupTasksInDropdown = commandContext.setupTasksInDropdown;
     this.commandRegistry = commandContext.commandRegistry;
+    this.commandContext = commandContext;
   }
+  static commandName = 'paste-node';
+  commandContext: ICommandContext<T>;
   commandRegistry: Map<string, ICommandHandler>;
   rootElement: HTMLElement;
   getCanvasApp: () => IFlowCanvasBase<T> | undefined;
@@ -36,6 +39,17 @@ export class PasteNodeCommand<
     if (!canvasApp) {
       return;
     }
+
+    const shouldExecuteCommand =
+      this.commandContext.onBeforeExecuteCommand?.(
+        'paste-node',
+        _parameter1,
+        _parameter2
+      ) ?? true;
+    if (shouldExecuteCommand === false) {
+      return;
+    }
+    console.log('PasteNodeCommand.execute');
     const copyCommand = this.commandRegistry.get(
       'copy-node'
     ) as CopyNodeCommand<T>;

libs/app-canvas/src/app/command-handlers/register-commands.ts

@@ -26,7 +26,7 @@ export const registerCommands = <T extends BaseNodeInfo>(
     new CopyNodeCommand<T>(commandContext)
   );
   commandContext.commandRegistry.set(
-    'paste-node',
+    PasteNodeCommand.commandName,
     new PasteNodeCommand<T>(commandContext)
   );
   commandContext.commandRegistry.set(

libs/app-canvas/src/app/flow-app.element.tsx

@@ -114,12 +114,14 @@ import {
   removeAllCompositions,
   resetRunIndex,
   run,
+  runNodeFromThumb,
   runPath,
   runPathForNodeConnectionPairs,
   runPathFromThumb,
   setRunCounterUpdateElement,
   setupCanvasNodeTaskRegistry,
 } from '@devhelpr/web-flow-executor';
+import { PasteNodeCommand } from './command-handlers/paste-node-command/paste-node-command';
 
 export class CodeFlowWebAppCanvas {
   appRootSelector?: string;
@@ -800,6 +802,7 @@ export class FlowAppElement extends AppElement<NodeInfo> {
               getNodeTaskFactory,
               commandRegistry: this.commandRegistry,
               setupTasksInDropdown,
+              onBeforeExecuteCommand: this.onBeforeExecuteCommand,
             });
             this.clearCanvas();
           }
@@ -2139,4 +2142,53 @@ export class FlowAppElement extends AppElement<NodeInfo> {
       );
     }
   };
+
+  onBeforeExecuteCommand = (
+    command: string,
+    _parameter1: any,
+    _parameter2: any
+  ) => {
+    // parameter1 is the nodeType
+    // parameter2 is the id of a selected node
+    if (command === PasteNodeCommand.commandName) {
+      const selectedNode = getSelectedNode();
+      if (selectedNode) {
+        const node = this.canvasApp?.elements.get(
+          selectedNode.id
+        ) as IConnectionNodeComponent<NodeInfo>;
+        if (
+          node &&
+          node.nodeType === NodeType.Connection &&
+          node.endNode &&
+          node.startNodeThumb &&
+          this.canvasApp
+        ) {
+          // Copy & paste clipboard to connection and trigger connection
+
+          const canvasApp = this.canvasApp;
+          const endNode = node.endNode;
+          const startNodeThumb = node.startNodeThumb;
+          navigator.clipboard.readText().then((text) => {
+            console.log('clipboard', text);
+            if (text) {
+              runNodeFromThumb(
+                startNodeThumb,
+                canvasApp,
+                () => {
+                  //
+                },
+                text,
+                endNode,
+                undefined,
+                undefined,
+                this.createRunCounterContext(true, false)
+              );
+            }
+          });
+          return false;
+        }
+      }
+    }
+    return true;
+  };
 }