@processmaker/modeler 1.39.6 → 1.39.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.6",
+  "version": "1.39.7",
   "scripts": {
     "serve": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit",

package/src/components/modeler/Modeler.vue

@@ -23,6 +23,7 @@
       @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
+      :players="players"
       @action="handleToolbarAction"
     />
     <b-row class="modeler h-100">
@@ -153,6 +154,15 @@
         @save-state="pushToUndoStack"
       />
     </b-row>
+
+    <RemoteCursor 
+      v-for="player in players"
+      :cursor-color="player.color"
+      :username="player.name"
+      :key="player.id"
+      :top="player.top"
+      :left="player.left"
+    />
   </span>
 </template>
 
@@ -213,7 +223,7 @@ import RailBottom from '@/components/railBottom/RailBottom.vue';
 import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/genericFlow';
 
 import Selection from './Selection';
-
+import RemoteCursor from '@/components/multiplayer/remoteCursor/RemoteCursor.vue';
 
 export default {
   components: {
@@ -225,6 +235,7 @@ export default {
     ProcessmakerModelerGenericFlow,
     Selection,
     RailBottom,
+    RemoteCursor,
   },
   props: {
     owner: Object,
@@ -313,6 +324,7 @@ export default {
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      players: [],
       showInspectorButton: true,
       inspectorButtonRight: 65,
     };
@@ -907,7 +919,7 @@ export default {
 
       const config = definition.config ? JSON.parse(definition.config) : {};
       const type = config?.processKey || parser(definition, this.moddle);
-      
+
       const unnamedElements = ['bpmn:TextAnnotation', 'bpmn:Association', 'bpmn:DataOutputAssociation', 'bpmn:DataInputAssociation'];
       const requireName = unnamedElements.indexOf(bpmnType) === -1;
       if (requireName && !definition.get('name')) {

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="remote-cursor" :style="{ left: left + 'px', top: top + 'px' }">
+    <inline-svg :src="cursorIcon" :fill="cursorColor" />
+
+    <div class="remote-username">
+      {{ username }}
+    </div>
+  </div>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    InlineSvg,
+  },
+  props: {
+    cursorColor: {
+      type: String,
+      default: '#000000',
+    },
+    username: {
+      type: String,
+    },
+    top: {
+      type: Number,
+    },
+    left: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      cursorIcon: require('@/components/multiplayer/remoteCursor/cursor.svg'),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.remote {
+  &-cursor {
+    position: absolute;
+    display: flex;
+    width: auto;
+    height: 34px;
+  }
+
+  &-username {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 12px;
+    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;
+  }
+}
+</style>

package/src/components/multiplayer/remoteCursor/cursor.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="19" viewBox="0 0 23 19" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.5 17.5L2 1L20.5 7L13 9L11.5 17.5Z" stroke="#212529" />
+</svg>

package/src/components/toolbar/ToolBar.vue

@@ -8,6 +8,7 @@
         <TopRail
           :validation-errors="validationErrors"
           :warnings="warnings"
+          :players="players"
         >
           <component
             :is="component.button"
@@ -129,6 +130,7 @@ export default {
     'warnings',
     'xmlManager',
     'validationBar',
+    'players',
     'extraActions',
   ],
   watch: {

package/src/components/topRail/TopRail.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="top-rail-container">
+    <MultiplayerViewUsers :players="players"/>
     <ValidateIssue
       v-show="isOpenIssue"
       :number-of-errors="numberOfErrors"
@@ -20,12 +21,13 @@
 <script>
 import store from '@/store';
 import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
-
+import MultiplayerViewUsers from '@/components/topRail/multiplayerViewUsers/MultiplayerViewUsers';
 export default {
   components: {
     ValidateButton,
     ValidateIssue,
     ValidatePanel,
+    MultiplayerViewUsers,
   },
   props: {
     validationErrors: {
@@ -36,6 +38,10 @@ export default {
       type: Array,
       required: true,
     },
+    players: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {

package/src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue

@@ -0,0 +1,22 @@
+<template>
+  <b-avatar-group class="container">
+    <template v-for="item in players" >
+      <Avatar :badgeBackgroundColor="item.color" :imgSrc= "item.imgSrc" :userName="item.name" :key="item.key"/>
+    </template>
+  </b-avatar-group> 
+</template>
+  
+<script>
+import Avatar from '@/components/topRail/multiplayerViewUsers/avatar/Avatar';
+export default {
+  components:{
+    Avatar,
+  },
+  props: {
+    players: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,137 @@
+<template>
+  <span 
+    class="b-avatar rounded-circle"
+    :style="{'backgroundColor': generateColorHsl(userName, saturationRange, lightnessRange)}"
+  >
+    <span v-if="imgSrc" class="b-avatar-img">
+      <img :src="imgSrc" :alt=userName>
+    </span>
+    <span v-else class="b-avatar-text avatar-initials">
+      <span>
+        {{ this.getInitials(userName) }}
+      </span>
+
+    </span>
+    <span class="b-avatar-badge badge-danger"
+      :style="{bottom: '0px', right: '0px', backgroundColor: badgeBackgroundColor}" 
+    />
+  </span>
+</template>
+  
+<script>
+
+export default {
+  props: {
+    badgeBackgroundColor: {
+      type: String,
+      required: false,
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+    },
+    userName: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      saturation: 50,
+      lightness: 50,
+      range: 10,
+    };
+  },
+  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.
+     *
+     * @param {string} name - The full name from which to extract initials.
+     * @returns {string} The initials of the first and last names.
+     */
+    getInitials(name = '') {
+      const nameArray = name.split(' ');
+      const firstNameIn = nameArray[0].charAt(0).toUpperCase();
+      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));
+    },
+  },
+};
+
+</script>
+<style scoped lang="scss" src="./avatar.scss"></style>

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

@@ -0,0 +1,6 @@
+.avatar-initials {
+  text-align: center;
+  line-height: 2.4rem;
+  color: #ffffff;
+  font-weight: bold;
+}