@processmaker/modeler 1.39.20 → 1.39.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.20",
+  "version": "1.39.21",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/components/modeler/Modeler.vue

@@ -952,7 +952,25 @@ export default {
     },
     async createNodeAsync(type, definition, diagram) {
       const node =  this.createNode(type, definition, diagram);
+      if (!this.isMultiplayer) {
+        store.commit('addNode', node);
+      }
+      else {
+        this.loadNodeForMultiplayer(node);
+      }
+    },
+    async loadNodeForMultiplayer(node) {
+      if (node.type === 'processmaker-modeler-lane') {
+        await this.addNode(node, node.definition.id, true);
+        this.nodeIdGenerator.updateCounters();
+        await this.$nextTick();
+        await this.paperManager.awaitScheduledUpdates();
+        window.ProcessMaker.EventBus.$emit('multiplayer-addLanes', [node]);
+        return;
+      }
+      this.multiplayerHook(node, false);
       store.commit('addNode', node);
+      this.poolTarget = null;
     },
     createNode(type, definition, diagram) {
       if (Node.isTimerType(type)) {
@@ -1112,7 +1130,7 @@ export default {
       const view = newNodeComponent.shapeView;
       await this.$refs.selector.selectElement(view);
     },
-    multiplayerHook(node, fromClient) {
+    multiplayerHook(node, fromClient, isProcessRequested = false) {
       const blackList = [
         'processmaker-modeler-lane',
         'processmaker-modeler-generic-flow',
@@ -1141,6 +1159,11 @@ export default {
           if (node?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;
           }
+
+          if (isProcessRequested) {
+            return defaultData;
+          }
+
           window.ProcessMaker.EventBus.$emit('multiplayer-addNode', defaultData);
         }
         if (this.flowTypes.includes(node.type)) {
@@ -1149,17 +1172,23 @@ export default {
 
           if (node.type === 'processmaker-modeler-data-input-association') {
             sourceRefId = Array.isArray(node.definition.sourceRef) && node.definition.sourceRef[0]?.id;
-            targetRefId = node.definition.targetRef?.$parent?.$parent.get('id');
+            targetRefId = node.definition.targetRef?.$parent?.$parent?.get('id');
           }
 
           if (sourceRefId && targetRefId) {
-            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
+            const flowData = {
               id: node.definition.id,
               type: node.type,
               sourceRefId,
               targetRefId,
               waypoint: node.diagram.waypoint,
-            });
+            };
+
+            if (isProcessRequested) {
+              return flowData;
+            }
+
+            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', flowData);
           }
         }
       }
@@ -1282,36 +1311,34 @@ export default {
             nodeThatWillBeReplaced: node,
           };
 
-          if (this.isMultiplayer) {
-            // Get all node types
-            const nodeTypes = nodeTypesStore.getters.getNodeTypes;
-            // Get the new control
-            const newControl = nodeTypes.flatMap(nodeType => {
-              return nodeType.items?.filter(item => item.type === typeToReplaceWith);
-            }).filter(Boolean);
-            // If the new control is found, emit event to server to replace node
-            if (newControl.length === 1) {
-              window.ProcessMaker.EventBus.$emit('multiplayer-replaceNode', { nodeData, newControl: newControl[0].type });
-            }
-          } else {
-            await this.replaceNodeProcedure(nodeData, true);
-          }
+          await this.replaceNodeProcedure(nodeData);
         });
       });
     },
     async replaceNodeProcedure(data, isReplaced = false) {
-      if (isReplaced) {
-        // Get the clientX and clientY from the node that will be replaced
-        const { x: clientX, y: clientY } = this.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds);
-        data.clientX = clientX;
-        data.clientY = clientY;
-      }
+      // Get the clientX and clientY from the node that will be replaced
+      const { x: clientX, y: clientY } = this.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds);
+      data.clientX = clientX;
+      data.clientY = clientY;
 
       const newNode = await this.handleDrop(data);
 
       await this.removeNode(data.nodeThatWillBeReplaced, { removeRelationships: false, isReplaced });
       this.highlightNode(newNode);
       this.selectNewNode(newNode);
+
+      if (this.isMultiplayer && !isReplaced) {
+        // Get all node types
+        const nodeTypes = nodeTypesStore.getters.getNodeTypes;
+        // Get the new control
+        const newControl = nodeTypes.flatMap(nodeType => {
+          return nodeType.items?.filter(item => item.type === data.typeToReplaceWith);
+        }).filter(Boolean);
+        // If the new control is found, emit event to server to replace node
+        if (newControl.length === 1) {
+          window.ProcessMaker.EventBus.$emit('multiplayer-replaceNode', { data, newControl: newControl[0].type });
+        }
+      }
     },
     replaceAiNode({ node, typeToReplaceWith, assetId, assetName, redirectTo }) {
       this.performSingleUndoRedoTransaction(async() => {
@@ -1728,6 +1755,7 @@ export default {
         try {
           const multiplayer = new Multiplayer(this);
           multiplayer.init();
+          this.multiplayer = multiplayer;
         } catch (error) {
           console.warn('Could not initialize multiplayer', error);
         }

package/src/multiplayer/multiplayer.js

@@ -66,6 +66,26 @@ export default class Multiplayer {
       this.modeler.enableMultiplayer(payload.isMultiplayer);
     });
 
+    this.clientIO.on('requestProcess', (payload) => {
+      const { firstClient, clientId } = payload;
+
+      // Check if the current client is the first client
+      if (firstClient.id === this.clientIO.id) {
+        // Get the process definition
+        const nodes = this.modeler.nodes.map((node) => this.modeler.multiplayerHook(node, false, true));
+
+        nodes.forEach((node) => {
+          const yMapNested = new Y.Map();
+          this.doTransact(yMapNested, node);
+          this.yArray.push([yMapNested]);
+          // Encode the state as an update and send it to the server
+          const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
+          // Send the update to the web socket server
+          this.clientIO.emit('createElement', { updateDoc: stateUpdate, clientId });
+        });
+      }
+    });
+
     // Listen for updates when a new element is added
     this.clientIO.on('createElement', async(payload) => {
       // Create the new element in the process
@@ -74,6 +94,16 @@ export default class Multiplayer {
       Y.applyUpdate(this.yDoc, new Uint8Array(payload.updateDoc));
     });
 
+    // Listen for updates when a new element is requested
+    this.clientIO.on('createRequestedElement', async(payload) => {
+      if (payload.clientId === this.clientIO.id) {
+        // Create the new element in the process
+        await this.createRemoteShape(payload.changes);
+        // Add the new element to the shared array
+        Y.applyUpdate(this.yDoc, new Uint8Array(payload.updateDoc));
+      }
+    });
+
     // Listen for updates when an element is removed
     this.clientIO.on('removeElement', (payload) => {
       payload.deletedNodes.forEach(nodeId => {
@@ -135,7 +165,7 @@ export default class Multiplayer {
     // Encode the state as an update and send it to the server
     const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
     // Send the update to the web socket server
-    this.clientIO.emit('createElement', stateUpdate);
+    this.clientIO.emit('createElement', { updateDoc: stateUpdate });
   }
   createShape(value){
     if (this.modeler.nodeRegistry[value.type] && this.modeler.nodeRegistry[value.type].multiplayerClient) {
@@ -315,7 +345,7 @@ export default class Multiplayer {
     // Encode the state as an update and send it to the server
     const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
     // Send the update to the web socket server
-    this.clientIO.emit('createElement', stateUpdate);
+    this.clientIO.emit('createElement', { updateDoc: stateUpdate });
     this.#nodeIdGenerator.updateCounters();
   }
 
@@ -338,7 +368,7 @@ export default class Multiplayer {
         this.doTransact(yMapNested, data);
         this.yArray.push([yMapNested]);
         const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
-        this.clientIO.emit('createElement', stateUpdate);
+        this.clientIO.emit('createElement', { updateDoc: stateUpdate });
       });
     });
   }