[gnome-shell/wip/carlosg/magnifier-improvements: 1/4] magnifier: Add support for animating "scroll" on focus changes

[Carlos Garnacho <carlosg src gnome org>]

commit 4e5660a86e195b74a377eb2a78fc76a02abad524
Author: Carlos Garnacho <carlosg gnome org>
Date:   Thu Feb 6 11:00:44 2020 +0100

    magnifier: Add support for animating "scroll" on focus changes
    
    This is nice in that it provides a hint of the relative position of
    the new focus area, as opposed to a sudden jump.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/984

 js/ui/magnifier.js | 81 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 66 insertions(+), 15 deletions(-)
---
diff --git a/js/ui/magnifier.js b/js/ui/magnifier.js
index 6e9b9e7cc3..5110e91b40 100644
--- a/js/ui/magnifier.js
+++ b/js/ui/magnifier.js
@@ -1395,7 +1395,8 @@ var ZoomRegion = class ZoomRegion {
                                         yMagFactor: this._yMagFactor,
                                         xCenter: this._xCenter,
                                         yCenter: this._yCenter,
-                                        redoCursorTracking: false });
+                                        redoCursorTracking: false,
+                                        animate: false });
 
         if (params.xMagFactor <= 0)
             params.xMagFactor = this._xMagFactor;
@@ -1434,8 +1435,7 @@ var ZoomRegion = class ZoomRegion {
                                 height: this._viewPortHeight }, true);
         }
 
-        this._updateCloneGeometry();
-        this._updateMousePosition();
+        this._updateCloneGeometry(params.animate);
     }
 
     _isMouseOverRegion() {
@@ -1573,29 +1573,56 @@ var ZoomRegion = class ZoomRegion {
         this._magView.set_position(this._viewPortX, this._viewPortY);
     }
 
-    _updateCloneGeometry() {
+    _setTransitionEasingState(actor, enabled) {
+        if (enabled) {
+            actor.save_easing_state();
+            actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
+            actor.set_easing_delay(100);
+        } else {
+            actor.restore_easing_state();
+        }
+    }
+
+    _updateCloneGeometry(animate = false) {
         if (!this.isActive())
             return;
 
-        this._uiGroupClone.set_scale(this._xMagFactor, this._yMagFactor);
-        this._mouseActor.set_scale(this._xMagFactor, this._yMagFactor);
-
         let [x, y] = this._screenToViewPort(0, 0);
-        this._uiGroupClone.set_position(Math.round(x), Math.round(y));
+        this._uiGroupClone.ease({
+            x: Math.round(x),
+            y: Math.round(y),
+            scale_x: this._xMagFactor,
+            scale_y: this._yMagFactor,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            duration: animate ? 100 : 0,
+        });
+
+        let [mouseX, mouseY] = this._getMousePosition();
+        this._mouseActor.ease({
+            x: mouseX,
+            y: mouseY,
+            scale_x: this._xMagFactor,
+            scale_y: this._yMagFactor,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            duration: animate ? 100 : 0,
+        });
 
-        this._updateMousePosition();
+        if (this._crossHairsActor) {
+            let [crossX, crossY] = this._getCrossHairsPosition();
+            this._crossHairsActor.ease({
+                x: crossX,
+                y: crossY,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                duration: animate ? 100 : 0,
+            });
+        }
     }
 
     _updateMousePosition() {
         if (!this.isActive())
             return;
 
-        let [xMagMouse, yMagMouse] = this._screenToViewPort(this._magnifier.xMouse,
-                                                            this._magnifier.yMouse);
-
-        xMagMouse = Math.round(xMagMouse);
-        yMagMouse = Math.round(yMagMouse);
-
+        let [xMagMouse, yMagMouse] = this._getMousePosition();
         this._mouseActor.set_position(xMagMouse, yMagMouse);
 
         if (this._crossHairsActor) {
@@ -1605,6 +1632,30 @@ var ZoomRegion = class ZoomRegion {
         }
     }
 
+    _getMousePosition() {
+        if (!this.isActive())
+            return;
+
+        let [xMagMouse, yMagMouse] = this._screenToViewPort(this._magnifier.xMouse,
+                                                            this._magnifier.yMouse);
+        xMagMouse = Math.round(xMagMouse);
+        yMagMouse = Math.round(yMagMouse);
+
+        return [xMagMouse, yMagMouse];
+    }
+
+    _getCrossHairsPosition() {
+        if (!this.isActive())
+            return;
+        if (!this._crossHairsActor)
+            return;
+
+        let [xMagMouse, yMagMouse] = this._getMousePosition();
+        let [groupWidth, groupHeight] = this._crossHairsActor.get_size();
+
+        return [xMagMouse - groupWidth / 2, yMagMouse - groupHeight / 2];
+    }
+
     _monitorsChanged() {
         this._background.set_size(global.screen_width, global.screen_height);
         this._updateScreenPosition();