feat: upgrade component to latest

Author: steveblue

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## HEAD (unreleased)
 
+- Breaking: `GraphComponent` is now a standalone component built on signal APIs (`input`, `output`, `model`, `contentChild`, `viewChildren`) instead of decorator-based `@Input` / `@Output` and classic queries. The published `NgxGraphModule` and `GraphModule` wrappers are still there so existing NgModule-based applications can import the graph as before, but those modules are deprecated; new code should import `GraphComponent` (and add it to the consuming component or route `imports` array) the same way you would any other standalone piece.
+- Breaking: From TypeScript, inputs behave like signal readers: for example, read the current node list with `graph.nodes()` rather than `graph.nodes`. The `layout`, `curve`, and `activeEntries` bindings use `model()` where the graph needs to write back internally; consumers generally keep using normal property bindings, while code inside the component updates via `.set()`.
+- Breaking: Outputs are `OutputRef` values, not `EventEmitter`, so they do not offer `.pipe()`. To keep using RxJS operators, turn an output into an observable with `outputToObservable` from `@angular/core/rxjs-interop` (in an appropriate injection context), or subscribe to the ref directly. Payload types (such as `NgxGraphStateChangeEvent`) are unchanged; only the subscription shape differs.
+- Breaking: `@ViewChildren` / `@ContentChild` style access is replaced with signal query functions, so in component code you call `graph.linkElements()` (or the other query methods) instead of keeping a `QueryList` on a property.
+- Breaking: The in-component `animations: [ trigger(...) ]` definition was removed. Enter styling on the root now uses the framework’s `animate.enter` class binding together with keyframes in the graph stylesheet, which replaces the old opacity `:enter` transition and avoids the deprecated `trigger` API. Angular does not support mixing the legacy `animations` metadata and `animate.enter` / `animate.leave` on the same component. The old `[@.disabled]` host binding for the legacy tree is also gone; it was scoped to the previous animation system and did not drive node positions, but projected templates that relied on that subtree being disabled for their own `[@...]` triggers may need a different approach.
+- Breaking: Optional viewport inputs `zoomLevel`, `panOffsetX`, and `panOffsetY` are now signal inputs wired through `effect()` to `zoomTo` and `panTo`, so the graph no longer assigns those via a property setter, and the effects run when the parent binding’s value actually changes. If a parent expression changes on every data refresh, you may see extra viewport updates; binding stable values (or leaving these inputs unset) matches the old mental model. Automatic fit and centering still come from the documented `autoZoom`, `autoCenter`, and `zoomToFit$` behavior. If you use `transitionAfterChanges` with full-scope layout morph, whether the post-tick block runs `zoomToFit` or `center` can differ from the additive or instant paths, as before.
 - Enhancement: `transitionAfterChanges`, `transitionDuringTransform`, `layoutTransitionEffect`, and `applyVisualContinuityBeforeLayout` inputs configure rich continuity when a prior graph had nodes, allowing for animations between graph updates.
 - Breaking: `useLayoutTransitions` (default `true` controls `layout-js-driven`; when `false` it applies only during JS `mode: 'tween'`);
 - Enhancement: `GraphComponent` `edgePathSampleCount` input (default 48, clamped 2–512) for edge resampling in layout, morph, and `redrawEdge`

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

@@ -5,8 +5,7 @@
   [style.transform]="layoutOuterTransform"
   [style.transform-origin]="layoutEffectTransformOrigin"
   [style.width.px]="width"
-  [@animationState]="'active'"
-  [@.disabled]="!animate"
+  [animate.enter]="animate() ? 'ngx-graph-outer-fade' : null"
   (mouseWheelUp)="onZoom($event, 'in')"
   (mouseWheelDown)="onZoom($event, 'out')"
   mouseWheel
@@ -20,8 +19,8 @@
         class="graph chart"
       >
         <defs>
-          @if (defsTemplate) {
-            <ng-container [ngTemplateOutlet]="defsTemplate"></ng-container>
+          @if (defsTemplate()) {
+            <ng-container [ngTemplateOutlet]="defsTemplate()"></ng-container>
           }
           @for (link of graph.edges; track link) {
             <svg:path class="text-path" [attr.id]="link.id"></svg:path>
@@ -40,18 +39,18 @@
             <svg:g
               #clusterElement
               class="node-group"
-              [class.old-node]="(animate || layoutJsMorphEnabled) && oldClusters.has(node.id)"
+              [class.old-node]="(animate() || layoutJsMorphEnabled) && oldClusters.has(node.id)"
               [id]="node.id"
               [attr.transform]="node.transform"
               (click)="onClick(node)"
             >
-              @if (clusterTemplate && !node.hidden) {
+              @if (clusterTemplate() && !node.hidden) {
                 <ng-container
-                  [ngTemplateOutlet]="clusterTemplate"
+                  [ngTemplateOutlet]="clusterTemplate()"
                   [ngTemplateOutletContext]="{ $implicit: node, transitionAfterChangesActive: layoutJsMorphEnabled }"
                 ></ng-container>
               }
-              @if (!clusterTemplate && !node.hidden) {
+              @if (!clusterTemplate() && !node.hidden) {
                 <svg:g class="node cluster">
                   <svg:rect
                     [attr.width]="node.dimension.width"
@@ -71,19 +70,19 @@
             <svg:g
               #nodeElement
               class="node-group"
-              [class.old-node]="(animate || layoutJsMorphEnabled) && oldCompoundNodes.has(node.id)"
+              [class.old-node]="(animate() || layoutJsMorphEnabled) && oldCompoundNodes.has(node.id)"
               [id]="node.id"
               [attr.transform]="node.transform"
               (click)="onClick(node)"
               (mousedown)="onNodeMouseDown($event, node)"
             >
-              @if (nodeTemplate && !node.hidden) {
+              @if (nodeTemplate() && !node.hidden) {
                 <ng-container
-                  [ngTemplateOutlet]="nodeTemplate"
+                  [ngTemplateOutlet]="nodeTemplate()"
                   [ngTemplateOutletContext]="{ $implicit: node, transitionAfterChangesActive: layoutJsMorphEnabled }"
                 ></ng-container>
               }
-              @if (!nodeTemplate && !node.hidden) {
+              @if (!nodeTemplate() && !node.hidden) {
                 <svg:g class="node compound-node">
                   <svg:rect
                     [attr.width]="node.dimension.width"
@@ -101,13 +100,13 @@
         <svg:g class="links">
           @for (link of graph.edges; track trackLinkBy($index, link)) {
             <svg:g #linkElement class="link-group" [id]="link.id">
-              @if (linkTemplate) {
+              @if (linkTemplate()) {
                 <ng-container
-                  [ngTemplateOutlet]="linkTemplate"
+                  [ngTemplateOutlet]="linkTemplate()"
                   [ngTemplateOutletContext]="{ $implicit: link, transitionAfterChangesActive: layoutJsMorphEnabled }"
                 ></ng-container>
               }
-              @if (!linkTemplate) {
+              @if (!linkTemplate()) {
                 <svg:path class="edge line" />
               }
             </svg:g>
@@ -118,19 +117,19 @@
             <svg:g
               #nodeElement
               class="node-group"
-              [class.old-node]="(animate || layoutJsMorphEnabled) && oldNodes.has(node.id)"
+              [class.old-node]="(animate() || layoutJsMorphEnabled) && oldNodes.has(node.id)"
               [id]="node.id"
               [attr.transform]="node.transform"
               (click)="onClick(node)"
               (mousedown)="onNodeMouseDown($event, node)"
             >
-              @if (nodeTemplate && !node.hidden) {
+              @if (nodeTemplate() && !node.hidden) {
                 <ng-container
-                  [ngTemplateOutlet]="nodeTemplate"
+                  [ngTemplateOutlet]="nodeTemplate()"
                   [ngTemplateOutletContext]="{ $implicit: node, transitionAfterChangesActive: layoutJsMorphEnabled }"
                 ></ng-container>
               }
-              @if (!nodeTemplate && !node.hidden) {
+              @if (!nodeTemplate() && !node.hidden) {
                 <svg:circle
                   [attr.r]="defaultNodeCircleRadius(node)"
                   [attr.cx]="node.dimension.width / 2"
@@ -151,7 +150,7 @@
       ></svg:rect>
     </svg:clipPath>
 
-    @if (showMiniMap) {
+    @if (showMiniMap()) {
       <svg:g class="minimap" [attr.transform]="minimapTransform" [attr.clip-path]="'url(#' + minimapClipPathId + ')'">
         <svg:rect
           class="minimap-background"
@@ -173,23 +172,23 @@
               <svg:g
                 #nodeElement
                 class="node-group"
-                [class.old-node]="(animate || layoutJsMorphEnabled) && oldNodes.has(node.id)"
+                [class.old-node]="(animate() || layoutJsMorphEnabled) && oldNodes.has(node.id)"
                 [id]="node.id"
                 [attr.transform]="node.transform"
               >
-                @if (miniMapNodeTemplate) {
+                @if (miniMapNodeTemplate()) {
                   <ng-container
-                    [ngTemplateOutlet]="miniMapNodeTemplate"
+                    [ngTemplateOutlet]="miniMapNodeTemplate()"
                     [ngTemplateOutletContext]="{ $implicit: node, transitionAfterChangesActive: layoutJsMorphEnabled }"
                   ></ng-container>
                 }
-                @if (!miniMapNodeTemplate && nodeTemplate) {
+                @if (!miniMapNodeTemplate() && nodeTemplate()) {
                   <ng-container
-                    [ngTemplateOutlet]="nodeTemplate"
+                    [ngTemplateOutlet]="nodeTemplate()"
                     [ngTemplateOutletContext]="{ $implicit: node, transitionAfterChangesActive: layoutJsMorphEnabled }"
                   ></ng-container>
                 }
-                @if (!nodeTemplate && !miniMapNodeTemplate && !node.hidden) {
+                @if (!nodeTemplate() && !miniMapNodeTemplate() && !node.hidden) {
                   <svg:circle
                     [attr.r]="defaultNodeCircleRadius(node) / minimapScaleCoefficient"
                     [attr.cx]="node.dimension.width / 2 / minimapScaleCoefficient"

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

@@ -1,3 +1,17 @@
+/* Replaces legacy @angular/animations :enter (see animate.enter in graph.component.html). */
+.ngx-graph-outer-fade {
+  animation: ngx-graph-outer-fade-in 500ms 100ms ease both;
+}
+
+@keyframes ngx-graph-outer-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .minimap {
   .minimap-background {
     fill: rgba(0, 0, 0, 0.1);

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

@@ -8,7 +8,6 @@ import { Layout } from '../models/layout.model';
 import { Edge } from '../models/edge.model';
 import { ClusterNode, CompoundNode, Node } from '../models/node.model';
 import { GraphComponent } from './graph.component';
-import { GraphModule } from './graph.module';
 
 /** Synchronous layout for tests: positions nodes/clusters/compound nodes and assigns edge polylines. */
 class TestSyncLayout implements Layout {
@@ -70,7 +69,7 @@ class TestLayoutWithCustomParseTranslate extends TestSyncLayout {
       (drawComplete)="onDrawComplete()"
     ></ngx-graph>
   `,
-  standalone: false
+  imports: [GraphComponent]
 })
 class TestGraphDrawCompleteHostComponent {
   syncLayout = new TestSyncLayout();
@@ -93,8 +92,7 @@ class TestGraphDrawCompleteHostComponent {
 describe('GraphComponent drawComplete', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GraphModule],
-      declarations: [TestGraphDrawCompleteHostComponent]
+      imports: [TestGraphDrawCompleteHostComponent]
     }).compileComponents();
   });
 
@@ -113,9 +111,9 @@ describe('GraphComponent drawComplete', () => {
     const graph = graphEl.componentInstance as GraphComponent;
 
     expect(graph.graph.edges.length).toBe(1);
-    expect(graph.linkElements?.length ?? 0).toBe(graph.graph.edges.length);
+    expect(graph.linkElements()?.length ?? 0).toBe(graph.graph.edges.length);
 
-    for (const linkRef of graph.linkElements ?? []) {
+    for (const linkRef of graph.linkElements() ?? []) {
       const g = linkRef.nativeElement as SVGGElement;
       const path = g.querySelector('path');
       expect(path?.getAttribute('d')?.length).toBeGreaterThan(0);
@@ -147,7 +145,7 @@ describe('GraphComponent drawComplete', () => {
       [useLayoutTransitions]="useLayoutTransitions"
     ></ngx-graph>
   `,
-  standalone: false
+  imports: [GraphComponent]
 })
 class TestGraphLayoutJsHostComponent {
   syncLayout = new TestSyncLayout();
@@ -164,7 +162,7 @@ class TestGraphLayoutJsHostComponent {
   template: `
     <ngx-graph [view]="[400, 300]" [nodes]="nodes" [links]="links" [layout]="syncLayout" [animate]="false"></ngx-graph>
   `,
-  standalone: false
+  imports: [GraphComponent]
 })
 class TestGraphParseTranslateHostComponent {
   syncLayout = new TestLayoutWithCustomParseTranslate();
@@ -178,8 +176,7 @@ class TestGraphParseTranslateHostComponent {
 describe('GraphComponent layout-js-driven host class', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GraphModule],
-      declarations: [TestGraphLayoutJsHostComponent]
+      imports: [TestGraphLayoutJsHostComponent]
     }).compileComponents();
   });
 
@@ -217,8 +214,7 @@ const DEFAULT_EDGE_PATH_SAMPLE_COUNT = 48;
 describe('GraphComponent redrawEdge (curve + resampling)', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GraphModule],
-      declarations: [TestGraphLayoutJsHostComponent]
+      imports: [TestGraphLayoutJsHostComponent]
     }).compileComponents();
   });
 
@@ -310,8 +306,7 @@ describe('GraphComponent redrawEdge (curve + resampling)', () => {
 describe('GraphComponent resolveTranslateFromTransform', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GraphModule],
-      declarations: [TestGraphParseTranslateHostComponent]
+      imports: [TestGraphParseTranslateHostComponent]
     }).compileComponents();
   });
 
@@ -332,8 +327,7 @@ describe('GraphComponent resolveTranslateFromTransform', () => {
 describe('GraphComponent layout anchor helpers (full-scope edge morph)', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GraphModule],
-      declarations: [TestGraphLayoutJsHostComponent]
+      imports: [TestGraphLayoutJsHostComponent]
     }).compileComponents();
   });