diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 18 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 23 |
2 files changed, 21 insertions, 20 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index e49d688..9b74fee 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -2,20 +2,20 @@ import {defineComponent, PropType} from 'vue'; import {LayoutNode} from '../lib'; -//component holds a tree-node structure representing a tile or tile-group to be rendered +// Component holds a tree-node structure representing a tile or tile-group to be rendered export default defineComponent({ - name: 'tile', //need this to use self in template + name: 'tile', // Need this to use self in template props: { layoutNode: {type: Object as PropType<LayoutNode>, required: true}, isRoot: {type: Boolean, default: false}, - //settings passed in from parent component + // Settings passed in from parent component transitionDuration: {type: Number, required: true}, headerSz: {type: Number, required: true}, tileSpacing: {type: Number, required: true}, }, data(){ return { - //used during transitions and to emulate/show an apparently-joined div + // Used during transitions and to emulate/show an apparently-joined div zIdx: 0, overflow: this.isRoot ? 'hidden' : 'visible', } @@ -27,18 +27,18 @@ export default defineComponent({ }, tileStyles(): Record<string,string> { return { - //place using layoutNode, with centering if root + // Places div using layoutNode, with centering if root position: 'absolute', left: this.isRoot ? '50%' : this.layoutNode.pos[0] + 'px', top: this.isRoot ? '50%' : this.layoutNode.pos[1] + 'px', transform: this.isRoot ? 'translate(-50%, -50%)' : 'none', width: this.layoutNode.dims[0] + 'px', height: this.layoutNode.dims[1] + 'px', - //other bindings + // Other bindings transitionDuration: this.transitionDuration + 'ms', zIndex: String(this.zIdx), overflow: String(this.overflow), - //static + // Static styles outline: 'black solid 1px', backgroundColor: 'white', transitionProperty: 'left, top, width, height', @@ -100,7 +100,7 @@ export default defineComponent({ methods: { onLeafClick(){ this.$emit('leaf-clicked', this.layoutNode); - //increase z-index and hide overflow during transition + // Increase z-index and hide overflow during transition this.zIdx = 1; this.overflow = 'hidden'; setTimeout(() => {this.zIdx = 0; this.overflow = 'visible'}, this.transitionDuration); @@ -110,7 +110,7 @@ export default defineComponent({ }, onHeaderClick(){ this.$emit('header-clicked', this.layoutNode); - //increase z-index and hide overflow during transition + // Increase z-index and hide overflow during transition this.zIdx = 1; this.overflow = 'hidden'; setTimeout(() => {this.zIdx = 0; this.overflow = 'visible'}, this.transitionDuration); diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index ca60014..b2019ea 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -3,11 +3,12 @@ import {defineComponent} from 'vue'; import Tile from './Tile.vue'; import {TolNode, LayoutTree, LayoutNode} from '../lib'; import type {LayoutOptions} from '../lib'; -//import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain +// Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain -//obtain tree-of-life data +// Obtain tree-of-life data import tolRaw from '../tol.json'; -function preprocessTol(node: any): any { //adds 'children' fields if missing +function preprocessTol(node: any): any { + // Add 'children' fields if missing if (node.children == null){ node.children = []; } else { @@ -17,9 +18,9 @@ function preprocessTol(node: any): any { //adds 'children' fields if missing } const tol: TolNode = preprocessTol(tolRaw); -//configurable settings +// Configurable settings let layoutOptions: LayoutOptions = { - //integer values specify pixels + // Integer values specify pixels tileSpacing: 5, headerSz: 20, minTileSz: 50, @@ -31,13 +32,13 @@ let layoutOptions: LayoutOptions = { sweepingToParent: true, }; let otherOptions = { - //integer values specify milliseconds + // Integer values specify milliseconds transitionDuration: 300, - resizeDelay: 100, //during window-resizing, relayout tiles after this delay instead of continously + resizeDelay: 100, // During window-resizing, relayout tiles after this delay instead of continously }; -//component holds a tree structure representing a subtree of 'tol' to be rendered -//collects events about tile expansion/collapse and window-resize, and initiates relayout of tiles +// Component holds a tree structure representing a subtree of 'tol' to be rendered +// Collects events about tile expansion/collapse and window-resize, and initiates relayout of tiles export default defineComponent({ data(){ return { @@ -52,13 +53,13 @@ export default defineComponent({ methods: { onResize(){ if (!this.resizeThrottled){ - //update data and relayout tiles + // Update data and relayout tiles this.width = document.documentElement.clientWidth; this.height = document.documentElement.clientHeight; if (!this.layoutTree.tryLayout([0,0], [this.width,this.height])){ console.log('Unable to layout tree'); } - //prevent re-triggering until after a delay + // Prevent re-triggering until after a delay this.resizeThrottled = true; setTimeout(() => {this.resizeThrottled = false;}, otherOptions.resizeDelay); } |