@processmaker/modeler 1.39.6 → 1.39.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.6",
+  "version": "1.39.8",
   "scripts": {
     "serve": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit",
@@ -68,7 +68,9 @@
     "vue-monaco": "^1.2.1",
     "vue-popperjs": "^2.3.0",
     "vue-upload-component": "^2.8.20",
-    "vuex": "^3.5.1"
+    "vuex": "^3.5.1",
+    "y-websocket": "^1.5.0",
+    "yjs": "^13.6.7"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

package/src/NodeIdGenerator.js

@@ -58,6 +58,14 @@ export default class NodeIdGenerator {
     this.refreshLastIdCounter();
     return NodeIdGenerator.#counter;
   }
+  getDefinitionNumber() {
+    return NodeIdGenerator.#counter;
+  }
+
+  updateCounters() {
+    NodeIdGenerator.#counter++;
+    NodeIdGenerator.#diagramCounter++;
+  }
 
   refreshLastDiagramIdCounter() {
     let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.prefix}(\\d+)_di$`), this.definitions.diagrams);

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,8 +324,11 @@ export default {
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      players: [],
       showInspectorButton: true,
       inspectorButtonRight: 65,
+      multiplayer: null,
+      isMultiplayer: false,
     };
   },
   watch: {
@@ -907,7 +921,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')) {
@@ -1012,7 +1026,21 @@ export default {
         control,
       });
     },
-    async handleDrop({ clientX, clientY, control, nodeThatWillBeReplaced }) {
+    handleDrop(data) {
+      const { clientX, clientY, control} = data;
+      if (this.isMultiplayer) {
+        window.ProcessMaker.EventBus.$emit('multiplayer-addNode', {
+          clientX,
+          clientY,
+          control,
+          id: `node_${this.nodeIdGenerator.getDefinitionNumber()}`,
+        });
+      } else  {
+        this.handleDropProcedure(data);
+      }
+    },
+    async handleDropProcedure(data, selected=true) {
+      const { clientX, clientY, control, nodeThatWillBeReplaced, id } = data;
       this.validateDropTarget({ clientX, clientY, control });
       if (!this.allowDrop) {
         return;
@@ -1031,9 +1059,11 @@ export default {
       if (newNode.isBpmnType('bpmn:BoundaryEvent')) {
         this.setShapeCenterUnderCursor(diagram);
       }
-
-      this.highlightNode(newNode);
-      await this.addNode(newNode);
+      if (selected) {
+        this.highlightNode(newNode);
+      }
+      
+      await this.addNode(newNode, id, selected);
       if (!nodeThatWillBeReplaced) {
         return;
       }
@@ -1050,6 +1080,7 @@ export default {
 
       return newNode;
     },
+    
     setShapeCenterUnderCursor(diagram) {
       diagram.bounds.x -= (diagram.bounds.width / 2);
       diagram.bounds.y -= (diagram.bounds.height / 2);
@@ -1061,14 +1092,14 @@ export default {
       const view = newNodeComponent.shapeView;
       await this.$refs.selector.selectElement(view);
     },
-    async addNode(node) {
+    async addNode(node, id = null, selected = true) {
       if (!node.pool) {
         node.pool = this.poolTarget;
       }
 
       const targetProcess = node.getTargetProcess(this.processes, this.processNode);
       addNodeToProcess(node, targetProcess);
-      node.setIds(this.nodeIdGenerator);
+      node.setIds(this.nodeIdGenerator, id); 
 
       this.planeElements.push(node.diagram);
       store.commit('addNode', node);
@@ -1086,9 +1117,11 @@ export default {
       ].includes(node.type)) {
         return;
       }
-
-      // Select the node after it has been added to the store (does not apply to flows)
-      this.selectNewNode(node);
+      if (selected) {
+        // Select the node after it has been added to the store (does not apply to flows)
+        this.selectNewNode(node);
+      }
+      
 
       return new Promise(resolve => {
         setTimeout(() => {
@@ -1159,7 +1192,7 @@ export default {
       this.performSingleUndoRedoTransaction(async() => {
         await this.paperManager.performAtomicAction(async() => {
           const { x: clientX, y: clientY } = this.paper.localToClientPoint(node.diagram.bounds);
-          const newNode = await this.handleDrop({
+          const newNode = await this.handleDropProcedure({
             clientX, clientY,
             control: { type: typeToReplaceWith },
             nodeThatWillBeReplaced: node,
@@ -1363,6 +1396,9 @@ export default {
       this.dragStart = null;
       this.isSelecting = false;
     },
+    enableMultiplayer() {
+      this.isMultiplayer = true;
+    },
   },
   created() {
     if (runningInCypressTest()) {
@@ -1528,6 +1564,12 @@ export default {
       loadXML: async(xml) => {
         await this.loadXML(xml);
         await undoRedoStore.dispatch('pushState', xml);
+        if (this.isMultiplayer) {
+          window.ProcessMaker.EventBus.$emit('multiplayer-start', {
+            modeler: this,
+            callback: this.enableMultiplayer,
+          });
+        }
       },
       addWarnings: warnings => this.$emit('warnings', warnings),
       addBreadcrumbs: breadcrumbs => this.breadcrumbData.push(breadcrumbs),

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/nodes/node.js

@@ -70,9 +70,8 @@ export default class Node {
     this.definition.id = id;
   }
 
-  setIds(nodeIdGenerator) {
-    const [nodeId, diagramId] = nodeIdGenerator.generate();
-
+  setIds(nodeIdGenerator, id) {
+    const [nodeId, diagramId] = id ? [ id + '_di'] : nodeIdGenerator.generate();
     if (!this.id) {
       this.id = nodeId;
     }

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;
+}

package/src/multiplayer/multiplayer.js

@@ -0,0 +1,48 @@
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+import { getNodeIdGenerator } from '../NodeIdGenerator';
+import Room from './room';
+export default class Multiplayer {
+  ydoc = null;
+  yarray = null;
+  modeler = null;
+  #nodeIdGenerator = null;
+  room = null;
+  constructor(modeler) {
+    // define document
+    this.ydoc = new Y.Doc();
+    this.modeler = modeler;
+  }
+  init() {
+    this.#nodeIdGenerator = getNodeIdGenerator(this.modeler.definitions);
+
+    this.room = new Room('room-' + window.ProcessMaker.modeler.process.id);
+    const wsProvider = new WebsocketProvider('ws://localhost:1234', this.room.getRoom(), this.ydoc);
+    wsProvider.on('status', () => {
+      // todo status handler
+    });
+    // array of numbers which produce a sum
+    this.yarray = this.ydoc.getArray('modeler');
+    // observe changes of the diagram
+    this.yarray.observe(event => {
+      event.changes.delta.forEach((value) =>{
+        if (value.insert) {
+          value.insert.forEach((value) => {
+            this.createShape(value);
+            this.#nodeIdGenerator.updateCounters();
+          });
+        }
+      });
+    });
+    window.ProcessMaker.EventBus.$on('multiplayer-addNode', ( data ) => {
+      this.addNode(data);
+    });
+  }
+  addNode(data) {
+    this.yarray.push([data]);
+ 
+  }
+  createShape(value) {
+    this.modeler.handleDropProcedure(value, false);
+  }
+}

package/src/multiplayer/room.js

@@ -0,0 +1,10 @@
+
+export default class Room {
+  #room ='';
+  constructor(name) {
+    this.#room = name;
+  }
+  getRoom() {
+    return this.#room;
+  }
+}

package/src/setup/globals.js

@@ -51,7 +51,7 @@ window.ProcessMaker = {
   },
   modeler: {
     process: {
-      id: 1,
+      id: 3,
     },
   },
 };

package/src/setup/initialLoad.js

@@ -5,7 +5,7 @@ import './extensions/twitterConnector';
 import './extensions/testCustomConnector';
 import './extensions/customMarker';
 import registerNodes from '@/setup/registerNodes';
-
+import Multiplayer from '../multiplayer/multiplayer';
 const blank = `
 <?xml version="1.0" encoding="UTF-8"?>
 <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_03dabax" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="2.0.3">
@@ -20,3 +20,9 @@ window.ProcessMaker.EventBus.$on('modeler-init', registerNodes);
 window.ProcessMaker.EventBus.$on('modeler-start', ({ loadXML }) => {
   loadXML(blank);
 });
+window.ProcessMaker.EventBus.$on('multiplayer-start', (params) => {
+  const multiplayer = new Multiplayer(params.modeler);
+  multiplayer.init();
+  params.callback();
+});
+