@processmaker/modeler 1.39.5 → 1.39.6

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:
@@ -11064,6 +11085,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:
@@ -21593,6 +21635,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__) {
 
@@ -21977,6 +22035,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__) {
 
@@ -22883,6 +22957,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 +27562,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 +27638,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 +27668,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 +27693,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 +27878,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 +30997,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 +31238,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 +42543,10 @@ var ValidationStatus_component = normalizeComponent(
 )
 
 /* harmony default export */ var ValidationStatus = (ValidationStatus_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=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=2dc9597e&
 
 
-var Modelervue_type_template_id_581e9191_render = function render() {
+var Modelervue_type_template_id_2dc9597e_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -42435,14 +42619,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 +42704,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;
         },
@@ -42557,9 +42762,9 @@ var Modelervue_type_template_id_581e9191_render = function render() {
     }
   }) : _vm._e()], 2)], 1);
 };
-var Modelervue_type_template_id_581e9191_staticRenderFns = [];
+var Modelervue_type_template_id_2dc9597e_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=581e9191&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=2dc9597e&
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/nodes/boundaryEvent/boundaryEvent.vue?vue&type=template&id=2979ecac&
 var boundaryEventvue_type_template_id_2979ecac_render = function render() {
@@ -44510,6 +44715,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
 
 
@@ -50720,10 +51213,12 @@ var Selection_component = normalizeComponent(
 
 
 
+
 
 
 /* harmony default export */ var Modelervue_type_script_lang_js_ = ({
   components: {
+    PreviewPanel: PreviewPanel,
     ToolBar: ToolBar,
     ExplorerRail: explorer,
     InspectorButton: InspectorButton,
@@ -50802,6 +51297,7 @@ var Selection_component = normalizeComponent(
       miniMapOpen: false,
       panelsCompressed: false,
       isOpenInspector: false,
+      isOpenPreview: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
@@ -50819,7 +51315,9 @@ var Selection_component = normalizeComponent(
       isDragging: false,
       isSelecting: false,
       isIntoTheSelection: false,
-      dragStart: null
+      dragStart: null,
+      showInspectorButton: true,
+      inspectorButtonRight: 65
     };
   },
   watch: {
@@ -50895,8 +51393,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 +53002,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_2dc9597e_render,
+  Modelervue_type_template_id_2dc9597e_staticRenderFns,
   false,
   null,
   null,