Skip to content

Commit

Permalink
perf: run all rezize events outside the angular zone
Browse files Browse the repository at this point in the history
  • Loading branch information
Matt Lewis committed Mar 4, 2017
1 parent f058271 commit 820612e
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 37 deletions.
57 changes: 35 additions & 22 deletions src/resizable.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
EventEmitter,
ContentChildren,
QueryList,
OnDestroy
OnDestroy,
NgZone
} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
Expand Down Expand Up @@ -249,7 +250,7 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
/**
* @private
*/
constructor(private renderer: Renderer, public elm: ElementRef) {}
constructor(private renderer: Renderer, public elm: ElementRef, private zone: NgZone) {}

/**
* @private
Expand Down Expand Up @@ -379,13 +380,15 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
this.renderer.setElementStyle(currentResize.clonedNode, 'left', `${newBoundingRect.left}px`);
}

this.resizing.emit({
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: newBoundingRect
}),
rectangle: newBoundingRect
this.zone.run(() => {
this.resizing.emit({
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: newBoundingRect
}),
rectangle: newBoundingRect
});
});

currentResize.currentRect = newBoundingRect;
Expand Down Expand Up @@ -423,22 +426,26 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
this.renderer.setElementStyle(currentResize.clonedNode, 'width', `${currentResize.startingRect.width}px`);
this.renderer.setElementStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
}
this.resizeStart.emit({
edges: getEdgesDiff({edges, initialRectangle: startingRect, newRectangle: startingRect}),
rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
this.zone.run(() => {
this.resizeStart.emit({
edges: getEdgesDiff({edges, initialRectangle: startingRect, newRectangle: startingRect}),
rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
});
});
});

this.mouseup.subscribe(() => {
if (currentResize) {
this.renderer.setElementClass(this.elm.nativeElement, RESIZE_ACTIVE_CLASS, false);
this.resizeEnd.emit({
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: currentResize.currentRect
}),
rectangle: currentResize.currentRect
this.zone.run(() => {
this.resizeEnd.emit({
edges: getEdgesDiff({
edges: currentResize.edges,
initialRectangle: currentResize.startingRect,
newRectangle: currentResize.currentRect
}),
rectangle: currentResize.currentRect
});
});
removeGhostElement();
currentResize = null;
Expand Down Expand Up @@ -471,7 +478,9 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
@HostListener('document:touchstart', ['$event.touches[0].clientX', '$event.touches[0].clientY'])
@HostListener('document:mousedown', ['$event.clientX', '$event.clientY'])
onMousedown(mouseX: number, mouseY: number): void {
this.mousedown.next({mouseX, mouseY});
this.zone.runOutsideAngular(() => {
this.mousedown.next({mouseX, mouseY});
});
}

/**
Expand All @@ -480,7 +489,9 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
@HostListener('document:touchmove', ['$event', '$event.targetTouches[0].clientX', '$event.targetTouches[0].clientY'])
@HostListener('document:mousemove', ['$event', '$event.clientX', '$event.clientY'])
onMousemove(event: any, mouseX: number, mouseY: number): void {
this.mousemove.next({mouseX, mouseY, event});
this.zone.runOutsideAngular(() => {
this.mousemove.next({mouseX, mouseY, event});
});
}

/**
Expand All @@ -490,7 +501,9 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
@HostListener('document:touchcancel', ['$event.changedTouches[0].clientX', '$event.changedTouches[0].clientY'])
@HostListener('document:mouseup', ['$event.clientX', '$event.clientY'])
onMouseup(mouseX: number, mouseY: number): void {
this.mouseup.next({mouseX, mouseY});
this.zone.runOutsideAngular(() => {
this.mouseup.next({mouseX, mouseY});
});
}

}
34 changes: 19 additions & 15 deletions src/resizeHandle.directive.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Directive, Input, HostListener, Renderer, ElementRef, OnDestroy } from '@angular/core';
import { Directive, Input, HostListener, Renderer, ElementRef, OnDestroy, NgZone } from '@angular/core';
import { Resizable } from './resizable.directive';
import { Edges } from './interfaces/edges.interface';

Expand Down Expand Up @@ -33,7 +33,7 @@ export class ResizeHandle implements OnDestroy {
mousemove?: Function
} = {};

constructor(private renderer: Renderer, private element: ElementRef) {}
constructor(private renderer: Renderer, private element: ElementRef, private zone: NgZone) {}

ngOnDestroy(): void {
this.unsubscribeEventListeners();
Expand All @@ -45,17 +45,19 @@ export class ResizeHandle implements OnDestroy {
@HostListener('touchstart', ['$event.touches[0].clientX', '$event.touches[0].clientY'])
@HostListener('mousedown', ['$event.clientX', '$event.clientY'])
onMousedown(mouseX: number, mouseY: number): void {
if (!this.eventListeners.touchmove) {
this.eventListeners.touchmove = this.renderer.listen(this.element.nativeElement, 'touchmove', (event: any) => {
this.onMousemove(event, event.targetTouches[0].clientX, event.targetTouches[0].clientY);
});
}
if (!this.eventListeners.mousemove) {
this.eventListeners.mousemove = this.renderer.listen(this.element.nativeElement, 'mousemove', (event: any) => {
this.onMousemove(event, event.clientX, event.clientY);
});
}
this.resizable.mousedown.next({mouseX, mouseY, edges: this.resizeEdges});
this.zone.runOutsideAngular(() => {
if (!this.eventListeners.touchmove) {
this.eventListeners.touchmove = this.renderer.listen(this.element.nativeElement, 'touchmove', (event: any) => {
this.onMousemove(event, event.targetTouches[0].clientX, event.targetTouches[0].clientY);
});
}
if (!this.eventListeners.mousemove) {
this.eventListeners.mousemove = this.renderer.listen(this.element.nativeElement, 'mousemove', (event: any) => {
this.onMousemove(event, event.clientX, event.clientY);
});
}
this.resizable.mousedown.next({mouseX, mouseY, edges: this.resizeEdges});
});
}

/**
Expand All @@ -65,8 +67,10 @@ export class ResizeHandle implements OnDestroy {
@HostListener('touchcancel', ['$event.changedTouches[0].clientX', '$event.changedTouches[0].clientY'])
@HostListener('mouseup', ['$event.clientX', '$event.clientY'])
onMouseup(mouseX: number, mouseY: number): void {
this.unsubscribeEventListeners();
this.resizable.mouseup.next({mouseX, mouseY, edges: this.resizeEdges});
this.zone.runOutsideAngular(() => {
this.unsubscribeEventListeners();
this.resizable.mouseup.next({mouseX, mouseY, edges: this.resizeEdges});
});
}

private onMousemove(event: any, mouseX: number, mouseY: number): void {
Expand Down

0 comments on commit 820612e

Please sign in to comment.