Implemented default ordering for anchored spaces

Author: aeagle

debug.log

@@ -0,0 +1 @@
+[1212/224221.239:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

src/components/stories/02-components/Experimental.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { StateDriven, AnchoredDefaultOrdering } from "../Utils";
+
+<Meta title="Testing/State" />
+
+<Preview>
+	<Story name="Spaces using global store with state driven sizing and switched spaces">
+		<StateDriven />
+	</Story>
+</Preview>
+
+<Preview>
+	<Story name="Anchored spaces with default ordering">
+		<AnchoredDefaultOrdering />
+	</Story>
+</Preview>

src/components/stories/02-components/Testing.stories.mdx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { CSSProperties } from "react";
-import { shortuuid } from "../../core-utils";
 import {
 	Info,
 	Fixed,
 	ViewPort,
 	Top,
 	Fill,
+	Left,
 	LeftResizable,
 	Right,
 	BottomResizable,
@@ -204,7 +204,7 @@ export const DemoUI = () => {
 	);
 };
 
-export const DemoExperimental: React.FC = () => {
+export const StateDriven: React.FC = () => {
 	const [visible, setVisible] = React.useState(true);
 	const [size, setSize] = React.useState(true);
 	const [side, setSide] = React.useState(true);
@@ -277,6 +277,15 @@ export const DemoExperimental: React.FC = () => {
 	);
 };
 
+export const AnchoredDefaultOrdering = () => {
+	return <ViewPort as="main">
+		<Left size="25%" style={blue} centerContent={CenterType.HorizontalVertical}>Left 1</Left>
+		<Left size="25%" style={green} centerContent={CenterType.HorizontalVertical}>Left 2</Left>
+		<Left size="25%" style={red} centerContent={CenterType.HorizontalVertical}>Left 3</Left>
+		<Fill style={blue} centerContent={CenterType.HorizontalVertical}>Fill</Fill>
+	</ViewPort>
+}
+
 const white = { backgroundColor: "#ffffff", padding: 15 };
 export const blue: CSSProperties = { backgroundColor: "rgb(224, 238, 238, 0.7)" };
 export const red: CSSProperties = { backgroundColor: "rgb(238, 224, 224, 0.7)" };

src/components/stories/Utils.tsx

@@ -35,7 +35,7 @@ export enum ResizeType {
 export enum ResizeHandlePlacement {
 	OverlayInside = "overlay-inside",
 	Inside = "inside",
-	OverlayBoundary = "overlay-boundary"
+	OverlayBoundary = "overlay-boundary",
 }
 
 export enum CenterType {
@@ -123,7 +123,7 @@ export interface ISpaceDefinition {
 	adjustTop: (adjusted: SizeUnit[]) => boolean;
 	adjustBottom: (adjusted: SizeUnit[]) => boolean;
 	adjustEdge: (adjusted: SizeUnit[]) => boolean;
-	anchoredChildren: (anchor: AnchorType, zIndex: number) => ISpaceDefinition[];
+	anchoredChildren: (children: ISpaceDefinition[], anchor: AnchorType, zIndex: number) => ISpaceDefinition[];
 	onResizeStart?: (() => void | boolean) | undefined;
 	onResizeEnd?: ((newSize: SizeUnit, domRect: DOMRect) => void) | undefined;
 	element: HTMLElement;
@@ -132,7 +132,7 @@ export interface ISpaceDefinition {
 	anchor?: AnchorType;
 	orientation: Orientation;
 	scrollable: boolean;
-	order: number;
+	order?: number;
 	position: "fixed" | "absolute" | "relative";
 	children: ISpaceDefinition[];
 	parentId: string | undefined;

src/core-types.ts

@@ -4,7 +4,6 @@ import { updateStyleDefinition, removeStyleDefinition, coalesce, adjustmentsEqua
 
 const spaceDefaults: Partial<ISpaceDefinition> = {
 	id: "",
-	order: 0,
 	zIndex: 0,
 	scrollable: false,
 	resizing: false,
@@ -21,6 +20,8 @@ const spaceDefaults: Partial<ISpaceDefinition> = {
 	anchoredChildren: () => [],
 };
 
+const anchorTypes = [AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom];
+
 function getPosition(type: Type) {
 	if (type === Type.ViewPort) {
 		return "fixed";
@@ -74,14 +75,37 @@ export function createStore(): ISpaceStore {
 	const getSpaces = () => spaces;
 
 	const recalcSpaces = (parent: ISpaceDefinition) => {
-		for (var i = 0, len = parent.children.length; i < len; i++) {
-			const space = parent.children[i];
+		const onlyUnique = (value: number, index: number, self: number[]) => {
+			return self.indexOf(value) === index;
+		};
+
+		const addDefaultOrders = (spaces: ISpaceDefinition[]) => {
+			let result: ISpaceDefinition[] = [];
+
+			anchorTypes.forEach((t) => {
+				const anchoredSpaces = spaces.filter((s) => s.anchor !== undefined && s.anchor === t);
+				const zIndices = anchoredSpaces.map((s) => s.zIndex).filter(onlyUnique);
+				zIndices.forEach((i) => {
+					const anchoredSpacesInLayer = anchoredSpaces.filter((s) => s.zIndex === i);
+					const orderedSpaces = anchoredSpacesInLayer.filter((c) => c.order !== undefined);
+					const unorderedSpaces = anchoredSpacesInLayer.filter((c) => c.order === undefined);
+					var maxOrder = orderedSpaces.length > 0 ? orderedSpaces.map((a) => a.order!).reduce((a, b) => Math.max(a, b)) : 0;
+					result = [...result, ...[...orderedSpaces, ...unorderedSpaces.map((c, idx) => ({ ...c, ...{ order: maxOrder + idx + 1 } }))]];
+				});
+			});
+
+			return [...result, ...spaces.filter((s) => s.anchor === undefined)];
+		};
+
+		const orderedSpaces = addDefaultOrders(parent.children);
+		for (var i = 0, len = orderedSpaces.length; i < len; i++) {
+			const space = orderedSpaces[i];
 			let changed = false;
 
 			if (space.type === Type.Fill) {
 				anchorUpdates(space).forEach((info) => {
 					const adjusted: SizeUnit[] = [];
-					const anchoredSpaces = parent.anchoredChildren(info.anchor, space.zIndex);
+					const anchoredSpaces = parent.anchoredChildren(orderedSpaces, info.anchor, space.zIndex);
 
 					anchoredSpaces.forEach((as) => {
 						if (as.orientation === Orientation.Vertical) {
@@ -108,8 +132,8 @@ export function createStore(): ISpaceStore {
 			} else if (space.type === Type.Anchored) {
 				const adjusted: SizeUnit[] = [];
 				const anchoredSpaces = parent
-					.anchoredChildren(space.anchor!, space.zIndex)
-					.filter((s) => s.id !== space.id && s.order <= space.order);
+					.anchoredChildren(orderedSpaces, space.anchor!, space.zIndex)
+					.filter((s) => s.id !== space.id && s.order! <= space.order!);
 
 				anchoredSpaces.forEach((as) => {
 					if (as.orientation === Orientation.Vertical) {
@@ -191,7 +215,7 @@ export function createStore(): ISpaceStore {
 				maximumSize,
 				handleSize,
 				touchHandleSize,
-				handlePlacement
+				handlePlacement,
 			} = props;
 			const canResizeLeft = (position && position.rightResizable) || false;
 			const canResizeRight = (position && position.leftResizable) || false;
@@ -382,13 +406,9 @@ export function createStore(): ISpaceStore {
 			},
 		} as ISpaceDefinition;
 
-		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.anchoredChildren = (children, anchor, zIndex) => {
+			return children.filter((s) => s.type === Type.Anchored && s.anchor === anchor && s.zIndex === zIndex);
+		};
 
 		newSpace.adjustLeft = (adjusted) => {
 			if (adjustmentsEqual(newSpace.left.adjusted, adjusted)) {