From a2a9434636ae4d9237d69b6c3bc8f538570129e9 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 27 May 2022 20:53:17 +1000
Subject: Add back code that dynamically gets scrollbar widths

Was deleted due to apparent redundancy. Turns out it was still needed
for overflown-node layout.
---
 src/App.vue |  5 +++--
 src/lib.ts  | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 73671d5..a27cc08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,7 @@ import type {TolMap} from './tol';
 import {TolNode} from './tol';
 import {LayoutNode, initLayoutTree, initLayoutMap, tryLayout} from './layout';
 import type {LayoutOptions, LayoutTreeChg} from './layout';
-import {arraySum, randWeightedChoice} from './lib';
+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
 
@@ -78,6 +78,7 @@ const defaultUiOpts = {
 	// For other components
 	appBgColor: '#292524',
 	tileAreaOffset: 5, //px (space between root tile and display boundary)
+	scrollGap: getScrollBarWidth(),
 	ancestryBarImgSz: defaultLytOpts.minTileSz * 2, //px
 	ancestryBarBgColor: '#44403c',
 	ancestryTileMargin: 5, //px (gap between detached-ancestor tiles)
@@ -591,6 +592,7 @@ export default defineComponent({
 		onResize(){
 			if (this.pendingResizeHdlr == 0){
 				this.pendingResizeHdlr = setTimeout(() => {
+					this.uiOpts.scrollGap = getScrollBarWidth();
 					this.updateAreaDims().then(() => {
 						this.relayoutWithCollapse();
 						this.pendingResizeHdlr = 0;
@@ -687,7 +689,6 @@ export default defineComponent({
 			this.overflownRoot = false;
 		},
 		updateAreaDims(){
-			console.log('updating dims')
 			let mainAreaEl = this.$refs.mainArea as HTMLElement;
 			this.mainAreaDims = [mainAreaEl.offsetWidth, mainAreaEl.offsetHeight];
 			// Need to wait until ancestor-bar is laid-out before computing tileAreaDims
diff --git a/src/lib.ts b/src/lib.ts
index 69fac57..c13992c 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -111,3 +111,21 @@ export function capitalizeWords(str: string){
 	return str.replace(/\b\w/g, x => x.toUpperCase());
 		// '\b' matches word boundary, '\w' is like [a-zA-Z0-9_],
 }
+// Dynamically obtains scroll bar width
+// From stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
+export function getScrollBarWidth(){
+	// Create hidden outer div
+	let outer = document.createElement('div');
+	outer.style.visibility = 'hidden';
+	outer.style.overflow = 'scroll';
+	document.body.appendChild(outer);
+	// Create inner div
+	let inner = document.createElement('div');
+	outer.appendChild(inner);
+	// Get width difference
+	let scrollBarWidth = outer.offsetWidth - inner.offsetWidth;
+	// Remove temporary divs
+	outer.parentNode!.removeChild(outer);
+	//
+	return scrollBarWidth;
+}
-- 
cgit v1.2.3