100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
|
import { DIMENSION_MARGIN } from '../../../utils/default';
|
|
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
|
import { TransformX } from '../../../utils/svg';
|
|
import { Dimension } from './Dimension';
|
|
|
|
interface IDimensionLayerProps {
|
|
containers: Map<string, IContainerModel>
|
|
roots: IContainerModel | IContainerModel[] | null
|
|
scale?: number
|
|
}
|
|
|
|
function GetDimensionsNodes(
|
|
containers: Map<string, IContainerModel>,
|
|
root: IContainerModel,
|
|
scale: number
|
|
): React.ReactNode[] {
|
|
const it = MakeBFSIterator(root, containers);
|
|
const dimensions: React.ReactNode[] = [];
|
|
let currentDepth = 0;
|
|
let min = Infinity;
|
|
let max = -Infinity;
|
|
let lastY = 0;
|
|
for (const { container, depth } of it) {
|
|
if (currentDepth !== depth) {
|
|
AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
|
|
|
|
currentDepth = depth;
|
|
min = Infinity;
|
|
max = -Infinity;
|
|
}
|
|
|
|
const absoluteX = GetAbsolutePosition(containers, container)[0];
|
|
const x = TransformX(absoluteX, container.properties.width, container.properties.positionReference);
|
|
lastY = container.properties.y + container.properties.height;
|
|
if (x < min) {
|
|
min = x;
|
|
}
|
|
|
|
if (x > max) {
|
|
max = x;
|
|
}
|
|
}
|
|
|
|
AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
|
|
|
|
return dimensions;
|
|
}
|
|
|
|
/**
|
|
* A layer containing all dimension
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
|
let dimensions: React.ReactNode[] = [];
|
|
const scale = props.scale ?? 1;
|
|
if (Array.isArray(props.roots)) {
|
|
props.roots.forEach(child => {
|
|
dimensions.concat(GetDimensionsNodes(props.containers, child, scale));
|
|
});
|
|
} else if (props.roots !== null) {
|
|
dimensions = GetDimensionsNodes(props.containers, props.roots, scale);
|
|
}
|
|
return (
|
|
<g>
|
|
{dimensions}
|
|
</g>
|
|
);
|
|
}
|
|
|
|
function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, color: string, dimensions: React.ReactNode[]): void {
|
|
const id = `dim-depth-${currentDepth}`;
|
|
const xStart = min;
|
|
const xEnd = max;
|
|
const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)) / scale;
|
|
const width = xEnd - xStart;
|
|
const text = width
|
|
.toFixed(0)
|
|
.toString();
|
|
|
|
if (width === 0) {
|
|
return;
|
|
}
|
|
|
|
dimensions.push(
|
|
<Dimension
|
|
key={id}
|
|
id={id}
|
|
xStart={xStart}
|
|
yStart={y}
|
|
xEnd={xEnd}
|
|
yEnd={y}
|
|
text={text}
|
|
scale={scale}
|
|
color={color}
|
|
/>
|
|
);
|
|
}
|