#1846 Enable zoomTo function to execute with animation (#1847)

elyra-ai · Apr 8, 2024 · 0d5b201 · 0d5b201
1 parent 62a988f
commit 0d5b201
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js b/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js
@@ -1742,11 +1742,13 @@ export default class CanvasController {
 	//    pixel amount to move. Negative left and positive right
 	// y: Is the vertical translate amount which is a number indicating the
 	//    pixel amount to move. Negative up and positive down.
-	// k: is the scale amount which is a number greater than 0 where 1 is the
+	// k: Is the scale amount which is a number greater than 0 where 1 is the
 	//    default scale size.
-	zoomTo(zoomObject) {
+	// animateTime is a number of milliseconds that the animation should take.
+	// It defaults to 500ms. Set to 0 for no animation.
+	zoomTo(zoomObject, animateTime) {
 		if (this.canvasContents) {
-			this.getSVGCanvasD3().zoomTo(zoomObject);
+			this.getSVGCanvasD3().zoomTo(zoomObject, animateTime);
 		}
 	}
 

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.js
@@ -130,8 +130,8 @@ export default class SVGCanvasD3 {
 		this.renderer.externalObjectDropped(dropData, x, y);
 	}
 
-	zoomTo(zoomObject) {
-		this.renderer.zoomTo(zoomObject);
+	zoomTo(zoomObject, animateTime) {
+		this.renderer.zoomTo(zoomObject, animateTime);
 	}
 
 	translateBy(x, y, animateTime) {

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
@@ -187,8 +187,8 @@ export default class SVGCanvasRenderer {
 		return this.zoomUtils.isSpaceKeyPressed();
 	}
 
-	zoomTo(zoomObject) {
-		this.zoomUtils.zoomTo(zoomObject);
+	zoomTo(zoomObject, animateTime) {
+		this.zoomUtils.zoomTo(zoomObject, animateTime);
 	}
 
 	translateBy(x, y, animateTime) {

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-zoom.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-zoom.js
@@ -132,10 +132,11 @@ export default class SVGCanvasUtilsZoom {
 		this.zoomTransform = d3.zoomIdentity.translate(0, 0).scale(1);
 	}
 
-	// Zooms the canvas to the extent specified in the zoom object.
-	zoomTo(zoomObject) {
-		const animateTime = 500;
-		this.zoomCanvasInvokeZoomBehavior(zoomObject, animateTime);
+	// Zooms the canvas to the extent specified in the zoom object. Animate
+	// the zoom by the time specified (in milliseconds) or by 500ms by default.
+	zoomTo(zoomObject, animateTime) {
+		const at = typeof animateTime === "undefined" ? 500 : animateTime;
+		this.zoomCanvasInvokeZoomBehavior(zoomObject, at);
 	}
 
 	// Pans the canvas by the x and y amount specified in the time specified.