Minor performance improvements

dist/ngx-flowchart/bundles/ngx-flowchart.umd.js

@@ -414,7 +414,7 @@
         }
         return BaseError;
     }());
-    BaseError.prototype = new Error();
+    Object.defineProperty(BaseError, 'prototype', new Error());
     var ModelvalidationError = /** @class */ (function (_super) {
         __extends(ModelvalidationError, _super);
         function ModelvalidationError(message) {
@@ -547,7 +547,7 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var FcModelService = /** @class */ (function () {
-        function FcModelService(modelValidation, model, modelChanged, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
+        function FcModelService(modelValidation, model, modelChanged, detectChangesSubject, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
             var _this = this;
             this.connectorsHtmlElements = {};
             this.nodesHtmlElements = {};
@@ -558,7 +558,7 @@
             this.modelValidation = modelValidation;
             this.model = model;
             this.modelChanged = modelChanged;
-            this.cd = cd;
+            this.detectChangesSubject = detectChangesSubject;
             this.canvasHtmlElement = canvasHtmlElement;
             this.svgHtmlElement = svgHtmlElement;
             this.modelValidation.validateModel(this.model);
@@ -616,7 +616,7 @@
              * @return {?}
              */
             function () {
-                _this.cd.detectChanges();
+                _this.detectChangesSubject.next();
             }), 0);
         };
         /**
@@ -943,23 +943,6 @@
             }
             return this.dragImage;
         };
-        /**
-         * @param {?} edgeAddedCallback
-         * @param {?} nodeRemovedCallback
-         * @param {?} edgeRemovedCallback
-         * @return {?}
-         */
-        FcModelService.prototype.registerCallbacks = /**
-         * @param {?} edgeAddedCallback
-         * @param {?} nodeRemovedCallback
-         * @param {?} edgeRemovedCallback
-         * @return {?}
-         */
-        function (edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback) {
-            this.edgeAddedCallback = edgeAddedCallback;
-            this.nodeRemovedCallback = nodeRemovedCallback;
-            this.edgeRemovedCallback = edgeRemovedCallback;
-        };
         return FcModelService;
     }());
     if (false) {
@@ -967,8 +950,11 @@
         FcModelService.prototype.modelValidation;
         /** @type {?} */
         FcModelService.prototype.model;
-        /** @type {?} */
+        /**
-        FcModelService.prototype.cd;
+         * @type {?}
+         * @private
+         */
+        FcModelService.prototype.detectChangesSubject;
         /** @type {?} */
         FcModelService.prototype.selectedObjects;
         /** @type {?} */
@@ -3311,6 +3297,7 @@
      */
     var NgxFlowchartComponent = /** @class */ (function () {
         function NgxFlowchartComponent(elementRef, differs, modelValidation, edgeDrawingService, cd, zone) {
+            var _this = this;
             this.elementRef = elementRef;
             this.differs = differs;
             this.modelValidation = modelValidation;
@@ -3336,8 +3323,15 @@
             function (index, item) {
                 return item;
             }));
+            this.detectChangesSubject = new rxjs.Subject();
             this.arrowDefId = 'arrow-' + Math.random();
             this.arrowDefIdSelected = this.arrowDefId + '-selected';
+            this.detectChangesSubject
+                .pipe(operators.debounceTime(50))
+                .subscribe((/**
+             * @return {?}
+             */
+            function () { return _this.cd.detectChanges(); }));
         }
         Object.defineProperty(NgxFlowchartComponent.prototype, "canvasClass", {
             get: /**
@@ -3403,7 +3397,7 @@
             this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
             /** @type {?} */
             var element = $(this.elementRef.nativeElement);
-            this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
+            this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.detectChangesSubject, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
             if (this.dropTargetId) {
                 this.modelService.dropTargetId = this.dropTargetId;
             }
@@ -3487,7 +3481,7 @@
                     this.adjustCanvasSize(this.fitModelSizeByDefault);
                 }
                 if (nodesChanged_1 || edgesChanged_1) {
-                    this.cd.detectChanges();
+                    this.detectChangesSubject.next();
                 }
             }
         };
@@ -3820,6 +3814,11 @@
          * @private
          */
         NgxFlowchartComponent.prototype.edgesDiffer;
+        /**
+         * @type {?}
+         * @private
+         */
+        NgxFlowchartComponent.prototype.detectChangesSubject;
         /**
          * @type {?}
          * @private

dist/ngx-flowchart/fesm2015/ngx-flowchart.js

@@ -216,7 +216,7 @@ class BaseError {
         Error.apply(this, arguments);
     }
 }
-BaseError.prototype = new Error();
+Object.defineProperty(BaseError, 'prototype', new Error());
 class ModelvalidationError extends BaseError {
     /**
      * @param {?} message
@@ -332,7 +332,7 @@ class FcModelService {
      * @param {?} modelValidation
      * @param {?} model
      * @param {?} modelChanged
-     * @param {?} cd
+     * @param {?} detectChangesSubject
      * @param {?} selectedObjects
      * @param {?} dropNode
      * @param {?} createEdge
@@ -342,7 +342,7 @@ class FcModelService {
      * @param {?} canvasHtmlElement
      * @param {?} svgHtmlElement
      */
-    constructor(modelValidation, model, modelChanged, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
+    constructor(modelValidation, model, modelChanged, detectChangesSubject, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
         this.connectorsHtmlElements = {};
         this.nodesHtmlElements = {};
         this.canvasHtmlElement = null;
@@ -352,7 +352,7 @@ class FcModelService {
         this.modelValidation = modelValidation;
         this.model = model;
         this.modelChanged = modelChanged;
-        this.cd = cd;
+        this.detectChangesSubject = detectChangesSubject;
         this.canvasHtmlElement = canvasHtmlElement;
         this.svgHtmlElement = svgHtmlElement;
         this.modelValidation.validateModel(this.model);
@@ -403,7 +403,7 @@ class FcModelService {
          * @return {?}
          */
         () => {
-            this.cd.detectChanges();
+            this.detectChangesSubject.next();
         }), 0);
     }
     /**
@@ -652,25 +652,17 @@ class FcModelService {
         }
         return this.dragImage;
     }
-    /**
-     * @param {?} edgeAddedCallback
-     * @param {?} nodeRemovedCallback
-     * @param {?} edgeRemovedCallback
-     * @return {?}
-     */
-    registerCallbacks(edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback) {
-        this.edgeAddedCallback = edgeAddedCallback;
-        this.nodeRemovedCallback = nodeRemovedCallback;
-        this.edgeRemovedCallback = edgeRemovedCallback;
-    }
 }
 if (false) {
     /** @type {?} */
     FcModelService.prototype.modelValidation;
     /** @type {?} */
     FcModelService.prototype.model;
-    /** @type {?} */
+    /**
-    FcModelService.prototype.cd;
+     * @type {?}
+     * @private
+     */
+    FcModelService.prototype.detectChangesSubject;
     /** @type {?} */
     FcModelService.prototype.selectedObjects;
     /** @type {?} */
@@ -2646,8 +2638,15 @@ class NgxFlowchartComponent {
         (index, item) => {
             return item;
         }));
+        this.detectChangesSubject = new Subject();
         this.arrowDefId = 'arrow-' + Math.random();
         this.arrowDefIdSelected = this.arrowDefId + '-selected';
+        this.detectChangesSubject
+            .pipe(debounceTime(50))
+            .subscribe((/**
+         * @return {?}
+         */
+        () => this.cd.detectChanges()));
     }
     /**
      * @return {?}
@@ -2690,7 +2689,7 @@ class NgxFlowchartComponent {
         this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
         /** @type {?} */
         const element = $(this.elementRef.nativeElement);
-        this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
+        this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.detectChangesSubject, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
         if (this.dropTargetId) {
             this.modelService.dropTargetId = this.dropTargetId;
         }
@@ -2771,7 +2770,7 @@ class NgxFlowchartComponent {
                 this.adjustCanvasSize(this.fitModelSizeByDefault);
             }
             if (nodesChanged || edgesChanged) {
-                this.cd.detectChanges();
+                this.detectChangesSubject.next();
             }
         }
     }
@@ -3030,6 +3029,11 @@ if (false) {
      * @private
      */
     NgxFlowchartComponent.prototype.edgesDiffer;
+    /**
+     * @type {?}
+     * @private
+     */
+    NgxFlowchartComponent.prototype.detectChangesSubject;
     /**
      * @type {?}
      * @private

dist/ngx-flowchart/fesm5/ngx-flowchart.js

@@ -218,7 +218,7 @@ var BaseError = /** @class */ (function () {
     }
     return BaseError;
 }());
-BaseError.prototype = new Error();
+Object.defineProperty(BaseError, 'prototype', new Error());
 var ModelvalidationError = /** @class */ (function (_super) {
     __extends(ModelvalidationError, _super);
     function ModelvalidationError(message) {
@@ -351,7 +351,7 @@ function fcTopSort(graph) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var FcModelService = /** @class */ (function () {
-    function FcModelService(modelValidation, model, modelChanged, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
+    function FcModelService(modelValidation, model, modelChanged, detectChangesSubject, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
         var _this = this;
         this.connectorsHtmlElements = {};
         this.nodesHtmlElements = {};
@@ -362,7 +362,7 @@ var FcModelService = /** @class */ (function () {
         this.modelValidation = modelValidation;
         this.model = model;
         this.modelChanged = modelChanged;
-        this.cd = cd;
+        this.detectChangesSubject = detectChangesSubject;
         this.canvasHtmlElement = canvasHtmlElement;
         this.svgHtmlElement = svgHtmlElement;
         this.modelValidation.validateModel(this.model);
@@ -420,7 +420,7 @@ var FcModelService = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            _this.cd.detectChanges();
+            _this.detectChangesSubject.next();
         }), 0);
     };
     /**
@@ -747,23 +747,6 @@ var FcModelService = /** @class */ (function () {
         }
         return this.dragImage;
     };
-    /**
-     * @param {?} edgeAddedCallback
-     * @param {?} nodeRemovedCallback
-     * @param {?} edgeRemovedCallback
-     * @return {?}
-     */
-    FcModelService.prototype.registerCallbacks = /**
-     * @param {?} edgeAddedCallback
-     * @param {?} nodeRemovedCallback
-     * @param {?} edgeRemovedCallback
-     * @return {?}
-     */
-    function (edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback) {
-        this.edgeAddedCallback = edgeAddedCallback;
-        this.nodeRemovedCallback = nodeRemovedCallback;
-        this.edgeRemovedCallback = edgeRemovedCallback;
-    };
     return FcModelService;
 }());
 if (false) {
@@ -771,8 +754,11 @@ if (false) {
     FcModelService.prototype.modelValidation;
     /** @type {?} */
     FcModelService.prototype.model;
-    /** @type {?} */
+    /**
-    FcModelService.prototype.cd;
+     * @type {?}
+     * @private
+     */
+    FcModelService.prototype.detectChangesSubject;
     /** @type {?} */
     FcModelService.prototype.selectedObjects;
     /** @type {?} */
@@ -3115,6 +3101,7 @@ if (false) {
  */
 var NgxFlowchartComponent = /** @class */ (function () {
     function NgxFlowchartComponent(elementRef, differs, modelValidation, edgeDrawingService, cd, zone) {
+        var _this = this;
         this.elementRef = elementRef;
         this.differs = differs;
         this.modelValidation = modelValidation;
@@ -3140,8 +3127,15 @@ var NgxFlowchartComponent = /** @class */ (function () {
         function (index, item) {
             return item;
         }));
+        this.detectChangesSubject = new Subject();
         this.arrowDefId = 'arrow-' + Math.random();
         this.arrowDefIdSelected = this.arrowDefId + '-selected';
+        this.detectChangesSubject
+            .pipe(debounceTime(50))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () { return _this.cd.detectChanges(); }));
     }
     Object.defineProperty(NgxFlowchartComponent.prototype, "canvasClass", {
         get: /**
@@ -3207,7 +3201,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
         this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
         /** @type {?} */
         var element = $(this.elementRef.nativeElement);
-        this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
+        this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.detectChangesSubject, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
         if (this.dropTargetId) {
             this.modelService.dropTargetId = this.dropTargetId;
         }
@@ -3291,7 +3285,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
                 this.adjustCanvasSize(this.fitModelSizeByDefault);
             }
             if (nodesChanged_1 || edgesChanged_1) {
-                this.cd.detectChanges();
+                this.detectChangesSubject.next();
             }
         }
     };
@@ -3624,6 +3618,11 @@ if (false) {
      * @private
      */
     NgxFlowchartComponent.prototype.edgesDiffer;
+    /**
+     * @type {?}
+     * @private
+     */
+    NgxFlowchartComponent.prototype.detectChangesSubject;
     /**
      * @type {?}
      * @private

dist/ngx-flowchart/lib/model.service.d.ts

@@ -1,11 +1,11 @@
 import { FcModelValidationService } from './modelvalidation.service';
 import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 export declare class FcModelService {
     modelValidation: FcModelValidationService;
     model: FcModel;
-    cd: ChangeDetectorRef;
+    private readonly detectChangesSubject;
     selectedObjects: any[];
     connectorsHtmlElements: HtmlElementMap;
     nodesHtmlElements: HtmlElementMap;
@@ -23,7 +23,7 @@ export declare class FcModelService {
     connectors: ConnectorsModel;
     nodes: NodesModel;
     edges: EdgesModel;
-    constructor(modelValidation: FcModelValidationService, model: FcModel, modelChanged: EventEmitter<any>, cd: ChangeDetectorRef, selectedObjects: any[], dropNode: (event: Event, node: FcNode) => void, createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>, edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void, canvasHtmlElement: HTMLElement, svgHtmlElement: SVGElement);
+    constructor(modelValidation: FcModelValidationService, model: FcModel, modelChanged: EventEmitter<any>, detectChangesSubject: Subject<any>, selectedObjects: any[], dropNode: (event: Event, node: FcNode) => void, createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>, edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void, canvasHtmlElement: HTMLElement, svgHtmlElement: SVGElement);
     notifyModelChanged(): void;
     detectChanges(): void;
     selectObject(object: any): void;
@@ -42,7 +42,6 @@ export declare class FcModelService {
     isEditable(): boolean;
     isDropSource(): boolean;
     getDragImage(): HTMLImageElement;
-    registerCallbacks(edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void): void;
 }
 interface HtmlElementMap {
     [id: string]: HTMLElement;

dist/ngx-flowchart/lib/ngx-flowchart.component.d.ts

@@ -63,6 +63,7 @@ export declare class NgxFlowchartComponent implements OnInit, DoCheck {
     };
     private nodesDiffer;
     private edgesDiffer;
+    private readonly detectChangesSubject;
     constructor(elementRef: ElementRef<HTMLElement>, differs: IterableDiffers, modelValidation: FcModelValidationService, edgeDrawingService: FcEdgeDrawingService, cd: ChangeDetectorRef, zone: NgZone);
     ngOnInit(): void;
     ngDoCheck(): void;

projects/ngx-flowchart/src/lib/model.service.ts

@@ -8,7 +8,7 @@ export class FcModelService {
 
   modelValidation: FcModelValidationService;
   model: FcModel;
-  cd: ChangeDetectorRef;
+  private readonly detectChangesSubject: Subject<any>;
   selectedObjects: any[];
 
   connectorsHtmlElements: HtmlElementMap = {};
@@ -35,7 +35,7 @@ export class FcModelService {
   constructor(modelValidation: FcModelValidationService,
               model: FcModel,
               modelChanged: EventEmitter<any>,
-              cd: ChangeDetectorRef,
+              detectChangesSubject: Subject<any>,
               selectedObjects: any[],
               dropNode: (event: Event, node: FcNode) => void,
               createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>,
@@ -48,7 +48,7 @@ export class FcModelService {
     this.modelValidation = modelValidation;
     this.model = model;
     this.modelChanged = modelChanged;
-    this.cd = cd;
+    this.detectChangesSubject = detectChangesSubject;
     this.canvasHtmlElement = canvasHtmlElement;
     this.svgHtmlElement = svgHtmlElement;
     this.modelValidation.validateModel(this.model);
@@ -75,7 +75,7 @@ export class FcModelService {
 
   public detectChanges() {
     setTimeout(() => {
-      this.cd.detectChanges();
+      this.detectChangesSubject.next();
     }, 0);
   }
 
@@ -231,15 +231,6 @@ export class FcModelService {
     }
     return this.dragImage;
   }
-
-  public registerCallbacks(edgeAddedCallback: (edge: FcEdge) => void,
-                           nodeRemovedCallback: (node: FcNode) => void,
-                           edgeRemovedCallback: (edge: FcEdge) => void) {
-    this.edgeAddedCallback = edgeAddedCallback;
-    this.nodeRemovedCallback = nodeRemovedCallback;
-    this.edgeRemovedCallback = edgeRemovedCallback;
-  }
-
 }
 
 interface HtmlElementMap { [id: string]: HTMLElement; }

projects/ngx-flowchart/src/lib/ngx-flowchart.component.ts

@@ -20,6 +20,8 @@ import { FcEdgeDraggingService } from './edge-dragging.service';
 import { FcMouseOverService } from './mouseover.service';
 import { FcRectangleSelectService } from './rectangleselect.service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 
 @Component({
   selector: 'fc-canvas',
@@ -96,6 +98,8 @@ export class NgxFlowchartComponent implements OnInit, DoCheck {
     return item;
   });
 
+  private readonly detectChangesSubject = new Subject<any>();
+
   constructor(private elementRef: ElementRef<HTMLElement>,
               private differs: IterableDiffers,
               private modelValidation: FcModelValidationService,
@@ -104,6 +108,9 @@ export class NgxFlowchartComponent implements OnInit, DoCheck {
               private zone: NgZone) {
     this.arrowDefId = 'arrow-' + Math.random();
     this.arrowDefIdSelected = this.arrowDefId + '-selected';
+    this.detectChangesSubject
+      .pipe(debounceTime(50))
+      .subscribe(() => this.cd.detectChanges());
   }
 
   ngOnInit() {
@@ -127,7 +134,8 @@ export class NgxFlowchartComponent implements OnInit, DoCheck {
 
     const element = $(this.elementRef.nativeElement);
 
-    this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects,
+    this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged,
+      this.detectChangesSubject, this.selectedObjects,
       this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved,
       this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
 
@@ -197,7 +205,7 @@ export class NgxFlowchartComponent implements OnInit, DoCheck {
         this.adjustCanvasSize(this.fitModelSizeByDefault);
       }
       if (nodesChanged || edgesChanged) {
-        this.cd.detectChanges();
+        this.detectChangesSubject.next();
       }
     }
   }

projects/ngx-flowchart/src/lib/ngx-flowchart.models.ts

@@ -131,7 +131,7 @@ class BaseError {
   }
 }
 
-BaseError.prototype = new Error();
+Object.defineProperty(BaseError, 'prototype', new Error());
 
 export class ModelvalidationError extends BaseError {
   constructor(public message: string) {