diff --git a/src/lib/utils/draggable.ts b/src/lib/utils/draggable.ts
index 1f758f6a..ce6781dc 100644
--- 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) => ' '.repeat(n)
+ // this.node.innerHTML = `
+ // x: ${this.x}, y: ${this.y}
+ //
rect: {
+ //
${s(4)}top: ${this.rect.top},
+ //
${s(4)}right: ${this.rect.right},
+ //
${s(4)}bottom: ${this.rect.bottom},
+ //
${s(4)}left: ${this.rect.left},
+ //
}
+ // `
+ // }
+
this.#fireUpdateEvent()
}
diff --git a/src/routes/demo/window-manager/+page.svelte b/src/routes/demo/window-manager/+page.svelte
index 0538bd4c..736a1ba9 100644
--- a/src/routes/demo/window-manager/+page.svelte
+++ b/src/routes/demo/window-manager/+page.svelte
@@ -5,23 +5,22 @@
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)
@@ -29,7 +28,26 @@
- {#each windows as i}
+
+
+
+
+