This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new ffa5e8473d NIFI-13285: If there is no transform to restore for the
current viewport, executing a zoom fit (#8874)
ffa5e8473d is described below
commit ffa5e8473d568cc31fc3cf9261b81a316c2bb64d
Author: Matt Gilman <[email protected]>
AuthorDate: Tue May 28 20:29:04 2024 -0400
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
---
.../flow-designer/service/canvas-view.service.ts | 19 ++++++++++---------
.../state/transform/transform.actions.ts | 2 +-
.../state/transform/transform.effects.ts | 9 +++++++--
.../flow-designer/ui/canvas/canvas.component.scss | 6 +++---
.../navigation-control.component.ts | 2 +-
5 files changed, 22 insertions(+), 16 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
index 4488516e08..ea4e211101 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
+++
b/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 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 -= 100;
- graphTop -= 50;
+ graphLeft -= (canvasWidth - graphWidth) / 2;
+ graphTop -= (canvasHeight - graphHeight) / 2;
}
- this.allowTransition = true;
+ 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/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts
index d211ad5f94..d8c851310d 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.actions.ts
+++
b/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');
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts
index 675e47477c..e887aa579f 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/transform/transform.effects.ts
+++
b/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(() => {
- this.canvasView.fit();
+ map((action) => action.transition),
+ tap((transition) => {
+ this.canvasView.fit(transition);
})
),
{ dispatch: false }
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
index 064d18477c..21ccbce4a0 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
+++
b/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;
diff --git
a/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
b/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
index e8013e6cf3..191824bd82 100644
---
a/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
+++
b/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 {
