@processmaker/modeler 1.39.20 → 1.39.21

package/dist/modeler.umd.js

@@ -47786,10 +47786,10 @@ var ValidationStatus_component = normalizeComponent(
 )
 
 /* harmony default export */ var ValidationStatus = (ValidationStatus_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=83a477c8&
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=5fd6d55f&
 
 
-var Modelervue_type_template_id_83a477c8_render = function render() {
+var Modelervue_type_template_id_5fd6d55f_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -48008,9 +48008,9 @@ var Modelervue_type_template_id_83a477c8_render = function render() {
     }
   }) : _vm._e()], 2)], 1);
 };
-var Modelervue_type_template_id_83a477c8_staticRenderFns = [];
+var Modelervue_type_template_id_5fd6d55f_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=83a477c8&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=5fd6d55f&
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/nodes/boundaryEvent/boundaryEvent.vue?vue&type=template&id=2979ecac&
 var boundaryEventvue_type_template_id_2979ecac_render = function render() {
@@ -75679,6 +75679,30 @@ var Multiplayer = /*#__PURE__*/function () {
         _this.modeler.removePlayer(payload.clientId);
         _this.modeler.enableMultiplayer(payload.isMultiplayer);
       });
+      this.clientIO.on('requestProcess', function (payload) {
+        var firstClient = payload.firstClient,
+          clientId = payload.clientId;
+
+        // Check if the current client is the first client
+        if (firstClient.id === _this.clientIO.id) {
+          // Get the process definition
+          var nodes = _this.modeler.nodes.map(function (node) {
+            return _this.modeler.multiplayerHook(node, false, true);
+          });
+          nodes.forEach(function (node) {
+            var yMapNested = new YMap();
+            _this.doTransact(yMapNested, node);
+            _this.yArray.push([yMapNested]);
+            // Encode the state as an update and send it to the server
+            var stateUpdate = encodeStateAsUpdate(_this.yDoc);
+            // Send the update to the web socket server
+            _this.clientIO.emit('createElement', {
+              updateDoc: stateUpdate,
+              clientId: clientId
+            });
+          });
+        }
+      });
 
       // Listen for updates when a new element is added
       this.clientIO.on('createElement', /*#__PURE__*/function () {
@@ -75702,6 +75726,32 @@ var Multiplayer = /*#__PURE__*/function () {
         };
       }());
 
+      // Listen for updates when a new element is requested
+      this.clientIO.on('createRequestedElement', /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(payload) {
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(payload.clientId === _this.clientIO.id)) {
+                  _context2.next = 4;
+                  break;
+                }
+                _context2.next = 3;
+                return _this.createRemoteShape(payload.changes);
+              case 3:
+                // Add the new element to the shared array
+                applyUpdate(_this.yDoc, new Uint8Array(payload.updateDoc));
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x2) {
+          return _ref2.apply(this, arguments);
+        };
+      }());
+
       // Listen for updates when an element is removed
       this.clientIO.on('removeElement', function (payload) {
         payload.deletedNodes.forEach(function (nodeId) {
@@ -75741,9 +75791,9 @@ var Multiplayer = /*#__PURE__*/function () {
       window.ProcessMaker.EventBus.$on('multiplayer-updateNodes', function (data) {
         _this.updateNodes(data);
       });
-      window.ProcessMaker.EventBus.$on('multiplayer-replaceNode', function (_ref2) {
-        var nodeData = _ref2.nodeData,
-          newControl = _ref2.newControl;
+      window.ProcessMaker.EventBus.$on('multiplayer-replaceNode', function (_ref3) {
+        var nodeData = _ref3.nodeData,
+          newControl = _ref3.newControl;
         _this.replaceNode(nodeData, newControl);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addFlow', function (data) {
@@ -75763,7 +75813,9 @@ var Multiplayer = /*#__PURE__*/function () {
       // Encode the state as an update and send it to the server
       var stateUpdate = encodeStateAsUpdate(this.yDoc);
       // Send the update to the web socket server
-      this.clientIO.emit('createElement', stateUpdate);
+      this.clientIO.emit('createElement', {
+        updateDoc: stateUpdate
+      });
     }
   }, {
     key: "createShape",
@@ -75926,17 +75978,17 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateShapes",
     value: function () {
-      var _updateShapes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {
+      var _updateShapes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {
         var _this4 = this;
         var paper, element, newPool, sourceElem, targetElem, waypoint, startWaypoint, endWaypoint, newWaypoint, node;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               paper = this.modeler.paper;
               element = this.modeler.getElementByNodeId(data.id);
               newPool = this.modeler.getElementByNodeId(data.poolId);
               if (!this.modeler.flowTypes.includes(data.type)) {
-                _context2.next = 15;
+                _context3.next = 15;
                 break;
               }
               // Update the element's waypoints
@@ -75970,7 +76022,7 @@ var Multiplayer = /*#__PURE__*/function () {
                   name: 'boundary'
                 }
               });
-              _context2.next = 26;
+              _context3.next = 26;
               break;
             case 15:
               // Update the element's position attribute
@@ -75988,13 +76040,13 @@ var Multiplayer = /*#__PURE__*/function () {
               });
 
               // Trigger a rendering of the element on the paper
-              _context2.next = 21;
+              _context3.next = 21;
               return paper.findViewByModel(element).update();
             case 21:
-              _context2.next = 23;
+              _context3.next = 23;
               return element.component.$nextTick();
             case 23:
-              _context2.next = 25;
+              _context3.next = 25;
               return this.modeler.paperManager.awaitScheduledUpdates();
             case 25:
               if (newPool && element.component.node.pool && element.component.node.pool.component.id !== data.poolId) {
@@ -76002,11 +76054,11 @@ var Multiplayer = /*#__PURE__*/function () {
               }
             case 26:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
-      function updateShapes(_x2) {
+      function updateShapes(_x3) {
         return _updateShapes.apply(this, arguments);
       }
       return updateShapes;
@@ -76020,7 +76072,9 @@ var Multiplayer = /*#__PURE__*/function () {
       // Encode the state as an update and send it to the server
       var stateUpdate = encodeStateAsUpdate(this.yDoc);
       // Send the update to the web socket server
-      this.clientIO.emit('createElement', stateUpdate);
+      this.clientIO.emit('createElement', {
+        updateDoc: stateUpdate
+      });
       _classPrivateFieldGet(this, _nodeIdGenerator).updateCounters();
     }
   }, {
@@ -76045,7 +76099,9 @@ var Multiplayer = /*#__PURE__*/function () {
           _this5.doTransact(yMapNested, data);
           _this5.yArray.push([yMapNested]);
           var stateUpdate = encodeStateAsUpdate(_this5.yDoc);
-          _this5.clientIO.emit('createElement', stateUpdate);
+          _this5.clientIO.emit('createElement', {
+            updateDoc: stateUpdate
+          });
         });
       });
     }
@@ -77066,7 +77122,11 @@ var Multiplayer = /*#__PURE__*/function () {
           while (1) switch (_context8.prev = _context8.next) {
             case 0:
               node = _this21.createNode(type, definition, diagram);
-              store.commit('addNode', node);
+              if (!_this21.isMultiplayer) {
+                store.commit('addNode', node);
+              } else {
+                _this21.loadNodeForMultiplayer(node);
+              }
             case 2:
             case "end":
               return _context8.stop();
@@ -77074,6 +77134,39 @@ var Multiplayer = /*#__PURE__*/function () {
         }, _callee8);
       }))();
     },
+    loadNodeForMultiplayer: function loadNodeForMultiplayer(node) {
+      var _this22 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+        return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.next) {
+            case 0:
+              if (!(node.type === 'processmaker-modeler-lane')) {
+                _context9.next = 10;
+                break;
+              }
+              _context9.next = 3;
+              return _this22.addNode(node, node.definition.id, true);
+            case 3:
+              _this22.nodeIdGenerator.updateCounters();
+              _context9.next = 6;
+              return _this22.$nextTick();
+            case 6:
+              _context9.next = 8;
+              return _this22.paperManager.awaitScheduledUpdates();
+            case 8:
+              window.ProcessMaker.EventBus.$emit('multiplayer-addLanes', [node]);
+              return _context9.abrupt("return");
+            case 10:
+              _this22.multiplayerHook(node, false);
+              store.commit('addNode', node);
+              _this22.poolTarget = null;
+            case 13:
+            case "end":
+              return _context9.stop();
+          }
+        }, _callee9);
+      }))();
+    },
     createNode: function createNode(type, definition, diagram) {
       if (Node.isTimerType(type)) {
         return new TimerEventNode(type, definition, diagram);
@@ -77092,95 +77185,95 @@ var Multiplayer = /*#__PURE__*/function () {
       return hasSource && hasTarget;
     },
     waitForCursorToChange: function waitForCursorToChange() {
-      var _this22 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+      var _this23 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
         var cursorWaitTime;
-        return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-          while (1) switch (_context9.prev = _context9.next) {
+        return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+          while (1) switch (_context10.prev = _context10.next) {
             case 0:
               cursorWaitTime = 300;
-              _context9.next = 3;
-              return _this22.$nextTick();
+              _context10.next = 3;
+              return _this23.$nextTick();
             case 3:
-              return _context9.abrupt("return", new Promise(function (resolve) {
+              return _context10.abrupt("return", new Promise(function (resolve) {
                 return setTimeout(resolve, cursorWaitTime);
               }));
             case 4:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
-        }, _callee9);
+        }, _callee10);
       }))();
     },
     renderPaper: function renderPaper() {
-      var _this23 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
-        return _regeneratorRuntime().wrap(function _callee11$(_context11) {
-          while (1) switch (_context11.prev = _context11.next) {
+      var _this24 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+        return _regeneratorRuntime().wrap(function _callee12$(_context12) {
+          while (1) switch (_context12.prev = _context12.next) {
             case 0:
-              _this23.isRendering = true;
-              _context11.next = 3;
-              return _this23.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-                return _regeneratorRuntime().wrap(function _callee10$(_context10) {
-                  while (1) switch (_context10.prev = _context10.next) {
+              _this24.isRendering = true;
+              _context12.next = 3;
+              return _this24.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
+                return _regeneratorRuntime().wrap(function _callee11$(_context11) {
+                  while (1) switch (_context11.prev = _context11.next) {
                     case 0:
-                      _context10.next = 2;
-                      return _this23.waitForCursorToChange();
+                      _context11.next = 2;
+                      return _this24.waitForCursorToChange();
                     case 2:
-                      _this23.parse();
-                      _this23.addPools();
-                      _this23.setUpDiagram();
+                      _this24.parse();
+                      _this24.addPools();
+                      _this24.setUpDiagram();
                     case 5:
                     case "end":
-                      return _context10.stop();
+                      return _context11.stop();
                   }
-                }, _callee10);
+                }, _callee11);
               })));
             case 3:
-              _context11.next = 5;
-              return _this23.paperManager.awaitScheduledUpdates();
+              _context12.next = 5;
+              return _this24.paperManager.awaitScheduledUpdates();
             case 5:
-              _this23.isRendering = false;
-              _this23.$emit('parsed');
+              _this24.isRendering = false;
+              _this24.$emit('parsed');
             case 7:
             case "end":
-              return _context11.stop();
+              return _context12.stop();
           }
-        }, _callee11);
+        }, _callee12);
       }))();
     },
     loadXML: function loadXML() {
       var _arguments3 = arguments,
-        _this24 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+        _this25 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
         var xml, emitChangeEvent;
-        return _regeneratorRuntime().wrap(function _callee12$(_context12) {
-          while (1) switch (_context12.prev = _context12.next) {
+        return _regeneratorRuntime().wrap(function _callee13$(_context13) {
+          while (1) switch (_context13.prev = _context13.next) {
             case 0:
               xml = _arguments3.length > 0 && _arguments3[0] !== undefined ? _arguments3[0] : null;
               emitChangeEvent = false;
               if (xml === null) {
-                xml = _this24.currentXML;
+                xml = _this25.currentXML;
                 emitChangeEvent = true;
               }
-              _context12.next = 5;
-              return _this24.xmlManager.getDefinitionsFromXml(xml);
+              _context13.next = 5;
+              return _this25.xmlManager.getDefinitionsFromXml(xml);
             case 5:
-              _this24.definitions = _context12.sent;
-              _this24.xmlManager.definitions = _this24.definitions;
-              _this24.nodeIdGenerator = getNodeIdGenerator(_this24.definitions);
+              _this25.definitions = _context13.sent;
+              _this25.xmlManager.definitions = _this25.definitions;
+              _this25.nodeIdGenerator = getNodeIdGenerator(_this25.definitions);
               store.commit('clearNodes');
-              _context12.next = 11;
-              return _this24.renderPaper();
+              _context13.next = 11;
+              return _this25.renderPaper();
             case 11:
               if (emitChangeEvent) {
                 window.ProcessMaker.EventBus.$emit('modeler-change');
               }
             case 12:
             case "end":
-              return _context12.stop();
+              return _context13.stop();
           }
-        }, _callee12);
+        }, _callee13);
       }))();
     },
     getBoundaryEvents: function getBoundaryEvents(process) {
@@ -77204,13 +77297,13 @@ var Multiplayer = /*#__PURE__*/function () {
       return boundaryEvent;
     },
     ensureCancelActivityIsAddedToBoundaryEvents: function ensureCancelActivityIsAddedToBoundaryEvents(process) {
-      var _this25 = this;
+      var _this26 = this;
       this.getBoundaryEvents(process).forEach(function (definition) {
-        var boundaryEvent = _this25.createBoundaryEvent(definition);
+        var boundaryEvent = _this26.createBoundaryEvent(definition);
         definition.get('outgoing').forEach(function (outgoing) {
           return outgoing.set('sourceRef', boundaryEvent);
         });
-        _this25.replaceDefinition(definition, boundaryEvent, process);
+        _this26.replaceDefinition(definition, boundaryEvent, process);
       });
     },
     replaceDefinition: function replaceDefinition(definition, boundaryEvent, process) {
@@ -77236,82 +77329,82 @@ var Multiplayer = /*#__PURE__*/function () {
       });
     },
     addRemoteNode: function addRemoteNode(data) {
-      var _this26 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+      var _this27 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
         var definition, diagram, newNode;
-        return _regeneratorRuntime().wrap(function _callee13$(_context13) {
-          while (1) switch (_context13.prev = _context13.next) {
+        return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+          while (1) switch (_context14.prev = _context14.next) {
             case 0:
-              definition = _this26.nodeRegistry[data.type].definition(_this26.moddle, _this26.$t);
-              diagram = _this26.nodeRegistry[data.type].diagram(_this26.moddle);
+              definition = _this27.nodeRegistry[data.type].definition(_this27.moddle, _this27.$t);
+              diagram = _this27.nodeRegistry[data.type].diagram(_this27.moddle);
               diagram.bounds.x = data.x;
               diagram.bounds.y = data.y;
-              newNode = _this26.createNode(data.type, definition, diagram);
-              _context13.next = 7;
-              return _this26.addNode(newNode, data.id, true);
+              newNode = _this27.createNode(data.type, definition, diagram);
+              _context14.next = 7;
+              return _this27.addNode(newNode, data.id, true);
             case 7:
-              _context13.next = 9;
-              return _this26.$nextTick();
+              _context14.next = 9;
+              return _this27.$nextTick();
             case 9:
-              _context13.next = 11;
-              return _this26.paperManager.awaitScheduledUpdates();
+              _context14.next = 11;
+              return _this27.paperManager.awaitScheduledUpdates();
             case 11:
-              if (_this26.autoValidate) {
-                _this26.validateBpmnDiagram();
+              if (_this27.autoValidate) {
+                _this27.validateBpmnDiagram();
               }
             case 12:
             case "end":
-              return _context13.stop();
+              return _context14.stop();
           }
-        }, _callee13);
+        }, _callee14);
       }))();
     },
     handleDrop: function handleDrop(data) {
-      var _this27 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
-        var clientX, clientY, control, nodeThatWillBeReplaced, definition, diagram, _this27$paperManager$, x, y, newNode, nodeMigrator;
-        return _regeneratorRuntime().wrap(function _callee14$(_context14) {
-          while (1) switch (_context14.prev = _context14.next) {
+      var _this28 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+        var clientX, clientY, control, nodeThatWillBeReplaced, definition, diagram, _this28$paperManager$, x, y, newNode, nodeMigrator;
+        return _regeneratorRuntime().wrap(function _callee15$(_context15) {
+          while (1) switch (_context15.prev = _context15.next) {
             case 0:
               clientX = data.clientX, clientY = data.clientY, control = data.control, nodeThatWillBeReplaced = data.nodeThatWillBeReplaced;
-              _this27.validateDropTarget({
+              _this28.validateDropTarget({
                 clientX: clientX,
                 clientY: clientY,
                 control: control
               });
-              if (_this27.allowDrop) {
-                _context14.next = 4;
+              if (_this28.allowDrop) {
+                _context15.next = 4;
                 break;
               }
-              return _context14.abrupt("return");
+              return _context15.abrupt("return");
             case 4:
-              definition = _this27.nodeRegistry[control.type].definition(_this27.moddle, _this27.$t);
-              diagram = _this27.nodeRegistry[control.type].diagram(_this27.moddle);
-              _this27$paperManager$ = _this27.paperManager.clientToGridPoint(clientX, clientY), x = _this27$paperManager$.x, y = _this27$paperManager$.y;
+              definition = _this28.nodeRegistry[control.type].definition(_this28.moddle, _this28.$t);
+              diagram = _this28.nodeRegistry[control.type].diagram(_this28.moddle);
+              _this28$paperManager$ = _this28.paperManager.clientToGridPoint(clientX, clientY), x = _this28$paperManager$.x, y = _this28$paperManager$.y;
               diagram.bounds.x = x;
               diagram.bounds.y = y;
-              newNode = _this27.createNode(control.type, definition, diagram);
+              newNode = _this28.createNode(control.type, definition, diagram);
               if (newNode.isBpmnType('bpmn:BoundaryEvent')) {
-                _this27.setShapeCenterUnderCursor(diagram);
+                _this28.setShapeCenterUnderCursor(diagram);
               }
-              _this27.highlightNode(newNode);
-              _context14.next = 14;
-              return _this27.addNode(newNode);
+              _this28.highlightNode(newNode);
+              _context15.next = 14;
+              return _this28.addNode(newNode);
             case 14:
               if (nodeThatWillBeReplaced) {
-                _context14.next = 16;
+                _context15.next = 16;
                 break;
               }
-              return _context14.abrupt("return");
+              return _context15.abrupt("return");
             case 16:
-              nodeMigrator = new NodeMigrator(nodeThatWillBeReplaced, definition, _this27.graph, newNode, _this27.processes, _this27.collaboration);
+              nodeMigrator = new NodeMigrator(nodeThatWillBeReplaced, definition, _this28.graph, newNode, _this28.processes, _this28.collaboration);
               nodeMigrator.migrate();
-              return _context14.abrupt("return", newNode);
+              return _context15.abrupt("return", newNode);
             case 19:
             case "end":
-              return _context14.stop();
+              return _context15.stop();
           }
-        }, _callee14);
+        }, _callee15);
       }))();
     },
     setShapeCenterUnderCursor: function setShapeCenterUnderCursor(diagram) {
@@ -77319,32 +77412,33 @@ var Multiplayer = /*#__PURE__*/function () {
       diagram.bounds.y -= diagram.bounds.height / 2;
     },
     selectNewNode: function selectNewNode(node) {
-      var _this28 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+      var _this29 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
         var newNodeComponent, view;
-        return _regeneratorRuntime().wrap(function _callee15$(_context15) {
-          while (1) switch (_context15.prev = _context15.next) {
+        return _regeneratorRuntime().wrap(function _callee16$(_context16) {
+          while (1) switch (_context16.prev = _context16.next) {
             case 0:
-              _context15.next = 2;
-              return _this28.$nextTick();
+              _context16.next = 2;
+              return _this29.$nextTick();
             case 2:
-              _context15.next = 4;
-              return _this28.paperManager.awaitScheduledUpdates();
+              _context16.next = 4;
+              return _this29.paperManager.awaitScheduledUpdates();
             case 4:
-              newNodeComponent = _this28.$refs.nodeComponent.find(function (component) {
+              newNodeComponent = _this29.$refs.nodeComponent.find(function (component) {
                 return component.node === node;
               });
               view = newNodeComponent.shapeView;
-              _context15.next = 8;
-              return _this28.$refs.selector.selectElement(view);
+              _context16.next = 8;
+              return _this29.$refs.selector.selectElement(view);
             case 8:
             case "end":
-              return _context15.stop();
+              return _context16.stop();
           }
-        }, _callee15);
+        }, _callee16);
       }))();
     },
     multiplayerHook: function multiplayerHook(node, fromClient) {
+      var isProcessRequested = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var 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'];
       if (!this.isMultiplayer) {
         return;
@@ -77365,6 +77459,9 @@ var Multiplayer = /*#__PURE__*/function () {
           if (node !== null && node !== void 0 && (_node$pool = node.pool) !== null && _node$pool !== void 0 && _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)) {
@@ -77372,218 +77469,222 @@ var Multiplayer = /*#__PURE__*/function () {
           var sourceRefId = (_node$definition$sour = node.definition.sourceRef) === null || _node$definition$sour === void 0 ? void 0 : _node$definition$sour.id;
           var targetRefId = (_node$definition$targ = node.definition.targetRef) === null || _node$definition$targ === void 0 ? void 0 : _node$definition$targ.id;
           if (node.type === 'processmaker-modeler-data-input-association') {
-            var _node$definition$sour2, _node$definition$targ2, _node$definition$targ3;
+            var _node$definition$sour2, _node$definition$targ2, _node$definition$targ3, _node$definition$targ4;
             sourceRefId = Array.isArray(node.definition.sourceRef) && ((_node$definition$sour2 = node.definition.sourceRef[0]) === null || _node$definition$sour2 === void 0 ? void 0 : _node$definition$sour2.id);
-            targetRefId = (_node$definition$targ2 = node.definition.targetRef) === null || _node$definition$targ2 === void 0 ? void 0 : (_node$definition$targ3 = _node$definition$targ2.$parent) === null || _node$definition$targ3 === void 0 ? void 0 : _node$definition$targ3.$parent.get('id');
+            targetRefId = (_node$definition$targ2 = node.definition.targetRef) === null || _node$definition$targ2 === void 0 ? void 0 : (_node$definition$targ3 = _node$definition$targ2.$parent) === null || _node$definition$targ3 === void 0 ? void 0 : (_node$definition$targ4 = _node$definition$targ3.$parent) === null || _node$definition$targ4 === void 0 ? void 0 : _node$definition$targ4.get('id');
           }
           if (sourceRefId && targetRefId) {
-            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
+            var flowData = {
               id: node.definition.id,
               type: node.type,
               sourceRefId: sourceRefId,
               targetRefId: targetRefId,
               waypoint: node.diagram.waypoint
-            });
+            };
+            if (isProcessRequested) {
+              return flowData;
+            }
+            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', flowData);
           }
         }
       }
     },
     addNode: function addNode(node) {
       var _arguments4 = arguments,
-        _this29 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+        _this30 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
         var id, fromClient, targetProcess;
-        return _regeneratorRuntime().wrap(function _callee16$(_context16) {
-          while (1) switch (_context16.prev = _context16.next) {
+        return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+          while (1) switch (_context17.prev = _context17.next) {
             case 0:
               id = _arguments4.length > 1 && _arguments4[1] !== undefined ? _arguments4[1] : null;
               fromClient = _arguments4.length > 2 && _arguments4[2] !== undefined ? _arguments4[2] : false;
               if (!node.pool) {
-                node.pool = _this29.poolTarget;
+                node.pool = _this30.poolTarget;
               }
-              targetProcess = node.getTargetProcess(_this29.processes, _this29.processNode);
+              targetProcess = node.getTargetProcess(_this30.processes, _this30.processNode);
               addNodeToProcess(node, targetProcess);
-              node.setIds(_this29.nodeIdGenerator, id);
-              _this29.planeElements.push(node.diagram);
+              node.setIds(_this30.nodeIdGenerator, id);
+              _this30.planeElements.push(node.diagram);
               // add multiplayer logic as a hook
-              _this29.multiplayerHook(node, fromClient);
+              _this30.multiplayerHook(node, fromClient);
               store.commit('addNode', node);
-              _this29.poolTarget = null;
+              _this30.poolTarget = null;
 
               // add processmaker-modeler-generic-flow
               if (![sequenceFlow_id, poolLane_config_id, associationConfig_id, messageFlow_config_id, config_id, dataInputAssociation_config_id, genericFlow_config_id].includes(node.type)) {
-                _context16.next = 12;
+                _context17.next = 12;
                 break;
               }
-              return _context16.abrupt("return");
+              return _context17.abrupt("return");
             case 12:
               if (!fromClient) {
                 // Select the node after it has been added to the store (does not apply to flows)
-                _this29.selectNewNode(node);
+                _this30.selectNewNode(node);
               }
-              return _context16.abrupt("return", new Promise(function (resolve) {
+              return _context17.abrupt("return", new Promise(function (resolve) {
                 setTimeout(function () {
-                  _this29.pushToUndoStack();
+                  _this30.pushToUndoStack();
                   resolve();
                 });
               }));
             case 14:
             case "end":
-              return _context16.stop();
+              return _context17.stop();
           }
-        }, _callee16);
+        }, _callee17);
       }))();
     },
     addClonedNodes: function addClonedNodes(nodes) {
-      var _this30 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
-        return _regeneratorRuntime().wrap(function _callee17$(_context17) {
-          while (1) switch (_context17.prev = _context17.next) {
+      var _this31 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+        return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+          while (1) switch (_context18.prev = _context18.next) {
             case 0:
               nodes.forEach(function (node) {
                 if (!node.pool) {
-                  node.pool = _this30.poolTarget;
+                  node.pool = _this31.poolTarget;
                 }
-                var targetProcess = node.getTargetProcess(_this30.processes, _this30.processNode);
+                var targetProcess = node.getTargetProcess(_this31.processes, _this31.processNode);
                 addNodeToProcess(node, targetProcess);
-                _this30.planeElements.push(node.diagram);
-                _this30.multiplayerHook(node, false);
+                _this31.planeElements.push(node.diagram);
+                _this31.multiplayerHook(node, false);
                 store.commit('addNode', node);
-                _this30.poolTarget = null;
+                _this31.poolTarget = null;
               });
             case 1:
             case "end":
-              return _context17.stop();
+              return _context18.stop();
           }
-        }, _callee17);
+        }, _callee18);
       }))();
     },
     removeNode: function removeNode(node, options) {
-      var _this31 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
-        return _regeneratorRuntime().wrap(function _callee18$(_context18) {
-          while (1) switch (_context18.prev = _context18.next) {
+      var _this32 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+        return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+          while (1) switch (_context19.prev = _context19.next) {
             case 0:
               // Check if the node is not replaced
-              if (_this31.isMultiplayer && !(options !== null && options !== void 0 && options.isReplaced)) {
+              if (_this32.isMultiplayer && !(options !== null && options !== void 0 && options.isReplaced)) {
                 // Emit event to server to remove node
                 window.ProcessMaker.EventBus.$emit('multiplayer-removeNode', node);
               }
-              _this31.removeNodeProcedure(node, options);
+              _this32.removeNodeProcedure(node, options);
             case 2:
             case "end":
-              return _context18.stop();
+              return _context19.stop();
           }
-        }, _callee18);
+        }, _callee19);
       }))();
     },
     removeNodeProcedure: function removeNodeProcedure(node) {
       var _arguments5 = arguments,
-        _this32 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+        _this33 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
         var _ref6, _ref6$removeRelations, removeRelationships;
-        return _regeneratorRuntime().wrap(function _callee19$(_context19) {
-          while (1) switch (_context19.prev = _context19.next) {
+        return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+          while (1) switch (_context20.prev = _context20.next) {
             case 0:
               _ref6 = _arguments5.length > 1 && _arguments5[1] !== undefined ? _arguments5[1] : {}, _ref6$removeRelations = _ref6.removeRelationships, removeRelationships = _ref6$removeRelations === void 0 ? true : _ref6$removeRelations;
               if (node) {
-                _context19.next = 3;
+                _context20.next = 3;
                 break;
               }
-              return _context19.abrupt("return");
+              return _context20.abrupt("return");
             case 3:
               if (removeRelationships) {
-                removeNodeFlows(node, _this32);
-                removeNodeMessageFlows(node, _this32);
-                removeNodeAssociations(node, _this32);
+                removeNodeFlows(node, _this33);
+                removeNodeMessageFlows(node, _this33);
+                removeNodeAssociations(node, _this33);
               }
               removeOutgoingAndIncomingRefsToFlow(node);
-              removeBoundaryEvents(_this32.graph, node, _this32.removeNode);
+              removeBoundaryEvents(_this33.graph, node, _this33.removeNode);
               removeSourceDefault(node);
-              _this32.removeNodesFromLane(node);
-              _this32.removeNodesFromPool(node);
+              _this33.removeNodesFromLane(node);
+              _this33.removeNodesFromPool(node);
               store.commit('removeNode', node);
-              store.commit('highlightNode', _this32.processNode);
-              _this32.$refs.selector.clearSelection();
-              _context19.next = 14;
-              return _this32.$nextTick();
+              store.commit('highlightNode', _this33.processNode);
+              _this33.$refs.selector.clearSelection();
+              _context20.next = 14;
+              return _this33.$nextTick();
             case 14:
-              _context19.next = 16;
-              return _this32.pushToUndoStack();
+              _context20.next = 16;
+              return _this33.pushToUndoStack();
             case 16:
               // force to update the processNode property in every delete
-              _this32.processes = _this32.getProcesses();
-              if (_this32.processes && _this32.processes.length > 0) {
-                _this32.processNode = new Node('processmaker-modeler-process', _this32.processes[0], _this32.planeElements.find(function (diagram) {
-                  return diagram.bpmnElement.id === _this32.processes[0].id;
+              _this33.processes = _this33.getProcesses();
+              if (_this33.processes && _this33.processes.length > 0) {
+                _this33.processNode = new Node('processmaker-modeler-process', _this33.processes[0], _this33.planeElements.find(function (diagram) {
+                  return diagram.bpmnElement.id === _this33.processes[0].id;
                 }));
               }
             case 18:
             case "end":
-              return _context19.stop();
+              return _context20.stop();
           }
-        }, _callee19);
+        }, _callee20);
       }))();
     },
     removeNodes: function removeNodes() {
-      var _this33 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
-        return _regeneratorRuntime().wrap(function _callee22$(_context22) {
-          while (1) switch (_context22.prev = _context22.next) {
+      var _this34 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+        return _regeneratorRuntime().wrap(function _callee23$(_context23) {
+          while (1) switch (_context23.prev = _context23.next) {
             case 0:
-              _context22.next = 2;
-              return _this33.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
-                return _regeneratorRuntime().wrap(function _callee21$(_context21) {
-                  while (1) switch (_context21.prev = _context21.next) {
+              _context23.next = 2;
+              return _this34.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+                return _regeneratorRuntime().wrap(function _callee22$(_context22) {
+                  while (1) switch (_context22.prev = _context22.next) {
                     case 0:
-                      _context21.next = 2;
-                      return _this33.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+                      _context22.next = 2;
+                      return _this34.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
                         var waitPromises;
-                        return _regeneratorRuntime().wrap(function _callee20$(_context20) {
-                          while (1) switch (_context20.prev = _context20.next) {
+                        return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+                          while (1) switch (_context21.prev = _context21.next) {
                             case 0:
                               waitPromises = [];
-                              _this33.highlightedNodes.forEach(function (node) {
-                                return waitPromises.push(_this33.removeNode(node, {
+                              _this34.highlightedNodes.forEach(function (node) {
+                                return waitPromises.push(_this34.removeNode(node, {
                                   removeRelationships: true
                                 }));
                               });
-                              _context20.next = 4;
+                              _context21.next = 4;
                               return Promise.all(waitPromises);
                             case 4:
                               store.commit('highlightNode');
                             case 5:
                             case "end":
-                              return _context20.stop();
+                              return _context21.stop();
                           }
-                        }, _callee20);
+                        }, _callee21);
                       })));
                     case 2:
                     case "end":
-                      return _context21.stop();
+                      return _context22.stop();
                   }
-                }, _callee21);
+                }, _callee22);
               })));
             case 2:
             case "end":
-              return _context22.stop();
+              return _context23.stop();
           }
-        }, _callee22);
+        }, _callee23);
       }))();
     },
     replaceNode: function replaceNode(_ref9) {
-      var _this34 = this;
+      var _this35 = this;
       var node = _ref9.node,
         typeToReplaceWith = _ref9.typeToReplaceWith;
-      this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
-        return _regeneratorRuntime().wrap(function _callee24$(_context24) {
-          while (1) switch (_context24.prev = _context24.next) {
+      this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+        return _regeneratorRuntime().wrap(function _callee25$(_context25) {
+          while (1) switch (_context25.prev = _context25.next) {
             case 0:
-              _context24.next = 2;
-              return _this34.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
-                var _node$diagram$bounds, x, y, nodeData, nodeTypes, newControl;
-                return _regeneratorRuntime().wrap(function _callee23$(_context23) {
-                  while (1) switch (_context23.prev = _context23.next) {
+              _context25.next = 2;
+              return _this35.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+                var _node$diagram$bounds, x, y, nodeData;
+                return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+                  while (1) switch (_context24.prev = _context24.next) {
                     case 0:
                       _node$diagram$bounds = node.diagram.bounds, x = _node$diagram$bounds.x, y = _node$diagram$bounds.y;
                       nodeData = {
@@ -77594,96 +77695,89 @@ var Multiplayer = /*#__PURE__*/function () {
                         },
                         nodeThatWillBeReplaced: node
                       };
-                      if (!_this34.isMultiplayer) {
-                        _context23.next = 8;
-                        break;
-                      }
-                      // Get all node types
-                      nodeTypes = nodeTypesStore.getters.getNodeTypes; // Get the new control
-                      newControl = nodeTypes.flatMap(function (nodeType) {
-                        var _nodeType$items;
-                        return (_nodeType$items = nodeType.items) === null || _nodeType$items === void 0 ? void 0 : _nodeType$items.filter(function (item) {
-                          return 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: nodeData,
-                          newControl: newControl[0].type
-                        });
-                      }
-                      _context23.next = 10;
-                      break;
-                    case 8:
-                      _context23.next = 10;
-                      return _this34.replaceNodeProcedure(nodeData, true);
-                    case 10:
+                      _context24.next = 4;
+                      return _this35.replaceNodeProcedure(nodeData);
+                    case 4:
                     case "end":
-                      return _context23.stop();
+                      return _context24.stop();
                   }
-                }, _callee23);
+                }, _callee24);
               })));
             case 2:
             case "end":
-              return _context24.stop();
+              return _context25.stop();
           }
-        }, _callee24);
+        }, _callee25);
       })));
     },
     replaceNodeProcedure: function replaceNodeProcedure(data) {
       var _arguments6 = arguments,
-        _this35 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
-        var isReplaced, _this35$paper$localTo, clientX, clientY, newNode;
-        return _regeneratorRuntime().wrap(function _callee25$(_context25) {
-          while (1) switch (_context25.prev = _context25.next) {
+        _this36 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+        var isReplaced, _this36$paper$localTo, clientX, clientY, newNode, nodeTypes, newControl;
+        return _regeneratorRuntime().wrap(function _callee26$(_context26) {
+          while (1) switch (_context26.prev = _context26.next) {
             case 0:
               isReplaced = _arguments6.length > 1 && _arguments6[1] !== undefined ? _arguments6[1] : false;
-              if (isReplaced) {
-                // Get the clientX and clientY from the node that will be replaced
-                _this35$paper$localTo = _this35.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds), clientX = _this35$paper$localTo.x, clientY = _this35$paper$localTo.y;
-                data.clientX = clientX;
-                data.clientY = clientY;
-              }
-              _context25.next = 4;
-              return _this35.handleDrop(data);
-            case 4:
-              newNode = _context25.sent;
-              _context25.next = 7;
-              return _this35.removeNode(data.nodeThatWillBeReplaced, {
+              // Get the clientX and clientY from the node that will be replaced
+              _this36$paper$localTo = _this36.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds), clientX = _this36$paper$localTo.x, clientY = _this36$paper$localTo.y;
+              data.clientX = clientX;
+              data.clientY = clientY;
+              _context26.next = 6;
+              return _this36.handleDrop(data);
+            case 6:
+              newNode = _context26.sent;
+              _context26.next = 9;
+              return _this36.removeNode(data.nodeThatWillBeReplaced, {
                 removeRelationships: false,
                 isReplaced: isReplaced
               });
-            case 7:
-              _this35.highlightNode(newNode);
-              _this35.selectNewNode(newNode);
             case 9:
+              _this36.highlightNode(newNode);
+              _this36.selectNewNode(newNode);
+              if (_this36.isMultiplayer && !isReplaced) {
+                // Get all node types
+                nodeTypes = nodeTypesStore.getters.getNodeTypes; // Get the new control
+                newControl = nodeTypes.flatMap(function (nodeType) {
+                  var _nodeType$items;
+                  return (_nodeType$items = nodeType.items) === null || _nodeType$items === void 0 ? void 0 : _nodeType$items.filter(function (item) {
+                    return 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: data,
+                    newControl: newControl[0].type
+                  });
+                }
+              }
+            case 12:
             case "end":
-              return _context25.stop();
+              return _context26.stop();
           }
-        }, _callee25);
+        }, _callee26);
       }))();
     },
     replaceAiNode: function replaceAiNode(_ref12) {
-      var _this36 = this;
+      var _this37 = this;
       var node = _ref12.node,
         typeToReplaceWith = _ref12.typeToReplaceWith,
         assetId = _ref12.assetId,
         assetName = _ref12.assetName,
         redirectTo = _ref12.redirectTo;
-      this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
-        return _regeneratorRuntime().wrap(function _callee27$(_context27) {
-          while (1) switch (_context27.prev = _context27.next) {
+      this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+        return _regeneratorRuntime().wrap(function _callee28$(_context28) {
+          while (1) switch (_context28.prev = _context28.next) {
             case 0:
-              _context27.next = 2;
-              return _this36.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
-                var _this36$paper$localTo, clientX, clientY, newNode;
-                return _regeneratorRuntime().wrap(function _callee26$(_context26) {
-                  while (1) switch (_context26.prev = _context26.next) {
+              _context28.next = 2;
+              return _this37.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+                var _this37$paper$localTo, clientX, clientY, newNode;
+                return _regeneratorRuntime().wrap(function _callee27$(_context27) {
+                  while (1) switch (_context27.prev = _context27.next) {
                     case 0:
-                      _this36$paper$localTo = _this36.paper.localToClientPoint(node.diagram.bounds), clientX = _this36$paper$localTo.x, clientY = _this36$paper$localTo.y;
-                      _context26.next = 3;
-                      return _this36.handleDrop({
+                      _this37$paper$localTo = _this37.paper.localToClientPoint(node.diagram.bounds), clientX = _this37$paper$localTo.x, clientY = _this37$paper$localTo.y;
+                      _context27.next = 3;
+                      return _this37.handleDrop({
                         clientX: clientX,
                         clientY: clientY,
                         control: {
@@ -77692,7 +77786,7 @@ var Multiplayer = /*#__PURE__*/function () {
                         nodeThatWillBeReplaced: node
                       });
                     case 3:
-                      newNode = _context26.sent;
+                      newNode = _context27.sent;
                       if (typeToReplaceWith === 'processmaker-modeler-task') {
                         newNode.definition.screenRef = assetId;
                         newNode.definition.name = assetName;
@@ -77707,98 +77801,98 @@ var Multiplayer = /*#__PURE__*/function () {
                         newNode.definition.config = "{\"calledElement\":\"ProcessId-".concat(assetId, "\",\"processId\":").concat(assetId, ",\"startEvent\":\"node_1\",\"name\":\"").concat(assetName, "\"}");
                         redirectTo = "".concat(redirectTo, "/").concat(newNode.id);
                       }
-                      _context26.next = 9;
-                      return _this36.removeNode(node, {
+                      _context27.next = 9;
+                      return _this37.removeNode(node, {
                         removeRelationships: false
                       });
                     case 9:
-                      _this36.highlightNode(newNode);
-                      _this36.selectNewNode(newNode);
-                      _context26.next = 13;
-                      return _this36.pushToUndoStack();
+                      _this37.highlightNode(newNode);
+                      _this37.selectNewNode(newNode);
+                      _context27.next = 13;
+                      return _this37.pushToUndoStack();
                     case 13:
-                      _context26.next = 15;
-                      return _this36.$nextTick();
+                      _context27.next = 15;
+                      return _this37.$nextTick();
                     case 15:
-                      _this36.saveBpmn(redirectTo, newNode.id);
+                      _this37.saveBpmn(redirectTo, newNode.id);
                     case 16:
                     case "end":
-                      return _context26.stop();
+                      return _context27.stop();
                   }
-                }, _callee26);
+                }, _callee27);
               })));
             case 2:
             case "end":
-              return _context27.stop();
+              return _context28.stop();
           }
-        }, _callee27);
+        }, _callee28);
       })));
     },
     replaceGenericFlow: function replaceGenericFlow(_ref15) {
-      var _this37 = this;
+      var _this38 = this;
       var actualFlow = _ref15.actualFlow,
         genericFlow = _ref15.genericFlow,
         targetNode = _ref15.targetNode;
-      this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-        return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-          while (1) switch (_context29.prev = _context29.next) {
+      this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+        return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+          while (1) switch (_context30.prev = _context30.next) {
             case 0:
-              _context29.next = 2;
-              return _this37.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
-                return _regeneratorRuntime().wrap(function _callee28$(_context28) {
-                  while (1) switch (_context28.prev = _context28.next) {
+              _context30.next = 2;
+              return _this38.paperManager.performAtomicAction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+                return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                  while (1) switch (_context29.prev = _context29.next) {
                     case 0:
-                      _context28.next = 2;
-                      return _this37.highlightNode(null);
+                      _context29.next = 2;
+                      return _this38.highlightNode(null);
                     case 2:
-                      _context28.next = 4;
-                      return _this37.$nextTick();
+                      _context29.next = 4;
+                      return _this38.$nextTick();
                     case 4:
-                      _context28.next = 6;
+                      _context29.next = 6;
                       return store.commit('removeNode', genericFlow);
                     case 6:
-                      _context28.next = 8;
-                      return _this37.$nextTick();
+                      _context29.next = 8;
+                      return _this38.$nextTick();
                     case 8:
-                      _context28.next = 10;
-                      return _this37.addNode(actualFlow, genericFlow.definition.id);
+                      _context29.next = 10;
+                      return _this38.addNode(actualFlow, genericFlow.definition.id);
                     case 10:
-                      _context28.next = 12;
-                      return _this37.$nextTick();
+                      _context29.next = 12;
+                      return _this38.$nextTick();
                     case 12:
-                      _context28.next = 14;
-                      return _this37.highlightNode(targetNode);
+                      _context29.next = 14;
+                      return _this38.highlightNode(targetNode);
                     case 14:
                     case "end":
-                      return _context28.stop();
+                      return _context29.stop();
                   }
-                }, _callee28);
+                }, _callee29);
               })));
             case 2:
             case "end":
-              return _context29.stop();
+              return _context30.stop();
           }
-        }, _callee29);
+        }, _callee30);
       })));
     },
     performSingleUndoRedoTransaction: function performSingleUndoRedoTransaction(cb) {
-      var _this38 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
-        return _regeneratorRuntime().wrap(function _callee30$(_context30) {
-          while (1) switch (_context30.prev = _context30.next) {
+      var _this39 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+        return _regeneratorRuntime().wrap(function _callee31$(_context31) {
+          while (1) switch (_context31.prev = _context31.next) {
             case 0:
               undoRedoStore.commit('disableSavingState');
-              _context30.next = 3;
+              _context31.next = 3;
               return cb();
             case 3:
               undoRedoStore.commit('enableSavingState');
-              _context30.next = 6;
-              return _this38.pushToUndoStack();
+              _context31.next = 6;
+              return _this39.pushToUndoStack();
             case 6:
             case "end":
-              return _context30.stop();
+              return _context31.stop();
           }
-        }, _callee30);
+        }, _callee31);
       }))();
     },
     removeNodesFromLane: function removeNodesFromLane(node) {
@@ -77811,36 +77905,36 @@ var Multiplayer = /*#__PURE__*/function () {
       pull_default()(containingLane.get('flowNodeRef'), node.definition);
     },
     removeNodesFromPool: function removeNodesFromPool(node) {
-      var _this39 = this;
+      var _this40 = this;
       if (node.type === 'processmaker-modeler-pool' && node.definition.processRef) {
         if (node.definition.processRef.artifacts) {
           node.definition.processRef.artifacts.forEach(function (artifact) {
-            var nodeToRemove = _this39.nodes.find(function (n) {
+            var nodeToRemove = _this40.nodes.find(function (n) {
               return n.definition === artifact;
             });
             if (nodeToRemove) {
-              _this39.removeNode(nodeToRemove);
+              _this40.removeNode(nodeToRemove);
             }
           });
         }
         if (node.definition.processRef.flowElements) {
           node.definition.processRef.flowElements.forEach(function (flowElement) {
-            var nodeToRemove = _this39.nodes.find(function (n) {
+            var nodeToRemove = _this40.nodes.find(function (n) {
               return n.definition === flowElement;
             });
             if (nodeToRemove) {
-              _this39.removeNode(nodeToRemove);
+              _this40.removeNode(nodeToRemove);
             }
           });
         }
         var laneSets = node.definition.processRef.laneSets;
         if (!!laneSets && laneSets.length > 0) {
           laneSets[0].lanes.forEach(function (lane) {
-            var nodeToRemove = _this39.nodes.find(function (n) {
+            var nodeToRemove = _this40.nodes.find(function (n) {
               return n.definition === lane;
             });
             if (nodeToRemove) {
-              _this39.removeNode(nodeToRemove);
+              _this40.removeNode(nodeToRemove);
             }
           });
         }
@@ -77868,13 +77962,13 @@ var Multiplayer = /*#__PURE__*/function () {
       return shape.component != null;
     },
     setShapeStacking: function setShapeStacking(shape) {
-      var _this40 = this;
+      var _this41 = this;
       if (this.isRendering || !shape.component.node.isType('processmaker-modeler-pool') && shape === this.previouslyStackedShape) {
         return;
       }
       this.previouslyStackedShape = shape;
       this.paperManager.performAtomicAction(function () {
-        return ensureShapeIsNotCovered(shape, _this40.graph);
+        return ensureShapeIsNotCovered(shape, _this41.graph);
       });
     },
     showSavedNotification: function showSavedNotification() {
@@ -77908,49 +78002,49 @@ var Multiplayer = /*#__PURE__*/function () {
       return false;
     },
     pointerDowInShape: function pointerDowInShape(event, element) {
-      var _this41 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+      var _this42 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
         var x, y, shapeView;
-        return _regeneratorRuntime().wrap(function _callee31$(_context31) {
-          while (1) switch (_context31.prev = _context31.next) {
+        return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+          while (1) switch (_context32.prev = _context32.next) {
             case 0:
               x = event.clientX, y = event.clientY;
-              shapeView = _this41.paper.findViewByModel(element);
-              _this41.isDragging = false;
-              _this41.isSelecting = false;
-              _this41.isIntoTheSelection = false;
-              _this41.dragStart = {
+              shapeView = _this42.paper.findViewByModel(element);
+              _this42.isDragging = false;
+              _this42.isSelecting = false;
+              _this42.isIntoTheSelection = false;
+              _this42.dragStart = {
                 x: x,
                 y: y
               };
               // Verify if is in the selection box
-              if (!_this41.isPointInSelection(event)) {
-                _context31.next = 10;
+              if (!_this42.isPointInSelection(event)) {
+                _context32.next = 10;
                 break;
               }
-              _this41.isIntoTheSelection = true;
-              _context31.next = 15;
+              _this42.isIntoTheSelection = true;
+              _context32.next = 15;
               break;
             case 10:
               if (event.shiftKey) {
-                _context31.next = 15;
+                _context32.next = 15;
                 break;
               }
-              _context31.next = 13;
-              return _this41.$refs.selector.selectElement(shapeView);
+              _context32.next = 13;
+              return _this42.$refs.selector.selectElement(shapeView);
             case 13:
-              _context31.next = 15;
-              return _this41.$nextTick();
+              _context32.next = 15;
+              return _this42.$nextTick();
             case 15:
-              _this41.$refs.selector.startDrag({
+              _this42.$refs.selector.startDrag({
                 clientX: event.clientX,
                 clientY: event.clientY
               });
             case 16:
             case "end":
-              return _context31.stop();
+              return _context32.stop();
           }
-        }, _callee31);
+        }, _callee32);
       }))();
     },
     pointerDownHandler: function pointerDownHandler(event) {
@@ -78071,7 +78165,7 @@ var Multiplayer = /*#__PURE__*/function () {
     this.$emit('set-xml-manager', this.xmlManager);
   },
   mounted: function mounted() {
-    var _this42 = this;
+    var _this43 = this;
     store.commit('setReadOnly', this.readOnly);
     this.graph = new external_jointjs_.dia.Graph();
     store.commit('setGraph', this.graph);
@@ -78090,47 +78184,47 @@ var Multiplayer = /*#__PURE__*/function () {
     store.commit('setPaper', this.paperManager.paper);
     this.paperManager.addEventHandler('element:pointerclick', this.blurFocusedScreenBuilderElement, this);
     this.paperManager.addEventHandler('blank:pointerdown', function (event, x, y) {
-      if (_this42.isGrabbing) return;
+      if (_this43.isGrabbing) return;
       if (store.getters.isReadOnly) {
-        _this42.isGrabbing = true;
+        _this43.isGrabbing = true;
       }
-      var scale = _this42.paperManager.scale;
-      _this42.canvasDragPosition = {
+      var scale = _this43.paperManager.scale;
+      _this43.canvasDragPosition = {
         x: x * scale.sx,
         y: y * scale.sy
       };
-      _this42.isOverShape = false;
-      _this42.pointerDownHandler(event);
+      _this43.isOverShape = false;
+      _this43.pointerDownHandler(event);
     }, this);
     this.paperManager.addEventHandler('cell:mouseover element:mouseover', function (_ref19) {
       var shape = _ref19.model;
-      if (_this42.isBpmnNode(shape) && shape.attr('body/cursor') !== 'default' && !_this42.isGrabbing) {
+      if (_this43.isBpmnNode(shape) && shape.attr('body/cursor') !== 'default' && !_this43.isGrabbing) {
         shape.attr('body/cursor', 'move');
       }
       // If the user is panning the Paper while hovering an element, ignore the default move cursor
-      if (_this42.isGrabbing && _this42.isBpmnNode(shape)) {
+      if (_this43.isGrabbing && _this43.isBpmnNode(shape)) {
         shape.attr('body/cursor', 'grabbing');
       }
     });
     this.paperManager.addEventHandler('blank:pointerup', function (event) {
-      _this42.isGrabbing = false;
-      _this42.canvasDragPosition = null;
-      _this42.activeNode = null;
-      _this42.pointerUpHandler(event);
+      _this43.isGrabbing = false;
+      _this43.canvasDragPosition = null;
+      _this43.activeNode = null;
+      _this43.pointerUpHandler(event);
     }, this);
     this.paperManager.addEventHandler('cell:pointerup', function (cellView, event) {
-      _this42.canvasDragPosition = null;
-      _this42.activeNode = null;
-      _this42.pointerUpHandler(event, cellView);
+      _this43.canvasDragPosition = null;
+      _this43.activeNode = null;
+      _this43.pointerUpHandler(event, cellView);
     }, this);
     this.$refs['paper-container'].addEventListener('mouseenter', function () {
       store.commit('setClientLeftPaper', false);
     });
     this.$el.addEventListener('mousemove', function (event) {
-      _this42.pointerMoveHandler(event);
+      _this43.pointerMoveHandler(event);
     });
     this.$refs['paper-container'].addEventListener('mouseleave', function () {
-      _this42.paperManager.removeEventHandler('blank:pointermove');
+      _this43.paperManager.removeEventHandler('blank:pointermove');
       store.commit('setClientLeftPaper', true);
     });
     this.paperManager.addEventHandler('cell:pointerclick', function (cellView, evt, x, y) {
@@ -78141,44 +78235,44 @@ var Multiplayer = /*#__PURE__*/function () {
     });
     this.paperManager.addEventHandler('cell:pointerclick', function (_ref20, event) {
       var shape = _ref20.model;
-      if (!_this42.isBpmnNode(shape)) {
+      if (!_this43.isBpmnNode(shape)) {
         return;
       }
 
       // ignore click event if the user is Grabbing the paper
-      if (_this42.isGrabbing) return;
+      if (_this43.isGrabbing) return;
       shape.component.$emit('click', event);
-      _this42.$emit('click', {
+      _this43.$emit('click', {
         event: event,
-        node: _this42.highlightedNode.definition
+        node: _this43.highlightedNode.definition
       });
     });
     this.paperManager.addEventHandler('cell:pointerdown', function (_ref21, event) {
       var shape = _ref21.model;
-      if (!_this42.isBpmnNode(shape)) {
+      if (!_this43.isBpmnNode(shape)) {
         return;
       }
       // If the user is pressing Space (grabbing) and clicking on a Cell, return
-      if (_this42.isGrabbing) {
+      if (_this43.isGrabbing) {
         return;
       }
-      _this42.setShapeStacking(shape);
-      _this42.activeNode = shape.component.node;
-      _this42.isOverShape = true;
-      _this42.pointerDowInShape(event, shape);
+      _this43.setShapeStacking(shape);
+      _this43.activeNode = shape.component.node;
+      _this43.isOverShape = true;
+      _this43.pointerDowInShape(event, shape);
     });
     // If the user is grabbing the paper while he clicked in a cell, move the paper and not the cell
     this.paperManager.addEventHandler('cell:pointermove', function (_, event, x, y) {
-      if (_this42.isGrabbing) {
-        if (!_this42.canvasDragPosition) {
-          var scale = _this42.paperManager.scale;
-          _this42.canvasDragPosition = {
+      if (_this43.isGrabbing) {
+        if (!_this43.canvasDragPosition) {
+          var scale = _this43.paperManager.scale;
+          _this43.canvasDragPosition = {
             x: x * scale.sx,
             y: y * scale.sy
           };
         }
-        if (_this42.canvasDragPosition && !_this42.clientLeftPaper) {
-          _this42.paperManager.translate(event.offsetX - _this42.canvasDragPosition.x, event.offsetY - _this42.canvasDragPosition.y);
+        if (_this43.canvasDragPosition && !_this43.clientLeftPaper) {
+          _this43.paperManager.translate(event.offsetX - _this43.canvasDragPosition.x, event.offsetY - _this43.canvasDragPosition.y);
         }
       }
     });
@@ -78189,28 +78283,29 @@ var Multiplayer = /*#__PURE__*/function () {
       modeler: this,
       registerMenuAction: this.registerMenuAction,
       loadXML: function () {
-        var _loadXML = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32(xml) {
+        var _loadXML = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33(xml) {
           var multiplayer;
-          return _regeneratorRuntime().wrap(function _callee32$(_context32) {
-            while (1) switch (_context32.prev = _context32.next) {
+          return _regeneratorRuntime().wrap(function _callee33$(_context33) {
+            while (1) switch (_context33.prev = _context33.next) {
               case 0:
-                _context32.next = 2;
-                return _this42.loadXML(xml);
+                _context33.next = 2;
+                return _this43.loadXML(xml);
               case 2:
-                _context32.next = 4;
+                _context33.next = 4;
                 return undoRedoStore.dispatch('pushState', xml);
               case 4:
                 try {
-                  multiplayer = new Multiplayer(_this42);
+                  multiplayer = new Multiplayer(_this43);
                   multiplayer.init();
+                  _this43.multiplayer = multiplayer;
                 } catch (error) {
                   console.warn('Could not initialize multiplayer', error);
                 }
               case 5:
               case "end":
-                return _context32.stop();
+                return _context33.stop();
             }
-          }, _callee32);
+          }, _callee33);
         }));
         function loadXML(_x) {
           return _loadXML.apply(this, arguments);
@@ -78218,18 +78313,18 @@ var Multiplayer = /*#__PURE__*/function () {
         return loadXML;
       }(),
       addWarnings: function addWarnings(warnings) {
-        return _this42.$emit('warnings', warnings);
+        return _this43.$emit('warnings', warnings);
       },
       addBreadcrumbs: function addBreadcrumbs(breadcrumbs) {
-        return _this42.breadcrumbData.push(breadcrumbs);
+        return _this43.breadcrumbData.push(breadcrumbs);
       }
     });
     this.$root.$on('replace-ai-node', function (data) {
-      _this42.replaceAiNode(data);
+      _this43.replaceAiNode(data);
     });
     window.ProcessMaker.EventBus.$on('save-changes', function (redirectUrl) {
       if (redirectUrl) {
-        _this42.redirect(redirectUrl);
+        _this43.redirect(redirectUrl);
       }
     });
   }
@@ -78251,8 +78346,8 @@ var modelervue_type_style_index_0_prod_lang_scss_ = __webpack_require__(26695);
 
 var Modeler_component = normalizeComponent(
   modeler_Modelervue_type_script_lang_js_,
-  Modelervue_type_template_id_83a477c8_render,
-  Modelervue_type_template_id_83a477c8_staticRenderFns,
+  Modelervue_type_template_id_5fd6d55f_render,
+  Modelervue_type_template_id_5fd6d55f_staticRenderFns,
   false,
   null,
   null,