From f335593f9bfbd1eb3db939b23af799709d5d8104 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Thu, 7 Jul 2022 18:06:38 +1000 Subject: Add auto-hiding of ancestors on leaf-click --- src/App.vue | 56 ++++++++++++++++++++++++++++------------ src/components/HelpModal.vue | 19 +++++++------- src/components/SettingsModal.vue | 4 +++ src/lib.ts | 2 ++ 4 files changed, 56 insertions(+), 25 deletions(-) diff --git a/src/App.vue b/src/App.vue index e882bce..29df31b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -293,21 +293,37 @@ export default defineComponent({ this.handleActionForTutorial('expand'); this.setLastFocused(null); } - // If clicking child of overflowing active-root, fail + // If clicking child of overflowing active-root if (this.overflownRoot){ - if (!subAction){ - layoutNode.failFlag = !layoutNode.failFlag; // Triggers failure animation + if (!this.uiOpts.autoHide){ + if (!subAction){ + layoutNode.failFlag = !layoutNode.failFlag; // Triggers failure animation + } + return false; + } else { + return await this.onLeafClickHeld(layoutNode); } - return false; } // Function for expanding tile - let doExpansion = () => { + let doExpansion = async () => { let lytFnOpts = { allowCollapse: false, chg: {type: 'expand', node: layoutNode, tolMap: this.tolMap} as LayoutTreeChg, layoutMap: this.layoutMap }; let success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, lytFnOpts); + // Handle auto-hide + if (!success && this.uiOpts.autoHide){ + while (!success && layoutNode != this.activeRoot){ + let node = layoutNode; + while (node.parent != this.activeRoot){ + node = node.parent!; + } + await this.onNonleafClickHeld(node, true); + this.updateAreaDims(); + success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, lytFnOpts); + } + } // If expanding active-root with too many children to fit, allow overflow if (!success && layoutNode == this.activeRoot){ success = tryLayout(this.activeRoot, this.tileAreaDims, @@ -375,6 +391,12 @@ export default defineComponent({ }, // For expand-to-view and ancestry-bar events async onLeafClickHeld(layoutNode: LayoutNode, subAction = false): Promise { + // Special case for active root + if (layoutNode == this.activeRoot){ + console.log('Ignored expand-to-view on active-root node'); + return false; + } + // if (!subAction){ if (this.isDisabled('expandToView')){ return false; @@ -382,10 +404,6 @@ export default defineComponent({ this.handleActionForTutorial('expandToView'); this.setLastFocused(null); } - // Special case for active root - if (layoutNode == this.activeRoot){ - return await this.onLeafClick(layoutNode, subAction); - } // Function for expanding tile let doExpansion = async () => { // Hide ancestors @@ -429,6 +447,12 @@ export default defineComponent({ } }, async onNonleafClickHeld(layoutNode: LayoutNode, subAction = false): Promise { + // Special case for active root + if (layoutNode == this.activeRoot){ + console.log('Ignored expand-to-view on active-root node'); + return false; + } + // if (!subAction){ if (this.isDisabled('expandToView')){ return false; @@ -436,11 +460,6 @@ export default defineComponent({ this.handleActionForTutorial('expandToView'); this.setLastFocused(null); } - // Special case for active root - if (layoutNode == this.activeRoot){ - console.log('Ignored expand-to-view on active-root node'); - return false; - } // Hide ancestors LayoutNode.hideUpward(layoutNode, this.layoutMap); this.activeRoot = layoutNode; @@ -463,7 +482,13 @@ export default defineComponent({ let success: boolean; this.updateAreaDims(); if (!collapse){ - success = this.relayoutWithCollapse(); + // Relayout, attempting to have the ancestor expanded + this.relayoutWithCollapse(false); + if (layoutNode.children.length > 0){ + this.relayoutWithCollapse(false); // Second pass for regularity + } else { + await this.onLeafClick(layoutNode, true); + } } else { success = await this.onNonleafClick(layoutNode, true); // For reducing tile-flashing on-screen } @@ -818,7 +843,6 @@ export default defineComponent({ } } // Relayout - this.overflownRoot = false; if (!changedTree){ this.updateAreaDims(); this.relayoutWithCollapse(); diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 4f35564..9f7ff0b 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -179,7 +179,16 @@
  • -

    Slider Resets

    +

    Auto-hide ancestors

    +

    + Normally, if there isn't enough space to expand a tile, + an ancestor is hidden, and expansion is tried again. + With this setting disabled, no such attempt is made. + This makes tile movements more predictable. +

    +
    • +
  • +

    Slider resets

    You can {{touchDevice ? 'tap' : 'click'}} on a slider's label to reset it to the default value. @@ -213,14 +222,6 @@

    • -
    -

    Overflowing Tiles

    -

    - Some tiles have too many children to fit on-screen at once, and are displayed - with a scroll bar. For layout reasons, this is only done if they are the - outermost tile, so you may need to {{touchDevice ? 'double tap' : 'click and hold'}} - the tile to expand it. -

    diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index f0b9dc0..75db34b 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -93,6 +93,10 @@ +
    + +
    diff --git a/src/lib.ts b/src/lib.ts index 7372cde..faec861 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -111,6 +111,7 @@ export type UiOptions = { searchJumpMode: boolean, tutorialSkip: boolean, disabledActions: Set, + autoHide: boolean, // Upon a leaf-click fail, hide an ancestor and try again disableShortcuts: boolean, }; // Option defaults @@ -174,6 +175,7 @@ export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions { searchJumpMode: false, tutorialSkip: false, disabledActions: new Set() as Set, + autoHide: true, disableShortcuts: false, }; } -- cgit v1.2.3