transition: Add Box transition

Signed-off-by: Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com>
Change-Id: Ice876d13b0c4d2c3315ac2900011b4eaff559ed1

3 files changed, 98 insertions, 3 deletions

diff --git a/browser/Makefile.am b/browser/Makefile.am
index de829bc4a0..98f5f7c5e5 100644
--- a/browser/Makefile.am
+++ b/browser/Makefile.am
@@ -415,8 +415,9 @@ COOL_JS_LST =\
 	src/slideshow/PerformTransition.ts \
 	src/slideshow/transition/FadeTransition.ts \
 	src/slideshow/transition/PlusTransition.ts \
-	src/slideshow/transition/CircleTransition.ts\
-	src/slideshow/transition/OvalTransition.ts\
+	src/slideshow/transition/CircleTransition.ts \
+	src/slideshow/transition/OvalTransition.ts \
+	src/slideshow/transition/BoxTransition.ts \
 	src/slideshow/transition/DiamondTransition.ts\
 	src/slideshow/transition/CheckersTransition.ts \
 	src/slideshow/transition/BarsTransition.ts \
@@ -860,7 +861,8 @@ pot:
 		src/slideshow/PerformTransition.ts \
 		src/slideshow/transition/FadeTransition.ts \
 		src/slideshow/transition/PlusTransition.ts \
-		src/slideshow/transition/CircleTransition.ts\
+		src/slideshow/transition/CircleTransition.ts \
+		src/slideshow/transition/BoxTransition.ts \
 		src/slideshow/transition/OvalTransition.ts\
 		src/slideshow/transition/DiamondTransition.ts\
 		src/slideshow/transition/CheckersTransition.ts \
diff --git a/browser/src/slideshow/PerformTransition.ts b/browser/src/slideshow/PerformTransition.ts
index 1c1252af4a..443cd33a5f 100644
--- a/browser/src/slideshow/PerformTransition.ts
+++ b/browser/src/slideshow/PerformTransition.ts
@@ -95,6 +95,18 @@ SlideShow.PerformTransition = function (
                 image2,
             ).start(1);
             break;
+
+        case 'BOX':
+            new BoxTransition(
+                canvas,
+                image1,
+                image2,
+            ).start(1);
+            break;
+
+
+
+
         default:
             console.error('Unknown transition type');
             break;
diff --git a/browser/src/slideshow/transition/BoxTransition.ts b/browser/src/slideshow/transition/BoxTransition.ts
new file mode 100644
index 0000000000..d830af3434
--- /dev/null
+++ b/browser/src/slideshow/transition/BoxTransition.ts
@@ -0,0 +1,81 @@
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+class BoxTransition extends Transition2d {
+	private direction: number = 0;
+	constructor(
+		canvas: HTMLCanvasElement,
+		image1: HTMLImageElement,
+		image2: HTMLImageElement,
+	) {
+		super(canvas, image1, image2);
+		this.prepareTransition();
+		this.animationTime = 2000;
+	}
+
+	public renderUniformValue(): void {
+		this.gl.uniform1i(
+			this.gl.getUniformLocation(this.program, 'direction'),
+			this.direction,
+		);
+	}
+
+	public start(direction: number): void {
+		this.direction = direction;
+		this.startTransition();
+	}
+
+	public getVertexShader(): string {
+		return `#version 300 es
+				in vec4 a_position;
+				in vec2 a_texCoord;
+				out vec2 v_texCoord;
+
+				void main() {
+					gl_Position = a_position;
+					v_texCoord = a_texCoord;
+				}
+				`;
+	}
+
+	public getFragmentShader(): string {
+		return `#version 300 es
+                precision mediump float;
+
+                uniform sampler2D leavingSlideTexture;
+                uniform sampler2D enteringSlideTexture;
+                uniform float time;
+                uniform int direction; 
+
+                in vec2 v_texCoord;
+                out vec4 outColor;
+
+                void main() {
+                    vec2 uv = v_texCoord;
+                    float progress = time;
+
+                    vec2 center = vec2(0.5, 0.5);
+
+                    vec2 dist = abs(uv - center);
+
+                    float size = (direction == 1) ? progress * 1.5 : (1.0 - progress * 1.5);
+
+                    float mask = step(dist.x, size / 2.0) * step(dist.y, size / 2.0);
+
+                    mask = min(mask, 1.0);
+
+                    vec4 color1 = texture(leavingSlideTexture, uv);
+                    vec4 color2 = texture(enteringSlideTexture, uv);
+
+                    outColor = (direction == 0) ? mix(color1, color2, mask) : mix(color2, color1, mask);
+                }
+                `;
+	}
+}