137 lines
4.1 KiB
TypeScript
137 lines
4.1 KiB
TypeScript
import * as React from 'react';
|
|
import { XPositionReference } from '../../../Enums/XPositionReference';
|
|
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
|
import { DIMENSION_MARGIN } from '../../../utils/default';
|
|
import { getDepth } from '../../../utils/itertools';
|
|
import { Dimension } from './Dimension';
|
|
|
|
interface IContainerProps {
|
|
model: IContainerModel
|
|
}
|
|
|
|
/**
|
|
* Render the container
|
|
* @returns Render the container
|
|
*/
|
|
export const Container: React.FC<IContainerProps> = (props: IContainerProps) => {
|
|
const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
|
|
const xText = props.model.properties.width / 2;
|
|
const yText = props.model.properties.height / 2;
|
|
|
|
const [transformedX, transformedY] = transformPosition(
|
|
props.model.properties.x,
|
|
props.model.properties.y,
|
|
props.model.properties.width,
|
|
props.model.properties.XPositionReference
|
|
);
|
|
const transform = `translate(${transformedX}, ${transformedY})`;
|
|
|
|
// g style
|
|
const defaultStyle: React.CSSProperties = {
|
|
transitionProperty: 'all',
|
|
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
transitionDuration: '150ms'
|
|
};
|
|
|
|
// Rect style
|
|
const style = Object.assign(
|
|
JSON.parse(JSON.stringify(defaultStyle)),
|
|
props.model.properties.style
|
|
);
|
|
|
|
// Dimension props
|
|
const depth = getDepth(props.model);
|
|
const dimensionMargin = DIMENSION_MARGIN * (depth + 1);
|
|
const id = `dim-${props.model.properties.id}`;
|
|
const xStart: number = 0;
|
|
const xEnd = props.model.properties.width;
|
|
const y = -dimensionMargin;
|
|
const strokeWidth = 1;
|
|
const text = (props.model.properties.width ?? 0).toString();
|
|
|
|
let dimensionChildren: JSX.Element | null = null;
|
|
if (props.model.children.length > 0) {
|
|
const {
|
|
childrenId,
|
|
xChildrenStart,
|
|
xChildrenEnd,
|
|
yChildren,
|
|
textChildren
|
|
} = GetChildrenDimensionProps(props, dimensionMargin);
|
|
dimensionChildren = <Dimension
|
|
id={childrenId}
|
|
xStart={xChildrenStart}
|
|
xEnd={xChildrenEnd}
|
|
yStart={yChildren}
|
|
yEnd={yChildren}
|
|
strokeWidth={strokeWidth}
|
|
text={textChildren}
|
|
/>;
|
|
}
|
|
|
|
return (
|
|
<g
|
|
style={defaultStyle}
|
|
transform={transform}
|
|
key={`container-${props.model.properties.id}`}
|
|
>
|
|
<Dimension
|
|
id={id}
|
|
xStart={xStart}
|
|
xEnd={xEnd}
|
|
yStart={y}
|
|
yEnd={y}
|
|
strokeWidth={strokeWidth}
|
|
text={text}
|
|
/>
|
|
{ dimensionChildren }
|
|
<rect
|
|
width={props.model.properties.width}
|
|
height={props.model.properties.height}
|
|
style={style}
|
|
>
|
|
</rect>
|
|
<text
|
|
x={xText}
|
|
y={yText}
|
|
>
|
|
{props.model.properties.id}
|
|
</text>
|
|
{ containersElements }
|
|
</g>
|
|
);
|
|
};
|
|
|
|
function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: number):
|
|
{ childrenId: string, xChildrenStart: number, xChildrenEnd: number, yChildren: number, textChildren: string } {
|
|
const childrenId = `dim-children-${props.model.properties.id}`;
|
|
|
|
const lastChild = props.model.children[props.model.children.length - 1];
|
|
let xChildrenStart = lastChild.properties.x;
|
|
let xChildrenEnd = lastChild.properties.x + lastChild.properties.width;
|
|
for (let i = props.model.children.length - 2; i >= 0; i--) {
|
|
const child = props.model.children[i];
|
|
const left = child.properties.x;
|
|
if (left < xChildrenStart) {
|
|
xChildrenStart = left;
|
|
}
|
|
const right = child.properties.x + child.properties.width;
|
|
if (right > xChildrenEnd) {
|
|
xChildrenEnd = right;
|
|
}
|
|
}
|
|
|
|
const yChildren = props.model.properties.height + dimensionMargin;
|
|
const textChildren = (xChildrenEnd - xChildrenStart).toString();
|
|
return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren };
|
|
}
|
|
|
|
export function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
|
|
let transformedX = x;
|
|
if (xPositionReference === XPositionReference.Center) {
|
|
transformedX -= width / 2;
|
|
} else if (xPositionReference === XPositionReference.Right) {
|
|
transformedX -= width;
|
|
}
|
|
return [transformedX, y];
|
|
}
|