Center default alignment of the DAG

PiperOrigin-RevId: 715435542

src/app/data_types_internal.ts

@@ -85,6 +85,9 @@ export interface LayoutOptions {
 
   /** The number of pixels that separate nodes within a layer. */
   nodeSeparation?: number;
+
+  /** If set to true, graph will be centered in the canvas. */
+  centerDag?: boolean;
 }
 
 /**
@@ -201,6 +204,7 @@ export const DEFAULT_LAYOUT_OPTIONS: LayoutOptions = {
   edgeSeparation: 4,
   rankSeparation: NODE_VERTICAL_SPACING,
   nodeSeparation: NODE_HORIZONTAL_SPACING,
+  centerDag: false,
 };
 
 /**

src/app/directed_acyclic_graph.ng.html

@@ -59,6 +59,7 @@
       [isPanning]="graphPanning"
       [class.panning]="graphPanning"
       [sizeConfig]="sizeConfig"
+      [canvasDims]="canvasDims"
       [nodes]="nodes"
       [edges]="edges"
       [groups]="groups"

src/app/directed_acyclic_graph.spec.ts

@@ -26,6 +26,7 @@ import {ScreenshotTest} from '../screenshot_test';
 import {ColorThemeLoader} from './color_theme_loader';
 import {DagStateService} from './dag-state.service';
 import {STATE_SERVICE_PROVIDER} from './dag-state.service.provider';
+import {DEFAULT_LAYOUT_OPTIONS} from './data_types_internal';
 import {DirectedAcyclicGraph, DirectedAcyclicGraphModule, generateTheme} from './directed_acyclic_graph';
 import {DagNode as Node, type GraphSpec, type NodeRef} from './node_spec';
 import {TEST_IMPORTS, TEST_PROVIDERS} from './test_providers';
@@ -213,6 +214,30 @@ describe('Directed Acyclic Graph Renderer', () => {
       });
     });
 
+
+    describe('with centerDag enabled', () => {
+      let fixture: ComponentFixture<TestComponent>;
+
+      beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        const graphSpec = Node.createFromSkeleton(
+            fakeGraphWithEdgeOffsets.skeleton, fakeGraphWithEdgeOffsets.state);
+        fixture.componentRef.setInput('graph', graphSpec);
+        fixture.componentRef.setInput('layout', {
+          centerDag: true,
+        });
+        fixture.detectChanges();
+      });
+
+      afterEach(fakeAsync(() => {
+        fixture.destroy();
+      }));
+
+      it('renders correctly', async () => {
+        await screenShot.expectMatch(`graph_with_center_dag`);
+      });
+    });
+
     describe('with edge offsets', () => {
       let fixture: ComponentFixture<TestComponent>;
 

src/app/directed_acyclic_graph.ts

@@ -135,6 +135,7 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
   graphHeight: number = 0;
   graphX: number = 0;
   graphY: number = 0;
+  canvasDims: GraphDims = {width: 0, height: 0};
   private $graphPanning = false;
   graphPanningCtx?: GraphPanContext;
   graphResetPan: Point = {x: 0, y: 0};
@@ -167,6 +168,13 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
     return this.$graphPanning;
   }
 
+  getDagWrapperDims() {
+    return {
+      height: this.dagWrapper?.nativeElement?.offsetHeight || 0,
+      width: this.dagWrapper?.nativeElement?.offsetWidth || 0,
+    };
+  }
+
   // State props
   rootDagInitialized = false;
   private observers: Subscription[] = [];
@@ -763,6 +771,7 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
 
   handleResizeWithEvent(resizeEventData: ResizeEventData) {
     this.lastResizeEv = resizeEventData;
+    this.canvasDims = this.getDagWrapperDims();
     this.handleResize();
   }
 

src/app/directed_acyclic_graph_raw.ts

@@ -252,6 +252,7 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   nodeMap: NodeMap = {nodes: {}, groups: {}};
   graphWidth: number = 0;
   graphHeight: number = 0;
+  canvasDims: GraphDims = {width: 0, height: 0};
   hoveredNode?: DagNode|DagGroup;
   hoveredNodeFromNode?: DagNode|DagGroup;
   hoveredNodeFromBadge?: DagNode|DagGroup;
@@ -426,6 +427,7 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
       ...DEFAULT_LAYOUT_OPTIONS,
       ...layout || {},
     };
+
     this.updateGraphLayout();
   }
 
@@ -440,6 +442,12 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
 
   @Input() isPanning: boolean = false;
 
+  @Input('canvasDims')
+  set onCanvasDimsSet(dims: GraphDims|undefined) {
+    this.canvasDims = dims || {width: 0, height: 0};
+    this.updateGraphLayout();
+  }
+
   constructor(
       private readonly differs: KeyValueDiffers,
       private readonly cdr: ChangeDetectorRef,
@@ -720,6 +728,22 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     this.graphResize.emit({width: this.graphWidth, height: this.graphHeight});
   }
 
+  getGraphDims() {
+    const leftMostPointX = Math.min(
+        ...this.getAllGraphItemsCoordinateForAxisAndOrientation('x', 'left'));
+    const rightMostPointX = Math.max(
+        ...this.getAllGraphItemsCoordinateForAxisAndOrientation('x', 'right'));
+    const topMostPointY = Math.max(
+        ...this.getAllGraphItemsCoordinateForAxisAndOrientation('y', 'bottom'));
+    const bottomMostPointY = Math.min(
+        ...this.getAllGraphItemsCoordinateForAxisAndOrientation('y', 'bottom'));
+
+    return {
+      width: (rightMostPointX - leftMostPointX),
+      height: (topMostPointY - bottomMostPointY),
+    };
+  }
+
   getGraphMargin() {
     const {graphMargin} = this.dims;
     return Object.fromEntries(
@@ -733,14 +757,37 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
 
     const xOffset = Math.min(
         ...this.getAllGraphItemsCoordinateForAxisAndOrientation('x', 'left'));
+
+    const centerOffset = {x: 0, y: 0};
+
+    console.log('centerDag', this.layout.centerDag);
+    if (this.layout.centerDag) {
+      const graphDims = this.getGraphDims();
+      const canvasCenterPoint = {
+        x: this.canvasDims.width / 2,
+        y: this.canvasDims.height / 2,
+      };
+      const graphCenterPoint = {
+        x: graphDims.width / 2,
+        y: graphDims.height / 2,
+      };
+      if (graphDims.width < this.canvasDims.width) {
+        centerOffset.x = canvasCenterPoint.x - graphCenterPoint.x;
+        margin['left'] = 0;
+      }
+      if (graphDims.height < this.canvasDims.height) {
+        centerOffset.y = canvasCenterPoint.y - graphCenterPoint.y;
+        margin['top'] = 0;
+      }
+    }
     for (const node of this.nodes) {
-      node.x += -xOffset + this.nodePad + margin['left'];
-      node.y += this.nodePad + margin['top'];
+      node.x += -xOffset + this.nodePad + margin['left'] + centerOffset.x;
+      node.y += this.nodePad + margin['top'] + centerOffset.y;
       node.cssTransform = getTransformTranslateString(node.x, node.y);
     }
     for (const group of this.groups) {
-      group.x += -xOffset + this.nodePad + margin['left'];
-      group.y += this.nodePad + margin['top'];
+      group.x += -xOffset + this.nodePad + margin['left'] + centerOffset.x;
+      group.y += this.nodePad + margin['top'] + centerOffset.y;
       group.cssTransform =
           getTransformTranslateString(group.x, group.y + group.padY! / 2);
     }
@@ -749,8 +796,8 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
         this.snapEdgeConnectionPoints(edge);
       } else {
         for (const p of edge.points || []) {
-          p.x += -xOffset + this.nodePad + margin['left'];
-          p.y += this.nodePad + margin['top'];
+          p.x += -xOffset + this.nodePad + margin['left'] + centerOffset.x;
+          p.y += this.nodePad + margin['top'] + centerOffset.y;
         }
       }
       this.resnapPointsForGroups(edge);

src/app/node_spec.ts

@@ -640,6 +640,8 @@ export class DagNode implements
   x = -1;
   /** Y Position, Value of `-1` represents an unset value */
   y = -1;
+  xOffset = 0;
+  yOffset = 0;
   width = 0;
   height = 0;
   cssTransform = '';