@processmaker/modeler 1.28.0 → 1.29.0

package/package.json

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

package/src/components/crown/crownButtons/{duplicateButton.vue → cloneButton.vue}

@@ -1,16 +1,17 @@
 <template>
   <crown-button
     v-if="node.isBpmnType(...validCopyElements)"
-    :title="$t('Duplicate Element')"
+    :title="$t('Clone Element')"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
-    aria-label="Duplicate Element"
-    data-test="duplicate-button"
+    aria-label="Clone Element"
+    data-test="clone-button"
     role="menuitem"
-    @click="duplicateElement"
+    @click="cloneElement"
   >
     <img
-      :src="duplicateIcon"
+      :src="cloneIcon"
       aria-hidden="true"
+      alt="Clone element icon"
     >
   </crown-button>
   
@@ -18,7 +19,7 @@
 
 <script>
 import CrownButton from '@/components/crown/crownButtons/crownButton';
-import duplicateIcon from '@/assets/copy-regular.svg';
+import cloneIcon from '@/assets/copy-regular.svg';
 import validCopyElements from '@/components/crown/crownButtons/validCopyElements';
 
 export default {
@@ -27,13 +28,13 @@ export default {
   data() {
     return {
       copyCount: 0,
-      duplicateIcon,
+      cloneIcon,
       validCopyElements,
     };
   },
   methods: {
-    duplicateElement() {
-      this.$emit('duplicate-element', this.node, ++this.copyCount);
+    cloneElement() {
+      this.$emit('clone-element', this.node, ++this.copyCount);
     },
   },
 };

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

@@ -50,7 +50,7 @@
       v-on="$listeners"
     />
 
-    <duplicate-button
+    <clone-button
       :node="node"
       v-on="$listeners"
     />
@@ -84,7 +84,7 @@ import GenericFlowButton from '@/components/crown/crownButtons/genericFlowButton
 import AssociationFlowButton from '@/components/crown/crownButtons/associationFlowButton';
 import DataAssociationFlowButton from '@/components/crown/crownButtons/dataAssociationFlowButton';
 import CopyButton from '@/components/crown/crownButtons/copyButton.vue';
-import DuplicateButton from '@/components/crown/crownButtons/duplicateButton.vue';
+import CloneButton from '@/components/crown/crownButtons/cloneButton.vue';
 import CrownDropdowns from '@/components/crown/crownButtons/crownDropdowns';
 import DefaultFlow from '@/components/crown/crownButtons/defaultFlowButton.vue';
 import poolLaneCrownConfig from '@/mixins/poolLaneCrownConfig';
@@ -101,7 +101,7 @@ export default {
     GenericFlowButton,
     AssociationFlowButton,
     CopyButton,
-    DuplicateButton,
+    CloneButton,
     DefaultFlow,
     DataAssociationFlowButton,
   },

package/src/components/crown/crownMultiselect/crownMultiselect.vue

@@ -8,7 +8,7 @@
     <slot />
 
     <button
-      v-for="button in buttons"
+      v-for="button in availableButtons"
       :key="button.label"
       :aria-label="button.label"
       class="btn"
@@ -30,6 +30,7 @@ import runningInCypressTest from '@/runningInCypressTest';
 export default {
   props: {
     paper: Object,
+    hasPools: Boolean,
   },
   data() {
     return {
@@ -42,18 +43,18 @@ export default {
       nodeToReplace: null,
       buttons: [
         {
-          label: 'Copy Seletion',
+          label: 'Copy Selection',
           icon: 'clipboard',
           testId: 'copy-button',
           role: 'menuitem',
           action: this.copySelection,
         },
         {
-          label: 'Duplicate Selection',
+          label: 'Clone Selection',
           icon: 'copy',
-          testId: 'duplicate-button',
+          testId: 'clone-button',
           role: 'menuitem',
-          action: this.duplicateSelection,
+          action: this.cloneSelection,
         },
         {
           label: 'Delete Element',
@@ -75,13 +76,25 @@ export default {
       return countSelected > 1;
     },
     highlightedShapes: () => store.getters.highlightedShapes,
+    availableButtons() {
+      const hasPoolsSelected = this.hasPools;
+      return this.buttons.filter(button => {
+        if (button.testId === 'copy-button') {
+          return !hasPoolsSelected;
+        }
+        if (button.testId === 'clone-button') {
+          return !hasPoolsSelected;
+        }
+        return true;
+      });
+    },
   },
   methods: {
     copySelection() {
       this.$emit('copy-selection');
     },
-    duplicateSelection() {
-      this.$emit('duplicate-selection');
+    cloneSelection() {
+      this.$emit('clone-selection');
     },
     deleteElement() {
       this.$emit('remove-nodes');

package/src/components/inspectors/DocumentationFormTextArea.vue

@@ -12,6 +12,7 @@
       data-test="documentation-text-area"
       id="documentation-editor"
       @input="$emit('input', $event)"
+      @blur="onBlur"
     />
 
     <b-modal
@@ -34,6 +35,7 @@
         data-test="documentation-modal-text-area"
         id="documentation-editor-modal"
         @input="$emit('input', $event)"
+        @blur="onBlur"
       />
     </b-modal>
   </div>
@@ -63,8 +65,10 @@ export default {
     },
   },
   methods: {
-    emitValue(value) {
-      this.$emit('input', value);
+    onBlur() {
+      // Update the undoStack when the Editor loses focus to trigger the autosave.
+      const child = this.$root.$children.find((c) => c.$refs.modeler);
+      child.$refs.modeler.pushToUndoStack();
     },
   },
 };

package/src/components/modeler/Modeler.vue

@@ -11,6 +11,7 @@
       @toggle-panels-compressed="panelsCompressed = !panelsCompressed"
       @toggle-mini-map-open="miniMapOpen = $event"
       @saveBpmn="saveBpmn"
+      @publishTemplate="publishTemplate"
       @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
@@ -63,7 +64,7 @@
         :parent-height="parentHeight"
         :canvas-drag-position="canvasDragPosition"
         :compressed="panelsCompressed && noElementsSelected"
-        @shape-resize="shapeResize"
+        @shape-resize="shapeResize(false)"
       />
 
       <component
@@ -105,8 +106,8 @@
         @copy-element="copyElement"
         @copy-selection="copyElement"
         @paste-element="pasteElements"
-        @duplicate-element="duplicateElement"
-        @duplicate-selection="duplicateSelection"
+        @clone-element="cloneElement"
+        @clone-selection="cloneSelection"
         @default-flow="toggleDefaultFlow"
         @shape-resize="shapeResize"
       />
@@ -116,7 +117,7 @@
         :graph="graph"
         :paperManager="paperManager"
         :useModelGeometry="false"
-        @duplicate-selection="duplicateSelection"
+        @clone-selection="cloneSelection"
         @remove-nodes="removeNodes"
         :processNode="processNode"
         @save-state="pushToUndoStack"
@@ -196,6 +197,7 @@ export default {
   data() {
     return {
       pasteInProgress: false,
+      cloneInProgress: false,
       internalClipboard: [],
       tooltipTarget: null,
 
@@ -306,10 +308,10 @@ export default {
     isAppleOS() {
       return typeof navigator !== 'undefined' && /Mac|iPad|iPhone/.test(navigator.platform);
     },
-    async shapeResize() {
+    async shapeResize(clearIfEmpty=true) {
       await this.$nextTick();
       await this.paperManager.awaitScheduledUpdates();
-      this.$refs.selector.updateSelectionBox(true);
+      this.$refs.selector.updateSelectionBox(true, clearIfEmpty);
     },
     toggleDefaultFlow(flow) {
       const source = flow.definition.sourceRef;
@@ -318,7 +320,7 @@ export default {
       }
       source.set('default', flow);
     },
-    duplicateElement(node, copyCount) {
+    cloneElement(node, copyCount) {
       const clonedNode = node.clone(this.nodeRegistry, this.moddle, this.$t);
       const yOffset = (node.diagram.bounds.height + 30) * copyCount;
 
@@ -335,11 +337,14 @@ export default {
         processId,
       ];
       if (this.highlightedNodes.length === 1 && flows.includes(this.highlightedNodes[0].type)) return;
-      store.commit('setCopiedElements', this.cloneSelection());
+      store.commit('setCopiedElements', this.cloneNodesSelection());
       this.$bvToast.toast(this.$t('Object(s) have been copied'), { noCloseButton:true, variant: 'success', solid: true, toaster: 'b-toaster-top-center' });
     },
+    publishTemplate() {
+      this.$emit('publishTemplate');
+    },
     async pasteElements() {
-      if (this.copiedElements && !this.pasteInProgress) {
+      if (this.copiedElements.length > 0 && !this.pasteInProgress) {
         this.pasteInProgress = true;
         try {
           await this.addClonedNodes(this.copiedElements);
@@ -347,24 +352,31 @@ export default {
           await this.paperManager.awaitScheduledUpdates();
           await this.$refs.selector.selectElements(this.findViewElementsFromNodes(this.copiedElements), true);
           await this.$nextTick();
-          await store.commit('setCopiedElements', this.cloneSelection());
+          await store.commit('setCopiedElements', this.cloneNodesSelection());
           this.scrollToSelection();
         } finally {
           this.pasteInProgress = false;
+          await this.pushToUndoStack();
         }
       }
     },
-    async duplicateSelection() {
-      const clonedNodes = this.cloneSelection();
+    async cloneSelection() {
+      const clonedNodes = this.cloneNodesSelection();
       if (clonedNodes && clonedNodes.length === 0) {
         return;
       }
-      this.$refs.selector.clearSelection();
-      await this.addClonedNodes(clonedNodes);
-      await this.$nextTick();
-      await this.paperManager.awaitScheduledUpdates();
-      await this.$refs.selector.selectElements(this.findViewElementsFromNodes(clonedNodes));
-      this.scrollToSelection();
+      try {
+        this.cloneInProgress = true;
+        this.$refs.selector.clearSelection();
+        await this.addClonedNodes(clonedNodes);
+        await this.$nextTick();
+        await this.paperManager.awaitScheduledUpdates();
+        await this.$refs.selector.selectElements(this.findViewElementsFromNodes(clonedNodes));
+        this.scrollToSelection();
+      } finally {
+        this.cloneInProgress = false;
+        await this.pushToUndoStack();
+      }
     },
     scrollToSelection() {
       const containerRect = this.$refs['paper-container'].getBoundingClientRect();
@@ -440,9 +452,12 @@ export default {
       }
     },
     async pushToUndoStack() {
+      if (this.pasteInProgress || this.cloneInProgress) {
+        return;
+      }
       try {
         const xml = await this.getXmlFromDiagram();
-        undoRedoStore.dispatch('pushState', xml);
+        await undoRedoStore.dispatch('pushState', xml);
         window.ProcessMaker.EventBus.$emit('modeler-change');
       } catch (invalidXml) {
         // eslint-disable-next-line no-console
@@ -793,12 +808,20 @@ export default {
       this.isRendering = false;
       this.$emit('parsed');
     },
-    async loadXML(xml = this.currentXML) {
+    async loadXML(xml = null) {
+      let emitChangeEvent = false;
+      if (xml === null) {
+        xml = this.currentXML;
+        emitChangeEvent = true;
+      }
       this.definitions = await this.xmlManager.getDefinitionsFromXml(xml);
       this.xmlManager.definitions = this.definitions;
       this.nodeIdGenerator = getNodeIdGenerator(this.definitions);
       store.commit('clearNodes');
-      this.renderPaper();
+      await this.renderPaper();
+      if (emitChangeEvent) {
+        window.ProcessMaker.EventBus.$emit('modeler-change');
+      }
     },
     getBoundaryEvents(process) {
       return process.get('flowElements').filter(({ $type }) => $type === 'bpmn:BoundaryEvent');
@@ -934,8 +957,6 @@ export default {
         store.commit('addNode', node);
         this.poolTarget = null;
       });
-
-      await this.pushToUndoStack();
     },
     async removeNode(node, { removeRelationships = true } = {}) {
       if (!node) {
@@ -958,10 +979,10 @@ export default {
       store.commit('highlightNode', this.processNode);
       this.$refs.selector.clearSelection();
       await this.$nextTick();
-      this.pushToUndoStack();
+      await this.pushToUndoStack();
     },
     async removeNodes() {
-      this.performSingleUndoRedoTransaction(async() => {
+      await this.performSingleUndoRedoTransaction(async() => {
         await this.paperManager.performAtomicAction(async() => {
           const waitPromises = [];
           this.highlightedNodes.forEach((node) =>
@@ -1004,7 +1025,7 @@ export default {
       undoRedoStore.commit('disableSavingState');
       await cb();
       undoRedoStore.commit('enableSavingState');
-      this.pushToUndoStack();
+      await this.pushToUndoStack();
     },
     removeNodesFromLane(node) {
       const containingLane = node.pool && node.pool.component.laneSet &&
@@ -1283,9 +1304,9 @@ export default {
 
     /* Register custom nodes */
     window.ProcessMaker.EventBus.$emit('modeler-start', {
-      loadXML: xml => {
-        this.loadXML(xml);
-        undoRedoStore.dispatch('pushState', xml);
+      loadXML: async(xml) => {
+        await this.loadXML(xml);
+        await undoRedoStore.dispatch('pushState', xml);
       },
       addWarnings: warnings => this.$emit('warnings', warnings),
       addBreadcrumbs: breadcrumbs => this.breadcrumbData.push(breadcrumbs),

package/src/components/modeler/Selection.vue

@@ -16,6 +16,7 @@
       :plane-elements="$parent.planeElements"
       :is-rendering="$parent.isRendering"
       :dropdown-data="[]"
+      :has-pools="hasPoolsOrLanesSelected"
       v-on="$listeners"
     />
   </div>
@@ -28,6 +29,11 @@ import CrownMultiselect from '@/components/crown/crownMultiselect/crownMultisele
 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 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 { labelWidth, poolPadding } from '../nodes/pool/poolSizes';
 
 export default {
@@ -79,6 +85,14 @@ export default {
     this.paperManager.paper.on('scale:changed ', this.updateSelectionBox);
     this.paperManager.paper.on('translate:changed ', this.translateChanged);
   },
+  computed: {
+    hasPoolsOrLanesSelected() {
+      return this.selected.some((view) => {
+        return view.model.component.node.type === poolId ||
+        view.model.component.node.type === laneId;
+      });
+    },
+  },
   watch: {
     // whenever selected changes
     selected(newSelected) {
@@ -312,7 +326,7 @@ export default {
     /**
      * Update the selection Box
      */
-    updateSelectionBox(force=false) {
+    updateSelectionBox(force=false, clearIfEmpty=true) {
       if (force || this.isSelecting && this.style) {
         if (this.selected.length > 0) {
           const box = this.getSelectionVertex(this.selected, false, true);
@@ -324,7 +338,7 @@ export default {
           // Set the dimensions of the element
           this.style.width = `${box.maxX - box.minX}px`;
           this.style.height = `${box.maxY - box.minY}px`;
-        } else {
+        } else if (clearIfEmpty) {
           this.clearSelection();
         }
       }
@@ -333,6 +347,13 @@ export default {
      * Filter the selected elements
      */
     filterSelected() {
+      const flowTypes = [
+        sequenceFlowId,
+        dataOutputAssociationFlowId,
+        dataInputAssociationFlowId,
+        associationId,
+        messageFlowId,
+      ];
       // Get the selected pools IDs
       const selectedPoolsIds = this.selected
         .filter(shape => shape.model.component)
@@ -343,6 +364,13 @@ export default {
         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);
         }
+        // remove from selection the selected flows that belongs to a selected pools
+        if (shape.model.component  && flowTypes.includes(shape.model.component.node.type)) {
+          const parent = shape.model.getParentCell();
+          if (parent.component && parent.component.node.pool) {
+            return !selectedPoolsIds.includes(parent.component.node.pool.component.node.id);
+          }
+        }
         return true;
       });
     },
@@ -615,7 +643,7 @@ export default {
     /**
      * Rollback drag an element outside it's pool parent
      */
-    rollbackSelection(){
+    async rollbackSelection(){
       const deltaX = this.initialPosition.left  - this.left;
       const deltaY = this.initialPosition.top - this.top;
       this.style.left = `${this.initialPosition.left}px`;
@@ -624,14 +652,18 @@ export default {
       const shapesToNotTranslate = [
         'PoolLane',
         'standard.Link',
+        'processmaker.components.nodes.boundaryEvent.Shape',
       ];
       this.selected.filter(shape => !shapesToNotTranslate.includes(shape.model.get('type')))
         .forEach(shape => {
           shape.model.translate(deltaX/scale.sx, deltaY/scale.sy);
         });
       this.isOutOfThePool = false;
-      store.commit('allowSavingElementPosition');
+      await store.commit('allowSavingElementPosition');
       this.paperManager.setStateValid();
+      await this.$nextTick();
+      await this.paperManager.awaitScheduledUpdates();
+      this.updateSelectionBox(true);
     },
     /**
      * Expand and fit the pool container

package/src/components/nodes/node.js

@@ -187,9 +187,17 @@ export default class Node {
     clonedFlow.id = null;
     clonedFlow.pool = this.pool;
     clonedFlow.cloneOf = this.id;
-    clonedFlow.diagram.waypoint = [];
+    clonedFlow.diagram = moddle.create('bpmndi:BPMNEdge', {
+      waypoint: [],
+    });
 
-    this.diagram.waypoint.forEach(point => clonedFlow.diagram.waypoint.push(point));
+    this.diagram.waypoint.forEach(point => {
+      const waypoint = moddle.create('dc:Point', {
+        x: point.x,
+        y: point.y,
+      });
+      clonedFlow.diagram.waypoint.push(waypoint);
+    });
 
     Object.keys(this.definition).filter(key => !Node.flowDefinitionPropertiesToNotCopy.includes(key)).forEach(key => {
       const definition = this.definition.get(key);

package/src/components/nodes/pool/poolEventHandlers.js

@@ -46,14 +46,6 @@ export default class PoolEventHandlers {
       return;
     }
 
-    if (this.previousValidPosition) {
-      this.draggingElement.position(this.previousValidPosition.x, this.previousValidPosition.y, { deep: true });
-      store.commit('updateNodeBounds', {
-        node: this.draggingElement.component.node,
-        bounds: this.previousValidPosition,
-      });
-    }
-
     if (this.invalidPool) {
       this.invalidPool.attr('body/fill', poolColor);
       this.invalidPool = null;
@@ -64,7 +56,6 @@ export default class PoolEventHandlers {
       this.component.moveElement(this.draggingElement, this.newPool);
       this.newPool = null;
     } else {
-      this.component.expandToFitElement(this.draggingElement, this.shape);
       this.component.laneSet && this.component.updateLaneChildren();
     }
 

package/src/components/toolbar/ToolBar.vue

@@ -101,7 +101,7 @@
               </span>
             </div>
             <a
-              class="btn btn-sm btn-primary autosave-btn text-uppercase mx-2"
+              class="btn btn-sm btn-primary btn-autosave 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 autosave-btn text-black text-uppercase"
+              class="btn btn-sm btn-link toolbar-item btn-autosave text-black text-uppercase"
               data-test="close-btn"
               :title="$t('Close')"
               @click="$emit('close')"
@@ -183,9 +183,6 @@ export default {
     canRedo() {
       return undoRedoStore.getters.canRedo;
     },
-    saved() {
-      return undoRedoStore.getters.saved;
-    },
     versionStatus() {
       const status = undoRedoStore.getters.isDraft ? 'Draft' : 'Published';
       return this.$t(status);
@@ -227,6 +224,11 @@ export default {
           content: this.$t('Discard Draft'),
           icon: '',
         },
+        {
+          value: 'save-template',
+          content: this.$t('Save as Template'),
+          icon: '',
+        },
       ],
     };
   },
@@ -238,8 +240,7 @@ export default {
       }
       undoRedoStore
         .dispatch('undo')
-        .then(() => this.$emit('load-xml'))
-        .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
+        .then(() => this.$emit('load-xml'));
     },
     redo() {
       this.$emit('clearSelection');
@@ -248,14 +249,16 @@ export default {
       }
       undoRedoStore
         .dispatch('redo')
-        .then(() => this.$emit('load-xml'))
-        .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
+        .then(() => this.$emit('load-xml'));
     },
     onNavigate(action) {
       switch (action.value) {
         case 'discard-draft':
           window.ProcessMaker.EventBus.$emit('open-versions-discard-modal');
           break;
+        case 'save-template':
+          this.$emit('publishTemplate');
+          break;
         default:
           break;
       }
@@ -273,6 +276,15 @@ export default {
       }
     },
   },
+  mounted() {
+    if (this.$root.$children[0].process.is_template) {
+      const indexOfActions = this.ellipsisMenuActions.findIndex(object => {
+        return object.value === 'save-template';
+      });
+
+      this.ellipsisMenuActions.splice(indexOfActions, 1);
+    }
+  },
 };
 </script>
 <style lang="scss" src="./toolbar.scss" />

package/src/components/toolbar/toolbar.scss

@@ -28,10 +28,11 @@ $toolbar-background-color: #fff;
   cursor: default !important;
 }
 
-.autosave-btn {
+.btn-autosave {
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: 4px !important;
 }
 
 .btn-ellipsis {

package/src/mixins/cloneSelection.js

@@ -9,8 +9,8 @@ import { getOrFindDataInput, findIOSpecificationOwner } from '../components/crow
 
 export default {
   methods: {
-    cloneSelection() {
-      let clonedNodes = [], clonedFlows = [], clonedDataInputAssociations = [], clonedDataOutputAssociations = [];
+    cloneNodesSelection() {
+      let clonedNodes = [], clonedFlows = [], clonedBoundaryEvents = [], clonedDataInputAssociations = [], clonedDataOutputAssociations = [];
       const nodes = this.highlightedNodes;
       const selector = this.$refs.selector.$el;
       const flowNodeTypes = [
@@ -42,12 +42,18 @@ export default {
             clonedDataOutputAssociations.push(clonedFlow);
             clonedNodes.push(clonedFlow);
           } else {
+            // Validate boundary events and collect in clonedBoundaryEvents array
             const clonedElement = this.cloneElementAndCalculateOffset(node);
-            clonedNodes.push(clonedElement);
+            if (node.definition && node.definition.$type !== 'bpmn:BoundaryEvent') {
+              clonedNodes.push(clonedElement);
+            }  else {
+              clonedBoundaryEvents.push(clonedElement);
+            }
           }
         });
       }
-
+      // Sets the clonedBoundaryEvents at the end of the array
+      clonedNodes = [...clonedNodes, ...clonedBoundaryEvents];
       this.connectClonedFlows(clonedFlows, clonedNodes);
       this.connectClonedDataInputAssociations(clonedDataInputAssociations, clonedNodes);
       this.connectClonedDataOutputAssociations(clonedDataOutputAssociations, clonedNodes);
@@ -106,9 +112,11 @@ export default {
           targetClone.definition.set('incoming', [clonedFlow.definition]);
         }
 
+        const { height: selectorHeight } = this.$refs.selector.$el.getBoundingClientRect();
+        const { sy } = this.paper.scale();
+        const yOffset = selectorHeight / sy;
         clonedFlow.diagram.waypoint.forEach(point => {
-          const { height: selectorHeight } = this.$refs.selector.$el.getBoundingClientRect();
-          point.y += selectorHeight;
+          point.y += yOffset;
         });
       });
     },