@processmaker/modeler 1.42.1 → 1.43.1

package/src/components/topRail/multiplayerViewUsers/avatar/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <span 
     class="b-avatar rounded-circle"
-    :style="{'backgroundColor': generateColorHsl(userName, saturationRange, lightnessRange)}"
+    :style="{'backgroundColor': backgroundColor}"
   >
     <span v-if="imgSrc" class="b-avatar-img" :id="id">
       <img :src="imgSrc" :alt="userName">
@@ -46,16 +46,9 @@ export default {
       saturation: 50,
       lightness: 50,
       range: 10,
+      backgroundColor: '#104A75',
     };
   },
-  computed: {
-    saturationRange() {
-      return this.getRange(this.saturation, this.range);
-    },
-    lightnessRange() {
-      return this.getRange(this.lightness, this.range);
-    },
-  },
   methods: {
     /**
      * Get the initials from a given name.
@@ -69,73 +62,6 @@ export default {
       const lastNameIn = nameArray[nameArray.length - 1].charAt(0).toUpperCase();
       return `${firstNameIn}${lastNameIn}`;
     },
-    /**
-     * Calculates a hash value for a given string.
-     *
-     * @param {string} str - The input string for which the hash needs to be calculated.
-     * @returns {number} The calculated hash value for the input string.
-     */
-    getHashOfString(str){
-      let hash = 0;
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      hash = Math.abs(hash);
-      return hash;
-    },
-    /**
-     * Calculates a range around a given value.
-     *
-     * @param {number} value - The central value.
-     * @param {number} range - The range value.
-     * @returns {number[]} An array containing the lower and upper bounds of the range.
-     */
-    getRange(value, range)  {
-      return [Math.max(0, value-range), Math.min(value + range, 100)];
-    },
-    /**
-     * Get the hash number to within our range
-     * 
-     * @param {Number} hash 
-     * @param {Number} min
-     * @param {Number} max
-     * @returns {Number}
-     */
-    normalizeHash(hash, min, max){
-      return Math.floor((hash % (max - min)) + min);
-    },
-    /**
-     *Generate Unique Color, create a string using our h,s,l values.
-     * @param {String} name
-     * @param {Array} saturationRange 
-     * @param {Array} lightnessRange
-     * @returns {Number}
-     */
-    generateHSL(name, saturationRange, lightnessRange) {
-      const hash = this.getHashOfString(name);
-      const h = this.normalizeHash(hash, 0, 360);
-      const s = this.normalizeHash(hash, saturationRange[0], saturationRange[1]);
-      const l = this.normalizeHash(hash, lightnessRange[0], lightnessRange[1]);
-      return [h, s, l];
-    },
-    /**
-     * Convert HSL array to string
-     * @param {Array} hsl
-     * @returns {String}
-     */
-    HSLtoString(hsl)  {
-      return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
-    },
-    /**
-     * Generate a unique hsl value.
-     * @param {String} name
-     * @param {Array} saturationRange 
-     * @param {Array} lightnessRange
-     * @returns {String}
-     */
-    generateColorHsl(id, saturationRange, lightnessRange) {
-      return this.HSLtoString(this.generateHSL(id, saturationRange, lightnessRange));
-    },
   },
 };
 

package/src/components/topRail/multiplayerViewUsers/avatar/avatar.scss

@@ -2,5 +2,4 @@
   text-align: center;
   line-height: 2.4rem;
   color: #ffffff;
-  font-weight: bold;
 }

package/src/components/welcome/WelcomeMessage.vue

@@ -148,7 +148,7 @@ export default {
   },
 };
 </script>
-<style>
+<style scoped>
 .message {
   color: #5f666d;
   font-style: italic;
@@ -187,11 +187,6 @@ export default {
   border-color: #0872C2;
 }
 
-.ai-icon {
-  width: 22px;
-  height: 22px;
-}
-
 .ai-icon {
   width: 22px;
   height: 22px;

package/src/mixins/clickAndDrop.js

@@ -86,6 +86,9 @@ export default {
         tempGhost.src = control.icon;
       } else {
         tempGhost.setAttribute('class', control.icon);
+        tempGhost.style.fontSize = '42px';
+        tempGhost.style.width = '42px';
+        tempGhost.style.height = '42px';
       }
 
       document.body.appendChild(tempGhost);

package/src/multiplayer/multiplayer.js

@@ -6,7 +6,7 @@ import Room from './room';
 import store from '@/store';
 import { getBoundaryEventData } from '@/components/nodes/boundaryEvent/boundaryEventUtils';
 import { InspectorUtils } from './inspector.utils';
-
+import ColorUtil from '../colorUtil';
 export default class Multiplayer {
   clientIO = null;
   yDoc = null;
@@ -16,7 +16,7 @@ export default class Multiplayer {
   room = null;
   inspector = null;
   deletedItem = null;
-
+  colorUtil = null;
   constructor(modeler) {
     // define document
     this.yDoc = new Y.Doc();
@@ -42,33 +42,28 @@ export default class Multiplayer {
     } else {
       this.clientIO.disconnect();
     }
+    this.colorUtil = new ColorUtil(50, 50, 10);
   }
+
   webSocketEvents() {
     this.clientIO.on('connect', () => {
       // Join the room
+      this.modeler.emptyPlayers();
       this.clientIO.emit('joinRoom', {
         roomName: this.room.getRoom(),
         clientName: window.ProcessMaker.user?.fullName,
         clientAvatar: window.ProcessMaker.user?.avatar,
+        clientColor: window.ProcessMaker.user?.color || this.colorUtil.randomColor(window.ProcessMaker.user?.fullName),
+        clientCursor: {
+          top: 300,
+          left: 300,
+        },
       });
     });
 
     this.clientIO.on('clientJoined', (payload) => {
       this.modeler.enableMultiplayer(payload.isMultiplayer);
-
-      if (payload.isMultiplayer) {
-        payload.clients.map(client => {
-          const newPlayer = {
-            id: client.id,
-            name: client.name,
-            color:  client.color,
-            avatar: client.avatar || null,
-            top: 90,
-            left: 80,
-          };
-          this.modeler.addPlayer(newPlayer);
-        });
-      }
+      this.addPlayers(payload);
     });
 
     this.clientIO.on('clientLeft', (payload) => {
@@ -85,6 +80,10 @@ export default class Multiplayer {
         this.syncLocalNodes(clientId);
       }
     });
+    
+    this.clientIO.on('updateUserCursor', async(payload) => {
+      this.updateClientCursor(payload);
+    });
 
     // Listen for updates when a new element is added
     this.clientIO.on('createElement', async(payload) => {
@@ -198,6 +197,49 @@ export default class Multiplayer {
         this.updateFlows(data);
       }
     });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateMousePosition', ( data ) => {
+      if (this.modeler.isMultiplayer) {
+        this.updateMousePosition(data);
+      }
+    });
+  }
+  /**
+   * Add a Player
+   * @param {Object} payload 
+   */
+  addPlayers(payload) {
+    if (payload.isMultiplayer) {
+      payload.clients.map(client => {
+        const newPlayer = {
+          id: client.id,
+          name: client.name,
+          color: client.color,
+          avatar: client.avatar,
+          cursor: client.cursor,
+        };
+        this.modeler.addPlayer(newPlayer);
+      });
+    }
+  }
+  /**
+   * Updates the mouse position
+   * @param {Object} data 
+   */
+  updateMousePosition(data) {
+    this.clientIO.emit('cursorTrackingUpdate', { 
+      roomName: this.room.getRoom(),
+      clientId:  this.clientIO.id,
+      clientCursor: data,
+    });
+  }
+  /**
+   * Update Client cursor handler
+   * @param {Object} payload 
+   */
+  updateClientCursor(payload){
+    payload.clients.map(client => {
+      this.modeler.updateClientCursor(client);
+    });
   }
   /**
    * Sync the modeler nodes with the microservice