@processmaker/modeler 1.39.17 → 1.39.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.17",
+  "version": "1.39.18",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/components/crown/utils.js

@@ -62,15 +62,16 @@ export function removeNodeAssociations(node, modeler) {
 
 export function removeBoundaryEvents(graph, node, removeNode) {
   const nodeShape = graph.getCells().find(el => el.component && el.component.node === node);
-
-  nodeShape.getEmbeddedCells({ deep: true })
-    .filter(cell => {
-      return cell.component && cell.component.node.isBpmnType('bpmn:BoundaryEvent');
-    })
-    .forEach(boundaryEventShape => {
-      graph.getConnectedLinks(boundaryEventShape).forEach(shape => removeNode(shape.component.node));
-      removeNode(boundaryEventShape.component.node);
-    });
+  if (nodeShape) {
+    nodeShape.getEmbeddedCells({ deep: true })
+      .filter(cell => {
+        return cell.component && cell.component.node.isBpmnType('bpmn:BoundaryEvent');
+      })
+      .forEach(boundaryEventShape => {
+        graph.getConnectedLinks(boundaryEventShape).forEach(shape => removeNode(shape.component.node));
+        removeNode(boundaryEventShape.component.node);
+      });
+  }
 }
 
 export function removeOutgoingAndIncomingRefsToFlow(node){

package/src/components/modeler/Modeler.vue

@@ -529,6 +529,10 @@ export default {
         return this.paper.findViewByModel(shape);
       });
     },
+    getElementByNodeId(id) {
+      const cells = this.paper.model.getCells();
+      return cells.find((cell) => cell.component && cell.component.id === id);
+    },
     async close() {
       this.$emit('close');
     },
@@ -1035,21 +1039,22 @@ export default {
         control,
       });
     },
-    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 addRemoteNode(data){
+      const definition = this.nodeRegistry[data.type].definition(this.moddle, this.$t);
+      const diagram = this.nodeRegistry[data.type].diagram(this.moddle);
+      diagram.bounds.x = data.x;
+      diagram.bounds.y = data.y;
+      const newNode = this.createNode(data.type, definition, diagram);
+      await this.addNode(newNode, data.id, true);
+      await this.$nextTick();
+      await this.paperManager.awaitScheduledUpdates();
+      if (this.autoValidate) {
+        this.validateBpmnDiagram();
       }
     },
-    async handleDropProcedure(data, selected=true) {
-      const { clientX, clientY, control, nodeThatWillBeReplaced, id } = data;
+    
+    async handleDrop(data) {
+      const { clientX, clientY, control, nodeThatWillBeReplaced } = data;
       this.validateDropTarget({ clientX, clientY, control });
       if (!this.allowDrop) {
         return;
@@ -1068,11 +1073,10 @@ export default {
       if (newNode.isBpmnType('bpmn:BoundaryEvent')) {
         this.setShapeCenterUnderCursor(diagram);
       }
-      if (selected) {
-        this.highlightNode(newNode);
-      }
 
-      await this.addNode(newNode, id, selected);
+      this.highlightNode(newNode);
+
+      await this.addNode(newNode);
       if (!nodeThatWillBeReplaced) {
         return;
       }
@@ -1101,7 +1105,50 @@ export default {
       const view = newNodeComponent.shapeView;
       await this.$refs.selector.selectElement(view);
     },
-    async addNode(node, id = null, selected = true) {
+    multiplayerHook(node, fromClient) {
+      const blackList = [
+        'processmaker-modeler-lane',
+        'processmaker-modeler-generic-flow',
+        'processmaker-modeler-sequence-flow',
+        'processmaker-modeler-association',
+        'processmaker-modeler-data-input-association',
+        'processmaker-modeler-data-input-association',
+      ];
+      const flowTypes = [
+        'processmaker-modeler-sequence-flow',
+        'processmaker-modeler-message-flow',
+      ];
+      if (!this.isMultiplayer) {
+        return;
+      }
+      if (!fromClient) {
+        if (!blackList.includes(node.type) && !flowTypes.includes(node.type)) {
+          const defaultData = {
+            x: node.diagram.bounds.x,
+            y: node.diagram.bounds.y,
+            height: node.diagram.bounds.height,
+            width: node.diagram.bounds.width,
+            type: node.type,
+            id: node.definition.id,
+            isAddingLaneAbove: true,
+          };
+          if (node?.pool?.component) {
+            defaultData['poolId'] = node.pool.component.id;
+          }
+          window.ProcessMaker.EventBus.$emit('multiplayer-addNode', defaultData);
+        }
+        if (flowTypes.includes(node.type)) {
+          window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
+            id: node.definition.id,
+            type: node.type,
+            sourceRefId: node.definition.sourceRef.id,
+            targetRefId: node.definition.targetRef.id,
+            waypoint: node.diagram.waypoint,
+          });
+        }
+      }
+    },
+    async addNode(node, id = null, fromClient = false) {
       if (!node.pool) {
         node.pool = this.poolTarget;
       }
@@ -1111,6 +1158,9 @@ export default {
       node.setIds(this.nodeIdGenerator, id);
 
       this.planeElements.push(node.diagram);
+      // add multiplayer logic as a hook
+      this.multiplayerHook(node, fromClient);
+
       store.commit('addNode', node);
       this.poolTarget = null;
 
@@ -1126,7 +1176,7 @@ export default {
       ].includes(node.type)) {
         return;
       }
-      if (selected) {
+      if (!fromClient) {
         // Select the node after it has been added to the store (does not apply to flows)
         this.selectNewNode(node);
       }
@@ -1148,6 +1198,7 @@ export default {
         addNodeToProcess(node, targetProcess);
 
         this.planeElements.push(node.diagram);
+        this.multiplayerHook(node, false);
         store.commit('addNode', node);
         this.poolTarget = null;
       });
@@ -1207,10 +1258,10 @@ export default {
     replaceNode({ node, typeToReplaceWith }) {
       this.performSingleUndoRedoTransaction(async() => {
         await this.paperManager.performAtomicAction(async() => {
-          const { x: clientX, y: clientY } = this.paper.localToClientPoint(node.diagram.bounds);
+          const { x, y } = node.diagram.bounds;
 
           const nodeData = {
-            clientX, clientY,
+            x, y,
             control: { type: typeToReplaceWith },
             nodeThatWillBeReplaced: node,
           };
@@ -1224,10 +1275,10 @@ export default {
             }).filter(Boolean);
             // If the new control is found, emit event to server to replace node
             if (newControl.length === 1) {
-              window.ProcessMaker.EventBus.$emit('multiplayer-replaceNode', { nodeData, newControl: newControl[0] });
+              window.ProcessMaker.EventBus.$emit('multiplayer-replaceNode', { nodeData, newControl: newControl[0].type });
             }
           } else {
-            await this.replaceNodeProcedure(nodeData);
+            await this.replaceNodeProcedure(nodeData, true);
           }
         });
       });
@@ -1240,7 +1291,7 @@ export default {
         data.clientY = clientY;
       }
 
-      const newNode = await this.handleDropProcedure(data);
+      const newNode = await this.handleDrop(data);
 
       await this.removeNode(data.nodeThatWillBeReplaced, { removeRelationships: false, isReplaced });
       this.highlightNode(newNode);
@@ -1250,7 +1301,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.handleDropProcedure({
+          const newNode = await this.handleDrop({
             clientX, clientY,
             control: { type: typeToReplaceWith },
             nodeThatWillBeReplaced: node,

package/src/components/modeler/Selection.vue

@@ -578,28 +578,55 @@ export default {
       this.overPoolStopDrag();
       this.updateSelectionBox();
       if (this.isMultiplayer) { 
-        window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties());
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties(this.selected));
       }
-      
-
     },
-    getProperties() {
-      const changed = [];
+
+    getProperties(shapes) {
+      let changed = [];
       const shapesToNotTranslate = [
         'PoolLane',
         'standard.Link',
         'processmaker.components.nodes.boundaryEvent.Shape',
       ];
-      this.selected.filter(shape => !shapesToNotTranslate.includes(shape.model.get('type')))
+
+      shapes.filter(shape => !shapesToNotTranslate.includes(shape.model.get('type')))
         .forEach(shape => {
-          changed.push({
-            id: shape.model.component.node.definition.id,
-            properties: {
-              clientX: shape.model.get('position').x,
-              clientY: shape.model.get('position').y,
-            },
-          });
+          if (shape.model.get('type') === 'processmaker.modeler.bpmn.pool') {
+            const children = shape.model.component.getElementsUnderArea(shape.model, this.graph);
+            changed = [...changed, ...this.getContainerProperties(children, changed)];
+          } else {
+            const { node } = shape.model.component;
+            const defaultData = {
+              id: node.definition.id,
+              properties: {
+                x: shape.model.get('position').x,
+                y: shape.model.get('position').y,
+                height: shape.model.get('size').height,
+                width: shape.model.get('size').width,
+              },
+            };
+            if (node?.pool?.component) {
+              defaultData['poolId'] = node.pool.component.id;
+            }
+            changed.push(defaultData);
+          }
+        });
+      return changed;
+    },
+    getContainerProperties(children) {
+      const changed = [];
+      children.forEach(model => {
+        changed.push({
+          id: model.component.node.definition.id,
+          properties: {
+            x: model.get('position').x,
+            y: model.get('position').y,
+            height: model.get('size').height,
+            width: model.get('size').width,
+          },
         });
+      });
       return changed;
     },
     /**

package/src/components/nodes/genericFlow/genericFlow.vue

@@ -109,17 +109,6 @@ export default {
       const flow = new bpmnFlow.factory(this.nodeRegistry, this.moddle, this.paper);
       const genericLink = this.shape.findView(this.paper);
       const waypoint =  [genericLink.sourceAnchor.toJSON(), genericLink.targetAnchor.toJSON()];
-      // Multiplayer hook
-      if (this.$parent.isMultiplayer) {
-        window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
-          type: bpmnFlow.type,
-          id: `node_${this.$parent.nodeIdGenerator.getDefinitionNumber()}`,
-          sourceRefId: this.sourceNode.definition.id,
-          targetRefId: this.targetNode.definition.id,
-          waypoint,
-        });
-      }
-
       this.$emit('replace-generic-flow', {
         actualFlow: flow.makeFlowNode(this.sourceShape, this.target, waypoint),
         genericFlow: this.node,

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

@@ -2,6 +2,9 @@ import component from './messageFlow.vue';
 import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 import advancedAccordionConfig from '@/components/inspectors/advancedAccordionConfig';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
+import MessageFlow from '@/components/nodes/genericFlow/MessageFlow';
+
 import { id } from '@/components/nodes/messageFlow/config';
 
 export default {
@@ -42,4 +45,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 MessageFlow(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/nodes/pool/pool.vue

@@ -133,6 +133,31 @@ export default {
       pull(this.containingProcess.get('flowElements'), elementDefinition);
       toPool.component.containingProcess.get('flowElements').push(elementDefinition);
     },
+    moveElementRemote(element, toPool) {
+      const elementDefinition = element.component.node.definition;
+
+      if (this.laneSet) {
+        /* Remove references to the element from the current Lane */
+        const containingLane = this.laneSet.get('lanes').find(lane => {
+          return lane.get('flowNodeRef').includes(elementDefinition);
+        });
+
+        pull(containingLane.get('flowNodeRef'), elementDefinition);
+      }
+
+      /* Remove references to the element from the current process */
+      pull(this.containingProcess.get('flowElements'), elementDefinition);
+
+      element.component.node.pool = toPool;
+    
+      this.shape.unembed(element);
+      toPool.component.shape.embed(element);
+      if (element.component.node.type !== laneId && toPool.component.laneSet) {
+        toPool.component.updateLaneChildren();
+      }
+      this.$emit('set-shape-stacking', element.component.shape);
+    },
+
     moveElement(element, toPool) {
       const elementDefinition = element.component.node.definition;
 
@@ -155,7 +180,7 @@ export default {
       this.shape.unembed(element);
       toPool.component.addToPool(element);
     },
-    async addLane() {
+    async addLane(emitMultiplayer = true) {
       /* A Lane element must be contained in a LaneSet element.
          * Get the current laneSet element or create a new one. */
 
@@ -177,35 +202,40 @@ export default {
 
       lanes.push(this.pushNewLane());
 
-      await Promise.all(lanes);
+      await Promise.all(lanes)
+        .then((val) => {
+          if (emitMultiplayer && this.$parent.isMultiplayer) {
+            window.ProcessMaker.EventBus.$emit('multiplayer-addLanes', val);
+          }
+        });
       this.$emit('set-shape-stacking', this.shape);
       this.graph.getLinks().forEach(link => {
         this.$emit('set-shape-stacking', link);
       });
       this.$emit('save-state');
     },
-    createLaneSet() {
+    createLaneSet(id) {
       const laneSet = this.moddle.create('bpmn:LaneSet');
       this.laneSet = laneSet;
       const generator = this.nodeIdGenerator;
-      const [laneSetId] = generator.generate();
+      const [laneSetId] =  id ?? generator.generate();
       this.laneSet.set('id', laneSetId);
       this.containingProcess.get('laneSets').push(laneSet);
     },
-    pushNewLane(definition = Lane.definition(this.moddle, this.$t)) {
+    async pushNewLane(definition = Lane.definition(this.moddle, this.$t)) {
       definition.set('color', this.node.definition.get('color'));
       this.$emit('set-pool-target', this.shape);
 
       const diagram = Lane.diagram(this.moddle);
       diagram.bounds.width = this.shape.getBBox().width;
-
-      this.$emit('add-node', new Node(
+      const node = new Node(
         Lane.id,
         definition,
         diagram,
-      ));
-
-      return this.$nextTick();
+      );
+      this.$emit('add-node', node);
+      await this.$nextTick();
+      return node;
     },
     addToPool(element) {
       if (element.component.node.isBpmnType('bpmn:BoundaryEvent')) {

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/linkConfig.js

@@ -239,20 +239,6 @@ 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,
-            });
-          }
-        }
-
         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;
       }