aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.vue36
-rw-r--r--src/README.md4
-rw-r--r--src/components/AncestryBar.vue7
-rw-r--r--src/components/HelpModal.vue3
-rw-r--r--src/components/SearchModal.vue4
-rw-r--r--src/components/SettingsModal.vue5
-rw-r--r--src/components/Tile.vue8
-rw-r--r--src/components/TileInfoModal.vue8
-rw-r--r--src/components/TutorialPane.vue6
-rw-r--r--src/layout.ts2
-rw-r--r--src/lib.ts45
11 files changed, 84 insertions, 44 deletions
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
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-24 23:40:53 +0000