@processmaker/modeler 1.39.19 → 1.39.21

package/package.json

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

package/src/components/crown/crownButtons/crownColorDropdown.vue

@@ -137,6 +137,20 @@ export default {
       store.commit('updateNodeProp', { node: this.node, key: 'color', value: color });
       Vue.set(this.node.definition, 'color', color);
       this.$emit('save-state');
+      
+      const properties = {
+        id: this.node.definition.id,
+        properties: {
+          color: this.node.definition.color,
+          x: this.node.diagram.bounds.x,
+          y: this.node.diagram.bounds.y,
+          height: this.node.diagram.bounds.height,
+          width: this.node.diagram.bounds.width,
+          type: this.node.type,
+          id: this.node.definition.id,
+        },
+      };
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [properties]);
     },
     resetNodeColor() {
       store.commit('updateNodeProp', { node: this.node, key: 'color', value: undefined });

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',
@@ -1136,10 +1154,16 @@ export default {
             type: node.type,
             id: node.definition.id,
             isAddingLaneAbove: true,
+            color: node.color,
           };
           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)) {
@@ -1148,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);
           }
         }
       }
@@ -1281,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() => {
@@ -1727,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/components/modeler/Selection.vue

@@ -604,6 +604,7 @@ export default {
                 y: shape.model.get('position').y,
                 height: shape.model.get('size').height,
                 width: shape.model.get('size').width,
+                color: shape.model.get('color'),
               },
             };
             if (node?.pool?.component) {
@@ -624,6 +625,7 @@ export default {
             y: model.get('position').y,
             height: model.get('size').height,
             width: model.get('size').width,
+            color: model.get('color'),
           },
         });
       });

package/src/multiplayer/multiplayer.js

@@ -3,7 +3,7 @@ import * as Y from 'yjs';
 import { getNodeIdGenerator } from '../NodeIdGenerator';
 import { getDefaultAnchorPoint } from '@/portsUtils';
 import Room from './room';
-
+import store from '@/store';
 export default class Multiplayer {
   clientIO = null;
   yDoc = null;
@@ -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) {
@@ -229,6 +259,7 @@ export default class Multiplayer {
       clientY,
       control: { type: updatedNode.type },
       nodeThatWillBeReplaced: node,
+      color: node.color,
       id: updatedNode.id,
     };
 
@@ -292,6 +323,10 @@ export default class Multiplayer {
         data.height,
       );
       element.set('position', { x: data.x, y: data.y });
+
+      const node = this.getNodeById(data.id);
+      store.commit('updateNodeProp', { node, key: 'color', value: data.color });
+
       // Trigger a rendering of the element on the paper
       await paper.findViewByModel(element).update();
       // validate if the parent pool was updated
@@ -310,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();
   }
 
@@ -333,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 });
       });
     });
   }