Combine SideArea and LeftoverArea into SepSweptArea

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;
 	}
 }