aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ParentBar.vue13
-rw-r--r--src/components/Tile.vue33
-rw-r--r--src/components/TileImg.vue2
-rw-r--r--src/components/TileTree.vue29
4 files changed, 34 insertions, 43 deletions
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<LayoutNode[]>, 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({
<template>
<div :style="styles">
<tile-img v-for="node in nodes" :key="node.tolNode.name"
- :layoutNode="node" :tileSz="tileSz" :options="tileImgOptions"/>
+ :layoutNode="node" :tileSz="tileSz" :options="options"/>
</div>
</template>
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<LayoutNode>, 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({
</h1>
</div>
<tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child"
- :headerSz="headerSz" :tileSpacing="tileSpacing" :transitionDuration="transitionDuration"
+ :headerSz="headerSz" :tileSpacing="tileSpacing" :options="options"
@leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked"
@leaf-dbl-clicked="onInnerLeafDblClicked" @header-dbl-clicked="onInnerHeaderDblClicked"/>
</div>
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({
<template>
<div :style="styles" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="onClick"
:class="isExpandable ? ['hover:cursor-pointer'] : []">
- <div :style="headerStyles">{{layoutNode.tolNode.name}}</div>
+ <h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1>
</div>
</template>
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({
<template>
<div :style="styles">
<tile :layoutNode="layoutTree"
- :headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing"
- :transitionDuration="transitionDuration"
+ :headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing" :options="componentOptions"
@leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked"
@leaf-dbl-clicked="onInnerLeafDblClicked" @header-dbl-clicked="onInnerHeaderDblClicked"/>
- <parent-bar v-if="separatedParents != null" :pos="[0,0]" :dims="parentBarDims" :nodes="separatedParents"/>
+ <parent-bar v-if="separatedParents != null"
+ :pos="[0,0]" :dims="parentBarDims" :nodes="separatedParents" :options="componentOptions"/>
</div>
</template>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 14:29:36 +0000