diff options
| -rw-r--r-- | src/App.vue | 8 | ||||
| -rw-r--r-- | src/util.ts | 18 |
2 files changed, 23 insertions, 3 deletions
diff --git a/src/App.vue b/src/App.vue index 2b24c6e..534b2df 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,7 +17,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 './util'; +import {arraySum, randWeightedChoice, getScrollBarWidth} from './util'; // Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain // Type representing auto-mode actions @@ -38,7 +38,7 @@ function getReverseAction(action: Action): Action | null { } } -// Get tree-of-life data +// Initialise tree-of-life data const rootName = "cellular organisms"; const tolMap: TolMap = new Map(); tolMap.set(rootName, new TolNode()); @@ -79,7 +79,7 @@ const defaultUiOpts = { // For other components appBgColor: '#292524', tileAreaOffset: 5, //px (space between root tile and display boundary) - scrollGap: 12, //px (gap for overflown-root and ancestry-bar scrollbars, used to prevent overlap) + scrollGap: getScrollBarWidth(), //px (gap for overflown-root and ancestry-bar scrollbars, used to prevent overlap) ancestryBarSz: defaultLytOpts.minTileSz * 2, //px (breadth of ancestry-bar area) ancestryBarBgColor: '#44403c', ancestryTileMargin: 5, //px (gap between detached-ancestor tiles) @@ -520,6 +520,8 @@ export default defineComponent({ if (!this.resizeThrottled){ this.width = document.documentElement.clientWidth; this.height = document.documentElement.clientHeight; + this.uiOpts.scrollGap = getScrollBarWidth(); + // Re-layout tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.lytOpts, {allowCollapse: true, layoutMap: this.layoutMap}); this.overflownRoot = false; diff --git a/src/util.ts b/src/util.ts index 78b7870..042f37f 100644 --- a/src/util.ts +++ b/src/util.ts @@ -102,3 +102,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; +} |