From 64b597f0b615dfcf964450bac4a6506704a2b931 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 23 Mar 2022 18:34:23 +1100 Subject: Make options propagate from TileTree --- src/components/ParentBar.vue | 13 ++----------- src/components/Tile.vue | 33 +++++++-------------------------- src/components/TileImg.vue | 2 +- src/components/TileTree.vue | 29 ++++++++++++++++++++++++----- 4 files changed, 34 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/components/ParentBar.vue b/src/components/ParentBar.vue index 8cd1f3b..fab8f9f 100644 --- a/src/components/ParentBar.vue +++ b/src/components/ParentBar.vue @@ -3,26 +3,17 @@ import {defineComponent, PropType} from 'vue'; import {LayoutNode} from '../lib'; import TileImg from './TileImg.vue' -const defaultTileImgOptions = { - borderRadius: 5, - shadowNormal: '0 0 2px black', - shadowHighlight: '0 0 1px 2px greenyellow', - imgTilePadding: 4, - imgTileFontSz: 15, - imgTileColor: '#fafaf9', - expandableImgTileColor: 'greenyellow', -} export default defineComponent({ props: { pos: {type: Array as unknown as PropType<[number,number]>, required: true}, dims: {type: Array as unknown as PropType<[number,number]>, required: true}, nodes: {type: Array as PropType, required: true}, + options: {type: Object, required: true}, }, data(){ return { tileMargin: 5, //px (gap between separated-parent tiles) scrollBarOffset: 10, //px (gap for scrollbar, used to prevent overlap with tiles) - tileImgOptions: {...defaultTileImgOptions}, }; }, computed: { @@ -64,6 +55,6 @@ export default defineComponent({ diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 0e568bb..579e880 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -3,36 +3,17 @@ import {defineComponent, PropType} from 'vue'; import {LayoutNode} from '../lib'; import TileImg from './TileImg.vue'; -// Configurable settings -const defaultOptions = { - borderRadius: 5, //px - shadowNormal: '0 0 2px black', - shadowHighlight: '0 0 1px 2px greenyellow', - dblClickWait: 200, //ms - // For leaf tiles - imgTilePadding: 4, //px - imgTileFontSz: 15, //px - imgTileColor: '#fafaf9', - expandableImgTileColor: 'greenyellow', //yellow, greenyellow, turquoise, - // For non-leaf tile-groups - nonLeafBgColors: ['#44403c', '#57534e'], //tiles at depth N use the Nth color, repeating from the start as needed - nonLeafHeaderFontSz: 15, //px - nonLeafHeaderColor: '#fafaf9', - nonLeafHeaderBgColor: '#1c1917', -}; - // Component holds a tree-node structure representing a tile or tile-group to be rendered export default defineComponent({ props: { layoutNode: {type: Object as PropType, required: true}, - // Settings from parent component + options: {type: Object, required: true}, + // Layout settings from parent headerSz: {type: Number, required: true}, tileSpacing: {type: Number, required: true}, - transitionDuration: {type: Number, required: true}, }, data(){ return { - options: defaultOptions, nonLeafHighlight: false, dblClickTimer: 0, // Used to delay a click action until a double-click timeout ends zIdx: 0, // Used during transitions @@ -64,7 +45,7 @@ export default defineComponent({ height: (this.layoutNode.hidden ? 0 : this.layoutNode.dims[1]) + 'px', visibility: this.layoutNode.hidden ? 'hidden' : 'visible', // Other bindings - transitionDuration: this.transitionDuration + 'ms', + transitionDuration: this.options.transitionDuration + 'ms', zIndex: String(this.zIdx), overflow: String(this.overflow), // Static styles @@ -112,7 +93,7 @@ export default defineComponent({ position: 'absolute', backgroundColor: this.nonLeafBgColor, boxShadow: this.nonLeafHighlight ? this.options.shadowHighlight : this.options.shadowNormal, - transitionDuration: this.transitionDuration + 'ms', + transitionDuration: this.options.transitionDuration + 'ms', transitionProperty: 'left, top, width, height', transitionTimingFunction: 'ease-out', }; @@ -150,7 +131,7 @@ export default defineComponent({ // Temporary changes to prevent content overlap and overflow this.zIdx = 1; this.overflow = 'hidden'; - setTimeout(() => {this.zIdx = 0; this.overflow = 'visible';}, this.transitionDuration); + setTimeout(() => {this.zIdx = 0; this.overflow = 'visible';}, this.options.transitionDuration); }; if (evt.detail == 1){ this.dblClickTimer = setTimeout(() => { @@ -171,7 +152,7 @@ export default defineComponent({ let prepForTransition = () => { // Temporary changes to prevent content overlap and overflow this.zIdx = 1; - setTimeout(() => {this.zIdx = 0}, this.transitionDuration); + setTimeout(() => {this.zIdx = 0}, this.options.transitionDuration); }; if (evt.detail == 1){ this.dblClickTimer = setTimeout(() => { @@ -227,7 +208,7 @@ export default defineComponent({ diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue index 79a8e7b..867b57a 100644 --- a/src/components/TileImg.vue +++ b/src/components/TileImg.vue @@ -66,6 +66,6 @@ export default defineComponent({ diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index d36949e..f007935 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -31,8 +31,26 @@ const defaultLayoutOptions: LayoutOptions = { sweptNodesPrio: 'pow-2/3', //'linear' | 'sqrt' | 'pow-2/3' sweepingToParent: true, }; -const defaultOtherOptions = { +const defaultComponentOptions = { + // For leaf/non_leaf tile and separated-parent components + borderRadius: 5, //px + shadowNormal: '0 0 2px black', + shadowHighlight: '0 0 1px 2px greenyellow', + // For leaf and separated-parent components + imgTilePadding: 4, //px + imgTileFontSz: 15, //px + imgTileColor: '#fafaf9', + expandableImgTileColor: 'greenyellow', //yellow, greenyellow, turquoise, + // For non-leaf tile-group components + nonLeafBgColors: ['#44403c', '#57534e'], //tiles at depth N use the Nth color, repeating from the start as needed + nonLeafHeaderFontSz: 15, //px + nonLeafHeaderColor: '#fafaf9', + nonLeafHeaderBgColor: '#1c1917', + // Timing related transitionDuration: 300, //ms + dblClickWait: 200, //ms +}; +const defaultOwnOptions = { tileAreaOffset: 5, //px (space between root tile and display boundary) parentBarSz: defaultLayoutOptions.minTileSz * 2, //px (breadth of separated-parents area) }; @@ -50,7 +68,8 @@ export default defineComponent({ layoutTree: layoutTree, activeRoot: layoutTree, layoutOptions: {...defaultLayoutOptions}, - ...defaultOtherOptions, + componentOptions: {...defaultComponentOptions}, + ...defaultOwnOptions, } }, computed: { @@ -171,11 +190,11 @@ export default defineComponent({ -- cgit v1.2.3