@processmaker/modeler 1.39.23 → 1.39.25

package/package.json

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

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/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) {
@@ -1161,8 +1160,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 +1264,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 +1324,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 +1571,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/components/nodes/task/shape.js

@@ -11,9 +11,6 @@ export default shapes.standard.Rectangle.extend({
   }, {
     tagName: 'image',
     selector: 'image',
-  }, {
-    tagName: 'i',
-    selector: 'icon',
   },
   markersMarkup('topLeft'),
   markersMarkup('topCenter'),
@@ -28,7 +25,6 @@ export default shapes.standard.Rectangle.extend({
     size: { width: 100, height: 60 },
     attrs: {
       'image': { 'ref-x': 4, 'ref-y': 4, ref: 'rect', width: 16, height: 16, 'data-test': 'nodeIcon' },
-      'icon': { ref: 'rect', 'ref-x': 4, 'ref-y': 4, width: 16, height: 16, 'data-test': 'nodeCustomIcon' },
       ...markersAttrs('topLeft', { 'ref-y': 4, ref: 'rect' }),
       ...markersAttrs('topCenter', { 'ref-y': 4, ref: 'rect' }),
       ...markersAttrs('topRight', { 'ref-y': 4, 'ref-x': 96, ref: 'rect' }, -1),

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/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 }) {