aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Tile.vue54
-rw-r--r--src/components/TileTree.vue67
2 files changed, 62 insertions, 59 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 1790dc3..054bfed 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,6 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
-import {TreeNode} from '../types';
+import {LayoutNode} from '../types';
const TRANSITION_DURATION = 300;
export default defineComponent({
@@ -13,31 +13,31 @@ export default defineComponent({
}
},
props: {
- tree: {type: Object as PropType<TreeNode>, required: true},
+ layoutNode: {type: Object as PropType<LayoutNode>, required: true},
},
computed: {
- name(){return this.tree.tolNode.name.replaceAll('\'', '\\\'')}
+ name(){return this.layoutNode.tolNode.name.replaceAll('\'', '\\\'')}
},
methods: {
onImgClick(){
- this.$emit('tile-clicked', [this.tree]);
+ this.$emit('tile-clicked', [this.layoutNode]);
//increase z-index and hide overflow during transition
this.zIdx = 1;
this.overFlow = 'hidden';
setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration);
},
- onInnerTileClicked(nodeList: TreeNode[]){
- this.$emit('tile-clicked', [...nodeList, this.tree]);
+ onInnerTileClicked(nodeList: LayoutNode[]){
+ this.$emit('tile-clicked', [...nodeList, this.layoutNode]);
},
onHeaderClick(){
- this.$emit('header-clicked', [this.tree]);
+ this.$emit('header-clicked', [this.layoutNode]);
//increase z-index and hide overflow during transition
this.zIdx = 1;
this.overFlow = 'hidden';
setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration);
},
- onInnerHeaderClicked(nodeList: TreeNode[]){
- this.$emit('header-clicked', [...nodeList, this.tree]);
+ onInnerHeaderClicked(nodeList: LayoutNode[]){
+ this.$emit('header-clicked', [...nodeList, this.layoutNode]);
}
}
})
@@ -46,36 +46,38 @@ export default defineComponent({
<template>
<div
:style="{position: 'absolute',
- left: tree.x+'px', top: tree.y+'px', width: tree.w+'px', height: tree.h+'px',
+ left: layoutNode.x+'px', top: layoutNode.y+'px', width: layoutNode.w+'px', height: layoutNode.h+'px',
zIndex: zIdx, overflow: overFlow, transitionDuration: transitionDuration+'ms'}"
class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
- <div v-if="tree.children.length == 0"
+ <div v-if="layoutNode.children.length == 0"
:style="{backgroundImage: 'url(\'/img/' + name + '.jpg\')',
- opacity: (tree.tolNode.children.length > 0 ? 1 : 0.7)}"
+ opacity: (layoutNode.tolNode.children.length > 0 ? 1 : 0.7)}"
class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick"
/>
<div v-else>
- <div v-if="(tree.headerSz && !tree.sepSweptArea) || (tree.sepSweptArea && tree.sepSweptArea.sweptLeft)"
- :style="{height: tree.headerSz+'px'}"
+ <div
+ v-if="(layoutNode.headerSz && !layoutNode.sepSweptArea) ||
+ (layoutNode.sepSweptArea && layoutNode.sepSweptArea.sweptLeft)"
+ :style="{height: layoutNode.headerSz+'px'}"
class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
- {{tree.tolNode.name}}
+ {{layoutNode.tolNode.name}}
</div>
- <div v-if="tree.sepSweptArea"
- :style="{position: 'absolute', left: tree.sepSweptArea.x+'px', top: tree.sepSweptArea.y+'px',
- width: (tree.sepSweptArea.w +
- (tree.sepSweptArea.sweptLeft ? tree.sepSweptArea.tileSpacing+1 : 0))+'px',
- height: (tree.sepSweptArea.h +
- (tree.sepSweptArea.sweptLeft ? 0 : tree.sepSweptArea.tileSpacing+1))+'px',
- borderRightColor: (tree.sepSweptArea.sweptLeft ? 'white' : 'currentColor'),
- borderBottomColor: (tree.sepSweptArea.sweptLeft ? 'currentColor' : 'white'),
+ <div v-if="layoutNode.sepSweptArea"
+ :style="{position: 'absolute', left: layoutNode.sepSweptArea.x+'px', top: layoutNode.sepSweptArea.y+'px',
+ width: (layoutNode.sepSweptArea.w +
+ (layoutNode.sepSweptArea.sweptLeft ? layoutNode.sepSweptArea.tileSpacing+1 : 0))+'px',
+ height: (layoutNode.sepSweptArea.h +
+ (layoutNode.sepSweptArea.sweptLeft ? 0 : layoutNode.sepSweptArea.tileSpacing+1))+'px',
+ borderRightColor: (layoutNode.sepSweptArea.sweptLeft ? 'white' : 'currentColor'),
+ borderBottomColor: (layoutNode.sepSweptArea.sweptLeft ? 'currentColor' : 'white'),
transitionDuration: transitionDuration+'ms'}"
class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
- <div v-if="!tree.sepSweptArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
+ <div v-if="!layoutNode.sepSweptArea.sweptLeft" :style="{height: layoutNode.headerSz+'px'}"
class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
- {{tree.tolNode.name}}
+ {{layoutNode.tolNode.name}}
</div>
</div>
- <tile v-for="child in tree.children" :key="child.tolNode.name" :tree="child"
+ <tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child"
@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
></tile>
</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 24d0d84..e9c8c93 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -2,7 +2,7 @@
import {defineComponent} from 'vue';
import Tile from './Tile.vue';
-import {TolNode, TreeNode, LayoutNode} from '../types';
+import {TolNode, LayoutNode} from '../types';
import {genLayout, layoutInfoHooks} from '../layout';
//regarding importing a file f1.ts:
//using 'import f1.ts' makes vue-tsc complain, and 'import f1.js' makes vite complain
@@ -21,24 +21,24 @@ preprocessTol(tol);
export default defineComponent({
data(){
return {
- tree: this.initTree(tol as TolNode, 1),
+ layoutTree: this.initLayoutTree(tol as TolNode, 1),
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
resizeThrottled: false,
}
},
methods: {
- initTree(tol: TolNode, lvl: number): TreeNode {
- let tree = new TreeNode(tol, []);
- function initTreeRec(tree: TreeNode, lvl: number){
+ initLayoutTree(tol: TolNode, lvl: number): LayoutNode {
+ let node = new LayoutNode(tol, []);
+ function initRec(node: LayoutNode, lvl: number){
if (lvl > 0)
- tree.children = tree.tolNode.children.map(
- (n: TolNode) => initTreeRec(new TreeNode(n, []), lvl-1));
- return tree;
+ node.children = node.tolNode.children.map(
+ (n: TolNode) => initRec(new LayoutNode(n, []), lvl-1));
+ return node;
}
- initTreeRec(tree, lvl);
- layoutInfoHooks.initLayoutInfo(tree)
- return tree;
+ initRec(node, lvl);
+ layoutInfoHooks.initLayoutInfo(node)
+ return node;
},
onResize(){
if (!this.resizeThrottled){
@@ -50,21 +50,22 @@ export default defineComponent({
setTimeout(() => {this.resizeThrottled = false;}, 100);
}
},
- onInnerTileClicked(nodeList: TreeNode[]){
- //nodeList holds an array of tree-objects, from the clicked-on-tile's tree-object upward
+ onInnerTileClicked(nodeList: LayoutNode[]){
+ //nodeList is an array of layout-nodes, from the clicked-on-tile's node upward
let numNewTiles = nodeList[0].tolNode.children.length;
if (numNewTiles == 0){
console.log('Tile-to-expand has no children');
return;
}
//add children
- nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new TreeNode(n, []));
+ nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new LayoutNode(n, []));
layoutInfoHooks.updateLayoutInfoOnExpand(nodeList);
- //try to layout tree
+ //try to re-layout
if (!this.tryLayout())
nodeList[0].children = [];
},
- onInnerHeaderClicked(nodeList: TreeNode[]){ //nodeList is array of tree-objects, from clicked-on-tile's tree-object upward
+ onInnerHeaderClicked(nodeList: LayoutNode[]){
+ //nodeList is an array of layout-nodes, from the clicked-on-tile's node upward
let children = nodeList[0].children;
nodeList[0].children = [];
layoutInfoHooks.updateLayoutInfoOnCollapse(nodeList);
@@ -72,33 +73,33 @@ export default defineComponent({
nodeList[0].children = children;
},
tryLayout(){
- let layout = genLayout(this.tree, 0, 0, this.width, this.height, true);
- if (layout == null){
+ let newLayout = genLayout(this.layoutTree, 0, 0, this.width, this.height, true);
+ if (newLayout == null){
console.log('Unable to layout tree');
return false;
} else {
- this.applyLayout(layout, this.tree);
+ this.applyLayout(newLayout, this.layoutTree);
return true;
}
},
- applyLayout(layout: LayoutNode, tree: TreeNode){
- tree.x = layout.x;
- tree.y = layout.y;
- tree.w = layout.w;
- tree.h = layout.h;
- tree.headerSz = layout.headerSz;
- layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i]));
+ applyLayout(newLayout: LayoutNode, layoutTree: LayoutNode){
+ layoutTree.x = newLayout.x;
+ layoutTree.y = newLayout.y;
+ layoutTree.w = newLayout.w;
+ layoutTree.h = newLayout.h;
+ layoutTree.headerSz = newLayout.headerSz;
+ newLayout.children.forEach((n,i) => this.applyLayout(n, layoutTree.children[i]));
//handle case where leaf nodes placed in leftover space from parent-sweep
- if (layout.sepSweptArea != null){
+ if (newLayout.sepSweptArea != null){
//add parent area coords
- tree.sepSweptArea = layout.sepSweptArea;
+ layoutTree.sepSweptArea = newLayout.sepSweptArea;
//move leaf node children to parent area
- tree.children.filter(n => n.children.length == 0).map(n => {
- n.x += layout.sepSweptArea!.x;
- n.y += layout.sepSweptArea!.y;
+ layoutTree.children.filter(n => n.children.length == 0).map(n => {
+ n.x += newLayout.sepSweptArea!.x;
+ n.y += newLayout.sepSweptArea!.y;
});
} else {
- tree.sepSweptArea = null;
+ layoutTree.sepSweptArea = null;
}
}
},
@@ -117,7 +118,7 @@ export default defineComponent({
<template>
<div class="h-[100vh]">
- <tile :tree="tree" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile>
+ <tile :layoutNode="layoutTree" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile>
</div>
</template>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 15:11:24 +0000