@processmaker/modeler 1.39.31 → 1.40.0

package/dist/modeler.umd.js

@@ -13334,14 +13334,14 @@ __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, "#preview_panel[data-v-0cafde2c]:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";left:0;width:5px;height:100%;cursor:ew-resize}.preview-column[data-v-0cafde2c]{max-width:400px;min-width:200px;resize:both;overflow:auto;background-color:#fff;border-left:8px solid #ebeef2;z-index:2}.paneiframe[data-v-0cafde2c]{display:block;width:100%}.preview-column .control-bar[data-v-0cafde2c]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-column .control-bar .actions[data-v-0cafde2c]{text-align:right}.preview-column .control-bar .actions div[data-v-0cafde2c]{width:100%;text-align:right}.preview-column .control-bar .actions div i[data-v-0cafde2c]{width:20px;cursor:pointer}.item-title[data-v-0cafde2c]{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-0cafde2c],.task-title[data-v-0cafde2c]{width:100%;text-align:center}.task-title[data-v-0cafde2c]{height:60px;font-size:xx-large;font-weight:700;color:#6c757d}.preview-placeholder[data-v-0cafde2c]{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;padding:5px}.preview-placeholder h1[data-v-0cafde2c]{margin-bottom:30px;font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.04em}.preview-placeholder h1[data-v-0cafde2c],.preview-placeholder h2[data-v-0cafde2c]{text-align:center;font-family:Open Sans,sans-serif}.preview-placeholder h2[data-v-0cafde2c]{margin-bottom:50px;font-size:18px;font-weight:400;line-height:27px;letter-spacing:-.02em}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".preview-column[data-v-0cafde2c]{min-width:200px;resize:both;overflow:auto;background-color:#fff;z-index:2}.preview-iframe[data-v-0cafde2c]{width:90%;height:100%;padding:0 30px 0 50px;border:none}.preview-column .control-bar[data-v-0cafde2c]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-type-dropdown[data-v-0cafde2c]{margin-top:-10px}.resizer-column[data-v-0cafde2c]{cursor:ew-resize;width:5px;background-color:#ebeef2}.preview-column .control-bar .actions[data-v-0cafde2c]{text-align:right}.preview-column .divider[data-v-0cafde2c]{background-color:#0074d9;height:20px;width:100%}.preview-column .control-bar .actions div[data-v-0cafde2c]{width:100%;padding-right:15px;text-align:right}.preview-column .control-bar .actions div i[data-v-0cafde2c]{width:20px;cursor:pointer}.task-title[data-v-0cafde2c]{width:100%;height:60px;font-size:xx-large;font-weight:700;text-align:center;color:#6c757d}.preview-placeholder[data-v-0cafde2c]{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;padding:5px}.preview-placeholder h1[data-v-0cafde2c]{margin-bottom:30px;font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.04em}.preview-placeholder h1[data-v-0cafde2c],.preview-placeholder h2[data-v-0cafde2c]{text-align:center;font-family:Open Sans,sans-serif}.preview-placeholder h2[data-v-0cafde2c]{margin-bottom:50px;font-size:18px;font-weight:400;line-height:27px;letter-spacing:-.02em}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 62081:
+/***/ 62013:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13355,7 +13355,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "#preview_panel[data-v-2b11953c]:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";left:0;width:5px;height:100%;cursor:ew-resize}.preview-column[data-v-2b11953c]{max-width:400px;min-width:200px;resize:both;overflow:auto;background-color:#fff;border-left:8px solid #ebeef2;z-index:2}.paneiframe[data-v-2b11953c]{display:block;width:100%}.preview-column .control-bar[data-v-2b11953c]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-column .control-bar .actions[data-v-2b11953c]{text-align:right}.preview-column .control-bar .actions div[data-v-2b11953c]{width:100%;text-align:right}.preview-column .control-bar .actions div i[data-v-2b11953c]{width:20px;cursor:pointer}.item-title[data-v-2b11953c]{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-2b11953c],.task-title[data-v-2b11953c]{width:100%;text-align:center}.task-title[data-v-2b11953c]{height:60px;font-size:xx-large;font-weight:700;color:#6c757d}.preview-placeholder[data-v-2b11953c]{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;padding:5px}.preview-placeholder h1[data-v-2b11953c]{margin-bottom:30px;font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.04em}.preview-placeholder h1[data-v-2b11953c],.preview-placeholder h2[data-v-2b11953c]{text-align:center;font-family:Open Sans,sans-serif}.preview-placeholder h2[data-v-2b11953c]{margin-bottom:50px;font-size:18px;font-weight:400;line-height:27px;letter-spacing:-.02em}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".preview-column[data-v-65cadc71]{min-width:200px;resize:both;overflow:auto;background-color:#fff;z-index:2}.preview-iframe[data-v-65cadc71]{width:90%;height:100%;padding:0 30px 0 50px;border:none}.preview-column .control-bar[data-v-65cadc71]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-type-dropdown[data-v-65cadc71]{margin-top:-10px}.resizer-column[data-v-65cadc71]{cursor:ew-resize;width:5px;background-color:#ebeef2}.preview-column .control-bar .actions[data-v-65cadc71]{text-align:right}.preview-column .divider[data-v-65cadc71]{background-color:#0074d9;height:20px;width:100%}.preview-column .control-bar .actions div[data-v-65cadc71]{width:100%;padding-right:15px;text-align:right}.preview-column .control-bar .actions div i[data-v-65cadc71]{width:20px;cursor:pointer}.task-title[data-v-65cadc71]{width:100%;height:60px;font-size:xx-large;font-weight:700;text-align:center;color:#6c757d}.preview-placeholder[data-v-65cadc71]{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;padding:5px}.preview-placeholder h1[data-v-65cadc71]{margin-bottom:30px;font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.04em}.preview-placeholder h1[data-v-65cadc71],.preview-placeholder h2[data-v-65cadc71]{text-align:center;font-family:Open Sans,sans-serif}.preview-placeholder h2[data-v-65cadc71]{margin-bottom:50px;font-size:18px;font-weight:400;line-height:27px;letter-spacing:-.02em}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -13376,7 +13376,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "#preview_panel[data-v-cdc64a14]:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";left:0;width:5px;height:100%;cursor:ew-resize}.preview-column[data-v-cdc64a14]{max-width:400px;min-width:200px;resize:both;overflow:auto;background-color:#fff;border-left:8px solid #ebeef2;z-index:2}.paneiframe[data-v-cdc64a14]{display:block;width:100%}.preview-column .control-bar[data-v-cdc64a14]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-column .control-bar .actions[data-v-cdc64a14]{text-align:right}.preview-column .control-bar .actions div[data-v-cdc64a14]{width:100%;text-align:right}.preview-column .control-bar .actions div i[data-v-cdc64a14]{width:20px;cursor:pointer}.item-title[data-v-cdc64a14]{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-cdc64a14],.task-title[data-v-cdc64a14]{width:100%;text-align:center}.task-title[data-v-cdc64a14]{height:60px;font-size:xx-large;font-weight:700;color:#6c757d}.preview-placeholder[data-v-cdc64a14]{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;padding:5px}.preview-placeholder h1[data-v-cdc64a14]{margin-bottom:30px;font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.04em}.preview-placeholder h1[data-v-cdc64a14],.preview-placeholder h2[data-v-cdc64a14]{text-align:center;font-family:Open Sans,sans-serif}.preview-placeholder h2[data-v-cdc64a14]{margin-bottom:50px;font-size:18px;font-weight:400;line-height:27px;letter-spacing:-.02em}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".preview-column[data-v-cdc64a14]{min-width:200px;resize:both;overflow:auto;background-color:#fff;z-index:2}.preview-iframe[data-v-cdc64a14]{width:90%;height:100%;padding:0 30px 0 50px;border:none}.preview-column .control-bar[data-v-cdc64a14]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-type-dropdown[data-v-cdc64a14]{margin-top:-10px}.resizer-column[data-v-cdc64a14]{cursor:ew-resize;width:5px;background-color:#ebeef2}.preview-column .control-bar .actions[data-v-cdc64a14]{text-align:right}.preview-column .divider[data-v-cdc64a14]{background-color:#0074d9;height:20px;width:100%}.preview-column .control-bar .actions div[data-v-cdc64a14]{width:100%;padding-right:15px;text-align:right}.preview-column .control-bar .actions div i[data-v-cdc64a14]{width:20px;cursor:pointer}.task-title[data-v-cdc64a14]{width:100%;height:60px;font-size:xx-large;font-weight:700;text-align:center;color:#6c757d}.preview-placeholder[data-v-cdc64a14]{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;padding:5px}.preview-placeholder h1[data-v-cdc64a14]{margin-bottom:30px;font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.04em}.preview-placeholder h1[data-v-cdc64a14],.preview-placeholder h2[data-v-cdc64a14]{text-align:center;font-family:Open Sans,sans-serif}.preview-placeholder h2[data-v-cdc64a14]{margin-bottom:50px;font-size:18px;font-weight:400;line-height:27px;letter-spacing:-.02em}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -26872,19 +26872,19 @@ var update = add("2f87229d", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 89275:
+/***/ 12031:
 /***/ (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__(62081);
+var content = __webpack_require__(62013);
 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("6028cd6b", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("11f4ee1e", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -48052,10 +48052,10 @@ var ValidationStatus_component = normalizeComponent(
 )
 
 /* harmony default export */ var ValidationStatus = (ValidationStatus_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=79f6fcfe&
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/modeler/Modeler.vue?vue&type=template&id=c9b617ac&
 
 
-var Modelervue_type_template_id_79f6fcfe_render = function render() {
+var Modelervue_type_template_id_c9b617ac_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -48122,6 +48122,12 @@ var Modelervue_type_template_id_79f6fcfe_render = function render() {
     style: {
       width: _vm.parentWidth,
       height: _vm.parentHeight
+    },
+    on: {
+      "mouseup": _vm.onMouseUp,
+      "mousemove": function mousemove($event) {
+        [_vm.onMouseMove($event), _vm.setInspectorButtonPosition($event)];
+      }
     }
   }, [_c('div', {
     ref: "paper",
@@ -48153,13 +48159,18 @@ var Modelervue_type_template_id_79f6fcfe_render = function render() {
     attrs: {
       "visible": _vm.isOpenPreview,
       "nodeRegistry": _vm.nodeRegistry,
-      "previewConfigs": _vm.previewConfigs
+      "previewConfigs": _vm.previewConfigs,
+      "panelWidth": _vm.previewPanelWidth
     },
     on: {
       "togglePreview": function togglePreview($event) {
         [_vm.handleTogglePreview($event), _vm.setInspectorButtonPosition($event)];
       },
-      "previewResize": _vm.setInspectorButtonPosition
+      "previewResize": function previewResize($event) {
+        [_vm.onMouseMove($event), _vm.setInspectorButtonPosition($event)];
+      },
+      "startResize": _vm.onStartPreviewResize,
+      "stopResize": _vm.onMouseUp
     }
   }), _vm.showComponent ? _c('InspectorPanel', {
     directives: [{
@@ -48282,9 +48293,9 @@ var Modelervue_type_template_id_79f6fcfe_render = function render() {
     }
   }) : _vm._e()], 2)], 1);
 };
-var Modelervue_type_template_id_79f6fcfe_staticRenderFns = [];
+var Modelervue_type_template_id_c9b617ac_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=79f6fcfe&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=c9b617ac&
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/nodes/boundaryEvent/boundaryEvent.vue?vue&type=template&id=58bceaa8&
 var boundaryEventvue_type_template_id_58bceaa8_render = function render() {
@@ -50511,29 +50522,34 @@ var InspectorPanel_component = normalizeComponent(
 )
 
 /* harmony default export */ var InspectorPanel = (InspectorPanel_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/inspectors/PreviewPanel.vue?vue&type=template&id=2b11953c&scoped=true&
-var PreviewPanelvue_type_template_id_2b11953c_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/inspectors/PreviewPanel.vue?vue&type=template&id=65cadc71&scoped=true&
+var PreviewPanelvue_type_template_id_65cadc71_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('b-col', {
+  return _c('b-row', {
     directives: [{
       name: "show",
       rawName: "v-show",
       value: _vm.visible,
       expression: "visible"
     }],
+    ref: "resizableDiv",
+    on: {
+      "mouseup": _vm.onMouseUp,
+      "mousemove": _vm.onMouseMove
+    }
+  }, [_c('b-col', {
+    staticClass: "col-auto p-0 resizer-column",
+    on: {
+      "mousedown": _vm.onMouseDown
+    }
+  }), _c('b-col', {
     staticClass: "pl-0 h-100 overflow-hidden preview-column",
     style: {
-      maxWidth: _vm.width + 'px'
+      width: _vm.panelWidth + 'px'
     },
     attrs: {
-      "id": "preview_panel",
       "data-test": "preview-panel"
-    },
-    on: {
-      "mousedown": _vm.onMouseDown,
-      "mouseup": _vm.onMouseUp,
-      "mousemove": _vm.onMouseMove
     }
   }, [_c('b-row', {
     staticClass: "control-bar"
@@ -50545,22 +50561,19 @@ var PreviewPanelvue_type_template_id_2b11953c_scoped_true_render = function rend
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: _vm.selectedPreview == 1,
-      expression: "selectedPreview == 1"
+      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"
+      value: _vm.selectedPreview === 2,
+      expression: "selectedPreview === 2"
     }]
   }, [_vm._v(" {} ")]), _c('b-dropdown', {
-    staticClass: "dropdown-right",
-    staticStyle: {
-      "margin-top": "-10px"
-    },
+    staticClass: "preview-type-dropdown",
     attrs: {
       "variant": "ellipsis",
       "no-caret": "",
@@ -50597,7 +50610,7 @@ var PreviewPanelvue_type_template_id_2b11953c_scoped_true_render = function rend
     staticClass: "pr-1 fa-fw fas fa-file-alt"
   }), _c('span', [_vm._v(_vm._s(_vm.$t('Document')))])])])], 1), _c('span', [_vm._v(_vm._s(_vm.$t('Preview')) + " - " + _vm._s(_vm.taskTitle))])], 1)]), _c('b-col', {
     staticClass: "actions"
-  }, [_c('div', [_c('i', {
+  }, [_c('i', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -50617,15 +50630,18 @@ var PreviewPanelvue_type_template_id_2b11953c_scoped_true_render = function rend
         return _vm.onClose();
       }
     }
-  })])])], 1), _c('b-row', [_c('div', {
-    staticStyle: {
-      "background-color": "#0074D9",
-      "height": "20px",
-      "width": "100%"
-    }
-  }, [_vm._v(" ")])]), _c('b-row', [_c('div', {
+  })])], 1), _c('b-row', {
+    staticClass: "divider"
+  }), _c('b-row', [_c('div', {
     staticClass: "task-title"
-  }, [_vm._v(" " + _vm._s(_vm.taskTitle) + " ")])]), _vm.showSpinner ? _c('loading-preview') : _vm._e(), _c('no-preview-available', {
+  }, [_vm._v(" " + _vm._s(_vm.taskTitle) + " ")])]), _c('loading-preview', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showSpinner,
+      expression: "showSpinner"
+    }]
+  }), _c('no-preview-available', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -50639,21 +50655,19 @@ var PreviewPanelvue_type_template_id_2b11953c_scoped_true_render = function rend
       value: !!_vm.previewUrl && !_vm.showSpinner,
       expression: "!!previewUrl && !showSpinner"
     }],
-    staticStyle: {
-      "width": "100%",
-      "height": "100%",
-      "border": "none"
-    },
+    staticClass: "preview-iframe",
     attrs: {
       "title": "Preview",
       "src": _vm.previewUrl
     },
     on: {
-      "load": _vm.loading
+      "load": _vm.loading,
+      "mousemove": _vm.onMouseMove,
+      "mouseup": _vm.onMouseUp
     }
-  })], 1);
+  })], 1)], 1);
 };
-var PreviewPanelvue_type_template_id_2b11953c_scoped_true_staticRenderFns = [];
+var PreviewPanelvue_type_template_id_65cadc71_scoped_true_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/inspectors/NoPreviewAvailable.vue?vue&type=template&id=cdc64a14&scoped=true&
 var NoPreviewAvailablevue_type_template_id_cdc64a14_scoped_true_render = function render() {
@@ -50789,7 +50803,7 @@ var LoadingPreview_component = normalizeComponent(
 
 
 /* harmony default export */ var PreviewPanelvue_type_script_lang_js_ = ({
-  props: ['nodeRegistry', 'visible', 'previewConfigs'],
+  props: ['nodeRegistry', 'visible', 'previewConfigs', 'panelWidth'],
   components: {
     NoPreviewAvailable: NoPreviewAvailable,
     LoadingPreview: LoadingPreview
@@ -50803,7 +50817,6 @@ var LoadingPreview_component = normalizeComponent(
       taskTitle: '',
       itemTitle: '',
       width: 600,
-      isDragging: false,
       currentPos: 600
     };
   },
@@ -50911,33 +50924,33 @@ var LoadingPreview_component = normalizeComponent(
       var nodeHasConfigParams = Object.keys(clone).length > 0;
       this.previewUrl = previewConfig && nodeHasConfigParams ? "".concat(previewConfig.url, "?node=").concat(nodeData) : null;
       this.taskTitle = (_this$highlightedNode3 = this.highlightedNode) === null || _this$highlightedNode3 === void 0 ? void 0 : (_this$highlightedNode4 = _this$highlightedNode3.definition) === null || _this$highlightedNode4 === void 0 ? void 0 : _this$highlightedNode4.name;
-      this.showPanel = true;
     },
     onClose: function onClose() {
       this.$emit('togglePreview', false);
     },
     onMouseDown: function onMouseDown(event) {
-      this.isDragging = true;
-      this.currentPos = event.x;
+      this.$emit('startResize', event);
     },
     onMouseUp: function onMouseUp() {
-      this.isDragging = false;
+      this.$emit('stopResize');
     },
     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);
+      if (window.ProcessMaker.$modeler.isResizingPreview) {
+        this.$emit('previewResize', event);
       }
+    },
+    setWidth: function setWidth(positionX) {
+      var dx = this.currentPos - positionX;
+      this.currentPos = positionX;
+      this.width = parseInt(this.width) + dx;
     }
   }
 });
 ;// 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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=2b11953c&prod&lang=scss&scoped=true&
-var preview_panelvue_type_style_index_0_id_2b11953c_prod_lang_scss_scoped_true_ = __webpack_require__(89275);
-;// CONCATENATED MODULE: ./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=2b11953c&prod&lang=scss&scoped=true&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[4]!./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=65cadc71&prod&lang=scss&scoped=true&
+var preview_panelvue_type_style_index_0_id_65cadc71_prod_lang_scss_scoped_true_ = __webpack_require__(12031);
+;// CONCATENATED MODULE: ./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=65cadc71&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/components/inspectors/PreviewPanel.vue
 
@@ -50950,11 +50963,11 @@ var preview_panelvue_type_style_index_0_id_2b11953c_prod_lang_scss_scoped_true_
 
 var PreviewPanel_component = normalizeComponent(
   inspectors_PreviewPanelvue_type_script_lang_js_,
-  PreviewPanelvue_type_template_id_2b11953c_scoped_true_render,
-  PreviewPanelvue_type_template_id_2b11953c_scoped_true_staticRenderFns,
+  PreviewPanelvue_type_template_id_65cadc71_scoped_true_render,
+  PreviewPanelvue_type_template_id_65cadc71_scoped_true_staticRenderFns,
   false,
   null,
-  "2b11953c",
+  "65cadc71",
   null
   
 )
@@ -53839,11 +53852,19 @@ var NodeMigrator = /*#__PURE__*/function () {
       if (keepOriginalName(this._nodeThatWillBeReplaced)) {
         this._definition.name = this._nodeThatWillBeReplaced.definition.name;
       }
+      var flowNodes = [];
       var forceNodeToRemount = function forceNodeToRemount(definition) {
         var shape = _this._graph.getLinks().find(function (element) {
           return element.component && element.component.node.definition === definition;
         });
         shape.component.node._modelerId += '_replaced';
+        flowNodes.push({
+          id: shape.component.node.definition.id,
+          type: shape.component.node.type,
+          name: shape.component.node.definition.name,
+          sourceRefId: shape.component.node.definition.sourceRef.id,
+          targetRefId: shape.component.node.definition.targetRef.id
+        });
       };
       var incoming = this._nodeThatWillBeReplaced.definition.get('incoming');
       var outgoing = this._nodeThatWillBeReplaced.definition.get('outgoing');
@@ -53879,6 +53900,8 @@ var NodeMigrator = /*#__PURE__*/function () {
           forceNodeToRemount(flow);
         });
       }
+      // multiplayer hook to update the flows
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateFlows', flowNodes);
     }
   }, {
     key: "_handleSequenceFlowForGateway",
@@ -76071,8 +76094,7 @@ var Multiplayer = /*#__PURE__*/function () {
   _createClass(Multiplayer, [{
     key: "init",
     value: function init() {
-      var _window$ProcessMaker$,
-        _this = this;
+      var _window$ProcessMaker$;
       // Get the node id generator
       _classPrivateFieldSet(this, _nodeIdGenerator, getNodeIdGenerator(this.modeler.definitions));
       // Get the room name from the process id
@@ -76083,6 +76105,17 @@ var Multiplayer = /*#__PURE__*/function () {
       this.clientIO = esm_lookup(window.ProcessMaker.multiplayer.host, {
         transports: ['websocket', 'polling']
       });
+      if (window.ProcessMaker.multiplayer.enabled) {
+        this.webSocketEvents();
+        this.multiplayerEvents();
+      } else {
+        this.clientIO.disconnect();
+      }
+    }
+  }, {
+    key: "webSocketEvents",
+    value: function webSocketEvents() {
+      var _this = this;
       this.clientIO.on('connect', function () {
         var _window$ProcessMaker$2, _window$ProcessMaker$3;
         // Join the room
@@ -76211,32 +76244,52 @@ var Multiplayer = /*#__PURE__*/function () {
         // Update the element in the shared array
         applyUpdate(_this.yDoc, new Uint8Array(updateDoc));
       });
+      this.clientIO.on('updateFlows', function (payload) {
+        var updateDoc = payload.updateDoc,
+          updatedNodes = payload.updatedNodes;
+        // Update the elements in the process
+        updatedNodes.forEach(function (data) {
+          _this.updateFlowClient(data);
+        });
+        // Update the element in the shared array
+        applyUpdate(_this.yDoc, new Uint8Array(updateDoc));
+      });
+    }
+  }, {
+    key: "multiplayerEvents",
+    value: function multiplayerEvents() {
+      var _this2 = this;
       window.ProcessMaker.EventBus.$on('multiplayer-addNode', function (data) {
-        _this.addNode(data);
+        _this2.addNode(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-removeNode', function (data) {
-        _this.removeNode(data);
+        _this2.removeNode(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateNodes', function (data) {
-        _this.updateNodes(data);
+        _this2.updateNodes(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-replaceNode', function (_ref3) {
         var nodeData = _ref3.nodeData,
           newControl = _ref3.newControl;
-        _this.replaceNode(nodeData, newControl);
+        _this2.replaceNode(nodeData, newControl);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addFlow', function (data) {
-        _this.addCommonElement(data);
+        _this2.addCommonElement(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addBoundaryEvent', function (data) {
-        _this.addCommonElement(data);
+        _this2.addCommonElement(data);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-addLanes', function (lanes) {
-        _this.addLaneNodes(lanes);
+        _this2.addLaneNodes(lanes);
       });
       window.ProcessMaker.EventBus.$on('multiplayer-updateInspectorProperty', function (data) {
-        if (_this.modeler.isMultiplayer) {
-          _this.updateInspectorProperty(data);
+        if (_this2.modeler.isMultiplayer) {
+          _this2.updateInspectorProperty(data);
+        }
+      });
+      window.ProcessMaker.EventBus.$on('multiplayer-updateFlows', function (data) {
+        if (_this2.modeler.isMultiplayer) {
+          _this2.updateFlows(data);
         }
       });
     }
@@ -76247,19 +76300,19 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "syncLocalNodes",
     value: function syncLocalNodes(clientId) {
-      var _this2 = this;
+      var _this3 = this;
       // Get the process definition
       var nodes = this.modeler.nodes.map(function (node) {
-        return _this2.modeler.multiplayerHook(node, false, true);
+        return _this3.modeler.multiplayerHook(node, false, true);
       });
       nodes.forEach(function (node) {
         var yMapNested = new YMap();
-        _this2.doTransact(yMapNested, node);
-        _this2.yArray.push([yMapNested]);
+        _this3.doTransact(yMapNested, node);
+        _this3.yArray.push([yMapNested]);
         // Encode the state as an update and send it to the server
-        var stateUpdate = encodeStateAsUpdate(_this2.yDoc);
+        var stateUpdate = encodeStateAsUpdate(_this3.yDoc);
         // Send the update to the web socket server
-        _this2.clientIO.emit('createElement', {
+        _this3.clientIO.emit('createElement', {
           updateDoc: stateUpdate,
           clientId: clientId
         });
@@ -76297,10 +76350,10 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "createRemoteShape",
     value: function createRemoteShape(changes) {
-      var _this3 = this;
+      var _this4 = this;
       return new Promise(function (resolve) {
         changes.map(function (data) {
-          _this3.createShape(data);
+          _this4.createShape(data);
         });
         resolve();
       });
@@ -76352,7 +76405,9 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "removeShape",
     value: function removeShape(node) {
-      this.modeler.removeNodeProcedure(node, true);
+      this.modeler.removeNodeProcedure(node, {
+        removeRelationships: false
+      });
     }
   }, {
     key: "getRemovedNodes",
@@ -76366,14 +76421,14 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "updateNodes",
     value: function updateNodes(data) {
-      var _this4 = this;
+      var _this5 = this;
       data.forEach(function (value) {
-        var index = _this4.getIndex(value.id);
-        var nodeToUpdate = _this4.yArray.get(index);
+        var index = _this5.getIndex(value.id);
+        var nodeToUpdate = _this5.yArray.get(index);
         var updateData = value.poolId ? _objectSpread2(_objectSpread2({}, value.properties), {
           poolId: value.poolId
         }) : value.properties;
-        _this4.doTransact(nodeToUpdate, updateData);
+        _this5.doTransact(nodeToUpdate, updateData);
       });
     }
   }, {
@@ -76454,7 +76509,7 @@ var Multiplayer = /*#__PURE__*/function () {
     key: "updateShapes",
     value: function () {
       var _updateShapes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {
-        var _this5 = this;
+        var _this6 = this;
         var paper, element, newPool, sourceElem, targetElem, waypoint, startWaypoint, endWaypoint, newWaypoint, node;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -76474,14 +76529,14 @@ var Multiplayer = /*#__PURE__*/function () {
               startWaypoint = waypoint.shift();
               endWaypoint = waypoint.pop(); // Update the element's waypoints
               newWaypoint = waypoint.map(function (point) {
-                return _this5.modeler.moddle.create('dc:Point', point);
+                return _this6.modeler.moddle.create('dc:Point', point);
               });
               element.set('vertices', newWaypoint);
 
               // Update the element's source anchor
               element.source(sourceElem, {
                 anchor: function anchor() {
-                  return getDefaultAnchorPoint(_this5.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
+                  return getDefaultAnchorPoint(_this6.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
                 },
                 connectionPoint: {
                   name: 'boundary'
@@ -76491,7 +76546,7 @@ var Multiplayer = /*#__PURE__*/function () {
               // Update the element's target anchor
               element.target(targetElem, {
                 anchor: function anchor() {
-                  return getDefaultAnchorPoint(_this5.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
+                  return getDefaultAnchorPoint(_this6.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
                 },
                 connectionPoint: {
                   name: 'boundary'
@@ -76579,7 +76634,7 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "addLaneNodes",
     value: function addLaneNodes(lanes) {
-      var _this6 = this;
+      var _this7 = this;
       var pool = this.getPool(lanes);
       window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [{
         id: pool.component.node.definition.id,
@@ -76594,11 +76649,11 @@ var Multiplayer = /*#__PURE__*/function () {
       this.yDoc.transact(function () {
         lanes.forEach(function (lane) {
           var yMapNested = new YMap();
-          var data = _this6.prepareLaneData(lane);
-          _this6.doTransact(yMapNested, data);
-          _this6.yArray.push([yMapNested]);
-          var stateUpdate = encodeStateAsUpdate(_this6.yDoc);
-          _this6.clientIO.emit('createElement', {
+          var data = _this7.prepareLaneData(lane);
+          _this7.doTransact(yMapNested, data);
+          _this7.yArray.push([yMapNested]);
+          var stateUpdate = encodeStateAsUpdate(_this7.yDoc);
+          _this7.clientIO.emit('createElement', {
             updateDoc: stateUpdate
           });
         });
@@ -76765,6 +76820,70 @@ var Multiplayer = /*#__PURE__*/function () {
         }
       }
     }
+    /**
+     * Update the shared document and emit socket sign to update the flows
+     * @param {Object} data
+     */
+  }, {
+    key: "updateFlows",
+    value: function updateFlows(data) {
+      var _this8 = this;
+      data.forEach(function (value) {
+        var index = _this8.getIndex(value.id);
+        var nodeToUpdate = _this8.yArray.get(index);
+        _this8.yDoc.transact(function () {
+          for (var key in value) {
+            if (Object.hasOwn(value, key)) {
+              nodeToUpdate.set(key, value[key]);
+            }
+          }
+        });
+      });
+      // Encode the state as an update and send it to the server
+      var stateUpdate = encodeStateAsUpdate(this.yDoc);
+      this.clientIO.emit('updateFlows', {
+        updateDoc: stateUpdate,
+        isReplaced: false
+      });
+    }
+    /**
+     * Update the flow client, All node refs will be updated and forced to remount
+     * @param {Object} data
+     */
+  }, {
+    key: "updateFlowClient",
+    value: function updateFlowClient(data) {
+      var remount = false;
+      var flow = this.getNodeById(data.id);
+      if (flow && data.sourceRefId) {
+        var sourceRef = this.getNodeById(data.sourceRefId);
+        flow.definition.set('sourceRef', sourceRef.definition);
+        var outgoing = sourceRef.definition.get('outgoing').find(function (element) {
+          return element.id === flow.definition.id;
+        });
+        if (!outgoing) {
+          var _sourceRef$definition;
+          (_sourceRef$definition = sourceRef.definition.get('outgoing')).push.apply(_sourceRef$definition, [flow.definition]);
+        }
+        remount = true;
+      }
+      if (flow && data.targetRefId) {
+        var targetRef = this.getNodeById(data.targetRefId);
+        flow.definition.set('targetRef', targetRef.definition);
+        var incoming = targetRef.definition.get('incoming').find(function (element) {
+          return element.id === flow.definition.id;
+        });
+        if (!incoming) {
+          var _targetRef$definition;
+          (_targetRef$definition = targetRef.definition.get('incoming')).push.apply(_targetRef$definition, [flow.definition]);
+        }
+        remount = true;
+      }
+      if (remount) {
+        // Force Remount Flow
+        flow._modelerId += '_replaced';
+      }
+    }
   }]);
   return Multiplayer;
 }();
@@ -76955,6 +77074,9 @@ var Multiplayer = /*#__PURE__*/function () {
       showInspectorButton: true,
       inspectorButtonRight: 65,
       previewConfigs: [],
+      isResizingPreview: false,
+      currentCursorPosition: 0,
+      previewPanelWidth: 600,
       flowTypes: ['processmaker-modeler-sequence-flow', 'processmaker-modeler-message-flow', 'processmaker-modeler-data-input-association', 'processmaker-modeler-data-output-association', 'processmaker-modeler-association']
     };
   },
@@ -77038,6 +77160,20 @@ var Multiplayer = /*#__PURE__*/function () {
     }
   },
   methods: {
+    onStartPreviewResize: function onStartPreviewResize(event) {
+      this.isResizingPreview = true;
+      this.currentCursorPosition = event.x;
+    },
+    onMouseUp: function onMouseUp() {
+      this.isResizingPreview = false;
+    },
+    onMouseMove: function onMouseMove(event) {
+      if (this.isResizingPreview) {
+        var dx = this.currentCursorPosition - event.x;
+        this.previewPanelWidth = parseInt(this.previewPanelWidth) + dx;
+        this.currentCursorPosition = event.x;
+      }
+    },
     registerPreview: function registerPreview(config) {
       this.previewConfigs.push(config);
     },
@@ -77061,12 +77197,11 @@ var Multiplayer = /*#__PURE__*/function () {
       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;
+        this.inspectorButtonRight = 65 + this.previewPanelWidth;
       }
       if (!this.isOpenPreview && !this.isOpenInspector) {
         this.inspectorButtonRight = 65;
@@ -78102,13 +78237,20 @@ var Multiplayer = /*#__PURE__*/function () {
             sourceRefId = Array.isArray(node.definition.sourceRef) && ((_node$definition$sour2 = node.definition.sourceRef[0]) === null || _node$definition$sour2 === void 0 ? void 0 : _node$definition$sour2.id);
             targetRefId = (_node$definition$targ2 = node.definition.targetRef) === null || _node$definition$targ2 === void 0 ? void 0 : (_node$definition$targ3 = _node$definition$targ2.$parent) === null || _node$definition$targ3 === void 0 ? void 0 : (_node$definition$targ4 = _node$definition$targ3.$parent) === null || _node$definition$targ4 === void 0 ? void 0 : _node$definition$targ4.get('id');
           }
+          var waypoint = [];
+          node.diagram.waypoint.forEach(function (point) {
+            waypoint.push({
+              x: point.x,
+              y: point.y
+            });
+          });
           if (sourceRefId && targetRefId) {
             var flowData = {
               id: node.definition.id,
               type: node.type,
               sourceRefId: sourceRefId,
               targetRefId: targetRefId,
-              waypoint: node.diagram.waypoint,
+              waypoint: waypoint,
               name: node.definition.name,
               conditionExpression: null
             };
@@ -78959,8 +79101,8 @@ var modelervue_type_style_index_0_prod_lang_scss_ = __webpack_require__(26695);
 
 var Modeler_component = normalizeComponent(
   modeler_Modelervue_type_script_lang_js_,
-  Modelervue_type_template_id_79f6fcfe_render,
-  Modelervue_type_template_id_79f6fcfe_staticRenderFns,
+  Modelervue_type_template_id_c9b617ac_render,
+  Modelervue_type_template_id_c9b617ac_staticRenderFns,
   false,
   null,
   null,