From 58774eb725582685eec88ad4486f93429f685696 Mon Sep 17 00:00:00 2001
From: Chris Lord <chris.lord@collabora.com>
Date: Thu, 19 Dec 2024 18:45:59 +0000
Subject: [PATCH] Fix the calc cursor handle being offset during animated
 scroll

Introduce an onAnimationStep callback for animating canvas objects so
they can run animation logic outside of the drawing callgraph. Use this
for scroll animations in ScrollSection.

Signed-off-by: Chris Lord <chris.lord@collabora.com>
Change-Id: I1d4e774247e8ff80b285b2bd8d2079c90b4a2a71
---
 browser/src/canvas/CanvasSectionContainer.ts |  5 ++-
 browser/src/canvas/CanvasSectionObject.ts    |  1 +
 browser/src/canvas/sections/ScrollSection.ts | 32 +++++++++++---------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/browser/src/canvas/CanvasSectionContainer.ts b/browser/src/canvas/CanvasSectionContainer.ts
index 41bd619368af5..88100445ae112 100644
--- a/browser/src/canvas/CanvasSectionContainer.ts
+++ b/browser/src/canvas/CanvasSectionContainer.ts
@@ -2082,13 +2082,16 @@ class CanvasSectionContainer {
 			this.continueAnimating = false;
 		}
 
+		const section: CanvasSectionObject = this.getSectionWithName(this.getAnimatingSectionName());
+		if (section)
+			section.onAnimationStep(this.frameCount, this.elapsedTime);
+
 		if (this.continueAnimating) {
 			this.drawSections(this.frameCount, this.elapsedTime);
 			this.frameCount++;
 			requestAnimationFrame(this.animate.bind(this));
 		}
 		else {
-			var section: CanvasSectionObject = this.getSectionWithName(this.getAnimatingSectionName());
 			if (section) {
 				section.isAnimating = false;
 				section.onAnimationEnded(this.frameCount, this.elapsedTime);
diff --git a/browser/src/canvas/CanvasSectionObject.ts b/browser/src/canvas/CanvasSectionObject.ts
index 38d0b51c22cf1..e327db4454e22 100644
--- a/browser/src/canvas/CanvasSectionObject.ts
+++ b/browser/src/canvas/CanvasSectionObject.ts
@@ -79,6 +79,7 @@ class CanvasSectionObject {
 	onResize(): void { return; }
 	onDraw(frameCount?: number, elapsedTime?: number, subsetBounds?: cool.Bounds): void { return; }
 	onDrawArea(area?: cool.Bounds, paneTopLeft?: cool.Point, canvasContext?: CanvasRenderingContext2D): void { return; } // area is the area to be painted using canvasContext.
+	onAnimationStep(frameCount: number, elapsedTime: number): void { return; }
 	onAnimationEnded(frameCount: number, elapsedTime: number): void { return; } // frameCount, elapsedTime. Sections that will use animation, have to have this function defined.
 	onNewDocumentTopLeft(size: Array<number>): void { return; }
 	onRemove(): void { return; } // This Function is called right before section is removed.
diff --git a/browser/src/canvas/sections/ScrollSection.ts b/browser/src/canvas/sections/ScrollSection.ts
index e73eb7fd05b68..ba54fa58f5e2e 100644
--- a/browser/src/canvas/sections/ScrollSection.ts
+++ b/browser/src/canvas/sections/ScrollSection.ts
@@ -514,21 +514,7 @@ export class ScrollSection extends CanvasSectionObject {
 		}
 	}
 
-	public onDraw (frameCount: number, elapsedTime: number): void {
-		if (this.isAnimating && frameCount >= 0)
-			this.calculateCurrentAlpha(elapsedTime);
-
-		if ((this.sectionProperties.drawVerticalScrollBar || this.sectionProperties.animatingVerticalScrollBar)) {
-			if ((<any>window).mode.isMobile())
-				this.DrawVerticalScrollBarMobile();
-			else
-				this.drawVerticalScrollBar();
-		}
-
-		if ((this.sectionProperties.drawHorizontalScrollBar || this.sectionProperties.animatingHorizontalScrollBar)) {
-			this.drawHorizontalScrollBar();
-		}
-
+	public onAnimationStep (frameCount: number, elapsedTime: number): void {
 		if (this.sectionProperties.animatingScroll) {
 			const lineHeight = this.containerObject.getScrollLineHeight();
 			const accel = lineHeight * ScrollSection.scrollAnimationAcceleration;
@@ -567,6 +553,22 @@ export class ScrollSection extends CanvasSectionObject {
 		}
 	}
 
+	public onDraw (frameCount: number, elapsedTime: number): void {
+		if (this.isAnimating && frameCount >= 0)
+			this.calculateCurrentAlpha(elapsedTime);
+
+		if ((this.sectionProperties.drawVerticalScrollBar || this.sectionProperties.animatingVerticalScrollBar)) {
+			if ((<any>window).mode.isMobile())
+				this.DrawVerticalScrollBarMobile();
+			else
+				this.drawVerticalScrollBar();
+		}
+
+		if ((this.sectionProperties.drawHorizontalScrollBar || this.sectionProperties.animatingHorizontalScrollBar)) {
+			this.drawHorizontalScrollBar();
+		}
+	}
+
 	public onAnimationEnded (frameCount: number, elapsedTime: number): void {
 		this.sectionProperties.animatingVerticalScrollBar = false;
 		this.sectionProperties.animatingHorizontalScrollBar = false;