@processmaker/modeler 1.39.6 → 1.39.8

package/dist/modeler.common.js

@@ -10875,6 +10875,27 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".crown-multiselect[data-v-bcd827ec]{to
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 21955:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8081);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23645);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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, ".remote-cursor[data-v-70c20f1a]{position:absolute;width:auto;height:34px}.remote-cursor[data-v-70c20f1a],.remote-username[data-v-70c20f1a]{display:-webkit-box;display:-ms-flexbox;display:flex}.remote-username[data-v-70c20f1a]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:12px;padding:4px 10px;gap:10px;border-radius:4px;background-color:#212529;color:#fff;font-size:12px;font-style:normal;font-weight:400;line-height:normal}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 15105:
@@ -11305,7 +11326,28 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".toolbar{z-index:3;height:4rem;cursor:
 
 /***/ }),
 
-/***/ 39047:
+/***/ 53984:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8081);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23645);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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, ".avatar-initials[data-v-1c50a604]{text-align:center;line-height:2.4rem;color:#fff;font-weight:700}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 88587:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11319,7 +11361,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, ".top-rail-container[data-v-78331cf6]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".top-rail-container[data-v-f6aad76c]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 8px}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -21875,6 +21917,22 @@ var update = add("3acc825c", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 9500:
+/***/ (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__(21955);
+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("3f3f4627", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 11886:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -22195,19 +22253,35 @@ var update = add("0e3dfd4a", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 71175:
+/***/ 27758:
 /***/ (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__(39047);
+var content = __webpack_require__(53984);
 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("067e2659", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("38b028bc", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 19550:
+/***/ (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__(88587);
+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("54b780e6", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -22941,6 +23015,14 @@ module.exports = __webpack_require__.p + "img/validate-open.6048f9de.svg";
 
 /***/ }),
 
+/***/ 61264:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+module.exports = __webpack_require__.p + "img/cursor.86e6f3e3.svg";
+
+/***/ }),
+
 /***/ 98573:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -23482,7 +23564,7 @@ __webpack_require__.d(config_namespaceObject, {
   bpmnType: function() { return bpmnType; },
   definition: function() { return definition; },
   diagram: function() { return config_diagram; },
-  id: function() { return id; }
+  id: function() { return config_id; }
 });
 
 // NAMESPACE OBJECT: ./src/components/nodes/dataInputAssociation/config.js
@@ -23492,7 +23574,7 @@ __webpack_require__.d(dataInputAssociation_config_namespaceObject, {
   bpmnType: function() { return config_bpmnType; },
   definition: function() { return config_definition; },
   diagram: function() { return diagram; },
-  id: function() { return config_id; }
+  id: function() { return dataInputAssociation_config_id; }
 });
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -27972,7 +28054,7 @@ var deleteButtonvue_type_template_id_59648d83_staticRenderFns = [];
 var external_lodash_namespaceObject = require("lodash");
 var external_lodash_default = /*#__PURE__*/__webpack_require__.n(external_lodash_namespaceObject);
 ;// CONCATENATED MODULE: ./src/components/nodes/dataOutputAssociation/config.js
-var id = 'processmaker-modeler-data-output-association';
+var config_id = 'processmaker-modeler-data-output-association';
 var bpmnType = 'bpmn:DataOutputAssociation';
 function definition(moddle) {
   return moddle.create('bpmn:DataOutputAssociation', {
@@ -27986,7 +28068,7 @@ function config_diagram(moddle) {
   return moddle.create('bpmndi:BPMNEdge');
 }
 ;// CONCATENATED MODULE: ./src/components/nodes/dataInputAssociation/config.js
-var config_id = 'processmaker-modeler-data-input-association';
+var dataInputAssociation_config_id = 'processmaker-modeler-data-input-association';
 var config_bpmnType = 'bpmn:DataInputAssociation';
 function config_definition(moddle) {
   return moddle.create('bpmn:DataInputAssociation', {
@@ -28563,12 +28645,12 @@ var Node = /*#__PURE__*/function () {
     }
   }, {
     key: "setIds",
-    value: function setIds(nodeIdGenerator) {
+    value: function setIds(nodeIdGenerator, id) {
       var _this = this;
-      var _nodeIdGenerator$gene = nodeIdGenerator.generate(),
-        _nodeIdGenerator$gene2 = _slicedToArray(_nodeIdGenerator$gene, 2),
-        nodeId = _nodeIdGenerator$gene2[0],
-        diagramId = _nodeIdGenerator$gene2[1];
+      var _ref = id ? [id + '_di'] : nodeIdGenerator.generate(),
+        _ref2 = _slicedToArray(_ref, 2),
+        nodeId = _ref2[0],
+        diagramId = _ref2[1];
       if (!this.id) {
         this.id = nodeId;
       }
@@ -28718,8 +28800,8 @@ var Node = /*#__PURE__*/function () {
     key: "getTargetProcess",
     value: function getTargetProcess(processes, processNode) {
       var _this4 = this;
-      return this.pool ? processes.find(function (_ref) {
-        var id = _ref.id;
+      return this.pool ? processes.find(function (_ref3) {
+        var id = _ref3.id;
         return id === _this4.pool.component.node.definition.get('processRef').id;
       }) : processNode.definition;
     }
@@ -29146,7 +29228,7 @@ function _createSuper(Derived) {
   };
 }
 ;// CONCATENATED MODULE: ./src/components/nodes/pool/config.js
-var pool_config_id = 'processmaker-modeler-pool';
+var id = 'processmaker-modeler-pool';
 ;// CONCATENATED MODULE: ./src/components/nodes/genericFlow/Flow.js
 
 
@@ -29236,7 +29318,7 @@ var Flow = /*#__PURE__*/function () {
     key: "shapeIsPool",
     value: function shapeIsPool(shape) {
       var shapeType = get_default()(shape, 'component.node.type');
-      return shapeType === pool_config_id;
+      return shapeType === id;
     }
   }]);
   return Flow;
@@ -39077,18 +39159,18 @@ var NodeIdGenerator = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _generateDefinitionId, {
       writable: true,
       value: function value() {
-        var _NodeIdGenerator$coun, _NodeIdGenerator$coun2;
+        var _NodeIdGenerator$coun3, _NodeIdGenerator$coun4;
         var id = NodeIdGenerator.prefix + _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _counter);
-        _classStaticPrivateFieldSpecSet(NodeIdGenerator, NodeIdGenerator, _counter, (_NodeIdGenerator$coun = _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _counter), _NodeIdGenerator$coun2 = _NodeIdGenerator$coun++, _NodeIdGenerator$coun)), _NodeIdGenerator$coun2;
+        _classStaticPrivateFieldSpecSet(NodeIdGenerator, NodeIdGenerator, _counter, (_NodeIdGenerator$coun3 = _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _counter), _NodeIdGenerator$coun4 = _NodeIdGenerator$coun3++, _NodeIdGenerator$coun3)), _NodeIdGenerator$coun4;
         return id;
       }
     });
     _classPrivateFieldInitSpec(this, _generateDiagramId, {
       writable: true,
       value: function value() {
-        var _NodeIdGenerator$diag, _NodeIdGenerator$diag2;
+        var _NodeIdGenerator$diag3, _NodeIdGenerator$diag4;
         var id = NodeIdGenerator.prefix + _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _diagramCounter) + '_di';
-        _classStaticPrivateFieldSpecSet(NodeIdGenerator, NodeIdGenerator, _diagramCounter, (_NodeIdGenerator$diag = _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _diagramCounter), _NodeIdGenerator$diag2 = _NodeIdGenerator$diag++, _NodeIdGenerator$diag)), _NodeIdGenerator$diag2;
+        _classStaticPrivateFieldSpecSet(NodeIdGenerator, NodeIdGenerator, _diagramCounter, (_NodeIdGenerator$diag3 = _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _diagramCounter), _NodeIdGenerator$diag4 = _NodeIdGenerator$diag3++, _NodeIdGenerator$diag3)), _NodeIdGenerator$diag4;
         return id;
       }
     });
@@ -39169,6 +39251,18 @@ var NodeIdGenerator = /*#__PURE__*/function () {
       this.refreshLastIdCounter();
       return _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _counter);
     }
+  }, {
+    key: "getDefinitionNumber",
+    value: function getDefinitionNumber() {
+      return _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _counter);
+    }
+  }, {
+    key: "updateCounters",
+    value: function updateCounters() {
+      var _NodeIdGenerator$coun, _NodeIdGenerator$coun2, _NodeIdGenerator$diag, _NodeIdGenerator$diag2;
+      _classStaticPrivateFieldSpecSet(NodeIdGenerator, NodeIdGenerator, _counter, (_NodeIdGenerator$coun = _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _counter), _NodeIdGenerator$coun2 = _NodeIdGenerator$coun++, _NodeIdGenerator$coun)), _NodeIdGenerator$coun2;
+      _classStaticPrivateFieldSpecSet(NodeIdGenerator, NodeIdGenerator, _diagramCounter, (_NodeIdGenerator$diag = _classStaticPrivateFieldSpecGet(NodeIdGenerator, NodeIdGenerator, _diagramCounter), _NodeIdGenerator$diag2 = _NodeIdGenerator$diag++, _NodeIdGenerator$diag)), _NodeIdGenerator$diag2;
+    }
   }, {
     key: "refreshLastDiagramIdCounter",
     value: function refreshLastDiagramIdCounter() {
@@ -42276,7 +42370,7 @@ var pool_component = normalizeComponent(
 
 
 /* harmony default export */ var nodes_pool = ({
-  id: pool_config_id,
+  id: id,
   component: pool,
   bpmnType: 'bpmn:Participant',
   control: true,
@@ -42543,10 +42637,11 @@ 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=2dc9597e&
+;// 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=10fee576&
 
 
-var Modelervue_type_template_id_2dc9597e_render = function render() {
+
+var Modelervue_type_template_id_10fee576_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -42566,7 +42661,8 @@ var Modelervue_type_template_id_2dc9597e_render = function render() {
       "warnings": _vm.allWarnings,
       "xml-manager": _vm.xmlManager,
       "validationBar": _vm.validationBar,
-      "extra-actions": _vm.extraActions
+      "extra-actions": _vm.extraActions,
+      "players": _vm.players
     },
     on: {
       "load-xml": _vm.loadXML,
@@ -42760,11 +42856,21 @@ var Modelervue_type_template_id_2dc9597e_render = function render() {
       "remove-nodes": _vm.removeNodes,
       "save-state": _vm.pushToUndoStack
     }
-  }) : _vm._e()], 2)], 1);
+  }) : _vm._e()], 2), _vm._l(_vm.players, function (player) {
+    return _c('RemoteCursor', {
+      key: player.id,
+      attrs: {
+        "cursor-color": player.color,
+        "username": player.name,
+        "top": player.top,
+        "left": player.left
+      }
+    });
+  })], 2);
 };
-var Modelervue_type_template_id_2dc9597e_staticRenderFns = [];
+var Modelervue_type_template_id_10fee576_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=2dc9597e&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=10fee576&
 
 ;// 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=2979ecac&
 var boundaryEventvue_type_template_id_2979ecac_render = function render() {
@@ -45333,11 +45439,11 @@ function isTextAnnotation(bpmnType) {
 function getPoolUnderPosition(clientX, clientY, paper, graph) {
   return graph.findModelsFromPoint(getLocalMousePosition(clientX, clientY, paper)).find(function (_ref) {
     var component = _ref.component;
-    return component && component.node.type === pool_config_id;
+    return component && component.node.type === id;
   });
 }
 function isDroppingPool(controlType) {
-  return controlType === pool_config_id;
+  return controlType === id;
 }
 function noPoolsOnTheGrid(collaboration) {
   return !collaboration || collaboration.get('participants').length === 0;
@@ -46173,10 +46279,10 @@ function getElementPool(shape) {
   return shape.component.node.pool;
 }
 function isPool(shape) {
-  return shape.component.node.type === pool_config_id;
+  return shape.component.node.type === id;
 }
-;// 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/toolbar/ToolBar.vue?vue&type=template&id=337414c0&
-var ToolBarvue_type_template_id_337414c0_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/toolbar/ToolBar.vue?vue&type=template&id=a14390d2&
+var ToolBarvue_type_template_id_a14390d2_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('b-row', {
@@ -46199,7 +46305,8 @@ var ToolBarvue_type_template_id_337414c0_render = function render() {
   }, [_c('TopRail', {
     attrs: {
       "validation-errors": _vm.validationErrors,
-      "warnings": _vm.warnings
+      "warnings": _vm.warnings,
+      "players": _vm.players
     }
   }, _vm._l(_vm.validationBar, function (component, index) {
     return _c(component.button, {
@@ -46319,7 +46426,7 @@ var ToolBarvue_type_template_id_337414c0_render = function render() {
     staticClass: "fas fa-upload mr-1"
   }), _vm._v(" " + _vm._s(_vm.$t('Upload XML')) + " ")])]], 2)], 1)], 1)]);
 };
-var ToolBarvue_type_template_id_337414c0_staticRenderFns = [];
+var ToolBarvue_type_template_id_a14390d2_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/toolbar/breadcrumb/Breadcrumb.vue?vue&type=template&id=d1e148b4&scoped=true&
 var Breadcrumbvue_type_template_id_d1e148b4_scoped_true_render = function render() {
@@ -46397,13 +46504,17 @@ var Breadcrumb_component = normalizeComponent(
 )
 
 /* harmony default export */ var Breadcrumb = (Breadcrumb_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/topRail/TopRail.vue?vue&type=template&id=78331cf6&scoped=true&
-var TopRailvue_type_template_id_78331cf6_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/topRail/TopRail.vue?vue&type=template&id=f6aad76c&scoped=true&
+var TopRailvue_type_template_id_f6aad76c_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     staticClass: "top-rail-container"
-  }, [_c('ValidateIssue', {
+  }, [_c('MultiplayerViewUsers', {
+    attrs: {
+      "players": _vm.players
+    }
+  }), _c('ValidateIssue', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -46433,7 +46544,7 @@ var TopRailvue_type_template_id_78331cf6_scoped_true_render = function render()
     }
   }), _vm._t("default")], 2);
 };
-var TopRailvue_type_template_id_78331cf6_scoped_true_staticRenderFns = [];
+var TopRailvue_type_template_id_f6aad76c_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/topRail/validateControl/validateButton/ValidateButton.vue?vue&type=template&id=5880bbc6&scoped=true&
 var ValidateButtonvue_type_template_id_5880bbc6_scoped_true_render = function render() {
@@ -46730,6 +46841,234 @@ var ValidatePanel_component = normalizeComponent(
 
 
 
+;// 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/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue?vue&type=template&id=2504b8f1&
+
+var MultiplayerViewUsersvue_type_template_id_2504b8f1_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('b-avatar-group', {
+    staticClass: "container"
+  }, [_vm._l(_vm.players, function (item) {
+    return [_c('Avatar', {
+      key: item.key,
+      attrs: {
+        "badgeBackgroundColor": item.color,
+        "imgSrc": item.imgSrc,
+        "userName": item.name
+      }
+    })];
+  })], 2);
+};
+var MultiplayerViewUsersvue_type_template_id_2504b8f1_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue?vue&type=template&id=2504b8f1&
+
+;// 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/topRail/multiplayerViewUsers/avatar/Avatar.vue?vue&type=template&id=1c50a604&scoped=true&
+var Avatarvue_type_template_id_1c50a604_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('span', {
+    staticClass: "b-avatar rounded-circle",
+    style: {
+      'backgroundColor': _vm.generateColorHsl(_vm.userName, _vm.saturationRange, _vm.lightnessRange)
+    }
+  }, [_vm.imgSrc ? _c('span', {
+    staticClass: "b-avatar-img"
+  }, [_c('img', {
+    attrs: {
+      "src": _vm.imgSrc,
+      "alt": _vm.userName
+    }
+  })]) : _c('span', {
+    staticClass: "b-avatar-text avatar-initials"
+  }, [_c('span', [_vm._v(" " + _vm._s(this.getInitials(_vm.userName)) + " ")])]), _c('span', {
+    staticClass: "b-avatar-badge badge-danger",
+    style: {
+      bottom: '0px',
+      right: '0px',
+      backgroundColor: _vm.badgeBackgroundColor
+    }
+  })]);
+};
+var Avatarvue_type_template_id_1c50a604_scoped_true_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/topRail/multiplayerViewUsers/avatar/Avatar.vue?vue&type=script&lang=js&
+
+/* harmony default export */ var Avatarvue_type_script_lang_js_ = ({
+  props: {
+    badgeBackgroundColor: {
+      type: String,
+      required: false
+    },
+    imgSrc: {
+      type: String,
+      required: false
+    },
+    userName: {
+      type: String,
+      required: false
+    }
+  },
+  data: function data() {
+    return {
+      saturation: 50,
+      lightness: 50,
+      range: 10
+    };
+  },
+  computed: {
+    saturationRange: function saturationRange() {
+      return this.getRange(this.saturation, this.range);
+    },
+    lightnessRange: function lightnessRange() {
+      return this.getRange(this.lightness, this.range);
+    }
+  },
+  methods: {
+    /**
+     * Get the initials from a given name.
+     *
+     * @param {string} name - The full name from which to extract initials.
+     * @returns {string} The initials of the first and last names.
+     */
+    getInitials: function getInitials() {
+      var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var nameArray = name.split(' ');
+      var firstNameIn = nameArray[0].charAt(0).toUpperCase();
+      var lastNameIn = nameArray[nameArray.length - 1].charAt(0).toUpperCase();
+      return "".concat(firstNameIn).concat(lastNameIn);
+    },
+    /**
+     * Calculates a hash value for a given string.
+     *
+     * @param {string} str - The input string for which the hash needs to be calculated.
+     * @returns {number} The calculated hash value for the input string.
+     */
+    getHashOfString: function getHashOfString(str) {
+      var hash = 0;
+      for (var i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+      }
+      hash = Math.abs(hash);
+      return hash;
+    },
+    /**
+     * Calculates a range around a given value.
+     *
+     * @param {number} value - The central value.
+     * @param {number} range - The range value.
+     * @returns {number[]} An array containing the lower and upper bounds of the range.
+     */
+    getRange: function getRange(value, range) {
+      return [Math.max(0, value - range), Math.min(value + range, 100)];
+    },
+    /**
+     * Get the hash number to within our range
+     * 
+     * @param {Number} hash 
+     * @param {Number} min
+     * @param {Number} max
+     * @returns {Number}
+     */
+    normalizeHash: function normalizeHash(hash, min, max) {
+      return Math.floor(hash % (max - min) + min);
+    },
+    /**
+     *Generate Unique Color, create a string using our h,s,l values.
+     * @param {String} name
+     * @param {Array} saturationRange 
+     * @param {Array} lightnessRange
+     * @returns {Number}
+     */
+    generateHSL: function generateHSL(name, saturationRange, lightnessRange) {
+      var hash = this.getHashOfString(name);
+      var h = this.normalizeHash(hash, 0, 360);
+      var s = this.normalizeHash(hash, saturationRange[0], saturationRange[1]);
+      var l = this.normalizeHash(hash, lightnessRange[0], lightnessRange[1]);
+      return [h, s, l];
+    },
+    /**
+     * Convert HSL array to string
+     * @param {Array} hsl
+     * @returns {String}
+     */
+    HSLtoString: function HSLtoString(hsl) {
+      return "hsl(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%)");
+    },
+    /**
+     * Generate a unique hsl value.
+     * @param {String} name
+     * @param {Array} saturationRange 
+     * @param {Array} lightnessRange
+     * @returns {String}
+     */
+    generateColorHsl: function generateColorHsl(id, saturationRange, lightnessRange) {
+      return this.HSLtoString(this.generateHSL(id, saturationRange, lightnessRange));
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/avatar/Avatar.vue?vue&type=script&lang=js&
+ /* harmony default export */ var avatar_Avatarvue_type_script_lang_js_ = (Avatarvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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-22.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./src/components/topRail/multiplayerViewUsers/avatar/avatar.scss?vue&type=style&index=0&id=1c50a604&prod&scoped=true&lang=scss&
+var avatarvue_type_style_index_0_id_1c50a604_prod_scoped_true_lang_scss_ = __webpack_require__(27758);
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/avatar/avatar.scss?vue&type=style&index=0&id=1c50a604&prod&scoped=true&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/avatar/Avatar.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var Avatar_component = normalizeComponent(
+  avatar_Avatarvue_type_script_lang_js_,
+  Avatarvue_type_template_id_1c50a604_scoped_true_render,
+  Avatarvue_type_template_id_1c50a604_scoped_true_staticRenderFns,
+  false,
+  null,
+  "1c50a604",
+  null
+  
+)
+
+/* harmony default export */ var Avatar = (Avatar_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue?vue&type=script&lang=js&
+
+/* harmony default export */ var MultiplayerViewUsersvue_type_script_lang_js_ = ({
+  components: {
+    Avatar: Avatar
+  },
+  props: {
+    players: {
+      type: Array,
+      required: true
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue?vue&type=script&lang=js&
+ /* harmony default export */ var multiplayerViewUsers_MultiplayerViewUsersvue_type_script_lang_js_ = (MultiplayerViewUsersvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue
+
+
+
+
+
+/* normalize component */
+;
+var MultiplayerViewUsers_component = normalizeComponent(
+  multiplayerViewUsers_MultiplayerViewUsersvue_type_script_lang_js_,
+  MultiplayerViewUsersvue_type_template_id_2504b8f1_render,
+  MultiplayerViewUsersvue_type_template_id_2504b8f1_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var MultiplayerViewUsers = (MultiplayerViewUsers_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/topRail/TopRail.vue?vue&type=script&lang=js&
 
 
@@ -46741,11 +47080,13 @@ var ValidatePanel_component = normalizeComponent(
 
 
 
+
 /* harmony default export */ var TopRailvue_type_script_lang_js_ = ({
   components: {
     ValidateButton: ValidateButton,
     ValidateIssue: ValidateIssue,
-    ValidatePanel: ValidatePanel
+    ValidatePanel: ValidatePanel,
+    MultiplayerViewUsers: MultiplayerViewUsers
   },
   props: {
     validationErrors: {
@@ -46755,6 +47096,10 @@ var ValidatePanel_component = normalizeComponent(
     warnings: {
       type: Array,
       required: true
+    },
+    players: {
+      type: Array,
+      required: false
     }
   },
   data: function data() {
@@ -46813,9 +47158,9 @@ var ValidatePanel_component = normalizeComponent(
 });
 ;// CONCATENATED MODULE: ./src/components/topRail/TopRail.vue?vue&type=script&lang=js&
  /* harmony default export */ var topRail_TopRailvue_type_script_lang_js_ = (TopRailvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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-22.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./src/components/topRail/topRail.scss?vue&type=style&index=0&id=78331cf6&prod&scoped=true&lang=scss&
-var topRailvue_type_style_index_0_id_78331cf6_prod_scoped_true_lang_scss_ = __webpack_require__(71175);
-;// CONCATENATED MODULE: ./src/components/topRail/topRail.scss?vue&type=style&index=0&id=78331cf6&prod&scoped=true&lang=scss&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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-22.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./src/components/topRail/topRail.scss?vue&type=style&index=0&id=f6aad76c&prod&scoped=true&lang=scss&
+var topRailvue_type_style_index_0_id_f6aad76c_prod_scoped_true_lang_scss_ = __webpack_require__(19550);
+;// CONCATENATED MODULE: ./src/components/topRail/topRail.scss?vue&type=style&index=0&id=f6aad76c&prod&scoped=true&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/topRail/TopRail.vue
 
@@ -46828,11 +47173,11 @@ var topRailvue_type_style_index_0_id_78331cf6_prod_scoped_true_lang_scss_ = __we
 
 var TopRail_component = normalizeComponent(
   topRail_TopRailvue_type_script_lang_js_,
-  TopRailvue_type_template_id_78331cf6_scoped_true_render,
-  TopRailvue_type_template_id_78331cf6_scoped_true_staticRenderFns,
+  TopRailvue_type_template_id_f6aad76c_scoped_true_render,
+  TopRailvue_type_template_id_f6aad76c_scoped_true_staticRenderFns,
   false,
   null,
-  "78331cf6",
+  "f6aad76c",
   null
   
 )
@@ -46854,7 +47199,7 @@ var TopRail_component = normalizeComponent(
     TopRail: TopRail,
     FontAwesomeIcon: vue_fontawesome_namespaceObject.FontAwesomeIcon
   },
-  props: ['canvasDragPosition', 'cursor', 'paperManager', 'isRendering', 'breadcrumbData', 'panelsCompressed', 'validationErrors', 'warnings', 'xmlManager', 'validationBar', 'extraActions'],
+  props: ['canvasDragPosition', 'cursor', 'paperManager', 'isRendering', 'breadcrumbData', 'panelsCompressed', 'validationErrors', 'warnings', 'xmlManager', 'validationBar', 'players', 'extraActions'],
   watch: {
     miniMapOpen: function miniMapOpen(isOpen) {
       this.$emit('toggle-mini-map-open', isOpen);
@@ -47010,8 +47355,8 @@ var toolbarvue_type_style_index_0_prod_lang_scss_ = __webpack_require__(4283);
 
 var ToolBar_component = normalizeComponent(
   toolbar_ToolBarvue_type_script_lang_js_,
-  ToolBarvue_type_template_id_337414c0_render,
-  ToolBarvue_type_template_id_337414c0_staticRenderFns,
+  ToolBarvue_type_template_id_a14390d2_render,
+  ToolBarvue_type_template_id_a14390d2_staticRenderFns,
   false,
   null,
   null,
@@ -47737,8 +48082,8 @@ var validTasks = ['bpmn:ServiceTask', 'bpmn:ManualTask', 'bpmn:CallActivity', 'b
       var nodes = this.highlightedNodes;
       var selector = this.$refs.selector.$el;
       var flowNodeTypes = [sequenceFlow_id, poolLane_config_id, association_id, messageFlow_config_id, genericFlow_config_id];
-      var dataInputAssociationNodeTypes = [config_id];
-      var dataOutputAssociationNodeTypes = [id];
+      var dataInputAssociationNodeTypes = [dataInputAssociation_config_id];
+      var dataOutputAssociationNodeTypes = [config_id];
       if (typeof selector.getBoundingClientRect === 'function') {
         nodes.forEach(function (node) {
           if (flowNodeTypes.includes(node.type)) {
@@ -49021,7 +49366,7 @@ var DataOutputAssociation = /*#__PURE__*/function (_DataAssociation) {
       diagram.waypoint = [start, end].map(function (point) {
         return _this.moddle.create('dc:Point', point);
       });
-      var node = new Node(id, dataOutputAssociation, diagram);
+      var node = new Node(config_id, dataOutputAssociation, diagram);
       node.dataAssociationProps = {
         sourceShape: sourceShape,
         targetCoords: {
@@ -50196,7 +50541,7 @@ var crownMultiselect_component = normalizeComponent(
   computed: {
     hasPoolsOrLanesSelected: function hasPoolsOrLanesSelected() {
       return this.selected.some(function (view) {
-        return view.model.component.node.type === pool_config_id || view.model.component.node.type === poolLane_config_id;
+        return view.model.component.node.type === id || view.model.component.node.type === poolLane_config_id;
       });
     }
   },
@@ -50298,14 +50643,14 @@ var crownMultiselect_component = normalizeComponent(
       }
       // validate if there is a lane previously selected
       var pool = this.selected.find(function (shape) {
-        return shape.model.component.node.type === pool_config_id;
+        return shape.model.component.node.type === id;
       });
-      if (pool && view.model.component.node.type !== pool_config_id) {
+      if (pool && view.model.component.node.type !== id) {
         this.selected = [view];
         return;
       }
       // validate if the current selection is a pool
-      if (view.model.component && view.model.component.node.type === pool_config_id) {
+      if (view.model.component && view.model.component.node.type === id) {
         //validate if previous selection are all pools
         if (this.hasOnlyPools(this.selected)) {
           this.selectOrUnselectShape(view);
@@ -50487,7 +50832,7 @@ var crownMultiselect_component = normalizeComponent(
       shapes.forEach(function (shape) {
         var conectedLinks = _this4.graph.getConnectedLinks(shape.model);
         // if the shape is a container
-        if (shape.model.component && shape.model.component.node.type === pool_config_id) {
+        if (shape.model.component && shape.model.component.node.type === id) {
           var area = shape.model.getBBox();
           var linksInArea = paper.model.getLinks().filter(function (link) {
             var sourcePosition = link.getSourcePoint();
@@ -50591,7 +50936,7 @@ var crownMultiselect_component = normalizeComponent(
      * Filter the selected elements
      */
     filterSelected: function filterSelected() {
-      var flowTypes = [sequenceFlow_id, id, config_id, association_id, messageFlow_config_id];
+      var flowTypes = [sequenceFlow_id, config_id, dataInputAssociation_config_id, association_id, messageFlow_config_id];
       // Get the selected pools IDs
       var selectedPoolsIds = this.selected.filter(function (shape) {
         return shape.model.component;
@@ -50650,7 +50995,7 @@ var crownMultiselect_component = normalizeComponent(
      */
     hasOnlyPools: function hasOnlyPools(selected) {
       var shapes = this.selected.filter(function (shape) {
-        return shape.model.component && shape.model.component.node.type === pool_config_id;
+        return shape.model.component && shape.model.component.node.type === id;
       });
       return shapes && selected.length === shapes.length;
     },
@@ -50867,7 +51212,7 @@ var crownMultiselect_component = normalizeComponent(
           if (pool) {
             return;
           }
-          if (model.getParentCell() && model.getParentCell().component.node.type === pool_config_id) {
+          if (model.getParentCell() && model.getParentCell().component.node.type === id) {
             pool = model.getParentCell();
           }
         });
@@ -50883,11 +51228,11 @@ var crownMultiselect_component = normalizeComponent(
       if (elements.length > 0) {
         var poolInSelection = elements.find(function (_ref2) {
           var model = _ref2.model;
-          return model.component && model.component.node.type === pool_config_id;
+          return model.component && model.component.node.type === id;
         });
         var elementInAPool = elements.find(function (_ref3) {
           var model = _ref3.model;
-          return model.getParentCell() && model.getParentCell().component.node.type === pool_config_id;
+          return model.getParentCell() && model.getParentCell().component.node.type === id;
         });
         return !!poolInSelection || !elementInAPool;
       }
@@ -50903,7 +51248,7 @@ var crownMultiselect_component = normalizeComponent(
       var currentPool = this.getPool(this.selected);
       var elementsUnderDivArea = this.getShapesFromPoint(event);
       var pool = elementsUnderDivArea.find(function (item) {
-        return item.model.component && item.model.component.node.type === pool_config_id;
+        return item.model.component && item.model.component.node.type === id;
       });
       this.newPool = null;
       this.oldPool = null;
@@ -51024,7 +51369,7 @@ var crownMultiselect_component = normalizeComponent(
         var pool = selected.find(function (_ref4) {
           var model = _ref4.model;
           if (model.getParentCell()) {
-            return model.getParentCell().component.node.type === pool_config_id;
+            return model.getParentCell().component.node.type === id;
           }
           return false;
         }).model.getParentCell();
@@ -51094,7 +51439,7 @@ var crownMultiselect_component = normalizeComponent(
       var pool = selected.find(function (_ref5) {
         var model = _ref5.model;
         if (model.getParentCell()) {
-          return model.getParentCell().component.node.type === pool_config_id;
+          return model.getParentCell().component.node.type === id;
         }
         return false;
       });
@@ -51145,6 +51490,82 @@ var Selection_component = normalizeComponent(
 )
 
 /* harmony default export */ var Selection = (Selection_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/multiplayer/remoteCursor/RemoteCursor.vue?vue&type=template&id=70c20f1a&scoped=true&
+var RemoteCursorvue_type_template_id_70c20f1a_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "remote-cursor",
+    style: {
+      left: _vm.left + 'px',
+      top: _vm.top + 'px'
+    }
+  }, [_c('inline-svg', {
+    attrs: {
+      "src": _vm.cursorIcon,
+      "fill": _vm.cursorColor
+    }
+  }), _c('div', {
+    staticClass: "remote-username"
+  }, [_vm._v(" " + _vm._s(_vm.username) + " ")])], 1);
+};
+var RemoteCursorvue_type_template_id_70c20f1a_scoped_true_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/multiplayer/remoteCursor/RemoteCursor.vue?vue&type=script&lang=js&
+
+
+/* harmony default export */ var RemoteCursorvue_type_script_lang_js_ = ({
+  components: {
+    InlineSvg: InlineSvgComponent
+  },
+  props: {
+    cursorColor: {
+      type: String,
+      default: '#000000'
+    },
+    username: {
+      type: String
+    },
+    top: {
+      type: Number
+    },
+    left: {
+      type: Number
+    }
+  },
+  data: function data() {
+    return {
+      cursorIcon: __webpack_require__(61264)
+    };
+  }
+});
+;// CONCATENATED MODULE: ./src/components/multiplayer/remoteCursor/RemoteCursor.vue?vue&type=script&lang=js&
+ /* harmony default export */ var remoteCursor_RemoteCursorvue_type_script_lang_js_ = (RemoteCursorvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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-22.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/multiplayer/remoteCursor/RemoteCursor.vue?vue&type=style&index=0&id=70c20f1a&prod&scoped=true&lang=scss&
+var RemoteCursorvue_type_style_index_0_id_70c20f1a_prod_scoped_true_lang_scss_ = __webpack_require__(9500);
+;// CONCATENATED MODULE: ./src/components/multiplayer/remoteCursor/RemoteCursor.vue?vue&type=style&index=0&id=70c20f1a&prod&scoped=true&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/multiplayer/remoteCursor/RemoteCursor.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var RemoteCursor_component = normalizeComponent(
+  remoteCursor_RemoteCursorvue_type_script_lang_js_,
+  RemoteCursorvue_type_template_id_70c20f1a_scoped_true_render,
+  RemoteCursorvue_type_template_id_70c20f1a_scoped_true_staticRenderFns,
+  false,
+  null,
+  "70c20f1a",
+  null
+  
+)
+
+/* harmony default export */ var RemoteCursor = (RemoteCursor_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=script&lang=js&
 
 
@@ -51214,6 +51635,7 @@ var Selection_component = normalizeComponent(
 
 
 
+
 
 
 /* harmony default export */ var Modelervue_type_script_lang_js_ = ({
@@ -51225,7 +51647,8 @@ var Selection_component = normalizeComponent(
     InspectorPanel: InspectorPanel,
     ProcessmakerModelerGenericFlow: genericFlow,
     Selection: Selection,
-    RailBottom: RailBottom
+    RailBottom: RailBottom,
+    RemoteCursor: RemoteCursor
   },
   props: {
     owner: Object,
@@ -51316,8 +51739,11 @@ var Selection_component = normalizeComponent(
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      players: [],
       showInspectorButton: true,
-      inspectorButtonRight: 65
+      inspectorButtonRight: 65,
+      multiplayer: null,
+      isMultiplayer: false
     };
   },
   watch: {
@@ -51456,7 +51882,7 @@ var Selection_component = normalizeComponent(
     },
     copyElement: function copyElement() {
       // Checking if User selected a single flow and tries to copy it, to deny it.
-      var flows = [sequenceFlow_id, id, config_id, genericFlow_config_id, process_id];
+      var flows = [sequenceFlow_id, config_id, dataInputAssociation_config_id, genericFlow_config_id, process_id];
       var boundaryEvents = [boundaryErrorEvent_id, boundaryConditionalEvent_id, boundaryEscalationEvent_id, boundaryMessageEvent_id, boundarySignalEvent_id, boundaryTimerEvent_id];
       if (this.highlightedNodes.length === 1 && (flows.includes(this.highlightedNodes[0].type) || boundaryEvents.includes(this.highlightedNodes[0].type))) return;
       store.commit('setCopiedElements', this.cloneNodesSelection());
@@ -52242,25 +52668,42 @@ var Selection_component = normalizeComponent(
         control: control
       });
     },
-    handleDrop: function handleDrop(_ref6) {
-      var _this26 = this;
+    handleDrop: function handleDrop(data) {
+      var clientX = data.clientX,
+        clientY = data.clientY,
+        control = data.control;
+      if (this.isMultiplayer) {
+        window.ProcessMaker.EventBus.$emit('multiplayer-addNode', {
+          clientX: clientX,
+          clientY: clientY,
+          control: control,
+          id: "node_".concat(this.nodeIdGenerator.getDefinitionNumber())
+        });
+      } else {
+        this.handleDropProcedure(data);
+      }
+    },
+    handleDropProcedure: function handleDropProcedure(data) {
+      var _arguments3 = arguments,
+        _this26 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
-        var clientX, clientY, control, nodeThatWillBeReplaced, definition, diagram, _this26$paperManager$, x, y, newNode, nodeMigrator;
+        var selected, clientX, clientY, control, nodeThatWillBeReplaced, id, definition, diagram, _this26$paperManager$, x, y, newNode, nodeMigrator;
         return _regeneratorRuntime().wrap(function _callee13$(_context13) {
           while (1) switch (_context13.prev = _context13.next) {
             case 0:
-              clientX = _ref6.clientX, clientY = _ref6.clientY, control = _ref6.control, nodeThatWillBeReplaced = _ref6.nodeThatWillBeReplaced;
+              selected = _arguments3.length > 1 && _arguments3[1] !== undefined ? _arguments3[1] : true;
+              clientX = data.clientX, clientY = data.clientY, control = data.control, nodeThatWillBeReplaced = data.nodeThatWillBeReplaced, id = data.id;
               _this26.validateDropTarget({
                 clientX: clientX,
                 clientY: clientY,
                 control: control
               });
               if (_this26.allowDrop) {
-                _context13.next = 4;
+                _context13.next = 5;
                 break;
               }
               return _context13.abrupt("return");
-            case 4:
+            case 5:
               definition = _this26.nodeRegistry[control.type].definition(_this26.moddle, _this26.$t);
               diagram = _this26.nodeRegistry[control.type].diagram(_this26.moddle);
               _this26$paperManager$ = _this26.paperManager.clientToGridPoint(clientX, clientY), x = _this26$paperManager$.x, y = _this26$paperManager$.y;
@@ -52270,20 +52713,22 @@ var Selection_component = normalizeComponent(
               if (newNode.isBpmnType('bpmn:BoundaryEvent')) {
                 _this26.setShapeCenterUnderCursor(diagram);
               }
-              _this26.highlightNode(newNode);
-              _context13.next = 14;
-              return _this26.addNode(newNode);
-            case 14:
+              if (selected) {
+                _this26.highlightNode(newNode);
+              }
+              _context13.next = 15;
+              return _this26.addNode(newNode, id, selected);
+            case 15:
               if (nodeThatWillBeReplaced) {
-                _context13.next = 16;
+                _context13.next = 17;
                 break;
               }
               return _context13.abrupt("return");
-            case 16:
+            case 17:
               nodeMigrator = new NodeMigrator(nodeThatWillBeReplaced, definition, _this26.graph, newNode, _this26.processes, _this26.collaboration);
               nodeMigrator.migrate();
               return _context13.abrupt("return", newNode);
-            case 19:
+            case 20:
             case "end":
               return _context13.stop();
           }
@@ -52321,38 +52766,43 @@ var Selection_component = normalizeComponent(
       }))();
     },
     addNode: function addNode(node) {
-      var _this28 = this;
+      var _arguments4 = arguments,
+        _this28 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
-        var targetProcess;
+        var id, selected, targetProcess;
         return _regeneratorRuntime().wrap(function _callee15$(_context15) {
           while (1) switch (_context15.prev = _context15.next) {
             case 0:
+              id = _arguments4.length > 1 && _arguments4[1] !== undefined ? _arguments4[1] : null;
+              selected = _arguments4.length > 2 && _arguments4[2] !== undefined ? _arguments4[2] : true;
               if (!node.pool) {
                 node.pool = _this28.poolTarget;
               }
               targetProcess = node.getTargetProcess(_this28.processes, _this28.processNode);
               addNodeToProcess(node, targetProcess);
-              node.setIds(_this28.nodeIdGenerator);
+              node.setIds(_this28.nodeIdGenerator, id);
               _this28.planeElements.push(node.diagram);
               store.commit('addNode', node);
               _this28.poolTarget = null;
 
               // add processmaker-modeler-generic-flow
-              if (![sequenceFlow_id, poolLane_config_id, association_id, messageFlow_config_id, id, config_id, genericFlow_config_id].includes(node.type)) {
-                _context15.next = 9;
+              if (![sequenceFlow_id, poolLane_config_id, association_id, messageFlow_config_id, config_id, dataInputAssociation_config_id, genericFlow_config_id].includes(node.type)) {
+                _context15.next = 11;
                 break;
               }
               return _context15.abrupt("return");
-            case 9:
-              // Select the node after it has been added to the store (does not apply to flows)
-              _this28.selectNewNode(node);
+            case 11:
+              if (selected) {
+                // Select the node after it has been added to the store (does not apply to flows)
+                _this28.selectNewNode(node);
+              }
               return _context15.abrupt("return", new Promise(function (resolve) {
                 setTimeout(function () {
                   _this28.pushToUndoStack();
                   resolve();
                 });
               }));
-            case 11:
+            case 13:
             case "end":
               return _context15.stop();
           }
@@ -52383,14 +52833,14 @@ var Selection_component = normalizeComponent(
       }))();
     },
     removeNode: function removeNode(node) {
-      var _arguments3 = arguments,
+      var _arguments5 = arguments,
         _this30 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
-        var _ref7, _ref7$removeRelations, removeRelationships;
+        var _ref6, _ref6$removeRelations, removeRelationships;
         return _regeneratorRuntime().wrap(function _callee17$(_context17) {
           while (1) switch (_context17.prev = _context17.next) {
             case 0:
-              _ref7 = _arguments3.length > 1 && _arguments3[1] !== undefined ? _arguments3[1] : {}, _ref7$removeRelations = _ref7.removeRelationships, removeRelationships = _ref7$removeRelations === void 0 ? true : _ref7$removeRelations;
+              _ref6 = _arguments5.length > 1 && _arguments5[1] !== undefined ? _arguments5[1] : {}, _ref6$removeRelations = _ref6.removeRelationships, removeRelationships = _ref6$removeRelations === void 0 ? true : _ref6$removeRelations;
               if (node) {
                 _context17.next = 3;
                 break;
@@ -52476,10 +52926,10 @@ var Selection_component = normalizeComponent(
         }, _callee20);
       }))();
     },
-    replaceNode: function replaceNode(_ref10) {
+    replaceNode: function replaceNode(_ref9) {
       var _this32 = this;
-      var node = _ref10.node,
-        typeToReplaceWith = _ref10.typeToReplaceWith;
+      var node = _ref9.node,
+        typeToReplaceWith = _ref9.typeToReplaceWith;
       this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
         return _regeneratorRuntime().wrap(function _callee22$(_context22) {
           while (1) switch (_context22.prev = _context22.next) {
@@ -52492,7 +52942,7 @@ var Selection_component = normalizeComponent(
                     case 0:
                       _this32$paper$localTo = _this32.paper.localToClientPoint(node.diagram.bounds), clientX = _this32$paper$localTo.x, clientY = _this32$paper$localTo.y;
                       _context21.next = 3;
-                      return _this32.handleDrop({
+                      return _this32.handleDropProcedure({
                         clientX: clientX,
                         clientY: clientY,
                         control: {
@@ -52522,11 +52972,11 @@ var Selection_component = normalizeComponent(
         }, _callee22);
       })));
     },
-    replaceGenericFlow: function replaceGenericFlow(_ref13) {
+    replaceGenericFlow: function replaceGenericFlow(_ref12) {
       var _this33 = this;
-      var actualFlow = _ref13.actualFlow,
-        genericFlow = _ref13.genericFlow,
-        targetNode = _ref13.targetNode;
+      var actualFlow = _ref12.actualFlow,
+        genericFlow = _ref12.genericFlow,
+        targetNode = _ref12.targetNode;
       this.performSingleUndoRedoTransaction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
         return _regeneratorRuntime().wrap(function _callee24$(_context24) {
           while (1) switch (_context24.prev = _context24.next) {
@@ -52639,10 +53089,10 @@ var Selection_component = normalizeComponent(
       this.parentHeight = clientHeight + 'px';
       this.paperManager.setPaperDimensions(clientWidth, clientHeight);
     },
-    validateDropTarget: function validateDropTarget(_ref16) {
-      var clientX = _ref16.clientX,
-        clientY = _ref16.clientY,
-        control = _ref16.control;
+    validateDropTarget: function validateDropTarget(_ref15) {
+      var clientX = _ref15.clientX,
+        clientY = _ref15.clientY,
+        control = _ref15.control;
       var _getValidationPropert = getValidationProperties(clientX, clientY, control, this.paperManager.paper, this.graph, this.collaboration, this.$refs['paper-container']),
         allowDrop = _getValidationPropert.allowDrop,
         poolTarget = _getValidationPropert.poolTarget;
@@ -52802,6 +53252,9 @@ var Selection_component = normalizeComponent(
       this.isDragging = false;
       this.dragStart = null;
       this.isSelecting = false;
+    },
+    enableMultiplayer: function enableMultiplayer() {
+      this.isMultiplayer = true;
     }
   },
   created: function created() {
@@ -52869,8 +53322,8 @@ var Selection_component = normalizeComponent(
       _this38.isOverShape = false;
       _this38.pointerDownHandler(event);
     }, this);
-    this.paperManager.addEventHandler('cell:mouseover element:mouseover', function (_ref17) {
-      var shape = _ref17.model;
+    this.paperManager.addEventHandler('cell:mouseover element:mouseover', function (_ref16) {
+      var shape = _ref16.model;
       if (_this38.isBpmnNode(shape) && shape.attr('body/cursor') !== 'default' && !_this38.isGrabbing) {
         shape.attr('body/cursor', 'move');
       }
@@ -52906,8 +53359,8 @@ var Selection_component = normalizeComponent(
         clickHandler(cellView, evt, x, y);
       }
     });
-    this.paperManager.addEventHandler('cell:pointerclick', function (_ref18, event) {
-      var shape = _ref18.model;
+    this.paperManager.addEventHandler('cell:pointerclick', function (_ref17, event) {
+      var shape = _ref17.model;
       if (!_this38.isBpmnNode(shape)) {
         return;
       }
@@ -52920,8 +53373,8 @@ var Selection_component = normalizeComponent(
         node: _this38.highlightedNode.definition
       });
     });
-    this.paperManager.addEventHandler('cell:pointerdown', function (_ref19, event) {
-      var shape = _ref19.model;
+    this.paperManager.addEventHandler('cell:pointerdown', function (_ref18, event) {
+      var shape = _ref18.model;
       if (!_this38.isBpmnNode(shape)) {
         return;
       }
@@ -52966,6 +53419,13 @@ var Selection_component = normalizeComponent(
                 _context27.next = 4;
                 return undoRedoStore.dispatch('pushState', xml);
               case 4:
+                if (_this38.isMultiplayer) {
+                  window.ProcessMaker.EventBus.$emit('multiplayer-start', {
+                    modeler: _this38,
+                    callback: _this38.enableMultiplayer
+                  });
+                }
+              case 5:
               case "end":
                 return _context27.stop();
             }
@@ -53002,8 +53462,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_2dc9597e_render,
-  Modelervue_type_template_id_2dc9597e_staticRenderFns,
+  Modelervue_type_template_id_10fee576_render,
+  Modelervue_type_template_id_10fee576_staticRenderFns,
   false,
   null,
   null,