1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<script lang="ts">
import {defineComponent, PropType} from 'vue';
import LeafTile from './LeafTile.vue';
import NonLeafTile from './NonLeafTile.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},
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)
},
data(){
return {
clickHoldTimer: 0, // Used to recognise a click-and-hold event
highlight: false,
inTransition: false,
};
},
computed: {
isLeaf(){
return this.layoutNode.children.length == 0;
},
isExpandable(){
return this.layoutNode.tolNode.children.length > this.layoutNode.children.length;
},
collapseFailFlag(){
return this.layoutNode.collapseFailFlag;
},
expandFailFlag(){
return this.layoutNode.expandFailFlag;
},
},
watch: {
expandFailFlag(newVal){
this.triggerAnimation('animate-expand-shrink');
},
collapseFailFlag(newVal){
this.triggerAnimation('animate-shrink-expand');
},
},
methods: {
// Click handling
onMouseDown(){
this.highlight = false;
clearTimeout(this.clickHoldTimer);
this.clickHoldTimer = setTimeout(() => {
this.clickHoldTimer = 0;
this.onClickHold();
}, this.uiOpts.clickHoldDuration);
},
onMouseUp(){
if (this.clickHoldTimer > 0){
clearTimeout(this.clickHoldTimer);
this.clickHoldTimer = 0;
this.onClick();
}
},
onClick(){
if (this.isLeaf && !this.isExpandable){
console.log('Ignored click on non-expandable node');
return;
}
this.prepForTransition();
if (this.isLeaf){
this.$emit('leaf-clicked', this.layoutNode);
} else {
this.$emit('header-clicked', this.layoutNode);
}
},
onClickHold(){
if (this.isLeaf && !this.isExpandable){
console.log('Ignored click-hold on non-expandable node');
return;
}
this.prepForTransition();
if (this.isLeaf){
this.$emit('leaf-click-held', this.layoutNode);
} else {
this.$emit('header-click-held', this.layoutNode);
}
},
prepForTransition(){
this.inTransition = true;
setTimeout(() => {this.inTransition = false}, this.uiOpts.transitionDuration);
},
// For coloured outlines on hover
onMouseEnter(evt: Event){
if (!this.isLeaf || this.isExpandable){
this.highlight = true;
}
},
onMouseLeave(evt: Event){
if (!this.isLeaf || this.isExpandable){
this.highlight = false;
}
},
// Child event propagation
onInnerLeafClicked(data: LayoutNode){
this.$emit('leaf-clicked', data);
},
onInnerHeaderClicked(data: LayoutNode){
this.$emit('header-clicked', data);
},
onInnerLeafClickHeld(data: LayoutNode){
this.$emit('leaf-click-held', data);
},
onInnerHeaderClickHeld(data: LayoutNode){
this.$emit('header-click-held', data);
},
onInnerInfoIconClicked(data: LayoutNode){
this.$emit('info-icon-clicked', data);
},
// Other
triggerAnimation(animationClass: string){
this.$el.classList.remove(animationClass);
this.$el.offsetWidth; // Triggers reflow
this.$el.classList.add(animationClass);
},
},
emits: ['leaf-clicked', 'header-clicked', 'leaf-click-held', 'header-click-held', 'info-icon-clicked'],
components: {LeafTile, NonLeafTile, },
});
</script>
<template>
<component :is="isLeaf ? LeafTile : NonLeafTile"
:layoutNode="layoutNode" :lytOpts="lytOpts" :uiOpts="uiOpts" :nonAbsPos="nonAbsPos"
:highlight="highlight" :inTransition="inTransition"
@tile-mouse-enter="onMouseEnter" @tile-mouse-leave="onMouseLeave"
@tile-mouse-down="onMouseDown" @tile-mouse-up="onMouseUp"/>
</template>
|
