From a4707168077df7d01cfe48b2f6c687625b8b698f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 24 May 2022 12:37:57 +1000
Subject: Make compound-image sub-images not gradually resize during transition

---
 src/components/Tile.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 4e07113..9f00913 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -171,6 +171,7 @@ export default defineComponent({
 					display: 'grid',
 					gridTemplateColumns: '1fr',
 					// Other
+					backgroundColor: '#1c1917',
 					borderRadius: 'inherit',
 				};
 			}
@@ -416,6 +417,7 @@ export default defineComponent({
 		},
 		// Other
 		leafSubImgStyles(idx: number): Record<string,string> {
+			let [w, h] = this.layoutNode.dims;
 			return {
 				width: '100%',
 				height: '100%',
@@ -427,8 +429,10 @@ export default defineComponent({
 				backgroundColor: '#1c1917',
 				backgroundSize: '125%',
 				borderRadius: 'inherit',
-				clipPath: idx == 0 ? 'polygon(0 0, 100% 0, 0 100%)' : 'polygon(100% 0, 0 100%, 100% 100%)',
-				backgroundPosition: idx == 0 ? 'right bottom' : 'left top',
+				clipPath: idx == 0 ?
+					`polygon(0 0, ${w}px 0, 0 ${h}px)` :
+					`polygon(${w}px 0, 0 ${h}px, ${w}px ${h}px)`,
+				backgroundPosition: idx == 0 ? `${-w/4}px ${-h/4}px` : `${w/4}px ${h/4}px`,
 			};
 		},
 		onTransitionEnd(evt: Event){
-- 
cgit v1.2.3