Implemented handle placement property to replace overlayHandle property to allow 3 different placements of the resize handle and re added inner space element

Author: aeagle

src/components/Space.tsx

@@ -1,4 +1,4 @@
-import { ISpaceProps, CenterType } from "../core-types";
+import { ISpaceProps, CenterType, ResizeHandlePlacement, AnchorType } from "../core-types";
 import { useSpace, ParentContext, LayerContext, DOMRectContext } from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
@@ -64,9 +64,25 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
 
 	const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
 
-	const outerClasses = [...["spaces-space", space.children.find((s) => s.resizing) ? "spaces-resizing" : undefined], ...userClasses].filter(
-		(c) => c,
-	);
+	const outerClasses = [
+		...["spaces-space", space.children.find((s) => s.resizing) ? "spaces-resizing" : undefined],
+		...userClasses.map((c) => `${c}-container`),
+	].filter((c) => c);
+
+	const innerClasses = [...["spaces-space-inner"], ...userClasses];
+
+	let innerStyle = style;
+	if (space.handlePlacement === ResizeHandlePlacement.Inside) {
+		innerStyle = {
+			...style,
+			...{
+				left: space.anchor === AnchorType.Right ? space.handleSize : undefined,
+				right: space.anchor === AnchorType.Left ? space.handleSize : undefined,
+				top: space.anchor === AnchorType.Bottom ? space.handleSize : undefined,
+				bottom: space.anchor === AnchorType.Top ? space.handleSize : undefined,
+			},
+		};
+	}
 
 	const centeredContent = applyCentering(children, props.centerContent);
 
@@ -85,17 +101,16 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
 						id: space.id,
 						ref: elementRef,
 						className: outerClasses.join(" "),
-						style: style,
 					},
 					...events,
 				},
-				<>
+				<div className={innerClasses.join(" ")} style={innerStyle}>
 					<ParentContext.Provider value={space.id}>
 						<LayerContext.Provider value={undefined}>
 							<DOMRectContext.Provider value={domRect}>{centeredContent}</DOMRectContext.Provider>
 						</LayerContext.Provider>
 					</ParentContext.Provider>
-				</>,
+				</div>,
 			)}
 		</>
 	);

src/components/stories/Utils.tsx

@@ -88,7 +88,7 @@ export const StandardProps = () => (
 		/>
 		<Prop
 			name="centerContent"
-			type="CenterType.Vertical or CenterType.HorizontalVertical or 'vertical' or 'horizontalVertical'"
+			type="CenterType.Vertical ('vertical'), CenterType.HorizontalVertical ('horizontalVertical')"
 			description="Apply centering to children."
 		/>
 		<Prop name="className" type="string" description="A class name to apply to the space element." />
@@ -141,10 +141,10 @@ export const ResizableProps = () => (
 		<PropsHeader>Resizable properties</PropsHeader>
 		<Prop name="handleSize" type="number" default="5" description="Size of the resize handle in pixels." />
 		<Prop
-			name="overlayHandle"
-			type="boolean"
-			default="true"
-			description="Determines method of placement of the resize handle. By default the handle is placed over the space. When set to false, the space resize handle sits next to the space reducing the size of the space."
+			name="handlePlacement"
+			type="ResizeHandlePlacement.OverlayInside ('overlay-inside'), ResizeHandlePlacement.Inside ('inside'), ResizeHandlePlacement.OverlayBoundary ('overlay-boundary')"
+			default="overlay-inside"
+			description="Determines method of placement of the resize handle. By default the handle is placed overlays content inside the space ('overlay'). Other options are to take up space within the space ('inside') or to be overlayed in the middle of the boundary of the space and neighbouring spaces ('overlay-boundary')"
 		/>
 		<Prop name="minimumSize" type="number" description="Constrains resizing of the space to a minimum size." />
 		<Prop name="maximumSize" type="number" description="Constrains resizing of the space to a maximum size." />

src/core-react.ts

@@ -131,7 +131,6 @@ export function useSpace(props: ISpaceProps) {
 interface IResizeHandleProps {
 	id?: string;
 	key: string | number;
-	style: CSSProperties;
 	className?: string;
 	onMouseDown: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 	onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
@@ -140,22 +139,18 @@ interface IResizeHandleProps {
 export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinition, position: IPositionalProps | undefined) {
 	const mouseHandles: IResizeHandleProps[] = [];
 	const touchHandles: IResizeHandleProps[] = [];
-	const handleSize = space.handleSize;
-	const touchHandleSize = space.touchHandleSize;
 
 	if (position && position.rightResizable) {
 		mouseHandles.push({
 			id: `${space.id}-m`,
 			key: "right",
-			style: { width: handleSize },
 			className: `spaces-resize-handle resize-right`,
 			onMouseDown: (event) => store.startMouseResize(ResizeType.Right, space, space.width, event),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, space.width, event),
 		});
 		touchHandles.push({
 			id: `${space.id}-t`,
 			key: "right",
-			style: { width: touchHandleSize },
 			className: `spaces-touch-handle resize-right`,
 			onMouseDown: (event) => event.preventDefault(),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, space.width, event),
@@ -166,15 +161,13 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
 		mouseHandles.push({
 			id: `${space.id}-m`,
 			key: "left",
-			style: { width: handleSize },
 			className: `spaces-resize-handle resize-left`,
 			onMouseDown: (event) => store.startMouseResize(ResizeType.Left, space, space.width, event),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, space.width, event),
 		});
 		touchHandles.push({
 			id: `${space.id}-t`,
 			key: "left",
-			style: { width: touchHandleSize },
 			className: `spaces-touch-handle resize-left`,
 			onMouseDown: (event) => event.preventDefault(),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, space.width, event),
@@ -185,15 +178,13 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
 		mouseHandles.push({
 			id: `${space.id}-m`,
 			key: "top",
-			style: { height: handleSize },
 			className: `spaces-resize-handle resize-top`,
 			onMouseDown: (event) => store.startMouseResize(ResizeType.Top, space, space.height, event),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, space.height, event),
 		});
 		touchHandles.push({
 			id: `${space.id}-t`,
 			key: "top",
-			style: { height: touchHandleSize },
 			className: `spaces-touch-handle resize-top`,
 			onMouseDown: (event) => event.preventDefault(),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, space.height, event),
@@ -205,14 +196,12 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
 			id: `${space.id}-m`,
 			key: "bottom",
 			className: `spaces-resize-handle resize-bottom`,
-			style: { height: handleSize },
 			onMouseDown: (event) => store.startMouseResize(ResizeType.Bottom, space, space.height, event),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, space.height, event),
 		});
 		touchHandles.push({
 			id: `${space.id}-t`,
 			key: "bottom",
-			style: { height: touchHandleSize },
 			className: `spaces-touch-handle resize-bottom`,
 			onMouseDown: (event) => event.preventDefault(),
 			onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, space.height, event),

src/core-types.ts

@@ -32,6 +32,12 @@ export enum ResizeType {
 	SE = "resize-se",
 }
 
+export enum ResizeHandlePlacement {
+	OverlayInside = "overlay-inside",
+	Inside = "inside",
+	OverlayBoundary = "overlay-boundary"
+}
+
 export enum CenterType {
 	None = "none",
 	Vertical = "vertical",
@@ -66,8 +72,8 @@ export interface ISpaceProps extends ICommonProps {
 	anchor?: AnchorType | undefined;
 	order?: number | undefined;
 	position?: IPositionalProps | undefined;
-	overlayHandle?: boolean | undefined;
 	handleSize?: number | undefined;
+	handlePlacement?: ResizeHandlePlacement;
 	touchHandleSize?: number | undefined;
 	minimumSize?: number | undefined;
 	maximumSize?: number | undefined;
@@ -145,7 +151,7 @@ export interface ISpaceDefinition {
 	maximumSize?: number;
 	handleSize: number;
 	touchHandleSize: number;
-	overlayHandle: boolean;
+	handlePlacement: ResizeHandlePlacement;
 	canResizeTop: boolean;
 	canResizeLeft: boolean;
 	canResizeRight: boolean;

src/core-utils.ts

@@ -1,4 +1,4 @@
-import { ISpaceDefinition, SizeUnit, ISize } from "./core-types";
+import { ISpaceDefinition, SizeUnit, ISize, ResizeHandlePlacement } from "./core-types";
 
 export function shortuuid() {
 	let firstPart = (Math.random() * 46656) | 0;
@@ -124,27 +124,40 @@ export function styleDefinition(space: ISpaceDefinition) {
 		cssElements.push(`#${space.id} { ${cssString.join(" ")} }`);
 	}
 
-	const handleSize = space.handleSize / 2;
-	const touchHandleSize = space.touchHandleSize / 2;
+	let handleOffset = 0;
+	let touchHandleOffset = 0;
+
+	switch (space.handlePlacement)
+	{
+		case ResizeHandlePlacement.Inside:
+		case ResizeHandlePlacement.OverlayInside:
+			handleOffset = space.handleSize;
+			touchHandleOffset = space.touchHandleSize;
+			break;
+		case ResizeHandlePlacement.OverlayBoundary:
+			handleOffset = space.handleSize / 2;
+			touchHandleOffset = space.touchHandleSize / 2;
+			break;
+	}
 
 	if (space.canResizeLeft) {
-		cssElements.push(`#${space.id}-t { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${touchHandleSize}px); }`);
-		cssElements.push(`#${space.id}-m { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize}px); }`);
+		cssElements.push(`#${space.id}-t { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${touchHandleOffset}px); width: ${space.touchHandleSize}px; }`);
+		cssElements.push(`#${space.id}-m { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleOffset}px); width: ${space.handleSize}px; }`);
 	}
 
 	if (space.canResizeTop) {
-		cssElements.push(`#${space.id}-t { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${touchHandleSize}px); }`);
-		cssElements.push(`#${space.id}-m { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize}px); }`);
+		cssElements.push(`#${space.id}-t { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${touchHandleOffset}px); height: ${space.touchHandleSize}px; }`);
+		cssElements.push(`#${space.id}-m { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleOffset}px); height: ${space.handleSize}px; }`);
 	}
 
 	if (space.canResizeRight) {
-		cssElements.push(`#${space.id}-t { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${touchHandleSize}px); }`);
-		cssElements.push(`#${space.id}-m { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${handleSize}px); }`);
+		cssElements.push(`#${space.id}-t { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${touchHandleOffset}px); width: ${space.touchHandleSize}px; }`);
+		cssElements.push(`#${space.id}-m { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${handleOffset}px); width: ${space.handleSize}px; }`);
 	}
 
 	if (space.canResizeBottom) {
-		cssElements.push(`#${space.id}-t { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${touchHandleSize}px); }`);
-		cssElements.push(`#${space.id}-m { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${handleSize}px); }`);
+		cssElements.push(`#${space.id}-t { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${touchHandleOffset}px); height: ${space.touchHandleSize}px; }`);
+		cssElements.push(`#${space.id}-m { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${handleOffset}px); height: ${space.handleSize}px; }`);
 	}
 
 	return cssElements.join(" ");

src/core.ts

@@ -1,4 +1,4 @@
-import { ISpaceDefinition, SizeUnit, AnchorType, Type, Orientation, ISpaceStore, ISpaceProps, CenterType } from "./core-types";
+import { ISpaceDefinition, SizeUnit, AnchorType, Type, Orientation, ISpaceStore, ISpaceProps, CenterType, ResizeHandlePlacement } from "./core-types";
 import { EndEvent, MoveEvent, createResize } from "./core-resizing";
 import { updateStyleDefinition, removeStyleDefinition, coalesce, adjustmentsEqual } from "./core-utils";
 
@@ -12,7 +12,7 @@ const spaceDefaults: Partial<ISpaceDefinition> = {
 	dimension: { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => "" },
 	handleSize: 5,
 	touchHandleSize: 30,
-	overlayHandle: true,
+	handlePlacement: ResizeHandlePlacement.OverlayInside,
 	adjustLeft: () => false,
 	adjustRight: () => false,
 	adjustTop: () => false,
@@ -191,7 +191,7 @@ export function createStore(): ISpaceStore {
 				maximumSize,
 				handleSize,
 				touchHandleSize,
-				overlayHandle,
+				handlePlacement
 			} = props;
 			const canResizeLeft = (position && position.rightResizable) || false;
 			const canResizeRight = (position && position.leftResizable) || false;
@@ -300,8 +300,8 @@ export function createStore(): ISpaceStore {
 				changed = true;
 			}
 
-			if (space.overlayHandle !== overlayHandle) {
-				space.overlayHandle = overlayHandle || spaceDefaults.overlayHandle!;
+			if (space.handlePlacement !== handlePlacement) {
+				space.handlePlacement = handlePlacement || spaceDefaults.handlePlacement!;
 				changed = true;
 			}