aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue46
-rw-r--r--src/components/AncestryBar.vue8
-rw-r--r--src/components/HelpModal.vue6
-rw-r--r--src/components/SearchModal.vue8
-rw-r--r--src/components/SettingsModal.vue10
-rw-r--r--src/components/Tile.vue10
-rw-r--r--src/components/TileInfoModal.vue4
-rw-r--r--src/components/TutorialPane.vue6
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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 12:30:00 +0000