[wip] resize

Co-authored-by: dllmusic <[email protected]>
braebo · Feb 23, 2024 · ab1b8fa · ab1b8fa
1 parent 5100b52
commit ab1b8fa
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 33 deletions.
diff --git a/src/lib/utils/draggable.ts b/src/lib/utils/draggable.ts
@@ -842,6 +842,9 @@ export class Draggable {
 		let bBottom = b.bottom
 		let bLeft = b.left
 
+		let hitX = false
+		let hitY = false
+
 		for (const obstacle of this.obstacleEls) {
 			const o = obstacle.getBoundingClientRect()
 
@@ -859,13 +862,15 @@ export class Draggable {
 			if (this.node === obstacle) continue
 
 			//· Check X ··································¬
+
 			// too high || too low
 			if (!(top > oBottom || bottom < oTop)) {
 				// Is obstacle on the right or left?
-				const overRight = right > oLeft && left <= oRight
+				const overRight = right >= oLeft && left <= oRight
 
 				if (overRight) {
 					bRight = Math.min(bRight, oLeft)
+					break
 				}
 			}
 			//⌟
@@ -874,11 +879,16 @@ export class Draggable {
 
 			// too far left || too far right
 			if (!(left >= oRight || right <= oLeft)) {
+				//! This fixes the ice-block bug, but only for x-resizing.
+				// if (!(left >= oRight || right <= oLeft)) {
 				// Is obstacle on top or bottom?
 				const overBottom = bottom > oTop && top <= oBottom
 
 				if (overBottom) {
-					bBottom = Math.min(bBottom, oTop)
+					 bBottom = Math.min(bBottom, oTop)
+					break
+
+					// bRight = b.right
 				}
 			}
 			//⌟
@@ -898,13 +908,15 @@ export class Draggable {
 		let change = false
 
 		// Move if overflown.
-		if (overflowX !== 0 && Math.abs(overflowX) <= Math.abs(overflowY)) {
+		// if (overflowX > 0 || (overflowX < 0 && Math.abs(overflowX) <= Math.abs(overflowY))) {
+		if (overflowX !== 0) {
 			targetX = Math.min(targetX + overflowX, this.position.x)
 			// Only move if we're not already there.
-			change = targetX !== this.x
+			change = targetX !== this.x || targetX !== this.position.x
 		}
 
-		if (overflowY !== 0 && Math.abs(overflowY) <= Math.abs(overflowX)) {
+		// if (overflowY > 0 || (overflowY > 0  && Math.abs(overflowY) <= Math.abs(overflowX))) {
+		if (overflowY !== 0) {
 			targetY = Math.min(targetY + overflowY, this.position.y)
 			// Only move if we're not already there.
 			change = change || targetY !== this.y
@@ -916,6 +928,15 @@ export class Draggable {
 				y: Math.round(targetY),
 			})
 		}
+
+		if (DEV) {
+			const xdev = this.node.querySelector('.content') as HTMLElement
+			if (xdev) {
+				xdev.innerText = `x: ${this.position.x}, y: ${this.position.y}\n
+			overflowX: ${overflowX}, overflowY: ${overflowY}\n
+			targetX: ${targetX}, targetY: ${targetY}\n`
+			}
+		}
 	}
 
 	updatePosition = (targetX: number, targetY: number) => {
@@ -1001,6 +1022,19 @@ export class Draggable {
 			}
 		}
 
+		// if (DEV) {
+		// const s = (n = 1) => '&nbsp;'.repeat(n)
+		// this.node.innerHTML = `
+		// 	x: ${this.x}, y: ${this.y}
+		// 	<br> rect: {
+		// 	<br> ${s(4)}top: ${this.rect.top},
+		// 	<br> ${s(4)}right: ${this.rect.right},
+		// 	<br> ${s(4)}bottom: ${this.rect.bottom},
+		// 	<br> ${s(4)}left: ${this.rect.left},
+		// 	<br> }
+		// `
+		// }
+
 		this.#fireUpdateEvent()
 	}
 

diff --git a/src/routes/demo/window-manager/+page.svelte b/src/routes/demo/window-manager/+page.svelte
@@ -5,31 +5,49 @@
 
 	const windowManager = new WindowManager({
 		draggable: {
-			obstacles: ['.window-4', '.sidebar'],
+			obstacles: ['.window','.sidebar'],
 		},
 		resizable: {
-			// visible: true,
 			sides: ['top', 'right', 'bottom', 'left'],
 		},
 		animation: {
 			scale: 1.025,
 			duration: 75,
 		},
-		// keepZ: true
 	})
 
 	// let windows = [1, 2, 3, 4, 5]
-	let windows = [4, 5]
+	// let windows = [4, 5]
+	let windows = [] as number[]
 
-	let deleted = windows.map(() => false)
+	// let deleted = windows.map(() => false)
 </script>
 
 <div class="page">
 	<div class="main">
 		<button on:click={() => (windows = [...windows, windows.length + 1])}>Add Window</button>
 		<button on:click={() => console.log(windowManager)}>console.log(windowManager)</button>
 
-		{#each windows as i}
+		<div
+			class="window window-1"
+			style="top:500px;left:250px"
+			out:scale={{ duration: 150, easing: quintIn }}
+			use:windowManager.add
+
+		>
+			<div class="content"><h2>Window 1</h2></div>
+		</div>
+
+		<div
+			class="window window-2"
+			style="top:500px;left:550px"
+			out:scale={{ duration: 150, easing: quintIn }}
+			use:windowManager.add
+		>
+			<div class="content"><h2>Window 2</h2></div>
+		</div>
+
+		<!-- {#each windows as i}
 			{@const evenOddClass = i % 2 === 0 ? 'even' : 'odd'}
 			{#if !deleted[i - 1]}
 				<div
@@ -47,7 +65,7 @@
 					</div>
 				</div>
 			{/if}
-		{/each}
+		{/each} -->
 	</div>
 	<div class="sidebar" />
 </div>
@@ -61,7 +79,7 @@
 	}
 
 	.sidebar {
-		background: var(--bg-b);
+		background: var(--bg-a);
 		height: 20rem;
 		margin: auto 0;
 	}
@@ -75,15 +93,21 @@
 
 		width: 240px;
 		height: 120px;
+		padding: 0.5rem;
 
 		background-color: rgba(var(--bg-a-rgb), 0.5);
 		backdrop-filter: blur(0.25rem);
 		border: 1px solid var(--bg-b);
 		border-radius: var(--radius);
 		box-shadow: var(--shadow-lg);
+
+		font-size: var(--font-xs);
+		font-family: var(--font-b);
+
+		overflow: hidden;
 	}
 
-	.window-4 {
+	.window-2 {
 		color: black;
 		background-color: lightslategrey;
 	}
@@ -100,25 +124,25 @@
 		}
 	}
 
-	.delete {
-		all: unset;
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		// padding: 0.5rem !important;
-		cursor: pointer;
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background: tomato;
-		filter: brightness(0.25) saturate(0.25);
-		transition: 0.25s ease-in;
-		&:hover {
-			filter: brightness(0.5);
-			// opacity: 0.5;
-		}
-		z-index: 999;
-	}
+	// .delete {
+	// 	all: unset;
+	// 	position: absolute;
+	// 	top: 0.5rem;
+	// 	right: 0.5rem;
+	// 	// padding: 0.5rem !important;
+	// 	cursor: pointer;
+	// 	width: 10px;
+	// 	height: 10px;
+	// 	border-radius: 50%;
+	// 	background: tomato;
+	// 	filter: brightness(0.25) saturate(0.25);
+	// 	transition: 0.25s ease-in;
+	// 	&:hover {
+	// 		filter: brightness(0.5);
+	// 		// opacity: 0.5;
+	// 	}
+	// 	z-index: 999;
+	// }
 
 	button {
 		margin: 1rem auto;