From bce4ab3facf63f70a0dd3cefa1f8c82453dba2d4 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 24 Jun 2022 19:12:13 +1000
Subject: Add type annotations for UI options

---
 src/App.vue                      | 36 +++++++++++++++-----------------
 src/README.md                    |  4 ++--
 src/components/AncestryBar.vue   |  7 +++----
 src/components/HelpModal.vue     |  3 ++-
 src/components/SearchModal.vue   |  4 ++--
 src/components/SettingsModal.vue |  5 +++--
 src/components/Tile.vue          |  8 +++----
 src/components/TileInfoModal.vue |  8 +++----
 src/components/TutorialPane.vue  |  6 +++---
 src/layout.ts                    |  2 +-
 src/lib.ts                       | 45 ++++++++++++++++++++++++++++++++++++++++
 11 files changed, 84 insertions(+), 44 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index b2cb8ad..eae0a16 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,10 +16,8 @@ import SettingsIcon from './components/icon/SettingsIcon.vue';
 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 type {TolMap, Action} from './lib';
-import {LayoutNode} from './layout';
-import type {LayoutOptions, LayoutTreeChg} from './layout';
+import {TolNode, TolMap, UiOptions, Action} from './lib';
+import {LayoutNode, LayoutOptions, LayoutTreeChg} from './layout';
 // Functions
 import {arraySum, randWeightedChoice, getScrollBarWidth, getBreakpoint} from './lib';
 import {initLayoutTree, initLayoutMap, tryLayout} from './layout';
@@ -65,44 +63,44 @@ function getDefaultLytOpts(): LayoutOptions {
 function getDefaultUiOpts(){
 	let screenSz = getBreakpoint();
 	return {
-		// For tiles
+		// Shared styling
 		borderRadius: 5, //px
 		shadowNormal: '0 0 2px black',
 		shadowHighlight: '0 0 1px 2px greenyellow',
 		shadowFocused: '0 0 1px 2px orange',
+		// Styling for App
+		appBgColor: '#292524',
+		tileAreaOffset: screenSz == 'sm' ? 6 : 10, //px (space between root tile and display boundary)
+		// Styling for tiles
+		headerColor: '#fafaf9',
+		childThresholds: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
 		infoIconSz: 18, //px
 		infoIconMargin: 2, //px
-		childThresholds: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
-		headerColor: '#fafaf9',
-		// For leaf tiles
 		leafTilePadding: 4, //px
 		leafHeaderFontSz: 15, //px
-		// For non-leaf tiles
 		nonleafBgColors: ['#44403c', '#57534e'], //tiles at depth N use the Nth color, repeating from the start as needed
 		nonleafHeaderFontSz: 15, //px
 		nonleafHeaderColor: '#fafaf9',
 		nonleafHeaderBgColor: '#1c1917',
-		// For other components
-		appBgColor: '#292524',
-		tileAreaOffset: screenSz == 'sm' ? 6 : 10, //px (space between root tile and display boundary)
-		scrollGap: getScrollBarWidth(),
-		ancestryBarImgSz: 100, //px
+		// Styling for other components
+		infoModalImgSz: 200,
 		ancestryBarBgColor: '#44403c',
+		ancestryBarImgSz: 100, //px
 		ancestryTileMargin: 5, //px (gap between detached-ancestor tiles)
-		infoModalImgSz: 200,
-		searchSuggLimit: 5,
-		autoWaitTime: 500, //ms (time to wait between actions (with their transitions))
 		tutorialPaneSz: 200,
 		tutorialPaneBgColor: '#1c1917',
 		tutorialPaneTextColor: 'white',
-		tutorialSkip: false,
 		// Timing related
-		tileChgDuration: 300, //ms (for tile move/expand/collapse)
 		clickHoldDuration: 400, //ms (duration after mousedown when a click-and-hold is recognised)
+		tileChgDuration: 300, //ms (for tile move/expand/collapse)
+		autoWaitTime: 500, //ms (time to wait between actions (with their transitions))
 		// Other
 		useReducedTree: false,
+		searchSuggLimit: 5,
 		jumpToSearchedNode: false,
+		tutorialSkip: false,
 		disabledActions: new Set() as Set<Action>,
+		scrollGap: getScrollBarWidth(),
 	};
 }
 
diff --git a/src/README.md b/src/README.md
index bccc3b1..4c6f70b 100644
--- a/src/README.md
+++ b/src/README.md
@@ -3,12 +3,12 @@
 -   App.vue: The main Vue component.
 -   components:
     -   Tile.vue:          Displays a tree-of-life node, and can include child nodes.
-    -   AncestryBar.vue:   Displays ancestors of the top-level Tile.
-    -   TutorialPane.vue:  Displays tutorial content.
     -   TileInfoModal.vue: Modal displaying info about a Tile's node.
     -   SearchModal.vue:   Modal with a search bar.
     -   SettingsModal:     Modal displaying configurable settings.
     -   HelpModal.vue:     Modal displaying help info.
+    -   AncestryBar.vue:   Displays ancestors of the top-level Tile.
+    -   TutorialPane.vue:  Displays tutorial content.
     -   RButton.vue:       Basic button component.
     -   icon:              Contains components that display SVG icons.
 -   layout.ts: Contains code for laying out Tiles.
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index e11725f..85a8f99 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,9 +1,8 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import Tile from './Tile.vue'
-import {LayoutNode} from '../layout';
-import type {LayoutOptions} from '../layout';
-import type {TolMap} from '../lib';
+import {LayoutNode, LayoutOptions} from '../layout';
+import {TolMap, UiOptions} from '../lib';
 
 // Displays a sequence of nodes, representing ancestors from a tree-of-life root to a currently-active root
 export default defineComponent({
@@ -13,7 +12,7 @@ export default defineComponent({
 		// Other
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
 		usedNodes(){ // Childless versions of 'nodes' used to parameterise <tile>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 009f694..8644a26 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -2,11 +2,12 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
+import {UiOptions} from '../lib';
 
 // Displays help information
 export default defineComponent({
 	props: {
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	methods: {
 		onCloseClick(evt: Event){
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index dc9da4c..7b0c23e 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -4,7 +4,7 @@ import SearchIcon from './icon/SearchIcon.vue';
 import LogInIcon from './icon/LogInIcon.vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {LayoutNode} from '../layout';
-import type {TolMap, SearchSugg, SearchSuggResponse} from '../lib';
+import {TolMap, SearchSugg, SearchSuggResponse, UiOptions} from '../lib';
 
 // Displays a search box, and sends search requests
 export default defineComponent({
@@ -20,7 +20,7 @@ export default defineComponent({
 	},
 	props: {
 		tolMap: {type: Object as PropType<TolMap>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
 		infoIconStyles(): Record<string,string> {
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 1426a36..36e3564 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -2,13 +2,14 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
-import type {LayoutOptions} from '../layout';
+import {LayoutOptions} from '../layout';
+import {UiOptions} from '../lib';
 
 // Displays configurable options, and sends option-change requests
 export default defineComponent({
 	props: {
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	data(){
 		return {
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 33eb62f..22a7333 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,10 +1,8 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import InfoIcon from './icon/InfoIcon.vue';
-import {LayoutNode} from '../layout';
-import type {LayoutOptions} from '../layout';
-import type {TolMap} from '../lib';
-import {TolNode} from '../lib';
+import {LayoutNode, LayoutOptions} from '../layout';
+import {TolNode, TolMap, UiOptions} from '../lib';
 import {capitalizeWords} from '../lib';
 
 // Displays one, or a hierarchy of, tree-of-life nodes, as a 'tile'
@@ -14,7 +12,7 @@ export default defineComponent({
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		// Options
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 		// Other
 		skipTransition: {type: Boolean, default: false},
 		nonAbsPos: {type: Boolean, default: false},
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 83155ba..6fcb023 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -2,10 +2,8 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import Tile from './Tile.vue'
-import {LayoutNode} from '../layout';
-import type {LayoutOptions} from '../layout';
-import type {TolMap} from '../lib';
-import {TolNode, DescInfo, ImgInfo, TileInfoResponse} from '../lib';
+import {LayoutNode, LayoutOptions} from '../layout';
+import {TolNode, TolMap, UiOptions, DescInfo, ImgInfo, TileInfoResponse} from '../lib';
 import {capitalizeWords} from '../lib';
 
 // Displays information about a tree-of-life node
@@ -25,7 +23,7 @@ export default defineComponent({
 		nodeName: {type: String, required: true},
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
 	computed: {
 		displayName(): string {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 3cc1eb6..0bbe8e9 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -2,11 +2,11 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
-import {Action} from '../lib';
+import {Action, UiOptions} from '../lib';
 
 export default defineComponent({
 	props: {
-		uiOpts: {type: Object, required: true},
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 		triggerFlag: {type: Boolean, required: true},
 		skipWelcome: {type: Boolean, default: false},
 		height: {type: String, default: 'auto'},
@@ -73,7 +73,7 @@ export default defineComponent({
 			let disabledActions = this.uiOpts.disabledActions;
 			let currentAction = stageActions[this.stage];
 			for (let i = 1; i <= this.maxStage; i++){
-				let action = stageActions[i];
+				let action = stageActions[i] as Action;
 				if (i <= this.stage){
 					if (disabledActions.has(action)){
 						disabledActions.delete(action);
diff --git a/src/layout.ts b/src/layout.ts
index f35076f..883192f 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -6,7 +6,7 @@
  * find a tile-based layout, filling in node fields to represent placement.
  */
 
-import type {TolMap} from './lib';
+import {TolMap} from './lib';
 import {range, arraySum, linspace, limitVals, updateAscSeq} from './lib';
 
 // Represents a node/tree that holds layout data for a TolNode node/tree
diff --git a/src/lib.ts b/src/lib.ts
index 19bd864..e210e97 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -42,6 +42,51 @@ export type TileInfoResponse = {
 export type Action =
 	'expand' | 'collapse' | 'expandToView' | 'unhideAncestor' |
 	'tileInfo' | 'search' | 'autoMode' | 'settings' | 'help';
+//
+export type UiOptions = {
+	// Shared styling
+	borderRadius: number, // CSS border-radius value, in px
+	shadowNormal: string, // CSS box-shadow value
+	shadowHighlight: string,
+	shadowFocused: string,
+	// Styling for App
+	appBgColor: string, // CSS color
+	tileAreaOffset: number, // Space between root tile and display boundary, in px
+	// Styling for tiles
+	headerColor: string, // CSS color
+	childThresholds: [number, string][],
+		// Specifies, for an increasing sequence of minimum-child-quantity values, CSS color to use
+		//eg: [[1, 'green'], [10, 'orange'], [100, 'red']]
+	infoIconSz: number, // px
+	infoIconMargin: number, // px
+	leafTilePadding: number, // px
+	leafHeaderFontSz: number, // px
+	nonleafBgColors: string[],
+		// Specifies CSS colors to use at various tree depths
+		// With N strings, tiles at depth M use the color at index M % N
+	nonleafHeaderFontSz: number, // px
+	nonleafHeaderColor: string, // CSS color
+	nonleafHeaderBgColor: string, // CSS color
+	// Styling for other components
+	infoModalImgSz: number, // px
+	ancestryBarBgColor: string, // CSS color
+	ancestryBarImgSz: number, // px
+	ancestryTileMargin: number, // px (gap between detached-ancestor tiles)
+	tutorialPaneSz: number, // px
+	tutorialPaneBgColor: string, // CSS color
+	tutorialPaneTextColor: string, // CSS color
+	// Timing related
+	clickHoldDuration: number, // Time after mousedown when a click-and-hold is recognised, in ms
+	tileChgDuration: number, // Transition time for tile_move/etc, in ms
+	autoWaitTime: number, // Time between actions, in ms
+	// Other
+	useReducedTree: boolean,
+	searchSuggLimit: number, // Max number of search suggestions
+	jumpToSearchedNode: boolean,
+	tutorialSkip: boolean,
+	disabledActions: Set<Action>,
+	scrollGap: number, // Size of scroll bar, in px
+};
 
 /*
  * General utility functions
-- 
cgit v1.2.3