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/App.vue                      | 48 ++++++++++++-------------
 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 ++---
 7 files changed, 88 insertions(+), 87 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6f9c77c..380a814 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,7 @@ const tol: TolNode = tolFromRaw(tolRaw);
 const tolMap = getTolMap(tol);
 
 // Configurable settings
-const defaultLayoutOptions: LayoutOptions = {
+const defaultLytOpts: LayoutOptions = {
 	tileSpacing: 8, //px
 	headerSz: 20, //px
 	minTileSz: 50, //px
@@ -36,7 +36,7 @@ const defaultLayoutOptions: LayoutOptions = {
 	sweptNodesPrio: 'pow-2/3', //'linear' | 'sqrt' | 'pow-2/3'
 	sweepingToParent: true,
 };
-const defaultComponentOptions = {
+const defaultUiOpts = {
 	// For leaf/non_leaf tile and detached-ancestor components
 	borderRadius: 5, //px
 	shadowNormal: '0 0 2px black',
@@ -64,7 +64,7 @@ const defaultComponentOptions = {
 };
 const defaultOwnOptions = {
 	tileAreaOffset: 5, //px (space between root tile and display boundary)
-	ancestryBarSz: defaultLayoutOptions.minTileSz * 2, //px (breadth of ancestry-bar area)
+	ancestryBarSz: defaultLytOpts.minTileSz * 2, //px (breadth of ancestry-bar area)
 };
 
 // Type representing auto-mode actions
@@ -110,8 +110,8 @@ export default defineComponent({
 			autoPrevActionFail: false, // Used in auto-mode to avoid re-trying a failed expand/collapse
 			helpOpen: false,
 			// Options
-			layoutOptions: {...defaultLayoutOptions},
-			componentOptions: {...defaultComponentOptions},
+			lytOpts: {...defaultLytOpts},
+			uiOpts: {...defaultUiOpts},
 			...defaultOwnOptions,
 			// For window-resize handling
 			width: document.documentElement.clientWidth,
@@ -186,7 +186,7 @@ export default defineComponent({
 				this.width = document.documentElement.clientWidth;
 				this.height = document.documentElement.clientHeight;
 				tryLayout(this.activeRoot, this.layoutMap,
-					this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+					this.tileAreaPos, this.tileAreaDims, this.lytOpts, true);
 				// Prevent re-triggering until after a delay
 				this.resizeThrottled = true;
 				setTimeout(() => {this.resizeThrottled = false;}, this.resizeDelay);
@@ -195,7 +195,7 @@ export default defineComponent({
 		// For tile expand/collapse events
 		onInnerLeafClicked(layoutNode: LayoutNode){
 			let success = tryLayout(this.activeRoot, this.layoutMap,
-				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'expand', node: layoutNode});
+				this.tileAreaPos, this.tileAreaDims, this.lytOpts, false, {type: 'expand', node: layoutNode});
 			if (!success){
 				layoutNode.expandFailFlag = !layoutNode.expandFailFlag; // Triggers failure animation
 			}
@@ -204,7 +204,7 @@ export default defineComponent({
 		onInnerHeaderClicked(layoutNode: LayoutNode){
 			let oldChildren = layoutNode.children;
 			let success = tryLayout(this.activeRoot, this.layoutMap,
-				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'collapse', node: layoutNode});
+				this.tileAreaPos, this.tileAreaDims, this.lytOpts, false, {type: 'collapse', node: layoutNode});
 			if (!success){
 				layoutNode.collapseFailFlag = !layoutNode.collapseFailFlag; // Triggers failure animation
 			}
@@ -219,7 +219,7 @@ export default defineComponent({
 			LayoutNode.hideUpward(layoutNode);
 			this.activeRoot = layoutNode;
 			tryLayout(this.activeRoot, this.layoutMap,
-				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode});
+				this.tileAreaPos, this.tileAreaDims, this.lytOpts, true, {type: 'expand', node: layoutNode});
 		},
 		onInnerHeaderClickHeld(layoutNode: LayoutNode){
 			if (layoutNode == this.activeRoot){
@@ -228,12 +228,12 @@ export default defineComponent({
 			}
 			LayoutNode.hideUpward(layoutNode);
 			this.activeRoot = layoutNode;
-			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true);
 		},
 		onDetachedAncestorClicked(layoutNode: LayoutNode){
 			LayoutNode.showDownward(layoutNode);
 			this.activeRoot = layoutNode;
-			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true);
 		},
 		// For info modal events
 		onInnerInfoIconClicked(node: LayoutNode){
@@ -252,7 +252,7 @@ export default defineComponent({
 			this.settingsOpen = false;
 		},
 		onLayoutOptionChange(){
-			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true);
 		},
 		//
 		onSearchIconClick(){
@@ -312,13 +312,13 @@ export default defineComponent({
 					layoutNode = this.layoutMap.get(ancestor.name)!;
 				}
 				this.onDetachedAncestorClicked(layoutNode!);
-				setTimeout(() => this.expandToTolNode(tolNode), this.componentOptions.transitionDuration);
+				setTimeout(() => this.expandToTolNode(tolNode), this.uiOpts.transitionDuration);
 				return;
 			}
 			// Attempt tile-expand
 			let success = this.onInnerLeafClicked(layoutNode);
 			if (success){
-				setTimeout(() => this.expandToTolNode(tolNode), this.componentOptions.transitionDuration);
+				setTimeout(() => this.expandToTolNode(tolNode), this.uiOpts.transitionDuration);
 				return;
 			}
 			// Attempt expand-to-view on ancestor just below activeRoot
@@ -336,7 +336,7 @@ export default defineComponent({
 			}
 			layoutNode = this.layoutMap.get(ancestor.name)!;
 			this.onInnerHeaderClickHeld(layoutNode);
-			setTimeout(() => this.expandToTolNode(tolNode), this.componentOptions.transitionDuration);
+			setTimeout(() => this.expandToTolNode(tolNode), this.uiOpts.transitionDuration);
 		},
 		onOverlayClick(){
 			this.animationActive = false;
@@ -445,7 +445,7 @@ export default defineComponent({
 						this.onDetachedAncestorClicked(node.parent!);
 						break;
 				}
-				setTimeout(this.autoAction, this.componentOptions.transitionDuration + this.autoWaitTime);
+				setTimeout(this.autoAction, this.uiOpts.transitionDuration + this.autoWaitTime);
 				this.autoPrevAction = action;
 			}
 		},
@@ -469,7 +469,7 @@ export default defineComponent({
 	created(){
 		window.addEventListener('resize', this.onResize);
 		window.addEventListener('keyup', this.onKeyUp);
-		tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+		tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true);
 	},
 	unmounted(){
 		window.removeEventListener('resize', this.onResize);
@@ -484,13 +484,13 @@ export default defineComponent({
 
 <template>
 <div :style="styles">
-	<tile :layoutNode="layoutTree"
-		:headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing" :options="componentOptions"
+	<tile :layoutNode="layoutTree" :lytOpts="lytOpts" :uiOpts="uiOpts"
 		@leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked"
 		@leaf-click-held="onInnerLeafClickHeld" @header-click-held="onInnerHeaderClickHeld"
 		@info-icon-clicked="onInnerInfoIconClicked"/>
 	<ancestry-bar v-if="detachedAncestors != null"
-		:pos="[0,0]" :dims="ancestryBarDims" :nodes="detachedAncestors" :options="componentOptions"
+		:pos="[0,0]" :dims="ancestryBarDims" :nodes="detachedAncestors"
+		:lytOpts="lytOpts" :uiOpts="uiOpts"
 		@detached-ancestor-clicked="onDetachedAncestorClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
 	<!-- Icons -->
 	<search-icon @click="onSearchIconClick"
@@ -501,19 +501,19 @@ export default defineComponent({
 		class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
 	<transition name="fade">
-		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions"
+		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :uiOpts="uiOpts"
 			@info-modal-close="onInfoModalClose"/>
 	</transition>
 	<transition name="fade">
-		<search-modal v-if="searchOpen" :layoutTree="layoutTree" :tolMap="tolMap" :options="componentOptions"
+		<search-modal v-if="searchOpen" :layoutTree="layoutTree" :tolMap="tolMap" :uiOpts="uiOpts"
 			@search-close="onSearchClose" @search-node="onSearchNode" ref="searchModal"/>
 	</transition>
 	<transition name="fade">
-		<help-modal v-if="helpOpen" :options="componentOptions" @help-modal-close="onHelpModalClose"/>
+		<help-modal v-if="helpOpen" :uiOpts="uiOpts" @help-modal-close="onHelpModalClose"/>
 	</transition>
 	<!-- Settings -->
 	<transition name="slide-bottom-right">
-		<settings-pane v-if="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
+		<settings-pane v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts"
 			@settings-close="onSettingsClose" @layout-option-change="onLayoutOptionChange"/>
 		<!-- outer div prevents transition interference with inner rotate -->
 		<div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px] invisible">
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