observe variables now returns a promise and set-variables waits for it before continueing

Author: devhelpr

libs/visual-programming-system/src/canvas-app/flow-core.ts

@@ -71,7 +71,7 @@ export interface IFlowCore {
     scopeId?: string,
     runCounter?: any,
     isInitializing?: boolean
-  ) => boolean;
+  ) => Promise<boolean>;
 
   getVariables: (scopeId?: string) => Record<string, any>;
 
@@ -88,7 +88,7 @@ export interface IFlowCore {
   observeVariable: (
     nodeId: string,
     variableName: string,
-    updated: (data: any, runCounter?: any) => void
+    updated: (data: any, runCounter?: any) => Promise<void>
   ) => void;
 
   removeObserveVariable: (nodeId: string, variableName: string) => void;
@@ -138,7 +138,7 @@ export class FlowCore implements IFlowCore {
   > = {};
   protected variableObservers: Map<
     string,
-    Map<string, (data: any, runCounter?: any) => void>
+    Map<string, (data: any, runCounter?: any) => Promise<void>>
   > = new Map();
   protected commandHandlers: Record<string, ICommandHandler> = {};
   protected nodeSetStateHandlers: Record<string, SetNodeStatedHandler> = {};
@@ -262,28 +262,40 @@ export class FlowCore implements IFlowCore {
     runCounter?: any,
     isInitializing?: boolean
   ) => {
-    if (scopeId && this.tempVariables[scopeId][variableName]) {
-      this.tempVariables[scopeId][variableName] = data;
-    } else if (variableName && this.variables[variableName]) {
-      const result = this.variables[variableName].setData(data, scopeId);
-      if (!result) {
-        return false;
-      }
-      if (isInitializing) {
-        return true;
-      }
-      const dataToObserver = this.variables[variableName].getData(
-        undefined,
-        scopeId
-      );
-      const map = this.variableObservers.get(`${variableName}`);
-      if (map) {
-        map.forEach((observer) => {
-          observer(dataToObserver, runCounter);
-        });
+    return new Promise<boolean>((resolve) => {
+      if (scopeId && this.tempVariables[scopeId][variableName]) {
+        this.tempVariables[scopeId][variableName] = data;
+      } else if (variableName && this.variables[variableName]) {
+        const result = this.variables[variableName].setData(data, scopeId);
+        if (!result) {
+          resolve(false);
+          return;
+        }
+        if (isInitializing) {
+          resolve(true);
+          return;
+        }
+        const dataToObserver = this.variables[variableName].getData(
+          undefined,
+          scopeId
+        );
+        const map = this.variableObservers.get(`${variableName}`);
+        if (map) {
+          const observePromises: Promise<void>[] = [];
+          map.forEach((observer) => {
+            observePromises.push(
+              observer(dataToObserver, runCounter) as unknown as Promise<void>
+            );
+          });
+          Promise.all(observePromises).then(() => {
+            resolve(true);
+          });
+
+          return;
+        }
       }
-    }
-    return true;
+      resolve(true);
+    });
   };
 
   getVariables = (scopeId?: string) => {
@@ -326,7 +338,7 @@ export class FlowCore implements IFlowCore {
   observeVariable = (
     nodeId: string,
     variableName: string,
-    updated: (data: any, runCounter?: any) => void
+    updated: (data: any, runCounter?: any) => Promise<void>
   ) => {
     let map = this.variableObservers.get(`${variableName}`);
     if (!map) {

libs/web-flow-executor/src/nodes/observe-variable.ts

@@ -79,47 +79,49 @@ export const observeVariable = (updated: () => void): NodeTask<NodeInfo> => {
         node.id,
         variableName,
         (value, runCounter?: any) => {
-          if (timeout) {
-            clearTimeout(timeout);
-            timeout = undefined;
-          }
-          if (componentWrapper && componentWrapper?.domElement) {
-            (componentWrapper.domElement as HTMLElement).classList.remove(
-              'border-transparent'
-            );
-          }
-          if (componentWrapper && componentWrapper?.domElement) {
-            (componentWrapper.domElement as HTMLElement).classList.add(
-              'border-white'
-            );
-          }
-          timeout = setTimeout(() => {
+          return new Promise<void>((resolve) => {
+            if (timeout) {
+              clearTimeout(timeout);
+              timeout = undefined;
+            }
             if (componentWrapper && componentWrapper?.domElement) {
               (componentWrapper.domElement as HTMLElement).classList.remove(
-                'border-white'
+                'border-transparent'
               );
+            }
+            if (componentWrapper && componentWrapper?.domElement) {
               (componentWrapper.domElement as HTMLElement).classList.add(
-                'border-transparent'
+                'border-white'
               );
             }
-          }, 250);
+            timeout = setTimeout(() => {
+              if (componentWrapper && componentWrapper?.domElement) {
+                (componentWrapper.domElement as HTMLElement).classList.remove(
+                  'border-white'
+                );
+                (componentWrapper.domElement as HTMLElement).classList.add(
+                  'border-transparent'
+                );
+              }
+            }, 250);
 
-          if (canvasAppInstance) {
-            runNode(
-              node,
-              canvasAppInstance,
-              (_input) => {
-                //
-              },
-              value,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              runCounter
-            );
-          }
+            if (canvasAppInstance) {
+              runNode(
+                node,
+                canvasAppInstance,
+                (_input) => {
+                  resolve();
+                },
+                value,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                runCounter
+              );
+            }
+          });
         }
       );
     }

libs/web-flow-executor/src/nodes/set-variable.ts

@@ -9,6 +9,7 @@ import {
   ThumbConnectionType,
   ThumbType,
   visualNodeFactory,
+  IComputeResult,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '../types/node-info';
 import { RunCounter } from '../follow-path/run-counter';
@@ -25,34 +26,46 @@ export const setVariable: NodeTaskFactory<NodeInfo> = (
   const initializeCompute = () => {
     return;
   };
-  const compute = (
+  const computeAsync = (
     input: string,
     _loopIndex?: number,
     _payload?: any,
     _thumbName?: string,
     scopeId?: string,
     runCounter?: RunCounter
   ) => {
-    if (contextInstance) {
-      const variableName = node?.nodeInfo?.formValues?.[fieldName] ?? '';
-      if (variableName) {
-        if (
-          !contextInstance.setVariable(variableName, input, scopeId, runCounter)
-        ) {
-          return {
-            result: input,
-            output: input,
-            followPath: undefined,
-            stop: true,
-          };
+    return new Promise<IComputeResult>((resolve) => {
+      if (contextInstance) {
+        const variableName = node?.nodeInfo?.formValues?.[fieldName] ?? '';
+        if (variableName) {
+          contextInstance
+            .setVariable(variableName, input, scopeId, runCounter)
+            .then((result) => {
+              if (result) {
+                resolve({
+                  result: input,
+                  output: input,
+                  followPath: undefined,
+                });
+              } else {
+                resolve({
+                  result: input,
+                  output: input,
+                  followPath: undefined,
+                  stop: true,
+                });
+              }
+            });
+
+          return;
         }
       }
-    }
-    return {
-      result: input,
-      output: input,
-      followPath: undefined,
-    };
+      resolve({
+        result: input,
+        output: input,
+        followPath: undefined,
+      });
+    });
   };
 
   const getDependencies = (): { startNodeId: string; endNodeId: string }[] => {
@@ -75,7 +88,7 @@ export const setVariable: NodeTaskFactory<NodeInfo> = (
     'Set variable',
     'flow-canvas',
     'variableName',
-    compute,
+    computeAsync,
     initializeCompute,
     false,
     200,
@@ -133,6 +146,8 @@ export const setVariable: NodeTaskFactory<NodeInfo> = (
       category: 'variables',
       backgroundColorClassName:
         theme?.referenceVariableBackgroundColorClassName,
-    }
+    },
+    undefined,
+    true
   );
 };