@processmaker/modeler 1.39.29 → 1.39.31

package/package.json

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

package/src/assets/spinner.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(245, 245, 245); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
     <circle cx="50" cy="50" fill="none" stroke="#1572c2" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
         <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"/>
     </circle>

package/src/components/inspectors/LoadingPreview.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="no-preview">
-    <img id="preview-asset" :src="previewAsset" alt="Preview Asset">
+  <div class="preview-placeholder">
+    <img id="preview-image" :src="previewAsset" alt="Preview Asset">
     <h1>The preview is loading</h1>
     <h2>Some assets can take some time to load</h2>
 
@@ -20,29 +20,12 @@ export default {
 };
 </script>
 
-<style scoped>
-.no-preview {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-}
-#preview-asset {
-  width: 200px;
-  padding-bottom: 150px;
-}
-
-.no-preview h1 {
-  text-align: center;
-  font-weight: bold;
-  font-size: xx-large;
-  margin-bottom: 50px;
-}
+<style lang="scss" src="./preview_panel.scss" scoped />
 
-.no-preview h2 {
-  text-align: center;
-  font-size: x-large;
-  margin-bottom: 50px;
-}
+<style scoped>
+  #preview-image {
+    width: 130px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
 </style>

package/src/components/inspectors/MessageSelect.vue

@@ -329,7 +329,7 @@ export default {
       immediate: true,
       handler(value) {
         this.selectedOption = this.options.find(option => get(option, this.trackBy) == value);
-          
+
         if (value && !this.selectedOption) {
           this.loadSelected(value);
         }

package/src/components/inspectors/NoPreviewAvailable.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="no-preview">
-    <img :src="noPreviewImg" alt="no preview">
+  <div class="preview-placeholder">
+    <img id="preview-image" :src="noPreviewImg" alt="no preview">
     <h1>No Resource Assigned</h1>
-    <h2>This is a placeholder. Please, assign a resource to this task.</h2>
+    <h2>This is a placeholder screen. Please, assign a resource to this task.</h2>
   </div>
 </template>
 
@@ -17,31 +17,13 @@ export default {
 };
 </script>
 
-<style scoped>
-.no-preview {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #44494E;
-  padding: 5px;
-}
-
-.no-preview img {
-  max-width: 50%;
-  width: auto;
-  padding-bottom: 150px;
-}
 
-.no-preview h1 {
-  text-align: center;
-  font-weight: bold;
-  font-size: xx-large;
-  margin-bottom: 50px;
-}
+<style lang="scss" src="./preview_panel.scss" scoped />
 
-.no-preview h2 {
-  text-align: center;
-  font-size: x-large;
-}
+<style scoped>
+  #preview-image {
+    width: 200px;
+    margin-top:50px;
+    margin-bottom: 50px;
+  }
 </style>

package/src/components/inspectors/preview_panel.scss

@@ -15,7 +15,7 @@ $inspector-column-min-width: 200px;
   min-width: $inspector-column-min-width;
   resize: both;
   overflow:auto;
-  background-color: #F5F5F5;
+  background-color: #fff;
   border-left: 8px solid #EBEEF2;
   z-index: 2;
 }
@@ -63,3 +63,31 @@ $inspector-column-min-width: 200px;
   text-align: center;
   color: #6c757d;
 }
+
+.preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+}
+
+.preview-placeholder h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: -0.04em;
+}
+
+.preview-placeholder h2 {
+  text-align: center;
+  margin-bottom: 50px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: -0.02em;
+}

package/src/components/modeler/Modeler.vue

@@ -1172,6 +1172,8 @@ export default {
             config: node.definition.config,
             loopCharacteristics: null,
             gatewayDirection: null,
+            messageRef: null,
+            extras: {},
           };
           if (node?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;
@@ -1199,6 +1201,8 @@ export default {
               sourceRefId,
               targetRefId,
               waypoint: node.diagram.waypoint,
+              name: node.definition.name,
+              conditionExpression: null,
             };
 
             if (isProcessRequested) {

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

@@ -52,7 +52,7 @@ export default merge(cloneDeep(endEventConfig), {
       });
     }
   },
-  multiplayerInspectorHandler(node, data){
+  multiplayerInspectorHandler(node, data, setNodeProp) {
     const keys = Object.keys(data).filter((key) => key !== 'id');
     if (keys[0] === 'eventDefinitions') {
       const error = data[keys[0]][0].errorRef;
@@ -62,7 +62,9 @@ export default merge(cloneDeep(endEventConfig), {
           errorRef.name = error.name;
         }
       }
+      return;
     }
+    setNodeProp(node, keys[0], data[keys[0]]);
   },
   inspectorConfig: [
     {

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

@@ -34,8 +34,9 @@ export default {
       });
       setNodeProp(node, key, value[key]);
     }
-      
+
     let message = definitions.rootElements.find(element => element.id === value.messageRef);
+
     if (!message && value.messageRef) {
       message = moddle.create('bpmn:Message', {
         id: value.messageRef,
@@ -44,5 +45,16 @@ export default {
       definitions.rootElements.push(message);
     }
     node.definition.get('eventDefinitions')[0].messageRef = message;
+
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+      id: node.definition.id,
+      key: 'messageRef',
+      value: value.messageRef,
+      extras: {
+        messageName: message?.name,
+        allowedUsers: node.definition.get('allowedUsers'),
+        allowedGroups: node.definition.get('allowedGroups'),
+      },
+    });
   },
 };

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

@@ -52,6 +52,9 @@ export default {
         // Set the condition expression IFF the expresion body changed
         if (definition[key].body !== value[key]) {
           const conditionExpression = moddle.create('bpmn:FormalExpression', { body: value[key] });
+          window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+            id: node.definition.id , key, value: [conditionExpression],
+          });
           setNodeProp(node, key, conditionExpression);
         }
       } else {
@@ -62,6 +65,18 @@ export default {
       }
     }
   },
+  multiplayerInspectorHandler(node, data, setNodeProp, moddle) {
+    const keys = Object.keys(data).filter((key) => key !== 'id');
+    if (keys.length === 0) {
+      return;
+    }
+    if (keys[0] === 'conditionExpression') {
+      const conditionExpression = moddle.create('bpmn:FormalExpression', { body: data[keys[0]][0].body });
+      setNodeProp(node, keys[0], conditionExpression);
+      return;
+    }
+    setNodeProp(node, keys[0], data[keys[0]]);
+  },
   inspectorConfig: [
     {
       name: 'Sequence Flow',

package/src/components/railBottom/RailBottom.vue

@@ -22,6 +22,7 @@
       :style="[overlap ? { width: 'auto'} : { width: '100%'}]"
     >
       <UndoRedoControl
+        v-if="!isMultiplayer"
         v-show="showComponent"
         :is-rendering="isRendering"
         @load-xml="$emit('load-xml')"
@@ -117,6 +118,7 @@ export default {
     showComponent() {
       return store.getters.showComponent;
     },
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
   async mounted() {
     await nextTick();

package/src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-avatar-group class="container">
+  <b-avatar-group class="container" v-if="!isMultiplayer">
     <template v-for="item in filteredPlayers" >
       <Avatar :badgeBackgroundColor="item.color" :imgSrc="item.avatar" :userName="item.name" :key="item.key"/>
     </template>
@@ -9,6 +9,8 @@
 <script>
 import { uniqBy } from 'lodash';
 import Avatar from '@/components/topRail/multiplayerViewUsers/avatar/Avatar';
+import store from '@/store';
+
 export default {
   components:{
     Avatar,
@@ -26,6 +28,7 @@ export default {
         return player.name.toLowerCase() !== window.ProcessMaker.user?.fullName.toLowerCase();
       });
     },
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
 };
 </script>

package/src/multiplayer/multiplayer.js

@@ -56,7 +56,6 @@ export default class Multiplayer {
           };
           this.modeler.addPlayer(newPlayer);
         });
-        this.syncLocalNodes(this.clientIO.id);
       }
     });
 
@@ -68,10 +67,9 @@ export default class Multiplayer {
     });
 
     this.clientIO.on('requestProcess', (payload) => {
-      const { firstClient, clientId } = payload;
-
-      // Check if the current client is the first client
-      if (firstClient.id === this.clientIO.id) {
+      const { clientId } = payload;
+      // Sync the local Nodes
+      if (clientId) {
         this.syncLocalNodes(clientId);
       }
     });
@@ -171,7 +169,7 @@ export default class Multiplayer {
   }
   /**
    * Sync the modeler nodes with the microservice
-   * @param {String} clientId 
+   * @param {String} clientId
    */
   syncLocalNodes(clientId){
     // Get the process definition
@@ -481,6 +479,10 @@ export default class Multiplayer {
       }
       nodeToUpdate.set(data.key, newValue);
 
+      if (data.extras && Object.keys(data.extras).length > 0) {
+        nodeToUpdate.set('extras', data.extras);
+      }
+
       const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
       // Send the update to the web socket server
       this.clientIO.emit('updateFromInspector', { updateDoc: stateUpdate, isReplaced: false });
@@ -503,6 +505,11 @@ export default class Multiplayer {
     node = this.getNodeById(data.id);
 
     if (node) {
+      let extras = {};
+      // extras property section
+      if (data.extras && Object.keys(data.extras).length > 0) {
+        extras = data.extras;
+      }
       // loopCharacteristics property section
       if (data.loopCharacteristics) {
         const loopCharacteristics = JSON.parse(data.loopCharacteristics);
@@ -515,22 +522,47 @@ export default class Multiplayer {
         }, 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);
+      if (this.modeler.nodeRegistry[node.type]?.multiplayerInspectorHandler) {
+        this.modeler.nodeRegistry[node.type].multiplayerInspectorHandler(node, data,this.setNodeProp, this.modeler.moddle);
         return;
       }
       const keys = Object.keys(data).filter((key) => key !== 'id');
+      const key = keys[0];
+      const value = data[key];
 
-      if (keys[0] === 'condition') {
-        node.definition.get('eventDefinitions')[0].get('condition').body = data[keys[0]];
+      if (key === 'condition') {
+        node.definition.get('eventDefinitions')[0].get('condition').body = value;
       }
 
-      if (keys[0] === 'gatewayDirection') {
-        node.definition.set('gatewayDirection', data[keys[0]]);
+      if (key === 'gatewayDirection') {
+        node.definition.set('gatewayDirection', value);
       }
 
-      store.commit('updateNodeProp', { node, key:keys[0], value: data[keys[0]] });
-    }
+      if (key === 'messageRef') {
+        let message = this.modeler.definitions.rootElements.find(element => element.id === value);
+
+        if (!message) {
+          message = this.modeler.moddle.create('bpmn:Message', {
+            id: value,
+            name: extras?.messageName || value,
+          });
+          this.modeler.definitions.rootElements.push(message);
+        }
+
+        node.definition.get('eventDefinitions')[0].messageRef = message;
 
+        if (extras?.allowedUsers) {
+          node.definition.set('allowedUsers', extras.allowedUsers);
+        }
+
+        if (extras?.allowedGroups) {
+          node.definition.set('allowedGroups', extras.allowedGroups);
+        }
+      }
+
+      if (!['messageRef', 'gatewayDirection', 'condition', 'allowedUsers', 'allowedGroups'].includes(key)) {
+        store.commit('updateNodeProp', { node, key, value });
+      }
+    }
   }
 }