Added ability to pass custom resize handler

Author: aeagle

demo/src/ui-demo/Windows.tsx

@@ -62,7 +62,7 @@ const WindowInner: React.FC<{ onClick?: () => void }> = (props) => {
 				className="title-bar"
 				onMouseDown={(e) => {
 					props.onClick && props.onClick();
-					parentSpace.startDrag(e);
+					parentSpace.startMouseDrag(e);
 				}}
 				size={40}>
 				{Description(`Window title`)}

react-spaces/src/Globals/Dragging.ts

@@ -16,22 +16,13 @@ const onMove = (parentContext: ISpaceContext | undefined, space: ISpace, origina
 	}
 };
 
-export const startDrag = (
+export const startMouseDrag = (
 	e: React.MouseEvent<HTMLElement, MouseEvent>,
 	parentContext: ISpaceContext | undefined,
 	space: ISpace,
 	element: HTMLElement | undefined,
 ) => {
 	if (parentContext && element) {
-		// if (props.onResizeStart) {
-		// 	const result = props.onResizeStart();
-		// 	if (typeof result === "boolean" && !result) {
-		// 		return;
-		// 	}
-		// }
-
-		//parentContext.updateResizing(true);
-
 		const originalMouseX = e.pageX - space.adjustedLeft;
 		const originalMouseY = e.pageY - space.adjustedTop;
 		let lastX = 0;
@@ -54,9 +45,6 @@ export const startDrag = (
 			}
 			window.removeEventListener("mousemove", withPreventDefault);
 			window.removeEventListener("mouseup", removeListener);
-
-			//parentContext.updateResizing(false);
-			//onResizeEnd();
 		};
 		window.addEventListener("mousemove", withPreventDefault);
 		window.addEventListener("mouseup", removeListener);

react-spaces/src/Globals/ISpaceContext.ts

@@ -6,7 +6,7 @@ export interface ISpaceContext {
 	children: ISpace[];
 	updateChildren: (children: ISpace[]) => void;
 	updateResizing: (state: boolean) => void;
-	startDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+	startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 
 const recalcSpaces = (spaces: ISpace[]) => {
@@ -117,7 +117,7 @@ export const createSpaceContext = (
 		children: children,
 		updateChildren: updateChildren,
 		updateResizing: updateResizing,
-		startDrag: startDrag,
+		startMouseDrag: startDrag,
 	};
 
 	return context;

react-spaces/src/Globals/Resizing.ts

@@ -16,17 +16,33 @@ enum EndEvent {
 	Touch = "touchend",
 }
 
+interface IResizeChange {
+	x: number;
+	y: number;
+}
+
 export function startTouchResize(
 	e: React.TouchEvent<HTMLElement>,
 	parentContext: ISpaceContext | undefined,
 	space: ISpace,
 	props: AllProps,
 	element: HTMLElement | undefined,
+	customResizeHandler?: (resizeDelta: IResizeChange) => void,
 ) {
-	return startResize(e, parentContext, space, props, element, EndEvent.Touch, MoveEvent.Touch, (e) => ({
-		x: e.touches[0].pageX,
-		y: e.touches[0].pageY,
-	}));
+	return startResize(
+		e,
+		parentContext,
+		space,
+		props,
+		element,
+		EndEvent.Touch,
+		MoveEvent.Touch,
+		(e) => ({
+			x: e.touches[0].pageX,
+			y: e.touches[0].pageY,
+		}),
+		customResizeHandler,
+	);
 }
 
 export function startMouseResize(
@@ -35,11 +51,22 @@ export function startMouseResize(
 	space: ISpace,
 	props: AllProps,
 	element: HTMLElement | undefined,
+	customResizeHandler?: (resizeDelta: IResizeChange) => void,
 ) {
-	return startResize(e, parentContext, space, props, element, EndEvent.Mouse, MoveEvent.Mouse, (e) => ({
-		x: e.pageX,
-		y: e.pageY,
-	}));
+	return startResize(
+		e,
+		parentContext,
+		space,
+		props,
+		element,
+		EndEvent.Mouse,
+		MoveEvent.Mouse,
+		(e) => ({
+			x: e.pageX,
+			y: e.pageY,
+		}),
+		customResizeHandler,
+	);
 }
 
 function onResizeEnd(props: AllProps, resizeType: ResizeType, element: HTMLElement) {
@@ -59,6 +86,7 @@ function onResize(
 	y: number,
 	minimumAdjust: number,
 	maximumAdjust: number | undefined,
+	customResizeHandler?: (resizeDelta: IResizeChange) => void,
 ) {
 	const adjustmentX = Math.min(
 		Math.max(resizeType === ResizeType.Left ? originalX - x : x - originalX, minimumAdjust),
@@ -69,10 +97,14 @@ function onResize(
 		maximumAdjust === undefined ? 999999 : maximumAdjust,
 	);
 
-	const adjustment = isHorizontalSpace(props.anchor) ? adjustmentX : adjustmentY;
+	if (customResizeHandler) {
+		customResizeHandler({ x: adjustmentX, y: adjustmentY });
+	} else {
+		const adjustment = isHorizontalSpace(props.anchor) ? adjustmentX : adjustmentY;
 
-	if (adjustment !== space.adjustedSize) {
-		updateSpace(parentContext, space.id, { adjustedSize: adjustment });
+		if (adjustment !== space.adjustedSize) {
+			updateSpace(parentContext, space.id, { adjustedSize: adjustment });
+		}
 	}
 }
 
@@ -85,6 +117,7 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
 	endEvent: EndEvent,
 	moveEvent: MoveEvent,
 	getCoords: (event: T) => { x: number; y: number },
+	customResizeHandler?: (resizeDelta: IResizeChange) => void,
 ) {
 	if (element && props.resizable && props.anchor && parentContext) {
 		const resizeType: ResizeType | undefined = AnchorToResizeTypeMap[props.anchor];
@@ -112,7 +145,19 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
 		let moved = false;
 
 		const resize = (x: number, y: number) =>
-			onResize(props, parentContext, space, resizeType, originalMouseX, originalMouseY, x, y, minimumAdjust, maximumAdjust);
+			onResize(
+				props,
+				parentContext,
+				space,
+				resizeType,
+				originalMouseX,
+				originalMouseY,
+				x,
+				y,
+				minimumAdjust,
+				maximumAdjust,
+				customResizeHandler,
+			);
 
 		const withPreventDefault = (e: T) => {
 			moved = true;

react-spaces/src/Hooks/useParentSpace.ts

@@ -5,6 +5,6 @@ export const useParentSpace = () => {
 	const parentSpace = React.useContext(SpaceContext);
 
 	return {
-		startDrag: !parentSpace ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => null : parentSpace.startDrag,
+		startMouseDrag: !parentSpace ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => null : parentSpace.startMouseDrag,
 	};
 };

react-spaces/src/Hooks/useSpace.ts

@@ -4,7 +4,7 @@ import { initialState, isHorizontalSpace, isVerticalSpace, coalesce } from "src/
 import { ISpaceContext, updateSpace, removeSpace, registerSpace, createSpaceContext } from "src/Globals/ISpaceContext";
 import { SpaceLayerContext, SpaceContext } from "src/Contexts";
 import { ResizeSensor } from "css-element-queries";
-import { startDrag } from "src/Globals/Dragging";
+import { startMouseDrag } from "src/Globals/Dragging";
 
 const calcProp = (props: AllProps, positionedFn: (p: AllProps) => SizeUnit, elseFn: (p: AllProps) => SizeUnit) =>
 	props.isPositioned ? positionedFn(props) : elseFn(props);
@@ -156,7 +156,7 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
 		state.children,
 		(children) => setState({ children: children }),
 		(resizing) => setState({ resizing: resizing }),
-		(e) => startDrag(e, parentContext, space, divElementRef.current),
+		(e) => startMouseDrag(e, parentContext, space, divElementRef.current),
 		parentContext,
 	);