From ebc481e62a56168bdbcb31df0f97eddf262d346a Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 23 Jun 2022 15:22:01 +1000
Subject: Adjust component event names

---
 src/App.vue                      | 46 +++++++++++++++++++++-------------------
 src/components/AncestryBar.vue   |  8 +++----
 src/components/HelpModal.vue     |  6 +++---
 src/components/SearchModal.vue   |  8 +++----
 src/components/SettingsModal.vue | 10 ++++-----
 src/components/Tile.vue          | 10 ++++-----
 src/components/TileInfoModal.vue |  4 ++--
 src/components/TutorialPane.vue  |  6 +++---
 8 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c7d6149..d5c94e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,34 @@
 <script lang="ts">
+
 import {defineComponent, PropType} from 'vue';
 // Components
 import Tile from './components/Tile.vue';
 import AncestryBar from './components/AncestryBar.vue';
+import TutorialPane from './components/TutorialPane.vue';
 import TileInfoModal from './components/TileInfoModal.vue';
-import HelpModal from './components/HelpModal.vue';
-import SettingsModal from './components/SettingsModal.vue';
 import SearchModal from './components/SearchModal.vue';
-import TutorialPane from './components/TutorialPane.vue';
+import SettingsModal from './components/SettingsModal.vue';
+import HelpModal from './components/HelpModal.vue';
 // Icons
-import HelpIcon from './components/icon/HelpIcon.vue';
 import SearchIcon from './components/icon/SearchIcon.vue';
 import PlayIcon from './components/icon/PlayIcon.vue';
 import SettingsIcon from './components/icon/SettingsIcon.vue';
-// Other
-import type {TolMap} from './lib';
+import HelpIcon from './components/icon/HelpIcon.vue';
+// Classes and types
+	// Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain
 import {TolNode} from './lib';
-import {LayoutNode, initLayoutTree, initLayoutMap, tryLayout} from './layout';
+import type {TolMap, Action} from './lib';
+import {LayoutNode} from './layout';
 import type {LayoutOptions, LayoutTreeChg} from './layout';
+// Functions
 import {arraySum, randWeightedChoice, getScrollBarWidth} from './lib';
-import type {Action} from './lib';
-// Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain
+import {initLayoutTree, initLayoutMap, tryLayout} from './layout';
 
 // Type representing auto-mode actions
 type AutoAction = 'move across' | 'move down' | 'move up' | Action;
-// Used in auto-mode to help avoid action cycles
+// Function used in auto-mode to help avoid action cycles
 function getReverseAction(action: AutoAction): AutoAction | null {
-	let reversePairs: AutoAction[][] = [
+	const reversePairs: AutoAction[][] = [
 		['move down', 'move up'],
 		['expand', 'collapse'],
 		['expandToView', 'unhideAncestor'],
@@ -65,7 +67,7 @@ const defaultUiOpts = {
 	shadowFocused: '0 0 1px 2px orange',
 	infoIconSz: 18, //px
 	infoIconMargin: 2, //px
-	tipThresholds: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
+	childThresholds: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
 	headerColor: '#fafaf9',
 	// For leaf tiles
 	leafTilePadding: 4, //px
@@ -324,7 +326,7 @@ export default defineComponent({
 			});
 		},
 		// For tile-info events
-		onInfoIconClick(nodeName: string){
+		onInfoClick(nodeName: string){
 			if (!this.handleActionForTutorial('tileInfo')){
 				return;
 			}
@@ -341,7 +343,7 @@ export default defineComponent({
 			this.resetMode();
 			this.searchOpen = true;
 		},
-		onSearchNode(name: string){
+		onSearch(name: string){
 			if (this.modeRunning){
 				console.log("WARNING: Unexpected search event while search/auto mode is running")
 				return;
@@ -798,39 +800,39 @@ export default defineComponent({
 		<transition name="fade">
 			<tutorial-pane v-if="tutorialOpen" :height="uiOpts.tutorialPaneSz + 'px'"
 				:uiOpts="uiOpts" :triggerFlag="tutTriggerFlag" :skipWelcome="!welcomeOpen"
-				@tutorial-close="onTutorialClose" @tutorial-stage-chg="onTutStageChg"/>
+				@close="onTutorialClose" @stage-chg="onTutStageChg"/>
 		</transition>
 	</div>
 	<div :class="['flex', mainAreaDims[0] > mainAreaDims[1] ? 'flex-row' : 'flex-col', 'grow', 'min-h-0']" ref="mainArea">
 		<ancestry-bar v-if="detachedAncestors != null"
 			:nodes="detachedAncestors" :vert="mainAreaDims[0] > mainAreaDims[1]"
 			:tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
-			@detached-ancestor-click="onDetachedAncestorClick" @info-icon-click="onInfoIconClick"/>
+			@ancestor-click="onDetachedAncestorClick" @info-click="onInfoClick"/>
 		<div class="relative m-[5px] grow" ref="tileArea">
 			<tile :layoutNode="layoutTree" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
 				:overflownDim="overflownRoot ? tileAreaDims[1] : 0" :skipTransition="justInitialised"
 				@leaf-click="onLeafClick" @nonleaf-click="onNonleafClick"
 				@leaf-click-held="onLeafClickHeld" @nonleaf-click-held="onNonleafClickHeld"
-				@info-icon-click="onInfoIconClick"/>
+				@info-click="onInfoClick"/>
 		</div>
 	</div>
 	<!-- Modals -->
 	<transition name="fade">
 		<search-modal v-if="searchOpen" :tolMap="tolMap" :uiOpts="uiOpts" ref="searchModal"
-			@search-close="searchOpen = false" @search-node="onSearchNode" @info-icon-click="onInfoIconClick"/>
+			@close="searchOpen = false" @search="onSearch" @info-click="onInfoClick"/>
 	</transition>
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNodeName != null"
 			:nodeName="infoModalNodeName" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
-			@info-modal-close="infoModalNodeName = null"/>
+			@close="infoModalNodeName = null"/>
 	</transition>
 	<transition name="fade">
 		<help-modal v-if="helpOpen" :uiOpts="uiOpts"
-			@help-modal-close="helpOpen = false" @start-tutorial="onStartTutorial"/>
+			@close="helpOpen = false" @start-tutorial="onStartTutorial"/>
 	</transition>
 	<settings-modal v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts" class="z-10"
-		@settings-close="settingsOpen = false" @reset-settings="onResetSettings"
-		@layout-option-change="relayoutWithCollapse" @tree-change="onTreeChange"/>
+		@close="settingsOpen = false" @reset="onResetSettings"
+		@layout-setting-chg="relayoutWithCollapse" @tree-chg="onTreeChange"/>
 	<!-- Overlay used to prevent interaction and capture clicks -->
 	<div :style="{visibility: modeRunning ? 'visible' : 'hidden'}"
 		class="absolute left-0 top-0 w-full h-full" @click="modeRunning = false"></div>
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 497c11c..e11725f 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -48,10 +48,10 @@ export default defineComponent({
 	},
 	methods: {
 		onTileClick(node: LayoutNode){
-			this.$emit('detached-ancestor-click', node);
+			this.$emit('ancestor-click', node);
 		},
 		onInfoIconClick(data: string){
-			this.$emit('info-icon-click', data);
+			this.$emit('info-click', data);
 		},
 		onWheelEvt(evt: WheelEvent){
 			// Possibly convert vertical scroll to horizontal
@@ -71,7 +71,7 @@ export default defineComponent({
 		this.scrollToEnd();
 	},
 	components: {Tile, },
-	emits: ['detached-ancestor-click', 'info-icon-click', ],
+	emits: ['ancestor-click', 'info-click', ],
 });
 </script>
 
@@ -79,6 +79,6 @@ export default defineComponent({
 <div :style="styles" @wheel.stop="onWheelEvt">
 	<tile v-for="(node, idx) in usedNodes" :key="node.name" class="shrink-0"
 		:layoutNode="node" :tolMap="tolMap" :nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts"
-		@leaf-click="onTileClick(nodes[idx])" @info-icon-click="onInfoIconClick"/>
+		@leaf-click="onTileClick(nodes[idx])" @info-click="onInfoIconClick"/>
 </div>
 </template>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 298711b..009f694 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -11,16 +11,16 @@ export default defineComponent({
 	methods: {
 		onCloseClick(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
-				this.$emit('help-modal-close');
+				this.$emit('close');
 			}
 		},
 		onStartTutorial(){
 			this.$emit('start-tutorial');
-			this.$emit('help-modal-close');
+			this.$emit('close');
 		},
 	},
 	components: {CloseIcon, RButton, },
-	emits: ['help-modal-close', 'start-tutorial', ],
+	emits: ['close', 'start-tutorial', ],
 });
 </script>
 
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 4ea5cea..93f7a59 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -36,7 +36,7 @@ export default defineComponent({
 	methods: {
 		onCloseClick(evt: Event){
 			if (evt.target == this.$el || (this.$refs.searchIcon as typeof SearchIcon).$el.contains(evt.target)){
-				this.$emit('search-close');
+				this.$emit('close');
 			}
 		},
 		onEnter(){
@@ -63,7 +63,7 @@ export default defineComponent({
 								this.tolMap.set(key, obj[key])
 							}
 						});
-						this.$emit('search-node', tolNodeName);
+						this.$emit('search', tolNodeName);
 					} else {
 						// Trigger failure animation
 						let input = this.$refs.searchInput as HTMLInputElement;
@@ -153,14 +153,14 @@ export default defineComponent({
 			}
 		},
 		onInfoIconClick(nodeName: string){
-			this.$emit('info-icon-click', nodeName);
+			this.$emit('info-click', nodeName);
 		},
 	},
 	mounted(){
 		(this.$refs.searchInput as HTMLInputElement).focus();
 	},
 	components: {SearchIcon, InfoIcon, },
-	emits: ['search-node', 'search-close', 'info-icon-click'],
+	emits: ['search', 'close', 'info-click'],
 });
 </script>
 
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 3a8f34a..e95dc34 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -14,11 +14,11 @@ export default defineComponent({
 		onCloseClick(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
 				this.saveSettings();
-				this.$emit('settings-close');
+				this.$emit('close');
 			}
 		},
 		onLytOptChg(){
-			this.$emit('layout-option-change');
+			this.$emit('layout-setting-chg');
 		},
 		onMinTileSzChg(){
 			let minInput = this.$refs.minTileSzInput as HTMLInputElement;
@@ -37,7 +37,7 @@ export default defineComponent({
 			this.onLytOptChg();
 		},
 		onTreeChg(){
-			this.$emit('tree-change');
+			this.$emit('tree-chg');
 		},
 		saveSettings(){
 			const savedLytOpts = ['tileSpacing', 'minTileSz', 'maxTileSz', 'layoutType', 'sweepMode', 'sweepToParent', ];
@@ -52,12 +52,12 @@ export default defineComponent({
 		},
 		onReset(){
 			localStorage.clear();
-			this.$emit('reset-settings');
+			this.$emit('reset');
 			console.log('Settings reset');
 		},
 	},
 	components: {CloseIcon, RButton, },
-	emits: ['settings-close', 'layout-option-change', 'tree-change', 'reset-settings', ],
+	emits: ['close', 'layout-setting-chg', 'tree-chg', 'reset', ],
 });
 </script>
 
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index bcfebe0..3407b3f 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -181,7 +181,7 @@ export default defineComponent({
 		leafHeaderStyles(): Record<string,string> {
 			let numChildren = this.tolNode.children.length;
 			let headerColor = this.uiOpts.headerColor;
-			for (let [threshold, color] of this.uiOpts.tipThresholds){
+			for (let [threshold, color] of this.uiOpts.childThresholds){
 				if (numChildren >= threshold){
 					headerColor = color;
 				} else {
@@ -399,7 +399,7 @@ export default defineComponent({
 			this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode);
 		},
 		onInfoIconClick(evt: Event){
-			this.$emit('info-icon-click', this.layoutNode.name);
+			this.$emit('info-click', this.layoutNode.name);
 		},
 		// Mouse hover handling
 		onMouseEnter(evt: Event){
@@ -426,7 +426,7 @@ export default defineComponent({
 			this.$emit('nonleaf-click-held', node);
 		},
 		onInnerInfoIconClick(nodeName: string){
-			this.$emit('info-icon-click', nodeName);
+			this.$emit('info-click', nodeName);
 		},
 		onScroll(evt: Event){
 			if (this.pendingScrollHdlr == 0){
@@ -469,7 +469,7 @@ export default defineComponent({
 	},
 	name: 'tile', // Note: Need this to use self in template
 	components: {InfoIcon, },
-	emits: ['leaf-click', 'nonleaf-click', 'leaf-click-held', 'nonleaf-click-held', 'info-icon-click', ],
+	emits: ['leaf-click', 'nonleaf-click', 'leaf-click-held', 'nonleaf-click-held', 'info-click', ],
 });
 </script>
 
@@ -512,7 +512,7 @@ export default defineComponent({
 			:layoutNode="child" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" :overflownDim="overflownDim"
 			@leaf-click="onInnerLeafClick" @nonleaf-click="onInnerNonleafClick"
 			@leaf-click-held="onInnerLeafClickHeld" @nonleaf-click-held="onInnerNonleafClickHeld"
-			@info-icon-click="onInnerInfoIconClick"/>
+			@info-click="onInnerInfoIconClick"/>
 	</div>
 </div>
 </template>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 7e2f81d..83155ba 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -59,7 +59,7 @@ export default defineComponent({
 	methods: {
 		onCloseClick(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
-				this.$emit('info-modal-close');
+				this.$emit('close');
 			}
 		},
 		getImgStyles(imgName: string | null){
@@ -128,7 +128,7 @@ export default defineComponent({
 			});
 	},
 	components: {CloseIcon, Tile, },
-	emits: ['info-modal-close', ],
+	emits: ['close', ],
 });
 </script>
 
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 18628f8..d34456d 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 			this.sendEnabledFeatures();
 		},
 		onClose(){
-			this.$emit('tutorial-close');
+			this.$emit('close');
 		},
 		sendEnabledFeatures(){
 			const stageActions = [
@@ -72,7 +72,7 @@ export default defineComponent({
 			}
 			disabledActions.delete(stageActions[this.stage] as Action);
 			let triggerAction = stageActions[this.stage] as Action;
-			this.$emit('tutorial-stage-chg', disabledActions, triggerAction);
+			this.$emit('stage-chg', disabledActions, triggerAction);
 		},
 	},
 	created(){
@@ -81,7 +81,7 @@ export default defineComponent({
 		}
 	},
 	components: {CloseIcon, RButton, },
-	emits: ['tutorial-close', 'tutorial-stage-chg', ],
+	emits: ['close', 'stage-chg', ],
 });
 </script>
 
-- 
cgit v1.2.3