import type {Rect} from './geometry';
import type {View} from './View';
export type LayoutInfo = {view: View, frame: Rect};
export type Layout = LayoutInfo[];
export type Layouter = (
existingLayout: Layout,
containingFrame: Rect,
) => Layout;
function viewToLayoutInfo(view: View): LayoutInfo {
return {view, frame: view.frame};
}
export function viewsToLayout(views: View[]): Layout {
return views.map(viewToLayoutInfo);
}
export function collapseLayoutIntoViews(layout: Layout) {
layout.forEach(({view, frame}) => view.setFrame(frame));
}
export const noopLayout: Layouter = layout => layout;
export const layeredLayout: Layouter = (layout, containerFrame) => {
return layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame}));
};
export const verticallyStackedLayout: Layouter = (layout, containerFrame) => {
let currentY = containerFrame.origin.y;
return layout.map(layoutInfo => {
const desiredSize = layoutInfo.view.desiredSize();
const height = desiredSize
? desiredSize.height
: containerFrame.origin.y + containerFrame.size.height - currentY;
const proposedFrame = {
origin: {x: containerFrame.origin.x, y: currentY},
size: {width: containerFrame.size.width, height},
};
currentY += height;
return {
...layoutInfo,
frame: proposedFrame,
};
});
};
export const alignToContainerXLayout: Layouter = (layout, containerFrame) => {
return layout.map(layoutInfo => ({
...layoutInfo,
frame: {
origin: {
x: containerFrame.origin.x,
y: layoutInfo.frame.origin.y,
},
size: layoutInfo.frame.size,
},
}));
};
export const alignToContainerYLayout: Layouter = (layout, containerFrame) => {
return layout.map(layoutInfo => ({
...layoutInfo,
frame: {
origin: {
x: layoutInfo.frame.origin.x,
y: containerFrame.origin.y,
},
size: layoutInfo.frame.size,
},
}));
};
export const containerWidthLayout: Layouter = (layout, containerFrame) => {
return layout.map(layoutInfo => ({
...layoutInfo,
frame: {
origin: layoutInfo.frame.origin,
size: {
width: containerFrame.size.width,
height: layoutInfo.frame.size.height,
},
},
}));
};
export const containerHeightLayout: Layouter = (layout, containerFrame) => {
return layout.map(layoutInfo => ({
...layoutInfo,
frame: {
origin: layoutInfo.frame.origin,
size: {
width: layoutInfo.frame.size.width,
height: containerFrame.size.height,
},
},
}));
};
export const desiredHeightLayout: Layouter = layout => {
return layout.map(layoutInfo => {
const desiredSize = layoutInfo.view.desiredSize();
const height = desiredSize ? desiredSize.height : 0;
return {
...layoutInfo,
frame: {
origin: layoutInfo.frame.origin,
size: {
width: layoutInfo.frame.size.width,
height,
},
},
};
});
};
export const uniformMaxSubviewHeightLayout: Layouter = layout => {
const maxHeight = Math.max(
...layout.map(layoutInfo => layoutInfo.frame.size.height),
);
return layout.map(layoutInfo => ({
...layoutInfo,
frame: {
origin: layoutInfo.frame.origin,
size: {
width: layoutInfo.frame.size.width,
height: maxHeight,
},
},
}));
};
export const atLeastContainerHeightLayout: Layouter = (
layout,
containerFrame,
) => {
return layout.map(layoutInfo => ({
...layoutInfo,
frame: {
origin: layoutInfo.frame.origin,
size: {
width: layoutInfo.frame.size.width,
height: Math.max(
containerFrame.size.height,
layoutInfo.frame.size.height,
),
},
},
}));
};
export function createComposedLayout(...layouters: Layouter[]): Layouter {
if (layouters.length === 0) {
return noopLayout;
}
const composedLayout: Layouter = (layout, containerFrame) => {
return layouters.reduce(
(intermediateLayout, layouter) =>
layouter(intermediateLayout, containerFrame),
layout,
);
};
return composedLayout;
}