Fixes

Author: aeagle

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-spaces",
-	"version": "0.2.0-beta.7",
+	"version": "0.2.0-beta.9",
 	"main": "dist/index.js",
 	"module": "dist/es/index.js",
 	"types": "dist/index.d.ts",

package.json

@@ -1,4 +1,4 @@
-import { ICommonProps, SizeUnit, Type, AnchorType } from "../core-types";
+import { ICommonProps, SizeUnit, Type, AnchorType, ResizeHandlePlacement } from "../core-types";
 import * as React from "react";
 import { Space } from "./Space";
 import * as PropTypes from "prop-types";
@@ -9,7 +9,7 @@ interface IAnchorProps extends ICommonProps {
 	order?: number;
 	resizable?: boolean;
 	handleSize?: number;
-	overlayHandle?: boolean;
+	handlePlacement?: ResizeHandlePlacement;
 	minimumSize?: number;
 	maximumSize?: number;
 	onResizeStart?: () => void | boolean;
@@ -23,7 +23,7 @@ export const anchoredProps = {
 		order: PropTypes.number,
 		resizable: PropTypes.bool,
 		handleSize: PropTypes.number,
-		overlayHandle: PropTypes.bool,
+		handlePlacement: PropTypes.oneOf([ResizeHandlePlacement.Inside, ResizeHandlePlacement.OverlayBoundary, ResizeHandlePlacement.OverlayInside]),
 		minimumSize: PropTypes.number,
 		maximumSize: PropTypes.number,
 		onResizeStart: PropTypes.func,
@@ -37,7 +37,7 @@ export const resizableProps = {
 		size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 		order: PropTypes.number,
 		handleSize: PropTypes.number,
-		overlayHandle: PropTypes.bool,
+		handlePlacement: PropTypes.oneOf([ResizeHandlePlacement.Inside, ResizeHandlePlacement.OverlayBoundary, ResizeHandlePlacement.OverlayInside]),
 		minimumSize: PropTypes.number,
 		maximumSize: PropTypes.number,
 		onResizeStart: PropTypes.func,

src/components/Anchored.tsx

@@ -382,8 +382,13 @@ export function createStore(): ISpaceStore {
 			},
 		} as ISpaceDefinition;
 
-		newSpace.anchoredChildren = (anchor, zIndex) =>
-			newSpace.children.filter((s) => s.type === Type.Anchored && s.anchor === anchor && s.zIndex === zIndex);
+		newSpace.anchoredChildren = (anchor, zIndex) => {
+			const children = newSpace.children.filter((s) => s.type === Type.Anchored && s.anchor === anchor && s.zIndex === zIndex);
+			const orderedChildren = children.filter(c => c.order !== undefined);
+			const unorderedChildren = children.filter(c => c.order === undefined);
+			var maxOrder = orderedChildren.length > 0 ? orderedChildren.map(a => a.order).reduce((a, b) => Math.max(a, b)) : 0;
+			return [...orderedChildren, ...unorderedChildren.map((c, idx) => ({...c, ...{ order: maxOrder + idx + 1 }}))];
+		}
 
 		newSpace.adjustLeft = (adjusted) => {
 			if (adjustmentsEqual(newSpace.left.adjusted, adjusted)) {

src/core.ts

@@ -34,7 +34,7 @@
 }
 
 .spaces-resize-handle:before {
-	content: '';
+	content: "";
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -44,11 +44,8 @@
 }
 
 .spaces-resize-handle:after {
-	cursor: default;
-	content: '';
+	content: "";
 	position: absolute;
-	background-color: blue;
-	opacity: 0.2;
 	z-index: 1;
 }