@processmaker/modeler 1.43.1 → 1.43.3

package/package.json

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

package/src/colorUtil.js

@@ -44,7 +44,6 @@ export default class ColorUtil {
     * @returns {Number}
     */
   generateHSL(name) {
-    console.log(name);
     const hash = this.getHashOfString(name);
     const h = this.normalizeHash(hash, 0, 360);
     const s = this.normalizeHash(hash, this.saturationRange[0], this.saturationRange[1]);

package/src/components/aiMessages/AiGenerateButton.vue

@@ -2,7 +2,7 @@
   <div class="mr-2">
     <button
       id="aiAssetButton"
-      :class="['btn px-2 ai-btn', showPopover ? 'ai-btn-open' : 'ai-btn-closed']"
+      :class="['btn py-0 px-2 ai-btn', showPopover ? 'ai-btn-open' : 'ai-btn-closed']"
       @click="showPopover = !showPopover"
     >
       <inline-svg :src="proceC2Icon" class="my-auto ai-icon" />
@@ -20,7 +20,7 @@
         </div>
         <div class="m-2">
           <span class="text-primary">
-            {{ $t('Optimal results need propper task naming and connections.') }}
+            {{ $t('Optimal results need proper task naming and connections.') }}
           </span>
         </div>
         <button class="m-2 btn btn-primary" @click="onGenerateAssets()">
@@ -57,6 +57,10 @@ export default {
   height: 22px;
 }
 
+.ai-btn-open > .ai-icon {
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(3deg) brightness(200%) contrast(150%);
+}
+
 .ai-btn {
   display: flex;
   justify-content: center;
@@ -72,6 +76,6 @@ export default {
 
 .ai-btn-open {
   color: #FFFFFF;
-  background-color: #6A7888;
+  background-color: #104a75;
 }
 </style>

package/src/components/modeler/Modeler.vue

@@ -1731,6 +1731,47 @@ export default {
         this.players = this.players.map((item) => (item.id === data.id ? { ...item, ...data } : item));
       }
     },
+    /**
+     * Unhightligt selected Nodes
+     * @param {String} clientId 
+     */
+    unhightligtNodes(clientId) {
+      const player = this.players.find(player => player.id === clientId);
+      
+      player?.selectedNodes?.forEach((nodeId) => {
+        const element = this.getElementByNodeId(nodeId);
+        element.component.setHighlightColor(false, player.color);
+      });
+    },
+    /**
+     * Update the hightligted nodes
+     * @param {Object} data 
+     */
+    updateHightligtedNodes(data) {
+      if (data) {
+        this.unhightligtNodes(data.id);
+        // highlight selected shape
+        this.players = this.players.map((item) => (item.id === data.id ? { ...item, ...data } : item));
+        data?.selectedNodes?.forEach((nodeId) => {
+          const element = this.getElementByNodeId(nodeId);
+          element.component.setHighlightColor(true, data.color);
+        });
+      }
+    },
+    isMultiplayerSelected(data) {
+      let intersectionExists = false;
+      if (data) {
+        this.players?.some((player) => {
+          if (intersectionExists) {
+            return true; // This will break out of the loop
+          }
+          intersectionExists = player?.selectedNodes?.some(item => data.includes(item));
+          return false;
+        });
+       
+      }
+      return intersectionExists;
+    },
     removePlayer(playerId) {
       const playerIndex = this.players.findIndex(player => player.id === playerId);
 

package/src/components/modeler/Selection.vue

@@ -112,6 +112,7 @@ export default {
     selected(newSelected) {
       this.prepareConectedLinks(newSelected);
       this.addToHighlightedNodes(newSelected);
+      this.highlightNodesMultiplayer (newSelected);
     },
   },
   methods: {
@@ -780,6 +781,18 @@ export default {
         store.commit('highlightNode', this.processNode);
       }
     },
+    highlightNodesMultiplayer(selected){
+      // Update selected nodes
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateSelectedNodes', this.getSelectedNodeKeys(selected));
+    },
+    getSelectedNodeKeys(selected) {
+      const keys = [];
+      selected.forEach(shape => {
+        const { node } = shape.model.component;
+        keys.push( node.definition.id);
+      });
+      return keys;
+    },
     /**
      * Gets the child shape
      * @param {object} point

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

@@ -1,12 +1,11 @@
 import component from './boundaryTimerEvent.vue';
 import IntermediateTimer from '../../inspectors/IntermediateTimer.vue';
 import boundaryEventConfig from '../boundaryEvent';
-import merge from 'lodash/merge';
-import cloneDeep from 'lodash/cloneDeep';
 import interruptingToggleConfig from '../boundaryEvent/interruptingToggleInspector';
 import advancedAccordionConfig from '@/components/inspectors/advancedAccordionConfig';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
 import { defaultDurationTimerEvent } from '@/constants';
+import { omit, cloneDeep, merge } from 'lodash';
 
 export const id = 'processmaker-modeler-boundary-timer-event';
 
@@ -42,7 +41,7 @@ export default merge(cloneDeep(boundaryEventConfig), {
   inspectorData(node) {
     return Object.entries(node.definition).reduce((data, [key, value]) => {
       if (key === 'eventDefinitions') {
-        const type = Object.keys(value[0])[1];
+        const type = Object.keys(omit(value[0], ['id', '$type', 'get', 'set', '$instanceOf']))[0];
         const body = value[0][type].body;
         data[key] = { type, body };
       } else {

package/src/mixins/highlightConfig.js

@@ -117,25 +117,54 @@ export default {
     },
   },
   methods: {
-    setShapeHighlight() {
-      if (store.getters.isReadOnly) {
-        this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
-        if (this.isCompleted) {
-          this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
-          this.shapeView.highlight(this.shapeBody, completedHighlighter);
-        }
-        this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
-        if (this.isInProgress) {
-          this.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
-          this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
-        }
-        if (this.isIdle) {
-          this.shape.attr('body/fill', COLOR_IDLE_FILL);
-          this.shapeView.highlight(this.shapeBody, idleHighlighter);
-        }
+    prepareCustomColorHighlighter(color) {
+      return {
+        highlighter: {
+          name: 'stroke',
+          options: {
+            attrs: {
+              stroke: color,
+              'stroke-width': 3,
+              'data-cy': 'selected',
+            },
+          },
+          partial: false,
+          type: 'default',
+        },
+      };
+    },
+    setHighlightColor(highlighted, color) {
+      if (!this.shapeView) {
         return;
       }
-
+      if (highlighted) {
+        this.shapeView.unhighlight(this.shapeBody, errorHighlighter);
+        this.shapeView.highlight(this.shapeBody, this.prepareCustomColorHighlighter(color));
+      } else {
+        this.shapeView.unhighlight(this.shapeBody, this.prepareCustomColorHighlighter(color));
+      }
+     
+    },
+    setShapeHighlightForReadOnly() {
+      if (!this.shapeView) {
+        return;
+      }
+      this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+      if (this.isCompleted) {
+        this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
+        this.shapeView.highlight(this.shapeBody, completedHighlighter);
+      }
+      this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+      if (this.isInProgress) {
+        this.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
+        this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
+      }
+      if (this.isIdle) {
+        this.shape.attr('body/fill', COLOR_IDLE_FILL);
+        this.shapeView.highlight(this.shapeBody, idleHighlighter);
+      }
+    },
+    setShapeHighlightForDefault() {
       if (!this.shapeView) {
         return;
       }
@@ -148,6 +177,19 @@ export default {
         this.shapeView.highlight(this.shapeBody, defaultHighlighter);
       }
     },
+    setShapeHighlight() {
+      if (!this.shapeView) {
+        return;
+      }
+      this.shapeView.unhighlight(this.shapeBody, errorHighlighter);
+      if (store.getters.isReadOnly) {
+        this.setShapeHighlightForReadOnly();
+      } else {
+        this.setShapeHighlightForDefault();
+      }
+    },
+
+
     setBorderOutline(borderOutline) {
       if (this.currentBorderOutline) {
         this.shapeView.unhighlight(this.shapeBody, this.currentBorderOutline);

package/src/mixins/linkConfig.js

@@ -82,6 +82,18 @@ export default {
     },
   },
   methods: {
+    setHighlightColor(highlighted, color){
+      if (highlighted) {
+        this.shape.attr({
+          line: { stroke: color },
+          '.joint-highlight-stroke': { 'display': 'none' },
+        });
+        this.shapeView.showTools();
+      } else {
+        resetShapeColor(this.shape);
+        this.shapeView.hideTools();
+      }
+    },
     setShapeHighlight() {
       if (this.isCompleted) {
         this.shape.attr({

package/src/multiplayer/multiplayer.js

@@ -67,6 +67,8 @@ export default class Multiplayer {
     });
 
     this.clientIO.on('clientLeft', (payload) => {
+      // Unhighlight nodes
+      this.modeler.unhightligtNodes(payload.clientId);
       // Remove the player from the multiplayer list
       this.modeler.removePlayer(payload.clientId);
 
@@ -80,11 +82,17 @@ export default class Multiplayer {
         this.syncLocalNodes(clientId);
       }
     });
-    
+
+    // Listen for updates when the cursor data was updated
     this.clientIO.on('updateUserCursor', async(payload) => {
       this.updateClientCursor(payload);
     });
 
+    // Listen for updates when the cursor data was updated
+    this.clientIO.on('selectedNodesWasUpdated', async(payload) => {
+      this.updateHightligtedNodes(payload);
+    });
+
     // Listen for updates when a new element is added
     this.clientIO.on('createElement', async(payload) => {
       // Create the new element in the process
@@ -197,6 +205,11 @@ export default class Multiplayer {
         this.updateFlows(data);
       }
     });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateSelectedNodes', ( data ) => {
+      if (this.modeler.isMultiplayer) {
+        this.updateSelectedNodes(data);
+      }
+    });
     window.ProcessMaker.EventBus.$on('multiplayer-updateMousePosition', ( data ) => {
       if (this.modeler.isMultiplayer) {
         this.updateMousePosition(data);
@@ -241,6 +254,31 @@ export default class Multiplayer {
       this.modeler.updateClientCursor(client);
     });
   }
+  /**
+   * Updates the selected nodes by the user
+   * @param {Object} data
+   */
+  updateSelectedNodes(data) {
+    const warningMessage = 'Another user is working on this object, wait until they finish making changes.';
+    if (this.modeler.isMultiplayerSelected(data)) {
+      window.ProcessMaker.alert(warningMessage, 'warning');
+    } 
+    this.clientIO.emit('updateSelectedNodes', {
+      clientId: this.clientIO.id,
+      roomName: this.room.getRoom(),
+      selectedNodes: data,
+    });
+  }
+  /**
+   * Update highlighted nodes
+   * @param {Object} data
+   */
+  updateHightligtedNodes(payload) {
+    payload.clients.map(client => {
+      this.modeler.updateHightligtedNodes(client);
+    });
+  }
+
   /**
    * Sync the modeler nodes with the microservice
    * @param {String} clientId