Added top right drag handle

Author: aeagle

src/components/Positioned.tsx

@@ -19,6 +19,8 @@ interface IPositionedProps extends IReactSpaceCommonProps {
 export const Positioned: React.FC<IPositionedProps> = ({ left, top, right, bottom, width, height, resizable, ...props }) => {
 	const resizeTypes = resizable || [];
 
+	console.log(resizeTypes);
+
 	return (
 		<Space
 			{...props}

src/components/stories/02-components/Positioned.Resizable.TopRightBottomLeft.stories.mdx

@@ -29,7 +29,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
 	<Story name="Resize handles (all sides)">
 		{() => {
 			return <ViewPort>
-				<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
+				<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right, ResizeType.TopLeft, ResizeType.TopRight, ResizeType.BottomLeft, ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
 					{description("Positioned")}
 				</Positioned>
 			</ViewPort>

src/core-react.ts

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

src/core-utils.ts

@@ -182,7 +182,6 @@ export function styleDefinition(space: ISpaceDefinition) {
 		}
 
 		if (space.canResizeRight) {
-			cssElements.push(`#${space.id}-mr:after { left: -${touchHandleSize}px; right: -${touchHandleSize}px; top: 0; bottom: 0; }`);
 			if (space.width.size) {
 				cssElements.push(
 					`#${space.id}-mr { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${
@@ -227,6 +226,22 @@ export function styleDefinition(space: ISpaceDefinition) {
 				}px; height: ${space.handleSize}px; }`,
 			);
 		}
+
+		if (space.canResizeTopRight) {
+			if (space.width.size) {
+				cssElements.push(
+					`#${space.id}-mtr { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${
+						space.handleSize
+					}px + ${handleOffset}px); width: ${space.handleSize}px; top: ${css(space.top)}; height: ${space.handleSize}px; }`,
+				);
+			} else {
+				cssElements.push(
+					`#${space.id}-mtr { right: calc(${css(space.right, true)} - ${handleOffset}px); width: ${space.handleSize}px; top: ${css(
+						space.top,
+					)}; height: ${space.handleSize}px; }`,
+				);
+			}
+		}
 	} else {
 		if (space.canResizeLeft) {
 			cssElements.push(

src/styles.css

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