Merge branch 'main' of https://github.com/FractalHQ/fractils

src/lib/utils/draggable3.ts

@@ -535,6 +535,8 @@ export class Draggable {
 		// Update the bounds rect.
 		this.#recomputeBounds()
 
+		this.node.dispatchEvent(new CustomEvent('grab'))
+
 		// Dispatch custom event
 		this.#fireSvelteDragStartEvent()
 
@@ -572,6 +574,8 @@ export class Draggable {
 
 		this.#active = false
 
+		this.node.dispatchEvent(new CustomEvent('release'))
+
 		this.#fireSvelteDragEndEvent()
 	}
 
@@ -621,15 +625,8 @@ export class Draggable {
 			targetY = Math.min(targetY + overflowY, this.position.y)
 			// Only move if we're not already there.
 			change = change || targetY !== this.y
-
-			// console.log('HIT Y')
 		}
 
-		// console.log('this.position.y', this.position.y)
-		// console.log('overflowY', overflowY)
-		// console.log('targetY', targetY)
-		// console.log('change', change)
-
 		if (change) {
 			this.moveTo({
 				x: Math.round(targetX),

src/lib/utils/resizable.ts

@@ -326,16 +326,15 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 			parseFloat(paddingRight) +
 			parseFloat(borderLeftWidth) +
 			parseFloat(borderRightWidth)
-
-		const min = Math.max(parseFloat(minWidth) + borderBox, 25)
+		const min = Math.max((parseFloat(minWidth) || 0) + borderBox, 25)
 		const max = Math.min(this.boundsRect.width, +maxWidth || Infinity)
 		const newWidth = clamp(width - deltaX, min, max)
 
-		console.log('borderBox', borderBox)
-		console.log('minWidth', minWidth)
-		console.log('min', min)
-		console.log('max', max)
-		console.log('newWidth', newWidth)
+		// console.log('borderBox', borderBox)
+		// console.log('minWidth', minWidth)
+		// console.log('min', min)
+		// console.log('max', max)
+		// console.log('newWidth', newWidth)
 
 		if (newWidth === min) deltaX = width - newWidth
 		this.translateX += deltaX
@@ -348,7 +347,8 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 
 	resizeRight = (x: number) => {
 		const { width, top, right, bottom } = this.node.getBoundingClientRect()
-		const { minWidth, maxWidth } = window.getComputedStyle(this.node)
+		const { minWidth, maxWidth, paddingLeft, paddingRight, borderLeftWidth, borderRightWidth } =
+			window.getComputedStyle(this.node)
 
 		let deltaX = x - right
 		if (deltaX === 0) return this
@@ -360,7 +360,13 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 				continue
 			deltaX = Math.min(deltaX, o.left - right)
 		}
-		const min = parseFloat(minWidth) || 25
+
+		const borderBox =
+			parseFloat(paddingLeft) +
+			parseFloat(paddingRight) +
+			parseFloat(borderLeftWidth) +
+			parseFloat(borderRightWidth)
+		const min = Math.max((parseFloat(minWidth) || 0) + borderBox, 25)
 		const max = Math.min(this.boundsRect.width, +maxWidth || Infinity)
 		const newWidth = clamp(width + deltaX, min, max)
 
@@ -396,8 +402,7 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 			parseFloat(paddingBottom) +
 			parseFloat(borderTopWidth) +
 			parseFloat(borderBottomWidth)
-
-		const min = Math.max(parseFloat(minHeight) + borderBox, 25)
+		const min = Math.max((parseFloat(minHeight) || 0) + borderBox, 25)
 		const max = Math.min(this.boundsRect.height, +maxHeight || Infinity)
 		const newHeight = clamp(height - deltaY, min, max)
 
@@ -413,7 +418,14 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 
 	resizeBottom = (y: number) => {
 		const { height, right, left, bottom } = this.node.getBoundingClientRect()
-		const { minHeight, maxHeight } = window.getComputedStyle(this.node)
+		const {
+			minHeight,
+			maxHeight,
+			paddingTop,
+			paddingBottom,
+			borderTopWidth,
+			borderBottomWidth,
+		} = window.getComputedStyle(this.node)
 
 		let deltaY = y - bottom
 		if (deltaY === 0) return this
@@ -425,7 +437,13 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 				continue
 			deltaY = Math.min(deltaY, o.top - bottom)
 		}
-		const min = parseFloat(minHeight) || 25
+
+		const borderBox =
+			parseFloat(paddingTop) +
+			parseFloat(paddingBottom) +
+			parseFloat(borderTopWidth) +
+			parseFloat(borderBottomWidth)
+		const min = Math.max((parseFloat(minHeight) || 0) + borderBox, 25)
 		const max = Math.min(this.boundsRect.height, +maxHeight || Infinity)
 		const newHeight = clamp(height + deltaY, min, max)
 
@@ -515,7 +533,7 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 				transition: opacity 0.1s;
 			}
 			
-			.fractils-resizable:not(.fractils-resizable-grabbing) .resize-grabber:hover {
+			.fractils-resizable:not(.fractils-grabbing) .resize-grabber:hover {
 				opacity: 0.5;
 			}
 
@@ -595,6 +613,8 @@ export class Resizable implements Omit<ResizableOptions, 'size' | 'obstacles'> {
 				}
 			`
 
+		css += `.fractils-grabbing .resize-grabber {cursor: default}`
+
 		const cSize = this.#cornerGrabberSize
 		const cScale = 3
 		const cOffset = -6

src/lib/utils/windowManager.ts

@@ -95,6 +95,9 @@ export class WindowManager {
 		this.draggableOptions = this.#resolve(this.opts.draggable)
 		this.resizableOptions = this.#resolve(this.opts.resizable)
 
+		for (const w of this.windows) {
+		}
+
 		// Add any obstacles to both the draggable and resizable options.
 		if (this.opts.obstacles) {
 			if (this.draggableOptions) this.draggableOptions.obstacles = this.opts.obstacles
@@ -111,11 +114,31 @@ export class WindowManager {
 			draggableInstance: undefined,
 		}
 
+		const addClasses = () => {
+			const nodes = this.windows.filter(({ element }) => element !== node)
+			for (const { element } of nodes) {
+				element.classList.add('fractils-grabbing')
+			}
+		}
+
+		const removeClasses = () => {
+			const nodes = this.windows.filter(({ element }) => element !== node)
+			for (const { element } of nodes) {
+				element.classList.remove('fractils-grabbing')
+			}
+		}
+
 		if (this.draggableOptions) {
 			const obstacles = options?.obstacles ?? this.opts.obstacles
 			// Order of precedence: options.draggable.obstacles > options.obstacles > this.opts.obstacles
 			const opts = Object.assign(this.draggableOptions, { obstacles }, options?.draggable)
 			instance.draggableInstance = new Draggable(node, opts)
+
+			node.addEventListener('grab', addClasses)
+			this.#listeners.add(() => node.removeEventListener('grab', addClasses))
+
+			node.addEventListener('release', removeClasses)
+			this.#listeners.add(() => node.removeEventListener('release', removeClasses))
 		}
 
 		if (this.resizableOptions) {
@@ -124,21 +147,9 @@ export class WindowManager {
 			const opts = Object.assign(this.resizableOptions, { obstacles }, options?.resizable)
 			instance.resizableInstance = new Resizable(node, opts)
 
-			const addClasses = () => {
-				const nodes = this.windows.filter(({ element }) => element !== node)
-				for (const { element } of nodes) {
-					element.classList.add('fractils-resizable-grabbing')
-				}
-			}
 			node.addEventListener('grab', addClasses)
 			this.#listeners.add(() => node.removeEventListener('grab', addClasses))
 
-			const removeClasses = () => {
-				const nodes = this.windows.filter(({ element }) => element !== node)
-				for (const { element } of nodes) {
-					element.classList.remove('fractils-resizable-grabbing')
-				}
-			}
 			node.addEventListener('release', removeClasses)
 			this.#listeners.add(() => node.removeEventListener('release', removeClasses))
 		}
@@ -203,7 +214,7 @@ export class WindowManager {
 
 		node.animate([{ scale }, { scale: scale - 1 + this.animationOptions.scale }], animOpts)
 
-		node.addEventListener('pointerup', () => node.animate([{ scale }], animOpts), {
+		window.addEventListener('pointerup', () => node.animate([{ scale }], animOpts), {
 			once: true,
 		})
 	}

src/routes/demo/window-manager/+page.svelte

@@ -18,8 +18,8 @@
 		// keepZ: true
 	})
 
-	// const windows = [1, 2, 3, 4, 5]
-	const windows = [1]
+	const windows = [1, 2, 3, 4, 5]
+
 	let deleted = windows.map(() => false)
 </script>