grabbing > resize cursors off

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()
 	}
 
@@ -620,16 +624,9 @@ export class Draggable {
 		if (overflowY !== 0) {
 			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')
+			change || targetY !== this.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

@@ -515,7 +515,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 +595,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))
 		}

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>