spt-62362: Resize graph on container resize

Author: hemanth-r

projects/swimlane/ngx-graph/src/lib/graph/graph.component.spec.ts

@@ -1548,3 +1548,117 @@ describe('GraphComponent snapAddedNodeIds before resetToPrevious', () => {
     expect(parsed.ty).toBeCloseTo(120, 5);
   }));
 });
+
+@Component({
+  selector: 'test-graph-container-resize-host',
+  template: `
+    <div class="graph-container" [style.width.px]="containerWidth" [style.height.px]="containerHeight">
+      <ngx-graph [nodes]="nodes" [links]="links" [layout]="syncLayout" [animate]="false"></ngx-graph>
+    </div>
+  `,
+  imports: [GraphComponent]
+})
+class TestGraphContainerResizeHostComponent {
+  syncLayout = new TestSyncLayout();
+  containerWidth = 600;
+  containerHeight = 400;
+  nodes: Node[] = [
+    { id: 'n1', label: 'A' },
+    { id: 'n2', label: 'B' }
+  ];
+  links: Edge[] = [{ id: 'e1', source: 'n1', target: 'n2' }];
+}
+
+@Component({
+  selector: 'test-graph-fixed-view-host',
+  template: `<ngx-graph [nodes]="nodes" [links]="links" [layout]="syncLayout" [view]="[800, 600]"></ngx-graph>`,
+  imports: [GraphComponent]
+})
+class TestGraphFixedViewHostComponent {
+  syncLayout = new TestSyncLayout();
+  nodes: Node[] = [{ id: 'n1', label: 'A' }];
+  links: Edge[] = [];
+}
+
+describe('GraphComponent container resize', () => {
+  let resizeObserverCallback: ResizeObserverCallback | undefined;
+  let OriginalResizeObserver: typeof ResizeObserver;
+
+  beforeEach(async () => {
+    OriginalResizeObserver = window.ResizeObserver;
+    resizeObserverCallback = undefined;
+    class ResizeObserverMock {
+      constructor(callback: ResizeObserverCallback) {
+        resizeObserverCallback = callback;
+      }
+      observe(): void {}
+      disconnect(): void {}
+      unobserve(): void {}
+    }
+    (window as any).ResizeObserver = ResizeObserverMock;
+
+    await TestBed.configureTestingModule({
+      imports: [TestGraphContainerResizeHostComponent, TestGraphFixedViewHostComponent],
+      providers: [LayoutService]
+    }).compileComponents();
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = OriginalResizeObserver;
+  });
+
+  it('refreshViewportDimensions updates width and height without re-running layout', fakeAsync(() => {
+    const fixture = TestBed.createComponent(TestGraphContainerResizeHostComponent);
+    fixture.detectChanges();
+    flush();
+    tick(16);
+    fixture.detectChanges();
+    flush();
+
+    const graph = fixture.debugElement.query(By.directive(GraphComponent)).componentInstance as GraphComponent;
+    const createGraphSpy = spyOn(graph, 'createGraph').and.callThrough();
+    spyOn(graph, 'getContainerDims').and.returnValue({ width: 960, height: 500 });
+
+    graph.refreshViewportDimensions();
+
+    expect(graph.width).toBe(960);
+    expect(graph.height).toBe(500);
+    expect(createGraphSpy).not.toHaveBeenCalled();
+  }));
+
+  it('observes the parent container and refreshes viewport dimensions on resize', fakeAsync(() => {
+    const fixture = TestBed.createComponent(TestGraphContainerResizeHostComponent);
+    fixture.detectChanges();
+    flush();
+    tick(16);
+    fixture.detectChanges();
+    flush();
+
+    expect(resizeObserverCallback).toBeDefined();
+
+    const graph = fixture.debugElement.query(By.directive(GraphComponent)).componentInstance as GraphComponent;
+    const createGraphSpy = spyOn(graph, 'createGraph').and.callThrough();
+    spyOn(graph, 'getContainerDims').and.returnValue({ width: 840, height: 400 });
+
+    resizeObserverCallback!([], {} as ResizeObserver);
+    tick(16);
+    fixture.detectChanges();
+
+    expect(graph.width).toBe(840);
+    expect(createGraphSpy).not.toHaveBeenCalled();
+  }));
+
+  it('refreshViewportDimensions is a no-op when [view] supplies explicit dimensions', fakeAsync(() => {
+    const fixture = TestBed.createComponent(TestGraphFixedViewHostComponent);
+    fixture.detectChanges();
+    flush();
+    tick(16);
+    fixture.detectChanges();
+    flush();
+
+    const graph = fixture.debugElement.query(By.directive(GraphComponent)).componentInstance as GraphComponent;
+    graph.refreshViewportDimensions();
+    expect(graph.width).toBe(800);
+    expect(graph.height).toBe(600);
+  }));
+});

projects/swimlane/ngx-graph/src/lib/graph/graph.component.ts

@@ -228,6 +228,8 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
   width: number;
   height: number;
   resizeSubscription: any;
+  private containerResizeObserver: ResizeObserver | null = null;
+  private containerResizeRafId: number | null = null;
   visibilityObserver: VisibilityObserver;
   private waitForGraphDims: ReturnType<typeof setInterval>;
   private destroy$ = new Subject<void>();
@@ -562,6 +564,7 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
    */
   ngAfterViewInit(): void {
     this.bindWindowResizeEvent();
+    this.bindContainerResizeEvent();
 
     // listen for visibility of the element for hidden by default scenario
     this.visibilityObserver = new VisibilityObserver(this.el, this.zone);
@@ -3494,6 +3497,43 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
     };
   }
 
+  /**
+   * Remeasures the parent container and updates SVG viewport size without re-running layout.
+   * Invoked automatically when the parent element resizes (e.g. side panels opening or closing).
+   */
+  public refreshViewportDimensions(): void {
+    if (this.view()) {
+      return;
+    }
+
+    const previousWidth = this.width;
+    const previousHeight = this.height;
+
+    this.basicUpdate();
+
+    if (this.width === previousWidth && this.height === previousHeight) {
+      return;
+    }
+
+    this.dims = calculateViewDimensions({
+      width: this.width,
+      height: this.height
+    });
+
+    this.updateTransform();
+
+    if (this.showMiniMap()) {
+      this.updateMinimap();
+    }
+
+    this.lastFullUpdateWidth = this.width;
+    this.lastFullUpdateHeight = this.height;
+
+    if (this.cd) {
+      this.cd.markForCheck();
+    }
+  }
+
   public basicUpdate(): void {
     const view = this.view();
     if (view) {
@@ -3587,6 +3627,41 @@ export class GraphComponent implements OnInit, OnChanges, OnDestroy, AfterViewIn
     if (this.resizeSubscription) {
       this.resizeSubscription.unsubscribe();
     }
+    if (this.containerResizeObserver) {
+      this.containerResizeObserver.disconnect();
+      this.containerResizeObserver = null;
+    }
+    if (this.containerResizeRafId != null) {
+      cancelAnimationFrame(this.containerResizeRafId);
+      this.containerResizeRafId = null;
+    }
+  }
+
+  private scheduleContainerResizeRefresh(): void {
+    if (this.containerResizeRafId != null) {
+      return;
+    }
+
+    this.containerResizeRafId = requestAnimationFrame(() => {
+      this.containerResizeRafId = null;
+      this.zone.run(() => this.refreshViewportDimensions());
+    });
+  }
+
+  private bindContainerResizeEvent(): void {
+    if (typeof ResizeObserver === 'undefined' || this.view()) {
+      return;
+    }
+
+    const parent = this.el.nativeElement.parentNode as HTMLElement | null;
+    if (!parent) {
+      return;
+    }
+
+    this.containerResizeObserver = new ResizeObserver(() => {
+      this.scheduleContainerResizeRefresh();
+    });
+    this.containerResizeObserver.observe(parent);
   }
 
   private bindWindowResizeEvent(): void {