From f00b7ffc810a040bd15246addc8cf024ff9b469d Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 15 Mar 2022 01:48:41 +1100
Subject: Make root tile centered in view

---
 src/components/Tile.vue     | 4 +++-
 src/components/TileTree.vue | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 475449c..e636cfc 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -15,6 +15,7 @@ export default defineComponent({
 		transitionDuration: {type: Number, required: true},
 		headerSz: {type: Number, required: true},
 		tileSpacing: {type: Number, required: true},
+		center: {type: Array, default: null},
 	},
 	computed: {
 		name(){return this.layoutNode.tolNode.name.replaceAll('\'', '\\\'')}
@@ -47,7 +48,8 @@ export default defineComponent({
 <template>
 <div
 	:style="{position: 'absolute',
-		left: layoutNode.pos[0]+'px', top: layoutNode.pos[1]+'px',
+		left: (center ? (center[0]-layoutNode.dims[0])/2 : layoutNode.pos[0]) + 'px',
+		top: (center ? (center[1]-layoutNode.dims[1])/2 : layoutNode.pos[1]) + 'px',
 		width: layoutNode.dims[0]+'px', height: layoutNode.dims[1]+'px',
 		zIndex: zIdx, overflow: overFlow, transitionDuration: transitionDuration+'ms'}"
 	class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 461dab0..36180c0 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -86,7 +86,7 @@ export default defineComponent({
 <div class="h-[100vh]">
 	<tile :layoutNode="layoutTree.root"
 		:headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing"
-		:transitionDuration="otherOptions.transitionDuration"
+		:transitionDuration="otherOptions.transitionDuration" :center="[width,height]"
 		@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile>
 </div>
 </template>
-- 
cgit v1.2.3