diff options
| -rw-r--r-- | src/components/Tile.vue | 4 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 26 |
2 files changed, 15 insertions, 15 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 444ee9a..5b0fbd1 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -3,7 +3,7 @@ import {defineComponent, PropType} from 'vue'; import {LayoutNode} from '../lib'; // Configurable settings -let options = { +const defaultOptions = { borderRadius: 5, //px shadowNormal: '0 0 2px black', shadowWithHover: '0 0 1px 2px greenyellow', @@ -32,7 +32,7 @@ export default defineComponent({ }, data(){ return { - options: options, + options: defaultOptions, // Used during transitions and to emulate/show an apparently-joined div zIdx: 0, overflow: 'visible', diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 85516c9..a9ed667 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -19,7 +19,7 @@ function preprocessTol(node: any): any { const tol: TolNode = preprocessTol(tolRaw); // Configurable settings -let layoutOptions: LayoutOptions = { +const defaultLayoutOptions: LayoutOptions = { tileSpacing: 8, //px headerSz: 20, //px minTileSz: 50, //px @@ -30,10 +30,10 @@ let layoutOptions: LayoutOptions = { sweptNodesPrio: 'linear', //'linear' | 'sqrt' | 'pow-2/3' sweepingToParent: true, }; -let otherOptions = { - // Integer values specify milliseconds - transitionDuration: 300, - resizeDelay: 100, // During window-resizing, relayout tiles after this delay instead of continously +const defaultOtherOptions = { + rootOffset: 5, //px (min offset of root tile from display area boundary) + transitionDuration: 300, //ms + resizeDelay: 100, //ms (delay for non-continous relayout during window-resizing) }; // Component holds a tree structure representing a subtree of 'tol' to be rendered @@ -41,11 +41,11 @@ let otherOptions = { export default defineComponent({ data(){ return { - layoutTree: new LayoutTree(tol, layoutOptions, 0), - width: document.documentElement.clientWidth, - height: document.documentElement.clientHeight, - layoutOptions: layoutOptions, - otherOptions: otherOptions, + layoutTree: new LayoutTree(tol, defaultLayoutOptions, 0), + layoutOptions: {...defaultLayoutOptions}, + otherOptions: {...defaultOtherOptions}, + width: document.documentElement.clientWidth - (defaultOtherOptions.rootOffset * 2), + height: document.documentElement.clientHeight - (defaultOtherOptions.rootOffset * 2), resizeThrottled: false, } }, @@ -53,14 +53,14 @@ export default defineComponent({ onResize(){ if (!this.resizeThrottled){ // Update data and relayout tiles - this.width = document.documentElement.clientWidth; - this.height = document.documentElement.clientHeight; + this.width = document.documentElement.clientWidth - (this.otherOptions.rootOffset * 2); + this.height = document.documentElement.clientHeight - (this.otherOptions.rootOffset * 2); if (!this.layoutTree.tryLayout([0,0], [this.width,this.height])){ console.log('Unable to layout tree'); } // Prevent re-triggering until after a delay this.resizeThrottled = true; - setTimeout(() => {this.resizeThrottled = false;}, otherOptions.resizeDelay); + setTimeout(() => {this.resizeThrottled = false;}, this.otherOptions.resizeDelay); } }, onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){ |