57 lines
1.6 KiB
TypeScript
57 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 { transformX } from './Container';
|
|
import { Dimension } from './Dimension';
|
|
|
|
interface IDimensionLayerProps {
|
|
roots: ContainerModel | ContainerModel[] | null
|
|
}
|
|
|
|
const 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.toString();
|
|
dimensions.push(
|
|
<Dimension
|
|
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 const DimensionLayer: React.FC<IDimensionLayerProps> = (props: IDimensionLayerProps) => {
|
|
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>
|
|
);
|
|
};
|