NIFI-13285: If there is no transform to restore for the current viewport, executing a zoom fit (#8874)

* NIFI-13285:
- If there is no transform to restore for the current viewport, executing a zoom fit.

* NIFI-13285:
- Adjusting the canvas position styles and zoom fit calculations.

This closes #8874

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts

@@ -609,7 +609,7 @@ export class CanvasView {
     /**
      * Zooms to fit the entire graph on the canvas.
      */
-    public fit(): void {
+    public fit(allowTransition: boolean): void {
         const translate = [this.x, this.y];
         const scale: number = this.k;
         let newScale: number;
@@ -617,8 +617,8 @@ export class CanvasView {
         // get the canvas normalized width and height
         const canvasContainer: any = document.getElementById('canvas-container');
         const canvasBoundingBox: any = canvasContainer.getBoundingClientRect();
-        const canvasWidth = canvasBoundingBox.width;
+        const canvasWidth = canvasBoundingBox.width - 50;
-        const canvasHeight = canvasBoundingBox.height;
+        const canvasHeight = canvasBoundingBox.height - 50;
 
         // get the bounding box for the graph
         const graph: any = d3.select('#canvas');
@@ -627,6 +627,8 @@ export class CanvasView {
         const graphHeight: number = graphBox.height / scale;
         let graphLeft: number = graphBox.left / scale;
         let graphTop: number = (graphBox.top - canvasBoundingBox.top) / scale;
+        const x = translate[0] / scale;
+        const y = translate[1] / scale;
 
         // adjust the scale to ensure the entire graph is visible
         if (graphWidth > canvasWidth || graphHeight > canvasHeight) {
@@ -637,15 +639,14 @@ export class CanvasView {
         } else {
             newScale = 1;
 
-            // since the entire graph will fit on the canvas, offset origin appropriately
+            graphLeft -= (canvasWidth - graphWidth) / 2;
-            graphLeft -= 100;
+            graphTop -= (canvasHeight - graphHeight) / 2;
-            graphTop -= 50;
         }
 
-        this.allowTransition = true;
+        this.allowTransition = allowTransition;
         this.centerBoundingBox({
-            x: graphLeft - translate[0] / scale,
+            x: graphLeft - x,
-            y: graphTop - translate[1] / scale,
+            y: graphTop - y,
             width: canvasWidth / newScale,
             height: canvasHeight / newScale,
             scale: newScale

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts

@@ -33,6 +33,6 @@ export const zoomIn = createAction('[Transform] Zoom In');
 
 export const zoomOut = createAction('[Transform] Zoom Out');
 
-export const zoomFit = createAction('[Transform] Zoom Fit');
+export const zoomFit = createAction('[Transform] Zoom Fit', props<{ transition: boolean }>());
 
 export const zoomActual = createAction('[Transform] Zoom Actual');

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts

@@ -84,7 +84,11 @@ export class TransformEffects {
                             if (isFinite(item.scale) && isFinite(item.translateX) && isFinite(item.translateY)) {
                                 // restore previous view
                                 this.canvasView.transform([item.translateX, item.translateY], item.scale);
+                            } else {
+                                this.store.dispatch(TransformActions.zoomFit({ transition: false }));
                             }
+                        } else {
+                            this.store.dispatch(TransformActions.zoomFit({ transition: false }));
                         }
                     } catch (e) {
                         // likely could not parse item... ignoring
@@ -143,8 +147,9 @@ export class TransformEffects {
         () =>
             this.actions$.pipe(
                 ofType(TransformActions.zoomFit),
-                tap(() => {
+                map((action) => action.transition),
-                    this.canvasView.fit();
+                tap((transition) => {
+                    this.canvasView.fit(transition);
                 })
             ),
         { dispatch: false }

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss

@@ -17,9 +17,9 @@
 
 .canvas-background {
     position: absolute;
-    top: 98px;
+    top: 97px;
     left: 0;
-    bottom: 0;
+    bottom: 33px;
     right: 0;
     background-size: 14px 14px;
     z-index: 1;
@@ -30,7 +30,7 @@
 
 :host ::ng-deep svg.canvas-svg {
     width: 100%;
-    height: calc(100% - 33px);
+    height: 100%;
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts

@@ -83,7 +83,7 @@ export class NavigationControl {
     }
 
     zoomFit(): void {
-        this.store.dispatch(zoomFit());
+        this.store.dispatch(zoomFit({ transition: true }));
     }
 
     zoomActual(): void {