@processmaker/modeler 1.39.7 → 1.39.9

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.7",
+  "version": "1.39.9",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --no-fix",
     "build-bundle": "vue-cli-service build --target lib --name modeler ./src/components/nodes/index.js",
@@ -56,6 +56,7 @@
     "jointjs": "^3.1.1",
     "js-yaml-loader": "^1.2.2",
     "lodash": "^4.17.21",
+    "lodash-contrib": "^4.1200.1",
     "luxon": "^1.21.1",
     "mocha-junit-reporter": "^2.0.0",
     "mustache": "^3.2.1",
@@ -68,14 +69,16 @@
     "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",
     "@babel/eslint-parser": "^7.12.16",
     "@cypress/code-coverage": "^3.11.0",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/processmaker-bpmn-moddle": "0.14.0",
+    "@processmaker/processmaker-bpmn-moddle": "0.14.1",
     "@types/jest": "^24.9.1",
     "@vue/babel-preset-app": "^5.0.4",
     "@vue/cli-plugin-babel": "~5.0.0",

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

@@ -152,6 +152,7 @@
         @remove-nodes="removeNodes"
         :processNode="processNode"
         @save-state="pushToUndoStack"
+        :isMultiplayer="isMultiplayer"
       />
     </b-row>
 
@@ -173,6 +174,7 @@ import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
 import BpmnModdle from 'bpmn-moddle';
 import ExplorerRail from '../rails/explorer-rail/explorer';
+import { isJSON } from 'lodash-contrib';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
 import store from '@/store';
@@ -327,12 +329,13 @@ export default {
       players: [],
       showInspectorButton: true,
       inspectorButtonRight: 65,
+      multiplayer: null,
+      isMultiplayer: false,
     };
   },
   watch: {
     isRendering() {
       const loadingMessage = 'Loading process, please be patient.';
-
       if (this.isRendering) {
         window.ProcessMaker.alert(loadingMessage, 'warning');
         document.body.style.cursor = 'wait !important';
@@ -917,7 +920,7 @@ export default {
 
       this.removeUnsupportedElementAttributes(definition);
 
-      const config = definition.config ? JSON.parse(definition.config) : {};
+      const config = definition.config && isJSON(definition.config) ? JSON.parse(definition.config) : {};
       const type = config?.processKey || parser(definition, this.moddle);
 
       const unnamedElements = ['bpmn:TextAnnotation', 'bpmn:Association', 'bpmn:DataOutputAssociation', 'bpmn:DataInputAssociation'];
@@ -1024,7 +1027,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;
@@ -1043,9 +1060,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;
       }
@@ -1062,6 +1081,7 @@ export default {
 
       return newNode;
     },
+    
     setShapeCenterUnderCursor(diagram) {
       diagram.bounds.x -= (diagram.bounds.width / 2);
       diagram.bounds.y -= (diagram.bounds.height / 2);
@@ -1073,14 +1093,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);
@@ -1098,9 +1118,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(() => {
@@ -1123,7 +1145,14 @@ export default {
         this.poolTarget = null;
       });
     },
-    async removeNode(node, { removeRelationships = true } = {}) {
+    async removeNode(node, options) {
+      if (this.isMultiplayer) {
+        window.ProcessMaker.EventBus.$emit('multiplayer-removeNode', node);
+      } else  {
+        this.removeNodeProcedure(node, options);
+      }
+    },
+    async removeNodeProcedure(node, { removeRelationships = true } = {}) {
       if (!node) {
         // already removed
         return;
@@ -1171,7 +1200,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,
@@ -1367,7 +1396,7 @@ export default {
         if (this.isSelecting) {
           this.$refs.selector.endSelection(this.paperManager.paper);
         } else {
-          this.$refs.selector.stopDrag(event);
+          this.$refs.selector.stopDrag();
         }
       }
       window.ProcessMaker.EventBus.$emit('custom-pointerclick', event);
@@ -1375,6 +1404,9 @@ export default {
       this.dragStart = null;
       this.isSelecting = false;
     },
+    enableMultiplayer() {
+      this.isMultiplayer = true;
+    },
   },
   created() {
     if (runningInCypressTest()) {
@@ -1540,6 +1572,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/modeler/Selection.vue

@@ -48,6 +48,7 @@ export default {
     paperManager: Object,
     useModelGeometry: Boolean,
     processNode: Object,
+    isMultiplayer: Boolean,
   },
   data() {
     return {
@@ -576,6 +577,24 @@ export default {
       await this.paperManager.awaitScheduledUpdates();
       this.overPoolStopDrag();
       this.updateSelectionBox();
+      if (this.isMultiplayer) { 
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties());
+      }
+      
+
+    },
+    getProperties() {
+      const changed = [];
+      this.selected.forEach(function(item) {
+        changed.push({
+          id: item.model.component.node.definition.id,
+          properties: {
+            clientX: item.model.get('position').x,
+            clientY: item.model.get('position').y,
+          },
+        });
+      });
+      return changed;
     },
     /**
      * Selector will update the waypoints of the related flows

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, id + '_di'] : nodeIdGenerator.generate();
     if (!this.id) {
       this.id = nodeId;
     }

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

@@ -1,7 +1,7 @@
 <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"/>
+      <Avatar :badgeBackgroundColor="item.color" :imgSrc="item.imgSrc" :userName="item.name" :key="item.key"/>
     </template>
   </b-avatar-group> 
 </template>

package/src/multiplayer/multiplayer.js

@@ -0,0 +1,139 @@
+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;
+  deletedItem = 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(process.env.VUE_APP_WEBSOCKET_PROVIDER, 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.toJSON());
+            this.#nodeIdGenerator.updateCounters();
+          });
+        }
+      });
+      // remove nodes observer
+      if (event.changes.deleted && event.changes.deleted.size > 0) {
+        this.removeShape();
+      }
+    });
+    this.yarray.observeDeep(ymapEventArray => {
+      ymapEventArray.forEach((ymap) => {
+        const ymapNested = ymap.target ;
+        const newProperties = {};
+        ymap.changes.keys.forEach((change, key) => {
+          if (change.action === 'add') {
+            // TODO add new properties
+          } else if (change.action === 'update') {
+            newProperties[key] = ymapNested.get(key);
+          } else if (change.action === 'delete') {
+            // TODO delete propertiees
+          }
+        });
+        if (Object.keys(newProperties).length > 0 ) {
+          newProperties['id'] = ymapNested.get('id');
+          this.updateShapes(newProperties);
+        }
+      });
+    });
+    window.ProcessMaker.EventBus.$on('multiplayer-addNode', ( data ) => {
+      this.addNode(data);
+    });
+    window.ProcessMaker.EventBus.$on('multiplayer-removeNode', ( data ) => {
+      this.removeNode(data);
+    });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateNodes', ( data ) => {
+      this.updateNodes(data);
+    });
+  }
+  addNode(data) {
+    const ymapNested = new Y.Map();
+    this.doTransact(ymapNested, data);
+    this.yarray.push([ymapNested]);
+  }
+  createShape(value) {
+    this.modeler.handleDropProcedure(value, false);
+  }
+  removeNode(data) {
+    const index =  this.getIndex(data.definition.id);
+    this.yarray.delete(index, 1); // delete one element 
+  }
+  getIndex(id) {
+    let index = -1;
+    for (const value of this.yarray) {
+      index ++;
+      if (value.get('id') === id) {
+        break ;
+      }
+    }
+    return index;
+  }
+  removeShape() {
+    const nodes = this.getRemovedNodes(this.modeler.nodes, this.yarray.toArray());
+    nodes.forEach((value) => {
+      this.modeler.removeNodeProcedure(value, true);
+    });
+  }
+  getRemovedNodes(array1, array2) {
+    return array1.filter(object1 => {
+      return !array2.some(object2 => {
+        return object1.definition.id === object2.get('id');
+      });
+    });
+  }
+  updateNodes(data) {
+    data.forEach((value) => {
+      const index = this.getIndex(value.id);
+      const nodeToUpdate =  this.yarray.get(index);
+      this.doTransact(nodeToUpdate, value.properties);
+    });
+  }
+  doTransact(ymapNested, data) {
+    this.ydoc.transact(() => {
+      for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+          ymapNested.set(key, data[key]);
+        }
+      }
+    });
+  }
+  updateShapes(data) {
+    const { paper } = this.modeler;
+    const element = this.getJointElement(paper.model, data.id);
+    // Update the element's position attribute
+    element.set('position', { x:data.clientX, y:data.clientY });
+    // Trigger a rendering of the element on the paper
+    paper.findViewByModel(element).update();
+  }
+  getJointElement(graph, targetValue) {
+    const cells = graph.getCells();
+    for (const cell of cells) {
+      if (cell.component.id === targetValue) {
+        return cell;
+      }
+    }
+    return null; // Return null if no matching element is found
+  }
+}

package/src/multiplayer/room.js

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

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