77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import * as React from 'react';
|
|
import { getDepth, IContainerModel } from './ContainerModel';
|
|
import { Dimension } from './Dimension';
|
|
|
|
export interface IContainerProps {
|
|
model: IContainerModel
|
|
}
|
|
|
|
const GAP = 50;
|
|
|
|
export class Container extends React.Component<IContainerProps> {
|
|
/**
|
|
* Render the container
|
|
* @returns Render the container
|
|
*/
|
|
public render(): React.ReactNode {
|
|
const containersElements = this.props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
|
|
const xText = Number(this.props.model.properties.width) / 2;
|
|
const yText = Number(this.props.model.properties.height) / 2;
|
|
const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`;
|
|
|
|
// g style
|
|
const defaultStyle = {
|
|
transitionProperty: 'all',
|
|
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
transitionDuration: '150ms'
|
|
} as React.CSSProperties;
|
|
|
|
// Rect style
|
|
const style = Object.assign(
|
|
JSON.parse(JSON.stringify(defaultStyle)),
|
|
this.props.model.properties
|
|
);
|
|
style.x = 0;
|
|
style.y = 0;
|
|
delete style.height;
|
|
delete style.width;
|
|
|
|
// Dimension props
|
|
const id = `dim-${this.props.model.properties.id}`;
|
|
const xStart: number = 0;
|
|
const xEnd = Number(this.props.model.properties.width);
|
|
const y = -(GAP * (getDepth(this.props.model) + 1));
|
|
const strokeWidth = 1;
|
|
const text = (this.props.model.properties.width ?? 0).toString();
|
|
|
|
return (
|
|
<g
|
|
style={defaultStyle}
|
|
transform={transform}
|
|
key={`container-${this.props.model.properties.id}`}
|
|
>
|
|
<Dimension
|
|
id={id}
|
|
xStart={xStart}
|
|
xEnd={xEnd}
|
|
y={y}
|
|
strokeWidth={strokeWidth}
|
|
text={text}
|
|
/>
|
|
<rect
|
|
width={this.props.model.properties.width}
|
|
height={this.props.model.properties.height}
|
|
style={style}
|
|
>
|
|
</rect>
|
|
<text
|
|
x={xText}
|
|
y={yText}
|
|
>
|
|
{this.props.model.properties.id}
|
|
</text>
|
|
{ containersElements }
|
|
</g>
|
|
);
|
|
}
|
|
}
|