@processmaker/modeler 1.39.5 → 1.39.7

package/dist/modeler.common.js

@@ -10530,6 +10530,27 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".invalid .multiselect__tags{border-col
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 15933:
+/***/ (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, ".no-preview[data-v-7ec3935d]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#44494e;padding:5px}.no-preview img[data-v-7ec3935d]{max-width:50%;width:auto;padding-bottom:150px}.no-preview h1[data-v-7ec3935d]{text-align:center;font-weight:700;font-size:xx-large;margin-bottom:50px}.no-preview h2[data-v-7ec3935d]{text-align:center;font-size:x-large}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 54490:
@@ -10854,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:
@@ -11064,6 +11106,27 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".inspector-button[data-v-cebfb20a]{pos
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 50304:
+/***/ (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, "#preview_panel[data-v-03688ded]:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";left:0;width:5px;height:100%;cursor:ew-resize}.preview-column[data-v-03688ded]{max-width:400px;resize:both;overflow:auto;background-color:#f5f5f5;border-left:8px solid #ebeef2}.paneiframe[data-v-03688ded]{display:block;width:100%}.preview-column .control-bar[data-v-03688ded]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-column .control-bar .actions[data-v-03688ded]{text-align:right}.preview-column .control-bar .actions div[data-v-03688ded]{width:100%;text-align:right}.preview-column .control-bar .actions div i[data-v-03688ded]{width:20px;cursor:pointer}.item-title[data-v-03688ded]{margin-top:15px;height:30px;font-size:larger;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#7f7f7f}.item-title[data-v-03688ded],.task-title[data-v-03688ded]{width:100%;text-align:center}.task-title[data-v-03688ded]{height:60px;font-size:xx-large;font-weight:700;color:#6c757d}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 4856:
@@ -11263,7 +11326,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".toolbar{z-index:3;height:4rem;cursor:
 
 /***/ }),
 
-/***/ 39047:
+/***/ 53984:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11277,7 +11340,28 @@ __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, ".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";
+__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, ".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___);
 
@@ -21593,6 +21677,22 @@ var update = add("09eb9076", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 70732:
+/***/ (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__(15933);
+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("1d1c3380", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 96834:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -21817,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__) {
 
@@ -21977,6 +22093,22 @@ var update = add("4846705d", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 85133:
+/***/ (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__(50304);
+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("17e30252", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 78922:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -22121,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__(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("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__(39047);
+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("067e2659", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("54b780e6", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -22867,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__) {
 
@@ -22883,6 +23039,14 @@ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACN
 
 /***/ }),
 
+/***/ 2431:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+module.exports = __webpack_require__.p + "img/noPreviewImage.92c2fe15.png";
+
+/***/ }),
+
 /***/ 79210:
 /***/ (function(module) {
 
@@ -27480,8 +27644,8 @@ var direction = {
   one: 'One',
   both: 'Both'
 };
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/crown/crownConfig/crownConfig.vue?vue&type=template&id=6b34931c&
-var crownConfigvue_type_template_id_6b34931c_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/crown/crownConfig/crownConfig.vue?vue&type=template&id=aeb192b4&
+var crownConfigvue_type_template_id_aeb192b4_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _vm.showCrownConfig ? _c('div', {
@@ -27556,6 +27720,12 @@ var crownConfigvue_type_template_id_6b34931c_render = function render() {
       "shape": _vm.shape,
       "node": _vm.node
     }
+  }, _vm.$listeners)), _c('preview-button', _vm._g({
+    attrs: {
+      "graph": _vm.graph,
+      "shape": _vm.shape,
+      "node": _vm.node
+    }
   }, _vm.$listeners)), _c('b-modal', {
     ref: "modal",
     attrs: {
@@ -27580,15 +27750,17 @@ var crownConfigvue_type_template_id_6b34931c_render = function render() {
     }
   }, [_c('p', [_vm._v(_vm._s(_vm.$t('Changing this type will replace your current configuration')))])])], 2) : _vm._e();
 };
-var crownConfigvue_type_template_id_6b34931c_staticRenderFns = [];
+var crownConfigvue_type_template_id_aeb192b4_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.keys.js
 var es_object_keys = __webpack_require__(47941);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/crown/crownButtons/deleteButton.vue?vue&type=template&id=59648d83&
-var deleteButtonvue_type_template_id_59648d83_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/crown/crownButtons/previewButton.vue?vue&type=template&id=a7930852&
+
+var previewButtonvue_type_template_id_a7930852_render = function render() {
+  var _vm$node;
   var _vm = this,
     _c = _vm._self._c;
-  return _c('crown-button', {
+  return (_vm$node = _vm.node).isBpmnType.apply(_vm$node, _toConsumableArray(_vm.validPreviewElements)) ? _c('crown-button', {
     directives: [{
       name: "b-tooltip",
       rawName: "v-b-tooltip.hover.viewport.d50",
@@ -27603,21 +27775,23 @@ var deleteButtonvue_type_template_id_59648d83_render = function render() {
       }
     }],
     attrs: {
-      "title": _vm.$t('Delete'),
+      "title": _vm.$t('Preview'),
       "role": "menuitem",
-      "id": "delete-button",
-      "aria-label": "Delete this node"
+      "id": "preview-button",
+      "aria-label": "Preview"
     },
     on: {
       "click": function click($event) {
-        _vm.isPoolLane ? _vm.removePoolLaneShape() : _vm.removeShape();
+        return _vm.preview();
       }
     }
   }, [_c('i', {
-    staticClass: "fas fa-trash-alt cog-container--button"
-  })]);
+    staticClass: "fas fa-eye cog-container--button"
+  })]) : _vm._e();
 };
-var deleteButtonvue_type_template_id_59648d83_staticRenderFns = [];
+var previewButtonvue_type_template_id_a7930852_staticRenderFns = [];
+
+;// CONCATENATED MODULE: ./src/components/crown/crownButtons/previewButton.vue?vue&type=template&id=a7930852&
 
 ;// CONCATENATED MODULE: ./src/assets/trash-alt-solid.svg
 var trash_alt_solid_namespaceObject = __webpack_require__.p + "img/trash-alt-solid.9d41abd9.svg";
@@ -27786,6 +27960,96 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var crownButton = (component.exports);
+;// CONCATENATED MODULE: ./src/components/crown/crownButtons/validPreviewElements.js
+var validPreviewElements = ['bpmn:Task', 'bpmn:UserTask', 'bpmn:GlobalTask', 'bpmn:CallActivity', 'bpmn:ManualTask', 'bpmn:ScriptTask', 'bpmn:ServiceTask'];
+/* harmony default export */ var crownButtons_validPreviewElements = (validPreviewElements);
+;// 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/crown/crownButtons/previewButton.vue?vue&type=script&lang=js&
+
+
+
+/* harmony default export */ var previewButtonvue_type_script_lang_js_ = ({
+  components: {
+    CrownButton: crownButton
+  },
+  props: {
+    graph: Object,
+    shape: Object,
+    node: Object
+  },
+  data: function data() {
+    return {
+      trashIcon: trash_alt_solid_namespaceObject,
+      validPreviewElements: crownButtons_validPreviewElements
+    };
+  },
+  computed: {
+    isPoolLane: function isPoolLane() {
+      return this.node.type === 'processmaker-modeler-lane';
+    }
+  },
+  methods: {
+    preview: function preview() {
+      this.$emit('previewNode', this.node);
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/crown/crownButtons/previewButton.vue?vue&type=script&lang=js&
+ /* harmony default export */ var crownButtons_previewButtonvue_type_script_lang_js_ = (previewButtonvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./src/components/crown/crownButtons/previewButton.vue
+
+
+
+
+
+/* normalize component */
+;
+var previewButton_component = normalizeComponent(
+  crownButtons_previewButtonvue_type_script_lang_js_,
+  previewButtonvue_type_template_id_a7930852_render,
+  previewButtonvue_type_template_id_a7930852_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var previewButton = (previewButton_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/crown/crownButtons/deleteButton.vue?vue&type=template&id=59648d83&
+var deleteButtonvue_type_template_id_59648d83_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('crown-button', {
+    directives: [{
+      name: "b-tooltip",
+      rawName: "v-b-tooltip.hover.viewport.d50",
+      value: {
+        customClass: 'no-pointer-events'
+      },
+      expression: "{ customClass: 'no-pointer-events' }",
+      modifiers: {
+        "hover": true,
+        "viewport": true,
+        "d50": true
+      }
+    }],
+    attrs: {
+      "title": _vm.$t('Delete'),
+      "role": "menuitem",
+      "id": "delete-button",
+      "aria-label": "Delete this node"
+    },
+    on: {
+      "click": function click($event) {
+        _vm.isPoolLane ? _vm.removePoolLaneShape() : _vm.removeShape();
+      }
+    }
+  }, [_c('i', {
+    staticClass: "fas fa-trash-alt cog-container--button"
+  })]);
+};
+var deleteButtonvue_type_template_id_59648d83_staticRenderFns = [];
+
 ;// CONCATENATED MODULE: external "lodash"
 var external_lodash_namespaceObject = require("lodash");
 var external_lodash_default = /*#__PURE__*/__webpack_require__.n(external_lodash_namespaceObject);
@@ -30815,11 +31079,13 @@ function runningInCypressTest() {
 
 
 
+
 
 
 /* harmony default export */ var crownConfigvue_type_script_lang_js_ = ({
   components: {
     CrownDropdowns: crownDropdowns,
+    PreviewButton: previewButton,
     DeleteButton: deleteButton,
     GenericFlowButton: genericFlowButton,
     AssociationFlowButton: associationFlowButton,
@@ -31054,8 +31320,8 @@ var crownConfigvue_type_style_index_0_prod_lang_scss_ = __webpack_require__(3656
 
 var crownConfig_component = normalizeComponent(
   crownConfig_crownConfigvue_type_script_lang_js_,
-  crownConfigvue_type_template_id_6b34931c_render,
-  crownConfigvue_type_template_id_6b34931c_staticRenderFns,
+  crownConfigvue_type_template_id_aeb192b4_render,
+  crownConfigvue_type_template_id_aeb192b4_staticRenderFns,
   false,
   null,
   null,
@@ -42359,10 +42625,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=581e9191&
+;// 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=785a1a64&
 
 
-var Modelervue_type_template_id_581e9191_render = function render() {
+
+var Modelervue_type_template_id_785a1a64_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -42382,7 +42649,8 @@ var Modelervue_type_template_id_581e9191_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,
@@ -42435,14 +42703,32 @@ var Modelervue_type_template_id_581e9191_render = function render() {
     attrs: {
       "data-test": "paper"
     }
-  })]), _vm.showComponent ? _c('InspectorButton', {
+  })]), _vm.showComponent && _vm.showInspectorButton ? _c('InspectorButton', {
+    ref: "inspector-button",
+    style: {
+      right: _vm.inspectorButtonRight + 'px'
+    },
     attrs: {
       "showInspector": _vm.isOpenInspector
     },
     on: {
-      "toggleInspector": _vm.handleToggleInspector
+      "toggleInspector": function toggleInspector($event) {
+        [_vm.handleToggleInspector($event), _vm.setInspectorButtonPosition($event)];
+      }
     }
-  }) : _vm._e(), _vm.showComponent ? _c('InspectorPanel', {
+  }) : _vm._e(), _c('PreviewPanel', {
+    ref: "preview-panel",
+    attrs: {
+      "visible": _vm.isOpenPreview,
+      "nodeRegistry": _vm.nodeRegistry
+    },
+    on: {
+      "togglePreview": function togglePreview($event) {
+        [_vm.handleTogglePreview($event), _vm.setInspectorButtonPosition($event)];
+      },
+      "previewResize": _vm.setInspectorButtonPosition
+    }
+  }), _vm.showComponent ? _c('InspectorPanel', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -42502,6 +42788,9 @@ var Modelervue_type_template_id_581e9191_render = function render() {
       on: {
         "add-node": _vm.addNode,
         "remove-node": _vm.removeNode,
+        "previewNode": function previewNode($event) {
+          [_vm.handlePreview($event), _vm.setInspectorButtonPosition($event)];
+        },
         "set-cursor": function setCursor($event) {
           _vm.cursor = $event;
         },
@@ -42555,11 +42844,21 @@ var Modelervue_type_template_id_581e9191_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_581e9191_staticRenderFns = [];
+var Modelervue_type_template_id_785a1a64_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=581e9191&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=785a1a64&
 
 ;// 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() {
@@ -44510,6 +44809,294 @@ var InspectorPanel_component = normalizeComponent(
 )
 
 /* harmony default export */ var InspectorPanel = (InspectorPanel_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/inspectors/PreviewPanel.vue?vue&type=template&id=03688ded&scoped=true&
+var PreviewPanelvue_type_template_id_03688ded_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('b-col', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.visible,
+      expression: "visible"
+    }],
+    staticClass: "pl-0 h-100 overflow-hidden preview-column",
+    style: {
+      maxWidth: _vm.width + 'px'
+    },
+    attrs: {
+      "id": "preview_panel",
+      "data-test": "preview-column"
+    },
+    on: {
+      "mousedown": _vm.onMouseDown,
+      "mouseup": _vm.onMouseUp,
+      "mousemove": _vm.onMouseMove
+    }
+  }, [_c('b-row', {
+    staticClass: "control-bar"
+  }, [_c('b-col', {
+    attrs: {
+      "cols": "9"
+    }
+  }, [_c('div', [_c('i', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.selectedPreview == 1,
+      expression: "selectedPreview == 1"
+    }],
+    staticClass: "fas fa-file-alt"
+  }), _c('b', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.selectedPreview == 2,
+      expression: "selectedPreview == 2"
+    }]
+  }, [_vm._v(" {} ")]), _c('b-dropdown', {
+    staticClass: "dropdown-right",
+    staticStyle: {
+      "margin-top": "-10px"
+    },
+    attrs: {
+      "variant": "ellipsis",
+      "no-caret": "",
+      "no-flip": "",
+      "lazy": ""
+    },
+    scopedSlots: _vm._u([{
+      key: "button-content",
+      fn: function fn() {
+        return [_c('i', {
+          staticClass: "fas fa-sort-down"
+        })];
+      },
+      proxy: true
+    }]),
+    model: {
+      value: _vm.selectedPreview,
+      callback: function callback($$v) {
+        _vm.selectedPreview = $$v;
+      },
+      expression: "selectedPreview"
+    }
+  }, [_c('b-dropdown-item', {
+    key: "1",
+    staticClass: "ellipsis-dropdown-item mx-auto",
+    on: {
+      "click": function click($event) {
+        return _vm.onSelectedPreview(1);
+      }
+    }
+  }, [_c('div', {
+    staticClass: "ellipsis-dropdown-content"
+  }, [_c('b', {
+    staticClass: "pr-1 fa-fw fas fa-file-alt"
+  }), _c('span', [_vm._v(_vm._s(_vm.$t('Document')))])])]), _c('b-dropdown-item', {
+    key: "2",
+    staticClass: "ellipsis-dropdown-item mx-auto",
+    on: {
+      "click": function click($event) {
+        return _vm.onSelectedPreview(2);
+      }
+    }
+  }, [_c('div', {
+    staticClass: "ellipsis-dropdown-content"
+  }, [_c('b', {
+    staticClass: "pr-1 fa-fw"
+  }, [_vm._v("{ }")]), _c('span', [_vm._v(_vm._s(_vm.$t('Object')))])])])], 1), _c('span', [_vm._v(_vm._s(_vm.$t('Preview')) + " - " + _vm._s(_vm.taskTitle))])], 1)]), _c('b-col', {
+    staticClass: "actions"
+  }, [_c('div', [_c('i', {
+    staticClass: "fas fa-external-link-alt"
+  }), _c('i', {
+    staticClass: "fas fa-times",
+    on: {
+      "click": function click($event) {
+        return _vm.onClose();
+      }
+    }
+  })])])], 1), _c('b-row', [_c('div', {
+    staticStyle: {
+      "background-color": "#0074D9",
+      "height": "20px",
+      "width": "100%"
+    }
+  }, [_vm._v(" ")])]), _c('b-row', [_c('div', {
+    staticClass: "item-title"
+  }, [_vm._v(" " + _vm._s(_vm.screenTitle) + " ")]), _c('div', {
+    staticClass: "task-title"
+  }, [_vm._v(" " + _vm._s(_vm.taskTitle) + " ")])]), _c('no-preview-available')], 1);
+};
+var PreviewPanelvue_type_template_id_03688ded_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/inspectors/NoPreviewAvailable.vue?vue&type=template&id=7ec3935d&scoped=true&
+var NoPreviewAvailablevue_type_template_id_7ec3935d_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "no-preview"
+  }, [_c('img', {
+    attrs: {
+      "src": _vm.noPreviewImg,
+      "alt": "no preview"
+    }
+  }), _c('h1', [_vm._v("No Screen Asigned")]), _c('h2', [_vm._v("This is a placeholder screen. Please, assign a screen to this task.")])]);
+};
+var NoPreviewAvailablevue_type_template_id_7ec3935d_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/inspectors/NoPreviewAvailable.vue?vue&type=script&lang=js&
+/* harmony default export */ var NoPreviewAvailablevue_type_script_lang_js_ = ({
+  data: function data() {
+    return {
+      noPreviewImg: __webpack_require__(2431)
+    };
+  }
+});
+;// CONCATENATED MODULE: ./src/components/inspectors/NoPreviewAvailable.vue?vue&type=script&lang=js&
+ /* harmony default export */ var inspectors_NoPreviewAvailablevue_type_script_lang_js_ = (NoPreviewAvailablevue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/inspectors/NoPreviewAvailable.vue?vue&type=style&index=0&id=7ec3935d&prod&scoped=true&lang=css&
+var NoPreviewAvailablevue_type_style_index_0_id_7ec3935d_prod_scoped_true_lang_css_ = __webpack_require__(70732);
+;// CONCATENATED MODULE: ./src/components/inspectors/NoPreviewAvailable.vue?vue&type=style&index=0&id=7ec3935d&prod&scoped=true&lang=css&
+
+;// CONCATENATED MODULE: ./src/components/inspectors/NoPreviewAvailable.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var NoPreviewAvailable_component = normalizeComponent(
+  inspectors_NoPreviewAvailablevue_type_script_lang_js_,
+  NoPreviewAvailablevue_type_template_id_7ec3935d_scoped_true_render,
+  NoPreviewAvailablevue_type_template_id_7ec3935d_scoped_true_staticRenderFns,
+  false,
+  null,
+  "7ec3935d",
+  null
+  
+)
+
+/* harmony default export */ var NoPreviewAvailable = (NoPreviewAvailable_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/inspectors/PreviewPanel.vue?vue&type=script&lang=js&
+
+
+
+/* harmony default export */ var PreviewPanelvue_type_script_lang_js_ = ({
+  props: ['nodeRegistry', 'visible'],
+  components: {
+    NoPreviewAvailable: NoPreviewAvailable
+  },
+  data: function data() {
+    return {
+      data: {},
+      selectedPreview: '1',
+      taskTitle: '',
+      screenTitle: '',
+      width: 400,
+      isDragging: false,
+      currentPos: 400
+    };
+  },
+  watch: {
+    highlightedNode: function highlightedNode() {
+      document.activeElement.blur();
+      this.prepareData();
+    },
+    'highlightedNode.definition': function highlightedNodeDefinition(current, previous) {
+      this.handleAssignmentChanges(current, previous);
+    },
+    'highlightedNode.definition.assignmentLock': function highlightedNodeDefinitionAssignmentLock(current, previous) {
+      this.handleAssignmentChanges(current, previous);
+    },
+    'highlightedNode.definition.allowReassignment': function highlightedNodeDefinitionAllowReassignment(current, previous) {
+      this.handleAssignmentChanges(current, previous);
+    },
+    'highlightedNode.definition.assignedUsers': function highlightedNodeDefinitionAssignedUsers(current, previous) {
+      this.handleAssignmentChanges(current, previous);
+    },
+    'highlightedNode.definition.assignedGroups': function highlightedNodeDefinitionAssignedGroups(current, previous) {
+      this.handleAssignmentChanges(current, previous);
+    },
+    'highlightedNode.definition.assignmentRules': function highlightedNodeDefinitionAssignmentRules(current, previous) {
+      this.handleAssignmentChanges(current, previous);
+    }
+  },
+  computed: {
+    highlightedNode: function highlightedNode() {
+      return store.getters.highlightedNodes[0];
+    }
+  },
+  methods: {
+    prepareData: function prepareData() {
+      var _this$highlightedNode, _this$highlightedNode2;
+      if (!this.highlightedNode) {
+        return {};
+      }
+      this.taskTitle = this === null || this === void 0 ? void 0 : (_this$highlightedNode = this.highlightedNode) === null || _this$highlightedNode === void 0 ? void 0 : (_this$highlightedNode2 = _this$highlightedNode.definition) === null || _this$highlightedNode2 === void 0 ? void 0 : _this$highlightedNode2.name;
+    },
+    handleAssignmentChanges: function handleAssignmentChanges(currentValue, previousValue) {
+      if (currentValue === previousValue) {
+        return;
+      }
+      this.prepareData();
+    },
+    onSelectedPreview: function onSelectedPreview(item) {
+      this.selectedPreview = item;
+    },
+    previewNode: function previewNode(node) {
+      this.taskTitle = node === null || node === void 0 ? void 0 : node.name;
+      this.showPanel = true;
+    },
+    onClose: function onClose() {
+      this.$emit('togglePreview', false);
+    },
+    onMouseDown: function onMouseDown(event) {
+      this.isDragging = true;
+      this.currentPos = event.x;
+    },
+    onMouseUp: function onMouseUp() {
+      this.isDragging = false;
+    },
+    onMouseMove: function onMouseMove(event) {
+      if (this.isDragging) {
+        var dx = this.currentPos - event.x;
+        this.currentPos = event.x;
+        this.width = parseInt(this.width) + dx;
+        this.$emit('previewResize', this.width);
+      }
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/inspectors/PreviewPanel.vue?vue&type=script&lang=js&
+ /* harmony default export */ var inspectors_PreviewPanelvue_type_script_lang_js_ = (PreviewPanelvue_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/inspectors/preview_panel.scss?vue&type=style&index=0&id=03688ded&prod&lang=scss&scoped=true&
+var preview_panelvue_type_style_index_0_id_03688ded_prod_lang_scss_scoped_true_ = __webpack_require__(85133);
+;// CONCATENATED MODULE: ./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=03688ded&prod&lang=scss&scoped=true&
+
+;// CONCATENATED MODULE: ./src/components/inspectors/PreviewPanel.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var PreviewPanel_component = normalizeComponent(
+  inspectors_PreviewPanelvue_type_script_lang_js_,
+  PreviewPanelvue_type_template_id_03688ded_scoped_true_render,
+  PreviewPanelvue_type_template_id_03688ded_scoped_true_staticRenderFns,
+  false,
+  null,
+  "03688ded",
+  null
+  
+)
+
+/* harmony default export */ var PreviewPanel = (PreviewPanel_component.exports);
 ;// CONCATENATED MODULE: ./src/undoRedoStore.js
 
 
@@ -45682,8 +46269,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-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', {
@@ -45706,7 +46293,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, {
@@ -45826,7 +46414,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() {
@@ -45904,13 +46492,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",
@@ -45940,7 +46532,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() {
@@ -46237,6 +46829,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=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-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_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-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&
 
 
@@ -46248,11 +47068,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: {
@@ -46262,6 +47084,10 @@ var ValidatePanel_component = normalizeComponent(
     warnings: {
       type: Array,
       required: true
+    },
+    players: {
+      type: Array,
+      required: false
     }
   },
   data: function data() {
@@ -46320,9 +47146,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
 
@@ -46335,11 +47161,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
   
 )
@@ -46361,7 +47187,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);
@@ -46517,8 +47343,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,
@@ -50652,6 +51478,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&
 
 
@@ -50719,18 +51621,22 @@ var Selection_component = normalizeComponent(
 
 
 
+
+
 
 
 
 /* harmony default export */ var Modelervue_type_script_lang_js_ = ({
   components: {
+    PreviewPanel: PreviewPanel,
     ToolBar: ToolBar,
     ExplorerRail: explorer,
     InspectorButton: InspectorButton,
     InspectorPanel: InspectorPanel,
     ProcessmakerModelerGenericFlow: genericFlow,
     Selection: Selection,
-    RailBottom: RailBottom
+    RailBottom: RailBottom,
+    RemoteCursor: RemoteCursor
   },
   props: {
     owner: Object,
@@ -50802,6 +51708,7 @@ var Selection_component = normalizeComponent(
       miniMapOpen: false,
       panelsCompressed: false,
       isOpenInspector: false,
+      isOpenPreview: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
@@ -50819,7 +51726,10 @@ var Selection_component = normalizeComponent(
       isDragging: false,
       isSelecting: false,
       isIntoTheSelection: false,
-      dragStart: null
+      dragStart: null,
+      players: [],
+      showInspectorButton: true,
+      inspectorButtonRight: 65
     };
   },
   watch: {
@@ -50895,8 +51805,28 @@ var Selection_component = normalizeComponent(
       }
     },
     handleToggleInspector: function handleToggleInspector(value) {
+      this.showInspectorButton = !(value !== null && value !== void 0 ? value : true);
       this.isOpenInspector = value;
     },
+    handlePreview: function handlePreview(node) {
+      this.$refs['preview-panel'].previewNode(node);
+      this.handleTogglePreview(true);
+    },
+    handleTogglePreview: function handleTogglePreview(value) {
+      this.isOpenPreview = value;
+    },
+    setInspectorButtonPosition: function setInspectorButtonPosition() {
+      var previewWidth = this.$refs['preview-panel'].width;
+      if (this.isOpenInspector) {
+        return;
+      }
+      if (this.isOpenPreview && !this.isOpenInspector) {
+        this.inspectorButtonRight = 65 + previewWidth;
+      }
+      if (!this.isOpenPreview && !this.isOpenInspector) {
+        this.inspectorButtonRight = 65;
+      }
+    },
     isAppleOS: function isAppleOS() {
       return typeof navigator !== 'undefined' && /Mac|iPad|iPhone/.test(navigator.platform);
     },
@@ -52484,8 +53414,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_581e9191_render,
-  Modelervue_type_template_id_581e9191_staticRenderFns,
+  Modelervue_type_template_id_785a1a64_render,
+  Modelervue_type_template_id_785a1a64_staticRenderFns,
   false,
   null,
   null,