perf: only trigger change detection if there are output subscribers

mattlewis92 · Nov 21, 2020 · 930de54 · 930de54
1 parent 947ad53
commit 930de54
Showing 1 changed file with 33 additions and 28 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -657,17 +657,18 @@ export class ResizableDirective implements OnInit, OnChanges, OnDestroy {
           );
         }
 
-        this.zone.run(() => {
-          this.resizing.emit({
-            edges: getEdgesDiff({
-              edges: currentResize!.edges,
-              initialRectangle: currentResize!.startingRect,
-              newRectangle: newBoundingRect
-            }),
-            rectangle: newBoundingRect
+        if (this.resizing.observers.length > 0) {
+          this.zone.run(() => {
+            this.resizing.emit({
+              edges: getEdgesDiff({
+                edges: currentResize!.edges,
+                initialRectangle: currentResize!.startingRect,
+                newRectangle: newBoundingRect
+              }),
+              rectangle: newBoundingRect
+            });
           });
-        });
-
+        }
         currentResize!.currentRect = newBoundingRect;
       });
 
@@ -758,33 +759,37 @@ export class ResizableDirective implements OnInit, OnChanges, OnDestroy {
           currentResize.clonedNode!.scrollLeft = currentResize.startingRect
             .scrollLeft as number;
         }
-        this.zone.run(() => {
-          this.resizeStart.emit({
-            edges: getEdgesDiff({
-              edges,
-              initialRectangle: startingRect,
-              newRectangle: startingRect
-            }),
-            rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
+        if (this.resizeStart.observers.length > 0) {
+          this.zone.run(() => {
+            this.resizeStart.emit({
+              edges: getEdgesDiff({
+                edges,
+                initialRectangle: startingRect,
+                newRectangle: startingRect
+              }),
+              rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
+            });
           });
-        });
+        }
       });
 
     mouseup$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       if (currentResize) {
         this.renderer.removeClass(this.elm.nativeElement, RESIZE_ACTIVE_CLASS);
         this.renderer.setStyle(document.body, 'cursor', '');
         this.renderer.setStyle(this.elm.nativeElement, 'cursor', '');
-        this.zone.run(() => {
-          this.resizeEnd.emit({
-            edges: getEdgesDiff({
-              edges: currentResize!.edges,
-              initialRectangle: currentResize!.startingRect,
-              newRectangle: currentResize!.currentRect
-            }),
-            rectangle: currentResize!.currentRect
+        if (this.resizeEnd.observers.length > 0) {
+          this.zone.run(() => {
+            this.resizeEnd.emit({
+              edges: getEdgesDiff({
+                edges: currentResize!.edges,
+                initialRectangle: currentResize!.startingRect,
+                newRectangle: currentResize!.currentRect
+              }),
+              rectangle: currentResize!.currentRect
+            });
           });
-        });
+        }
         removeGhostElement();
         currentResize = null;
       }