aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Tile.vue19
-rw-r--r--src/components/TileTree.vue35
2 files changed, 34 insertions, 20 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index b1454ac..4009068 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -25,7 +25,6 @@ const defaultOptions = {
export default defineComponent({
props: {
layoutNode: {type: Object as PropType<LayoutNode>, required: true},
- isRoot: {type: Boolean, default: false},
// Settings from parent component
headerSz: {type: Number, required: true},
tileSpacing: {type: Number, required: true},
@@ -58,17 +57,17 @@ export default defineComponent({
return {
// 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',
+ left: (this.layoutNode.hidden ? 0 : this.layoutNode.pos[0]) + 'px',
+ top: (this.layoutNode.hidden ? 0 : this.layoutNode.pos[1]) + 'px',
+ width: (this.layoutNode.hidden ? 0 : this.layoutNode.dims[0]) + 'px',
+ height: (this.layoutNode.hidden ? 0 : this.layoutNode.dims[1]) + 'px',
+ visibility: this.layoutNode.hidden ? 'hidden' : 'visible',
// Other bindings
transitionDuration: this.transitionDuration + 'ms',
zIndex: String(this.zIdx),
overflow: String(this.overflow),
// Static styles
- transitionProperty: 'left, top, width, height',
+ transitionProperty: 'left, top, width, height, visibility',
transitionTimingFunction: 'ease-out',
// CSS variables
'--nonLeafBgColor': this.nonLeafBgColor,
@@ -91,7 +90,7 @@ export default defineComponent({
position: 'absolute',
left: this.options.leafHeaderX + 'px',
top: this.options.leafHeaderY + 'px',
- maxWidth: (this.layoutNode.dims[0] - this.options.leafHeaderX * 2) + 'px',
+ maxWidth: this.layoutNode.hidden ? 0 : this.layoutNode.dims[0] - this.options.leafHeaderX * 2 + 'px',
height: this.options.leafHeaderFontSz + 'px',
lineHeight: this.options.leafHeaderFontSz + 'px',
fontSize: this.options.leafHeaderFontSz + 'px',
@@ -167,6 +166,10 @@ export default defineComponent({
methods: {
// For click handling
onLeafClick(evt: UIEvent){
+ if (!this.isExpandable){
+ console.log('Ignored click on non-expandable leaf node');
+ return;
+ }
let prepForTransition = () => {
(this.$refs.leaf as Element).classList.replace('shadow-highlight', 'shadow-normal');
// Temporary changes to prevent content overlap and overflow
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 7f2f554..2cc2d53 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -40,8 +40,10 @@ const defaultOtherOptions = {
// Collects events about tile expansion/collapse and window-resize, and initiates relayout of tiles
export default defineComponent({
data(){
+ let layoutTree = new LayoutTree(tol, defaultLayoutOptions, 0);
return {
- layoutTree: new LayoutTree(tol, defaultLayoutOptions, 0),
+ layoutTree: layoutTree,
+ activeRoot: layoutTree.root,
layoutOptions: {...defaultLayoutOptions},
otherOptions: {...defaultOtherOptions},
width: document.documentElement.clientWidth - (defaultOtherOptions.rootOffset * 2),
@@ -55,7 +57,7 @@ export default defineComponent({
// Update data and relayout tiles
this.width = document.documentElement.clientWidth - (this.otherOptions.rootOffset * 2);
this.height = document.documentElement.clientHeight - (this.otherOptions.rootOffset * 2);
- if (!this.layoutTree.tryLayout([0,0], [this.width,this.height], true)){
+ if (!this.layoutTree.tryLayout(this.activeRoot, [0,0], [this.width,this.height], true)){
console.log('Unable to layout tree');
}
// Prevent re-triggering until after a delay
@@ -64,11 +66,7 @@ export default defineComponent({
}
},
onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){
- if (layoutNode.tolNode.children.length == 0){
- //console.log('Tile to expand has no children');
- return;
- }
- let success = this.layoutTree.tryLayout([0,0], [this.width,this.height], false,
+ let success = this.layoutTree.tryLayout(this.activeRoot, [0,0], [this.width,this.height], false,
{type: 'expand', node: layoutNode});
if (!success){
// Trigger failure animation
@@ -79,7 +77,7 @@ export default defineComponent({
}
},
onInnerHeaderClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){
- let success = this.layoutTree.tryLayout([0,0], [this.width,this.height], false,
+ let success = this.layoutTree.tryLayout(this.activeRoot, [0,0], [this.width,this.height], false,
{type: 'collapse', node: layoutNode});
if (!success){
// Trigger failure animation
@@ -90,15 +88,28 @@ export default defineComponent({
}
},
onInnerLeafDblClicked(layoutNode: LayoutNode){
- console.log('double clicked leaf: ' + layoutNode.tolNode.name);
+ if (layoutNode == this.activeRoot){
+ console.log('Ignored expand-to-view on root node');
+ return;
+ }
+ LayoutNode.hideUpward(layoutNode);
+ this.activeRoot = layoutNode;
+ this.layoutTree.tryLayout(layoutNode, [0,0], [this.width,this.height], true,
+ {type: 'expand', node: layoutNode});
},
onInnerHeaderDblClicked(layoutNode: LayoutNode){
- console.log('double clicked header: ' + layoutNode.tolNode.name);
+ if (layoutNode.parent == null){
+ console.log('Ignored expand-to-view on root node');
+ return;
+ }
+ LayoutNode.hideUpward(layoutNode);
+ this.activeRoot = layoutNode;
+ this.layoutTree.tryLayout(layoutNode, [0,0], [this.width,this.height], true);
},
},
created(){
window.addEventListener('resize', this.onResize);
- if (!this.layoutTree.tryLayout([0,0], [this.width,this.height], true)){
+ if (!this.layoutTree.tryLayout(this.activeRoot, [0,0], [this.width,this.height], true)){
console.log('Unable to layout tree');
}
},
@@ -115,7 +126,7 @@ export default defineComponent({
<div class="h-screen bg-stone-800">
<tile :layoutNode="layoutTree.root"
:headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing"
- :transitionDuration="otherOptions.transitionDuration" :isRoot="true"
+ :transitionDuration="otherOptions.transitionDuration"
@leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked"
@leaf-dbl-clicked="onInnerLeafDblClicked" @header-dbl-clicked="onInnerHeaderDblClicked"/>
</div>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 15:34:20 +0000