diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 48 | ||||
| -rw-r--r-- | src/components/AncestryBar.vue | 8 | ||||
| -rw-r--r-- | src/components/HelpModal.vue | 2 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 2 | ||||
| -rw-r--r-- | src/components/SettingsPane.vue | 32 | ||||
| -rw-r--r-- | src/components/Tile.vue | 75 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 8 |
7 files changed, 88 insertions, 87 deletions
diff --git a/src/App.vue b/src/App.vue index 6f9c77c..380a814 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,7 +25,7 @@ const tol: TolNode = tolFromRaw(tolRaw); const tolMap = getTolMap(tol); // Configurable settings -const defaultLayoutOptions: LayoutOptions = { +const defaultLytOpts: LayoutOptions = { tileSpacing: 8, //px headerSz: 20, //px minTileSz: 50, //px @@ -36,7 +36,7 @@ const defaultLayoutOptions: LayoutOptions = { sweptNodesPrio: 'pow-2/3', //'linear' | 'sqrt' | 'pow-2/3' sweepingToParent: true, }; -const defaultComponentOptions = { +const defaultUiOpts = { // For leaf/non_leaf tile and detached-ancestor components borderRadius: 5, //px shadowNormal: '0 0 2px black', @@ -64,7 +64,7 @@ const defaultComponentOptions = { }; const defaultOwnOptions = { tileAreaOffset: 5, //px (space between root tile and display boundary) - ancestryBarSz: defaultLayoutOptions.minTileSz * 2, //px (breadth of ancestry-bar area) + ancestryBarSz: defaultLytOpts.minTileSz * 2, //px (breadth of ancestry-bar area) }; // Type representing auto-mode actions @@ -110,8 +110,8 @@ export default defineComponent({ autoPrevActionFail: false, // Used in auto-mode to avoid re-trying a failed expand/collapse helpOpen: false, // Options - layoutOptions: {...defaultLayoutOptions}, - componentOptions: {...defaultComponentOptions}, + lytOpts: {...defaultLytOpts}, + uiOpts: {...defaultUiOpts}, ...defaultOwnOptions, // For window-resize handling width: document.documentElement.clientWidth, @@ -186,7 +186,7 @@ export default defineComponent({ this.width = document.documentElement.clientWidth; this.height = document.documentElement.clientHeight; tryLayout(this.activeRoot, this.layoutMap, - this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); + this.tileAreaPos, this.tileAreaDims, this.lytOpts, true); // Prevent re-triggering until after a delay this.resizeThrottled = true; setTimeout(() => {this.resizeThrottled = false;}, this.resizeDelay); @@ -195,7 +195,7 @@ export default defineComponent({ // For tile expand/collapse events onInnerLeafClicked(layoutNode: LayoutNode){ let success = tryLayout(this.activeRoot, this.layoutMap, - this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'expand', node: layoutNode}); + this.tileAreaPos, this.tileAreaDims, this.lytOpts, false, {type: 'expand', node: layoutNode}); if (!success){ layoutNode.expandFailFlag = !layoutNode.expandFailFlag; // Triggers failure animation } @@ -204,7 +204,7 @@ export default defineComponent({ onInnerHeaderClicked(layoutNode: LayoutNode){ let oldChildren = layoutNode.children; let success = tryLayout(this.activeRoot, this.layoutMap, - this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'collapse', node: layoutNode}); + this.tileAreaPos, this.tileAreaDims, this.lytOpts, false, {type: 'collapse', node: layoutNode}); if (!success){ layoutNode.collapseFailFlag = !layoutNode.collapseFailFlag; // Triggers failure animation } @@ -219,7 +219,7 @@ export default defineComponent({ LayoutNode.hideUpward(layoutNode); this.activeRoot = layoutNode; tryLayout(this.activeRoot, this.layoutMap, - this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode}); + this.tileAreaPos, this.tileAreaDims, this.lytOpts, true, {type: 'expand', node: layoutNode}); }, onInnerHeaderClickHeld(layoutNode: LayoutNode){ if (layoutNode == this.activeRoot){ @@ -228,12 +228,12 @@ export default defineComponent({ } LayoutNode.hideUpward(layoutNode); this.activeRoot = layoutNode; - tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); + tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true); }, onDetachedAncestorClicked(layoutNode: LayoutNode){ LayoutNode.showDownward(layoutNode); this.activeRoot = layoutNode; - tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); + tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true); }, // For info modal events onInnerInfoIconClicked(node: LayoutNode){ @@ -252,7 +252,7 @@ export default defineComponent({ this.settingsOpen = false; }, onLayoutOptionChange(){ - tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); + tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true); }, // onSearchIconClick(){ @@ -312,13 +312,13 @@ export default defineComponent({ layoutNode = this.layoutMap.get(ancestor.name)!; } this.onDetachedAncestorClicked(layoutNode!); - setTimeout(() => this.expandToTolNode(tolNode), this.componentOptions.transitionDuration); + setTimeout(() => this.expandToTolNode(tolNode), this.uiOpts.transitionDuration); return; } // Attempt tile-expand let success = this.onInnerLeafClicked(layoutNode); if (success){ - setTimeout(() => this.expandToTolNode(tolNode), this.componentOptions.transitionDuration); + setTimeout(() => this.expandToTolNode(tolNode), this.uiOpts.transitionDuration); return; } // Attempt expand-to-view on ancestor just below activeRoot @@ -336,7 +336,7 @@ export default defineComponent({ } layoutNode = this.layoutMap.get(ancestor.name)!; this.onInnerHeaderClickHeld(layoutNode); - setTimeout(() => this.expandToTolNode(tolNode), this.componentOptions.transitionDuration); + setTimeout(() => this.expandToTolNode(tolNode), this.uiOpts.transitionDuration); }, onOverlayClick(){ this.animationActive = false; @@ -445,7 +445,7 @@ export default defineComponent({ this.onDetachedAncestorClicked(node.parent!); break; } - setTimeout(this.autoAction, this.componentOptions.transitionDuration + this.autoWaitTime); + setTimeout(this.autoAction, this.uiOpts.transitionDuration + this.autoWaitTime); this.autoPrevAction = action; } }, @@ -469,7 +469,7 @@ export default defineComponent({ created(){ window.addEventListener('resize', this.onResize); window.addEventListener('keyup', this.onKeyUp); - tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); + tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.lytOpts, true); }, unmounted(){ window.removeEventListener('resize', this.onResize); @@ -484,13 +484,13 @@ export default defineComponent({ <template> <div :style="styles"> - <tile :layoutNode="layoutTree" - :headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing" :options="componentOptions" + <tile :layoutNode="layoutTree" :lytOpts="lytOpts" :uiOpts="uiOpts" @leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked" @leaf-click-held="onInnerLeafClickHeld" @header-click-held="onInnerHeaderClickHeld" @info-icon-clicked="onInnerInfoIconClicked"/> <ancestry-bar v-if="detachedAncestors != null" - :pos="[0,0]" :dims="ancestryBarDims" :nodes="detachedAncestors" :options="componentOptions" + :pos="[0,0]" :dims="ancestryBarDims" :nodes="detachedAncestors" + :lytOpts="lytOpts" :uiOpts="uiOpts" @detached-ancestor-clicked="onDetachedAncestorClicked" @info-icon-clicked="onInnerInfoIconClicked"/> <!-- Icons --> <search-icon @click="onSearchIconClick" @@ -501,19 +501,19 @@ export default defineComponent({ class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/> <!-- Modals --> <transition name="fade"> - <tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions" + <tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :uiOpts="uiOpts" @info-modal-close="onInfoModalClose"/> </transition> <transition name="fade"> - <search-modal v-if="searchOpen" :layoutTree="layoutTree" :tolMap="tolMap" :options="componentOptions" + <search-modal v-if="searchOpen" :layoutTree="layoutTree" :tolMap="tolMap" :uiOpts="uiOpts" @search-close="onSearchClose" @search-node="onSearchNode" ref="searchModal"/> </transition> <transition name="fade"> - <help-modal v-if="helpOpen" :options="componentOptions" @help-modal-close="onHelpModalClose"/> + <help-modal v-if="helpOpen" :uiOpts="uiOpts" @help-modal-close="onHelpModalClose"/> </transition> <!-- Settings --> <transition name="slide-bottom-right"> - <settings-pane v-if="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions" + <settings-pane v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts" @settings-close="onSettingsClose" @layout-option-change="onLayoutOptionChange"/> <!-- outer div prevents transition interference with inner rotate --> <div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px] invisible"> diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue index 0cdadf8..f7ce232 100644 --- a/src/components/AncestryBar.vue +++ b/src/components/AncestryBar.vue @@ -1,6 +1,7 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import {LayoutNode} from '../layout'; +import type {LayoutOptions} from '../layout'; import Tile from './Tile.vue' export default defineComponent({ @@ -8,7 +9,8 @@ export default defineComponent({ 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<LayoutNode[]>, required: true}, - options: {type: Object, required: true}, + lytOpts: {type: Object as PropType<LayoutOptions>, required: true}, + uiOpts: {type: Object, required: true}, }, data(){ return { @@ -53,7 +55,7 @@ export default defineComponent({ padding: this.tileMargin + 'px', // backgroundColor: '#44403c', - boxShadow: this.options.shadowNormal, + boxShadow: this.uiOpts.shadowNormal, }; }, }, @@ -75,7 +77,7 @@ export default defineComponent({ <template> <div :style="styles"> <tile v-for="(node, idx) in usedNodes" :key="node.tolNode.name" :layoutNode="node" - :nonAbsPos="true" :headerSz="0" :tileSpacing="0" :options="options" + :nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts" @leaf-clicked="onClick(nodes[idx])" @info-icon-clicked="onInnerInfoIconClicked"/> </div> </template> diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 8be08f4..30b1b21 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -4,7 +4,7 @@ import CloseIcon from './icon/CloseIcon.vue'; export default defineComponent({ props: { - options: {type: Object, required: true}, + uiOpts: {type: Object, required: true}, }, methods: { closeClicked(evt: Event){ diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index f3bcb3e..369b632 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -8,7 +8,7 @@ export default defineComponent({ props: { layoutTree: {type: Object as PropType<LayoutNode>, required: true}, tolMap: {type: Object as PropType<Map<string,TolNode>>, required: true}, - options: {type: Object, required: true}, + uiOpts: {type: Object, required: true}, }, methods: { closeClicked(evt: Event){ diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue index 2b777e2..c9f1833 100644 --- a/src/components/SettingsPane.vue +++ b/src/components/SettingsPane.vue @@ -5,8 +5,8 @@ import type {LayoutOptions} from '../layout'; export default defineComponent({ props: { - layoutOptions: {type: Object as PropType<LayoutOptions>, required: true}, - componentOptions: {type: Object, required: true}, + lytOpts: {type: Object as PropType<LayoutOptions>, required: true}, + uiOpts: {type: Object, required: true}, }, methods: { closeClicked(evt: Event){ @@ -21,7 +21,7 @@ export default defineComponent({ let minInput = this.$refs.minTileSzInput as HTMLInputElement; let maxInput = this.$refs.maxTileSzInput as HTMLInputElement; if (Number(minInput.value) > Number(maxInput.value)){ - this.layoutOptions.maxTileSz = this.layoutOptions.minTileSz; + this.lytOpts.maxTileSz = this.lytOpts.minTileSz; } this.onLayoutOptChg(); }, @@ -29,7 +29,7 @@ export default defineComponent({ let minInput = this.$refs.minTileSzInput as HTMLInputElement; let maxInput = this.$refs.maxTileSzInput as HTMLInputElement; if (Number(maxInput.value) < Number(minInput.value)){ - this.layoutOptions.minTileSz = this.layoutOptions.maxTileSz; + this.lytOpts.minTileSz = this.lytOpts.maxTileSz; } this.onLayoutOptChg(); }, @@ -47,20 +47,20 @@ export default defineComponent({ <hr class="border-stone-400"/> <div> <label>Tile Spacing <input type="range" min="0" max="20" class="mx-2 w-[3cm]" - v-model.number="layoutOptions.tileSpacing" @input="onLayoutOptChg"/></label> + v-model.number="lytOpts.tileSpacing" @input="onLayoutOptChg"/></label> </div> <hr class="border-stone-400"/> <div> <label> <span class="inline-block w-[3cm]">Min Tile Size</span> - <input type="range" min="0" max="400" v-model.number="layoutOptions.minTileSz" class="w-[3cm]" + <input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz" class="w-[3cm]" @input="onMinTileSzChg" ref="minTileSzInput"/> </label> </div> <div> <label> <span class="inline-block w-[3cm]">Max Tile Size</span> - <input type="range" min="0" max="400" v-model.number="layoutOptions.maxTileSz" class="w-[3cm]" + <input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz" class="w-[3cm]" @input="onMaxTileSzChg" ref="maxTileSzInput"/> </label> </div> @@ -69,22 +69,22 @@ export default defineComponent({ Layout Method <ul> <li> - <label> <input type="radio" v-model="layoutOptions.layoutType" value="sqr" + <label> <input type="radio" v-model="lytOpts.layoutType" value="sqr" @change="onLayoutOptChg"/> Squares </label> </li> <li> - <label> <input type="radio" v-model="layoutOptions.layoutType" value="rect" + <label> <input type="radio" v-model="lytOpts.layoutType" value="rect" @change="onLayoutOptChg"/> Rectangles </label> </li> <li> - <label> <input type="radio" v-model="layoutOptions.layoutType" value="sweep" + <label> <input type="radio" v-model="lytOpts.layoutType" value="sweep" @change="onLayoutOptChg"/> Sweep to side </label> </li> </ul> </div> <hr class="border-stone-400"/> <div> - <label> <input type="checkbox" v-model="layoutOptions.sweepingToParent" + <label> <input type="checkbox" v-model="lytOpts.sweepingToParent" @change="onLayoutOptChg"/> Sweep to parent</label> </div> <hr class="border-stone-400"/> @@ -92,19 +92,19 @@ export default defineComponent({ Sweep Mode <ul> <li> - <label> <input type="radio" v-model="layoutOptions.sweepMode" value="left" + <label> <input type="radio" v-model="lytOpts.sweepMode" value="left" @change="onLayoutOptChg"/> To left </label> </li> <li> - <label> <input type="radio" v-model="layoutOptions.sweepMode" value="top" + <label> <input type="radio" v-model="lytOpts.sweepMode" value="top" @change="onLayoutOptChg"/> To top </label> </li> <li> - <label> <input type="radio" v-model="layoutOptions.sweepMode" value="shorter" + <label> <input type="radio" v-model="lytOpts.sweepMode" value="shorter" @change="onLayoutOptChg"/> To shorter </label> </li> <li> - <label> <input type="radio" v-model="layoutOptions.sweepMode" value="auto" + <label> <input type="radio" v-model="lytOpts.sweepMode" value="auto" @change="onLayoutOptChg"/> Auto </label> </li> </ul> @@ -112,7 +112,7 @@ export default defineComponent({ <hr class="border-stone-400"/> <div> <label>Animation Speed <input type="range" min="0" max="1000" class="mx-2 w-[3cm]" - v-model.number="componentOptions.transitionDuration"/></label> + v-model.number="uiOpts.transitionDuration"/></label> </div> </div> </template> diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 1e88ef9..4dedda8 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -2,16 +2,15 @@ import {defineComponent, PropType} from 'vue'; import InfoIcon from './icon/InfoIcon.vue'; import {LayoutNode} from '../layout'; +import type {LayoutOptions} from '../layout'; // Component holds a tree-node structure representing a tile or tile-group to be rendered export default defineComponent({ props: { layoutNode: {type: Object as PropType<LayoutNode>, required: true}, - options: {type: Object, required: true}, + lytOpts: {type: Object as PropType<LayoutOptions>, required: true}, + uiOpts: {type: Object, required: true}, nonAbsPos: {type: Boolean, default: false}, // Don't use absolute positioning (only applies for leaf nodes) - // Layout settings from parent - headerSz: {type: Number, required: true}, - tileSpacing: {type: Number, required: true}, }, data(){ return { @@ -33,7 +32,7 @@ export default defineComponent({ (this.layoutNode.sepSweptArea && this.layoutNode.sepSweptArea.sweptLeft); }, nonLeafBgColor(){ - let colorArray = this.options.nonLeafBgColors; + let colorArray = this.uiOpts.nonLeafBgColors; return colorArray[this.layoutNode.depth % colorArray.length]; }, tileStyles(): Record<string,string> { @@ -46,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.options.transitionDuration + 'ms', + transitionDuration: this.uiOpts.transitionDuration + 'ms', zIndex: this.animating ? '1' : '0', overflow: this.animating && !this.isLeaf ? 'hidden' : 'visible', // Static styles @@ -54,7 +53,7 @@ export default defineComponent({ transitionTimingFunction: 'ease-out', // CSS variables '--nonLeafBgColor': this.nonLeafBgColor, - '--tileSpacing': this.tileSpacing + 'px', + '--tileSpacing': this.lytOpts.tileSpacing + 'px', }; }, leafStyles(): Record<string,string> { @@ -70,18 +69,18 @@ export default defineComponent({ display: 'flex', flexDirection: 'column', // Other - borderRadius: this.options.borderRadius + 'px', - boxShadow: this.highlight ? this.options.shadowHighlight : - (this.layoutNode.hasFocus ? this.options.shadowFocused : this.options.shadowNormal), + borderRadius: this.uiOpts.borderRadius + 'px', + boxShadow: this.highlight ? this.uiOpts.shadowHighlight : + (this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal), }; }, leafHeaderStyles(): Record<string,string> { return { - height: (this.options.imgTileFontSz + this.options.imgTilePadding * 2) + 'px', - lineHeight: this.options.imgTileFontSz + 'px', - fontSize: this.options.imgTileFontSz + 'px', - padding: this.options.imgTilePadding + 'px', - color: this.isExpandable ? this.options.expandableImgTileColor : this.options.imgTileColor, + height: (this.uiOpts.imgTileFontSz + this.uiOpts.imgTilePadding * 2) + 'px', + lineHeight: this.uiOpts.imgTileFontSz + 'px', + fontSize: this.uiOpts.imgTileFontSz + 'px', + padding: this.uiOpts.imgTilePadding + 'px', + color: this.isExpandable ? this.uiOpts.expandableImgTileColor : this.uiOpts.imgTileColor, // For ellipsis overflow: 'hidden', textOverflow: 'ellipsis', @@ -90,13 +89,13 @@ export default defineComponent({ }, infoIconStyles(): Record<string,string> { return { - width: this.options.infoIconSz + 'px', - height: this.options.infoIconSz + 'px', + width: this.uiOpts.infoIconSz + 'px', + height: this.uiOpts.infoIconSz + 'px', marginTop: 'auto', - marginBottom: this.options.infoIconPadding + 'px', - marginRight: this.options.infoIconPadding + 'px', + marginBottom: this.uiOpts.infoIconPadding + 'px', + marginRight: this.uiOpts.infoIconPadding + 'px', alignSelf: 'flex-end', - color: this.infoMouseOver ? this.options.infoIconHoverColor : this.options.infoIconColor, + color: this.infoMouseOver ? this.uiOpts.infoIconHoverColor : this.uiOpts.infoIconColor, }; }, nonLeafStyles(): Record<string,string> { @@ -104,12 +103,12 @@ export default defineComponent({ width: '100%', height: '100%', backgroundColor: this.nonLeafBgColor, - borderRadius: this.options.borderRadius + 'px', - boxShadow: this.animating ? 'none' : (this.highlight ? this.options.shadowHighlight : - (this.layoutNode.hasFocus ? this.options.shadowFocused : this.options.shadowNormal)), + borderRadius: this.uiOpts.borderRadius + 'px', + boxShadow: this.animating ? 'none' : (this.highlight ? this.uiOpts.shadowHighlight : + (this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal)), }; if (this.layoutNode.sepSweptArea != null){ - let r = this.options.borderRadius + 'px'; + let r = this.uiOpts.borderRadius + 'px'; temp = this.layoutNode.sepSweptArea.sweptLeft ? {...temp, borderRadius: `${r} ${r} ${r} 0`} : {...temp, borderRadius: `${r} 0 ${r} ${r}`}; @@ -117,14 +116,14 @@ export default defineComponent({ return temp; }, nonLeafHeaderStyles(): Record<string,string> { - let r = this.options.borderRadius + 'px'; + let r = this.uiOpts.borderRadius + 'px'; return { - height: this.headerSz + 'px', - lineHeight: this.headerSz + 'px', - fontSize: this.options.nonLeafHeaderFontSz + 'px', + height: this.lytOpts.headerSz + 'px', + lineHeight: this.lytOpts.headerSz + 'px', + fontSize: this.uiOpts.nonLeafHeaderFontSz + 'px', textAlign: 'center', - color: this.options.nonLeafHeaderColor, - backgroundColor: this.options.nonLeafHeaderBgColor, + color: this.uiOpts.nonLeafHeaderColor, + backgroundColor: this.uiOpts.nonLeafHeaderBgColor, borderRadius: `${r} ${r} 0 0`, // For ellipsis overflow: 'hidden', @@ -136,9 +135,9 @@ export default defineComponent({ let commonStyles = { position: 'absolute', backgroundColor: this.nonLeafBgColor, - boxShadow: this.animating ? 'none' : (this.highlight ? this.options.shadowHighlight : - (this.layoutNode.hasFocus ? this.options.shadowFocused : this.options.shadowNormal)), - transitionDuration: this.options.transitionDuration + 'ms', + boxShadow: this.animating ? 'none' : (this.highlight ? this.uiOpts.shadowHighlight : + (this.layoutNode.hasFocus ? this.uiOpts.shadowFocused : this.uiOpts.shadowNormal)), + transitionDuration: this.uiOpts.transitionDuration + 'ms', transitionProperty: 'left, top, width, height', transitionTimingFunction: 'ease-out', }; @@ -148,12 +147,12 @@ export default defineComponent({ ...commonStyles, visibility: 'hidden', left: '0', - top: this.headerSz + 'px', + top: this.lytOpts.headerSz + 'px', width: '0', height: '0', }; } else { - let r = this.options.borderRadius + 'px'; + let r = this.uiOpts.borderRadius + 'px'; return { ...commonStyles, left: area.pos[0] + 'px', @@ -187,7 +186,7 @@ export default defineComponent({ this.clickHoldTimer = setTimeout(() => { this.clickHoldTimer = 0; this.onClickHold(); - }, this.options.clickHoldDuration); + }, this.uiOpts.clickHoldDuration); }, onClickHold(){ if (this.isLeaf && !this.isExpandable){ @@ -222,7 +221,7 @@ export default defineComponent({ }, prepForTransition(){ this.animating = true; - setTimeout(() => {this.animating = false}, this.options.transitionDuration); + setTimeout(() => {this.animating = false}, this.uiOpts.transitionDuration); }, onInfoClick(evt: Event){ this.$emit('info-icon-clicked', this.layoutNode); @@ -299,7 +298,7 @@ export default defineComponent({ </h1> </div> <tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child" - :headerSz="headerSz" :tileSpacing="tileSpacing" :options="options" + :lytOpts="lytOpts" :uiOpts="uiOpts" @leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked" @leaf-click-held="onInnerLeafClickHeld" @header-click-held="onInnerHeaderClickHeld" @info-icon-clicked="onInnerInfoIconClicked"/> diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index f45ef04..cfa1a10 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -6,16 +6,16 @@ import {TolNode} from '../tol'; export default defineComponent({ props: { tolNode: {type: Object as PropType<TolNode>, required: true}, - options: {type: Object, required: true}, + uiOpts: {type: Object, required: true}, }, computed: { imgStyles(): Record<string,string> { return { backgroundImage: 'url(\'/img/' + this.tolNode.name.replaceAll('\'', '\\\'') + '.png\')', - width: this.options.infoModalImgSz + 'px', - height: this.options.infoModalImgSz + 'px', + width: this.uiOpts.infoModalImgSz + 'px', + height: this.uiOpts.infoModalImgSz + 'px', backgroundSize: 'cover', - borderRadius: this.options.borderRadius + 'px', + borderRadius: this.uiOpts.borderRadius + 'px', } }, }, |