@processmaker/modeler 1.43.4 → 1.43.6

package/package.json

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

package/src/components/modeler/Modeler.vue

@@ -195,7 +195,7 @@
       <RemoteCursor
         v-for="player in filteredPlayers"
         :key="player.id"
-        :data="player"
+        :data="prepareCursorData(player)"
       /> 
     </b-row>
   </span>
@@ -1665,7 +1665,19 @@ export default {
     },
     pointerMoveHandler(event) {
       const { clientX: x, clientY: y } = event;
-      window.ProcessMaker.EventBus.$emit('multiplayer-updateMousePosition', { top: y, left: x });
+      const { paper } = this.paperManager;
+      let updateMousePosition = _.debounce(function() {
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateMousePosition', {
+          coordinates: {
+            clientX: x,
+            clientY: y,
+          },
+          paperTranslate:  paper.translate(), // add papper translate
+          paperScale: paper.scale(), // add scale
+        });
+      }, 3000000, { leading: true, trailing: true });
+      updateMousePosition();
+            
       if (store.getters.isReadOnly) {
         if (this.canvasDragPosition && !this.clientLeftPaper) {
           this.paperManager.translate(
@@ -1733,6 +1745,26 @@ export default {
         this.players = this.players.map((item) => (item.id === data.id ? { ...item, ...data } : item));
       }
     },
+    /**
+     * Prepare cursor data taking into account, paper translate and paper scale
+     * @param {Object} player
+     * @return {Object}
+     */
+    prepareCursorData(player) {
+      const { paper } = this.paperManager;
+      const localTranslate = paper.translate();
+      // calculate paper translated deltas
+      let deltaX = localTranslate.tx - player.cursor.paperTranslate.tx/player.cursor.paperScale.sx;
+      let deltaY = localTranslate.ty - player.cursor.paperTranslate.ty/player.cursor.paperScale.sy;
+      // get new cursor coordinates taking into consideration paper scale and paper translated
+      const left = player.cursor.coordinates.clientX/player.cursor.paperScale.sx + deltaX;
+      const top = player.cursor.coordinates.clientY/player.cursor.paperScale.sy + deltaY;
+      return {
+        cursor: { left, top },
+        color: player.color,
+        name: player.name,
+      };
+    },
     /**
      * Unhightligt selected Nodes
      * @param {String} clientId 
@@ -1895,6 +1927,34 @@ export default {
           this.assetFail = true;
         });
     },
+    highlightTaskArrays(data) {
+      if (data) {
+        this.addAiHighlights(data.tasks);
+        this.addAiHighlights(data.serviceTasks);
+        this.addAiHighlights(data.scriptTasks);
+      }
+    },
+    unhighlightTaskArrays(data) {
+      if (data) {
+        this.removeAiHighlights(data.tasks);
+        this.removeAiHighlights(data.serviceTasks);
+        this.removeAiHighlights(data.scriptTasks);
+      }
+    },
+    addAiHighlights(taskArray) {
+      let self = this;
+      taskArray.forEach(task => {
+        const taskNode = self.getElementByNodeId(task.id);
+        taskNode.component.setAiStatusHighlight(task.status);
+      });
+    },
+    removeAiHighlights(taskArray) {
+      let self = this;
+      taskArray.forEach(task => {
+        const taskNode = self.getElementByNodeId(task.id);
+        taskNode.component.unsetHighlights();
+      });
+    },
     subscribeToProgress() {
       const channel = `ProcessMaker.Models.User.${window.ProcessMaker?.modeler?.process?.user_id}`;
       const streamProgressEvent = '.ProcessMaker\\Package\\PackageAi\\Events\\GenerateArtifactsProgressEvent';
@@ -1902,17 +1962,19 @@ export default {
         streamProgressEvent,
         (response) => {
           if (response.data.promptSessionId !== this.promptSessionId) {
+            this.unhighlightTaskArrays(response.data);
             return;
           }
 
           if (this.cancelledJobs.some((element) => element === response.data.nonce)) {
+            this.unhighlightTaskArrays(response.data);
             return;
           }
 
           if (response.data) {
             if (response.data.progress.status === 'running') {
               this.loadingAI = true;
-              // Blue color for nodes running
+              this.highlightTaskArrays(response.data);
             } else if (response.data.progress.status === 'error') {
               this.loadingAI = false;
               window.ProcessMaker.alert(response.data.message, 'danger');
@@ -1922,6 +1984,7 @@ export default {
               this.setPromptSessions(response.data.promptSessionId);
               // Successful generation 
               this.assetsCreated = true;
+              this.unhighlightTaskArrays(response.data);
               this.fetchHistory();
               setTimeout(() => {
                 this.loadingAI = false;

package/src/components/multiplayer/remoteCursor/RemoteCursor.vue

@@ -41,20 +41,21 @@ export default {
   }
 
   &-username {
+    position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 12px;
+    margin: 17px 0 0 17px;
     padding: 4px 10px;
     gap: 10px;
     border-radius: 4px;
     background-color: #212529;
-
     color: #FFFFFF;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
+    min-width: 100px;
   }
 }
 </style>

package/src/mixins/highlightConfig.js

@@ -143,7 +143,29 @@ export default {
       } else {
         this.shapeView.unhighlight(this.shapeBody, this.prepareCustomColorHighlighter(color));
       }
-     
+    },
+    setAiStatusHighlight(status) {
+      this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+      if (status === 'generated') {
+        this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
+        this.shapeView.highlight(this.shapeBody, completedHighlighter);
+      }
+      this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+      if (status === 'generating') {
+        this.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
+        this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
+      }
+      this.shapeView.unhighlight(this.shapeBody, idleHighlighter);
+      if (status === 'previously generated') {
+        this.shape.attr('body/fill', COLOR_IDLE_FILL);
+        this.shapeView.highlight(this.shapeBody, idleHighlighter);
+      }
+    },
+    unsetHighlights() {
+      this.shape.attr('body/fill', '#FFFFFF');
+      this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+      this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+      this.shapeView.unhighlight(this.shapeBody, idleHighlighter);
     },
     setShapeHighlightForReadOnly() {
       if (!this.shapeView) {

package/src/multiplayer/multiplayer.js

@@ -55,8 +55,12 @@ export default class Multiplayer {
         clientAvatar: window.ProcessMaker.user?.avatar,
         clientColor: window.ProcessMaker.user?.color || this.colorUtil.randomColor(window.ProcessMaker.user?.fullName),
         clientCursor: {
-          top: 300,
-          left: 300,
+          coordinates: {
+            clientX: 300,
+            clientY: 300,
+          },
+          paperTranslate: this.modeler.paper.translate(),
+          paperScale: this.modeler.paper.scale(),
         },
       });
     });