From a0ef05a86ecb8b3f36102b980a37f93ce97ba8d1 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 28 Mar 2022 19:34:59 +1100
Subject: Make option passing less irregular

---
 src/components/AncestryBar.vue   |  8 +++--
 src/components/HelpModal.vue     |  2 +-
 src/components/SearchModal.vue   |  2 +-
 src/components/SettingsPane.vue  | 32 ++++++++---------
 src/components/Tile.vue          | 75 ++++++++++++++++++++--------------------
 src/components/TileInfoModal.vue |  8 ++---
 6 files changed, 64 insertions(+), 63 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 0cdadf8..f7ce232 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import {LayoutNode} from '../layout';
+import type {LayoutOptions} from '../layout';
 import Tile from './Tile.vue'
 
 export default defineComponent({
@@ -8,7 +9,8 @@ export default defineComponent({
 		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
 		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
 		nodes: {type: Array as PropType<LayoutNode[]>, required: true},
-		options: {type: Object, required: true},
+		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
+		uiOpts: {type: Object, required: true},
 	},
 	data(){
 		return {
@@ -53,7 +55,7 @@ export default defineComponent({
 				padding: this.tileMargin + 'px',
 				//
 				backgroundColor: '#44403c',
-				boxShadow: this.options.shadowNormal,
+				boxShadow: this.uiOpts.shadowNormal,
 			};
 		},
 	},
@@ -75,7 +77,7 @@ export default defineComponent({
 <template>
 <div :style="styles">
 	<tile v-for="(node, idx) in usedNodes" :key="node.tolNode.name" :layoutNode="node"
-		:nonAbsPos="true" :headerSz="0" :tileSpacing="0" :options="options"
+		:nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts"
 		@leaf-clicked="onClick(nodes[idx])" @info-icon-clicked="onInnerInfoIconClicked"/>
 </div>
 </template>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 8be08f4..30b1b21 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -4,7 +4,7 @@ import CloseIcon from './icon/CloseIcon.vue';
 
 export default defineComponent({
 	props: {
-		options: {type: Object, required: true},
+		uiOpts: {type: Object, required: true},
 	},
 	methods: {
 		closeClicked(evt: Event){
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index f3bcb3e..369b632 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -8,7 +8,7 @@ export default defineComponent({
 	props: {
 		layoutTree: {type: Object as PropType<LayoutNode>, required: true},
 		tolMap: {type: Object as PropType<Map<string,TolNode>>, required: true},
-		options: {type: Object, required: true},
+		uiOpts: {type: Object, required: true},
 	},
 	methods: {
 		closeClicked(evt: Event){
diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue
index 2b777e2..c9f1833 100644
--- a/src/components/SettingsPane.vue
+++ b/src/components/SettingsPane.vue
@@ -5,8 +5,8 @@ import type {LayoutOptions} from '../layout';
 
 export default defineComponent({
 	props: {
-		layoutOptions: {type: Object as PropType<LayoutOptions>, required: true},
-		componentOptions: {type: Object, required: true},
+		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
+		uiOpts: {type: Object, required: true},
 	},
 	methods: {
 		closeClicked(evt: Event){
@@ -21,7 +21,7 @@ export default defineComponent({
 			let minInput = this.$refs.minTileSzInput as HTMLInputElement;
 			let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
 			if (Number(minInput.value) > Number(maxInput.value)){
-				this.layoutOptions.maxTileSz = this.layoutOptions.minTileSz;
+				this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
 			}
 			this.onLayoutOptChg();
 		},
@@ -29,7 +29,7 @@ export default defineComponent({
 			let minInput = this.$refs.minTileSzInput as HTMLInputElement;
 			let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
 			if (Number(maxInput.value) < Number(minInput.value)){
-				this.layoutOptions.minTileSz = this.layoutOptions.maxTileSz;
+				this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
 			}
 			this.onLayoutOptChg();
 		},
@@ -47,20 +47,20 @@ export default defineComponent({
 	<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>
+			v-model.number="lytOpts.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 type="range" min="0" max="400" v-model.number="lytOpts.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 type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz" class="w-[3cm]"
 				@input="onMaxTileSzChg" ref="maxTileSzInput"/>
 		</label>
 	</div>
@@ -69,22 +69,22 @@ export default defineComponent({
 		Layout Method
 		<ul>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.layoutType" value="sqr"
+				<label> <input type="radio" v-model="lytOpts.layoutType" value="sqr"
 					@change="onLayoutOptChg"/> Squares </label>
 			</li>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.layoutType" value="rect"
+				<label> <input type="radio" v-model="lytOpts.layoutType" value="rect"
 					@change="onLayoutOptChg"/> Rectangles </label>
 			</li>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.layoutType" value="sweep"
+				<label> <input type="radio" v-model="lytOpts.layoutType" value="sweep"
 					@change="onLayoutOptChg"/> Sweep to side </label>
 			</li>
 		</ul>
 	</div>
 	<hr class="border-stone-400"/>
 	<div>
-		<label> <input type="checkbox" v-model="layoutOptions.sweepingToParent"
+		<label> <input type="checkbox" v-model="lytOpts.sweepingToParent"
 			@change="onLayoutOptChg"/> Sweep to parent</label>
 	</div>
 	<hr class="border-stone-400"/>
@@ -92,19 +92,19 @@ export default defineComponent({
 		Sweep Mode
 		<ul>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.sweepMode" value="left"
+				<label> <input type="radio" v-model="lytOpts.sweepMode" value="left"
 					@change="onLayoutOptChg"/> To left </label>
 			</li>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.sweepMode" value="top"
+				<label> <input type="radio" v-model="lytOpts.sweepMode" value="top"
 					@change="onLayoutOptChg"/> To top </label>
 			</li>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.sweepMode" value="shorter"
+				<label> <input type="radio" v-model="lytOpts.sweepMode" value="shorter"
 					@change="onLayoutOptChg"/> To shorter </label>
 			</li>
 			<li>
-				<label> <input type="radio" v-model="layoutOptions.sweepMode" value="auto"
+				<label> <input type="radio" v-model="lytOpts.sweepMode" value="auto"
 					@change="onLayoutOptChg"/> Auto </label>
 			</li>
 		</ul>
@@ -112,7 +112,7 @@ export default defineComponent({
 	<hr class="border-stone-400"/>
 	<div>
 		<label>Animation Speed <input type="range" min="0" max="1000" class="mx-2 w-[3cm]"
-			v-model.number="componentOptions.transitionDuration"/></label>
+			v-model.number="uiOpts.transitionDuration"/></label>
 	</div>
 </div>
 </template>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 1e88ef9..4dedda8 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -2,16 +2,15 @@
 import {defineComponent, PropType} from 'vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {LayoutNode} from '../layout';
+import type {LayoutOptions} from '../layout';
 
 // Component holds a tree-node structure representing a tile or tile-group to be rendered
 export default defineComponent({
 	props: {
 		layoutNode: {type: Object as PropType<LayoutNode>, required: true},
-		options: {type: Object, required: true},
+		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
+		uiOpts: {type: Object, required: true},
 		nonAbsPos: {type: Boolean, default: false}, // Don't use absolute positioning (only applies for leaf nodes)
-		// Layout settings from parent
-		headerSz: {type: Number, required: true},
-		tileSpacing: {type: Number, required: true},
 	},
 	data(){
 		return {
@@ -33,7 +32,7 @@ export default defineComponent({
 				(this.layoutNode.sepSweptArea && this.layoutNode.sepSweptArea.sweptLeft);
 		},
 		nonLeafBgColor(){
-			let colorArray = this.options.nonLeafBgColors;
+			let colorArray = this.uiOpts.nonLeafBgColors;
 			return colorArray[this.layoutNode.depth % colorArray.length];
 		},
 		tileStyles(): Record<string,string> {
@@ -46,7 +45,7 @@ export default defineComponent({
 				height: (this.layoutNode.hidden ? 0 : this.layoutNode.dims[1]) + 'px',
 				visibility: this.layoutNode.hidden ? 'hidden' : 'visible',
 				// Other bindings
-				transitionDuration: this.options.transitionDuration + 'ms',
+				transitionDuration: this.uiOpts.transitionDuration + 'ms',
 				zIndex: this.animating ? '1' : '0',
 				overflow: this.animating && !this.isLeaf ? 'hidden' : 'visible',
 				// Static styles
@@ -54,7 +53,7 @@ export default defineComponent({
 				transitionTimingFunction: 'ease-out',
 				// CSS variables
 				'--nonLeafBgColor': this.nonLeafBgColor,
-				'--tileSpacing': this.tileSpacing + 'px',
+				'--tileSpacing': this.lytOpts.tileSpacing + 'px',
 			};
 		},
 		leafStyles(): Record<string,string> {
@@ -70,18 +69,18 @@ export default defineComponent({
 				display: 'flex',
 				flexDirection: 'column',
 				// Other
-				borderRadius: this.options.borderRadius + 'px',
-				boxShadow: this.highlight ? this.options.shadowHighlight :
-					(this.layoutNode.hasFocus ? this.options.shadowFocused : this.options.shadowNormal),
+				borderRadius: this.uiOpts.borderRadius + 'px',
+				boxShadow: this.highlight ? this.uiOpts.shadowHighlight :
+					(this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal),
 			};
 		},
 		leafHeaderStyles(): Record<string,string> {
 			return {
-				height: (this.options.imgTileFontSz + this.options.imgTilePadding * 2) + 'px',
-				lineHeight: this.options.imgTileFontSz + 'px',
-				fontSize: this.options.imgTileFontSz + 'px',
-				padding: this.options.imgTilePadding + 'px',
-				color: this.isExpandable ? this.options.expandableImgTileColor : this.options.imgTileColor,
+				height: (this.uiOpts.imgTileFontSz + this.uiOpts.imgTilePadding * 2) + 'px',
+				lineHeight: this.uiOpts.imgTileFontSz + 'px',
+				fontSize: this.uiOpts.imgTileFontSz + 'px',
+				padding: this.uiOpts.imgTilePadding + 'px',
+				color: this.isExpandable ? this.uiOpts.expandableImgTileColor : this.uiOpts.imgTileColor,
 				// For ellipsis
 				overflow: 'hidden',
 				textOverflow: 'ellipsis',
@@ -90,13 +89,13 @@ export default defineComponent({
 		},
 		infoIconStyles(): Record<string,string> {
 			return {
-				width: this.options.infoIconSz + 'px',
-				height: this.options.infoIconSz + 'px',
+				width: this.uiOpts.infoIconSz + 'px',
+				height: this.uiOpts.infoIconSz + 'px',
 				marginTop: 'auto',
-				marginBottom: this.options.infoIconPadding + 'px',
-				marginRight: this.options.infoIconPadding + 'px',
+				marginBottom: this.uiOpts.infoIconPadding + 'px',
+				marginRight: this.uiOpts.infoIconPadding + 'px',
 				alignSelf: 'flex-end',
-				color: this.infoMouseOver ? this.options.infoIconHoverColor : this.options.infoIconColor,
+				color: this.infoMouseOver ? this.uiOpts.infoIconHoverColor : this.uiOpts.infoIconColor,
 			};
 		},
 		nonLeafStyles(): Record<string,string> {
@@ -104,12 +103,12 @@ export default defineComponent({
 				width: '100%',
 				height: '100%',
 				backgroundColor: this.nonLeafBgColor,
-				borderRadius: this.options.borderRadius + 'px',
-				boxShadow: this.animating ? 'none' : (this.highlight ? this.options.shadowHighlight :
-					(this.layoutNode.hasFocus ? this.options.shadowFocused : this.options.shadowNormal)),
+				borderRadius: this.uiOpts.borderRadius + 'px',
+				boxShadow: this.animating ? 'none' : (this.highlight ? this.uiOpts.shadowHighlight :
+					(this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal)),
 			};
 			if (this.layoutNode.sepSweptArea != null){
-				let r = this.options.borderRadius + 'px';
+				let r = this.uiOpts.borderRadius + 'px';
 				temp = this.layoutNode.sepSweptArea.sweptLeft ?
 					{...temp, borderRadius: `${r} ${r} ${r} 0`} :
 					{...temp, borderRadius: `${r} 0 ${r} ${r}`};
@@ -117,14 +116,14 @@ export default defineComponent({
 			return temp;
 		},
 		nonLeafHeaderStyles(): Record<string,string> {
-			let r = this.options.borderRadius + 'px';
+			let r = this.uiOpts.borderRadius + 'px';
 			return {
-				height: this.headerSz + 'px',
-				lineHeight: this.headerSz + 'px',
-				fontSize: this.options.nonLeafHeaderFontSz + 'px',
+				height: this.lytOpts.headerSz + 'px',
+				lineHeight: this.lytOpts.headerSz + 'px',
+				fontSize: this.uiOpts.nonLeafHeaderFontSz + 'px',
 				textAlign: 'center',
-				color: this.options.nonLeafHeaderColor,
-				backgroundColor: this.options.nonLeafHeaderBgColor,
+				color: this.uiOpts.nonLeafHeaderColor,
+				backgroundColor: this.uiOpts.nonLeafHeaderBgColor,
 				borderRadius: `${r} ${r} 0 0`,
 				// For ellipsis
 				overflow: 'hidden',
@@ -136,9 +135,9 @@ export default defineComponent({
 			let commonStyles = {
 				position: 'absolute',
 				backgroundColor: this.nonLeafBgColor,
-				boxShadow: this.animating ? 'none' : (this.highlight ? this.options.shadowHighlight :
-					(this.layoutNode.hasFocus ? this.options.shadowFocused : this.options.shadowNormal)),
-				transitionDuration: this.options.transitionDuration + 'ms',
+				boxShadow: this.animating ? 'none' : (this.highlight ? this.uiOpts.shadowHighlight :
+					(this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal)),
+				transitionDuration: this.uiOpts.transitionDuration + 'ms',
 				transitionProperty: 'left, top, width, height',
 				transitionTimingFunction: 'ease-out',
 			};
@@ -148,12 +147,12 @@ export default defineComponent({
 					...commonStyles,
 					visibility: 'hidden',
 					left: '0',
-					top: this.headerSz + 'px',
+					top: this.lytOpts.headerSz + 'px',
 					width: '0',
 					height: '0',
 				};
 			} else {
-				let r = this.options.borderRadius + 'px';
+				let r = this.uiOpts.borderRadius + 'px';
 				return {
 					...commonStyles,
 					left: area.pos[0] + 'px',
@@ -187,7 +186,7 @@ export default defineComponent({
 			this.clickHoldTimer = setTimeout(() => {
 				this.clickHoldTimer = 0;
 				this.onClickHold();
-			}, this.options.clickHoldDuration);
+			}, this.uiOpts.clickHoldDuration);
 		},
 		onClickHold(){
 			if (this.isLeaf && !this.isExpandable){
@@ -222,7 +221,7 @@ export default defineComponent({
 		},
 		prepForTransition(){
 			this.animating = true;
-			setTimeout(() => {this.animating = false}, this.options.transitionDuration);
+			setTimeout(() => {this.animating = false}, this.uiOpts.transitionDuration);
 		},
 		onInfoClick(evt: Event){
 			this.$emit('info-icon-clicked', this.layoutNode);
@@ -299,7 +298,7 @@ export default defineComponent({
 			</h1>
 		</div>
 		<tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child"
-			:headerSz="headerSz" :tileSpacing="tileSpacing" :options="options"
+			:lytOpts="lytOpts" :uiOpts="uiOpts"
 			@leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked"
 			@leaf-click-held="onInnerLeafClickHeld" @header-click-held="onInnerHeaderClickHeld"
 			@info-icon-clicked="onInnerInfoIconClicked"/>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index f45ef04..cfa1a10 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -6,16 +6,16 @@ import {TolNode} from '../tol';
 export default defineComponent({
 	props: {
 		tolNode: {type: Object as PropType<TolNode>, required: true},
-		options: {type: Object, required: true},
+		uiOpts: {type: Object, required: true},
 	},
 	computed: {
 		imgStyles(): Record<string,string> {
 			return {
 				backgroundImage: 'url(\'/img/' + this.tolNode.name.replaceAll('\'', '\\\'') + '.png\')',
-				width: this.options.infoModalImgSz + 'px',
-				height: this.options.infoModalImgSz + 'px',
+				width: this.uiOpts.infoModalImgSz + 'px',
+				height: this.uiOpts.infoModalImgSz + 'px',
 				backgroundSize: 'cover',
-				borderRadius: this.options.borderRadius + 'px',
+				borderRadius: this.uiOpts.borderRadius + 'px',
 			}
 		},
 	},
-- 
cgit v1.2.3