@processmaker/modeler 1.39.31 → 1.39.32

package/dist/modeler.common.js

@@ -13324,14 +13324,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___);
 
 
 /***/ }),
 
-/***/ 30897:
+/***/ 53967:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13345,7 +13345,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___);
 
@@ -13366,7 +13366,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___);
 
@@ -26862,19 +26862,19 @@ var update = add("38bfa59d", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 10021:
+/***/ 68256:
 /***/ (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__(30897);
+var content = __webpack_require__(53967);
 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("6961506b", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("003e0bf1", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -47954,10 +47954,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=79f6fcfe&
+;// 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=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', {
@@ -48024,6 +48024,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",
@@ -48055,13 +48061,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: [{
@@ -48184,9 +48195,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-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=58bceaa8&
 var boundaryEventvue_type_template_id_58bceaa8_render = function render() {
@@ -50413,29 +50424,34 @@ 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=2b11953c&scoped=true&
-var PreviewPanelvue_type_template_id_2b11953c_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/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"
@@ -50447,22 +50463,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": "",
@@ -50499,7 +50512,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",
@@ -50519,15 +50532,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",
@@ -50541,21 +50557,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-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=cdc64a14&scoped=true&
 var NoPreviewAvailablevue_type_template_id_cdc64a14_scoped_true_render = function render() {
@@ -50691,7 +50705,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
@@ -50705,7 +50719,6 @@ var LoadingPreview_component = normalizeComponent(
       taskTitle: '',
       itemTitle: '',
       width: 600,
-      isDragging: false,
       currentPos: 600
     };
   },
@@ -50813,33 +50826,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-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=2b11953c&prod&lang=scss&scoped=true&
-var preview_panelvue_type_style_index_0_id_2b11953c_prod_lang_scss_scoped_true_ = __webpack_require__(10021);
-;// 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-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=65cadc71&prod&lang=scss&scoped=true&
+var preview_panelvue_type_style_index_0_id_65cadc71_prod_lang_scss_scoped_true_ = __webpack_require__(68256);
+;// 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
 
@@ -50852,11 +50865,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
   
 )
@@ -53741,11 +53754,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');
@@ -53781,6 +53802,8 @@ var NodeMigrator = /*#__PURE__*/function () {
           forceNodeToRemount(flow);
         });
       }
+      // multiplayer hook to update the flows
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateFlows', flowNodes);
     }
   }, {
     key: "_handleSequenceFlowForGateway",
@@ -76113,6 +76136,16 @@ 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));
+      });
       window.ProcessMaker.EventBus.$on('multiplayer-addNode', function (data) {
         _this.addNode(data);
       });
@@ -76141,6 +76174,11 @@ var Multiplayer = /*#__PURE__*/function () {
           _this.updateInspectorProperty(data);
         }
       });
+      window.ProcessMaker.EventBus.$on('multiplayer-updateFlows', function (data) {
+        if (_this.modeler.isMultiplayer) {
+          _this.updateFlows(data);
+        }
+      });
     }
     /**
      * Sync the modeler nodes with the microservice
@@ -76254,7 +76292,9 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "removeShape",
     value: function removeShape(node) {
-      this.modeler.removeNodeProcedure(node, true);
+      this.modeler.removeNodeProcedure(node, {
+        removeRelationships: false
+      });
     }
   }, {
     key: "getRemovedNodes",
@@ -76667,6 +76707,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 _this7 = this;
+      data.forEach(function (value) {
+        var index = _this7.getIndex(value.id);
+        var nodeToUpdate = _this7.yArray.get(index);
+        _this7.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;
 }();
@@ -76857,6 +76961,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']
     };
   },
@@ -76940,6 +77047,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);
     },
@@ -76963,12 +77084,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;
@@ -78004,13 +78124,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
             };
@@ -78861,8 +78988,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_79f6fcfe_render,
-  Modelervue_type_template_id_79f6fcfe_staticRenderFns,
+  Modelervue_type_template_id_c9b617ac_render,
+  Modelervue_type_template_id_c9b617ac_staticRenderFns,
   false,
   null,
   null,