aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Tile.vue8
-rw-r--r--src/components/TileTree.vue6
-rw-r--r--src/layout.js27
3 files changed, 25 insertions, 16 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 7af5583..8121608 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -45,7 +45,8 @@ export default {
class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick"
/>
<div v-else>
- <div v-if="tree.headerSz > 0" :style="{height: tree.headerSz+'px'}"
+ <div v-if="(tree.headerSz && !tree.sideArea) || (tree.sideArea && tree.sideArea.sweptLeft)"
+ :style="{height: tree.headerSz+'px'}"
class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
{{tree.tolNode.name}}
</div>
@@ -53,10 +54,13 @@ export default {
:style="{position: 'absolute', left: tree.sideArea.x+'px', top: tree.sideArea.y+'px',
width: (tree.sideArea.w + (tree.sideArea.sweptLeft ? tree.sideArea.extraSz : 0))+'px',
height: (tree.sideArea.h + (tree.sideArea.sweptLeft ? 0 : tree.sideArea.extraSz))+'px',
- borderWidth: tree.sideArea.w > 0 ? '1px' : '0',
borderRightColor: (tree.sideArea.sweptLeft ? 'white' : 'currentColor'),
borderBottomColor: (tree.sideArea.sweptLeft ? 'currentColor' : 'white')}"
class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white">
+ <div v-if="!tree.sideArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
+ class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
+ {{tree.tolNode.name}}
+ </div>
<tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child"
@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
></tile>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index a772594..4ce3f28 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -27,14 +27,14 @@ export default {
let tree = {
tolNode:tol, children:[],
x:0, y:0, w:0, h:0, headerSz:0,
- sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0},
+ sideArea:null,
};
function initTreeRec(tree, lvl){
if (lvl > 0)
tree.children = tree.tolNode.children.map(tNode => initTreeRec({
tolNode: tNode, children: [],
x:0, y:0, w:0, h:0, headerSz:0,
- sideArea:{x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0},
+ sideArea:null,
}, lvl-1));
return tree;
}
@@ -97,7 +97,7 @@ export default {
n.y += layout.sideArea.y;
});
} else {
- tree.sideArea = {x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0};
+ tree.sideArea = null;
}
}
},
diff --git a/src/layout.js b/src/layout.js
index ea4dbd1..9137a88 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -243,7 +243,7 @@ const staticRectLayout = {
};
const sweepToSideLayout = {
genLayout(node, x, y, w, h, hideHeader, parentArea = null){
- let SWEEP_LEFT_ONLY = false, ALLOW_PARENT_AREA = true;
+ let SWEEP_LEFT_ONLY = true, ALLOW_PARENT_AREA = true;
//separate leaf and non-leaf nodes
let leaves = [], nonLeaves = [];
node.children.forEach(n => (n.children.length == 0 ? leaves : nonLeaves).push(n));
@@ -257,14 +257,18 @@ const sweepToSideLayout = {
} else {
let ratio = leaves.length / (leaves.length + nonLeaves.map(e => e.tileCount).reduce((x,y) => x+y));
let headerSz = (hideHeader ? 0 : HEADER_SZ);
- let area = {x: x, y: y+headerSz, w: w, h: h-headerSz};
let sweptLayout, nonLeavesLayout, sweptLeft = false, leftOverArea;
//get swept-area layout
let usingParentArea = false;
if (ALLOW_PARENT_AREA && parentArea != null){
tempTree = {tolNode: null, children: leaves};
- sweptLayout = staticSqrLayout.genLayout(tempTree, 0, 0, parentArea.w, parentArea.h, true);
+ sweptLeft = parentArea.sweptLeft;
+ sweptLayout = staticSqrLayout.genLayout(tempTree, 0, 0, parentArea.w, parentArea.h, sweptLeft);
if (sweptLayout != null){
+ let area = {x: x, y: y+headerSz, w: w, h: h-headerSz};
+ if (!parentArea.sweptLeft){ //no remaining-area header if swept-upward
+ area.y = y; area.h = h;
+ }
//get remaining-area layout
tempTree = {tolNode: null, children: nonLeaves};
if (nonLeaves.length > 1){
@@ -274,25 +278,26 @@ const sweepToSideLayout = {
//get leftover swept-layout-area to propagate
let leftOverWidth = parentArea.w - sweptLayout.contentW;
let leftOverHeight = parentArea.h - sweptLayout.contentH;
- leftOverArea = (leftOverWidth > leftOverHeight) ?
- {...parentArea, parentX:parentArea.parentX+sweptLayout.contentW-TILE_SPACING,
- w:leftOverWidth-TILE_SPACING} :
- {...parentArea, parentY:parentArea.parentY+sweptLayout.contentH-TILE_SPACING,
- h:leftOverHeight-TILE_SPACING};
- leftOverArea.parentY += -headerSz;
+ leftOverArea = (leftOverWidth < leftOverHeight) ?
+ {...parentArea, parentY:parentArea.parentY+sweptLayout.contentH-TILE_SPACING-headerSz,
+ h:leftOverHeight-TILE_SPACING} :
+ {...parentArea,
+ parentX:parentArea.parentX+sweptLayout.contentW-TILE_SPACING,
+ parentY:parentArea.parentY + headerSz,
+ w:leftOverWidth-TILE_SPACING, h:parentArea.h - headerSz};
//call genLayout
nonLeavesLayout = staticRectLayout.genLayout(
tempTree, 0, 0, area.w, area.h, true,
(n,x,y,w,h,hh) => sweepToSideLayout.genLayout(n,x,y,w,h,hh,leftOverArea));
}
if (nonLeavesLayout != null){
- nonLeavesLayout.children.forEach(layout => {layout.y += headerSz});
- sweptLeft = parentArea.sweptLeft;
+ nonLeavesLayout.children.forEach(layout => {layout.y += (sweptLeft ? headerSz : 0)});
usingParentArea = true;
}
}
}
if (!usingParentArea){
+ let area = {x: x, y: y+headerSz, w: w, h: h-headerSz};
tempTree = {tolNode: null, children: leaves};
let xyChg;
if (SWEEP_LEFT_ONLY){
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 15:33:11 +0000