@HostListener('window:resize', ['$event'])
  onResize(event) {
    this.recalculateHelpersPosition(this.helpers);
  }

  ngOnChanges(changes) {
    if (changes.helperTags && Array.isArray(changes.helperTags.currentValue)) {
      this.recalculateHelpersPosition(changes.helperTags.currentValue);
    }
  }

  private recalculateHelpersPosition(input: HelperTag[]) {
    this.helpers = input.map(t => {
      const tagElement = document.getElementById(t.id);
      const rect = tagElement.getBoundingClientRect();
      const width = tagElement.clientWidth;
      const height = tagElement.clientHeight;
      const middleX = rect.left + (width / 2);
      const middleY = rect.top + (height / 2);

      switch (t.pos) {
        case HelperPosition.TOP:
          return {
            ...t,
            posX: middleX,
            posY: rect.top - height - PADDING
          } as HelperTagView;
          break;

        case HelperPosition.BOTTOM:
          return {
            ...t,
            posX: middleX,
            posY: rect.top + height + PADDING
          } as HelperTagView;
          break;

        case HelperPosition.LEFT:
          return {
            ...t,
            posX: rect.left - PADDING,
            posY: middleY
          } as HelperTagView;
          break;

        case HelperPosition.RIGHT:
        return {
            ...t,
            posX: rect.left + PADDING,
            posY: middleY
          } as HelperTagView;
          break;

        default:
        case HelperPosition.BOTTOM:
          return {
            ...t,
            posX: middleX,
            posY: rect.top + height + PADDING
          } as HelperTagView;
          break;
      }

    });
  }