@processmaker/modeler 1.26.0 → 1.28.0

package/src/components/modeler/Selection.vue

@@ -29,6 +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';
+
 export default {
   name: 'Selection',
   components: {
@@ -85,6 +86,17 @@ export default {
     },
   },
   methods: {
+    async selectElements(elements) {
+      await this.$nextTick();
+      this.clearSelection();
+      this.selected = elements;
+      this.showLasso = true;
+      this.isSelected = true;
+      this.isSelecting = true;
+      this.start = null;
+      await this.$nextTick();
+      this.updateSelectionBox();
+    },
     /**
      * Select an element dinamically.
      * Shift key will manage the condition to push to selection
@@ -321,18 +333,17 @@ export default {
      * Filter the selected elements
      */
     filterSelected() {
-      // remove from selection the selected child nodes in the pool
+      // Get the selected pools IDs
       const selectedPoolsIds = this.selected
         .filter(shape => shape.model.component)
         .filter(shape => shape.model.component.node.type === 'processmaker-modeler-pool')
         .map(shape => shape.model.component.node.id);
+      // remove from selection the selected children that belongs to a selected pool
       this.selected = this.selected.filter(shape => {
         if (shape.model.component && shape.model.component.node.pool) {
           return shape.model.component.node.pool && !selectedPoolsIds.includes(shape.model.component.node.pool.component.node.id);
         }
         return true;
-      }).filter(shape => {
-        return !(shape.model.getParentCell() && shape.model.getParentCell().get('parent'));
       });
     },
     /**
@@ -377,7 +388,7 @@ export default {
       return shapes && selected.length === shapes.length;
     },
     /**
-     * Start the drag procedure for the selext box
+     * Start the drag procedure for the select box
      * @param {Object} event
      */
     startDrag(event) {
@@ -440,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);
   },

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

@@ -12,8 +12,60 @@ export default class DataOutputAssociation extends DataAssociation {
       return false;
     }
 
-    return DataAssociation.isADataNode(targetNode) &&
-      DataOutputAssociation.isValidSourceNode(sourceNode);
+    const dataStoreValidSources = [
+      'bpmn:Task',
+      'bpmn:SubProcess',
+      'bpmn:CallActivity',
+      'bpmn:ManualTask',
+      'bpmn:ScriptTask',
+      'bpmn:ServiceTask',
+    ];
+    const dataStoreValidTargets = [
+      'bpmn:Task',
+      'bpmn:SubProcess',
+      'bpmn:CallActivity',
+      'bpmn:ManualTask',
+      'bpmn:ScriptTask',
+      'bpmn:ServiceTask',
+    ];
+    const dataObjectValidSources = [
+      'bpmn:Task',
+      'bpmn:SubProcess',
+      'bpmn:CallActivity',
+      'bpmn:ManualTask',
+      'bpmn:ScriptTask',
+      'bpmn:ServiceTask',
+      'bpmn:IntermediateCatchEvent',
+      'bpmn:StartEvent',
+    ];
+    const dataObjectValidTargets = [
+      'bpmn:Task',
+      'bpmn:SubProcess',
+      'bpmn:CallActivity',
+      'bpmn:ManualTask',
+      'bpmn:ScriptTask',
+      'bpmn:ServiceTask',
+      'bpmn:IntermediateThrowEvent',
+      'bpmn:EndEvent',
+    ];
+
+    const sourceType = sourceNode.definition.$type;
+    const targetType = targetNode.definition.$type;
+    const sourceIsDataStore = sourceNode.definition.$type === 'bpmn:DataStoreReference';
+    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;
+    }
+    if (sourceIsDataObject && dataObjectValidTargets.includes(targetType)) {
+      return true;
+    }
+    if (targetIsDataStore && dataStoreValidSources.includes(sourceType)) {
+      return true;
+    }
+    return (targetIsDataObject && dataObjectValidSources.includes(sourceType));
   }
 
   makeFlowNode(sourceShape, targetShape, genericLink) {

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

@@ -86,23 +86,6 @@ export default {
     },
   },
   watch: {
-    'node.definition': {
-      handler() {
-        const newNameLabel = this.shapeName;
-
-        if (newNameLabel !== this.nameLabel) {
-          this.nameLabel = newNameLabel;
-        }
-        this.setDefaultMarker(this.isDefaultFlow());
-      },
-      deep: true,
-    },
-    'node.definition.sourceRef': {
-      handler() {
-        this.setDefaultMarker(this.isDefaultFlow());
-      },
-      deep: true,
-    },
   },
   methods: {
     completeLink() {

package/src/components/nodes/node.js

@@ -10,7 +10,8 @@ import cloneDeep from 'lodash/cloneDeep';
 
 export default class Node {
   static diagramPropertiesToCopy = ['x', 'y', 'width', 'height'];
-  static definitionPropertiesToNotCopy = ['$type', 'id'];
+  static definitionPropertiesToNotCopy = ['$type', 'id', 'dataOutputAssociations'];
+  static flowDefinitionPropertiesToNotCopy = ['$type', 'id', 'sourceRef', 'targetRef'];
   static eventDefinitionPropertiesToNotCopy = ['errorRef', 'messageRef'];
 
   type;
@@ -80,6 +81,70 @@ export default class Node {
       this.diagram.id = diagramId;
       this.diagram.bpmnElement = this.definition;
     }
+    if (this.definition.loopCharacteristics && this.definition.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
+      this.definition.loopCharacteristics.set('id', nodeIdGenerator.generate()[0]);
+      if (this.definition.loopCharacteristics.loopCondition) {
+        this.definition.loopCharacteristics.get('loopCondition').set('id', nodeIdGenerator.generate()[0]);
+      }
+    }
+    let dataInputRef, dataOutputRef;
+    if (this.definition.ioSpecification) {
+      this.definition.ioSpecification.set('id', nodeIdGenerator.generate()[0]);
+      const taskId = this.definition.id;
+      if (this.definition.ioSpecification.get('dataInputs')) {
+        this.definition.ioSpecification.get('dataInputs').forEach(dataInput => {
+          const id = dataInput.get('id');
+          if (id.substring(0, this.cloneOf.length) === this.cloneOf) {
+            dataInput.set('id', id.replace(this.cloneOf + '_', taskId + '_'));
+            dataInputRef = dataInput;
+          } else {
+            dataInput.set('id', nodeIdGenerator.generate()[0]);
+          }
+        });
+      }
+      if (this.definition.ioSpecification.get('dataOutputs')) {
+        this.definition.ioSpecification.get('dataOutputs').forEach(dataOutput => {
+          const id = dataOutput.get('id');
+          if (id.substring(0, this.cloneOf.length) === this.cloneOf) {
+            dataOutput.set('id', id.replace(this.cloneOf + '_', taskId + '_'));
+            dataOutputRef = dataOutput;
+          } else {
+            dataOutput.set('id', nodeIdGenerator.generate()[0]);
+          }
+        });
+      }
+      if (this.definition.ioSpecification.get('inputSets')) {
+        this.definition.ioSpecification.get('inputSets').forEach(inputSet => {
+          inputSet.set('id', nodeIdGenerator.generate()[0]);
+        });
+      }
+      if (this.definition.ioSpecification.get('outputSets')) {
+        this.definition.ioSpecification.get('outputSets').forEach(outputSet => {
+          outputSet.set('id', nodeIdGenerator.generate()[0]);
+        });
+      }
+    }
+    if (this.definition.loopCharacteristics && this.definition.loopCharacteristics.$type === 'bpmn:MultiInstanceLoopCharacteristics') {
+      this.definition.loopCharacteristics.set('id', nodeIdGenerator.generate()[0]);
+      if (this.definition.loopCharacteristics.loopCardinality) {
+        this.definition.loopCharacteristics.get('loopCardinality').set('id', nodeIdGenerator.generate()[0]);
+      }
+      if (this.definition.loopCharacteristics.loopDataInputRef && dataInputRef) {
+        this.definition.loopCharacteristics.set('loopDataInputRef', dataInputRef);
+      }
+      if (this.definition.loopCharacteristics.loopDataOutputRef && dataOutputRef) {
+        this.definition.loopCharacteristics.set('loopDataOutputRef', dataOutputRef);
+      }
+      if (this.definition.loopCharacteristics.inputDataItem) {
+        this.definition.loopCharacteristics.get('inputDataItem').set('id', nodeIdGenerator.generate()[0]);
+      }
+      if (this.definition.loopCharacteristics.outputDataItem) {
+        this.definition.loopCharacteristics.get('outputDataItem').set('id', nodeIdGenerator.generate()[0]);
+      }
+      if (this.definition.loopCharacteristics.completionCondition) {
+        this.definition.loopCharacteristics.get('completionCondition').set('id', nodeIdGenerator.generate()[0]);
+      }
+    }
   }
 
   clone(nodeRegistry, moddle, $t) {
@@ -89,6 +154,8 @@ export default class Node {
 
     clonedNode.id = null;
     clonedNode.pool = this.pool;
+    clonedNode.cloneOf = this.id;
+
     Node.diagramPropertiesToCopy.forEach(prop => clonedNode.diagram.bounds[prop] = this.diagram.bounds[prop]);
     Object.keys(this.definition).filter(key => !Node.definitionPropertiesToNotCopy.includes(key)).forEach(key => {
       const definition = this.definition.get(key);
@@ -96,7 +163,7 @@ export default class Node {
       if (key === 'eventDefinitions') {
         for (var i in clonedDefinition) {
           if (definition[i].signalRef && !clonedDefinition[i].signalRef) {
-            clonedDefinition[i].signalRef = { ...definition[i].signalRef };
+            clonedDefinition[i].set('signalRef', { ...definition[i].signalRef });
           }
         }
       }
@@ -112,6 +179,43 @@ export default class Node {
     return clonedNode;
   }
 
+  cloneFlow(nodeRegistry, moddle, $t) {
+    const definition = nodeRegistry[this.type].definition(moddle, $t);
+    const diagram = nodeRegistry[this.type].diagram(moddle);
+    const clonedFlow = new this.constructor(this.type, definition, diagram);
+
+    clonedFlow.id = null;
+    clonedFlow.pool = this.pool;
+    clonedFlow.cloneOf = this.id;
+    clonedFlow.diagram.waypoint = [];
+
+    this.diagram.waypoint.forEach(point => clonedFlow.diagram.waypoint.push(point));
+
+    Object.keys(this.definition).filter(key => !Node.flowDefinitionPropertiesToNotCopy.includes(key)).forEach(key => {
+      const definition = this.definition.get(key);
+      const clonedDefinition = typeof definition === 'object' ? cloneDeep(definition) : definition;
+      if (key === 'eventDefinitions') {
+        for (var i in clonedDefinition) {
+          if (definition[i].signalRef && !clonedDefinition[i].signalRef) {
+            clonedDefinition[i].set('signalRef', { ...definition[i].signalRef });
+          }
+        }
+      }
+      clonedFlow.definition.set(key, clonedDefinition);
+      clonedFlow.definition.set('sourceRef', null);
+      clonedFlow.definition.set('targetRef', null);
+    });
+
+    Node.eventDefinitionPropertiesToNotCopy.forEach(
+      prop => clonedFlow.definition.eventDefinitions &&
+        clonedFlow.definition.eventDefinitions[0] &&
+        clonedFlow.definition.eventDefinitions[0].hasOwnProperty(prop) &&
+        clonedFlow.definition.eventDefinitions[0].set(prop, null)
+    );
+
+    return clonedFlow;
+  }
+
   getTargetProcess(processes, processNode) {
     return this.pool
       ? processes.find(({ id }) => id === this.pool.component.node.definition.get('processRef').id)

package/src/components/toolbar/ToolBar.vue

@@ -101,7 +101,7 @@
               </span>
             </div>
             <a
-              class="btn btn-sm btn-primary mini-map-btn text-uppercase mx-2"
+              class="btn btn-sm btn-primary autosave-btn text-uppercase mx-2"
               data-test="publish-btn"
               :title="$t('Publish')"
               @click="$emit('saveBpmn')"
@@ -109,7 +109,7 @@
               {{ $t('Publish') }}
             </a>
             <a
-              class="btn btn-sm btn-link toolbar-item mini-map-btn text-black text-uppercase"
+              class="btn btn-sm btn-link toolbar-item autosave-btn text-black text-uppercase"
               data-test="close-btn"
               :title="$t('Close')"
               @click="$emit('close')"
@@ -117,9 +117,11 @@
               {{ $t('Close') }}
             </a>
             <EllipsisMenu
-              @navigate="onNavigate"
               :actions="ellipsisMenuActions"
               :divider="false"
+              @navigate="onNavigate"
+              @show="onShow"
+              @hide="onHide"
             />
           </template>
           <b-button
@@ -258,6 +260,18 @@ export default {
           break;
       }
     },
+    onShow() {
+      const inspectorDiv = document.getElementById('inspector');
+      if (inspectorDiv) {
+        inspectorDiv.style.zIndex = '1';
+      }
+    },
+    onHide() {
+      const inspectorDiv = document.getElementById('inspector');
+      if (inspectorDiv) {
+        inspectorDiv.style.zIndex = '2';
+      }
+    },
   },
 };
 </script>

package/src/components/toolbar/breadcrumb/Breadcrumb.vue

@@ -19,3 +19,10 @@ export default {
   },
 };
 </script>
+<style lang="css" scoped>
+@media screen and (max-width: 1365px) {
+  #breadcrumbs {
+    width: 290px;
+  }
+}
+</style>

package/src/components/toolbar/toolbar.scss

@@ -27,3 +27,14 @@ $toolbar-background-color: #fff;
 .cursor-default {
   cursor: default !important;
 }
+
+.autosave-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-ellipsis {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}

package/src/mixins/cloneSelection.js

@@ -0,0 +1,145 @@
+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 messageFlowId } from '../components/nodes/messageFlow/config';
+import { id as dataOutputAssociationFlowId } from '../components/nodes/dataOutputAssociation/config';
+import { id as dataInputAssociationFlowId } from '../components/nodes/dataInputAssociation/config';
+import { id as genericFlowId } from '../components/nodes/genericFlow/config';
+import { getOrFindDataInput, findIOSpecificationOwner } from '../components/crown/utils';
+
+export default {
+  methods: {
+    cloneSelection() {
+      let clonedNodes = [], clonedFlows = [], clonedDataInputAssociations = [], clonedDataOutputAssociations = [];
+      const nodes = this.highlightedNodes;
+      const selector = this.$refs.selector.$el;
+      const flowNodeTypes = [
+        sequenceFlowId,
+        laneId,
+        associationId,
+        messageFlowId,
+        genericFlowId,
+      ];
+      const dataInputAssociationNodeTypes = [
+        dataInputAssociationFlowId,
+      ];
+      const dataOutputAssociationNodeTypes = [
+        dataOutputAssociationFlowId,
+      ];
+
+      if (typeof selector.getBoundingClientRect === 'function') {
+        nodes.forEach(node => {
+          if (flowNodeTypes.includes(node.type)) {
+            const clonedFlow = this.cloneFlowAndSetNewId(node);
+            clonedFlows.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else if (dataInputAssociationNodeTypes.includes(node.type)) {
+            const clonedFlow = this.cloneFlowAndSetNewId(node);
+            clonedDataInputAssociations.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else if (dataOutputAssociationNodeTypes.includes(node.type)) {
+            const clonedFlow = this.cloneFlowAndSetNewId(node);
+            clonedDataOutputAssociations.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else {
+            const clonedElement = this.cloneElementAndCalculateOffset(node);
+            clonedNodes.push(clonedElement);
+          }
+        });
+      }
+
+      this.connectClonedFlows(clonedFlows, clonedNodes);
+      this.connectClonedDataInputAssociations(clonedDataInputAssociations, clonedNodes);
+      this.connectClonedDataOutputAssociations(clonedDataOutputAssociations, clonedNodes);
+
+      return clonedNodes;
+    },
+    // Returns the Flow Element (Task| DataStore| DataObject)  that is the target of the association
+    getDataInputOutputAssociationTargetRef(association) {
+      if (association.targetRef.$type === 'bpmn:DataInput') {
+        const ioSpec = association.targetRef.$parent;
+        return findIOSpecificationOwner(ioSpec, this);
+      }
+      if (association.targetRef.$type === 'bpmn:DataInputAssociation') {
+        const ioSpec = association.targetRef.$parent;
+        return findIOSpecificationOwner(ioSpec, this);
+      }
+      return association.targetRef;
+    },
+    cloneFlowAndSetNewId(node) {
+      const clonedFlow = node.cloneFlow(this.nodeRegistry, this.moddle, this.$t);
+      clonedFlow.setIds(this.nodeIdGenerator);
+      return clonedFlow;
+    },
+    cloneElementAndCalculateOffset(node) {
+      const clonedElement = node.clone(this.nodeRegistry, this.moddle, this.$t);
+      const { height: selectorHeight } = this.$refs.selector.$el.getBoundingClientRect();
+      const { sy } = this.paper.scale();
+      const yOffset = selectorHeight / sy;
+      clonedElement.diagram.bounds.y += yOffset;
+      clonedElement.setIds(this.nodeIdGenerator);
+      return clonedElement;
+    },
+    connectClonedFlows(clonedFlows, clonedNodes) {
+      clonedFlows.forEach(clonedFlow => {
+        const originalFlow = this.nodes.find(node => node.definition.id === clonedFlow.cloneOf);
+        const src = originalFlow.definition.sourceRef;
+        const target = originalFlow.definition.targetRef;
+        const srcClone = clonedNodes.find(node => node.cloneOf === src.id);
+        const targetClone = clonedNodes.find(node => node.cloneOf === target.id);
+        if (!srcClone || !targetClone) {
+          clonedNodes.splice(clonedNodes.indexOf(clonedFlow), 1);
+          return;
+        }
+        clonedFlow.definition.set('sourceRef', srcClone.definition);
+        clonedFlow.definition.set('targetRef', targetClone.definition);
+
+        if (srcClone.definition.outgoing) {
+          srcClone.definition.outgoing.push(clonedFlow.definition);
+        } else {
+          srcClone.definition.set('outgoing', [clonedFlow.definition]);
+        }
+
+        if (targetClone.definition.incoming) {
+          targetClone.definition.incoming.push(clonedFlow.definition);
+        } else {
+          targetClone.definition.set('incoming', [clonedFlow.definition]);
+        }
+
+        clonedFlow.diagram.waypoint.forEach(point => {
+          const { height: selectorHeight } = this.$refs.selector.$el.getBoundingClientRect();
+          point.y += selectorHeight;
+        });
+      });
+    },
+    connectClonedDataInputAssociations(clonedDataInputAssociations, clonedNodes) {
+      clonedDataInputAssociations.forEach(clonedAssociation => {
+        const originalAssociation = this.nodes.find(node => node.definition.id === clonedAssociation.cloneOf);
+        const src = originalAssociation.definition.sourceRef[0];
+        const srcClone = clonedNodes.find(node => node.cloneOf === src.id);
+        const originalTargetElement = this.getDataInputOutputAssociationTargetRef(originalAssociation.definition);
+        const clonedElement = clonedNodes.find(node => node.cloneOf === originalTargetElement.id);
+        const clonedDataInput = getOrFindDataInput(this.moddle, clonedElement, srcClone.definition);
+
+        clonedAssociation.definition.set('sourceRef', [srcClone.definition]);
+        clonedAssociation.definition.set('targetRef', clonedDataInput);
+        clonedElement.definition.set('dataInputAssociations', [clonedAssociation.definition]);
+      });
+    },
+    connectClonedDataOutputAssociations(clonedDataOutputAssociations, clonedNodes) {
+      clonedDataOutputAssociations.forEach(clonedAssociation => {
+        const originalAssociation = this.nodes.find(node => node.definition.id === clonedAssociation.cloneOf);
+        const src = originalAssociation.definition.sourceRef || originalAssociation.definition.$parent;
+        const target = originalAssociation.definition.targetRef;
+        const srcClone = clonedNodes.find(node => node.cloneOf === src.id);
+        const targetClone = clonedNodes.find(node => node.cloneOf === target.id);
+
+        clonedAssociation.definition.set('targetRef', targetClone.definition);
+        clonedAssociation.definition.set('sourceRef', srcClone.definition);
+
+        const existingOutputAssociations = srcClone.definition.get('dataOutputAssociations') || [];
+        srcClone.definition.set('dataOutputAssociations', [...existingOutputAssociations, clonedAssociation.definition]);
+      });
+    },
+  },
+};

package/src/mixins/linkConfig.js

@@ -78,7 +78,7 @@ export default {
       });
     },
     setEndpoint(shape, endpoint, connectionOffset) {
-      if (isPoint(shape)) {
+      if (shape && isPoint(shape)) {
         return this.shape[endpoint](shape, {
           anchor: {
             name: 'modelCenter',
@@ -253,6 +253,9 @@ export default {
       ? this.getTargetRef()
       : this.node.definition.get('targetRef');
 
+    // if flow doesn't have a targetRef such as incomplete node, return
+    if (!targetRef) return;
+
     if (targetRef.id) {
       const targetShape = this.graph.getElements().find(element => {
         return element.component && element.component.node.definition === targetRef;