Reverted changes to position discovery

Author: lukasz-jazwa

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label/base-edge-label.component.ts

@@ -12,7 +12,7 @@ import {
   untracked,
 } from '@angular/core';
 import { EdgeLabel } from '../../../../core/src';
-import { BatchDomObserverService, FlowCoreProviderService } from '../../../services';
+import { BatchResizeObserverService, FlowCoreProviderService } from '../../../services';
 import { NgDiagramBaseEdgeComponent } from '../../edge/base-edge/base-edge.component';
 
 /**
@@ -47,7 +47,7 @@ export class NgDiagramBaseEdgeLabelComponent implements OnInit, OnDestroy {
   private readonly flowCoreProvider = inject(FlowCoreProviderService);
   private readonly hostElement = inject(ElementRef<HTMLElement>);
   private readonly edgeComponent = inject(NgDiagramBaseEdgeComponent);
-  private readonly batchDomObserver = inject(BatchDomObserverService);
+  private readonly batchResizeObserver = inject(BatchResizeObserverService);
 
   /**
    * The unique identifier for the edge label.
@@ -120,12 +120,11 @@ export class NgDiagramBaseEdgeLabelComponent implements OnInit, OnDestroy {
       positionOnEdge: this.positionOnEdge(),
     });
 
-    this.batchDomObserver.observeResize(this.hostElement.nativeElement, {
+    this.batchResizeObserver.observeResize(this.hostElement.nativeElement, {
       type: 'edge-label',
       edgeId: this.edgeId(),
       labelId: this.id(),
     });
-    this.batchDomObserver.observeStyle(this.hostElement.nativeElement);
   }
 
   /** @internal */
@@ -140,8 +139,7 @@ export class NgDiagramBaseEdgeLabelComponent implements OnInit, OnDestroy {
     }
 
     flowCore.updater.deleteEdgeLabel(this.edgeId(), this.id());
-    this.batchDomObserver.unobserveResize(this.hostElement.nativeElement);
-    this.batchDomObserver.unobserveStyle(this.hostElement.nativeElement);
+    this.batchResizeObserver.unobserveResize(this.hostElement.nativeElement);
   }
 }
 

packages/ng-diagram/projects/ng-diagram/src/lib/components/port/ng-diagram-port.component.ts

@@ -16,7 +16,7 @@ import {
 import { OriginPoint, Port } from '../../../core/src';
 import { LinkingInputDirective } from '../../directives/input-events/linking/linking.directive';
 import { FlowCoreProviderService } from '../../services';
-import { BatchDomObserverService } from '../../services/flow-resize-observer/batch-dom-observer.service';
+import { BatchResizeObserverService } from '../../services/flow-resize-observer/batched-resize-observer.service';
 import { NodeContextGuardBase } from '../../utils/node-context-guard.base';
 
 /**
@@ -67,7 +67,7 @@ const originPointClassMap: Record<OriginPoint, string> = {
 export class NgDiagramPortComponent extends NodeContextGuardBase implements OnInit, OnDestroy, AfterContentInit {
   private readonly hostElement = inject(ElementRef<HTMLElement>);
   private readonly flowCoreProvider = inject(FlowCoreProviderService);
-  private readonly batchDomObserver = inject(BatchDomObserverService);
+  private readonly batchResizeObserver = inject(BatchResizeObserverService);
   private readonly linkingInputDirective = inject(LinkingInputDirective);
   protected readonly isInitialized = signal(false);
   protected readonly lastSide = signal<Port['side'] | undefined>(undefined);
@@ -76,7 +76,7 @@ export class NgDiagramPortComponent extends NodeContextGuardBase implements OnIn
   protected readonly nodeData = computed(() => this.nodeComponent?.node());
 
   /**
-   * The unique identifier for the port. test
+   * The unique identifier for the port.
    */
   id = input.required<Port['id']>();
 
@@ -138,7 +138,7 @@ export class NgDiagramPortComponent extends NodeContextGuardBase implements OnIn
       // When side or originPoint changes, CSS moves the port but doesn't resize it.
       // Force re-observation after DOM updates to pick up the new position.
       if (portChanges.side || originPointChanged) {
-        this.batchDomObserver.invalidate(this.hostElement.nativeElement);
+        this.batchResizeObserver.invalidate(this.hostElement.nativeElement);
       }
     });
 
@@ -171,12 +171,11 @@ export class NgDiagramPortComponent extends NodeContextGuardBase implements OnIn
       side: this.side(),
     });
 
-    this.batchDomObserver.observeResize(this.hostElement.nativeElement, {
+    this.batchResizeObserver.observeResize(this.hostElement.nativeElement, {
       type: 'port',
       nodeId: nodeData.id,
       portId: this.id(),
     });
-    this.batchDomObserver.observeStyle(this.hostElement.nativeElement);
 
     this.isInitialized.set(true);
   }
@@ -198,8 +197,7 @@ export class NgDiagramPortComponent extends NodeContextGuardBase implements OnIn
       return;
     }
 
-    this.batchDomObserver.unobserveResize(this.hostElement.nativeElement);
-    this.batchDomObserver.unobserveStyle(this.hostElement.nativeElement);
+    this.batchResizeObserver.unobserveResize(this.hostElement.nativeElement);
 
     // Skip if node was deleted - ports are removed with the node
     const nodeStillExists = flowCore.getNodeById(nodeData.id);

packages/ng-diagram/projects/ng-diagram/src/lib/directives/node-size/node-size.directive.spec.ts

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { type Node } from '../../../core/src';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowCoreProviderService } from '../../services/flow-core-provider/flow-core-provider.service';
-import { BatchDomObserverService } from '../../services/flow-resize-observer/batch-dom-observer.service';
+import { BatchResizeObserverService } from '../../services/flow-resize-observer/batched-resize-observer.service';
 import { DEFAULT_GROUP_SIZE, DEFAULT_NODE_SIZE, NodeSizeDirective } from './node-size.directive';
 
 @Component({
@@ -21,7 +21,7 @@ describe('NodeSizeDirective', () => {
   let component: TestComponent;
   let element: HTMLElement;
 
-  let mockBatchDomObserver: {
+  let mockBatchResizeObserver: {
     observeResize: ReturnType<typeof vi.fn>;
     unobserveResize: ReturnType<typeof vi.fn>;
   };
@@ -32,7 +32,7 @@ describe('NodeSizeDirective', () => {
   };
 
   beforeEach(async () => {
-    mockBatchDomObserver = {
+    mockBatchResizeObserver = {
       observeResize: vi.fn(),
       unobserveResize: vi.fn(),
     };
@@ -52,7 +52,7 @@ describe('NodeSizeDirective', () => {
     await TestBed.configureTestingModule({
       imports: [TestComponent],
       providers: [
-        { provide: BatchDomObserverService, useValue: mockBatchDomObserver },
+        { provide: BatchResizeObserverService, useValue: mockBatchResizeObserver },
         { provide: FlowCoreProviderService, useValue: mockFlowCoreProvider },
       ],
     }).compileComponents();
@@ -177,15 +177,15 @@ describe('NodeSizeDirective', () => {
 
   describe('Lifecycle', () => {
     it('should connect resize observer on init', () => {
-      expect(mockBatchDomObserver.observeResize).toHaveBeenCalledWith(element, {
+      expect(mockBatchResizeObserver.observeResize).toHaveBeenCalledWith(element, {
         type: 'node',
         nodeId: 'test-node',
       });
     });
 
     it('should disconnect resize observer on destroy', () => {
       fixture.destroy();
-      expect(mockBatchDomObserver.unobserveResize).toHaveBeenCalledWith(element);
+      expect(mockBatchResizeObserver.unobserveResize).toHaveBeenCalledWith(element);
     });
   });
 

packages/ng-diagram/projects/ng-diagram/src/lib/directives/node-size/node-size.directive.ts

@@ -1,7 +1,7 @@
 import { computed, Directive, effect, ElementRef, inject, input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { DEFAULT_NODE_MIN_SIZE, isGroup, type Node } from '../../../core/src';
 import { FlowCoreProviderService } from '../../services/flow-core-provider/flow-core-provider.service';
-import { BatchDomObserverService } from '../../services/flow-resize-observer/batch-dom-observer.service';
+import { BatchResizeObserverService } from '../../services/flow-resize-observer/batched-resize-observer.service';
 
 export const DEFAULT_NODE_SIZE = { width: '11.25rem', height: '2rem' };
 export const DEFAULT_GROUP_SIZE = { width: '9.0625rem', height: '9.0625rem' };
@@ -26,7 +26,7 @@ export const DEFAULT_GROUP_SIZE = { width: '9.0625rem', height: '9.0625rem' };
 export class NodeSizeDirective implements OnDestroy, OnInit {
   private readonly hostElement = inject(ElementRef<HTMLElement>);
   private readonly renderer = inject(Renderer2);
-  private readonly batchDomObserver = inject(BatchDomObserverService);
+  private readonly batchResizeObserver = inject(BatchResizeObserverService);
   private readonly flowCoreProvider = inject(FlowCoreProviderService);
 
   node = input.required<Node>();
@@ -170,13 +170,13 @@ export class NodeSizeDirective implements OnDestroy, OnInit {
    * size-dependent features when nodes resize.
    */
   private connectResizeObserver() {
-    this.batchDomObserver.observeResize(this.hostElement.nativeElement, {
+    this.batchResizeObserver.observeResize(this.hostElement.nativeElement, {
       type: 'node',
       nodeId: this.id(),
     });
   }
 
   private disconnectResizeObserver() {
-    this.batchDomObserver.unobserveResize(this.hostElement.nativeElement);
+    this.batchResizeObserver.unobserveResize(this.hostElement.nativeElement);
   }
 }

packages/ng-diagram/projects/ng-diagram/src/lib/providers/ng-diagram.providers.ts

@@ -6,7 +6,7 @@ import { NgDiagramNodeService } from '../public-services/ng-diagram-node.service
 import { NgDiagramSelectionService } from '../public-services/ng-diagram-selection.service';
 import { NgDiagramViewportService } from '../public-services/ng-diagram-viewport.service';
 import { NgDiagramService } from '../public-services/ng-diagram.service';
-import { BatchDomObserverService } from '../services';
+import { BatchResizeObserverService } from '../services';
 import { CursorPositionTrackerService } from '../services/cursor-position-tracker/cursor-position-tracker.service';
 import { FlowCoreProviderService } from '../services/flow-core-provider/flow-core-provider.service';
 import { FlowResizeBatchProcessorService } from '../services/flow-resize-observer/flow-resize-processor.service';
@@ -59,7 +59,7 @@ export function provideNgDiagram(): Provider[] {
     FlowResizeBatchProcessorService,
     NgDiagramService,
     CursorPositionTrackerService,
-    BatchDomObserverService,
+    BatchResizeObserverService,
     NgDiagramViewportService,
     NgDiagramModelService,
     NgDiagramSelectionService,

…erver/batch-dom-observer.service.spec.ts …/batched-resize-observer.service.spec.tspackages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batch-dom-observer.service.spec.ts renamed to packages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batched-resize-observer.service.spec.ts packages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batch-dom-observer.service.spec.ts renamed to packages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batched-resize-observer.service.spec.ts

@@ -1,9 +1,9 @@
 import { TestBed } from '@angular/core/testing';
 import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from 'vitest';
-import { BatchDomObserverService, type ObservedElementMetadata } from './batch-dom-observer.service';
+import { BatchResizeObserverService, type ObservedElementMetadata } from './batched-resize-observer.service';
 
-describe('BatchDomObserverService', () => {
-  let service: BatchDomObserverService;
+describe('BatchResizeObserverService', () => {
+  let service: BatchResizeObserverService;
   let mockResizeObserver: {
     observe: ReturnType<typeof vi.fn>;
     unobserve: ReturnType<typeof vi.fn>;
@@ -27,10 +27,10 @@ describe('BatchDomObserverService', () => {
     global.cancelAnimationFrame = mockCancelAnimationFrame;
 
     TestBed.configureTestingModule({
-      providers: [BatchDomObserverService],
+      providers: [BatchResizeObserverService],
     });
 
-    service = TestBed.inject(BatchDomObserverService);
+    service = TestBed.inject(BatchResizeObserverService);
   });
 
   afterEach(() => {
@@ -118,6 +118,7 @@ describe('BatchDomObserverService', () => {
       const resizeObserverCallback = (global.ResizeObserver as Mock).mock.calls[0][0];
 
       service['rafId'] = 456;
+      mockRequestAnimationFrame.mockClear();
 
       resizeObserverCallback(mockEntries);
 

…e-observer/batch-dom-observer.service.ts …erver/batched-resize-observer.service.tspackages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batch-dom-observer.service.ts renamed to packages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batched-resize-observer.service.ts packages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batch-dom-observer.service.ts renamed to packages/ng-diagram/projects/ng-diagram/src/lib/services/flow-resize-observer/batched-resize-observer.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, NgZone, OnDestroy, inject } from '@angular/core';
+import { inject, Injectable, NgZone, OnDestroy } from '@angular/core';
 
 export type BatchProcessor = (entries: ResizeObserverEntry[]) => void;
 
@@ -19,19 +19,17 @@ export type ObservedElementMetadata =
     };
 
 @Injectable()
-export class BatchDomObserverService implements OnDestroy {
+export class BatchResizeObserverService implements OnDestroy {
   private readonly ngZone = inject(NgZone);
 
   private observer: ResizeObserver | null = null;
-  private styleObserver: MutationObserver | null = null;
   private observedElements = new WeakMap<Element, ObservedElementMetadata>();
-  private styleObservedElements = new Set<Element>();
   private batchProcessor?: BatchProcessor;
   private rafId: number | null = null;
   private pendingEntries: ResizeObserverEntry[] = [];
 
   constructor() {
-    // Create observers outside Angular zone for performance
+    // Create observer outside Angular zone for performance
     this.ngZone.runOutsideAngular(() => {
       this.observer = new ResizeObserver((entries) => {
         // Collect all entries
@@ -61,16 +59,6 @@ export class BatchDomObserverService implements OnDestroy {
           });
         }
       });
-
-      // Detects CSS-driven position changes (e.g., style.top binding) that don't trigger ResizeObserver.
-      this.styleObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          const element = mutation.target as Element;
-          if (this.styleObservedElements.has(element)) {
-            this.invalidate(element);
-          }
-        }
-      });
     });
   }
 
@@ -97,20 +85,6 @@ export class BatchDomObserverService implements OnDestroy {
     // WeakMap automatically handles cleanup
   }
 
-  /**
-   * Observe an element's style attribute for changes.
-   * When the style changes, the element is automatically invalidated
-   * to trigger a position re-measurement via ResizeObserver.
-   */
-  observeStyle(element: Element): void {
-    this.styleObservedElements.add(element);
-    this.styleObserver?.observe(element, { attributes: true, attributeFilter: ['style'] });
-  }
-
-  unobserveStyle(element: Element): void {
-    this.styleObservedElements.delete(element);
-  }
-
   /**
    * Force ResizeObserver to re-deliver an observation for the element.
    * Useful when an element's position changed without a size change,
@@ -148,6 +122,5 @@ export class BatchDomObserverService implements OnDestroy {
       cancelAnimationFrame(this.rafId);
     }
     this.observer?.disconnect();
-    this.styleObserver?.disconnect();
   }
 }