Add divs enclosing parent-area-using tiles

3 files changed, 48 insertions, 19 deletions

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 50f43ce..7af5583 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -49,6 +49,18 @@ export default {
 			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',
+				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">
+			<tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child"
+				@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
+				></tile>
+		</div>
 		<tile v-for="child in tree.children" :key="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 5c3d08e..a772594 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -27,12 +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},
 			};
 			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},
 					}, lvl-1));
 				return tree;
 			}
@@ -78,13 +80,25 @@ export default {
 			}
 		},
 		applyLayout(layout, tree){
-			//layout format: {x, y, w, h, headerSz, children:[layout1, ...], contentW, contentH, empSpc}
+			//layout format: {x, y, w, h, headerSz, children:[layout1, ...], contentW, contentH, empSpc, sideArea}
 			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]));
+			//handle case where leaf nodes placed in leftover space from parent-sweep
+			if (layout.sideArea){
+				//add parent area coords
+				tree.sideArea = layout.sideArea;
+				//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;
+				});
+			} else {
+				tree.sideArea = {x:0, y:0, w:0, h:0, sweptLeft:false, extraSz:0};
+			}
 		}
 	},
 	created(){
diff --git a/src/layout.js b/src/layout.js
index ec1398a..ea4dbd1 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 = true, ALLOW_PARENT_AREA = true;
+		let SWEEP_LEFT_ONLY = false, 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));
@@ -258,17 +258,13 @@ const sweepToSideLayout = {
 			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;
+			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);
 				if (sweptLayout != null){
-					sweptLayout.children.forEach(layout => {
-						layout.x += -x+parentArea.x;
-						layout.y += -y+parentArea.y;
-					});
 					//get remaining-area layout
 					tempTree = {tolNode: null, children: nonLeaves};
 					if (nonLeaves.length > 1){
@@ -278,11 +274,12 @@ const sweepToSideLayout = {
 						//get leftover swept-layout-area to propagate
 						let leftOverWidth = parentArea.w - sweptLayout.contentW;
 						let leftOverHeight = parentArea.h - sweptLayout.contentH;
-						let leftOverArea = (leftOverWidth > leftOverHeight) ?
-							{x: parentArea.x+sweptLayout.contentW, y: parentArea.y, w: leftOverWidth, h: parentArea.h} :
-							{x: parentArea.x, y: parentArea.y+sweptLayout.contentH, w: parentArea.w, h: leftOverHeight};
-						leftOverArea.x += -TILE_SPACING;
-						leftOverArea.y += -headerSz - TILE_SPACING*2;
+						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;
 						//call genLayout
 						nonLeavesLayout = staticRectLayout.genLayout(
 							tempTree, 0, 0, area.w, area.h, true,
@@ -290,13 +287,14 @@ const sweepToSideLayout = {
 					}
 					if (nonLeavesLayout != null){
 						nonLeavesLayout.children.forEach(layout => {layout.y += headerSz});
+						sweptLeft = parentArea.sweptLeft;
 						usingParentArea = true;
 					}
 				}
 			}
 			if (!usingParentArea){
 				tempTree = {tolNode: null, children: leaves};
-				let xyChg, leftOverArea;
+				let xyChg;
 				if (SWEEP_LEFT_ONLY){
 					sweptLayout = staticSqrLayout.genLayout(tempTree, 0, 0,
 						Math.max(area.w*ratio, MIN_TILE_SZ+TILE_SPACING*2), area.h, true);
@@ -329,16 +327,17 @@ const sweepToSideLayout = {
 				} else {
 					//get leftover swept-layout-area to propagate
 					if (sweptLeft){
-						leftOverArea = { //x and y are relative to a non-leaf child node
-							x: -sweptLayout.contentW + TILE_SPACING, y: sweptLayout.contentH - TILE_SPACING,
-							w: sweptLayout.contentW, h: area.h-sweptLayout.contentH
+						leftOverArea = { //parentX and parentY are relative to the non-leaves-area
+							parentX: -sweptLayout.contentW + TILE_SPACING, parentY: sweptLayout.contentH - TILE_SPACING,
+							w: sweptLayout.contentW - TILE_SPACING*2, h: area.h-sweptLayout.contentH - TILE_SPACING,
 						};
 					} else {
 						leftOverArea = {
-							x: sweptLayout.contentW - TILE_SPACING, y: -sweptLayout.contentH + TILE_SPACING,
-							w: area.w-sweptLayout.contentW, h: sweptLayout.contentH
+							parentX: sweptLayout.contentW - TILE_SPACING, parentY: -sweptLayout.contentH + TILE_SPACING,
+							w: area.w-sweptLayout.contentW - TILE_SPACING, h: sweptLayout.contentH - TILE_SPACING*2
 						};
 					}
+					leftOverArea.sweptLeft = sweptLeft;
 					//call genLayout
 					nonLeavesLayout = staticRectLayout.genLayout(
 						tempTree, 0, 0, area.w, area.h, true,
@@ -356,7 +355,6 @@ const sweepToSideLayout = {
 				.map(i => layouts[i]);
 			return {
 				x: x, y: y, w: w, h: h, headerSz: headerSz,
-				//children: [...sweptLayout.children, ...nonLeavesLayout.children],
 				children: layoutsInOldOrder,
 				contentW: sweptLeft ?
 					sweptLayout.contentW + nonLeavesLayout.contentW - TILE_SPACING :
@@ -365,6 +363,11 @@ const sweepToSideLayout = {
 					Math.max(sweptLayout.contentH, nonLeavesLayout.contentH) :
 					sweptLayout.contentH + nonLeavesLayout.contentH - TILE_SPACING,
 				empSpc: sweptLayout.empSpc + nonLeavesLayout.empSpc,
+				sideArea: !usingParentArea ? null : {
+					x: parentArea.parentX, y: parentArea.parentY,
+					w: parentArea.w, h: parentArea.h,
+					sweptLeft: sweptLeft, extraSz: TILE_SPACING+1,
+				},
 			};
 		}
 	},