From e726294481eedaf6ec3c4c54eade5f18a934d799 Mon Sep 17 00:00:00 2001 From: Javiya Vivekkumar Dineshbhai Date: Fri, 5 Jul 2024 21:42:55 +0530 Subject: Transition: Add Push transition Signed-off-by: Javiya Vivekkumar Dineshbhai Change-Id: I68fe10793e29d823a27f12a6bf22f4cdd3756e70 --- browser/Makefile.am | 2 + browser/src/slideshow/PerformTransition.ts | 11 ++- browser/src/slideshow/transition/PushTransition.ts | 98 ++++++++++++++++++++++ 3 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 browser/src/slideshow/transition/PushTransition.ts diff --git a/browser/Makefile.am b/browser/Makefile.am index 906b0d5075..aa7004e740 100644 --- a/browser/Makefile.am +++ b/browser/Makefile.am @@ -422,6 +422,7 @@ COOL_JS_LST =\ src/slideshow/transition/BoxTransition.ts \ src/slideshow/transition/DiamondTransition.ts\ src/slideshow/transition/CheckersTransition.ts \ + src/slideshow/transition/PushTransition.ts \ src/slideshow/transition/SimpleDissolveTransition.ts \ src/slideshow/transition/BarsTransition.ts \ src/slideshow/transition/CutTransition.ts \ @@ -873,6 +874,7 @@ pot: src/slideshow/transition/OvalTransition.ts\ src/slideshow/transition/DiamondTransition.ts\ src/slideshow/transition/CheckersTransition.ts \ + src/slideshow/transition/PushTransition.ts \ src/slideshow/transition/SimpleDissolveTransition.ts \ src/slideshow/transition/BarsTransition.ts \ src/slideshow/transition/CutTransition.ts \ diff --git a/browser/src/slideshow/PerformTransition.ts b/browser/src/slideshow/PerformTransition.ts index 8b7e509d45..b0d88ad36c 100644 --- a/browser/src/slideshow/PerformTransition.ts +++ b/browser/src/slideshow/PerformTransition.ts @@ -134,7 +134,8 @@ SlideShow.PerformTransition = function ( image1, image2, ).start(1); - break; + break; + case 'DISSOLVE': new SimpleDissolveTransition( canvas, @@ -143,6 +144,14 @@ SlideShow.PerformTransition = function ( ).start(); break; + case 'PUSH': + new PushTransition( + canvas, + image1, + image2, + ).start(1); + break; + default: console.error('Unknown transition type'); diff --git a/browser/src/slideshow/transition/PushTransition.ts b/browser/src/slideshow/transition/PushTransition.ts new file mode 100644 index 0000000000..5cc28d63d0 --- /dev/null +++ b/browser/src/slideshow/transition/PushTransition.ts @@ -0,0 +1,98 @@ +/* + * 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/. + */ + +declare var SlideShow: any; + +class PushTransition 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 leavingUV = uv; + vec2 enteringUV = uv; + + if (direction == 1) { + // bottom to top + leavingUV = uv + vec2(0.0, progress); + enteringUV = uv + vec2(0.0, -1.0 + progress); + } else if (direction == 2) { + // left to right + leavingUV = uv + vec2(-progress, 0.0); + enteringUV = uv + vec2(1.0 - progress, 0.0); + } else if (direction == 3) { + // right to left + leavingUV = uv + vec2(progress, 0.0); + enteringUV = uv + vec2(-1.0 + progress, 0.0); + } else if (direction == 4) { + // top to bottom + leavingUV = uv + vec2(0.0, -progress); + enteringUV = uv + vec2(0.0, 1.0 - progress); + } + + if ((direction == 1 && uv.y > 1.0 - progress) || + (direction == 2 && uv.x < progress) || + (direction == 3 && uv.x > 1.0 - progress) || + (direction == 4 && uv.y < progress)) { + outColor = texture(enteringSlideTexture, enteringUV); + } else { + outColor = texture(leavingSlideTexture, leavingUV); + } + } + `; + } +} -- cgit