@processmaker/modeler 1.39.17 → 1.39.19

package/src/components/nodes/poolLane/index.js

@@ -3,6 +3,9 @@ import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 import advancedAccordionConfig from '@/components/inspectors/advancedAccordionConfig';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
 import { id } from '@/components/nodes/poolLane/config';
+import Node from '@/components/nodes/node';
+import { elementShouldHaveFlowNodeRef } from '@/components/nodes/pool/poolUtils';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
 
 export default {
   id,
@@ -49,4 +52,37 @@ export default {
       ],
     },
   ],
+
+  async multiplayerClient(modeler, data) {
+    const pool = modeler.getElementByNodeId(data.poolId);
+    const definition = modeler.moddle.create('bpmn:Lane', {
+      name: data.name,
+    });
+    if (!pool.component.laneSet && pool.component.createLaneSet) {
+      pool.component.createLaneSet([data.laneSetId]);
+      /* If there are currently elements in the pool, add them to the first lane */
+      pool.component.shape.getEmbeddedCells().filter(element => elementShouldHaveFlowNodeRef(element))
+        .forEach(element => {
+          definition.get('flowNodeRef').push(element.component.node.definition);
+        });
+      const nodeIdereator = getNodeIdGenerator(modeler.definitions);
+      nodeIdereator.updateCounters();
+    }
+    const diagram = modeler.moddle.create('bpmndi:BPMNShape', {
+      bounds: modeler.moddle.create('dc:Bounds', {
+        height: data.height,
+        width: data.width,
+        x: data.x,
+        y: data.y,
+      }),
+    });
+    const node = new Node(
+      data.type,
+      definition,
+      diagram,
+    );
+    await modeler.addNode(node, data.id, true);
+    modeler.setShapeStacking(pool.component.shape);
+
+  },
 };

package/src/components/nodes/sequenceFlow/index.js

@@ -2,6 +2,8 @@ import component from './sequenceFlow.vue';
 import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 import advancedAccordionConfig from '@/components/inspectors/advancedAccordionConfig';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
+import SequenceFlow from '@/components/nodes/genericFlow/SequenceFlow';
 
 export const id = 'processmaker-modeler-sequence-flow';
 
@@ -82,4 +84,17 @@ export default {
       ],
     },
   ],
+  async multiplayerClient(modeler, data) {
+    const { paper } = modeler;
+    const sourceElem = modeler.getElementByNodeId(data.sourceRefId);
+    const targetElem = modeler.getElementByNodeId(data.targetRefId);
+    if (sourceElem && targetElem) {
+      const flow = new SequenceFlow(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdereator = getNodeIdGenerator(modeler.definitions);
+      nodeIdereator.updateCounters();
+    }
+  },
 };

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

@@ -23,7 +23,7 @@ export default {
     filteredPlayers() {
       const allPlayers = uniqBy(this.players, 'name');
       return allPlayers.filter(player => {
-        return player.name.toLowerCase() !== window.ProcessMaker.user.fullName.toLowerCase();
+        return player.name.toLowerCase() !== window.ProcessMaker.user?.fullName.toLowerCase();
       });
     },
   },

package/src/mixins/cloneSelection.js

@@ -1,6 +1,6 @@
 import { id as laneId } from '../components/nodes/poolLane/config';
 import { id as sequenceFlowId } from '../components/nodes/sequenceFlow';
-import { id as associationId } from '../components/nodes/association';
+import { id as associationId } from '../components/nodes/association/associationConfig';
 import { id as messageFlowId } from '../components/nodes/messageFlow/config';
 import { id as dataOutputAssociationFlowId } from '../components/nodes/dataOutputAssociation/config';
 import { id as dataInputAssociationFlowId } from '../components/nodes/dataInputAssociation/config';

package/src/mixins/linkConfig.js

@@ -23,6 +23,7 @@ export default {
   props: ['highlighted', 'paper', 'paperManager', 'isCompleted', 'isIdle'],
   data() {
     return {
+      linkView: null,
       sourceShape: null,
       target: null,
       listeningToMouseup: false,
@@ -163,6 +164,31 @@ export default {
         this.updateWaypoints();
         await this.$nextTick();
 
+        if (this.$parent.isMultiplayer && this.linkView) {
+          // update waypoints in multiplayer mode
+          const nodeType = this.linkView.model.component.node.type;
+          const sourceRefId = this.linkView.sourceView.model.component.node.definition.id;
+          const targetRefId = this.linkView.targetView.model.component.node.definition.id;
+
+          const changes = [
+            {
+              id: this.linkView.model.component.node.definition.id,
+              properties: {
+                type: nodeType,
+                waypoint: [
+                  this.linkView.sourceAnchor.toJSON(),
+                  ...this.shape.vertices(),
+                  this.linkView.targetAnchor.toJSON(),
+                ],
+                sourceRefId,
+                targetRefId,
+              },
+            },
+          ];
+
+          window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', changes);
+        }
+
         this.listeningToMouseleave = true;
         this.$emit('save-state');
       }
@@ -174,14 +200,15 @@ export default {
       * @param {Object} options
       */
     async onChangeTargets(link, vertices, options){
-      if (options && options.ui) {
+      if (options?.ui) {
         await this.$nextTick();
         await this.waitForUpdateWaypoints();
+        this.listeningToMouseleave = false;
         await this.storeWaypoints();
       }
     },
     async onChangeVertices(link, vertices, options){
-      if (options && options.ui) {
+      if (options?.ui) {
         this.updateWaypoints();
         await this.$nextTick();
         this.listeningToMouseleave = false;
@@ -189,9 +216,9 @@ export default {
       }
     },
     updateWaypoints() {
-      const linkView = this.shape.findView(this.paper);
-      const start = linkView.sourceAnchor;
-      const end = linkView.targetAnchor;
+      this.linkView = this.shape.findView(this.paper);
+      const start = this.linkView.sourceAnchor;
+      const end = this.linkView.targetAnchor;
 
       this.node.diagram.waypoint = [start,
         ...this.shape.vertices(),
@@ -239,18 +266,9 @@ export default {
         if (this.updateDefinitionLinks) {
           this.updateDefinitionLinks();
         }
-        if (this.shape.component.node.type === 'processmaker-modeler-data-input-association') {
-          if (this.$parent.isMultiplayer) {
-            const genericLink = this.shape.findView(this.paper);
-            const waypoint =  [genericLink.sourceAnchor.toJSON(), genericLink.targetAnchor.toJSON()];
-            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
-              type: this.shape.component.node.type,
-              id: `node_${this.$parent.nodeIdGenerator.getDefinitionNumber()}`,
-              sourceRefId: this.sourceNode.definition.id,
-              targetRefId: this.targetNode.definition.id,
-              waypoint,
-            });
-          }
+
+        if (this.linkView && ['processmaker-modeler-association', 'processmaker-modeler-data-input-association'].includes(this.shape.component.node.type)) {
+          this.$parent.multiplayerHook(this.shape.component.node, false);
         }
 
         this.$emit('save-state');

package/src/mixins/poolLaneCrownConfig.js

@@ -14,7 +14,6 @@ export default {
       ].includes(this.node.type)) {
         return;
       }
-
       if (this.node.pool) {
         if (!this.graph.getCell(this.node.pool)) {
           this.node.pool = this.graph.getElements().find(element => {
@@ -27,7 +26,6 @@ export default {
         if (this.isLane) {
           this.configureLaneInParentPool();
         }
-
         return;
       }
 

package/src/multiplayer/multiplayer.js

@@ -1,28 +1,9 @@
 import { io } from 'socket.io-client';
 import * as Y from 'yjs';
 import { getNodeIdGenerator } from '../NodeIdGenerator';
+import { getDefaultAnchorPoint } from '@/portsUtils';
 import Room from './room';
-import MessageFlow from '@/components/nodes/genericFlow/MessageFlow';
-import SequenceFlow from '@/components/nodes/genericFlow/SequenceFlow';
-import DataOutputAssociation from '@/components/nodes/genericFlow/DataOutputAssociation';
-const BpmnFlows = [
-  {
-    type: 'processmaker-modeler-text-annotation',
-    factory: DataOutputAssociation,
-  },
-  {
-    type: 'processmaker-modeler-sequence-flow',
-    factory: SequenceFlow,
-  },
-  {
-    type: 'processmaker-modeler-message-flow',
-    factory: MessageFlow,
-  },
-  {
-    type: 'processmaker-modeler-data-input-association',
-    factory: DataOutputAssociation,
-  },
-];
+
 export default class Multiplayer {
   clientIO = null;
   yDoc = null;
@@ -44,7 +25,8 @@ export default class Multiplayer {
     // Get the node id generator
     this.#nodeIdGenerator = getNodeIdGenerator(this.modeler.definitions);
     // Get the room name from the process id
-    this.room = new Room(`room-${window.ProcessMaker.modeler.process.id}`);
+    const processId = window.ProcessMaker.modeler.process.uuid ?? window.ProcessMaker.modeler.process.id;
+    this.room = new Room(`room-${processId}`);
 
     // Connect to websocket server
     this.clientIO = io(window.ProcessMaker.multiplayer.host, { transports: ['websocket', 'polling']});
@@ -53,8 +35,8 @@ export default class Multiplayer {
       // Join the room
       this.clientIO.emit('joinRoom', {
         roomName: this.room.getRoom(),
-        clientName: window.ProcessMaker.user.fullName,
-        clientAvatar: window.ProcessMaker.user.avatar,
+        clientName: window.ProcessMaker.user?.fullName,
+        clientAvatar: window.ProcessMaker.user?.avatar,
       });
     });
 
@@ -140,12 +122,13 @@ export default class Multiplayer {
     window.ProcessMaker.EventBus.$on('multiplayer-addFlow', ( data ) => {
       this.addFlow(data);
     });
+
+    window.ProcessMaker.EventBus.$on('multiplayer-addLanes', ( lanes ) => {
+      this.addLaneNodes(lanes);
+    });
   }
   addNode(data) {
-    // Add the new element to the process
-    this.createShape(data);
     // Add the new element to the shared array
-    // this.yArray.push([data]);
     const yMapNested = new Y.Map();
     this.doTransact(yMapNested, data);
     this.yArray.push([yMapNested]);
@@ -154,47 +137,45 @@ export default class Multiplayer {
     // Send the update to the web socket server
     this.clientIO.emit('createElement', stateUpdate);
   }
-  createShape(value) {
-    this.modeler.handleDropProcedure(value, false);
+  createShape(value){
+    if (this.modeler.nodeRegistry[value.type] && this.modeler.nodeRegistry[value.type].multiplayerClient) {
+      this.modeler.nodeRegistry[value.type].multiplayerClient(this.modeler, value);
+    } else {
+      this.modeler.addRemoteNode(value);
+    }
     this.#nodeIdGenerator.updateCounters();
+
   }
   createRemoteShape(changes) {
-    const flows = [
-      'processmaker-modeler-sequence-flow',
-      'processmaker-modeler-text-annotation',
-      'processmaker-modeler-message-flow',
-      'processmaker-modeler-data-input-association',
-    ];
     return new Promise(resolve => {
       changes.map((data) => {
-        if (flows.includes(data.type)) {
-          this.createFlow(data);
-        } else {
-          this.createShape(data);
-        }
+        this.createShape(data);
       });
       resolve();
     });
   }
   removeNode(data) {
     const index =  this.getIndex(data.definition.id);
-    this.removeShape(data);
-    this.yArray.delete(index, 1); // delete one element
-
-    // Encode the state as an update and send it to the server
-    const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
-    // Send the update to the web socket server
-    this.clientIO.emit('removeElement', stateUpdate);
+    if (index >= 0) {
+      this.removeShape(data);
+      this.yArray.delete(index, 1); // delete one element
+      // Encode the state as an update and send it to the server
+      const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
+      // Send the update to the web socket server
+      this.clientIO.emit('removeElement', stateUpdate);
+    }
   }
   getIndex(id) {
     let index = -1;
+    let found = false;
     for (const value of this.yArray) {
       index ++;
       if (value.get('id') === id) {
+        found = true;
         break ;
       }
     }
-    return index;
+    return found ? index : -1;
   }
   getNodeById(nodeId) {
     const node = this.modeler.nodes.find((element) => element.definition && element.definition.id === nodeId);
@@ -215,7 +196,8 @@ export default class Multiplayer {
     data.forEach((value) => {
       const index = this.getIndex(value.id);
       const nodeToUpdate =  this.yArray.get(index);
-      this.doTransact(nodeToUpdate, value.properties);
+      const updateData = value.poolId ? { ...value.properties, ...{ poolId: value.poolId } } : value.properties;
+      this.doTransact(nodeToUpdate, updateData);
     });
   }
   replaceNode(nodeData, newControl) {
@@ -224,13 +206,11 @@ export default class Multiplayer {
     const nodeToUpdate =  this.yArray.get(index);
     // Update the node id in the nodeData
     nodeData.id = `node_${this.#nodeIdGenerator.getDefinitionNumber()}`;
-    // Replace the node in the process
-    this.modeler.replaceNodeProcedure(nodeData, true);
     // Update the node id generator
     this.#nodeIdGenerator.updateCounters();
     // Update the node in the shared array
     this.yDoc.transact(() => {
-      nodeToUpdate.set('control', newControl);
+      nodeToUpdate.set('type', newControl);
       nodeToUpdate.set('id', nodeData.id);
     });
 
@@ -240,13 +220,14 @@ export default class Multiplayer {
     this.clientIO.emit('updateElement', { updateDoc: stateUpdate, isReplaced: true });
   }
   replaceShape(updatedNode) {
+    const { x: clientX, y: clientY } = this.modeler.paper.localToClientPoint(updatedNode);
     // Get the node to update
     const node = this.getNodeById(updatedNode.oldNodeId);
     // Update the node id in the nodeData
     const nodeData = {
-      clientX: updatedNode.clientX,
-      clientY: updatedNode.clientY,
-      control: { type: updatedNode.control.type },
+      clientX,
+      clientY,
+      control: { type: updatedNode.type },
       nodeThatWillBeReplaced: node,
       id: updatedNode.id,
     };
@@ -269,23 +250,59 @@ export default class Multiplayer {
     // Send the update to the web socket server
     this.clientIO.emit('updateElement', { updateDoc: stateUpdate, isReplaced: false });
   }
-  updateShapes(data) {
+  async 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;
+    const element = this.modeler.getElementByNodeId(data.id);
+    const newPool = this.modeler.getElementByNodeId(data.poolId);
+
+    if (this.modeler.flowTypes.includes(data.type)) {
+      // Update the element's waypoints
+      // Get the source and target elements
+      const sourceElem = this.modeler.getElementByNodeId(data.sourceRefId);
+      const targetElem = this.modeler.getElementByNodeId(data.targetRefId);
+
+      const { waypoint } = data;
+      const startWaypoint = waypoint.shift();
+      const endWaypoint = waypoint.pop();
+
+      // Update the element's waypoints
+      const newWaypoint = waypoint.map(point => this.modeler.moddle.create('dc:Point', point));
+      element.set('vertices', newWaypoint);
+
+      // Update the element's source anchor
+      element.source(sourceElem, {
+        anchor: () => {
+          return getDefaultAnchorPoint(this.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
+        },
+        connectionPoint: { name: 'boundary' },
+      });
+
+      // Update the element's target anchor
+      element.target(targetElem, {
+        anchor: () => {
+          return getDefaultAnchorPoint(this.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
+        },
+        connectionPoint: { name: 'boundary' },
+      });
+    } else {
+      // Update the element's position attribute
+      element.resize(
+        /* Add labelWidth to ensure elements don't overlap with the pool label */
+        data.width,
+        data.height,
+      );
+      element.set('position', { x: data.x, y: data.y });
+      // Trigger a rendering of the element on the paper
+      await paper.findViewByModel(element).update();
+      // validate if the parent pool was updated
+      await element.component.$nextTick();
+      await this.modeler.paperManager.awaitScheduledUpdates();
+      if (newPool && element.component.node.pool && element.component.node.pool.component.id !== data.poolId) {
+        element.component.node.pool.component.moveElementRemote(element, newPool);
       }
     }
-    return null; // Return null if no matching element is found
   }
+
   addFlow(data) {
     const yMapNested = new Y.Map();
     this.doTransact(yMapNested, data);
@@ -296,20 +313,62 @@ export default class Multiplayer {
     this.clientIO.emit('createElement', stateUpdate);
     this.#nodeIdGenerator.updateCounters();
   }
-  createFlow(data){
-    const { paper } = this.modeler;
-    const sourceElem = this.getJointElement(paper.model, data.sourceRefId);
-    const targetElem = this.getJointElement(paper.model, data.targetRefId);
-    if (sourceElem && targetElem) {
-      const bpmnFlow = BpmnFlows.find(FlowClass => {
-        return FlowClass.type === data.type;
+
+  addLaneNodes(lanes) {
+    const pool = this.getPool(lanes);
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [{
+      id: pool.component.node.definition.id,
+      properties: {
+        x: pool.component.node.diagram.bounds.x,
+        y: pool.component.node.diagram.bounds.y,
+        height: pool.component.node.diagram.bounds.height,
+        width: pool.component.node.diagram.bounds.width,
+        isAddingLaneAbove: pool.isAddingLaneAbove,
+      },
+    }]);
+    this.yDoc.transact(() => {
+      lanes.forEach((lane) => {
+        const yMapNested = new Y.Map();
+        const data = this.prepareLaneData(lane);
+        this.doTransact(yMapNested, data);
+        this.yArray.push([yMapNested]);
+        const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
+        this.clientIO.emit('createElement', stateUpdate);
       });
-      const flow = new bpmnFlow.factory(this.modeler.nodeRegistry, this.modeler.moddle, this.modeler.paper);
-      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
-      // add Nodes
-      this.modeler.addNode(actualFlow, data.id);
-      this.#nodeIdGenerator.updateCounters();
+    });
+  }
+  prepareLaneData(lane) {
+    const data = {
+      type: lane.type,
+      id: lane.definition.id,
+      name: lane.definition.name,
+      x: lane.diagram.bounds.x,
+      y: lane.diagram.bounds.y,
+      width: lane.diagram.bounds.width,
+      height: lane.diagram.bounds.height,
+      poolId: lane.pool.component.node.definition.id,
+      laneSetId: lane.pool.component.laneSet.id,
+    };
+    return data;
+  }
+  getPool(lanes) {
+    if (lanes && lanes.length > 0) {
+      return lanes[0].pool;
     }
+    return false;
+  }
+  getConnectionPoint(element, newPosition) {
+    const { x: elemX, y: elemY } = element.position();
+    const connectionOffset = {
+      x: newPosition.x - elemX,
+      y: newPosition.y - elemY,
+    };
+
+    const { x, y } = element.position();
+    const { width, height } = element.size();
 
+    return connectionOffset
+      ? { x: x + connectionOffset.x, y: y + connectionOffset.y }
+      : { x: x + (width / 2), y: y + (height / 2) };
   }
 }

package/src/nodeTypesStore.js

@@ -114,7 +114,7 @@ export default new Vuex.Store({
   },
   actions: {
     getUserPinnedObjects({ commit }) {
-      if (!window.ProcessMaker.user) {
+      if (window.ProcessMaker?.user?.id === 'standalone') {
         // For standalone version of Modeler
         const pinnedNodes = localStorage.pinnedNodes ? JSON.parse(localStorage.pinnedNodes) : [] ;
         pinnedNodes.forEach(node => {
@@ -137,7 +137,7 @@ export default new Vuex.Store({
     addUserPinnedObject({ commit, state }, pinnedNode) {
       commit('setPinnedNodes', pinnedNode);
       const pinnedNodes = state.pinnedNodeTypes;
-      if (!window.ProcessMaker.user) {
+      if (window.ProcessMaker?.user?.id === 'standalone') {
         // For standalone version of Modeler
         localStorage.pinnedNodes = JSON.stringify(pinnedNodes);
         return;
@@ -152,7 +152,7 @@ export default new Vuex.Store({
     removeUserPinnedObject({ commit, state }, nodeToUnpin) {
       commit('setUnpinNode', nodeToUnpin);
       const pinnedNodes = state.pinnedNodeTypes;
-      if (!window.ProcessMaker.user) {
+      if (window.ProcessMaker?.user?.id === 'standalone') {
         // For standalone version of Modeler
         localStorage.pinnedNodes = JSON.stringify(pinnedNodes);
         return;

package/src/setup/globals.js

@@ -4,6 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 import mockProcesses from './mockProcesses.json';
 import mockSignals from './mockSignals.json';
 import mockProcessSvg from './mockProcessSvg';
+import { faker } from '@faker-js/faker';
 
 axios.defaults.baseURL = 'https://bpm4.local.processmaker.com/api/1.0/';
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@@ -57,5 +58,10 @@ window.ProcessMaker = {
       id: 1,
     },
   },
+  user: {
+    id: 'standalone',
+    fullName:  faker.person.fullName(),
+    avatar: null,
+  },
   
 };