pipeline-builder-demo/src/app/right-editor/resizer/resizer.component.ts

Pipeline Builder

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'pb-resizer',
  host: {
    '(document:mousemove)': 'onResize($event)',
    '(document:mouseup)': 'onResizeEnd($event)',
  },
  templateUrl: './resizer.component.html',
  styleUrls: ['./resizer.component.scss']
})
export class ResizerComponent {
  @Input() target: HTMLElement;
  @Input() readonly minTargetWidth?: number;
  @Input() readonly flexAfter?: number;
  @Output() flex = new EventEmitter<boolean>();

  private _resizingEditor: boolean;
  private _startTargetWidth: number;
  private _startX: number;


  constructor() {  }

  onResizeStart = (event: MouseEvent) => {
    this._resizingEditor = true;
    this._startX = this._getClientX(event);
    this._startTargetWidth = this.target.clientWidth;

    if (event.stopPropagation) event.stopPropagation();
    if (event.preventDefault) event.preventDefault();
    event.cancelBubble = true;
    event.returnValue = false;
  };

  onResize = (event: MouseEvent) => {
    if (!this._resizingEditor) { return; }
    let offset = this._startX - this._getClientX(event);
    let newTargetWidth = this._startTargetWidth + offset;

    this.flex.emit(newTargetWidth < this.flexAfter);

    if (newTargetWidth < this.minTargetWidth || newTargetWidth > this._getMaxTargetWidth()) { return; }

    this.target.style.width = newTargetWidth + 'px';
  };

  onResizeEnd = () => {
    this._resizingEditor = false;
  };

  private _getClientX(event: MouseEvent | TouchEvent) {
    if (event instanceof TouchEvent)
      return (<TouchEvent>event).touches[0].clientX;
    else
      return (<MouseEvent>event).clientX;
  };

  private _getMaxTargetWidth = () => {
    let newMaxWidth: number = window.screen.width / 2;

    if (newMaxWidth < this.minTargetWidth) {
      newMaxWidth = this.minTargetWidth;
    }
    return newMaxWidth;
  };
}