@processmaker/modeler 1.43.5 → 1.43.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.43.5",
+  "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 

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/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(),
         },
       });
     });