@processmaker/modeler 1.39.17 → 1.39.19

package/package.json

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

@@ -189,7 +189,7 @@ import getValidationProperties from '@/targetValidationUtils';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as processId } from '@/components/inspectors/process';
 import { id as sequenceFlowId } from '../nodes/sequenceFlow';
-import { id as associationId } from '../nodes/association';
+import { id as associationId } from '../nodes/association/associationConfig';
 import { id as messageFlowId } from '../nodes/messageFlow/config';
 import { id as dataOutputAssociationFlowId } from '../nodes/dataOutputAssociation/config';
 import { id as dataInputAssociationFlowId } from '../nodes/dataInputAssociation/config';
@@ -332,6 +332,13 @@ export default {
       previewConfigs: [],
       multiplayer: null,
       isMultiplayer: false,
+      flowTypes: [
+        'processmaker-modeler-sequence-flow',
+        'processmaker-modeler-message-flow',
+        'processmaker-modeler-data-input-association',
+        'processmaker-modeler-data-output-association',
+        'processmaker-modeler-association',
+      ],
     };
   },
   watch: {
@@ -529,6 +536,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 +1046,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 +1080,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 +1112,58 @@ 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-output-association',
+      ];
+
+      if (!this.isMultiplayer) {
+        return;
+      }
+
+      if (!fromClient) {
+        if (!blackList.includes(node.type) && !this.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 (this.flowTypes.includes(node.type)) {
+          let sourceRefId = node.definition.sourceRef?.id;
+          let targetRefId = node.definition.targetRef?.id;
+
+          if (node.type === 'processmaker-modeler-data-input-association') {
+            sourceRefId = Array.isArray(node.definition.sourceRef) && node.definition.sourceRef[0]?.id;
+            targetRefId = node.definition.targetRef?.$parent?.$parent.get('id');
+          }
+
+          if (sourceRefId && targetRefId) {
+            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
+              id: node.definition.id,
+              type: node.type,
+              sourceRefId,
+              targetRefId,
+              waypoint: node.diagram.waypoint,
+            });
+          }
+        }
+      }
+    },
+    async addNode(node, id = null, fromClient = false) {
       if (!node.pool) {
         node.pool = this.poolTarget;
       }
@@ -1111,6 +1173,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 +1191,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 +1213,7 @@ export default {
         addNodeToProcess(node, targetProcess);
 
         this.planeElements.push(node.diagram);
+        this.multiplayerHook(node, false);
         store.commit('addNode', node);
         this.poolTarget = null;
       });
@@ -1207,10 +1273,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 +1290,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 +1306,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 +1316,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,
@@ -1287,9 +1353,10 @@ export default {
         await this.paperManager.performAtomicAction(async() => {
           await this.highlightNode(null);
           await this.$nextTick();
-          await this.addNode(actualFlow);
           await store.commit('removeNode', genericFlow);
           await this.$nextTick();
+          await this.addNode(actualFlow, genericFlow.definition.id);
+          await this.$nextTick();
           await this.highlightNode(targetNode);
         });
       });

package/src/components/modeler/Selection.vue

@@ -31,7 +31,7 @@ import { id as poolId } from '@/components/nodes/pool/config';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as genericFlowId } from '@/components/nodes/genericFlow/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';
@@ -577,29 +577,56 @@ export default {
       await this.paperManager.awaitScheduledUpdates();
       this.overPoolStopDrag();
       this.updateSelectionBox();
-      if (this.isMultiplayer) { 
-        window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties());
+      if (this.isMultiplayer) {
+        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/association/AssociationFlow.js

@@ -0,0 +1,27 @@
+import Node from '@/components/nodes/node';
+import * as associationConfig from './associationConfig';
+
+export class AssociationFlow {
+  constructor(nodeRegistry, moddle, paper) {
+    this.nodeRegistry = nodeRegistry;
+    this.moddle = moddle;
+    this.paper = paper;
+  }
+
+  makeFlowNode(sourceShape, targetShape, waypoint) {
+    const diagram = associationConfig.diagram(this.moddle);
+    const associationFlow = associationConfig.definition(this.moddle);
+
+    associationFlow.set('sourceRef', sourceShape.component.node.definition);
+    associationFlow.set('targetRef', targetShape.component.node.definition);
+
+    diagram.waypoint = waypoint.map(point => this.moddle.create('dc:Point', point));
+
+    const node = new Node(
+      associationConfig.id,
+      associationFlow,
+      diagram,
+    );
+    return node;
+  }
+}

package/src/components/nodes/association/associationConfig.js

@@ -1 +1,16 @@
+export const id = 'processmaker-modeler-association';
+
+export const bpmnType = 'bpmn:Association';
+
 export const direction = { none: 'None', one: 'One', both: 'Both' };
+
+export function definition(moddle) {
+  return moddle.create(bpmnType, {
+    associationDirection: direction.none,
+    targetRef: { x: undefined, y: undefined },
+  });
+}
+
+export function diagram(moddle) {
+  return moddle.create('bpmndi:BPMNEdge');
+}

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

@@ -1,22 +1,16 @@
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
 import component from './association.vue';
-import { direction } from './associationConfig';
+import { id, bpmnType, direction, definition, diagram } from './associationConfig';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
-
-export const id  = 'processmaker-modeler-association';
+import { AssociationFlow } from './AssociationFlow';
 
 export default {
   id,
   component,
-  bpmnType: 'bpmn:Association',
+  bpmnType,
   control: false,
-  definition(moddle) {
-    return moddle.create('bpmn:Association', {
-      associationDirection: `${direction.none}`,
-    });
-  },
-  diagram(moddle) {
-    return moddle.create('bpmndi:BPMNEdge');
-  },
+  definition,
+  diagram,
   inspectorConfig: [
     {
       name: 'Data Association',
@@ -53,4 +47,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 AssociationFlow(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdIterator = getNodeIdGenerator(modeler.definitions);
+      nodeIdIterator.updateCounters();
+    }
+  },
 };

package/src/components/nodes/dataInputAssociation/DataInputAssociation.js

@@ -0,0 +1,30 @@
+import Node from '@/components/nodes/node';
+import * as associationConfig from './config';
+import { getOrFindDataInput } from '@/components/crown/utils';
+
+export class DataInputAssociation {
+  constructor(nodeRegistry, moddle, paper) {
+    this.nodeRegistry = nodeRegistry;
+    this.moddle = moddle;
+    this.paper = paper;
+  }
+
+  makeFlowNode(sourceShape, targetShape, waypoint) {
+    const diagram = associationConfig.diagram(this.moddle);
+    const associationFlow = associationConfig.definition(this.moddle);
+
+    // When saving the BPMN, if this is not an array the sourceRef is not stored
+    const dataInput = getOrFindDataInput(this.moddle, targetShape.component.node, sourceShape.component.node.definition);
+    associationFlow.set('targetRef', dataInput);
+    associationFlow.set('sourceRef', [sourceShape.component.node.definition]);
+
+    diagram.waypoint = waypoint.map(point => this.moddle.create('dc:Point', point));
+
+    const node = new Node(
+      associationConfig.id,
+      associationFlow,
+      diagram,
+    );
+    return node;
+  }
+}

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

@@ -1,6 +1,8 @@
 import component from './dataInputAssociation.vue';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
 import * as config from './config';
+import { DataInputAssociation } from './DataInputAssociation';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
 
 export default {
   ...config,
@@ -29,4 +31,19 @@ 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 DataInputAssociation(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+
+      targetElem.component.node.definition.set('dataInputAssociations', [actualFlow.definition]);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdIterator = getNodeIdGenerator(modeler.definitions);
+      nodeIdIterator.updateCounters();
+    }
+  },
 };

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

@@ -1,6 +1,8 @@
 import component from './dataOutputAssociation.vue';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
 import * as config from './config';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
+import DataOutputAssociation from '../genericFlow/DataOutputAssociation';
 
 export default {
   ...config,
@@ -29,4 +31,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 DataOutputAssociation(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdIterator = getNodeIdGenerator(modeler.definitions);
+      nodeIdIterator.updateCounters();
+    }
+  },
 };

package/src/components/nodes/genericFlow/DataOutputAssociation.js

@@ -55,7 +55,7 @@ export default class DataOutputAssociation extends DataAssociation {
     const sourceIsDataObject = sourceNode.definition.$type === 'bpmn:DataObjectReference';
     const targetIsDataStore = targetNode.definition.$type === 'bpmn:DataStoreReference';
     const targetIsDataObject = targetNode.definition.$type === 'bpmn:DataObjectReference';
-    
+
     if (sourceIsDataStore && dataStoreValidTargets.includes(targetType)) {
       return true;
     }

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

@@ -109,16 +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),

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')) {