Class DDResizable

src/dd-resizable.ts:41–399

}

export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {
  /** @internal */
  protected handlers: DDResizableHandle[];
  /** @internal */
  protected originalRect: DOMRectReadOnly;
  /** @internal */
  protected rectScale: RectScaleReciprocal = { x: 1, y: 1 };
  /** @internal */
  protected temporalRect: TemporalRect;
  /** @internal */
  protected scrollY: number;
  /** @internal */
  protected scrolled: number;
  /** @internal */
  protected scrollEl: HTMLElement;
  /** @internal */
  protected startEvent: MouseEvent;
  /** @internal value saved in the same order as _originStyleProp[] */
  protected elOriginStyleVal: string[];
  /** @internal */
  protected parentOriginStylePosition: string;
  /** @internal */
  protected static _originStyleProp = ['width', 'height', 'position', 'left', 'right', 'top', 'opacity', 'zIndex'];
  /** @internal */
  protected sizeToContent: boolean;

  // have to be public else complains for HTMLElementExtendOpt ?
  constructor(public el: GridItemHTMLElement, public option: DDResizableOpt = {}) {
    super();
    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
    this._mouseOver = this._mouseOver.bind(this);
    this._mouseOut = this._mouseOut.bind(this);
    this.enable();
    this._setupAutoHide(this.option.autoHide);
    this._setupHandlers();
  }

  public on(event: 'resizestart' | 'resize' | 'resizestop', callback: (event: DragEvent) => void): void {
    super.on(event, callback);
  }

  public off(event: 'resizestart' | 'resize' | 'resizestop'): void {
    super.off(event);
  }

  public enable(): void {
    super.enable();
    this.el.classList.remove('ui-resizable-disabled');
    this._setupAutoHide(this.option.autoHide);
  }

  public disable(): void {
    super.disable();
    this.el.classList.add('ui-resizable-disabled');
    this._setupAutoHide(false);
  }

  public destroy(): void {