@processmaker/modeler 1.43.2 → 1.43.3

package/dist/modeler.common.js

@@ -12944,7 +12944,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".weekday[data-v-4ae18478]{padding:.75e
 
 /***/ }),
 
-/***/ 68216:
+/***/ 83620:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -12958,7 +12958,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".box[data-v-1de55e90]{border:1px solid #5faaee;position:absolute;pointer-events:none}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".box[data-v-6c7ebacb]{border:1px solid #5faaee;position:absolute;pointer-events:none}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -26695,19 +26695,19 @@ var update = add("406dc84a", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 19389:
+/***/ 57870:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(68216);
+var content = __webpack_require__(83620);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(54402)/* ["default"] */ .Z)
-var update = add("5682dba7", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("28a09fd4", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -32596,6 +32596,22 @@ function isPoint(item) {
     }
   },
   methods: {
+    setHighlightColor: function setHighlightColor(highlighted, color) {
+      if (highlighted) {
+        this.shape.attr({
+          line: {
+            stroke: color
+          },
+          '.joint-highlight-stroke': {
+            'display': 'none'
+          }
+        });
+        this.shapeView.showTools();
+      } else {
+        resetShapeColor(this.shape);
+        this.shapeView.hideTools();
+      }
+    },
     setShapeHighlight: function setShapeHighlight() {
       if (this.isCompleted) {
         this.shape.attr({
@@ -37345,24 +37361,53 @@ var idleHighlighter = {
     }
   },
   methods: {
-    setShapeHighlight: function setShapeHighlight() {
-      if (store.getters.isReadOnly) {
-        this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
-        if (this.isCompleted) {
-          this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
-          this.shapeView.highlight(this.shapeBody, completedHighlighter);
-        }
-        this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
-        if (this.isInProgress) {
-          this.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
-          this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
-        }
-        if (this.isIdle) {
-          this.shape.attr('body/fill', COLOR_IDLE_FILL);
-          this.shapeView.highlight(this.shapeBody, idleHighlighter);
+    prepareCustomColorHighlighter: function prepareCustomColorHighlighter(color) {
+      return {
+        highlighter: {
+          name: 'stroke',
+          options: {
+            attrs: {
+              stroke: color,
+              'stroke-width': 3,
+              'data-cy': 'selected'
+            }
+          },
+          partial: false,
+          type: 'default'
         }
+      };
+    },
+    setHighlightColor: function setHighlightColor(highlighted, color) {
+      if (!this.shapeView) {
         return;
       }
+      if (highlighted) {
+        this.shapeView.unhighlight(this.shapeBody, errorHighlighter);
+        this.shapeView.highlight(this.shapeBody, this.prepareCustomColorHighlighter(color));
+      } else {
+        this.shapeView.unhighlight(this.shapeBody, this.prepareCustomColorHighlighter(color));
+      }
+    },
+    setShapeHighlightForReadOnly: function setShapeHighlightForReadOnly() {
+      if (!this.shapeView) {
+        return;
+      }
+      this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+      if (this.isCompleted) {
+        this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
+        this.shapeView.highlight(this.shapeBody, completedHighlighter);
+      }
+      this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+      if (this.isInProgress) {
+        this.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
+        this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
+      }
+      if (this.isIdle) {
+        this.shape.attr('body/fill', COLOR_IDLE_FILL);
+        this.shapeView.highlight(this.shapeBody, idleHighlighter);
+      }
+    },
+    setShapeHighlightForDefault: function setShapeHighlightForDefault() {
       if (!this.shapeView) {
         return;
       }
@@ -37375,6 +37420,17 @@ var idleHighlighter = {
         this.shapeView.highlight(this.shapeBody, defaultHighlighter);
       }
     },
+    setShapeHighlight: function setShapeHighlight() {
+      if (!this.shapeView) {
+        return;
+      }
+      this.shapeView.unhighlight(this.shapeBody, errorHighlighter);
+      if (store.getters.isReadOnly) {
+        this.setShapeHighlightForReadOnly();
+      } else {
+        this.setShapeHighlightForDefault();
+      }
+    },
     setBorderOutline: function setBorderOutline(borderOutline) {
       if (this.currentBorderOutline) {
         this.shapeView.unhighlight(this.shapeBody, this.currentBorderOutline);
@@ -48175,10 +48231,10 @@ var ValidationStatus_component = normalizeComponent(
 )
 
 /* harmony default export */ var ValidationStatus = (ValidationStatus_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=09b13081&
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=554c7310&
 
 
-var Modelervue_type_template_id_09b13081_render = function render() {
+var Modelervue_type_template_id_554c7310_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -48443,9 +48499,9 @@ var Modelervue_type_template_id_09b13081_render = function render() {
     });
   })], 2)], 1);
 };
-var Modelervue_type_template_id_09b13081_staticRenderFns = [];
+var Modelervue_type_template_id_554c7310_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=09b13081&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=554c7310&
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=728530a2&
 var boundaryEventvue_type_template_id_728530a2_render = function render() {
@@ -52412,7 +52468,6 @@ var boundaryTimerEvent_component = normalizeComponent(
 
 
 
-
 var boundaryTimerEvent_id = 'processmaker-modeler-boundary-timer-event';
 var setEventTimerDefinition = function setEventTimerDefinition(moddle, node, type, body) {
   var eventDefinition = _defineProperty({}, type, moddle.create('bpmn:Expression', {
@@ -52420,7 +52475,7 @@ var setEventTimerDefinition = function setEventTimerDefinition(moddle, node, typ
   }));
   return [moddle.create('bpmn:TimerEventDefinition', eventDefinition)];
 };
-/* harmony default export */ var nodes_boundaryTimerEvent = (merge_default()(cloneDeep_default()(nodes_boundaryEvent), {
+/* harmony default export */ var nodes_boundaryTimerEvent = ((0,external_lodash_.merge)((0,external_lodash_.cloneDeep)(nodes_boundaryEvent), {
   id: boundaryTimerEvent_id,
   component: boundaryTimerEvent,
   control: false,
@@ -52443,7 +52498,7 @@ var setEventTimerDefinition = function setEventTimerDefinition(moddle, node, typ
         key = _ref2[0],
         value = _ref2[1];
       if (key === 'eventDefinitions') {
-        var type = Object.keys(value[0])[1];
+        var type = Object.keys((0,external_lodash_.omit)(value[0], ['id', '$type', 'get', 'set', '$instanceOf']))[0];
         var body = value[0][type].body;
         data[key] = {
           type: type,
@@ -56160,8 +56215,8 @@ var genericFlow_component = normalizeComponent(
 )
 
 /* harmony default export */ var genericFlow = (genericFlow_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/Selection.vue?vue&type=template&id=1de55e90&scoped=true&
-var Selectionvue_type_template_id_1de55e90_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/Selection.vue?vue&type=template&id=6c7ebacb&scoped=true&
+var Selectionvue_type_template_id_6c7ebacb_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _vm.showLasso && _vm.style ? _c('div', {
@@ -56191,7 +56246,7 @@ var Selectionvue_type_template_id_1de55e90_scoped_true_render = function render(
     }
   }, _vm.$listeners))], 1) : _vm._e();
 };
-var Selectionvue_type_template_id_1de55e90_scoped_true_staticRenderFns = [];
+var Selectionvue_type_template_id_6c7ebacb_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/crown/crownMultiselect/crownMultiselect.vue?vue&type=template&id=bcd827ec&scoped=true&
 
@@ -57178,6 +57233,7 @@ var crownMultiselect_component = normalizeComponent(
     selected: function selected(newSelected) {
       this.prepareConectedLinks(newSelected);
       this.addToHighlightedNodes(newSelected);
+      this.highlightNodesMultiplayer(newSelected);
     }
   },
   methods: {
@@ -57898,6 +57954,18 @@ var crownMultiselect_component = normalizeComponent(
         store.commit('highlightNode', this.processNode);
       }
     },
+    highlightNodesMultiplayer: function highlightNodesMultiplayer(selected) {
+      // Update selected nodes
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateSelectedNodes', this.getSelectedNodeKeys(selected));
+    },
+    getSelectedNodeKeys: function getSelectedNodeKeys(selected) {
+      var keys = [];
+      selected.forEach(function (shape) {
+        var node = shape.model.component.node;
+        keys.push(node.definition.id);
+      });
+      return keys;
+    },
     /**
      * Gets the child shape
      * @param {object} point
@@ -58216,9 +58284,9 @@ var crownMultiselect_component = normalizeComponent(
 });
 ;// CONCATENATED MODULE: ./src/components/modeler/Selection.vue?vue&type=script&lang=js&
  /* harmony default export */ var modeler_Selectionvue_type_script_lang_js_ = (Selectionvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Selection.vue?vue&type=style&index=0&id=1de55e90&prod&scoped=true&lang=css&
-var Selectionvue_type_style_index_0_id_1de55e90_prod_scoped_true_lang_css_ = __webpack_require__(19389);
-;// CONCATENATED MODULE: ./src/components/modeler/Selection.vue?vue&type=style&index=0&id=1de55e90&prod&scoped=true&lang=css&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Selection.vue?vue&type=style&index=0&id=6c7ebacb&prod&scoped=true&lang=css&
+var Selectionvue_type_style_index_0_id_6c7ebacb_prod_scoped_true_lang_css_ = __webpack_require__(57870);
+;// CONCATENATED MODULE: ./src/components/modeler/Selection.vue?vue&type=style&index=0&id=6c7ebacb&prod&scoped=true&lang=css&
 
 ;// CONCATENATED MODULE: ./src/components/modeler/Selection.vue
 
@@ -58231,11 +58299,11 @@ var Selectionvue_type_style_index_0_id_1de55e90_prod_scoped_true_lang_css_ = __w
 
 var Selection_component = normalizeComponent(
   modeler_Selectionvue_type_script_lang_js_,
-  Selectionvue_type_template_id_1de55e90_scoped_true_render,
-  Selectionvue_type_template_id_1de55e90_scoped_true_staticRenderFns,
+  Selectionvue_type_template_id_6c7ebacb_scoped_true_render,
+  Selectionvue_type_template_id_6c7ebacb_scoped_true_staticRenderFns,
   false,
   null,
-  "1de55e90",
+  "6c7ebacb",
   null
   
 )
@@ -76933,7 +77001,6 @@ var ColorUtil = /*#__PURE__*/function () {
   }, {
     key: "generateHSL",
     value: function generateHSL(name) {
-      console.log(name);
       var hash = this.getHashOfString(name);
       var h = this.normalizeHash(hash, 0, 360);
       var s = this.normalizeHash(hash, this.saturationRange[0], this.saturationRange[1]);
@@ -77114,6 +77181,8 @@ var Multiplayer = /*#__PURE__*/function () {
         _this.addPlayers(payload);
       });
       this.clientIO.on('clientLeft', function (payload) {
+        // Unhighlight nodes
+        _this.modeler.unhightligtNodes(payload.clientId);
         // Remove the player from the multiplayer list
         _this.modeler.removePlayer(payload.clientId);
         _this.modeler.enableMultiplayer(payload.isMultiplayer);
@@ -77125,6 +77194,8 @@ var Multiplayer = /*#__PURE__*/function () {
           _this.syncLocalNodes(clientId);
         }
       });
+
+      // Listen for updates when the cursor data was updated
       this.clientIO.on('updateUserCursor', /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(payload) {
           return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -77142,18 +77213,14 @@ var Multiplayer = /*#__PURE__*/function () {
         };
       }());
 
-      // Listen for updates when a new element is added
-      this.clientIO.on('createElement', /*#__PURE__*/function () {
+      // Listen for updates when the cursor data was updated
+      this.clientIO.on('selectedNodesWasUpdated', /*#__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:
-                _context2.next = 2;
-                return _this.createRemoteShape(payload.changes);
-              case 2:
-                // Add the new element to the shared array
-                applyUpdate(_this.yDoc, new Uint8Array(payload.updateDoc));
-              case 3:
+                _this.updateHightligtedNodes(payload);
+              case 1:
               case "end":
                 return _context2.stop();
             }
@@ -77164,29 +77231,51 @@ var Multiplayer = /*#__PURE__*/function () {
         };
       }());
 
-      // Listen for updates when a new element is requested
-      this.clientIO.on('createRequestedElement', /*#__PURE__*/function () {
+      // Listen for updates when a new element is added
+      this.clientIO.on('createElement', /*#__PURE__*/function () {
         var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(payload) {
           return _regeneratorRuntime().wrap(function _callee3$(_context3) {
             while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return _this.createRemoteShape(payload.changes);
+              case 2:
+                // Add the new element to the shared array
+                applyUpdate(_this.yDoc, new Uint8Array(payload.updateDoc));
+              case 3:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function (_x3) {
+          return _ref3.apply(this, arguments);
+        };
+      }());
+
+      // Listen for updates when a new element is requested
+      this.clientIO.on('createRequestedElement', /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(payload) {
+          return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+            while (1) switch (_context4.prev = _context4.next) {
               case 0:
                 if (!(payload.clientId === _this.clientIO.id)) {
-                  _context3.next = 4;
+                  _context4.next = 4;
                   break;
                 }
-                _context3.next = 3;
+                _context4.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 _context3.stop();
+                return _context4.stop();
             }
-          }, _callee3);
+          }, _callee4);
         }));
-        return function (_x3) {
-          return _ref3.apply(this, arguments);
+        return function (_x4) {
+          return _ref4.apply(this, arguments);
         };
       }());
 
@@ -77258,9 +77347,9 @@ var Multiplayer = /*#__PURE__*/function () {
           _this2.updateNodes(data);
         }
       });
-      window.ProcessMaker.EventBus.$on('multiplayer-replaceNode', function (_ref4) {
-        var nodeData = _ref4.nodeData,
-          newControl = _ref4.newControl;
+      window.ProcessMaker.EventBus.$on('multiplayer-replaceNode', function (_ref5) {
+        var nodeData = _ref5.nodeData,
+          newControl = _ref5.newControl;
         _this2.replaceNode(nodeData, newControl);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addFlow', function (data) {
@@ -77282,6 +77371,11 @@ var Multiplayer = /*#__PURE__*/function () {
           _this2.updateFlows(data);
         }
       });
+      window.ProcessMaker.EventBus.$on('multiplayer-updateSelectedNodes', function (data) {
+        if (_this2.modeler.isMultiplayer) {
+          _this2.updateSelectedNodes(data);
+        }
+      });
       window.ProcessMaker.EventBus.$on('multiplayer-updateMousePosition', function (data) {
         if (_this2.modeler.isMultiplayer) {
           _this2.updateMousePosition(data);
@@ -77334,6 +77428,36 @@ var Multiplayer = /*#__PURE__*/function () {
         _this4.modeler.updateClientCursor(client);
       });
     }
+    /**
+     * Updates the selected nodes by the user
+     * @param {Object} data
+     */
+  }, {
+    key: "updateSelectedNodes",
+    value: function updateSelectedNodes(data) {
+      var warningMessage = 'Another user is working on this object, wait until they finish making changes.';
+      if (this.modeler.isMultiplayerSelected(data)) {
+        window.ProcessMaker.alert(warningMessage, 'warning');
+      }
+      this.clientIO.emit('updateSelectedNodes', {
+        clientId: this.clientIO.id,
+        roomName: this.room.getRoom(),
+        selectedNodes: data
+      });
+    }
+    /**
+     * Update highlighted nodes
+     * @param {Object} data
+     */
+  }, {
+    key: "updateHightligtedNodes",
+    value: function updateHightligtedNodes(payload) {
+      var _this5 = this;
+      payload.clients.map(function (client) {
+        _this5.modeler.updateHightligtedNodes(client);
+      });
+    }
+
     /**
      * Sync the modeler nodes with the microservice
      * @param {String} clientId
@@ -77341,25 +77465,25 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "syncLocalNodes",
     value: function syncLocalNodes(clientId) {
-      var _this5 = this;
+      var _this6 = this;
       // Get the process definition
       var nodes = this.modeler.nodes.map(function (node) {
         if (node.definition.$type === 'bpmn:BoundaryEvent') {
           return getBoundaryEventData(node);
         }
         if (node.definition.$type === 'bpmn:Lane') {
-          return _this5.prepareLaneData(node);
+          return _this6.prepareLaneData(node);
         }
-        return _this5.modeler.multiplayerHook(node, false, true);
+        return _this6.modeler.multiplayerHook(node, false, true);
       });
       nodes.forEach(function (node) {
         var yMapNested = new YMap();
-        _this5.doTransact(yMapNested, node);
-        _this5.yArray.push([yMapNested]);
+        _this6.doTransact(yMapNested, node);
+        _this6.yArray.push([yMapNested]);
         // Encode the state as an update and send it to the server
-        var stateUpdate = encodeStateAsUpdate(_this5.yDoc);
+        var stateUpdate = encodeStateAsUpdate(_this6.yDoc);
         // Send the update to the web socket server
-        _this5.clientIO.emit('createElement', {
+        _this6.clientIO.emit('createElement', {
           updateDoc: stateUpdate,
           clientId: clientId
         });
@@ -77398,10 +77522,10 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "createRemoteShape",
     value: function createRemoteShape(changes) {
-      var _this6 = this;
+      var _this7 = this;
       return new Promise(function (resolve) {
         changes.map(function (data) {
-          _this6.createShape(data);
+          _this7.createShape(data);
         });
         resolve();
       });
@@ -77468,14 +77592,14 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateNodes",
     value: function updateNodes(data) {
-      var _this7 = this;
+      var _this8 = this;
       data.forEach(function (value) {
-        var index = _this7.getIndex(value.id);
-        var nodeToUpdate = _this7.yArray.get(index);
+        var index = _this8.getIndex(value.id);
+        var nodeToUpdate = _this8.yArray.get(index);
         var updateData = value.poolId ? _objectSpread2(_objectSpread2({}, value.properties), {
           poolId: value.poolId
         }) : value.properties;
-        _this7.doTransact(nodeToUpdate, updateData);
+        _this8.doTransact(nodeToUpdate, updateData);
       });
     }
   }, {
@@ -77555,16 +77679,16 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateShapes",
     value: function () {
-      var _updateShapes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(data) {
+      var _updateShapes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(data) {
         var paper, element, newPool, node, _node;
-        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.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)) {
-                _context4.next = 7;
+                _context5.next = 7;
                 break;
               }
               if ('waypoint' in data) {
@@ -77577,7 +77701,7 @@ var Multiplayer = /*#__PURE__*/function () {
                   value: data.color
                 });
               }
-              _context4.next = 23;
+              _context5.next = 23;
               break;
             case 7:
               // updata gateway default folow
@@ -77595,7 +77719,7 @@ var Multiplayer = /*#__PURE__*/function () {
               }
               // udpdate the element's color
               if (!data.color) {
-                _context4.next = 14;
+                _context5.next = 14;
                 break;
               }
               _node = this.getNodeById(data.id);
@@ -77604,7 +77728,7 @@ var Multiplayer = /*#__PURE__*/function () {
                 key: 'color',
                 value: data.color
               });
-              return _context4.abrupt("return");
+              return _context5.abrupt("return");
             case 14:
               // boundary type
               if (element.component.node.definition.$type === 'bpmn:BoundaryEvent') {
@@ -77612,13 +77736,13 @@ var Multiplayer = /*#__PURE__*/function () {
               }
 
               // Trigger a rendering of the element on the paper
-              _context4.next = 17;
+              _context5.next = 17;
               return paper.findViewByModel(element).update();
             case 17:
-              _context4.next = 19;
+              _context5.next = 19;
               return element.component.$nextTick();
             case 19:
-              _context4.next = 21;
+              _context5.next = 21;
               return this.modeler.paperManager.awaitScheduledUpdates();
             case 21:
               if (newPool && element.component.node.pool && element.component.node.pool.component.id !== data.poolId) {
@@ -77627,11 +77751,11 @@ var Multiplayer = /*#__PURE__*/function () {
               this.modeler.updateLasso();
             case 23:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4, this);
+        }, _callee5, this);
       }));
-      function updateShapes(_x4) {
+      function updateShapes(_x5) {
         return _updateShapes.apply(this, arguments);
       }
       return updateShapes;
@@ -77657,7 +77781,7 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateMovedWaypoint",
     value: function updateMovedWaypoint(element, data) {
-      var _this8 = this;
+      var _this9 = this;
       var waypoint = data.waypoint;
       var paper = this.modeler.paper;
       // Update the element's waypoints
@@ -77670,14 +77794,14 @@ var Multiplayer = /*#__PURE__*/function () {
       element.vertices(waypoint);
       // update bpmn waypoints
       element.component.node.diagram.waypoint = waypoint.map(function (point) {
-        return _this8.modeler.moddle.create('dc:Point', point);
+        return _this9.modeler.moddle.create('dc:Point', point);
       });
       // Force Remount Flow
       element.component.node._modelerId += '_replaced';
       // Update the element's source anchor
       element.source(sourceElem, {
         anchor: function anchor() {
-          return getDefaultAnchorPoint(_this8.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
+          return getDefaultAnchorPoint(_this9.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
         },
         connectionPoint: {
           name: 'boundary'
@@ -77687,7 +77811,7 @@ var Multiplayer = /*#__PURE__*/function () {
       // Update the element's target anchor
       element.target(targetElem, {
         anchor: function anchor() {
-          return getDefaultAnchorPoint(_this8.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
+          return getDefaultAnchorPoint(_this9.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
         },
         connectionPoint: {
           name: 'boundary'
@@ -77730,7 +77854,7 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "addLaneNodes",
     value: function addLaneNodes(lanes) {
-      var _this9 = this;
+      var _this10 = this;
       var pool = this.getPool(lanes);
       var defaultPoolData = {
         id: pool.component.node.definition.id,
@@ -77746,11 +77870,11 @@ var Multiplayer = /*#__PURE__*/function () {
       this.yDoc.transact(function () {
         lanes.forEach(function (lane) {
           var yMapNested = new YMap();
-          var data = _this9.prepareLaneData(lane);
-          _this9.doTransact(yMapNested, data);
-          _this9.yArray.push([yMapNested]);
-          var stateUpdate = encodeStateAsUpdate(_this9.yDoc);
-          _this9.clientIO.emit('createElement', {
+          var data = _this10.prepareLaneData(lane);
+          _this10.doTransact(yMapNested, data);
+          _this10.yArray.push([yMapNested]);
+          var stateUpdate = encodeStateAsUpdate(_this10.yDoc);
+          _this10.clientIO.emit('createElement', {
             updateDoc: stateUpdate
           });
         });
@@ -77890,11 +78014,11 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateFlows",
     value: function updateFlows(data) {
-      var _this10 = this;
+      var _this11 = this;
       data.forEach(function (value) {
-        var index = _this10.getIndex(value.id);
-        var nodeToUpdate = _this10.yArray.get(index);
-        _this10.yDoc.transact(function () {
+        var index = _this11.getIndex(value.id);
+        var nodeToUpdate = _this11.yArray.get(index);
+        _this11.yDoc.transact(function () {
           for (var key in value) {
             if (Object.hasOwn(value, key)) {
               nodeToUpdate.set(key, value[key]);
@@ -77957,12 +78081,12 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "refreshNodeWaypoint",
     value: function refreshNodeWaypoint(element) {
-      var _this11 = this;
+      var _this12 = this;
       var linkView = this.modeler.paper.findViewByModel(element);
       var start = linkView.sourceAnchor;
       var end = linkView.targetAnchor;
       element.component.node.diagram.waypoint = [start].concat(_toConsumableArray(element.component.shape.vertices()), [end]).map(function (point) {
-        return _this11.modeler.moddle.create('dc:Point', point);
+        return _this12.modeler.moddle.create('dc:Point', point);
       });
     }
   }]);
@@ -80047,6 +80171,58 @@ var Multiplayer = /*#__PURE__*/function () {
         });
       }
     },
+    /**
+     * Unhightligt selected Nodes
+     * @param {String} clientId 
+     */
+    unhightligtNodes: function unhightligtNodes(clientId) {
+      var _player$selectedNodes,
+        _this43 = this;
+      var player = this.players.find(function (player) {
+        return player.id === clientId;
+      });
+      player === null || player === void 0 ? void 0 : (_player$selectedNodes = player.selectedNodes) === null || _player$selectedNodes === void 0 ? void 0 : _player$selectedNodes.forEach(function (nodeId) {
+        var element = _this43.getElementByNodeId(nodeId);
+        element.component.setHighlightColor(false, player.color);
+      });
+    },
+    /**
+     * Update the hightligted nodes
+     * @param {Object} data 
+     */
+    updateHightligtedNodes: function updateHightligtedNodes(data) {
+      var _this44 = this;
+      if (data) {
+        var _data$selectedNodes;
+        this.unhightligtNodes(data.id);
+        // highlight selected shape
+        this.players = this.players.map(function (item) {
+          return item.id === data.id ? _objectSpread2(_objectSpread2({}, item), data) : item;
+        });
+        data === null || data === void 0 ? void 0 : (_data$selectedNodes = data.selectedNodes) === null || _data$selectedNodes === void 0 ? void 0 : _data$selectedNodes.forEach(function (nodeId) {
+          var element = _this44.getElementByNodeId(nodeId);
+          element.component.setHighlightColor(true, data.color);
+        });
+      }
+    },
+    isMultiplayerSelected: function isMultiplayerSelected(data) {
+      var intersectionExists = false;
+      if (data) {
+        var _this$players;
+        (_this$players = this.players) === null || _this$players === void 0 ? void 0 : _this$players.some(function (player) {
+          var _player$selectedNodes2;
+          if (intersectionExists) {
+            return true; // This will break out of the loop
+          }
+
+          intersectionExists = player === null || player === void 0 ? void 0 : (_player$selectedNodes2 = player.selectedNodes) === null || _player$selectedNodes2 === void 0 ? void 0 : _player$selectedNodes2.some(function (item) {
+            return data.includes(item);
+          });
+          return false;
+        });
+      }
+      return intersectionExists;
+    },
     removePlayer: function removePlayer(playerId) {
       var playerIndex = this.players.findIndex(function (player) {
         return player.id === playerId;
@@ -80119,7 +80295,7 @@ var Multiplayer = /*#__PURE__*/function () {
       localStorage.setItem('promptSessions', JSON.stringify(promptSessions));
     },
     fetchHistory: function fetchHistory() {
-      var _this43 = this;
+      var _this45 = this;
       var url = '/package-ai/getPromptSessionHistory';
       var params = {
         server: window.location.host,
@@ -80131,16 +80307,16 @@ var Multiplayer = /*#__PURE__*/function () {
         };
       }
       window.ProcessMaker.apiClient.post(url, params).then(function (response) {
-        _this43.setPromptSessions(response.data.promptSessionId);
-        _this43.promptSessionId = response.data.promptSessionId;
+        _this45.setPromptSessions(response.data.promptSessionId);
+        _this45.promptSessionId = response.data.promptSessionId;
         localStorage.promptSessionId = response.data.promptSessionId;
       }).catch(function (error) {
         var _error$response, _error$response$data;
         var errorMsg = ((_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.message) || error.message;
         if (error.response.status === 404) {
-          _this43.removePromptSessionForUser();
+          _this45.removePromptSessionForUser();
           localStorage.promptSessionId = '';
-          _this43.promptSessionId = '';
+          _this45.promptSessionId = '';
         } else {
           window.ProcessMaker.alert(errorMsg, 'danger');
         }
@@ -80206,7 +80382,7 @@ var Multiplayer = /*#__PURE__*/function () {
     this.$emit('set-xml-manager', this.xmlManager);
   },
   mounted: function mounted() {
-    var _this44 = this;
+    var _this46 = this;
     store.commit('setReadOnly', this.readOnly);
     this.graph = new external_jointjs_namespaceObject.dia.Graph();
     store.commit('setGraph', this.graph);
@@ -80225,47 +80401,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 (_this44.isGrabbing) return;
+      if (_this46.isGrabbing) return;
       if (store.getters.isReadOnly) {
-        _this44.isGrabbing = true;
+        _this46.isGrabbing = true;
       }
-      var scale = _this44.paperManager.scale;
-      _this44.canvasDragPosition = {
+      var scale = _this46.paperManager.scale;
+      _this46.canvasDragPosition = {
         x: x * scale.sx,
         y: y * scale.sy
       };
-      _this44.isOverShape = false;
-      _this44.pointerDownHandler(event);
+      _this46.isOverShape = false;
+      _this46.pointerDownHandler(event);
     }, this);
     this.paperManager.addEventHandler('cell:mouseover element:mouseover', function (_ref19) {
       var shape = _ref19.model;
-      if (_this44.isBpmnNode(shape) && shape.attr('body/cursor') !== 'default' && !_this44.isGrabbing) {
+      if (_this46.isBpmnNode(shape) && shape.attr('body/cursor') !== 'default' && !_this46.isGrabbing) {
         shape.attr('body/cursor', 'move');
       }
       // If the user is panning the Paper while hovering an element, ignore the default move cursor
-      if (_this44.isGrabbing && _this44.isBpmnNode(shape)) {
+      if (_this46.isGrabbing && _this46.isBpmnNode(shape)) {
         shape.attr('body/cursor', 'grabbing');
       }
     });
     this.paperManager.addEventHandler('blank:pointerup', function (event) {
-      _this44.isGrabbing = false;
-      _this44.canvasDragPosition = null;
-      _this44.activeNode = null;
-      _this44.pointerUpHandler(event);
+      _this46.isGrabbing = false;
+      _this46.canvasDragPosition = null;
+      _this46.activeNode = null;
+      _this46.pointerUpHandler(event);
     }, this);
     this.paperManager.addEventHandler('cell:pointerup', function (cellView, event) {
-      _this44.canvasDragPosition = null;
-      _this44.activeNode = null;
-      _this44.pointerUpHandler(event, cellView);
+      _this46.canvasDragPosition = null;
+      _this46.activeNode = null;
+      _this46.pointerUpHandler(event, cellView);
     }, this);
     this.$refs['paper-container'].addEventListener('mouseenter', function () {
       store.commit('setClientLeftPaper', false);
     });
     this.$el.addEventListener('mousemove', function (event) {
-      _this44.pointerMoveHandler(event);
+      _this46.pointerMoveHandler(event);
     });
     this.$refs['paper-container'].addEventListener('mouseleave', function () {
-      _this44.paperManager.removeEventHandler('blank:pointermove');
+      _this46.paperManager.removeEventHandler('blank:pointermove');
       store.commit('setClientLeftPaper', true);
     });
     this.paperManager.addEventHandler('cell:pointerclick', function (cellView, evt, x, y) {
@@ -80276,44 +80452,44 @@ var Multiplayer = /*#__PURE__*/function () {
     });
     this.paperManager.addEventHandler('cell:pointerclick', function (_ref20, event) {
       var shape = _ref20.model;
-      if (!_this44.isBpmnNode(shape)) {
+      if (!_this46.isBpmnNode(shape)) {
         return;
       }
 
       // ignore click event if the user is Grabbing the paper
-      if (_this44.isGrabbing) return;
+      if (_this46.isGrabbing) return;
       shape.component.$emit('click', event);
-      _this44.$emit('click', {
+      _this46.$emit('click', {
         event: event,
-        node: _this44.highlightedNode.definition
+        node: _this46.highlightedNode.definition
       });
     });
     this.paperManager.addEventHandler('cell:pointerdown', function (_ref21, event) {
       var shape = _ref21.model;
-      if (!_this44.isBpmnNode(shape)) {
+      if (!_this46.isBpmnNode(shape)) {
         return;
       }
       // If the user is pressing Space (grabbing) and clicking on a Cell, return
-      if (_this44.isGrabbing) {
+      if (_this46.isGrabbing) {
         return;
       }
-      _this44.setShapeStacking(shape);
-      _this44.activeNode = shape.component.node;
-      _this44.isOverShape = true;
-      _this44.pointerDowInShape(event, shape);
+      _this46.setShapeStacking(shape);
+      _this46.activeNode = shape.component.node;
+      _this46.isOverShape = true;
+      _this46.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 (_this44.isGrabbing) {
-        if (!_this44.canvasDragPosition) {
-          var scale = _this44.paperManager.scale;
-          _this44.canvasDragPosition = {
+      if (_this46.isGrabbing) {
+        if (!_this46.canvasDragPosition) {
+          var scale = _this46.paperManager.scale;
+          _this46.canvasDragPosition = {
             x: x * scale.sx,
             y: y * scale.sy
           };
         }
-        if (_this44.canvasDragPosition && !_this44.clientLeftPaper) {
-          _this44.paperManager.translate(event.offsetX - _this44.canvasDragPosition.x, event.offsetY - _this44.canvasDragPosition.y);
+        if (_this46.canvasDragPosition && !_this46.clientLeftPaper) {
+          _this46.paperManager.translate(event.offsetX - _this46.canvasDragPosition.x, event.offsetY - _this46.canvasDragPosition.y);
         }
       }
     });
@@ -80330,15 +80506,15 @@ var Multiplayer = /*#__PURE__*/function () {
             while (1) switch (_context33.prev = _context33.next) {
               case 0:
                 _context33.next = 2;
-                return _this44.loadXML(xml);
+                return _this46.loadXML(xml);
               case 2:
                 _context33.next = 4;
                 return undoRedoStore.dispatch('pushState', xml);
               case 4:
                 try {
-                  multiplayer = new Multiplayer(_this44);
+                  multiplayer = new Multiplayer(_this46);
                   multiplayer.init();
-                  _this44.multiplayer = multiplayer;
+                  _this46.multiplayer = multiplayer;
                 } catch (error) {
                   console.warn('Could not initialize multiplayer', error);
                 }
@@ -80354,18 +80530,18 @@ var Multiplayer = /*#__PURE__*/function () {
         return loadXML;
       }(),
       addWarnings: function addWarnings(warnings) {
-        return _this44.$emit('warnings', warnings);
+        return _this46.$emit('warnings', warnings);
       },
       addBreadcrumbs: function addBreadcrumbs(breadcrumbs) {
-        return _this44.breadcrumbData.push(breadcrumbs);
+        return _this46.breadcrumbData.push(breadcrumbs);
       }
     });
     this.$root.$on('replace-ai-node', function (data) {
-      _this44.replaceAiNode(data);
+      _this46.replaceAiNode(data);
     });
     window.ProcessMaker.EventBus.$on('save-changes', function (redirectUrl) {
       if (redirectUrl) {
-        _this44.redirect(redirectUrl);
+        _this46.redirect(redirectUrl);
       }
     });
 
@@ -80395,8 +80571,8 @@ var modelervue_type_style_index_0_prod_lang_scss_ = __webpack_require__(88242);
 
 var Modeler_component = normalizeComponent(
   modeler_Modelervue_type_script_lang_js_,
-  Modelervue_type_template_id_09b13081_render,
-  Modelervue_type_template_id_09b13081_staticRenderFns,
+  Modelervue_type_template_id_554c7310_render,
+  Modelervue_type_template_id_554c7310_staticRenderFns,
   false,
   null,
   null,