NIFI-13285:

- Adjusting the canvas position styles and zoom fit calculations.
apache · May 28, 2024 · 09d56fc · 09d56fc
1 parent ae24635
commit 09d56fc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/...ifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts b/...ifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
@@ -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 canvasHeight = canvasBoundingBox.height;
+        const canvasWidth = canvasBoundingBox.width - 50;
+        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 -= 313;
-            graphTop -= 25;
+            graphLeft -= (canvasWidth - graphWidth) / 2;
+            graphTop -= (canvasHeight - graphHeight) / 2;
         }
 
         this.allowTransition = allowTransition;
         this.centerBoundingBox({
-            x: graphLeft - translate[0] / scale,
-            y: graphTop - translate[1] / scale,
+            x: graphLeft - x,
+            y: graphTop - y,
             width: canvasWidth / newScale,
             height: canvasHeight / newScale,
             scale: newScale

diff --git a/...fi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss b/...fi-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;