diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 5 | ||||
| -rw-r--r-- | 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 @@ -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; +} |