@processmaker/modeler 1.39.6 → 1.39.7

package/dist/modeler.umd.js

@@ -10885,6 +10885,27 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".crown-multiselect[data-v-bcd827ec]{to
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 49319:
+/***/ (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___);
+
+
 /***/ }),
 
 /***/ 58556:
@@ -11315,7 +11336,28 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".toolbar{z-index:3;height:4rem;cursor:
 
 /***/ }),
 
-/***/ 63476:
+/***/ 30928:
+/***/ (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___);
+
+
+/***/ }),
+
+/***/ 41462:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11329,7 +11371,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___);
 
@@ -21885,6 +21927,22 @@ var update = add("8c02cc8c", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 78841:
+/***/ (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__(49319);
+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("3635bc05", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 46678:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -22205,19 +22263,35 @@ var update = add("0828245b", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 68596:
+/***/ 99479:
 /***/ (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__(63476);
+var content = __webpack_require__(30928);
 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("0b4c4959", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("62de16fc", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 21393:
+/***/ (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__(41462);
+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("5985a3e6", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -22951,6 +23025,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__) {
 
@@ -42641,10 +42723,11 @@ var ValidationStatus_component = normalizeComponent(
 )
 
 /* harmony default export */ var ValidationStatus = (ValidationStatus_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=2dc9597e&
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=785a1a64&
 
 
-var Modelervue_type_template_id_2dc9597e_render = function render() {
+
+var Modelervue_type_template_id_785a1a64_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -42664,7 +42747,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,
@@ -42858,11 +42942,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_785a1a64_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=2dc9597e&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=785a1a64&
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/nodes/boundaryEvent/boundaryEvent.vue?vue&type=template&id=2979ecac&
 var boundaryEventvue_type_template_id_2979ecac_render = function render() {
@@ -46273,8 +46367,8 @@ function getElementPool(shape) {
 function isPool(shape) {
   return shape.component.node.type === pool_config_id;
 }
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/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-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/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', {
@@ -46297,7 +46391,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, {
@@ -46417,7 +46512,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-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/toolbar/breadcrumb/Breadcrumb.vue?vue&type=template&id=d1e148b4&scoped=true&
 var Breadcrumbvue_type_template_id_d1e148b4_scoped_true_render = function render() {
@@ -46495,13 +46590,17 @@ var Breadcrumb_component = normalizeComponent(
 )
 
 /* harmony default export */ var Breadcrumb = (Breadcrumb_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/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-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/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",
@@ -46531,7 +46630,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-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/topRail/validateControl/validateButton/ValidateButton.vue?vue&type=template&id=5880bbc6&scoped=true&
 var ValidateButtonvue_type_template_id_5880bbc6_scoped_true_render = function render() {
@@ -46828,6 +46927,234 @@ var ValidatePanel_component = normalizeComponent(
 
 
 
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue?vue&type=template&id=cfdfca9e&
+
+var MultiplayerViewUsersvue_type_template_id_cfdfca9e_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_cfdfca9e_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue?vue&type=template&id=cfdfca9e&
+
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/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-83.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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.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__(99479);
+;// 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-83.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_cfdfca9e_render,
+  MultiplayerViewUsersvue_type_template_id_cfdfca9e_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-83.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&
 
 
@@ -46839,11 +47166,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: {
@@ -46853,6 +47182,10 @@ var ValidatePanel_component = normalizeComponent(
     warnings: {
       type: Array,
       required: true
+    },
+    players: {
+      type: Array,
+      required: false
     }
   },
   data: function data() {
@@ -46911,9 +47244,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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.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__(68596);
-;// 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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.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__(21393);
+;// 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
 
@@ -46926,11 +47259,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
   
 )
@@ -46952,7 +47285,7 @@ var TopRail_component = normalizeComponent(
     TopRail: TopRail,
     FontAwesomeIcon: vue_fontawesome_.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);
@@ -47108,8 +47441,8 @@ var toolbarvue_type_style_index_0_prod_lang_scss_ = __webpack_require__(39852);
 
 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,
@@ -51243,6 +51576,82 @@ var Selection_component = normalizeComponent(
 )
 
 /* harmony default export */ var Selection = (Selection_component.exports);
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/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-83.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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.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__(78841);
+;// 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-83.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&
 
 
@@ -51312,6 +51721,7 @@ var Selection_component = normalizeComponent(
 
 
 
+
 
 
 /* harmony default export */ var Modelervue_type_script_lang_js_ = ({
@@ -51323,7 +51733,8 @@ var Selection_component = normalizeComponent(
     InspectorPanel: InspectorPanel,
     ProcessmakerModelerGenericFlow: genericFlow,
     Selection: Selection,
-    RailBottom: RailBottom
+    RailBottom: RailBottom,
+    RemoteCursor: RemoteCursor
   },
   props: {
     owner: Object,
@@ -51414,6 +51825,7 @@ var Selection_component = normalizeComponent(
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      players: [],
       showInspectorButton: true,
       inspectorButtonRight: 65
     };
@@ -53100,8 +53512,8 @@ var modelervue_type_style_index_0_prod_lang_scss_ = __webpack_require__(26695);
 
 var Modeler_component = normalizeComponent(
   modeler_Modelervue_type_script_lang_js_,
-  Modelervue_type_template_id_2dc9597e_render,
-  Modelervue_type_template_id_2dc9597e_staticRenderFns,
+  Modelervue_type_template_id_785a1a64_render,
+  Modelervue_type_template_id_785a1a64_staticRenderFns,
   false,
   null,
   null,