@processmaker/modeler 1.39.20 → 1.39.22

package/package.json

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

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

@@ -90,6 +90,7 @@ export default {
 
       const node = new Node(nodeType, definition, diagram);
       node.pool = this.node.pool;
+      node.fromCrown = true;
 
       store.commit('highlightNode', node);
 

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

@@ -137,7 +137,7 @@ 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: {
@@ -148,6 +148,7 @@ export default {
           width: this.node.diagram.bounds.width,
           type: this.node.type,
           id: this.node.definition.id,
+          attachedToRefId: this.node.definition.get('attachedToRef')?.id,
         },
       };
       window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [properties]);

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)) {
@@ -1076,7 +1094,6 @@ export default {
       diagram.bounds.y = y;
 
       const newNode = this.createNode(control.type, definition, diagram);
-
       if (newNode.isBpmnType('bpmn:BoundaryEvent')) {
         this.setShapeCenterUnderCursor(diagram);
       }
@@ -1112,16 +1129,20 @@ 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',
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-association',
         'processmaker-modeler-data-input-association',
-        'processmaker-modeler-data-output-association',
+        'processmaker-modeler-data-input-association',
+        'processmaker-modeler-boundary-timer-event',
+        'processmaker-modeler-boundary-error-event',
+        'processmaker-modeler-boundary-signal-event',
+        'processmaker-modeler-boundary-conditional-even',
+        'processmaker-modeler-boundary-message-event',
       ];
-
       if (!this.isMultiplayer) {
         return;
       }
@@ -1141,6 +1162,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 +1175,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 +1314,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 +1758,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

@@ -35,6 +35,12 @@ import { id as associationId } from '@/components/nodes/association/associationC
 import { id as messageFlowId } from '@/components/nodes/messageFlow/config';
 import { id as dataOutputAssociationFlowId } from '@/components/nodes/dataOutputAssociation/config';
 import { id as dataInputAssociationFlowId } from '@/components/nodes/dataInputAssociation/config';
+import { id as boundaryErrorEventId } from '@/components/nodes/boundaryErrorEvent';
+import { id as boundaryConditionalEventId } from '@/components/nodes/boundaryConditionalEvent';
+import { id as boundaryEscalationEventId } from '@/components/nodes/boundaryEscalationEvent';
+import { id as boundaryMessageEventId } from '@/components/nodes/boundaryMessageEvent';
+import { id as boundarySignalEventId } from '@/components/nodes/boundarySignalEvent';
+import { id as boundaryTimerEventId } from '@/components/nodes/boundaryTimerEvent';
 import { labelWidth, poolPadding } from '../nodes/pool/poolSizes';
 import { invalidNodeColor, poolColor } from '@/components/nodeColors';
 
@@ -587,7 +593,6 @@ export default {
       const shapesToNotTranslate = [
         'PoolLane',
         'standard.Link',
-        'processmaker.components.nodes.boundaryEvent.Shape',
       ];
 
       shapes.filter(shape => !shapesToNotTranslate.includes(shape.model.get('type')))
@@ -604,6 +609,7 @@ export default {
                 y: shape.model.get('position').y,
                 height: shape.model.get('size').height,
                 width: shape.model.get('size').width,
+                attachedToRefId: shape.model.component.node.definition.get('attachedToRef')?.id ?? null,
                 color: shape.model.get('color'),
               },
             };
@@ -612,9 +618,43 @@ export default {
             }
             changed.push(defaultData);
           }
+          const boundariesChanges = this.getBoundariesChangesForShape(shape);
+          changed = changed.concat(boundariesChanges);
         });
+        
       return changed;
     },
+    /**
+     * Get properties for each boundary inside a shape
+     */
+    getBoundariesChangesForShape(shape) {
+      let boundariesChanged = [];
+      const boundaryEventTypes = [
+        boundaryErrorEventId,
+        boundaryConditionalEventId,
+        boundaryEscalationEventId,
+        boundaryMessageEventId,
+        boundarySignalEventId,
+        boundaryTimerEventId,
+      ];
+      const boundaryNodes = store.getters.nodes.filter(node => boundaryEventTypes.includes(node.type));
+      boundaryNodes.forEach(boundaryNode => {
+        if (boundaryNode.definition.attachedToRef.id === shape.model.component.node.definition.id) {
+          boundariesChanged.push({
+            id: boundaryNode.definition.id,
+            properties: {
+              x: boundaryNode.diagram.bounds.x,
+              y: boundaryNode.diagram.bounds.y,
+              height: boundaryNode.diagram.bounds.height,
+              width: boundaryNode.diagram.bounds.width,
+              attachedToRefId: boundaryNode.definition.get('attachedToRef')?.id ?? null,
+              color: boundaryNode.definition.get('color') ?? null,
+            },
+          });
+        }
+      });
+      return boundariesChanged;
+    },
     getContainerProperties(children) {
       const changed = [];
       children.forEach(model => {

package/src/components/nodes/boundaryEvent/boundaryEvent.vue

@@ -202,6 +202,26 @@ export default {
 
       this.invalidTargetElement = targetElement;
     },
+    addMultiplayerBoundaryEvent() {
+      const control = {
+        bpmnType: this.node.diagram.$type,
+        id: this.node.diagram.id,
+        type: this.node.type,
+        attachedToRef: this.node.definition.get('attachedToRef'),
+      };
+
+      window.ProcessMaker.EventBus.$emit('multiplayer-addBoundaryEvent', {
+        x: this.node.diagram.bounds.x,
+        y: this.node.diagram.bounds.y,
+        height: this.node.diagram.bounds.height,
+        width: this.node.diagram.bounds.width,
+        attachedToRefId: this.node.definition.get('attachedToRef')?.id,
+        control,
+        type: this.node.type,
+        id: this.node.definition.id,
+        color: this.node.definition.get('color'),
+      });
+    },
   },
   async mounted() {
     this.shape = new EventShape();
@@ -214,6 +234,10 @@ export default {
     const task = this.getTaskUnderShape();
     this.attachBoundaryEventToTask(task);
     this.updateShapePosition(task);
+    
+    if (this.node.fromCrown) {
+      this.addMultiplayerBoundaryEvent();  
+    }
   },
 };
 </script>

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 => {
@@ -120,7 +150,11 @@ export default class Multiplayer {
     });
 
     window.ProcessMaker.EventBus.$on('multiplayer-addFlow', ( data ) => {
-      this.addFlow(data);
+      this.addCommonElement(data);
+    });
+
+    window.ProcessMaker.EventBus.$on('multiplayer-addBoundaryEvent', ( data ) => {
+      this.addCommonElement(data);
     });
 
     window.ProcessMaker.EventBus.$on('multiplayer-addLanes', ( lanes ) => {
@@ -135,7 +169,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) {
@@ -216,7 +250,6 @@ export default class Multiplayer {
 
     // Encode the state as an update and send it to the server
     const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
-
     this.clientIO.emit('updateElement', { updateDoc: stateUpdate, isReplaced: true });
   }
   replaceShape(updatedNode) {
@@ -297,6 +330,11 @@ export default class Multiplayer {
       const node = this.getNodeById(data.id);
       store.commit('updateNodeProp', { node, key: 'color', value: data.color });
 
+      // boundary type
+      if (element.component.node.definition.$type === 'bpmn:BoundaryEvent') {
+        this.attachBoundaryEventToNode(element, data);
+      }
+
       // Trigger a rendering of the element on the paper
       await paper.findViewByModel(element).update();
       // validate if the parent pool was updated
@@ -307,18 +345,36 @@ export default class Multiplayer {
       }
     }
   }
+  attachBoundaryEventToNode(element, data) {
+    const node = this.getNodeById(data.attachedToRefId);
+
+    // Find previous attached task
+    const previousAttachedTask = element.getParentCell();
+
+    // Find new attached task
+    const newAttachedTask = this.modeler.getElementByNodeId(data.attachedToRefId);
+
+    if (previousAttachedTask) {
+      previousAttachedTask.unembed(element);
+    }
+
+    if (newAttachedTask) {
+      newAttachedTask.embed(element);
+    }
 
-  addFlow(data) {
+    element.component.node.definition.set('attachedToRef', node.definition);
+  }
+  addCommonElement(data) {
+    // Add a new flow / boundary event to the shared array
     const yMapNested = new Y.Map();
     this.doTransact(yMapNested, data);
     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', stateUpdate);
+    this.clientIO.emit('createElement', { updateDoc: stateUpdate });
     this.#nodeIdGenerator.updateCounters();
   }
-
   addLaneNodes(lanes) {
     const pool = this.getPool(lanes);
     window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [{
@@ -338,7 +394,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 });
       });
     });
   }