@processmaker/modeler 1.39.24 → 1.39.26

package/dist/modeler.umd.js

@@ -13257,7 +13257,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".crown-align{z-index:1;display:-webkit
 
 /***/ }),
 
-/***/ 17478:
+/***/ 5574:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13271,7 +13271,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, ".inspector-column[data-v-ebcaadf8]{max-width:330px}.inspector[data-v-ebcaadf8]{z-index:2}.inspector-container[data-v-ebcaadf8]{text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-bottom:4rem}.inspector-container .form-group[data-v-ebcaadf8]{padding:0 .5rem}.inspector-container .form-group>label[data-v-ebcaadf8]{font-size:.8125rem}.inspector-container .inspector-font-size[data-v-ebcaadf8]{font-size:.875rem}.inspector-header[data-v-ebcaadf8]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.inspector-header-title[data-v-ebcaadf8]{-webkit-box-flex:0;-ms-flex-positive:0;font-weight:600;letter-spacing:-.02em;flex-grow:0}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".inspector-column[data-v-40e10039]{max-width:330px}.inspector[data-v-40e10039]{z-index:2}.inspector-container[data-v-40e10039]{text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-bottom:4rem}.inspector-container .form-group[data-v-40e10039]{padding:0 .5rem}.inspector-container .form-group>label[data-v-40e10039]{font-size:.8125rem}.inspector-container .inspector-font-size[data-v-40e10039]{font-size:.875rem}.inspector-header[data-v-40e10039]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.inspector-header-title[data-v-40e10039]{-webkit-box-flex:0;-ms-flex-positive:0;font-weight:600;letter-spacing:-.02em;flex-grow:0}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -13299,7 +13299,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".inspector-button[data-v-cebfb20a]{pos
 
 /***/ }),
 
-/***/ 95365:
+/***/ 89613:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13313,7 +13313,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-24f0829e]:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";left:0;width:5px;height:100%;cursor:ew-resize}.preview-column[data-v-24f0829e]{max-width:400px;resize:both;overflow:auto;background-color:#f5f5f5;border-left:8px solid #ebeef2}.paneiframe[data-v-24f0829e]{display:block;width:100%}.preview-column .control-bar[data-v-24f0829e]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-column .control-bar .actions[data-v-24f0829e]{text-align:right}.preview-column .control-bar .actions div[data-v-24f0829e]{width:100%;text-align:right}.preview-column .control-bar .actions div i[data-v-24f0829e]{width:20px;cursor:pointer}.item-title[data-v-24f0829e]{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-24f0829e],.task-title[data-v-24f0829e]{width:100%;text-align:center}.task-title[data-v-24f0829e]{height:60px;font-size:xx-large;font-weight:700;color:#6c757d}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "#preview_panel[data-v-b558053a]:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";left:0;width:5px;height:100%;cursor:ew-resize}.preview-column[data-v-b558053a]{max-width:400px;resize:both;overflow:auto;background-color:#f5f5f5;border-left:8px solid #ebeef2}.paneiframe[data-v-b558053a]{display:block;width:100%}.preview-column .control-bar[data-v-b558053a]{background-color:#fff;padding:0 5px 0 5px;color:#7f7f7f}.preview-column .control-bar .actions[data-v-b558053a]{text-align:right}.preview-column .control-bar .actions div[data-v-b558053a]{width:100%;text-align:right}.preview-column .control-bar .actions div i[data-v-b558053a]{width:20px;cursor:pointer}.item-title[data-v-b558053a]{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-b558053a],.task-title[data-v-b558053a]{width:100%;text-align:center}.task-title[data-v-b558053a]{height:60px;font-size:xx-large;font-weight:700;color:#6c757d}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -26745,19 +26745,19 @@ var update = add("0081435e", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 58074:
+/***/ 43884:
 /***/ (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__(17478);
+var content = __webpack_require__(5574);
 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("cf4699ba", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("342cf445", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -26777,19 +26777,19 @@ var update = add("62d3adbb", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 71760:
+/***/ 4132:
 /***/ (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__(95365);
+var content = __webpack_require__(89613);
 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("7450d9d5", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("148f2abe", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -32075,7 +32075,8 @@ function removeRef(state, ref, callBack) {
     allowSavingElementPosition: true,
     copiedElements: [],
     clientLeftPaper: false,
-    readOnly: false
+    readOnly: false,
+    isMultiplayer: false
   },
   getters: {
     nodes: function nodes(state) {
@@ -32127,6 +32128,9 @@ function removeRef(state, ref, callBack) {
     },
     showComponent: function showComponent(state) {
       return !state.readOnly;
+    },
+    isMultiplayer: function isMultiplayer(state) {
+      return state.isMultiplayer;
     }
   },
   mutations: {
@@ -32240,6 +32244,9 @@ function removeRef(state, ref, callBack) {
     },
     setClientLeftPaper: function setClientLeftPaper(state, status) {
       state.clientLeftPaper = status;
+    },
+    enableMultiplayer: function enableMultiplayer(state, value) {
+      state.isMultiplayer = value;
     }
   },
   actions: {
@@ -32906,13 +32913,11 @@ var crownConfigvue_type_template_id_1e4b9bf1_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-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/crown/crownButtons/previewButton.vue?vue&type=template&id=a7930852&
-
-var previewButtonvue_type_template_id_a7930852_render = function render() {
-  var _vm$node;
+;// 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/crown/crownButtons/previewButton.vue?vue&type=template&id=29ab8a84&
+var previewButtonvue_type_template_id_29ab8a84_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return (_vm$node = _vm.node).isBpmnType.apply(_vm$node, _toConsumableArray(_vm.validPreviewElements)) ? _c('crown-button', {
+  return _vm.displayIcon ? _c('crown-button', {
     directives: [{
       name: "b-tooltip",
       rawName: "v-b-tooltip.hover.viewport.d50",
@@ -32930,7 +32935,8 @@ var previewButtonvue_type_template_id_a7930852_render = function render() {
       "title": _vm.$t('Preview'),
       "role": "menuitem",
       "id": "preview-button",
-      "aria-label": "Preview"
+      "aria-label": "Preview",
+      "data-test": "preview-button"
     },
     on: {
       "click": function click($event) {
@@ -32941,10 +32947,10 @@ var previewButtonvue_type_template_id_a7930852_render = function render() {
     staticClass: "fas fa-eye cog-container--button"
   })]) : _vm._e();
 };
-var previewButtonvue_type_template_id_a7930852_staticRenderFns = [];
-
-;// CONCATENATED MODULE: ./src/components/crown/crownButtons/previewButton.vue?vue&type=template&id=a7930852&
+var previewButtonvue_type_template_id_29ab8a84_staticRenderFns = [];
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
+var es_array_reduce = __webpack_require__(85827);
 ;// CONCATENATED MODULE: ./src/assets/trash-alt-solid.svg
 var trash_alt_solid_namespaceObject = __webpack_require__.p + "img/trash-alt-solid.9d41abd9.svg";
 ;// 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/crown/crownButtons/crownButton.vue?vue&type=template&id=09d8a8ac&scoped=true&
@@ -33119,6 +33125,11 @@ var validPreviewElements = ['bpmn:Task', 'bpmn:UserTask', 'bpmn:GlobalTask', 'bp
 
 
 
+
+
+
+
+
 /* harmony default export */ var previewButtonvue_type_script_lang_js_ = ({
   components: {
     CrownButton: crownButton
@@ -33131,8 +33142,25 @@ var validPreviewElements = ['bpmn:Task', 'bpmn:UserTask', 'bpmn:GlobalTask', 'bp
   data: function data() {
     return {
       trashIcon: trash_alt_solid_namespaceObject,
-      validPreviewElements: crownButtons_validPreviewElements
+      validPreviewElements: crownButtons_validPreviewElements,
+      displayIcon: false
+    };
+  },
+  mounted: function mounted() {
+    var defaultDataTransform = function defaultDataTransform(node) {
+      return Object.entries(node.definition).reduce(function (data, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+        data[key] = value;
+        return data;
+      }, {});
     };
+    var nodeData = defaultDataTransform(this.node);
+    var previewConfig = window.ProcessMaker.$modeler.previewConfigs.find(function (config) {
+      return config.matcher(nodeData);
+    });
+    this.displayIcon = !!previewConfig;
   },
   computed: {
     isPoolLane: function isPoolLane() {
@@ -33141,7 +33169,11 @@ var validPreviewElements = ['bpmn:Task', 'bpmn:UserTask', 'bpmn:GlobalTask', 'bp
   },
   methods: {
     preview: function preview() {
-      this.$emit('previewNode', this.node);
+      if (window.ProcessMaker.$modeler.isOpenPreview) {
+        window.ProcessMaker.$modeler.isOpenPreview = false;
+      } else {
+        this.$emit('previewNode', this.node);
+      }
     }
   }
 });
@@ -33157,8 +33189,8 @@ var validPreviewElements = ['bpmn:Task', 'bpmn:UserTask', 'bpmn:GlobalTask', 'bp
 ;
 var previewButton_component = normalizeComponent(
   crownButtons_previewButtonvue_type_script_lang_js_,
-  previewButtonvue_type_template_id_a7930852_render,
-  previewButtonvue_type_template_id_a7930852_staticRenderFns,
+  previewButtonvue_type_template_id_29ab8a84_render,
+  previewButtonvue_type_template_id_29ab8a84_staticRenderFns,
   false,
   null,
   null,
@@ -37597,8 +37629,6 @@ var endEvent_id = 'processmaker-modeler-end-event';
     }, documentationAccordionConfig, advancedAccordionConfig]
   }]
 });
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
-var es_array_reduce = __webpack_require__(85827);
 // EXTERNAL MODULE: ./node_modules/svg-inline-loader/index.js!./src/assets/error.svg
 var assets_error = __webpack_require__(84384);
 var error_default = /*#__PURE__*/__webpack_require__.n(assets_error);
@@ -37807,6 +37837,8 @@ var omit_default = /*#__PURE__*/__webpack_require__.n(omit);
 
 
 
+
+
 var errorEndEvent_id = 'processmaker-modeler-error-end-event';
 /* harmony default export */ var nodes_errorEndEvent = (merge_default()(cloneDeep_default()(nodes_endEvent), {
   id: errorEndEvent_id,
@@ -37837,11 +37869,35 @@ var errorEndEvent_id = 'processmaker-modeler-error-end-event';
       if (node.definition[key] === value[key]) {
         continue;
       }
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id,
+        key: key,
+        value: value[key]
+      });
       setNodeProp(node, key, value[key]);
     }
     var error = node.definition.get('eventDefinitions')[0].errorRef;
     if (error.name !== value.errorName) {
       error.name = value.errorName;
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id,
+        key: 'eventDefinitions',
+        value: node.definition.get('eventDefinitions')
+      });
+    }
+  },
+  multiplayerInspectorHandler: function multiplayerInspectorHandler(node, data) {
+    var keys = Object.keys(data).filter(function (key) {
+      return key !== 'id';
+    });
+    if (keys[0] === 'eventDefinitions') {
+      var error = data[keys[0]][0].errorRef;
+      var errorRef = node.definition.get('eventDefinitions')[0].errorRef;
+      if (error && errorRef) {
+        if (error.name !== errorRef.name) {
+          errorRef.name = error.name;
+        }
+      }
     }
   },
   inspectorConfig: [{
@@ -38842,6 +38898,11 @@ var sequenceFlow_id = 'processmaker-modeler-sequence-flow';
           setNodeProp(node, key, conditionExpression);
         }
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: key,
+          value: value[key]
+        });
         setNodeProp(node, key, value[key]);
       }
     }
@@ -39769,6 +39830,11 @@ function messageSelector(helper) {
       if (node.definition[key] === value[key]) {
         continue;
       }
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id,
+        key: key,
+        value: value[key]
+      });
       setNodeProp(node, key, value[key]);
     }
     var message = definitions.rootElements.find(function (element) {
@@ -40460,6 +40526,11 @@ function signalSelector(helper) {
       if (node.definition[key] === value[key]) {
         continue;
       }
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id,
+        key: key,
+        value: value[key]
+      });
       setNodeProp(node, key, value[key]);
     }
     var signal = definitions.rootElements.find(function (element) {
@@ -41826,7 +41897,17 @@ var startTimerEvent_id = 'processmaker-modeler-start-timer-event';
         };
         var eventDefinitions = [moddle.create('bpmn:TimerEventDefinition', eventDefinition)];
         setNodeProp(node, 'eventDefinitions', eventDefinitions);
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: 'eventDefinitions',
+          value: eventDefinitions
+        });
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: key,
+          value: value[key]
+        });
         setNodeProp(node, key, value[key]);
       }
     }
@@ -42759,7 +42840,17 @@ var intermediateTimerEvent_id = 'processmaker-modeler-intermediate-catch-timer-e
         }));
         var eventDefinitions = [moddle.create('bpmn:TimerEventDefinition', eventDefinition)];
         setNodeProp(node, 'eventDefinitions', eventDefinitions);
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: 'eventDefinitions',
+          value: eventDefinitions
+        });
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: key,
+          value: value[key]
+        });
         setNodeProp(node, key, value[key]);
       }
     }
@@ -43328,7 +43419,17 @@ function inspector() {
       }
       if (key === 'condition') {
         node.definition.get('eventDefinitions')[0].get('condition').body = value[key];
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: key,
+          value: value[key]
+        });
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: key,
+          value: value[key]
+        });
         setNodeProp(node, key, value[key]);
       }
     }
@@ -44523,7 +44624,7 @@ var NodeInspector = /*#__PURE__*/function () {
 
 
 
-var loopCharacteristicsHandler = function loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions) {
+var loopCharacteristicsHandler = function loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions, isMultiplayer) {
   var nodeInspector = new NodeInspector(definitions, {
     prefix: "".concat(node.definition.id, "_inner")
   });
@@ -44531,6 +44632,13 @@ var loopCharacteristicsHandler = function loopCharacteristicsHandler(value, node
   update = nodeInspector.setReferences(update);
   if (update.loopCharacteristics) {
     delete node.definition.loopCharacteristics;
+    if (isMultiplayer) {
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id,
+        key: 'loopCharacteristics',
+        value: update.loopCharacteristics
+      });
+    }
     setNodeProp(node, 'loopCharacteristics', update.loopCharacteristics);
   } else {
     node.definition.loopCharacteristics = null;
@@ -44631,10 +44739,10 @@ var task_id = 'processmaker-modeler-task';
       })
     });
   },
-  inspectorHandler: function inspectorHandler(value, node, setNodeProp, moddle, definitions, defaultInspectorHandler) {
-    handleMarkerFlagsValue(value.markerFlags, node, setNodeProp, moddle);
-    loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions);
-    defaultInspectorHandler(omit_default()(value, 'markerFlags', '$loopCharactetistics'));
+  inspectorHandler: function inspectorHandler(value, node, setNodeProp, moddle, definitions, defaultInspectorHandler, isMultiplayer) {
+    handleMarkerFlagsValue(value.markerFlags, node, setNodeProp);
+    loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions, isMultiplayer);
+    defaultInspectorHandler(omit_default()(value, 'markerFlags', '$loopCharactetistics'), isMultiplayer);
   },
   inspectorData: function inspectorData(node, defaultDataTransform, inspector) {
     var inspectorData = defaultDataTransform(node);
@@ -45264,10 +45372,20 @@ var subProcess_id = 'processmaker-modeler-call-activity';
     setNodeProp(node, 'name', value.name);
     var currentConfig = JSON.parse(value.config);
     value['calledElement'] = currentConfig.calledElement;
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+      id: node.definition.id,
+      key: 'calledElement',
+      value: currentConfig.calledElement
+    });
     setNodeProp(node, 'calledElement', currentConfig.calledElement);
     if (currentConfig.name !== value.name) {
       currentConfig.name = value.name;
     }
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+      id: node.definition.id,
+      key: 'config',
+      value: JSON.stringify(currentConfig)
+    });
     setNodeProp(node, 'config', JSON.stringify(currentConfig));
   },
   inspectorConfig: [{
@@ -47778,10 +47896,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=2da6a680&
+;// 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=290d2c96&
 
 
-var Modelervue_type_template_id_2da6a680_render = function render() {
+var Modelervue_type_template_id_290d2c96_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -48006,9 +48124,9 @@ var Modelervue_type_template_id_2da6a680_render = function render() {
     }
   }) : _vm._e()], 2)], 1);
 };
-var Modelervue_type_template_id_2da6a680_staticRenderFns = [];
+var Modelervue_type_template_id_290d2c96_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=2da6a680&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=290d2c96&
 
 ;// 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() {
@@ -49864,8 +49982,8 @@ var InspectorButton_component = normalizeComponent(
 )
 
 /* harmony default export */ var InspectorButton = (InspectorButton_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/InspectorPanel.vue?vue&type=template&id=ebcaadf8&scoped=true&
-var InspectorPanelvue_type_template_id_ebcaadf8_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/InspectorPanel.vue?vue&type=template&id=40e10039&scoped=true&
+var InspectorPanelvue_type_template_id_40e10039_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('transition', {
@@ -49931,7 +50049,7 @@ var InspectorPanelvue_type_template_id_ebcaadf8_scoped_true_render = function re
     }
   }) : _vm._e()], 1)], 1)], 1);
 };
-var InspectorPanelvue_type_template_id_ebcaadf8_scoped_true_staticRenderFns = [];
+var InspectorPanelvue_type_template_id_40e10039_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: external "@processmaker/screen-builder"
 var screen_builder_ = __webpack_require__(43637);
@@ -50081,8 +50199,9 @@ external_vue_default().component('FormMultiSelect', vue_form_elements_.FormMulti
             text: value.documentation
           })] : undefined;
           _this.setNodeProp(_this.highlightedNode, 'documentation', documentation);
+          _this.multiplayerHook('documentation', documentation, store.state.isMultiplayer);
         }
-        inspectorHandler(omit_default()(value, ['documentation']));
+        inspectorHandler(omit_default()(value, ['documentation']), store.state.isMultiplayer);
       };
     },
     hasCustomInspectorHandler: function hasCustomInspectorHandler() {
@@ -50170,11 +50289,11 @@ external_vue_default().component('FormMultiSelect', vue_form_elements_.FormMulti
     isConnectedToSubProcess: function isConnectedToSubProcess(definition) {
       return definition.targetRef.$type === 'bpmn:CallActivity';
     },
-    customInspectorHandler: function customInspectorHandler(value) {
-      return this.nodeRegistry[this.highlightedNode.type].inspectorHandler(value, this.highlightedNode, this.setNodeProp, this.moddle, this.definitions, this.defaultInspectorHandler);
+    customInspectorHandler: function customInspectorHandler(value, isMultiplayer) {
+      return this.nodeRegistry[this.highlightedNode.type].inspectorHandler(value, this.highlightedNode, this.setNodeProp, this.moddle, this.definitions, this.defaultInspectorHandler, isMultiplayer);
     },
-    processNodeInspectorHandler: function processNodeInspectorHandler(value) {
-      return this.defaultInspectorHandler(omit_default()(value, ['artifacts', 'flowElements', 'laneSets']));
+    processNodeInspectorHandler: function processNodeInspectorHandler(value, isMultiplayer) {
+      return this.defaultInspectorHandler(omit_default()(value, ['artifacts', 'flowElements', 'laneSets']), isMultiplayer);
     },
     setNodeProp: function setNodeProp(node, key, value) {
       this.$emit('shape-resize');
@@ -50184,24 +50303,34 @@ external_vue_default().component('FormMultiSelect', vue_form_elements_.FormMulti
         value: value
       });
     },
-    defaultInspectorHandler: function defaultInspectorHandler(value) {
+    defaultInspectorHandler: function defaultInspectorHandler(value, isMultiplayer) {
       /* Go through each property and rebind it to our data */
       for (var key in omit_default()(value, ['$type', 'eventDefinitions'])) {
         if (this.highlightedNode.definition.get(key) !== value[key]) {
+          this.multiplayerHook(key, value[key], isMultiplayer);
           this.setNodeProp(this.highlightedNode, key, value[key]);
         }
       }
     },
     updateState: function updateState() {
       this.$emit('save-state');
+    },
+    multiplayerHook: function multiplayerHook(key, value, isMultiplayer) {
+      if (isMultiplayer) {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: this.highlightedNode.definition.id,
+          key: key,
+          value: value
+        });
+      }
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/components/inspectors/InspectorPanel.vue?vue&type=script&lang=js&
  /* harmony default export */ var inspectors_InspectorPanelvue_type_script_lang_js_ = (InspectorPanelvue_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/inspector.scss?vue&type=style&index=0&id=ebcaadf8&prod&lang=scss&scoped=true&
-var inspectorvue_type_style_index_0_id_ebcaadf8_prod_lang_scss_scoped_true_ = __webpack_require__(58074);
-;// CONCATENATED MODULE: ./src/components/inspectors/inspector.scss?vue&type=style&index=0&id=ebcaadf8&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/inspector.scss?vue&type=style&index=0&id=40e10039&prod&lang=scss&scoped=true&
+var inspectorvue_type_style_index_0_id_40e10039_prod_lang_scss_scoped_true_ = __webpack_require__(43884);
+;// CONCATENATED MODULE: ./src/components/inspectors/inspector.scss?vue&type=style&index=0&id=40e10039&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/components/inspectors/InspectorPanel.vue
 
@@ -50214,18 +50343,18 @@ var inspectorvue_type_style_index_0_id_ebcaadf8_prod_lang_scss_scoped_true_ = __
 
 var InspectorPanel_component = normalizeComponent(
   inspectors_InspectorPanelvue_type_script_lang_js_,
-  InspectorPanelvue_type_template_id_ebcaadf8_scoped_true_render,
-  InspectorPanelvue_type_template_id_ebcaadf8_scoped_true_staticRenderFns,
+  InspectorPanelvue_type_template_id_40e10039_scoped_true_render,
+  InspectorPanelvue_type_template_id_40e10039_scoped_true_staticRenderFns,
   false,
   null,
-  "ebcaadf8",
+  "40e10039",
   null
   
 )
 
 /* 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=24f0829e&scoped=true&
-var PreviewPanelvue_type_template_id_24f0829e_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=b558053a&scoped=true&
+var PreviewPanelvue_type_template_id_b558053a_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('b-col', {
@@ -50241,7 +50370,7 @@ var PreviewPanelvue_type_template_id_24f0829e_scoped_true_render = function rend
     },
     attrs: {
       "id": "preview_panel",
-      "data-test": "preview-column"
+      "data-test": "preview-panel"
     },
     on: {
       "mousedown": _vm.onMouseDown,
@@ -50377,7 +50506,7 @@ var PreviewPanelvue_type_template_id_24f0829e_scoped_true_render = function rend
     }
   })], 1);
 };
-var PreviewPanelvue_type_template_id_24f0829e_scoped_true_staticRenderFns = [];
+var PreviewPanelvue_type_template_id_b558053a_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=7ec3935d&scoped=true&
 var NoPreviewAvailablevue_type_template_id_7ec3935d_scoped_true_render = function render() {
@@ -50442,6 +50571,7 @@ var NoPreviewAvailable_component = normalizeComponent(
 
 
 
+
 /* harmony default export */ var PreviewPanelvue_type_script_lang_js_ = ({
   props: ['nodeRegistry', 'visible', 'previewConfigs'],
   components: {
@@ -50519,16 +50649,24 @@ var NoPreviewAvailable_component = normalizeComponent(
       this.previewNode();
     },
     handleAssignmentChanges: function handleAssignmentChanges(currentValue, previousValue) {
+      var _this = this;
       if (currentValue === previousValue) {
         return;
       }
-      this.prepareData();
+      var nodeConfig = this.previewConfigs.find(function (config) {
+        return config.matcher(_this.data);
+      });
+      if (nodeConfig) {
+        this.prepareData();
+      } else {
+        this.$emit('togglePreview', false);
+      }
     },
     onSelectedPreview: function onSelectedPreview(item) {
       this.selectedPreview = item;
     },
     previewNode: function previewNode() {
-      var _this = this,
+      var _this2 = this,
         _this$highlightedNode3,
         _this$highlightedNode4;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -50536,7 +50674,7 @@ var NoPreviewAvailable_component = normalizeComponent(
         return;
       }
       var previewConfig = this.previewConfigs.find(function (config) {
-        return config.matcher(_this.data);
+        return config.matcher(_this2.data);
       });
       var clone = {};
       for (var prop in this.data) {
@@ -50546,7 +50684,10 @@ var NoPreviewAvailable_component = normalizeComponent(
         }
       }
       var nodeData = encodeURI(JSON.stringify(clone));
-      this.previewUrl = previewConfig ? "".concat(previewConfig.url, "?node=").concat(nodeData) : null;
+
+      // if the node has the configurations (for example screenRef for a task in a task)
+      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;
     },
@@ -50572,9 +50713,9 @@ var NoPreviewAvailable_component = normalizeComponent(
 });
 ;// 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=24f0829e&prod&lang=scss&scoped=true&
-var preview_panelvue_type_style_index_0_id_24f0829e_prod_lang_scss_scoped_true_ = __webpack_require__(71760);
-;// CONCATENATED MODULE: ./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=24f0829e&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=b558053a&prod&lang=scss&scoped=true&
+var preview_panelvue_type_style_index_0_id_b558053a_prod_lang_scss_scoped_true_ = __webpack_require__(4132);
+;// CONCATENATED MODULE: ./src/components/inspectors/preview_panel.scss?vue&type=style&index=0&id=b558053a&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/components/inspectors/PreviewPanel.vue
 
@@ -50587,11 +50728,11 @@ var preview_panelvue_type_style_index_0_id_24f0829e_prod_lang_scss_scoped_true_
 
 var PreviewPanel_component = normalizeComponent(
   inspectors_PreviewPanelvue_type_script_lang_js_,
-  PreviewPanelvue_type_template_id_24f0829e_scoped_true_render,
-  PreviewPanelvue_type_template_id_24f0829e_scoped_true_staticRenderFns,
+  PreviewPanelvue_type_template_id_b558053a_scoped_true_render,
+  PreviewPanelvue_type_template_id_b558053a_scoped_true_staticRenderFns,
   false,
   null,
-  "24f0829e",
+  "b558053a",
   null
   
 )
@@ -51457,6 +51598,11 @@ var boundaryTimerEvent_id = 'processmaker-modeler-boundary-timer-event';
         eventDefinitions[0].id = node.definition.get('eventDefinitions')[0].id;
         setNodeProp(node, 'eventDefinitions', eventDefinitions);
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: key,
+          value: value[key]
+        });
         setNodeProp(node, key, value[key]);
       }
     }
@@ -75667,6 +75813,8 @@ var Room = /*#__PURE__*/function () {
 
 
 
+
+
 
 
 
@@ -75839,6 +75987,18 @@ var Multiplayer = /*#__PURE__*/function () {
         // Update the element in the shared array
         applyUpdate(_this.yDoc, new Uint8Array(updateDoc));
       });
+      this.clientIO.on('updateInspector', function (payload) {
+        var updateDoc = payload.updateDoc,
+          updatedNodes = payload.updatedNodes;
+
+        // Update the elements in the process
+        updatedNodes.forEach(function (data) {
+          _this.updateShapeFromInspector(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);
       });
@@ -75862,6 +76022,11 @@ var Multiplayer = /*#__PURE__*/function () {
       window.ProcessMaker.EventBus.$on('multiplayer-addLanes', function (lanes) {
         _this.addLaneNodes(lanes);
       });
+      window.ProcessMaker.EventBus.$on('multiplayer-updateInspectorProperty', function (data) {
+        if (_this.modeler.isMultiplayer) {
+          _this.updateInspectorProperty(data);
+        }
+      });
     }
   }, {
     key: "addNode",
@@ -75880,6 +76045,11 @@ var Multiplayer = /*#__PURE__*/function () {
   }, {
     key: "createShape",
     value: function createShape(value) {
+      var node = this.getNodeById(value.id);
+      // validate repeated shapes
+      if (node) {
+        return;
+      }
       if (this.modeler.nodeRegistry[value.type] && this.modeler.nodeRegistry[value.type].multiplayerClient) {
         this.modeler.nodeRegistry[value.type].multiplayerClient(this.modeler, value);
       } else {
@@ -75975,10 +76145,18 @@ var Multiplayer = /*#__PURE__*/function () {
       // Get the node to update
       var index = this.getIndex(nodeData.nodeThatWillBeReplaced.definition.id);
       var nodeToUpdate = this.yArray.get(index);
+
       // Update the node id in the nodeData
       nodeData.id = "node_".concat(_classPrivateFieldGet(this, _nodeIdGenerator).getDefinitionNumber());
       // Update the node id generator
       _classPrivateFieldGet(this, _nodeIdGenerator).updateCounters();
+      this.replaceShape({
+        oldNodeId: nodeData.nodeThatWillBeReplaced.definition.id,
+        id: nodeData.id,
+        type: newControl,
+        x: nodeData.x,
+        y: nodeData.y
+      });
       // Update the node in the shared array
       this.yDoc.transact(function () {
         nodeToUpdate.set('type', newControl);
@@ -76237,6 +76415,85 @@ var Multiplayer = /*#__PURE__*/function () {
         y: y + height / 2
       };
     }
+  }, {
+    key: "updateInspectorProperty",
+    value: function updateInspectorProperty(data) {
+      var index = this.getIndex(data.id);
+      var nodeToUpdate = this.yArray.get(index);
+      if (nodeToUpdate) {
+        var newValue = data.value;
+        if (data.key === 'loopCharacteristics') {
+          newValue = JSON.stringify(data.value);
+        }
+        nodeToUpdate.set(data.key, newValue);
+        var stateUpdate = encodeStateAsUpdate(this.yDoc);
+        // Send the update to the web socket server
+        this.clientIO.emit('updateFromInspector', {
+          updateDoc: stateUpdate,
+          isReplaced: false
+        });
+      }
+    }
+  }, {
+    key: "setNodeProp",
+    value: function setNodeProp(node, key, value) {
+      store.commit('updateNodeProp', {
+        node: node,
+        key: key,
+        value: value
+      });
+    }
+  }, {
+    key: "updateShapeFromInspector",
+    value: function updateShapeFromInspector(data) {
+      var node = null;
+      if (data.oldNodeId && data.oldNodeId !== data.id) {
+        var index = this.getIndex(data.oldNodeId);
+        var yNode = this.yArray.get(index);
+        yNode.set('id', data.id);
+        node = this.getNodeById(data.oldNodeId);
+        store.commit('updateNodeProp', {
+          node: node,
+          key: 'id',
+          value: data.id
+        });
+        return;
+      }
+      // create a node
+      node = this.getNodeById(data.id);
+      if (node) {
+        // loopCharacteristics property section
+        if (data.loopCharacteristics) {
+          var loopCharacteristics = JSON.parse(data.loopCharacteristics);
+          this.modeler.nodeRegistry[node.type].loopCharacteristicsHandler({
+            type: node.definition.type,
+            '$loopCharactetistics': {
+              id: data.id,
+              loopCharacteristics: loopCharacteristics
+            }
+          }, node, this.setNodeProp, this.modeler.moddle, this.modeler.definitions, false);
+          return;
+        }
+        if (this.modeler.nodeRegistry[node.type] && this.modeler.nodeRegistry[node.type].multiplayerInspectorHandler) {
+          this.modeler.nodeRegistry[node.type].multiplayerInspectorHandler(node, data);
+          return;
+        }
+        var keys = Object.keys(data).filter(function (key) {
+          return key !== 'id';
+        });
+        if (keys[0] === 'condition') {
+          node.definition.get('eventDefinitions')[0].get('condition').body = data[keys[0]];
+        }
+        if (keys[0] === 'gatewayDirection') {
+          node.definition.set('gatewayDirection', data[keys[0]]);
+        }
+        store.commit('updateNodeProp', {
+          node: node,
+          key: keys[0],
+          value: data[keys[0]]
+        });
+      }
+    }
   }]);
   return Multiplayer;
 }();
@@ -76317,8 +76574,6 @@ var Multiplayer = /*#__PURE__*/function () {
 
 
 
-
-
 
 
 
@@ -76429,8 +76684,6 @@ var Multiplayer = /*#__PURE__*/function () {
       showInspectorButton: true,
       inspectorButtonRight: 65,
       previewConfigs: [],
-      multiplayer: null,
-      isMultiplayer: false,
       flowTypes: ['processmaker-modeler-sequence-flow', 'processmaker-modeler-message-flow', 'processmaker-modeler-data-input-association', 'processmaker-modeler-data-output-association', 'processmaker-modeler-association']
     };
   },
@@ -76508,6 +76761,9 @@ var Multiplayer = /*#__PURE__*/function () {
     },
     showComponent: function showComponent() {
       return store.getters.showComponent;
+    },
+    isMultiplayer: function isMultiplayer() {
+      return store.getters.isMultiplayer;
     }
   },
   methods: {
@@ -76524,6 +76780,9 @@ var Multiplayer = /*#__PURE__*/function () {
       this.isOpenInspector = value;
     },
     handlePreview: function handlePreview() {
+      if (this.highlightedNodes.length != 1) {
+        this.isOpenPreview = false;
+      }
       this.$refs['preview-panel'].previewNode(true);
       this.handleTogglePreview(true);
     },
@@ -77543,8 +77802,15 @@ var Multiplayer = /*#__PURE__*/function () {
             width: node.diagram.bounds.width,
             type: node.type,
             id: node.definition.id,
+            oldNodeId: null,
             isAddingLaneAbove: true,
-            color: node.color
+            color: node.definition.color,
+            dueIn: node.definition.dueIn,
+            name: node.definition.name,
+            assignedUsers: node.definition.assignedUsers,
+            config: node.definition.config,
+            loopCharacteristics: null,
+            gatewayDirection: null
           };
           if (node !== null && node !== void 0 && (_node$pool = node.pool) !== null && _node$pool !== void 0 && _node$pool.component) {
             defaultData['poolId'] = node.pool.component.id;
@@ -77656,7 +77922,7 @@ var Multiplayer = /*#__PURE__*/function () {
           while (1) switch (_context19.prev = _context19.next) {
             case 0:
               // Check if the node is not replaced
-              if (_this32.isMultiplayer && !(options !== null && options !== void 0 && options.isReplaced)) {
+              if (_this32.isMultiplayer) {
                 // Emit event to server to remove node
                 window.ProcessMaker.EventBus.$emit('multiplayer-removeNode', node);
               }
@@ -77786,7 +78052,7 @@ var Multiplayer = /*#__PURE__*/function () {
                         nodeThatWillBeReplaced: node
                       };
                       _context24.next = 4;
-                      return _this35.replaceNodeProcedure(nodeData);
+                      return _this35.replaceNodeProcedure(nodeData, true);
                     case 4:
                     case "end":
                       return _context24.stop();
@@ -77804,44 +78070,26 @@ var Multiplayer = /*#__PURE__*/function () {
       var _arguments6 = arguments,
         _this36 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
-        var isReplaced, _this36$paper$localTo, clientX, clientY, newNode, nodeTypes, newControl;
+        var isReplaced, _this36$paper$localTo, clientX, clientY;
         return _regeneratorRuntime().wrap(function _callee26$(_context26) {
           while (1) switch (_context26.prev = _context26.next) {
             case 0:
               isReplaced = _arguments6.length > 1 && _arguments6[1] !== undefined ? _arguments6[1] : false;
-              // Get the clientX and clientY from the node that will be replaced
-              _this36$paper$localTo = _this36.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds), clientX = _this36$paper$localTo.x, clientY = _this36$paper$localTo.y;
-              data.clientX = clientX;
-              data.clientY = clientY;
-              _context26.next = 6;
+              if (isReplaced) {
+                // Get the clientX and clientY from the node that will be replaced
+                _this36$paper$localTo = _this36.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds), clientX = _this36$paper$localTo.x, clientY = _this36$paper$localTo.y;
+                data.clientX = clientX;
+                data.clientY = clientY;
+              }
+              _context26.next = 4;
               return _this36.handleDrop(data);
-            case 6:
-              newNode = _context26.sent;
-              _context26.next = 9;
+            case 4:
+              _context26.next = 6;
               return _this36.removeNode(data.nodeThatWillBeReplaced, {
                 removeRelationships: false,
                 isReplaced: isReplaced
               });
-            case 9:
-              _this36.highlightNode(newNode);
-              _this36.selectNewNode(newNode);
-              if (_this36.isMultiplayer && !isReplaced) {
-                // Get all node types
-                nodeTypes = nodeTypesStore.getters.getNodeTypes; // Get the new control
-                newControl = nodeTypes.flatMap(function (nodeType) {
-                  var _nodeType$items;
-                  return (_nodeType$items = nodeType.items) === null || _nodeType$items === void 0 ? void 0 : _nodeType$items.filter(function (item) {
-                    return item.type === data.typeToReplaceWith;
-                  });
-                }).filter(Boolean); // If the new control is found, emit event to server to replace node
-                if (newControl.length === 1) {
-                  window.ProcessMaker.EventBus.$emit('multiplayer-replaceNode', {
-                    data: data,
-                    newControl: newControl[0].type
-                  });
-                }
-              }
-            case 12:
+            case 6:
             case "end":
               return _context26.stop();
           }
@@ -78206,7 +78454,7 @@ var Multiplayer = /*#__PURE__*/function () {
       window.location = redirectTo;
     },
     enableMultiplayer: function enableMultiplayer(value) {
-      this.isMultiplayer = value;
+      store.commit('enableMultiplayer', value);
     },
     addPlayer: function addPlayer(player) {
       this.players.push(player);
@@ -78436,8 +78684,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_2da6a680_render,
-  Modelervue_type_template_id_2da6a680_staticRenderFns,
+  Modelervue_type_template_id_290d2c96_render,
+  Modelervue_type_template_id_290d2c96_staticRenderFns,
   false,
   null,
   null,