From 7035e4bc55acc9471de8c5b02c3655d5f188a320 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 24 May 2022 12:46:45 +1000
Subject: Reduce compound-image sub-image movement during transition

---
 src/components/Tile.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/components/Tile.vue')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 4e07113..df5c024 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -416,6 +416,7 @@ export default defineComponent({
 		},
 		// Other
 		leafSubImgStyles(idx: number): Record<string,string> {
+			let [w, h] = this.layoutNode.dims;
 			return {
 				width: '100%',
 				height: '100%',
@@ -428,7 +429,7 @@ export default defineComponent({
 				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',
+				backgroundPosition: idx == 0 ? `${-w/4}px ${-h/4}px` : `${w/4}px ${h/4}px`,
 			};
 		},
 		onTransitionEnd(evt: Event){
-- 
cgit v1.2.3

