From 512c43efb2a0ead71b097cd5b28f35fad51f3aeb Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 13:54:13 +1100
Subject: Add min/max tile size setting

---
 src/components/Settings.vue | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index efb0112..8b524a6 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -20,6 +20,18 @@ export default defineComponent({
 		onLayoutOptChg(){
 			this.$emit('layout-option-change');
 		},
+		onMinTileSzChg(){
+			if (Number(this.$refs.minTileSzInput.value) > Number(this.$refs.maxTileSzInput.value)){
+				this.layoutOptions.maxTileSz = this.layoutOptions.minTileSz;
+			}
+			this.onLayoutOptChg();
+		},
+		onMaxTileSzChg(evt){
+			if (Number(this.$refs.maxTileSzInput.value) < Number(this.$refs.minTileSzInput.value)){
+				this.layoutOptions.minTileSz = this.layoutOptions.maxTileSz;
+			}
+			this.onLayoutOptChg();
+		},
 	},
 	emits: ['settings-open', 'settings-close', 'layout-option-change', ],
 });
@@ -43,6 +55,21 @@ export default defineComponent({
 					v-model.number="layoutOptions.tileSpacing" @input="onLayoutOptChg"/></label>
 			</div>
 			<hr class="border-stone-400"/>
+			<div>
+				<label>
+					<span class="inline-block w-[3cm]">Min Tile Size</span>
+					<input type="range" min="0" max="400" v-model.number="layoutOptions.minTileSz" class="w-[3cm]"
+						@input="onMinTileSzChg" ref="minTileSzInput"/>
+				</label>
+			</div>
+			<div>
+				<label>
+					<span class="inline-block w-[3cm]">Max Tile Size</span>
+					<input type="range" min="0" max="400" v-model.number="layoutOptions.maxTileSz" class="w-[3cm]"
+						@input="onMaxTileSzChg" ref="maxTileSzInput"/>
+				</label>
+			</div>
+			<hr class="border-stone-400"/>
 			<div>
 				Layout Method
 				<ul>
@@ -82,10 +109,6 @@ export default defineComponent({
 					</li>
 				</ul>
 			</div>
-			<hr class="border-stone-400"/>
-			<div class="border border-black my-2">Setting 1</div>
-			<div class="border border-black my-2">Setting 2</div>
-			<div class="border border-black my-2">Setting 3</div>
 		</div>
 	</Transition>
 	<Transition name="slide-bottom-right">
-- 
cgit v1.2.3