Initial element/css wire up for corner drag handle

Author: aeagle

src/components/Positioned.tsx

@@ -25,13 +25,17 @@ export const Positioned: React.FC<IPositionedProps> = ({ left, top, right, botto
 			type={Type.Positioned}
 			position={{
 				left: left,
-				leftResizable: resizeTypes.includes(ResizeType.Left),
 				top: top,
-				topResizable: resizeTypes.includes(ResizeType.Top),
 				right: right,
-				rightResizable: resizeTypes.includes(ResizeType.Right),
 				bottom: bottom,
+				leftResizable: resizeTypes.includes(ResizeType.Left),
+				topResizable: resizeTypes.includes(ResizeType.Top),
+				rightResizable: resizeTypes.includes(ResizeType.Right),
 				bottomResizable: resizeTypes.includes(ResizeType.Bottom),
+				topLeftResizable: resizeTypes.includes(ResizeType.TopLeft),
+				topRightResizable: resizeTypes.includes(ResizeType.TopRight),
+				bottomLeftResizable: resizeTypes.includes(ResizeType.BottomLeft),
+				bottomRightResizable: resizeTypes.includes(ResizeType.BottomRight),
 				width: width,
 				height: height,
 			}}>

src/core-react.ts

@@ -241,6 +241,16 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
 		});
 	}
 
+	if (space.canResizeTopLeft) {
+		mouseHandles.push({
+			id: `${space.id}-mtl`,
+			key: "top-left",
+			className: `spaces-resize-handle resize-top-left`,
+			onMouseDown: (event) => store.startMouseResize(ResizeType.Left, space, event),
+			onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, event),
+		});
+	}
+
 	return {
 		mouseHandles,
 	};

src/core-utils.ts

@@ -219,6 +219,14 @@ export function styleDefinition(space: ISpaceDefinition) {
 			}
 			cssElements.push(`#${space.id}-mb:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: 0; right: 0; }`);
 		}
+
+		if (space.canResizeTopLeft) {
+			cssElements.push(
+				`#${space.id}-mtl { left: calc(${css(space.left, true)} - ${handleOffset}px); top: ${css(space.top)}; width: ${
+					space.handleSize
+				}px; height: ${space.handleSize}px; }`,
+			);
+		}
 	} else {
 		if (space.canResizeLeft) {
 			cssElements.push(

src/core.ts

@@ -425,6 +425,10 @@ export function createStore(): ISpaceStore {
 		const canResizeRight = (position && position.leftResizable) || false;
 		const canResizeTop = (position && position.bottomResizable) || false;
 		const canResizeBottom = (position && position.topResizable) || false;
+		const canResizeTopLeft = (position && position.topLeftResizable) || false;
+		const canResizeTopRight = (position && position.topRightResizable) || false;
+		const canResizeBottomLeft = (position && position.bottomLeftResizable) || false;
+		const canResizeBottomRight = (position && position.bottomRightResizable) || false;
 
 		const newSpace: ISpaceDefinition = {
 			...spaceDefaults,
@@ -456,11 +460,15 @@ export function createStore(): ISpaceStore {
 				canResizeRight: canResizeRight,
 				canResizeTop: canResizeTop,
 				canResizeBottom: canResizeBottom,
+				canResizeTopLeft: canResizeTopLeft,
+				canResizeTopRight: canResizeTopRight,
+				canResizeBottomLeft: canResizeBottomLeft,
+				canResizeBottomRight: canResizeBottomRight,
 			},
 		} as ISpaceDefinition;
 
-		newSpace.anchoredChildren = (children, anchor, zIndex) => {
-			return children.filter((s) => s.type === Type.Anchored && s.anchor === anchor && s.zIndex === zIndex);
+		newSpace.anchoredChildren = (children, chanchor, zIndex) => {
+			return children.filter((s) => s.type === Type.Anchored && s.anchor === chanchor && s.zIndex === zIndex);
 		};
 
 		newSpace.adjustLeft = (adjusted) => {

src/styles.css

@@ -60,6 +60,20 @@
 	bottom: 0;
 }
 
+.spaces-resize-handle.resize-top-left {
+	top: 0;
+	bottom: 0;
+}
+
+.spaces-resize-handle.resize-top-left:before {
+	cursor: nw-resize;
+}
+
+.spaces-touch-handle.resize-top-left {
+	top: 0;
+	bottom: 0;
+}
+
 .spaces-resize-handle.resize-right {
 	top: 0;
 	bottom: 0;