Add auto-hiding of ancestors on leaf-click

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<boolean> {
+			// 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<boolean> {
+			// 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 @@
 								</ul>
 							</li>
 							<li>
-								<h2 class="font-bold">Slider Resets</h2>
+								<h2 class="font-bold">Auto-hide ancestors</h2>
+								<p>
+									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.
+								</p>
+							</li>
+							<li>
+								<h2 class="font-bold">Slider resets</h2>
 								<p>
 									You can {{touchDevice ? 'tap' : 'click'}} on
 									a slider's label to reset it to the default value.
@@ -213,14 +222,6 @@
 								</p>
 							</li>
 						</ul>
-						<br/>
-						<h1 class="text-lg font-bold">Overflowing Tiles</h1>
-						<p>
-							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.
-						</p>
 					</div>
 				</template>
 			</s-collapsible>
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 @@
 				<label> <input type="checkbox" v-model="uiOpts.searchJumpMode"
 					@change="onSettingChg('UI', 'searchJumpMode')"/> Skip search animation </label>
 			</div>
+			<div>
+				<label> <input type="checkbox" v-model="uiOpts.autoHide"
+					@change="onSettingChg('UI', 'autoHide')"/> Auto-hide ancestors </label>
+			</div>
 			<div v-if="uiOpts.touchDevice == false">
 				<label> <input type="checkbox" v-model="uiOpts.disableShortcuts"
 					@change="onSettingChg('UI', 'disableShortcuts')"/> Disable keyboard shortcuts </label>
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<Action>,
+	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<Action>,
+		autoHide: true,
 		disableShortcuts: false,
 	};
 }