From 219f843c82692145fa23ded4487f288df8fd319a Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 12:42:19 +1100
Subject: Add some basic layout settings

---
 src/components/Settings.vue | 58 +++++++++++++++++++++++++++++++++++++++++----
 src/components/TileTree.vue |  7 +++++-
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 24dbb31..efb0112 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,9 +1,12 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+import type {LayoutOptions} from '../lib';
 
 export default defineComponent({
 	props: {
 		isOpen: {type: Boolean, required: true},
+		layoutOptions: {type: Object as PropType<LayoutOptions>, required: true},
+		componentOptions: {type: Object, required: true},
 	},
 	methods: {
 		openClicked(){
@@ -14,14 +17,17 @@ export default defineComponent({
 				this.$emit('settings-close');
 			}
 		},
+		onLayoutOptChg(){
+			this.$emit('layout-option-change');
+		},
 	},
-	emits: ['settings-open', 'settings-close'],
+	emits: ['settings-open', 'settings-close', 'layout-option-change', ],
 });
 </script>
 
 <template>
 <div :style="{visibility: isOpen ? 'visible' : 'hidden'}"
-	class="fixed left-0 top-0 w-full h-full bg-black/10 overflow-hidden"
+	class="fixed left-0 top-0 w-full h-full bg-black/20 overflow-hidden"
 	@click="closeClicked">
 	<!-- outer div prevents overflow from transitioning to/from off-screen -->
 	<Transition name="slide-bottom-right">
@@ -32,12 +38,54 @@ export default defineComponent({
 				@click="closeClicked" ref="closeIcon">&times;</div>
 			<h1 class="text-xl font-bold mb-2">Settings</h1>
 			<hr class="border-stone-400"/>
+			<div>
+				<label>Tile Spacing <input type="range" min="0" max="20" class="mx-2 w-[3cm]"
+					v-model.number="layoutOptions.tileSpacing" @input="onLayoutOptChg"/></label>
+			</div>
+			<hr class="border-stone-400"/>
+			<div>
+				Layout Method
+				<ul>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.layoutType" value="sqr"
+							@change="onLayoutOptChg"/> Squares </label>
+					</li>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.layoutType" value="rect"
+							@change="onLayoutOptChg"/> Rectangles </label>
+					</li>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.layoutType" value="sweep"
+							@change="onLayoutOptChg"/> Sweep to side </label>
+					</li>
+				</ul>
+			</div>
+			<hr class="border-stone-400"/>
+			<div>
+				Sweep Mode
+				<ul>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.sweepMode" value="left"
+							@change="onLayoutOptChg"/> To left </label>
+					</li>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.sweepMode" value="top"
+							@change="onLayoutOptChg"/> To top </label>
+					</li>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.sweepMode" value="shorter"
+							@change="onLayoutOptChg"/> To shorter </label>
+					</li>
+					<li>
+						<label> <input type="radio" v-model="layoutOptions.sweepMode" value="auto"
+							@change="onLayoutOptChg"/> Auto </label>
+					</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 class="border border-black my-2">Setting 4</div>
-			<div class="border border-black my-2">Setting 5</div>
-			<div class="border border-black mt-2">Setting 6</div>
 		</div>
 	</Transition>
 	<Transition name="slide-bottom-right">
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 30e5ddc..fba5863 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -215,6 +215,9 @@ export default defineComponent({
 		onSettingsClose(){
 			this.settingsOpen = false;
 		},
+		onLayoutOptionChange(){
+			tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+		},
 	},
 	created(){
 		window.addEventListener('resize', this.onResize);
@@ -238,7 +241,9 @@ export default defineComponent({
 		:pos="[0,0]" :dims="parentBarDims" :nodes="sepdParents" :options="componentOptions"
 		@sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
 	<tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/>
-	<settings :isOpen="settingsOpen" @settings-open="onSettingsOpen" @settings-close="onSettingsClose"/>
+	<settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
+		@settings-open="onSettingsOpen" @settings-close="onSettingsClose"
+		@layout-option-change="onLayoutOptionChange"/>
 </div>
 </template>
 
-- 
cgit v1.2.3