aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Tile.vue18
-rw-r--r--src/components/TileTree.vue10
-rw-r--r--src/layout.ts45
-rw-r--r--src/types.ts34
4 files changed, 45 insertions, 62 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 19c9838..1790dc3 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -55,20 +55,22 @@ export default defineComponent({
class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick"
/>
<div v-else>
- <div v-if="(tree.headerSz && !tree.sideArea) || (tree.sideArea && tree.sideArea.sweptLeft)"
+ <div v-if="(tree.headerSz && !tree.sepSweptArea) || (tree.sepSweptArea && tree.sepSweptArea.sweptLeft)"
:style="{height: tree.headerSz+'px'}"
class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
{{tree.tolNode.name}}
</div>
- <div v-if="tree.sideArea"
- :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',
- borderRightColor: (tree.sideArea.sweptLeft ? 'white' : 'currentColor'),
- borderBottomColor: (tree.sideArea.sweptLeft ? 'currentColor' : 'white'),
+ <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'),
transitionDuration: transitionDuration+'ms'}"
class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
- <div v-if="!tree.sideArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
+ <div v-if="!tree.sepSweptArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
{{tree.tolNode.name}}
</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index ce2688e..24d0d84 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -89,16 +89,16 @@ export default defineComponent({
tree.headerSz = layout.headerSz;
layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i]));
//handle case where leaf nodes placed in leftover space from parent-sweep
- if (layout.sideArea != null){
+ if (layout.sepSweptArea != null){
//add parent area coords
- tree.sideArea = layout.sideArea;
+ tree.sepSweptArea = layout.sepSweptArea;
//move leaf node children to parent area
tree.children.filter(n => n.children.length == 0).map(n => {
- n.x += layout.sideArea!.x;
- n.y += layout.sideArea!.y;
+ n.x += layout.sepSweptArea!.x;
+ n.y += layout.sepSweptArea!.y;
});
} else {
- tree.sideArea = null;
+ tree.sepSweptArea = null;
}
}
},
diff --git a/src/layout.ts b/src/layout.ts
index 94d2f6c..bf8412e 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -1,8 +1,8 @@
-import {TolNode, TreeNode, LayoutNode, SideArea, LeftoverArea} from './types';
+import {TolNode, TreeNode, LayoutNode, SepSweptArea} from './types';
export {genLayout, layoutInfoHooks};
type LayoutFn = (node: TreeNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
- options?: {subLayoutFn?: LayoutFn, extraArea?: LeftoverArea | null}) => LayoutNode | null;
+ options?: {subLayoutFn?: LayoutFn, sepSweptArea?: SepSweptArea|null}) => LayoutNode | null;
let TILE_SPACING = 5;
let HEADER_SZ = 20;
@@ -256,7 +256,7 @@ let rectLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, options={su
//trying to shrink contentW and contentH causes problems with swept-to-parent-area div-alignment
}
//lays out nodes by pushing leaves to one side, partially using other layouts for children
-let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, options={extraArea: null}){
+let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, options={sepSweptArea: null}){
//separate leaf and non-leaf nodes
let leaves: TreeNode[] = [], nonLeaves: TreeNode[] = [];
node.children.forEach(n => (n.children.length == 0 ? leaves : nonLeaves).push(n));
@@ -270,9 +270,9 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
} else {
let ratio = leaves.length / (leaves.length + nonLeaves.map(e => e.tileCount).reduce((x,y) => x+y));
let headerSz = (hideHeader ? 0 : HEADER_SZ);
- let sweptLayout = null, nonLeavesLayout = null, sweptLeft = false, leftoverArea: LeftoverArea;
+ let sweptLayout = null, nonLeavesLayout = null, sweptLeft = false;
//get swept-area layout
- let parentArea = options && options.extraArea, usingParentArea = false;
+ let parentArea = options && options.sepSweptArea, usingParentArea = false;
if (ALLOW_SWEEP_TO_PARENT && parentArea){
tempTree = new TreeNode(new TolNode('SWEEP_' + node.tolNode.name), leaves);
sweptLeft = parentArea.sweptLeft;
@@ -291,17 +291,17 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
//get leftover swept-layout-area to propagate
let leftOverWidth = parentArea.w - sweptLayout.contentW;
let leftOverHeight = parentArea.h - sweptLayout.contentH;
- leftoverArea = sweptLeft ?
- new LeftoverArea(
- parentArea.parentX, parentArea.parentY+sweptLayout.contentH-TILE_SPACING-headerSz,
- parentArea.w, leftOverHeight-TILE_SPACING, sweptLeft) :
- new LeftoverArea(
- parentArea.parentX+sweptLayout.contentW-TILE_SPACING, parentArea.parentY + headerSz,
- leftOverWidth-TILE_SPACING, parentArea.h - headerSz, sweptLeft);
+ let leftoverArea = sweptLeft ?
+ new SepSweptArea(
+ parentArea.x, parentArea.y+sweptLayout.contentH-TILE_SPACING-headerSz,
+ parentArea.w, leftOverHeight-TILE_SPACING, sweptLeft, TILE_SPACING) :
+ new SepSweptArea(
+ parentArea.x+sweptLayout.contentW-TILE_SPACING, parentArea.y + headerSz,
+ leftOverWidth-TILE_SPACING, parentArea.h - headerSz, sweptLeft, TILE_SPACING);
//call genLayout
nonLeavesLayout = rectLayoutFn(
tempTree, 0, 0, area.w, area.h, true,
- {subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{extraArea: leftoverArea})});
+ {subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{sepSweptArea: leftoverArea})});
}
if (nonLeavesLayout != null){
nonLeavesLayout.children.forEach(layout => {layout.y += (sweptLeft ? headerSz : 0)});
@@ -347,17 +347,18 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
nonLeavesLayout = rectLayoutFn(tempTree, 0, 0, area.w, area.h, true, {subLayoutFn: sweepLeavesLayoutFn});
} else {
//get leftover swept-layout-area to propagate
+ let leftoverArea;
if (sweptLeft){
- leftoverArea = new LeftoverArea( //parentX and parentY are relative to the non-leaves-area
+ leftoverArea = new SepSweptArea( //x and y are relative to the non-leaves-area
-sweptLayout.contentW + TILE_SPACING, sweptLayout.contentH - TILE_SPACING,
sweptLayout.contentW - TILE_SPACING*2, area.h-sweptLayout.contentH - TILE_SPACING,
- sweptLeft
+ sweptLeft, TILE_SPACING
);
} else {
- leftoverArea = new LeftoverArea(
+ leftoverArea = new SepSweptArea(
sweptLayout.contentW - TILE_SPACING, -sweptLayout.contentH + TILE_SPACING,
area.w-sweptLayout.contentW - TILE_SPACING, sweptLayout.contentH - TILE_SPACING*2,
- sweptLeft
+ sweptLeft, TILE_SPACING
);
}
leftoverArea.w = Math.max(0, leftoverArea.w);
@@ -365,7 +366,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
//call genLayout
nonLeavesLayout = rectLayoutFn(
tempTree, 0, 0, area.w, area.h, true,
- {subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{extraArea: leftoverArea})});
+ {subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{sepSweptArea: leftoverArea})});
}
if (nonLeavesLayout == null)
return null;
@@ -388,13 +389,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
Math.max(sweptLayout.contentH, nonLeavesLayout.contentH) + headerSz :
sweptLayout.contentH + nonLeavesLayout.contentH - TILE_SPACING + headerSz),
empSpc: sweptLayout.empSpc + nonLeavesLayout.empSpc,
- sideArea: (usingParentArea && parentArea != null) ?
- {
- x: parentArea.parentX, y: parentArea.parentY,
- w: parentArea.w, h: parentArea.h,
- sweptLeft: sweptLeft, extraSz: TILE_SPACING+1,
- }:
- null,
+ sepSweptArea: (usingParentArea && parentArea) ? parentArea : null,
});
}
}
diff --git a/src/types.ts b/src/types.ts
index 82a8bb9..92deef5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -14,10 +14,10 @@ export class TreeNode {
w: number;
h: number;
headerSz: number;
- sideArea: SideArea | null;
+ sepSweptArea: SepSweptArea | null;
tileCount: number;
constructor(tolNode: TolNode, children: TreeNode[], x=0, y=0, w=0, h=0,
- {headerSz=0, sideArea=null, tileCount=1} = {}){
+ {headerSz=0, sepSweptArea=null, tileCount=1} = {}){
this.tolNode = tolNode;
this.children = children;
this.x = x;
@@ -25,7 +25,7 @@ export class TreeNode {
this.w = w;
this.h = h;
this.headerSz = headerSz;
- this.sideArea = sideArea;
+ this.sepSweptArea = sepSweptArea;
this.tileCount = tileCount;
}
}
@@ -40,9 +40,9 @@ export class LayoutNode {
contentW: number;
contentH: number;
empSpc: number;
- sideArea: SideArea | null;
+ sepSweptArea: SepSweptArea | null;
constructor(name: string, children: LayoutNode[], x=0, y=0, w=0, h=0,
- {headerSz=0, contentW=0, contentH=0, empSpc=0, sideArea=null as SideArea|null} = {}){
+ {headerSz=0, contentW=0, contentH=0, empSpc=0, sepSweptArea=null as SepSweptArea|null} = {}){
this.name = name;
this.x = x;
this.y = y;
@@ -53,36 +53,22 @@ export class LayoutNode {
this.contentW = contentW;
this.contentH = contentH;
this.empSpc = empSpc;
- this.sideArea = sideArea;
+ this.sepSweptArea = sepSweptArea;
}
}
-export class SideArea {
+export class SepSweptArea {
x: number;
y: number;
w: number;
h: number;
sweptLeft: boolean;
- extraSz: number;
- constructor(x: number, y: number, w: number, h: number, sweptLeft: boolean, extraSz: number){
+ tileSpacing: number;
+ constructor(x: number, y: number, w: number, h: number, sweptLeft: boolean, tileSpacing: number){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.sweptLeft = sweptLeft;
- this.extraSz = extraSz;
- }
-}
-export class LeftoverArea {
- parentX: number;
- parentY: number;
- w: number;
- h: number;
- sweptLeft: boolean;
- constructor(parentX: number, parentY: number, w: number, h: number, sweptLeft: boolean){
- this.parentX = parentX;
- this.parentY = parentY;
- this.w = w;
- this.h = h;
- this.sweptLeft = sweptLeft;
+ this.tileSpacing = tileSpacing;
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 01:10:22 +0000