@processmaker/modeler 1.39.7 → 1.39.8

package/package.json

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

@@ -327,6 +327,8 @@ export default {
       players: [],
       showInspectorButton: true,
       inspectorButtonRight: 65,
+      multiplayer: null,
+      isMultiplayer: false,
     };
   },
   watch: {
@@ -1024,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;
@@ -1043,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;
       }
@@ -1062,6 +1080,7 @@ export default {
 
       return newNode;
     },
+    
     setShapeCenterUnderCursor(diagram) {
       diagram.bounds.x -= (diagram.bounds.width / 2);
       diagram.bounds.y -= (diagram.bounds.height / 2);
@@ -1073,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);
@@ -1098,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(() => {
@@ -1171,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,
@@ -1375,6 +1396,9 @@ export default {
       this.dragStart = null;
       this.isSelecting = false;
     },
+    enableMultiplayer() {
+      this.isMultiplayer = true;
+    },
   },
   created() {
     if (runningInCypressTest()) {
@@ -1540,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/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/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,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();
+});
+