@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/dist/gui/EFResizableBox.js

@@ -1,214 +1,11 @@
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { getCornerPoint, getOppositeCorner } from "./transformUtils.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 //#region src/gui/EFResizableBox.ts
 const DEFAULT_MIN_SIZE = 10;
-const CENTER_RESIZE_MULTIPLIER = 2;
-function constrainMovementDeltas(initialBounds, deltaX, deltaY, container) {
-	const maxLeftMovement = -initialBounds.x;
-	const maxRightMovement = container.width - (initialBounds.x + initialBounds.width);
-	const maxUpMovement = -initialBounds.y;
-	const maxDownMovement = container.height - (initialBounds.y + initialBounds.height);
-	return {
-		deltaX: Math.max(maxLeftMovement, Math.min(maxRightMovement, deltaX)),
-		deltaY: Math.max(maxUpMovement, Math.min(maxDownMovement, deltaY))
-	};
-}
-function calculateNormalResize(context, handle) {
-	const { initialBounds, movement } = context;
-	const { deltaX, deltaY } = movement;
-	switch (handle) {
-		case "bottom-right": return {
-			...initialBounds,
-			width: initialBounds.width + deltaX,
-			height: initialBounds.height + deltaY
-		};
-		case "top-left": {
-			const rightEdge = initialBounds.x + initialBounds.width;
-			const bottomEdge = initialBounds.y + initialBounds.height;
-			const newX = initialBounds.x + deltaX;
-			const newY = initialBounds.y + deltaY;
-			return {
-				x: newX,
-				y: newY,
-				width: rightEdge - newX,
-				height: bottomEdge - newY
-			};
-		}
-		case "top-right": {
-			const bottomEdge = initialBounds.y + initialBounds.height;
-			const newY = initialBounds.y + deltaY;
-			return {
-				...initialBounds,
-				y: newY,
-				width: initialBounds.width + deltaX,
-				height: bottomEdge - newY
-			};
-		}
-		case "bottom-left": {
-			const rightEdge = initialBounds.x + initialBounds.width;
-			const newX = initialBounds.x + deltaX;
-			return {
-				...initialBounds,
-				x: newX,
-				width: rightEdge - newX,
-				height: initialBounds.height + deltaY
-			};
-		}
-		case "top": {
-			const bottomEdge = initialBounds.y + initialBounds.height;
-			const newY = initialBounds.y + deltaY;
-			return {
-				...initialBounds,
-				y: newY,
-				height: bottomEdge - newY
-			};
-		}
-		case "right": return {
-			...initialBounds,
-			width: initialBounds.width + deltaX
-		};
-		case "bottom": return {
-			...initialBounds,
-			height: initialBounds.height + deltaY
-		};
-		case "left": {
-			const rightEdge = initialBounds.x + initialBounds.width;
-			const newX = initialBounds.x + deltaX;
-			return {
-				...initialBounds,
-				x: newX,
-				width: rightEdge - newX
-			};
-		}
-		default: return initialBounds;
-	}
-}
-function calculateAspectRatioResize(context, handle) {
-	const { initialBounds, movement, constraints } = context;
-	const { deltaX, deltaY } = movement;
-	if (!constraints.aspectRatio) return initialBounds;
-	const aspectRatio = constraints.aspectRatio;
-	const widthMovement = deltaX;
-	const heightMovement = deltaY * aspectRatio;
-	let movementValue;
-	switch (handle) {
-		case "bottom-right":
-		case "top-left":
-			movementValue = (widthMovement + heightMovement) / 2;
-			break;
-		case "top-right":
-		case "bottom-left":
-			movementValue = (widthMovement - heightMovement) / 2;
-			break;
-		default: movementValue = widthMovement;
-	}
-	const baseWidth = handle === "top-left" || handle === "bottom-left" ? initialBounds.width - movementValue : initialBounds.width + movementValue;
-	const width = Math.max(constraints.minSize, baseWidth);
-	const height = width / aspectRatio;
-	const newBounds = {
-		...initialBounds,
-		width,
-		height
-	};
-	switch (handle) {
-		case "top-left":
-			newBounds.x = initialBounds.x + initialBounds.width - width;
-			newBounds.y = initialBounds.y + initialBounds.height - height;
-			break;
-		case "top-right":
-			newBounds.y = initialBounds.y + initialBounds.height - height;
-			break;
-		case "bottom-left":
-			newBounds.x = initialBounds.x + initialBounds.width - width;
-			break;
-	}
-	return newBounds;
-}
-function calculateCenterResize(context, handle) {
-	const { initialBounds, movement } = context;
-	const { deltaX, deltaY } = movement;
-	const centerX = initialBounds.x + initialBounds.width / 2;
-	const centerY = initialBounds.y + initialBounds.height / 2;
-	let widthChange = 0;
-	let heightChange = 0;
-	switch (handle) {
-		case "bottom-right":
-			widthChange = deltaX * CENTER_RESIZE_MULTIPLIER;
-			heightChange = deltaY * CENTER_RESIZE_MULTIPLIER;
-			break;
-		case "top-left":
-			widthChange = -deltaX * CENTER_RESIZE_MULTIPLIER;
-			heightChange = -deltaY * CENTER_RESIZE_MULTIPLIER;
-			break;
-		case "top-right":
-			widthChange = deltaX * CENTER_RESIZE_MULTIPLIER;
-			heightChange = -deltaY * CENTER_RESIZE_MULTIPLIER;
-			break;
-		case "bottom-left":
-			widthChange = -deltaX * CENTER_RESIZE_MULTIPLIER;
-			heightChange = deltaY * CENTER_RESIZE_MULTIPLIER;
-			break;
-		case "top":
-		case "bottom":
-			heightChange = (handle === "bottom" ? deltaY : -deltaY) * CENTER_RESIZE_MULTIPLIER;
-			break;
-		case "left":
-		case "right":
-			widthChange = (handle === "right" ? deltaX : -deltaX) * CENTER_RESIZE_MULTIPLIER;
-			break;
-	}
-	const newWidth = initialBounds.width + widthChange;
-	const newHeight = initialBounds.height + heightChange;
-	return {
-		x: centerX - newWidth / 2,
-		y: centerY - newHeight / 2,
-		width: newWidth,
-		height: newHeight
-	};
-}
-function calculateCenterResizeWithAspectRatio(context, handle) {
-	const { initialBounds, movement, constraints } = context;
-	const { deltaX, deltaY } = movement;
-	if (!constraints.aspectRatio) return initialBounds;
-	const aspectRatio = constraints.aspectRatio;
-	const centerX = initialBounds.x + initialBounds.width / 2;
-	const centerY = initialBounds.y + initialBounds.height / 2;
-	let movementValue;
-	switch (handle) {
-		case "bottom-right":
-			movementValue = Math.max(deltaX, deltaY);
-			break;
-		case "top-left":
-			movementValue = -Math.max(-deltaX, -deltaY);
-			break;
-		case "top-right":
-			movementValue = Math.max(deltaX, -deltaY);
-			break;
-		case "bottom-left":
-			movementValue = Math.max(-deltaX, deltaY);
-			break;
-		case "top":
-		case "bottom":
-			movementValue = handle === "bottom" ? deltaY : -deltaY;
-			break;
-		case "left":
-		case "right":
-			movementValue = handle === "right" ? deltaX : -deltaX;
-			break;
-		default: movementValue = Math.max(deltaX, deltaY);
-	}
-	const newWidth = Math.max(constraints.minSize, initialBounds.width + movementValue * CENTER_RESIZE_MULTIPLIER);
-	const newHeight = newWidth / aspectRatio;
-	return {
-		x: centerX - newWidth / 2,
-		y: centerY - newHeight / 2,
-		width: newWidth,
-		height: newHeight
-	};
-}
 let EFResizableBox = class EFResizableBox$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -222,63 +19,82 @@ let EFResizableBox = class EFResizableBox$1 extends LitElement {
 		this.containerHeight = 0;
 		this.minSize = DEFAULT_MIN_SIZE;
 		this.isDragging = false;
-		this.dragMode = null;
-		this.interaction = null;
-		this.modifiers = {
-			shift: false,
-			alt: false
+		this.isResizing = null;
+		this.dragStart = null;
+		this.dragStartPosition = {
+			x: 0,
+			y: 0
 		};
-		this.handlePointerMove = (e) => {
-			if (!this.isDragging || !this.interaction || e.pointerId !== this.interaction.pointerId) return;
+		this.resizeStartCorner = null;
+		this.resizeStartSize = null;
+		this.resizeStartPosition = null;
+		this.handlePointerDown = (e, mode, handle) => {
 			e.preventDefault();
-			const deltaX = e.clientX - this.interaction.startPoint.x;
-			const deltaY = e.clientY - this.interaction.startPoint.y;
-			this.modifiers = {
-				shift: e.shiftKey,
-				alt: e.altKey
+			e.stopPropagation();
+			this.isDragging = true;
+			this.isResizing = mode === "resize" ? handle || null : null;
+			this.dragStart = {
+				x: e.clientX,
+				y: e.clientY
 			};
-			if (this.dragMode === "move") {
-				const constrainedMovement = constrainMovementDeltas(this.interaction.initialBounds, deltaX, deltaY, {
-					width: this.containerWidth,
-					height: this.containerHeight
-				});
+			this.dragStartPosition = {
+				x: this.bounds.x,
+				y: this.bounds.y
+			};
+			if (mode === "resize" && handle) {
+				const oppositeCorner = getOppositeCorner(handle);
+				this.resizeStartCorner = getCornerPoint(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height, 0, oppositeCorner.x, oppositeCorner.y);
+				this.resizeStartSize = {
+					width: this.bounds.width,
+					height: this.bounds.height
+				};
+				this.resizeStartPosition = {
+					x: this.bounds.x,
+					y: this.bounds.y
+				};
+			}
+			document.addEventListener("pointermove", this.handlePointerMove, { passive: false });
+			document.addEventListener("pointerup", this.handlePointerUp, { passive: false });
+		};
+		this.handlePointerMove = (e) => {
+			if (!this.isDragging || !this.dragStart) return;
+			e.preventDefault();
+			const deltaX = e.clientX - this.dragStart.x;
+			const deltaY = e.clientY - this.dragStart.y;
+			if (this.isResizing && this.resizeStartCorner && this.resizeStartSize && this.resizeStartPosition) {
+				const oppositeCorner = getOppositeCorner(this.isResizing);
+				const rotationRadians = 0;
+				let newWidth = this.resizeStartSize.width;
+				let newHeight = this.resizeStartSize.height;
+				if (this.isResizing.includes("e")) newWidth = this.resizeStartSize.width + deltaX;
+				else if (this.isResizing.includes("w")) newWidth = this.resizeStartSize.width - deltaX;
+				if (this.isResizing.includes("s")) newHeight = this.resizeStartSize.height + deltaY;
+				else if (this.isResizing.includes("n")) newHeight = this.resizeStartSize.height - deltaY;
+				newWidth = Math.max(this.minSize, Math.min(this.containerWidth - this.bounds.x, newWidth));
+				newHeight = Math.max(this.minSize, Math.min(this.containerHeight - this.bounds.y, newHeight));
+				const newOppositeCorner = getCornerPoint(this.resizeStartPosition.x, this.resizeStartPosition.y, newWidth, newHeight, rotationRadians, oppositeCorner.x, oppositeCorner.y);
+				const offsetX = this.resizeStartCorner.x - newOppositeCorner.x;
+				const offsetY = this.resizeStartCorner.y - newOppositeCorner.y;
 				this.bounds = {
-					...this.interaction.initialBounds,
-					x: this.interaction.initialBounds.x + constrainedMovement.deltaX,
-					y: this.interaction.initialBounds.y + constrainedMovement.deltaY
+					x: Math.max(0, Math.min(this.containerWidth - newWidth, this.resizeStartPosition.x + offsetX)),
+					y: Math.max(0, Math.min(this.containerHeight - newHeight, this.resizeStartPosition.y + offsetY)),
+					width: newWidth,
+					height: newHeight
 				};
-			} else if (this.dragMode === "resize" && this.interaction.target.handle) {
-				const context = {
-					initialBounds: this.interaction.initialBounds,
-					container: {
-						width: this.containerWidth,
-						height: this.containerHeight
-					},
-					constraints: {
-						minSize: this.minSize,
-						aspectRatio: this.modifiers.shift ? this.interaction.initialBounds.width / this.interaction.initialBounds.height : void 0
-					},
-					movement: {
-						deltaX,
-						deltaY
-					},
-					modifiers: {
-						centerResize: this.modifiers.alt,
-						preserveAspectRatio: this.modifiers.shift
-					}
+			} else {
+				const constrainedX = Math.max(0, Math.min(this.containerWidth - this.bounds.width, this.dragStartPosition.x + deltaX));
+				const constrainedY = Math.max(0, Math.min(this.containerHeight - this.bounds.height, this.dragStartPosition.y + deltaY));
+				this.bounds = {
+					...this.bounds,
+					x: constrainedX,
+					y: constrainedY
 				};
-				this.bounds = this.calculateBoundsWithModeAwareConstraints(context, this.interaction.target.handle);
 			}
 			this.dispatchBoundsChange();
 		};
 		this.handlePointerUp = (e) => {
-			if (this.interaction && e.pointerId !== this.interaction.pointerId) return;
 			e.preventDefault();
-			this.isDragging = false;
-			this.dragMode = null;
-			this.interaction = null;
-			document.removeEventListener("pointermove", this.handlePointerMove);
-			document.removeEventListener("pointerup", this.handlePointerUp);
+			this.cleanup();
 		};
 	}
 	static {
@@ -298,14 +114,14 @@ let EFResizableBox = class EFResizableBox$1 extends LitElement {
       background-color: var(--ef-resizable-box-handle-color, #3b82f6);
       touch-action: none;
     }
-    .top-left { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
-    .top-right { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
-    .bottom-left { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
-    .bottom-right { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
-    .top { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
-    .right { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }
-    .bottom { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
-    .left { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }
+    .handle.nw { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
+    .handle.ne { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
+    .handle.sw { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
+    .handle.se { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
+    .handle.n { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
+    .handle.e { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }
+    .handle.s { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
+    .handle.w { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }
   `;
 	}
 	connectedCallback() {
@@ -322,182 +138,24 @@ let EFResizableBox = class EFResizableBox$1 extends LitElement {
 		});
 		if (this.offsetParent) this.resizeObserver.observe(this.offsetParent);
 	}
-	handlePointerDown(e, mode, handle) {
-		e.preventDefault();
-		e.stopPropagation();
-		this.isDragging = true;
-		this.dragMode = mode;
-		this.interaction = {
-			startPoint: {
-				x: e.clientX,
-				y: e.clientY
-			},
-			target: {
-				mode,
-				handle
-			},
-			initialBounds: { ...this.bounds },
-			pointerId: e.pointerId
-		};
-		this.modifiers = {
-			shift: e.shiftKey,
-			alt: e.altKey
-		};
-		document.addEventListener("pointermove", this.handlePointerMove, { passive: false });
-		document.addEventListener("pointerup", this.handlePointerUp, { passive: false });
-	}
-	calculateBoundsWithModeAwareConstraints(context, handle) {
-		const { modifiers, constraints, container, initialBounds } = context;
-		if (!modifiers.centerResize && !modifiers.preserveAspectRatio) {
-			const constrainedMovement = this.constrainResizeDeltas(initialBounds, context.movement.deltaX, context.movement.deltaY, handle, container, constraints.minSize);
-			return calculateNormalResize({
-				...context,
-				movement: constrainedMovement
-			}, handle);
-		}
-		let idealBounds;
-		if (modifiers.centerResize && modifiers.preserveAspectRatio) idealBounds = calculateCenterResizeWithAspectRatio(context, handle);
-		else if (modifiers.centerResize) idealBounds = calculateCenterResize(context, handle);
-		else idealBounds = calculateAspectRatioResize(context, handle);
-		return this.constrainBoundsForMode(idealBounds, context, handle);
-	}
-	constrainBoundsForMode(idealBounds, context, handle) {
-		const { container, constraints, modifiers } = context;
-		if (this.isValidBounds(idealBounds, container, constraints.minSize)) return idealBounds;
-		if (modifiers.centerResize && modifiers.preserveAspectRatio && constraints.aspectRatio) return this.constrainCenterResizeWithAspectRatio(idealBounds, context);
-		if (modifiers.preserveAspectRatio && constraints.aspectRatio) return this.constrainWithAspectRatio(idealBounds, context, handle);
-		if (modifiers.centerResize) return this.constrainCenterResize(idealBounds, context);
-		return this.simpleConstrainBounds(idealBounds, container, constraints.minSize);
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+		this.cleanup();
 	}
-	isValidBounds(bounds, container, minSize) {
-		return bounds.x >= 0 && bounds.y >= 0 && bounds.width >= minSize && bounds.height >= minSize && bounds.x + bounds.width <= container.width && bounds.y + bounds.height <= container.height;
-	}
-	constrainWithAspectRatio(idealBounds, context, handle) {
-		const { container, constraints, initialBounds } = context;
-		if (!constraints.aspectRatio) return initialBounds;
-		const aspectRatio = constraints.aspectRatio;
-		const maxWidth = container.width - Math.max(0, idealBounds.x);
-		const maxHeight = container.height - Math.max(0, idealBounds.y);
-		let constrainedWidth = Math.max(constraints.minSize, Math.min(maxWidth, idealBounds.width));
-		let constrainedHeight = constrainedWidth / aspectRatio;
-		if (constrainedHeight > maxHeight) {
-			constrainedHeight = Math.max(constraints.minSize, maxHeight);
-			constrainedWidth = constrainedHeight * aspectRatio;
-		}
-		if (constrainedWidth < constraints.minSize) {
-			constrainedWidth = constraints.minSize;
-			constrainedHeight = constrainedWidth / aspectRatio;
-		}
-		const result = {
-			...idealBounds,
-			width: constrainedWidth,
-			height: constrainedHeight
-		};
-		switch (handle) {
-			case "top-left":
-				result.x = initialBounds.x + initialBounds.width - constrainedWidth;
-				result.y = initialBounds.y + initialBounds.height - constrainedHeight;
-				break;
-			case "top-right":
-				result.y = initialBounds.y + initialBounds.height - constrainedHeight;
-				break;
-			case "bottom-left":
-				result.x = initialBounds.x + initialBounds.width - constrainedWidth;
-				break;
-		}
-		result.x = Math.max(0, Math.min(container.width - result.width, result.x));
-		result.y = Math.max(0, Math.min(container.height - result.height, result.y));
-		return result;
-	}
-	constrainCenterResize(idealBounds, context) {
-		const { container, constraints, initialBounds } = context;
-		const centerX = initialBounds.x + initialBounds.width / 2;
-		const centerY = initialBounds.y + initialBounds.height / 2;
-		const maxWidthFromCenter = Math.min(centerX * 2, (container.width - centerX) * 2);
-		const maxHeightFromCenter = Math.min(centerY * 2, (container.height - centerY) * 2);
-		const constrainedWidth = Math.max(constraints.minSize, Math.min(maxWidthFromCenter, idealBounds.width));
-		const constrainedHeight = Math.max(constraints.minSize, Math.min(maxHeightFromCenter, idealBounds.height));
-		return {
-			x: centerX - constrainedWidth / 2,
-			y: centerY - constrainedHeight / 2,
-			width: constrainedWidth,
-			height: constrainedHeight
-		};
-	}
-	constrainCenterResizeWithAspectRatio(idealBounds, context) {
-		const { container, constraints, initialBounds } = context;
-		if (!constraints.aspectRatio) return initialBounds;
-		const aspectRatio = constraints.aspectRatio;
-		const centerX = initialBounds.x + initialBounds.width / 2;
-		const centerY = initialBounds.y + initialBounds.height / 2;
-		const maxWidthFromCenter = Math.min(centerX * 2, (container.width - centerX) * 2);
-		const maxHeightFromCenter = Math.min(centerY * 2, (container.height - centerY) * 2);
-		let constrainedWidth = Math.max(constraints.minSize, Math.min(maxWidthFromCenter, idealBounds.width));
-		let constrainedHeight = constrainedWidth / aspectRatio;
-		if (constrainedHeight > maxHeightFromCenter) {
-			constrainedHeight = Math.max(constraints.minSize, maxHeightFromCenter);
-			constrainedWidth = constrainedHeight * aspectRatio;
-		}
-		if (constrainedWidth < constraints.minSize) {
-			constrainedWidth = constraints.minSize;
-			constrainedHeight = constrainedWidth / aspectRatio;
-		}
-		if (constrainedHeight < constraints.minSize) {
-			constrainedHeight = constraints.minSize;
-			constrainedWidth = constrainedHeight * aspectRatio;
-		}
-		return {
-			x: centerX - constrainedWidth / 2,
-			y: centerY - constrainedHeight / 2,
-			width: constrainedWidth,
-			height: constrainedHeight
-		};
-	}
-	simpleConstrainBounds(bounds, container, minSize) {
-		return {
-			x: Math.max(0, Math.min(container.width - bounds.width, bounds.x)),
-			y: Math.max(0, Math.min(container.height - bounds.height, bounds.y)),
-			width: Math.max(minSize, Math.min(container.width - bounds.x, bounds.width)),
-			height: Math.max(minSize, Math.min(container.height - bounds.y, bounds.height))
-		};
-	}
-	constrainResizeDeltas(initialBounds, deltaX, deltaY, handle, container, minSize) {
-		let constrainedDeltaX = deltaX;
-		let constrainedDeltaY = deltaY;
-		switch (handle) {
-			case "bottom-right":
-				constrainedDeltaX = Math.max(minSize - initialBounds.width, Math.min(container.width - initialBounds.x - initialBounds.width, deltaX));
-				constrainedDeltaY = Math.max(minSize - initialBounds.height, Math.min(container.height - initialBounds.y - initialBounds.height, deltaY));
-				break;
-			case "top-left":
-				constrainedDeltaX = Math.max(-initialBounds.x, Math.min(initialBounds.width - minSize, deltaX));
-				constrainedDeltaY = Math.max(-initialBounds.y, Math.min(initialBounds.height - minSize, deltaY));
-				break;
-			case "top-right":
-				constrainedDeltaX = Math.max(minSize - initialBounds.width, Math.min(container.width - initialBounds.x - initialBounds.width, deltaX));
-				constrainedDeltaY = Math.max(-initialBounds.y, Math.min(initialBounds.height - minSize, deltaY));
-				break;
-			case "bottom-left":
-				constrainedDeltaX = Math.max(-initialBounds.x, Math.min(initialBounds.width - minSize, deltaX));
-				constrainedDeltaY = Math.max(minSize - initialBounds.height, Math.min(container.height - initialBounds.y - initialBounds.height, deltaY));
-				break;
-			case "right":
-				constrainedDeltaX = Math.max(minSize - initialBounds.width, Math.min(container.width - initialBounds.x - initialBounds.width, deltaX));
-				break;
-			case "left":
-				constrainedDeltaX = Math.max(-initialBounds.x, Math.min(initialBounds.width - minSize, deltaX));
-				break;
-			case "bottom":
-				constrainedDeltaY = Math.max(minSize - initialBounds.height, Math.min(container.height - initialBounds.y - initialBounds.height, deltaY));
-				break;
-			case "top":
-				constrainedDeltaY = Math.max(-initialBounds.y, Math.min(initialBounds.height - minSize, deltaY));
-				break;
-		}
-		return {
-			deltaX: constrainedDeltaX,
-			deltaY: constrainedDeltaY
+	cleanup() {
+		this.isDragging = false;
+		this.isResizing = null;
+		this.dragStart = null;
+		this.dragStartPosition = {
+			x: 0,
+			y: 0
 		};
+		this.resizeStartCorner = null;
+		this.resizeStartSize = null;
+		this.resizeStartPosition = null;
+		document.removeEventListener("pointermove", this.handlePointerMove);
+		document.removeEventListener("pointerup", this.handlePointerUp);
 	}
 	dispatchBoundsChange() {
 		this.dispatchEvent(new CustomEvent("bounds-change", {
@@ -519,35 +177,35 @@ let EFResizableBox = class EFResizableBox$1 extends LitElement {
         style=${styleMap(boxStyles)}
         @pointerdown=${(e) => this.handlePointerDown(e, "move")}
       >
-        ${this.renderHandles()}
+        ${[
+			"nw",
+			"n",
+			"ne",
+			"e",
+			"se",
+			"s",
+			"sw",
+			"w"
+		].map((handle) => html`
+            <div
+              class="handle ${handle}"
+              @pointerdown=${(e) => {
+			e.stopPropagation();
+			this.handlePointerDown(e, "resize", handle);
+		}}
+            ></div>
+          `)}
         <slot></slot>
       </div>
     `;
 	}
-	renderHandles() {
-		return [
-			"top-left",
-			"top-right",
-			"bottom-left",
-			"bottom-right",
-			"top",
-			"right",
-			"bottom",
-			"left"
-		].map((handle) => html`
-        <div
-          class="handle ${handle}"
-          @pointerdown=${(e) => this.handlePointerDown(e, "resize", handle)}
-        ></div>
-      `);
-	}
 };
 __decorate([property({ type: Object })], EFResizableBox.prototype, "bounds", void 0);
 __decorate([state()], EFResizableBox.prototype, "containerWidth", void 0);
 __decorate([state()], EFResizableBox.prototype, "containerHeight", void 0);
 __decorate([property({ type: Number })], EFResizableBox.prototype, "minSize", void 0);
 __decorate([state()], EFResizableBox.prototype, "isDragging", void 0);
-__decorate([state()], EFResizableBox.prototype, "dragMode", void 0);
+__decorate([state()], EFResizableBox.prototype, "isResizing", void 0);
 EFResizableBox = __decorate([customElement("ef-resizable-box")], EFResizableBox);
 
 //#endregion