feat: defer display until layout provides position (#509)

swimlane · Jun 30, 2023 · 0dfd112 · 0dfd112
1 parent 7fe3b4c
commit 0dfd112
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/projects/swimlane/ngx-graph/src/lib/graph/graph.component.html b/projects/swimlane/ngx-graph/src/lib/graph/graph.component.html
@@ -46,7 +46,7 @@
           (click)="onClick(node)"
         >
           <ng-container
-            *ngIf="clusterTemplate"
+            *ngIf="clusterTemplate && !node.hidden"
             [ngTemplateOutlet]="clusterTemplate"
             [ngTemplateOutletContext]="{ $implicit: node }"
           ></ng-container>
@@ -75,7 +75,7 @@
           (mousedown)="onNodeMouseDown($event, node)"
         >
           <ng-container
-            *ngIf="nodeTemplate"
+            *ngIf="nodeTemplate && !node.hidden"
             [ngTemplateOutlet]="nodeTemplate"
             [ngTemplateOutletContext]="{ $implicit: node }"
           ></ng-container>
@@ -115,7 +115,7 @@
           (mousedown)="onNodeMouseDown($event, node)"
         >
           <ng-container
-            *ngIf="nodeTemplate"
+            *ngIf="nodeTemplate && !node.hidden"
             [ngTemplateOutlet]="nodeTemplate"
             [ngTemplateOutletContext]="{ $implicit: node }"
           ></ng-container>

diff --git a/projects/swimlane/ngx-graph/src/lib/graph/graph.component.ts b/projects/swimlane/ngx-graph/src/lib/graph/graph.component.ts
@@ -104,6 +104,7 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
   @Input() scheme: any = 'cool';
   @Input() customColors: any;
   @Input() animations: boolean = true;
+  @Input() deferDisplayUntilPosition: boolean = false;
   @Output() select = new EventEmitter();
 
   @Output() activate: EventEmitter<any> = new EventEmitter();
@@ -368,6 +369,9 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
           x: 0,
           y: 0
         };
+        if (this.deferDisplayUntilPosition) {
+          n.hidden = true;
+        }
       }
 
       n.data = n.data ? n.data : {};
@@ -435,6 +439,9 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
         n.data = {};
       }
       n.data.color = this.colors.getColor(this.groupResultsBy(n));
+      if (this.deferDisplayUntilPosition) {
+        n.hidden = false;
+      }
       oldNodes.add(n.id);
     });
 

diff --git a/projects/swimlane/ngx-graph/src/lib/models/node.model.ts b/projects/swimlane/ngx-graph/src/lib/models/node.model.ts
@@ -18,6 +18,7 @@ export interface Node {
   meta?: any;
   layoutOptions?: any;
   parentId?: string;
+  hidden?: boolean;
 }
 
 export interface ClusterNode extends Node {