@processmaker/modeler 1.27.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",

package/src/NodeIdGenerator.js

@@ -1,11 +1,13 @@
 export default class NodeIdGenerator {
   static prefix = 'node_';
 
-  #counter = 1;
-  #diagramCounter = 1;
+  static #counter = 1;
+  static #diagramCounter = 1;
 
   constructor(definitions) {
     this.definitions = definitions;
+    this.refreshLastIdCounter();
+    this.refreshLastDiagramIdCounter();
   }
 
   findById(id, root = this.definitions.rootElements, walked = []) {
@@ -17,45 +19,76 @@ export default class NodeIdGenerator {
     } else if (root instanceof Object && root.$type) {
       walked.push(root);
       if (root.id === id) return root;
-      Object.getOwnPropertyNames(root).find(key => found = !(root[key] instanceof Function) && this.findById(id, root[key], walked));
+      Object.getOwnPropertyNames(root).find(key => found = !(root[key] instanceof Function) && (key.substring(0, 1) !== '$') && this.findById(id, root[key], walked));
     }
     return found;
   }
 
-  generate() {
-    let definitionId = this.#generateDefinitionId();
-    let diagramId = this.#generateDiagramId();
-
-    while (!this.#isDefinitionIdUnique(definitionId)) {
-      definitionId = this.#generateDefinitionId();
+  matchIds(idRegex, root, walked = [], lastIdCounter = 0) {
+    if (walked.indexOf(root) > -1) return lastIdCounter;
+    if (root instanceof Array) {
+      walked.push(root);
+      root.forEach(item => lastIdCounter = this.matchIds(idRegex, item, walked, lastIdCounter));
+    } else if (root instanceof Object) {
+      walked.push(root);
+      if (root.id) {
+        const match = String(root.id).match(idRegex);
+        const idCounter = match ? parseInt(match[1]) : 0;
+        if (idCounter > lastIdCounter) {
+          lastIdCounter = idCounter;
+        }
+      }
+      Object.getOwnPropertyNames(root).forEach(key => {
+        if (!(root[key] instanceof Function) && (key.substring(0, 1) !== '$')) {
+          lastIdCounter = this.matchIds(idRegex, root[key], walked, lastIdCounter);
+        }
+      });
     }
+    return lastIdCounter;
+  }
 
-    while (!this.#isDiagramIdUnique(diagramId)) {
-      diagramId = this.#generateDiagramId();
-    }
+  refreshLastIdCounter() {
+    let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.prefix}(\\d+)$`), this.definitions.rootElements);
+    NodeIdGenerator.#counter = lastIdCounter + 1;
+  }
 
+  getCounter() {
+    this.refreshLastIdCounter();
+    return NodeIdGenerator.#counter;
+  }
+
+  refreshLastDiagramIdCounter() {
+    let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.prefix}(\\d+)_di$`), this.definitions.diagrams);
+    NodeIdGenerator.#diagramCounter = lastIdCounter + 1;
+  }
+
+  generate() {
+    let definitionId = this.#generateDefinitionId();
+    let diagramId = this.#generateDiagramId();
     return [definitionId, diagramId];
   }
 
   #generateDefinitionId = () => {
-    const id = NodeIdGenerator.prefix + this.#counter;
-    this.#counter++;
+    const id = NodeIdGenerator.prefix + NodeIdGenerator.#counter;
+    NodeIdGenerator.#counter++;
 
     return id;
   };
 
   #generateDiagramId = () => {
-    const id = NodeIdGenerator.prefix + this.#diagramCounter + '_di';
-    this.#diagramCounter++;
+    const id = NodeIdGenerator.prefix + NodeIdGenerator.#diagramCounter + '_di';
+    NodeIdGenerator.#diagramCounter++;
 
     return id;
   };
+}
 
-  #isDefinitionIdUnique = id => {
-    return !this.findById(id) && !this.findById(id, this.definitions.diagrams);
-  };
+// Singleton instance
+let singleton = null;
 
-  #isDiagramIdUnique = id => {
-    return !this.findById(id) && !this.findById(id, this.definitions.diagrams);
-  };
+export function getNodeIdGenerator(definitions) {
+  if (!singleton) {
+    singleton = new NodeIdGenerator(definitions);
+  }
+  return singleton;
 }

package/src/NodeInspector.js

@@ -1,4 +1,4 @@
-import NodeIdGenerator from './NodeIdGenerator';
+import { getNodeIdGenerator } from './NodeIdGenerator';
 import omit from 'lodash/omit';
 
 export default class NodeInspector {
@@ -6,7 +6,7 @@ export default class NodeInspector {
   constructor(definitions, options = {}) {
     this.index = window.NODE_INSPECTOR_FIRST_INDEX || new Date().getTime();
     this.definitions = definitions;
-    this.nodeIdGenerator = new NodeIdGenerator(this.definitions);
+    this.nodeIdGenerator = getNodeIdGenerator(this.definitions);
     this.options = Object.assign({
       prefix: this.nodeIdGenerator.generate()[0],
     }, options);

package/src/components/crown/crownConfig/crownConfig.vue

@@ -140,7 +140,6 @@ export default {
       handler() {
         this.setNodeColor();
       },
-      deep: true,
     },
     highlightedShapes(shapes, prevShapes) {
       if (isEqual(shapes, prevShapes)) {

package/src/components/crown/utils.js

@@ -114,6 +114,7 @@ export function getOrFindDataInput(moddle, task, sourceNode) {
       inputSets: [],
       outputSets: [],
     });
+    task.definition.ioSpecification.$parent = task.definition;
   }
   // Check if dataInput exists
   if (!task.definition.ioSpecification.dataInputs) {
@@ -126,6 +127,7 @@ export function getOrFindDataInput(moddle, task, sourceNode) {
       isCollection: 'false',
       name: sourceNode.name,
     }));
+    task.definition.ioSpecification.dataInputs[task.definition.ioSpecification.dataInputs.length - 1].$parent = task.definition.ioSpecification;
     task.definition.ioSpecification.set('dataInputs', task.definition.ioSpecification.dataInputs);
   }
   dataInput = task.definition.ioSpecification.dataInputs.find(input => input.id === dataInputId);
@@ -164,13 +166,22 @@ export function getOrFindDataInput(moddle, task, sourceNode) {
   }
   inputSet = task.definition.ioSpecification.inputSets[0];
   // Check if dataInputRef exists
-  const dataInputRef = inputSet.dataInputRefs.find(ref => ref.id === dataInputId);
+  const dataInputRef = inputSet.get('dataInputRefs').find(ref => ref.id === dataInputId);
   if (!dataInputRef) {
     inputSet.dataInputRefs.push(dataInput);
   }
   return dataInput;
 }
 
+export function findIOSpecificationOwner(ioSpec, modeler) {
+  const owner = ioSpec.$parent;
+  if (!owner) {
+    return modeler.nodes.find(node => node.definition.ioSpecification === ioSpec ||
+      node.definition.ioSpecification?.id === ioSpec.id
+    )?.definition;
+  }
+  return owner;
+}
 
 export function removeDataInput(task, sourceNode) {
   if (sourceNode.$type !== 'bpmn:DataObjectReference' && sourceNode.$type !== 'bpmn:DataStoreReference') {

package/src/components/hotkeys/copyPaste.js

@@ -1,13 +1,16 @@
 export default {
   methods: {
     copyPasteHandler(event, options) {
-      const isCopy = event.key === 'c';
-      const isPaste = event.key === 'v';
+      const node = event.target.nodeName.toLowerCase();
+      const isBody = node === 'body';
+      const key = event.key.toLowerCase();
+      const isCopy = key === 'c';
+      const isPaste = key === 'v';
 
-      if (isCopy && options.mod) {
+      if (isBody && isCopy && options.mod) {
         this.copy(event);
       }
-      if (isPaste && options.mod) {
+      if (isBody && isPaste && options.mod) {
         this.paste(event);
       }
     },

package/src/components/hotkeys/main.js

@@ -5,6 +5,11 @@ import moveShapeByKeypress from './moveWithArrowKeys';
 
 export default {
   mixins: [ZoomInOut, CopyPaste],
+  computed: {
+    clientLeftPaper() {
+      return store.getters.clientLeftPaper;
+    },
+  },
   mounted() {
     document.addEventListener('keydown', this.keydownListener);
     document.addEventListener('keyup', this.keyupListener);
@@ -45,7 +50,7 @@ export default {
             const scale = this.paperManager.scale;
             this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
           }
-          if (this.canvasDragPosition) {
+          if (this.canvasDragPosition && !this.clientLeftPaper) {
             this.paperManager.translate(
               event.offsetX - this.canvasDragPosition.x,
               event.offsetY - this.canvasDragPosition.y

package/src/components/inspectors/LoopCharacteristics.vue

@@ -115,6 +115,9 @@ export default {
         },
         loopMaximum: 0,
         loopCondition: null,
+        ioSpecification: {
+          dataInputs: [],
+        },
       },
       loopType: null,
       multiType: null,
@@ -218,7 +221,7 @@ export default {
     },
     getLoopDataOutputRef() {
       if (!this.local.loopCharacteristics || !this.local.loopCharacteristics.loopDataOutputRef) return null;
-      return this.local.ioSpecification.dataOutputs[0].name;
+      return this.local.ioSpecification?.dataOutputs[0].name;
     },
     setLoopDataOutputRef(value) {
       if (!this.local.ioSpecification) {
@@ -252,7 +255,7 @@ export default {
     },
     getLoopDataInputRef() {
       if (!this.local.loopCharacteristics || !this.local.loopCharacteristics.loopDataInputRef) return null;
-      return this.local.ioSpecification.dataInputs[0].name;
+      return this.local.ioSpecification?.dataInputs[0].name;
     },
     setLoopDataInputRef(value) {
       const dataDef = {

package/src/components/inspectors/process.js

@@ -1,6 +1,6 @@
 import idConfigSettings from './idConfigSettings';
 
-export default {
+const process = {
   id: 'processmaker-modeler-process',
   bpmnType: 'bpmn:Process',
   control: false,
@@ -38,3 +38,7 @@ export default {
     },
   ],
 };
+
+export const id = process.id;
+
+export default process;

package/src/components/modeler/Modeler.vue

@@ -139,12 +139,13 @@ import InspectorPanel from '@/components/inspectors/InspectorPanel';
 import undoRedoStore from '@/undoRedoStore';
 import { Linter } from 'bpmnlint';
 import linterConfig from '../../../.bpmnlintrc';
-import NodeIdGenerator from '../../NodeIdGenerator';
+import { getNodeIdGenerator } from '../../NodeIdGenerator';
 import Process from '../inspectors/process';
 import runningInCypressTest from '@/runningInCypressTest';
 import getValidationProperties from '@/targetValidationUtils';
 import MiniPaper from '@/components/miniPaper/MiniPaper';
 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 messageFlowId } from '../nodes/messageFlow/config';
@@ -167,6 +168,7 @@ import { removeNodeFlows, removeNodeMessageFlows, removeNodeAssociations, remove
 import { getInvalidNodes } from '@/components/modeler/modelerUtils';
 import { NodeMigrator } from '@/components/modeler/NodeMigrator';
 import addLoopCharacteristics from '@/setup/addLoopCharacteristics';
+import cloneSelection from '../../mixins/cloneSelection';
 
 import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/genericFlow';
 
@@ -190,9 +192,10 @@ export default {
       },
     },
   },
-  mixins: [hotkeys],
+  mixins: [hotkeys, cloneSelection],
   data() {
     return {
+      pasteInProgress: false,
       internalClipboard: [],
       tooltipTarget: null,
 
@@ -329,90 +332,51 @@ export default {
         dataOutputAssociationFlowId,
         dataInputAssociationFlowId,
         genericFlowId,
+        processId,
       ];
       if (this.highlightedNodes.length === 1 && flows.includes(this.highlightedNodes[0].type)) return;
       store.commit('setCopiedElements', this.cloneSelection());
       this.$bvToast.toast(this.$t('Object(s) have been copied'), { noCloseButton:true, variant: 'success', solid: true, toaster: 'b-toaster-top-center' });
     },
     async pasteElements() {
-      if (this.copiedElements) {
-        await this.addClonedNodes(this.copiedElements);
-        this.$refs.selector.selectElements(this.findViewElementsFromNodes(this.copiedElements));
-        store.commit('setCopiedElements', this.cloneSelection());
+      if (this.copiedElements && !this.pasteInProgress) {
+        this.pasteInProgress = true;
+        try {
+          await this.addClonedNodes(this.copiedElements);
+          await this.$nextTick();
+          await this.paperManager.awaitScheduledUpdates();
+          await this.$refs.selector.selectElements(this.findViewElementsFromNodes(this.copiedElements), true);
+          await this.$nextTick();
+          await store.commit('setCopiedElements', this.cloneSelection());
+          this.scrollToSelection();
+        } finally {
+          this.pasteInProgress = false;
+        }
       }
     },
-    cloneSelection() {
-      let clonedNodes = [], clonedFlows = [], originalFlows = [];
-      const nodes = this.highlightedNodes;
-      const selector = this.$refs.selector.$el;
-      const { height: sheight } = selector.getBoundingClientRect();
-      if (typeof selector.getBoundingClientRect === 'function') {
-        // get selector height
-        nodes.forEach(node => {
-          // Add flows described in the definitions property
-          if (node.definition.incoming || node.definition.outgoing) {
-            // Since both incoming and outgoing reference the same flow, any of them is copied
-            let flowsToCopy = [...(node.definition.incoming || node.definition.outgoing)];
-            // Check if flow is already in array before pushing
-            flowsToCopy.forEach(flow => {
-              if (!originalFlows.some(el => el.id === flow.id)) {
-                originalFlows.push(flow);
-              }
-            });
-          }
-
-          // Check node type to clone
-          if ([
-            sequenceFlowId,
-            laneId,
-            associationId,
-            messageFlowId,
-            dataOutputAssociationFlowId,
-            dataInputAssociationFlowId,
-            genericFlowId,
-          ].includes(node.type)) {
-            // Add offset for all waypoints on cloned flow
-            const clonedFlow = node.cloneFlow(this.nodeRegistry, this.moddle, this.$t);
-            clonedFlow.setIds(this.nodeIdGenerator);
-            clonedFlows.push(clonedFlow);
-            clonedNodes.push(clonedFlow);
-          } else {
-            // Clone node and calculate offset
-            const clonedNode = node.clone(this.nodeRegistry, this.moddle, this.$t);
-            const yOffset = sheight;
-            clonedNode.diagram.bounds.y += yOffset;
-            // Set cloned node id
-            clonedNode.setIds(this.nodeIdGenerator);
-            clonedNodes.push(clonedNode);
-          }
-        });
-      }
-      // Connect flows
-      clonedFlows.forEach(flow => {
-        // Look up the original flow
-        const flowClonedFrom = { definition: originalFlows.find(el => el.id === flow.definition.cloneOf) };
-        // Get the id's of the sourceRef and targetRef of original flow
-        const src = flowClonedFrom.definition.sourceRef;
-        const target = flowClonedFrom.definition.targetRef;
-        const srcClone = clonedNodes.find(node => node.definition.cloneOf === src.id);
-        const targetClone = clonedNodes.find(node => node.definition.cloneOf === target.id);
-        // Reference the elements to the flow that connects them
-        flow.definition.sourceRef = srcClone.definition;
-        flow.definition.targetRef = targetClone.definition;
-        // Reference the flow to the elements that are connected by it
-        srcClone.definition.outgoing ? srcClone.definition.outgoing.push(flow.definition) : srcClone.definition.outgoing = [flow.definition];
-        targetClone.definition.incoming ? targetClone.definition.incoming.push(flow.definition) : targetClone.definition.incoming = [flow.definition];
-        // Translate flow waypoints to where they should be
-        flow.diagram.waypoint.forEach(point => {
-          point.y += sheight;
-        });
-      });
-      return clonedNodes;
-    },
     async duplicateSelection() {
       const clonedNodes = this.cloneSelection();
+      if (clonedNodes && clonedNodes.length === 0) {
+        return;
+      }
+      this.$refs.selector.clearSelection();
       await this.addClonedNodes(clonedNodes);
-      this.$refs.selector.selectElements(this.findViewElementsFromNodes(clonedNodes));
+      await this.$nextTick();
+      await this.paperManager.awaitScheduledUpdates();
+      await this.$refs.selector.selectElements(this.findViewElementsFromNodes(clonedNodes));
+      this.scrollToSelection();
+    },
+    scrollToSelection() {
+      const containerRect = this.$refs['paper-container'].getBoundingClientRect();
+      const selector = this.$refs.selector;
+      const selectorRect = selector.$el.getBoundingClientRect();
+      // Scroll to the cloned elements only when they are not visible on the screen.
+      if (selectorRect.right > containerRect.right || selectorRect.bottom > containerRect.bottom || selectorRect.left < containerRect.left || selectorRect.top < containerRect.top) {
+        const currentPosition = this.paper.translate();
+        const newTy = currentPosition.ty - (selectorRect.top - containerRect.top - selectorRect.height);
+        this.paper.translate(currentPosition.tx, newTy);
+        selector.updateSelectionBox(true);
+      }
     },
     findViewElementsFromNodes(nodes) {
       return nodes.map(node => {
@@ -832,7 +796,7 @@ export default {
     async loadXML(xml = this.currentXML) {
       this.definitions = await this.xmlManager.getDefinitionsFromXml(xml);
       this.xmlManager.definitions = this.definitions;
-      this.nodeIdGenerator = new NodeIdGenerator(this.definitions);
+      this.nodeIdGenerator = getNodeIdGenerator(this.definitions);
       store.commit('clearNodes');
       this.renderPaper();
     },
@@ -974,7 +938,12 @@ export default {
       await this.pushToUndoStack();
     },
     async removeNode(node, { removeRelationships = true } = {}) {
+      if (!node) {
+        // already removed
+        return;
+      }
       if (removeRelationships) {
+
         removeNodeFlows(node, this);
         removeNodeMessageFlows(node, this);
         removeNodeAssociations(node, this);
@@ -1274,14 +1243,17 @@ export default {
       this.pointerUpHandler(event, cellView);
     }, this);
 
+    this.$el.addEventListener('mouseenter', () => {
+      store.commit('setClientLeftPaper', false);
+    });
+
     this.$el.addEventListener('mousemove', event => {
-      const { clientX, clientY } = event;
       this.pointerMoveHandler(event);
-      store.commit('setClientMousePosition', { clientX, clientY });
     });
 
     this.$el.addEventListener('mouseleave', () => {
-      store.commit('clientLeftPaper');
+      this.paperManager.removeEventHandler('blank:pointermove');
+      store.commit('setClientLeftPaper', true);
     });
 
     this.paperManager.addEventHandler('cell:pointerclick', (cellView, evt, x, y) => {

package/src/components/modeler/Selection.vue

@@ -29,13 +29,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 { labelWidth, poolPadding } from '../nodes/pool/poolSizes';
-const boundaryElements = [
-  'processmaker-modeler-boundary-timer-event',
-  'processmaker-modeler-boundary-error-event',
-  'processmaker-modeler-boundary-signal-event',
-  'processmaker-modeler-boundary-conditional-event',
-  'processmaker-modeler-boundary-message-event',
-];
+
 export default {
   name: 'Selection',
   components: {
@@ -351,24 +345,6 @@ export default {
         }
         return true;
       });
-      // A boundary event could only be selected alone
-      const firstSelectedBoundary = this.selected.find(shape => {
-        return shape.model.component &&
-          boundaryElements.includes(shape.model.component.node.type);
-      });
-      const firstSelectedElement = this.selected[0];
-      if (firstSelectedBoundary) {
-        this.selected = this.selected.filter(shape => {
-          if (firstSelectedElement === firstSelectedBoundary) {
-            // boundary event selected alone
-            return shape.model.component &&
-              shape === firstSelectedBoundary;
-          }
-          // do not allow to select a boundary event with another element
-          return shape.model.component &&
-            !boundaryElements.includes(shape.model.component.node.type);
-        });
-      }
     },
     /**
      * Pan paper handler
@@ -475,6 +451,9 @@ export default {
       this.$emit('save-state');
       this.dragging = false;
       this.stopForceMove = false;
+      // Readjusts the selection box, taking into consideration elements
+      // that are anchored and did not move, such as boundary events. 
+      this.updateSelectionBox();
     },
     /**
      * Translate the Selected shapes adding some custom validations

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

@@ -14,6 +14,9 @@ export default {
       associationDirection: `${direction.none}`,
     });
   },
+  diagram(moddle) {
+    return moddle.create('bpmndi:BPMNEdge');
+  },
   inspectorConfig: [
     {
       name: 'Data Association',

package/src/components/nodes/dataInputAssociation/dataInputAssociation.vue

@@ -21,7 +21,7 @@ import linkConfig from '@/mixins/linkConfig';
 import get from 'lodash/get';
 import associationHead from '!!url-loader!@/assets/association-head.svg';
 import CrownConfig from '@/components/crown/crownConfig/crownConfig';
-import { getOrFindDataInput, removeDataInput } from '@/components/crown/utils';
+import { getOrFindDataInput, removeDataInput, findIOSpecificationOwner } from '@/components/crown/utils';
 import { pull } from 'lodash';
 
 export default {
@@ -50,20 +50,38 @@ export default {
   },
   computed: {
     isValidConnection() {
-      const targetType = get(this.target, 'component.node.type');
+      const targetType = get(this.target, 'component.node.definition.$type');
 
       if (!targetType) {
         return false;
       }
 
-      /* A data input association can be connected to anything that isn't a data store or object or a start event */
-      const invalidTarget = this.targetNode.isBpmnType('bpmn:DataObjectReference', 'bpmn:DataStoreReference', 'bpmn:StartEvent');
+      const dataStoreValidTargets = [
+        'bpmn:Task',
+        'bpmn:SubProcess',
+        'bpmn:CallActivity',
+        'bpmn:ManualTask',
+        'bpmn:ScriptTask',
+        'bpmn:ServiceTask',
+      ];
+      const dataObjectValidTargets = [
+        'bpmn:Task',
+        'bpmn:SubProcess',
+        'bpmn:CallActivity',
+        'bpmn:ManualTask',
+        'bpmn:ScriptTask',
+        'bpmn:ServiceTask',
+        'bpmn:IntermediateThrowEvent',
+        'bpmn:EndEvent',
+      ];
 
-      if (invalidTarget) {
-        return false;
-      }
+      const sourceIsDataStore = this.sourceNode.definition.$type === 'bpmn:DataStoreReference';
+      const sourceIsDataObject = this.sourceNode.definition.$type === 'bpmn:DataObjectReference';
 
-      return true;
+      if (sourceIsDataStore && dataStoreValidTargets.includes(targetType)) {
+        return true;
+      }
+      return (sourceIsDataObject && dataObjectValidTargets.includes(targetType));
     },
   },
   methods: {
@@ -71,29 +89,16 @@ export default {
       if (this.node.dataAssociationProps) {
         return this.node.dataAssociationProps.sourceShape;
       }
-
-      const taskWithInputAssociation = this.graph.getElements().find(element => {
-        return element.component && element.component.node.definition.get('dataInputAssociations') &&
-            element.component.node.definition.get('dataInputAssociations')[0] === this.node.definition;
-      });
-
-      const dataObjectDefinition = taskWithInputAssociation.component.node.definition.get('dataInputAssociations')[0].sourceRef[0];
-
-      return this.graph.getElements().find(element => {
-        return element.component && element.component.node.definition === dataObjectDefinition;
-      });
+      const source = this.node.definition.sourceRef[0];
+      // find shape
+      const shape = this.graph.getElements().find(e=>e.component.node.definition === source);
+      return shape;
     },
     getTargetRef() {
       if (this.node.dataAssociationProps) {
         return this.node.dataAssociationProps.targetCoords;
       }
-
-      const taskWithInputAssociation = this.graph.getElements().find(element => {
-        return element.component && element.component.node.definition.get('dataInputAssociations') &&
-            element.component.node.definition.get('dataInputAssociations')[0] === this.node.definition;
-      });
-
-      return taskWithInputAssociation.component.node.definition;
+      return findIOSpecificationOwner(this.node.definition.targetRef.$parent, this.$parent);
     },
     updateRouter() {
       this.shape.router('normal', { elementPadding: this.elementPadding });
@@ -102,6 +107,7 @@ export default {
       const targetShape = this.shape.getTargetElement();
       const dataInput = getOrFindDataInput(this.moddle, targetShape.component.node, this.sourceNode.definition);
       this.node.definition.set('targetRef', dataInput);
+      // @todo Review why this needs to be and array. When saving the BPMN, if this is not an array the sourceRef is not stored
       this.node.definition.set('sourceRef', [this.sourceNode.definition]);
       targetShape.component.node.definition.set('dataInputAssociations', [this.node.definition]);
     },
@@ -129,6 +135,10 @@ export default {
     this.shape.component = this;
   },
   destroyed() {
+    // when a association was not completed this.targetNode will be undefined
+    if (!this.targetNode) {
+      return;
+    }
     removeDataInput(this.targetNode, this.sourceNode.definition);
     pull(this.targetNode.definition.get('dataInputAssociations'), this.node.definition);
   },