@processmaker/modeler 1.43.2 → 1.43.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.43.2",
+  "version": "1.43.4",
   "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/CreateAssetsFailCard.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="customAlert mx-auto mt-2">
-    <b-alert show dismissible variant="warning">
+    <b-alert
+      show
+      dismissible
+      variant="warning"
+      @dismissed="onDismiss()"
+    >
       {{ $t("Generation of assets was not able to complete. Try again") }}
     </b-alert>
   </div>
@@ -11,6 +16,11 @@ export default {
   data() {
     return {};
   },
+  methods: {
+    onDismiss() {
+      this.$emit('onDismiss');
+    },
+  },
 };
 </script>
 <style scoped>

package/src/components/aiMessages/GeneratingAssetsCard.vue

@@ -11,7 +11,7 @@
         <div class="p-0">
           <button
             class="h-100 px-3 cancel-btn btn btn-secondary"
-            @click="onClose()"
+            @click="onStop()"
           >
             {{ $t("STOP") }}
           </button>
@@ -34,7 +34,7 @@ export default {
     };
   },
   methods: {
-    onClose() {
+    onStop() {
       this.$emit('stopAssetGeneration');
     },
   },

package/src/components/modeler/Modeler.vue

@@ -25,6 +25,7 @@
       @clearSelection="clearSelection"
       :players="filteredPlayers"
       @action="handleToolbarAction"
+      @onGenerateAssets="generateAssets()"
     />
     <b-row class="modeler h-100">
       <b-tooltip
@@ -60,23 +61,25 @@
         ref="createAssetsCard"
         v-if="isAiGenerated"
         @onGenerateAssets="generateAssets()"
-        @closeCreateAssets="onCloseCreateAssets()"
+        @closeCreateAssets="isAiGenerated = false"
       />
 
       <GeneratingAssetsCard
         ref="generatingAssetsCard"
-        v-if="generatingAi"
+        v-if="loadingAI"
+        @stopAssetGeneration="onStopAssetGeneration()"
       />
       
       <AssetsCreatedCard
         ref="assetsCreatedCard"
         v-if="assetsCreated"
-        @closeAssetsCreated="onCloseAssetsCreated()"
+        @closeAssetsCreated="assetsCreated = false"
       />
 
       <CreateAssetsFailCard
         ref="createAssetsFailCard"
-        v-if="false"
+        v-if="assetFail"
+        @onDismiss="assetFail = false"
       />
 
       <InspectorButton
@@ -166,7 +169,7 @@
       />
 
       <RailBottom
-        v-if="!generatingAi"
+        v-if="!loadingAI"
         :nodeTypes="nodeTypes"
         :paper-manager="paperManager"
         :graph="graph"
@@ -199,9 +202,7 @@
 </template>
 
 <script>
-
 import Vue from 'vue';
-
 import _ from 'lodash';
 import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
@@ -387,11 +388,12 @@ export default {
       currentCursorPosition: 0,
       previewPanelWidth: 600,
       isAiGenerated: window.ProcessMaker?.modeler?.isAiGenerated,
-      generatingAi: false,
       assetsCreated: false,
-      // ^ TODO: To be changed depending on microservice response
+      assetFail: false,
       currentNonce: null,
       promptSessionId: '',
+      loadingAI: false,
+      cancelledJobs: [],
       flowTypes: [
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-message-flow',
@@ -1731,6 +1733,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);
 
@@ -1804,7 +1847,7 @@ export default {
 
       let params = {
         server: window.location.host,
-        processId: this.processId,
+        processId: window.ProcessMaker?.modeler?.process?.id,
       };
 
       if (this.promptSessionId && this.promptSessionId !== null && this.promptSessionId !== '') {
@@ -1819,9 +1862,8 @@ export default {
           this.promptSessionId = (response.data.promptSessionId);
           localStorage.promptSessionId = (response.data.promptSessionId);
         }).catch((error) => {
-          const errorMsg = error.response?.data?.message || error.message;
-
-          if (error.response.status === 404) {
+          const errorMsg = error.message;
+          if (error === 404) {
             this.removePromptSessionForUser();
             localStorage.promptSessionId = '';
             this.promptSessionId = '';
@@ -1833,7 +1875,7 @@ export default {
     generateAssets() {
       this.getNonce();
 
-      // TODO: Add endpoint to get the promprSessionId
+      this.fetchHistory();
 
       const params = {
         promptSessionId: this.promptSessionId,
@@ -1845,17 +1887,56 @@ export default {
 
       window.ProcessMaker.apiClient.post(url, params)
         .then(() => {
+          // Response
         })
         .catch((error) => {
           const errorMsg = error.response?.data?.message || error.message;
           window.ProcessMaker.alert(errorMsg, 'danger');
+          this.assetFail = true;
         });
     },
-    onCloseCreateAssets() {
-      this.isAiGenerated = false;
+    subscribeToProgress() {
+      const channel = `ProcessMaker.Models.User.${window.ProcessMaker?.modeler?.process?.user_id}`;
+      const streamProgressEvent = '.ProcessMaker\\Package\\PackageAi\\Events\\GenerateArtifactsProgressEvent';
+      window.Echo.private(channel).listen(
+        streamProgressEvent,
+        (response) => {
+          if (response.data.promptSessionId !== this.promptSessionId) {
+            return;
+          }
+
+          if (this.cancelledJobs.some((element) => element === response.data.nonce)) {
+            return;
+          }
+
+          if (response.data) {
+            if (response.data.progress.status === 'running') {
+              this.loadingAI = true;
+              // Blue color for nodes running
+            } else if (response.data.progress.status === 'error') {
+              this.loadingAI = false;
+              window.ProcessMaker.alert(response.data.message, 'danger');
+              // Stop and show error
+              this.assetFail = true;
+            } else {
+              this.setPromptSessions(response.data.promptSessionId);
+              // Successful generation 
+              this.assetsCreated = true;
+              this.fetchHistory();
+              setTimeout(() => {
+                this.loadingAI = false;
+              }, 500);
+            }
+          }
+        },
+      );
     },
-    onCloseAssetsCreated() {
-      this.assetsCreated = false;
+    onStopAssetGeneration() {
+      if (this.currentNonce) {
+        this.cancelledJobs.push(this.currentNonce);
+        localStorage.setItem('cancelledJobs', JSON.stringify(this.cancelledJobs));
+        this.loadingAI = false;
+      }
     },
   },
   created() {
@@ -2051,8 +2132,14 @@ export default {
     if (!localStorage.getItem('promptSessions') || localStorage.getItem('promptSessions') === 'null') {
       localStorage.setItem('promptSessions', JSON.stringify([]));
     }
+    if (!localStorage.getItem('cancelledJobs') || localStorage.getItem('cancelledJobs') === 'null') {
+      this.cancelledJobs = [];
+    } else {
+      this.cancelledJobs = JSON.parse(localStorage.getItem('cancelledJobs'));
+    }
     this.promptSessionId = this.getPromptSessionForUser();
     this.fetchHistory();
+    this.subscribeToProgress();
   },
 };
 </script>

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/components/toolbar/ToolBar.vue

@@ -9,6 +9,7 @@
           :validation-errors="validationErrors"
           :warnings="warnings"
           :players="players"
+          v-on="$listeners"
         >
           <component
             :is="component.button"

package/src/components/topRail/TopRail.vue

@@ -7,7 +7,9 @@
       @openPanel="handleOpenPanel"
     />
 
-    <AiGenerateButton/>
+    <AiGenerateButton
+      v-on="$listeners"
+    />
 
     <ValidateButton @openIssue="handleOpenIssue" />
 

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