@processmaker/modeler 1.39.24 → 1.39.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.24",
+  "version": "1.39.26",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/components/crown/crownButtons/previewButton.vue

@@ -1,10 +1,11 @@
 <template>
   <crown-button
-    v-if="node.isBpmnType(...validPreviewElements)"
+    v-if="displayIcon"
     :title="$t('Preview')"
     role="menuitem"
     id="preview-button"
     aria-label="Preview"
+    data-test="preview-button"
     @click="preview()"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
@@ -24,8 +25,21 @@ export default {
     return {
       trashIcon,
       validPreviewElements,
+      displayIcon: false,
     };
   },
+  mounted() {
+    const defaultDataTransform = (node) => Object.entries(node.definition).reduce((data, [key, value]) => {
+      data[key] = value;
+      return data;
+    }, {});
+    const nodeData = defaultDataTransform(this.node);
+
+    const previewConfig = window.ProcessMaker.$modeler.previewConfigs.find(config => {
+      return config.matcher(nodeData);
+    });
+    this.displayIcon =  !!previewConfig;
+  },
   computed: {
     isPoolLane() {
       return this.node.type === 'processmaker-modeler-lane';
@@ -33,7 +47,11 @@ export default {
   },
   methods: {
     preview() {
-      this.$emit('previewNode', this.node);
+      if (window.ProcessMaker.$modeler.isOpenPreview) {
+        window.ProcessMaker.$modeler.isOpenPreview = false;
+      } else {
+        this.$emit('previewNode', this.node);
+      }
     },
   },
 };

package/src/components/inspectors/InspectorPanel.vue

@@ -146,9 +146,10 @@ export default {
             : undefined;
 
           this.setNodeProp(this.highlightedNode, 'documentation', documentation);
+          this.multiplayerHook('documentation', documentation, store.state.isMultiplayer);
         }
 
-        inspectorHandler(omit(value, ['documentation']));
+        inspectorHandler(omit(value, ['documentation']), store.state.isMultiplayer);
       };
     },
     hasCustomInspectorHandler() {
@@ -240,20 +241,21 @@ export default {
     isConnectedToSubProcess(definition) {
       return definition.targetRef.$type === 'bpmn:CallActivity';
     },
-    customInspectorHandler(value) {
-      return this.nodeRegistry[this.highlightedNode.type].inspectorHandler(value, this.highlightedNode, this.setNodeProp, this.moddle, this.definitions, this.defaultInspectorHandler);
+    customInspectorHandler(value, isMultiplayer) {
+      return this.nodeRegistry[this.highlightedNode.type].inspectorHandler(value, this.highlightedNode, this.setNodeProp, this.moddle, this.definitions, this.defaultInspectorHandler, isMultiplayer);
     },
-    processNodeInspectorHandler(value) {
-      return this.defaultInspectorHandler(omit(value, ['artifacts', 'flowElements', 'laneSets']));
+    processNodeInspectorHandler(value, isMultiplayer) {
+      return this.defaultInspectorHandler(omit(value, ['artifacts', 'flowElements', 'laneSets']), isMultiplayer);
     },
     setNodeProp(node, key, value) {
       this.$emit('shape-resize');
       store.commit('updateNodeProp', { node, key, value });
     },
-    defaultInspectorHandler(value) {
+    defaultInspectorHandler(value, isMultiplayer) {
       /* Go through each property and rebind it to our data */
       for (const key in omit(value, ['$type', 'eventDefinitions'])) {
-        if (this.highlightedNode.definition.get(key) !== value[key]) {
+        if (this.highlightedNode.definition.get(key) !== value[key]) {        
+          this.multiplayerHook(key, value[key], isMultiplayer);
           this.setNodeProp(this.highlightedNode, key, value[key]);
         }
       }
@@ -261,6 +263,13 @@ export default {
     updateState() {
       this.$emit('save-state');
     },
+    multiplayerHook(key, value, isMultiplayer) {
+      if (isMultiplayer) {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: this.highlightedNode.definition.id , key, value,
+        });
+      }
+    },
   },
 };
 </script>

package/src/components/inspectors/LoopCharacteristics.js

@@ -2,13 +2,19 @@ import LoopCharactetistics from '@/components/inspectors/LoopCharacteristics.vue
 import NodeInspector from '@/NodeInspector';
 import omit from 'lodash/omit';
 
-export const loopCharacteristicsHandler = function(value, node, setNodeProp, moddle, definitions) {
+export const loopCharacteristicsHandler = function(value, node, setNodeProp, moddle, definitions, isMultiplayer) {
   const nodeInspector = new NodeInspector(definitions, { prefix: `${node.definition.id}_inner` });
   let update = nodeInspector.setDefinitionProps(value.$loopCharactetistics, setNodeProp, moddle, {});
   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;
     delete node.definition.loopCharacteristics;

package/src/components/inspectors/PreviewPanel.vue

@@ -7,7 +7,7 @@
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"
     @mousemove="onMouseMove"
-    data-test="preview-column"
+    data-test="preview-panel"
   >
     <b-row class="control-bar">
       <b-col cols="9">
@@ -138,7 +138,16 @@ export default {
       if (currentValue === previousValue) {
         return;
       }
-      this.prepareData();
+
+      const nodeConfig = this.previewConfigs.find(config => {
+        return config.matcher(this.data);
+      });
+
+      if (nodeConfig) {
+        this.prepareData();
+      } else {
+        this.$emit('togglePreview', false);
+      }
     },
 
     onSelectedPreview(item) {
@@ -159,9 +168,12 @@ export default {
           clone[prop] = this.data[prop];
         }
       }
+
       const nodeData = encodeURI(JSON.stringify(clone));
 
-      this.previewUrl = previewConfig ? `${previewConfig.url}?node=${nodeData}` : null;
+      // if the node has the configurations (for example screenRef for a task in a task)
+      const nodeHasConfigParams = Object.keys(clone).length > 0;
+      this.previewUrl = previewConfig &&  nodeHasConfigParams ? `${previewConfig.url}?node=${nodeData}` : null;
       this.taskTitle = this.highlightedNode?.definition?.name;
       this.showPanel = true;
     },

package/src/components/modeler/Modeler.vue

@@ -330,8 +330,6 @@ export default {
       showInspectorButton: true,
       inspectorButtonRight: 65,
       previewConfigs: [],
-      multiplayer: null,
-      isMultiplayer: false,
       flowTypes: [
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-message-flow',
@@ -403,6 +401,7 @@ export default {
       return getInvalidNodes(this.validationErrors, this.nodes);
     },
     showComponent: () => store.getters.showComponent,
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
   methods: {
     registerPreview(config) {
@@ -418,6 +417,9 @@ export default {
       this.isOpenInspector = value;
     },
     handlePreview() {
+      if (this.highlightedNodes.length != 1) {
+        this.isOpenPreview = false;
+      }
       this.$refs['preview-panel'].previewNode(true);
       this.handleTogglePreview(true) ;
     },
@@ -1161,8 +1163,15 @@ export default {
             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?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;
@@ -1258,7 +1267,7 @@ export default {
     },
     async removeNode(node, options) {
       // Check if the node is not replaced
-      if (this.isMultiplayer && !options?.isReplaced) {
+      if (this.isMultiplayer) {
         // Emit event to server to remove node
         window.ProcessMaker.EventBus.$emit('multiplayer-removeNode', node);
       }
@@ -1318,35 +1327,19 @@ export default {
             control: { type: typeToReplaceWith },
             nodeThatWillBeReplaced: node,
           };
-
-          await this.replaceNodeProcedure(nodeData);
+          await this.replaceNodeProcedure(nodeData, true);
         });
       });
     },
     async replaceNodeProcedure(data, isReplaced = false) {
-      // Get the clientX and clientY from the node that will be replaced
-      const { x: clientX, y: clientY } = this.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds);
-      data.clientX = clientX;
-      data.clientY = clientY;
-
-      const newNode = await this.handleDrop(data);
-
-      await this.removeNode(data.nodeThatWillBeReplaced, { removeRelationships: false, isReplaced });
-      this.highlightNode(newNode);
-      this.selectNewNode(newNode);
-
-      if (this.isMultiplayer && !isReplaced) {
-        // Get all node types
-        const nodeTypes = nodeTypesStore.getters.getNodeTypes;
-        // Get the new control
-        const newControl = nodeTypes.flatMap(nodeType => {
-          return nodeType.items?.filter(item => 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, newControl: newControl[0].type });
-        }
+      if (isReplaced) {
+        // Get the clientX and clientY from the node that will be replaced
+        const { x: clientX, y: clientY } = this.paper.localToClientPoint(data.nodeThatWillBeReplaced.diagram.bounds);
+        data.clientX = clientX;
+        data.clientY = clientY;
       }
+      await this.handleDrop(data);
+      await this.removeNode(data.nodeThatWillBeReplaced, { removeRelationships: false, isReplaced });
     },
     replaceAiNode({ node, typeToReplaceWith, assetId, assetName, redirectTo }) {
       this.performSingleUndoRedoTransaction(async() => {
@@ -1581,7 +1574,7 @@ export default {
       window.location = redirectTo;
     },
     enableMultiplayer(value) {
-      this.isMultiplayer = value;
+      store.commit('enableMultiplayer', value);
     },
     addPlayer(player) {
       this.players.push(player);

package/src/components/nodes/boundaryTimerEvent/index.js

@@ -70,6 +70,9 @@ export default merge(cloneDeep(boundaryEventConfig), {
 
         setNodeProp(node, 'eventDefinitions', eventDefinitions);
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id , key, value: value[key],
+        });
         setNodeProp(node, key, value[key]);
       }
     }

package/src/components/nodes/conditionalEventDefinition/index.js

@@ -25,14 +25,22 @@ export default {
     }, {});
   },
   inspectorHandler(value, node, setNodeProp) {
-    
     for (const key in omit(value, ['$type', 'eventDefinitions'])) {
       if (node.definition[key] === value[key]) {
         continue;
       }
       if (key === 'condition') {
         node.definition.get('eventDefinitions')[0].get('condition').body = value[key];
+
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key,
+          value: value[key],
+        });
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id , key, value: value[key],
+        });
         setNodeProp(node, key, value[key]);
       }
     }

package/src/components/nodes/errorEndEvent/index.js

@@ -36,13 +36,32 @@ export default merge(cloneDeep(endEventConfig), {
       if (node.definition[key] === value[key]) {
         continue;
       }
-
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id , key, value: value[key],
+      });
       setNodeProp(node, key, value[key]);
     }
 
     const 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(node, data){
+    const keys = Object.keys(data).filter((key) => key !== 'id');
+    if (keys[0] === 'eventDefinitions') {
+      const error = data[keys[0]][0].errorRef;
+      const errorRef = node.definition.get('eventDefinitions')[0].errorRef;
+      if (error && errorRef) {
+        if (error.name !== errorRef.name) {
+          errorRef.name = error.name;
+        }
+      }
     }
   },
   inspectorConfig: [

package/src/components/nodes/intermediateTimerEvent/index.js

@@ -121,7 +121,15 @@ export default {
           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, value: value[key],
+        });
         setNodeProp(node, key, value[key]);
       }
     }

package/src/components/nodes/messageEventDefinition/index.js

@@ -29,7 +29,9 @@ export default {
       if (node.definition[key] === value[key]) {
         continue;
       }
-      
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id , key, value: value[key],
+      });
       setNodeProp(node, key, value[key]);
     }
       

package/src/components/nodes/sequenceFlow/index.js

@@ -55,6 +55,9 @@ export default {
           setNodeProp(node, key, conditionExpression);
         }
       } else {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id , key, value: value[key],
+        });
         setNodeProp(node, key, value[key]);
       }
     }

package/src/components/nodes/signalEventDefinition/index.js

@@ -30,7 +30,9 @@ export default {
       if (node.definition[key] === value[key]) {
         continue;
       }
-
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id , key, value: value[key],
+      });
       setNodeProp(node, key, value[key]);
     }
 

package/src/components/nodes/startTimerEvent/index.js

@@ -52,7 +52,15 @@ export default merge(cloneDeep(baseStartEventConfig), {
           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, value: value[key],
+        });
         setNodeProp(node, key, value[key]);
       }
     }

package/src/components/nodes/subProcess/index.js

@@ -41,12 +41,17 @@ export default {
     const 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));
 
   },

package/src/components/nodes/task/index.js

@@ -63,10 +63,10 @@ export default {
       }),
     });
   },
-  inspectorHandler(value, node, setNodeProp, moddle, definitions, defaultInspectorHandler) {
-    handleMarkerFlagsValue(value.markerFlags, node, setNodeProp, moddle);
-    loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions);
-    defaultInspectorHandler(omit(value, 'markerFlags', '$loopCharactetistics'));
+  inspectorHandler(value, node, setNodeProp, moddle, definitions, defaultInspectorHandler, isMultiplayer) {
+    handleMarkerFlagsValue(value.markerFlags, node, setNodeProp);
+    loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions, isMultiplayer);
+    defaultInspectorHandler(omit(value, 'markerFlags', '$loopCharactetistics'), isMultiplayer);
   },
   inspectorData(node, defaultDataTransform, inspector) {
     const inspectorData = defaultDataTransform(node);

package/src/multiplayer/multiplayer.js

@@ -4,6 +4,7 @@ import { getNodeIdGenerator } from '../NodeIdGenerator';
 import { getDefaultAnchorPoint } from '@/portsUtils';
 import Room from './room';
 import store from '@/store';
+
 export default class Multiplayer {
   clientIO = null;
   yDoc = null;
@@ -134,6 +135,19 @@ export default class Multiplayer {
       Y.applyUpdate(this.yDoc, new Uint8Array(updateDoc));
     });
 
+    this.clientIO.on('updateInspector', (payload) => {
+      const { updateDoc, updatedNodes } = payload;
+
+      // Update the elements in the process
+      updatedNodes.forEach((data) => {
+        this.updateShapeFromInspector(data);
+      });
+
+      // Update the element in the shared array
+      Y.applyUpdate(this.yDoc, new Uint8Array(updateDoc));
+    });
+
+
     window.ProcessMaker.EventBus.$on('multiplayer-addNode', ( data ) => {
       this.addNode(data);
     });
@@ -160,6 +174,11 @@ export default class Multiplayer {
     window.ProcessMaker.EventBus.$on('multiplayer-addLanes', ( lanes ) => {
       this.addLaneNodes(lanes);
     });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateInspectorProperty', ( data ) => {
+      if (this.modeler.isMultiplayer) {
+        this.updateInspectorProperty(data);
+      }
+    });
   }
   addNode(data) {
     // Add the new element to the shared array
@@ -171,14 +190,18 @@ export default class Multiplayer {
     // Send the update to the web socket server
     this.clientIO.emit('createElement', { updateDoc: stateUpdate });
   }
-  createShape(value){
+  createShape(value) {
+    const 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 {
       this.modeler.addRemoteNode(value);
     }
     this.#nodeIdGenerator.updateCounters();
-
   }
   createRemoteShape(changes) {
     return new Promise(resolve => {
@@ -238,10 +261,18 @@ export default class Multiplayer {
     // Get the node to update
     const index = this.getIndex(nodeData.nodeThatWillBeReplaced.definition.id);
     const nodeToUpdate =  this.yArray.get(index);
+
     // Update the node id in the nodeData
     nodeData.id = `node_${this.#nodeIdGenerator.getDefinitionNumber()}`;
     // Update the node id generator
     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(() => {
       nodeToUpdate.set('type', newControl);
@@ -432,4 +463,67 @@ export default class Multiplayer {
       ? { x: x + connectionOffset.x, y: y + connectionOffset.y }
       : { x: x + (width / 2), y: y + (height / 2) };
   }
+  updateInspectorProperty(data) {
+    const index = this.getIndex(data.id);
+    const nodeToUpdate =  this.yArray.get(index);
+
+    if (nodeToUpdate) {
+      let newValue = data.value;
+      if (data.key === 'loopCharacteristics') {
+        newValue = JSON.stringify(data.value);
+      }
+      nodeToUpdate.set(data.key, newValue);
+
+      const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
+      // Send the update to the web socket server
+      this.clientIO.emit('updateFromInspector', { updateDoc: stateUpdate, isReplaced: false });
+    }
+  }
+  setNodeProp(node, key, value) {
+    store.commit('updateNodeProp', { node, key, value });
+  }
+  updateShapeFromInspector(data) {
+    let node = null;
+    if (data.oldNodeId && data.oldNodeId !== data.id) {
+      const index = this.getIndex(data.oldNodeId);
+      const yNode =  this.yArray.get(index);
+      yNode.set('id', data.id);
+      node = this.getNodeById(data.oldNodeId);
+      store.commit('updateNodeProp', { node, key: 'id', value: data.id });
+      return;
+    }
+    // create a node
+    node = this.getNodeById(data.id);
+
+    if (node) {
+      // loopCharacteristics property section
+      if (data.loopCharacteristics) {
+        const loopCharacteristics = JSON.parse(data.loopCharacteristics);
+        this.modeler.nodeRegistry[node.type].loopCharacteristicsHandler({
+          type: node.definition.type,
+          '$loopCharactetistics': {
+            id: data.id,
+            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;
+      }
+      const keys = Object.keys(data).filter((key) => 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, key:keys[0], value: data[keys[0]] });
+    }
+
+  }
 }

package/src/setup/initialLoad.js

@@ -20,3 +20,25 @@ window.ProcessMaker.EventBus.$on('modeler-init', registerNodes);
 window.ProcessMaker.EventBus.$on('modeler-start', ({ loadXML }) => {
   loadXML(blank);
 });
+
+
+
+window.ProcessMaker.EventBus.$on(
+  'modeler-init',
+  (event) => {
+    event.registerPreview({
+      url:'/designer/screens/preview',
+      receivingParams: ['screenRef'],
+      matcher: (nodeData) => {
+        return nodeData?.$type  === 'bpmn:Task';
+      },
+    });
+    event.registerPreview({
+      url:'/designer/scripts/preview',
+      receivingParams: ['scriptRef'],
+      matcher: (nodeData) => {
+        return nodeData?.$type === 'bpmn:ScriptTask';
+      },
+    });
+  });
+

package/src/store.js

@@ -38,6 +38,7 @@ export default new Vuex.Store({
     copiedElements: [],
     clientLeftPaper: false,
     readOnly: false,
+    isMultiplayer: false,
   },
   getters: {
     nodes: state => state.nodes,
@@ -60,6 +61,7 @@ export default new Vuex.Store({
     clientLeftPaper: state => state.clientLeftPaper,
     isReadOnly: state => state.readOnly,
     showComponent: state => !state.readOnly,
+    isMultiplayer: state => state.isMultiplayer,
   },
   mutations: {
     setReadOnly(state, value) {
@@ -96,7 +98,6 @@ export default new Vuex.Store({
         }
       }
       setDefinitionPropertyReactive(node.definition, key, value);
-
       if (value == null) {
         Vue.delete(node.definition, key);
       }
@@ -159,6 +160,9 @@ export default new Vuex.Store({
     setClientLeftPaper(state, status) {
       state.clientLeftPaper = status;
     },
+    enableMultiplayer(state, value){
+      state.isMultiplayer = value;
+    },
   },
   actions: {
     async fetchGlobalProcesses({ commit }) {