feat: size is always positive

swaps left/right top/bottom onoverlap

packages/react-mops/src/box.tsx

@@ -18,7 +18,7 @@ import {
 	useWithHandle
 } from "./hooks";
 import {Mops} from "./types";
-import {degToRad, getBoundingBox} from "./utils";
+import {getBoundingBox} from "./utils";
 
 export const Box: React.RefForwardingComponent<
 	HTMLElement,
@@ -102,7 +102,10 @@ export const Box: React.RefForwardingComponent<
 		});
 		const withHandle = useWithHandle({
 			contentRef,
+			currentPosition,
 			currentRotation,
+			initialPosition,
+			initialSize,
 			isResizable,
 			minHeight,
 			minWidth,
@@ -112,12 +115,41 @@ export const Box: React.RefForwardingComponent<
 			setPosition,
 			setSize
 		});
+
+		// const getLimit = React.useCallback(
+		// 	(radius, angle) => {
+		// 		const {x, y} = polarToCartesian(angle + initialRotation.z);
+		// 		return {
+		// 			x: (n: number) => chooseFn(x)(initialPosition.x + x * radius, n),
+		// 			y: (n: number) => chooseFn(y)( initialPosition.y + y * radius, n)
+		// 		};
+		// 	},
+		// 	[initialPosition, initialRotation]
+		// );
+		// const diff = React.useMemo(
+		// 	() => ({
+		// 		x: (initialSize.width - minWidth) / 2,
+		// 		y: (initialSize.height - minHeight) / 2
+		// 	}),
+		// 	[initialSize, minHeight, minWidth]
+		// );
+		// const limitLeft = React.useMemo(() => getLimit(diff.x, 0), [diff, getLimit]);
+		// const limitTop = React.useMemo(() => getLimit(diff.y, 90), [diff, getLimit]);
+		// const limitRight = React.useMemo(() => getLimit(diff.x, 180), [diff, getLimit]);
+		// const limitBottom = React.useMemo(() => getLimit(diff.y, 270), [diff, getLimit]);
+		// const limitTopLeft = React.useMemo(() => {
+		// 	const distance = getHypotenuse(diff.y, diff.x);
+		// 	const angle = atan2(diff.y, diff.x);
+		// 	return getLimit(distance, angle);
+		// }, [diff, getLimit]);
+
 		const withCornerHandle = useWithCornerHandle({
 			currentRotation,
 			initialPosition,
 			initialSize,
 			withHandle
 		});
+
 		const {
 			isBottomDown,
 			isBottomLeftDown,
@@ -139,6 +171,11 @@ export const Box: React.RefForwardingComponent<
 			currentRotation,
 			initialPosition,
 			initialSize,
+			// limitBottom,
+			// limitLeft,
+			// limitRight,
+			// limitTop,
+			// limitTopLeft,
 			withCornerHandle,
 			withHandle
 		});
@@ -190,7 +227,7 @@ export const Box: React.RefForwardingComponent<
 		const boxStyle = {
 			...getBoundingBox({
 				...currentSize,
-				angle: degToRad(currentRotation.z)
+				angle: currentRotation.z
 			})
 		};
 		const contentStyle = {

packages/react-mops/src/guides/snapping.ts

@@ -94,7 +94,7 @@ export const toSiblings = (siblings: Mops.Sibling[]): Mops.SnapHandler => (
 	const withBoundingBox = siblings.map(sibling => ({
 		...sibling,
 		boundingBox: getBoundingBox({
-			angle: degToRad(sibling.rotation.z),
+			angle: sibling.rotation.z,
 			height: sibling.size.height,
 			width: sibling.size.width
 		})

packages/react-mops/src/hooks/handle-hooks.ts

@@ -13,7 +13,6 @@ import {useMouseMove} from "./mouse-event-hooks";
  * @param options.handlePosition
  * @param options.scale
  * @param options.rotation
- * @param options.contentRef
  */
 export const useHandle = ({
 	setSize,
@@ -23,8 +22,7 @@ export const useHandle = ({
 	handleSize,
 	handlePosition,
 	scale,
-	rotation,
-	contentRef
+	rotation
 }: Mops.UseHandleProps) => {
 	const [isDown, setDown] = useMouseMove(
 		(position: Mops.PositionModel, altKey: boolean, shiftKey: boolean) => {
@@ -42,7 +40,6 @@ export const useHandle = ({
 			setPosition(nextPosition);
 		},
 		scale,
-		contentRef,
 		rotation
 	);
 	return [isDown, setDown] as [boolean, (e: React.MouseEvent<HTMLElement>) => void];

packages/react-mops/src/hooks/mouse-event-hooks.ts

@@ -7,14 +7,12 @@ import {coordinatesToDeg, degToRad, getBoundingBox, to360, withRotation} from ".
  * @param {Mops.MouseHandler} onMouseUp
  * @param {Mops.MouseHandler} onMouseMove
  * @param {number} scale
- * @param {React.RefObject<HTMLElement>} [contentRef]
  * @param {Mops.RotationModel} [rotation]
  */
 export const useMouseMove = (
 	onMouseUp: Mops.MouseHandler,
 	onMouseMove: Mops.MouseHandler,
 	scale: number,
-	contentRef?: React.RefObject<HTMLElement>,
 	rotation?: Mops.RotationModel
 ) => {
 	const [isDown, setDown] = React.useState(false);
@@ -23,39 +21,38 @@ export const useMouseMove = (
 		y: 0
 	});
 
+	const getRotatedPosition = React.useCallback(
+		(event: MouseEvent): Mops.PositionModel => {
+			const newPosition = {
+				x: (event.clientX - initialPosition.x) / scale,
+				y: (event.clientY - initialPosition.y) / scale
+			};
+			return rotation ? withRotation(newPosition.x, newPosition.y, rotation.z) : newPosition;
+		},
+		[initialPosition, scale, rotation]
+	);
+
 	const handleMouseUp = React.useCallback(
 		(event: MouseEvent) => {
 			if (isDown) {
 				event.preventDefault();
-				const newPosition = {
-					x: (event.clientX - initialPosition.x) / scale,
-					y: (event.clientY - initialPosition.y) / scale
-				};
-				const rotatedPosition = rotation
-					? withRotation(newPosition.x, newPosition.y, rotation.z)
-					: newPosition;
+				const rotatedPosition = getRotatedPosition(event);
 				setDown(false);
 				onMouseUp(rotatedPosition, event.altKey, event.shiftKey, event);
 			}
 		},
-		[setDown, onMouseUp]
+		[setDown, onMouseUp, getRotatedPosition]
 	);
 
 	const handleMouseMove = React.useCallback(
 		(event: MouseEvent) => {
 			if (isDown) {
 				event.preventDefault();
-				const newPosition = {
-					x: (event.clientX - initialPosition.x) / scale,
-					y: (event.clientY - initialPosition.y) / scale
-				};
-				const rotatedPosition = rotation
-					? withRotation(newPosition.x, newPosition.y, rotation.z)
-					: newPosition;
+				const rotatedPosition = getRotatedPosition(event);
 				onMouseMove(rotatedPosition, event.altKey, event.shiftKey, event);
 			}
 		},
-		[onMouseMove]
+		[onMouseMove, getRotatedPosition]
 	);
 
 	React.useEffect(() => {
@@ -82,7 +79,7 @@ export const useMouseMove = (
 				setInitialPosition({x: event.clientX, y: event.clientY});
 			}
 		},
-		[contentRef, setInitialPosition, setDown]
+		[setInitialPosition, setDown]
 	);
 
 	return [isDown, handleDown] as [boolean, (e: React.MouseEvent<HTMLElement>) => void];
@@ -221,7 +218,7 @@ export const useHandleMouse = ({
 							rotation: currentRotation,
 							size: getBoundingBox({
 								...currentSize,
-								angle: degToRad(currentRotation.z)
+								angle: currentRotation.z
 							})
 						},
 						{

packages/react-mops/src/hooks/use-hooks.ts

@@ -79,12 +79,12 @@ export const useMeta = () => {
 	}, [handleKeyUp]);
 	return metaKey;
 };
-export const useCursorSlice = currentRotation =>
+export const useCursorSlice = rotation =>
 	React.useCallback(
 		n => {
-			return (Math.round(to360(currentRotation.z) / 45) + n) % rotationCursors.length;
+			return (Math.round(to360(rotation.z) / 45) + n) % rotationCursors.length;
 		},
-		[currentRotation]
+		[rotation]
 	);
 export const useHandler = (handler, {currentSize, currentPosition, currentRotation}) =>
 	React.useCallback(

packages/react-mops/src/hooks/with-handle-hooks.ts

@@ -8,7 +8,10 @@ export const useWithHandle = (
 		setInitialSize,
 		setPosition,
 		setSize,
+		currentPosition,
 		currentRotation,
+		initialPosition,
+		initialSize,
 		scale,
 		contentRef,
 		isResizable,
@@ -20,26 +23,17 @@ export const useWithHandle = (
 	React.useCallback(
 		({handleSize, handlePosition}) => {
 			return useHandle({
-				contentRef: contentRef as React.RefObject<HTMLElement>,
 				handlePosition: ({x, y}, altKey, shiftKey) => state => {
 					if (!isResizable) {
 						return state;
 					}
-					// const sizeState = handleSize({x, y}, altKey, shiftKey);
-					// const nextSize = typeof sizeState === "function" ? sizeState(state) : sizeState;
-					// const finalSize = {
-					// 	height: Math.max(minHeight, nextSize.height),
-					// 	width: Math.max(minWidth, nextSize.width)
-					// }
-					// const stopY = finalSize.height === minHeight;
-					// const stopX = finalSize.width === minWidth;
 					const positionState = handlePosition({x, y}, altKey, shiftKey);
-					const nextPosition =
+					const {limit, ...nextPosition} =
 						typeof positionState === "function" ? positionState(state) : positionState;
 					return nextPosition;
 					// return {
-					// 	x: stopY ? state.x : nextPosition.x,
-					// 	y: stopX ? state.y : nextPosition.y
+					// 	x: limit.x(nextPosition.x),
+					// 	y: limit.y(nextPosition.y)
 					// };
 				},
 				handleSize: ({x, y}, altKey, shiftKey) => state => {
@@ -48,10 +42,15 @@ export const useWithHandle = (
 					}
 					const sizeState = handleSize({x, y}, altKey, shiftKey);
 					const nextSize = typeof sizeState === "function" ? sizeState(state) : sizeState;
-					return {
-						height: Math.max(minHeight, nextSize.height),
-						width: Math.max(minWidth, nextSize.width)
+					const absSize = {
+						height: Math.abs(nextSize.height),
+						width: Math.abs(nextSize.width)
 					};
+					return absSize;
+					// return {
+					// 	height: Math.max(minHeight, absSize.height),
+					// 	width: Math.max(minWidth, absSize.width)
+					// };
 				},
 				rotation: currentRotation,
 				scale,
@@ -66,20 +65,25 @@ export const useWithHandle = (
 			setInitialSize,
 			setPosition,
 			setSize,
+			currentPosition,
 			currentRotation,
+			initialPosition,
+			initialSize,
 			scale,
 			contentRef,
 			isResizable,
+			minHeight,
+			minWidth,
 			...deps
 		]
 	);
 export const useWithCornerHandle = ({withHandle, currentRotation, initialPosition, initialSize}) =>
 	React.useCallback(
-		({getPositionDiff, getSizeDiff}) =>
+		({getPositionDiff, getSizeDiff, limit}) =>
 			withHandle({
 				handlePosition: ({x, y}, altKey, shiftKey) => state => {
 					if (altKey) {
-						return state;
+						return {limit, ...state};
 					}
 					const dX = getPositionDiff(x);
 					const e = withRotation(x, 0, currentRotation.z);
@@ -92,6 +96,7 @@ export const useWithCornerHandle = ({withHandle, currentRotation, initialPositio
 						currentRotation.z
 					);
 					return {
+						limit,
 						x: initialPosition.x - d.x / 2 + e.x / 2,
 						y: initialPosition.y + d.y / 2 - e.y / 2
 					};
@@ -116,13 +121,19 @@ export const useHandlesDown = ({
 	currentRotation,
 	initialPosition,
 	initialSize,
+	// limitLeft,
+	// limitRight,
+	// limitTop,
+	// limitTopLeft,
+	// limitBottom,
 	withCornerHandle,
 	withHandle
 }) => {
 	const [isTopDown, setTopDown] = withHandle({
 		handlePosition: ({x, y}, altKey) => {
 			const d = withRotation(0, y, currentRotation.z);
 			return {
+				// limit: limitTop,
 				x: initialPosition.x - (altKey ? 0 : d.x / 2),
 				y: initialPosition.y + (altKey ? 0 : d.y / 2)
 			};
@@ -139,6 +150,7 @@ export const useHandlesDown = ({
 		handlePosition: ({x, y}, altKey) => {
 			const d = withRotation(x, 0, currentRotation.z);
 			return {
+				// limit: limitRight,
 				x: initialPosition.x + (altKey ? 0 : d.x / 2),
 				y: initialPosition.y - (altKey ? 0 : d.y / 2)
 			};
@@ -155,6 +167,7 @@ export const useHandlesDown = ({
 		handlePosition: ({x, y}, altKey) => {
 			const d = withRotation(0, y, currentRotation.z);
 			return {
+				// limit: limitBottom,
 				x: initialPosition.x - (altKey ? 0 : d.x / 2),
 				y: initialPosition.y + (altKey ? 0 : d.y / 2)
 			};
@@ -171,6 +184,7 @@ export const useHandlesDown = ({
 		handlePosition: ({x, y}, altKey) => {
 			const d = withRotation(x, 0, currentRotation.z);
 			return {
+				// limit: limitLeft,
 				x: initialPosition.x + (altKey ? 0 : d.x / 2),
 				y: initialPosition.y - (altKey ? 0 : d.y / 2)
 			};
@@ -186,21 +200,34 @@ export const useHandlesDown = ({
 	const [isTopLeftDown, setTopLeftDown] = withCornerHandle({
 		getPositionDiff: x => -x,
 		getSizeDiff: ({x, y}) => ({x: -x, y: -y})
+		// limit: limitTopLeft
 	});
 
 	const [isTopRightDown, setTopRightDown] = withCornerHandle({
 		getPositionDiff: x => x,
 		getSizeDiff: ({x, y}) => ({x, y: -y})
+		// limit: {
+		// 	x: limitLeft.x,
+		// 	y: limitTop.y
+		// }
 	});
 
 	const [isBottomLeftDown, setBottomLeftDown] = withCornerHandle({
 		getPositionDiff: x => x,
 		getSizeDiff: ({x, y}) => ({x: -x, y})
+		// limit: {
+		// 	x: limitLeft.x,
+		// 	y: limitBottom.y
+		// }
 	});
 
 	const [isBottomRightDown, setBottomRightDown] = withCornerHandle({
 		getPositionDiff: x => -x,
 		getSizeDiff: ({x, y}) => ({x, y})
+		// limit: {
+		// 	x: limitRight.x,
+		// 	y: limitBottom.y
+		// }
 	});
 
 	return {