58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import { ContainerModel } from '../../../Interfaces/IContainerModel';
|
|
import { DIMENSION_MARGIN } from '../../../utils/default';
|
|
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
|
import { Dimension } from './Dimension';
|
|
|
|
interface IDimensionLayerProps {
|
|
roots: ContainerModel | ContainerModel[] | null
|
|
}
|
|
|
|
function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
|
|
const it = MakeBFSIterator(root);
|
|
const dimensions: React.ReactNode[] = [];
|
|
for (const { container, depth } of it) {
|
|
const width = container.properties.width;
|
|
const id = `dim-${container.properties.id}`;
|
|
const xStart = GetAbsolutePosition(container)[0];
|
|
const xEnd = xStart + width;
|
|
const y = (container.properties.y + container.properties.height) + (DIMENSION_MARGIN * (depth + 1));
|
|
const strokeWidth = 1;
|
|
const text = width
|
|
.toFixed(0)
|
|
.toString();
|
|
dimensions.push(
|
|
<Dimension
|
|
key={id}
|
|
id={id}
|
|
xStart={xStart}
|
|
yStart={y}
|
|
xEnd={xEnd}
|
|
yEnd={y}
|
|
strokeWidth={strokeWidth}
|
|
text={text} />
|
|
);
|
|
}
|
|
return dimensions;
|
|
}
|
|
|
|
/**
|
|
* A layer containing all dimension
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
|
let dimensions: React.ReactNode[] = [];
|
|
if (Array.isArray(props.roots)) {
|
|
props.roots.forEach(child => {
|
|
dimensions.concat(GetDimensionsNodes(child));
|
|
});
|
|
} else if (props.roots !== null) {
|
|
dimensions = GetDimensionsNodes(props.roots);
|
|
}
|
|
return (
|
|
<g>
|
|
{dimensions}
|
|
</g>
|
|
);
|
|
}
|