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 <[email protected]> Change-Id: I1d4e774247e8ff80b285b2bd8d2079c90b4a2a71
CollaboraOnline · Dec 19, 2024 · 68a65c6 · 68a65c6
1 parent 71ba183
commit 68a65c6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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;