@processmaker/modeler 1.39.24 → 1.39.25

package/dist/modeler.common.js

@@ -13247,7 +13247,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".crown-align{z-index:1;display:-webkit
 
 /***/ }),
 
-/***/ 10379:
+/***/ 65201:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13261,7 +13261,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___);
 
@@ -26735,19 +26735,19 @@ var update = add("09642f80", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 41291:
+/***/ 78425:
 /***/ (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__(10379);
+var content = __webpack_require__(65201);
 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("37c83623", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("58cf1176", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -31977,7 +31977,8 @@ function removeRef(state, ref, callBack) {
     allowSavingElementPosition: true,
     copiedElements: [],
     clientLeftPaper: false,
-    readOnly: false
+    readOnly: false,
+    isMultiplayer: false
   },
   getters: {
     nodes: function nodes(state) {
@@ -32029,6 +32030,9 @@ function removeRef(state, ref, callBack) {
     },
     showComponent: function showComponent(state) {
       return !state.readOnly;
+    },
+    isMultiplayer: function isMultiplayer(state) {
+      return state.isMultiplayer;
     }
   },
   mutations: {
@@ -32142,6 +32146,9 @@ function removeRef(state, ref, callBack) {
     },
     setClientLeftPaper: function setClientLeftPaper(state, status) {
       state.clientLeftPaper = status;
+    },
+    enableMultiplayer: function enableMultiplayer(state, value) {
+      state.isMultiplayer = value;
     }
   },
   actions: {
@@ -37709,6 +37716,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,
@@ -37739,11 +37748,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: [{
@@ -38744,6 +38777,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]);
       }
     }
@@ -39671,6 +39709,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) {
@@ -40362,6 +40405,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) {
@@ -41728,7 +41776,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]);
       }
     }
@@ -42661,7 +42719,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]);
       }
     }
@@ -43230,7 +43298,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]);
       }
     }
@@ -44425,7 +44503,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")
   });
@@ -44433,6 +44511,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;
@@ -44533,10 +44618,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);
@@ -45166,10 +45251,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: [{
@@ -47680,10 +47775,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=2da6a680&
+;// 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=562fa03a&
 
 
-var Modelervue_type_template_id_2da6a680_render = function render() {
+var Modelervue_type_template_id_562fa03a_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('span', {
@@ -47908,9 +48003,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_562fa03a_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=2da6a680&
+;// CONCATENATED MODULE: ./src/components/modeler/Modeler.vue?vue&type=template&id=562fa03a&
 
 ;// 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() {
@@ -49766,8 +49861,8 @@ var InspectorButton_component = normalizeComponent(
 )
 
 /* harmony default export */ var InspectorButton = (InspectorButton_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/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-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/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', {
@@ -49833,7 +49928,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 = [];
 
 ;// CONCATENATED MODULE: external "@processmaker/screen-builder"
 var screen_builder_namespaceObject = require("@processmaker/screen-builder");
@@ -49983,8 +50078,9 @@ external_vue_default().component('FormMultiSelect', vue_form_elements_namespaceO
             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() {
@@ -50072,11 +50168,11 @@ external_vue_default().component('FormMultiSelect', vue_form_elements_namespaceO
     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');
@@ -50086,24 +50182,34 @@ external_vue_default().component('FormMultiSelect', vue_form_elements_namespaceO
         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-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/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__(41291);
-;// 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-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/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__(78425);
+;// 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
 
@@ -50116,11 +50222,11 @@ 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
   
 )
@@ -51359,6 +51465,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]);
       }
     }
@@ -75569,6 +75680,8 @@ var Room = /*#__PURE__*/function () {
 
 
 
+
+
 
 
 
@@ -75741,6 +75854,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);
       });
@@ -75764,6 +75889,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",
@@ -75782,6 +75912,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 {
@@ -75877,10 +76012,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);
@@ -76139,6 +76282,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;
 }();
@@ -76219,8 +76441,6 @@ var Multiplayer = /*#__PURE__*/function () {
 
 
 
-
-
 
 
 
@@ -76331,8 +76551,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']
     };
   },
@@ -76410,6 +76628,9 @@ var Multiplayer = /*#__PURE__*/function () {
     },
     showComponent: function showComponent() {
       return store.getters.showComponent;
+    },
+    isMultiplayer: function isMultiplayer() {
+      return store.getters.isMultiplayer;
     }
   },
   methods: {
@@ -77445,8 +77666,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;
@@ -77558,7 +77786,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);
               }
@@ -77688,7 +77916,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();
@@ -77706,44 +77934,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();
           }
@@ -78108,7 +78318,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);
@@ -78338,8 +78548,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_2da6a680_render,
-  Modelervue_type_template_id_2da6a680_staticRenderFns,
+  Modelervue_type_template_id_562fa03a_render,
+  Modelervue_type_template_id_562fa03a_staticRenderFns,
   false,
   null,
   null,