@processmaker/modeler 1.39.8 → 1.39.9

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.8",
+  "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",
@@ -77,7 +78,7 @@
     "@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/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';
@@ -334,7 +336,6 @@ export default {
   watch: {
     isRendering() {
       const loadingMessage = 'Loading process, please be patient.';
-
       if (this.isRendering) {
         window.ProcessMaker.alert(loadingMessage, 'warning');
         document.body.style.cursor = 'wait !important';
@@ -919,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'];
@@ -1144,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;
@@ -1388,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);

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

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

package/src/multiplayer/multiplayer.js

@@ -8,6 +8,7 @@ export default class Multiplayer {
   modeler = null;
   #nodeIdGenerator = null;
   room = null;
+  deletedItem = null;
   constructor(modeler) {
     // define document
     this.ydoc = new Y.Doc();
@@ -16,8 +17,8 @@ export default class Multiplayer {
   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);
+    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
     });
@@ -25,24 +26,114 @@ export default class Multiplayer {
     this.yarray = this.ydoc.getArray('modeler');
     // observe changes of the diagram
     this.yarray.observe(event => {
-      event.changes.delta.forEach((value) =>{
+      event.changes.delta.forEach((value) => {
         if (value.insert) {
           value.insert.forEach((value) => {
-            this.createShape(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) {
-    this.yarray.push([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

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

package/src/setup/globals.js

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