From 8b5538e0a55a83b1ff190cd5ad689827777e73a7 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 14 Sep 2022 19:17:41 +1000 Subject: Use Pinia to store user settings, palette colors, etc Move uiOpts and lytOpts to store.ts Add 'const's to *.ts --- src/components/AncestryBar.vue | 34 +++---- src/components/HelpModal.vue | 29 +++--- src/components/LoadingModal.vue | 17 ++-- src/components/SButton.vue | 2 +- src/components/SearchModal.vue | 40 ++++---- src/components/SettingsModal.vue | 192 +++++++++++++++++---------------------- src/components/TileInfoModal.vue | 43 +++++---- src/components/TolTile.vue | 89 +++++++++--------- src/components/TutorialPane.vue | 21 +++-- 9 files changed, 222 insertions(+), 245 deletions(-) (limited to 'src/components') diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue index 1b4ee81..8eabf22 100644 --- a/src/components/AncestryBar.vue +++ b/src/components/AncestryBar.vue @@ -1,7 +1,7 @@ @@ -10,27 +10,27 @@ import {ref, computed, watch, onMounted, nextTick, PropType} from 'vue'; import TolTile from './TolTile.vue'; import {TolMap} from '../tol'; -import {LayoutNode, LayoutOptions} from '../layout'; -import {UiOptions} from '../lib'; +import {LayoutNode} from '../layout'; +import {useStore} from '../store'; // Refs const rootRef = ref(null as HTMLDivElement | null); +// Global store +const store = useStore(); + // Props + events const props = defineProps({ nodes: {type: Array as PropType, required: true}, vert: {type: Boolean, default: false}, breadth: {type: Number, required: true}, - // - lytOpts: {type: Object as PropType, required: true}, - uiOpts: {type: Object as PropType, required: true}, tolMap: {type: Object as PropType, required: true}, }); const emit = defineEmits(['ancestor-click', 'info-click']); // Computed prop data for display const imgSz = computed(() => - props.breadth - props.lytOpts.tileSpacing - props.uiOpts.scrollGap + props.breadth - store.lytOpts.tileSpacing - store.scrollGap // Intentionally omitting extra tileSpacing, to allow for scrollGap with less image shrinkage ); const dummyNodes = computed(() => props.nodes.map(n => { @@ -54,11 +54,13 @@ function onWheelEvt(evt: WheelEvent){ // For converting vertical scrolling to ho } } function scrollToEnd(){ - let el = rootRef.value!; - if (props.vert){ - el.scrollTop = el.scrollHeight; - } else { - el.scrollLeft = el.scrollWidth; + let el = rootRef.value; + if (el != null){ + if (props.vert){ + el.scrollTop = el.scrollHeight; + } else { + el.scrollLeft = el.scrollWidth; + } } } watch(props.nodes, () => { @@ -75,12 +77,12 @@ const styles = computed(() => ({ display: 'flex', flexDirection: props.vert ? 'column' : 'row', alignItems: 'center', - gap: props.lytOpts.tileSpacing + 'px', - padding: props.lytOpts.tileSpacing + 'px', + gap: store.lytOpts.tileSpacing + 'px', + padding: store.lytOpts.tileSpacing + 'px', overflowX: props.vert ? 'hidden' : 'auto', overflowY: props.vert ? 'auto' : 'hidden', // Other - backgroundColor: props.uiOpts.ancestryBarBgColor, - boxShadow: props.uiOpts.shadowNormal, + backgroundColor: store.ancestryBarBgColor, + boxShadow: store.shadowNormal, })); diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index c403e53..d2576d5 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -385,13 +385,6 @@ two species of grass being described like a third closely-related species.


-

Why did searching for 'goat' send me to the moths?

-

- When you search for a name, then press enter, the first result is used. - Currently, search suggestions are not ordered by well-known the taxons are, - so the first result might mean 'Goat Moth' instead of 'Domestic Goat'. -

-

Why do a lot of fish have their heads clipped out?

Cropping images into squares was done semi-automatically, and sometimes this @@ -418,7 +411,7 @@ - Start Tutorial @@ -427,23 +420,25 @@ diff --git a/src/components/SButton.vue b/src/components/SButton.vue index 884fa30..487d6bd 100644 --- a/src/components/SButton.vue +++ b/src/components/SButton.vue @@ -6,7 +6,7 @@ diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index a035cac..1818529 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -10,7 +10,7 @@

@@ -25,7 +25,7 @@
• • •
@@ -37,20 +37,22 @@ import {ref, computed, onMounted, onUnmounted, PropType} from 'vue'; import SearchIcon from './icon/SearchIcon.vue'; import InfoIcon from './icon/InfoIcon.vue'; import {TolNode, TolMap} from '../tol'; -import {LayoutNode, LayoutMap, LayoutOptions} from '../layout'; -import {queryServer, SearchSugg, SearchSuggResponse, UiOptions} from '../lib'; +import {LayoutNode, LayoutMap} from '../layout'; +import {queryServer, SearchSugg, SearchSuggResponse} from '../lib'; +import {useStore} from '../store'; // Refs const rootRef = ref(null as HTMLDivElement | null); const inputRef = ref(null as HTMLInputElement | null); +// Global store +const store = useStore(); + // Props + events const props = defineProps({ lytMap: {type: Object as PropType, required: true}, // Used to check if a searched-for node exists activeRoot: {type: Object as PropType, required: true}, // Sent to server to reduce response size tolMap: {type: Object as PropType, required: true}, // Upon a search response, gets new nodes added - lytOpts: {type: Object as PropType, required: true}, - uiOpts: {type: Object as PropType, required: true}, }); const emit = defineEmits(['search', 'close', 'info-click', 'setting-chg', 'net-wait', 'net-get']); @@ -101,8 +103,8 @@ async function onInput(){ let urlParams = new URLSearchParams({ type: 'sugg', name: input.value, - limit: String(props.uiOpts.searchSuggLimit), - tree: props.uiOpts.tree, + limit: String(store.searchSuggLimit), + tree: store.tree, }); // Query server, delaying/skipping if a request was recently sent pendingSuggReqParams.value = urlParams; @@ -168,7 +170,7 @@ async function resolveSearch(tolNodeName: string){ name: tolNodeName, toroot: '1', excl: props.activeRoot.name, - tree: props.uiOpts.tree, + tree: store.tree, }); emit('net-wait'); // Allows the parent component to show a loading-indicator let responseObj: {[x: string]: TolNode} = await queryServer(urlParams); @@ -216,7 +218,7 @@ function onInfoIconClick(nodeName: string){ // For keyboard shortcuts function onKeyDown(evt: KeyboardEvent){ - if (props.uiOpts.disableShortcuts){ + if (store.disableShortcuts){ return; } if (evt.key == 'f' && evt.ctrlKey){ @@ -232,26 +234,26 @@ onMounted(() => inputRef.value!.focus()) // Styles const styles = computed((): Record => { - let br = props.uiOpts.borderRadius; + let br = store.borderRadius; return { - backgroundColor: props.uiOpts.bgColorAlt, + backgroundColor: store.color.bgAlt, borderRadius: (searchSuggs.value.length == 0) ? `${br}px` : `${br}px ${br}px 0 0`, - boxShadow: props.uiOpts.shadowNormal, + boxShadow: store.shadowNormal, }; }); const suggContainerStyles = computed((): Record => { - let br = props.uiOpts.borderRadius; + let br = store.borderRadius; return { - backgroundColor: props.uiOpts.bgColorAlt, - color: props.uiOpts.textColorAlt, + backgroundColor: store.color.bgAlt, + color: store.color.textAlt, borderRadius: `0 0 ${br}px ${br}px`, }; }); const animateLabelStyles = computed(() => ({ position: 'absolute', - top: -props.lytOpts.headerSz - 2 + 'px', + top: -store.lytOpts.headerSz - 2 + 'px', right: '0', - height: props.lytOpts.headerSz + 'px', - color: props.uiOpts.textColor, + height: store.lytOpts.headerSz + 'px', + color: store.color.text, })); diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index df8444f..a55dc41 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -9,19 +9,19 @@

Timing

-
@@ -31,49 +31,49 @@
Sweep leaves left
    • + @change="onSettingChg('lytOpts.layoutType')"/> Yes
    • + @change="onSettingChg('lytOpts.layoutType')"/> No
Sweep into parent
    -
    • -
    • -
    • +
    • +
    • +
-
@@ -81,29 +81,29 @@
Tree to use
    -
    • -
    • -
    • +
    • +
    • +
- +
- +
-
- +
+
- + Reset @@ -114,11 +114,10 @@ diff --git a/src/components/TolTile.vue b/src/components/TolTile.vue index 810c5b7..a30c6d9 100644 --- a/src/components/TolTile.vue +++ b/src/components/TolTile.vue @@ -37,7 +37,7 @@
@@ -52,22 +52,23 @@ import {ref, computed, watch, PropType} from 'vue'; import InfoIcon from './icon/InfoIcon.vue'; import {TolMap} from '../tol'; -import {LayoutNode, LayoutOptions} from '../layout'; -import {getImagePath, UiOptions} from '../lib'; +import {LayoutNode} from '../layout'; +import {getImagePath} from '../lib'; import {capitalizeWords} from '../util'; +import {useStore} from '../store'; const SCRIM_GRADIENT = 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.2) 100%)'; // Refs const rootRef = ref(null as HTMLDivElement | null); +// Global store +const store = useStore(); + // Props + events const props = defineProps({ layoutNode: {type: Object as PropType, required: true}, tolMap: {type: Object as PropType, required: true}, - // Options - lytOpts: {type: Object as PropType, required: true}, - uiOpts: {type: Object as PropType, required: true}, // Other skipTransition: {type: Boolean, default: false}, nonAbsPos: {type: Boolean, default: false}, @@ -120,26 +121,26 @@ const isOverflownRoot = computed(() => props.overflownDim > 0 && !props.layoutNode.hidden && props.layoutNode.children.length > 0 ); const hasFocusedChild = computed(() => props.layoutNode.children.some(n => n.hasFocus)); -const infoIconDisabled = computed(() => !props.uiOpts.disabledActions.has('tileInfo')); +const infoIconDisabled = computed(() => !store.disabledActions.has('tileInfo')); // Click/hold handling const clickHoldTimer = ref(0); // Used to recognise click-and-hold events function onMouseDown(): void { highlight.value = false; - if (!props.uiOpts.touchDevice){ + if (!store.touchDevice){ // Wait for a mouseup or click-hold clearTimeout(clickHoldTimer.value); clickHoldTimer.value = setTimeout(() => { clickHoldTimer.value = 0; onClickHold(); - }, props.uiOpts.clickHoldDuration); + }, store.clickHoldDuration); } else { // Wait for or recognise a double-click if (clickHoldTimer.value == 0){ clickHoldTimer.value = setTimeout(() => { clickHoldTimer.value = 0; onClick(); - }, props.uiOpts.clickHoldDuration); + }, store.clickHoldDuration); } else { clearTimeout(clickHoldTimer.value) clickHoldTimer.value = 0; @@ -148,7 +149,7 @@ function onMouseDown(): void { } } function onMouseUp(): void { - if (!props.uiOpts.touchDevice){ + if (!store.touchDevice){ if (clickHoldTimer.value > 0){ clearTimeout(clickHoldTimer.value); clickHoldTimer.value = 0; @@ -226,14 +227,14 @@ function onScroll(): void { pendingScrollHdlr.value = setTimeout(() => { scrollOffset.value = rootRef.value!.scrollTop; pendingScrollHdlr.value = 0; - }, props.uiOpts.animationDelay); + }, store.animationDelay); } } // Scroll to focused child if overflownRoot watch(hasFocusedChild, (newVal: boolean) => { if (newVal && isOverflownRoot.value){ let focusedChild = props.layoutNode.children.find(n => n.hasFocus)! - let bottomY = focusedChild.pos[1] + focusedChild.dims[1] + props.lytOpts.tileSpacing; + let bottomY = focusedChild.pos[1] + focusedChild.dims[1] + store.lytOpts.tileSpacing; let scrollTop = Math.max(0, bottomY - (props.overflownDim / 2)); // No need to manually cap at max rootRef.value!.scrollTop = scrollTop; } @@ -253,16 +254,16 @@ function onTransitionEnd(){ // For setting transition state (allows external triggering, like via search and auto-mode) watch(() => props.layoutNode.pos, (newVal: [number, number], oldVal: [number, number]) => { let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1]; - if (valChanged && props.uiOpts.transitionDuration > 100 && !inTransition.value){ + if (valChanged && store.transitionDuration > 100 && !inTransition.value){ inTransition.value = true; - setTimeout(onTransitionEnd, props.uiOpts.transitionDuration); + setTimeout(onTransitionEnd, store.transitionDuration); } }); watch(() => props.layoutNode.dims, (newVal: [number, number], oldVal: [number, number]) => { let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1]; - if (valChanged && props.uiOpts.transitionDuration > 100 && !inTransition.value){ + if (valChanged && store.transitionDuration > 100 && !inTransition.value){ inTransition.value = true; - setTimeout(onTransitionEnd, props.uiOpts.transitionDuration); + setTimeout(onTransitionEnd, store.transitionDuration); } }); @@ -285,7 +286,7 @@ const inFlash = ref(false); // Used to 'flash' the tile when focused watch(() => props.layoutNode.hasFocus, (newVal: boolean, oldVal: boolean) => { if (newVal != oldVal && newVal){ inFlash.value = true; - setTimeout(() => {inFlash.value = false;}, props.uiOpts.transitionDuration); + setTimeout(() => {inFlash.value = false;}, 300); } }); @@ -294,32 +295,32 @@ const justUnhidden = ref(false); // Used to allow overflow temporarily after bei watch(() => props.layoutNode.hidden, (newVal: boolean, oldVal: boolean) => { if (oldVal && !newVal){ justUnhidden.value = true; - setTimeout(() => {justUnhidden.value = false}, props.uiOpts.transitionDuration + 100); + setTimeout(() => {justUnhidden.value = false}, store.transitionDuration + 100); } }); // Styles + classes const nonleafBgColor = computed(() => { - let colorArray = props.uiOpts.nonleafBgColors; + let colorArray = store.nonleafBgColors; return colorArray[props.layoutNode.depth % colorArray.length]; }); const boxShadow = computed((): string => { if (highlight.value){ - return props.uiOpts.shadowHovered; + return store.shadowHovered; } else if (props.layoutNode.hasFocus && !inTransition.value){ - return props.uiOpts.shadowFocused; + return store.shadowFocused; } else { - return props.uiOpts.shadowNormal; + return store.shadowNormal; } }); const fontSz = computed((): number => { // These values are a compromise between dynamic font size and code simplicity if (props.layoutNode.dims[0] >= 150){ - return props.lytOpts.headerSz * 0.8; + return store.lytOpts.headerSz * 0.8; } else if (props.layoutNode.dims[0] >= 80){ - return props.lytOpts.headerSz * 0.7; + return store.lytOpts.headerSz * 0.7; } else { - return props.lytOpts.headerSz * 0.6; + return store.lytOpts.headerSz * 0.6; } }); // @@ -330,11 +331,11 @@ const styles = computed((): Record => { top: props.layoutNode.pos[1] + 'px', width: props.layoutNode.dims[0] + 'px', height: props.layoutNode.dims[1] + 'px', - borderRadius: props.uiOpts.borderRadius + 'px', + borderRadius: store.borderRadius + 'px', boxShadow: boxShadow.value, visibility: 'visible', // Transition related - transitionDuration: (props.skipTransition ? 0 : props.uiOpts.transitionDuration) + 'ms', + transitionDuration: (props.skipTransition ? 0 : store.transitionDuration) + 'ms', transitionProperty: 'left, top, width, height, visibility', transitionTimingFunction: 'ease-out', zIndex: inTransition.value && wasClicked.value ? '1' : '0', @@ -342,10 +343,10 @@ const styles = computed((): Record => { 'hidden' : 'visible', // CSS variables '--nonleafBgColor': nonleafBgColor.value, - '--tileSpacing': props.lytOpts.tileSpacing + 'px', + '--tileSpacing': store.lytOpts.tileSpacing + 'px', }; if (!isLeaf.value){ - let borderR = props.uiOpts.borderRadius + 'px'; + let borderR = store.borderRadius + 'px'; if (props.layoutNode.sepSweptArea != null){ borderR = props.layoutNode.sepSweptArea.sweptLeft ? `${borderR} ${borderR} ${borderR} 0` : @@ -354,7 +355,7 @@ const styles = computed((): Record => { layoutStyles.borderRadius = borderR; } if (isOverflownRoot.value){ - layoutStyles.width = (props.layoutNode.dims[0] + props.uiOpts.scrollGap) + 'px'; + layoutStyles.width = (props.layoutNode.dims[0] + store.scrollGap) + 'px'; layoutStyles.height = props.overflownDim + 'px'; layoutStyles.overflow = 'hidden scroll'; } @@ -377,7 +378,7 @@ const leafStyles = computed((): Record => { backgroundImage: tolNode.value.imgName != null ? `${SCRIM_GRADIENT},url('${getImagePath(tolNode.value.imgName as string)}')` : 'none', - backgroundColor: props.uiOpts.bgColorDark, + backgroundColor: store.color.bgDark, backgroundSize: 'cover', }; } @@ -385,8 +386,8 @@ const leafStyles = computed((): Record => { }); const leafHeaderStyles = computed((): Record => { let numChildren = tolNode.value.children.length; - let textColor = props.uiOpts.textColor; - for (let [threshold, color] of props.uiOpts.childQtyColors){ + let textColor = store.color.text; + for (let [threshold, color] of store.childQtyColors){ if (numChildren >= threshold){ textColor = color; } else { @@ -413,7 +414,7 @@ function leafSubImgStyles(idx: number): Record { backgroundImage: (tolNode.value.imgName![idx]! != null) ? `${SCRIM_GRADIENT},url('${getImagePath(tolNode.value.imgName![idx]! as string)}')` : 'none', - backgroundColor: props.uiOpts.bgColorDark, + backgroundColor: store.color.bgDark, backgroundSize: '125%', borderRadius: 'inherit', clipPath: (idx == 0) ? 'polygon(0 0, 100% 0, 0 100%)' : 'polygon(100% 0, 0 100%, 100% 100%)', @@ -438,10 +439,10 @@ const nonleafStyles = computed((): Record => { const nonleafHeaderStyles = computed((): Record => { let styles: Record = { position: 'static', - height: props.lytOpts.headerSz + 'px', + height: store.lytOpts.headerSz + 'px', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', - backgroundColor: props.uiOpts.nonleafHeaderColor, + backgroundColor: store.nonleafHeaderColor, }; if (isOverflownRoot.value){ styles = { @@ -451,7 +452,7 @@ const nonleafHeaderStyles = computed((): Record => { left: '0', borderTopRightRadius: '0', zIndex: '1', - boxShadow: props.uiOpts.shadowNormal, + boxShadow: store.shadowNormal, }; } return styles; @@ -461,19 +462,19 @@ const nonleafHeaderTextStyles = computed(() => ({ fontSize: fontSz.value + 'px', paddingLeft: (fontSz.value * 0.2) + 'px', textAlign: 'center', - color: props.uiOpts.textColor, + color: store.color.text, // For ellipsis overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', })); const sepSweptAreaStyles = computed((): Record => { - let borderR = props.uiOpts.borderRadius + 'px'; + let borderR = store.borderRadius + 'px'; let styles = { position: 'absolute', backgroundColor: nonleafBgColor.value, boxShadow: boxShadow.value, - transitionDuration: props.uiOpts.transitionDuration + 'ms', + transitionDuration: store.transitionDuration + 'ms', transitionProperty: 'left, top, width, height, visibility', transitionTimingFunction: 'ease-out', }; @@ -495,7 +496,7 @@ const sepSweptAreaStyles = computed((): Record => { ...styles, visibility: 'hidden', left: '0', - top: props.lytOpts.headerSz + 'px', + top: store.lytOpts.headerSz + 'px', width: '0', height: '0', borderRadius: borderR, @@ -512,8 +513,8 @@ const sepSweptAreaHideEdgeClass = computed((): string => { } }); const infoIconStyles = computed((): Record => { - let size = (props.lytOpts.headerSz * 0.85); - let marginSz = (props.lytOpts.headerSz - size); + let size = (store.lytOpts.headerSz * 0.85); + let marginSz = (store.lytOpts.headerSz - size); return { width: size + 'px', height: size + 'px', diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 4c24bae..3ccbc46 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -70,7 +70,11 @@ import {ref, computed, watch, onMounted, PropType} from 'vue'; import SButton from './SButton.vue'; import CloseIcon from './icon/CloseIcon.vue'; -import {Action, UiOptions} from '../lib'; +import {Action} from '../lib'; +import {useStore} from '../store'; + +// Global store +const store = useStore(); // Props + events const props = defineProps({ @@ -79,9 +83,8 @@ const props = defineProps({ triggerFlag: {type: Boolean, required: true}, // Used to indicate that a tutorial-requested 'trigger' action has been done skipWelcome: {type: Boolean, default: false}, - uiOpts: {type: Object as PropType, required: true}, }); -const touchDevice = computed(() => props.uiOpts.touchDevice); +const touchDevice = computed(() => store.touchDevice); const emit = defineEmits(['close', 'stage-chg', 'skip']); // For tutorial stage @@ -118,13 +121,13 @@ function onStageChange(){ if (stage.value == 1 && !disabledOnce){ for (let action of STAGE_ACTIONS){ if (action != null && !props.actionsDone.has(action)){ - props.uiOpts.disabledActions.add(action); + store.disabledActions.add(action); } } disabledOnce = true; } // Enable action for this stage - props.uiOpts.disabledActions.delete(STAGE_ACTIONS[stage.value - 1]); + store.disabledActions.delete(STAGE_ACTIONS[stage.value - 1]); // Notify of new trigger-action emit('stage-chg', STAGE_ACTIONS[stage.value - 1]); // After stage 1, show prev/next buttons @@ -148,8 +151,8 @@ watch(() => props.triggerFlag, () => { // Styles const styles = computed(() => ({ - backgroundColor: props.uiOpts.bgColorDark, - color: props.uiOpts.textColor, + backgroundColor: store.color.bgDark, + color: store.color.text, })); const contentStyles = { padding: '0 0.5cm', @@ -157,7 +160,7 @@ const contentStyles = { textAlign: 'center', }; const buttonStyles = computed(() => ({ - color: props.uiOpts.textColor, - backgroundColor: props.uiOpts.bgColor, + color: store.color.text, + backgroundColor: store.color.bg, })); -- cgit v1.2.3