52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
|
|
interface IDimensionProps {
|
|
id: string
|
|
xStart: number
|
|
xEnd: number
|
|
y: number
|
|
text: string
|
|
strokeWidth: number
|
|
}
|
|
|
|
export class Dimension extends React.PureComponent<IDimensionProps> {
|
|
public render(): JSX.Element {
|
|
const style: React.CSSProperties = {
|
|
stroke: 'black'
|
|
};
|
|
return (
|
|
<g key={this.props.id}>
|
|
<line
|
|
x1={this.props.xStart}
|
|
y1={this.props.y - 4 * this.props.strokeWidth}
|
|
x2={this.props.xStart}
|
|
y2={this.props.y + 4 * this.props.strokeWidth}
|
|
strokeWidth={this.props.strokeWidth}
|
|
style={style}
|
|
/>
|
|
<line
|
|
x1={this.props.xStart}
|
|
y1={this.props.y}
|
|
x2={this.props.xEnd}
|
|
y2={this.props.y}
|
|
strokeWidth={this.props.strokeWidth}
|
|
style={style}
|
|
/>
|
|
<line
|
|
x1={this.props.xEnd}
|
|
y1={this.props.y - 4 * this.props.strokeWidth}
|
|
x2={this.props.xEnd}
|
|
y2={this.props.y + 4 * this.props.strokeWidth}
|
|
strokeWidth={this.props.strokeWidth}
|
|
style={style}
|
|
/>
|
|
<text
|
|
x={(this.props.xStart + this.props.xEnd) / 2}
|
|
y={this.props.y}
|
|
>
|
|
{this.props.text}
|
|
</text>
|
|
</g>
|
|
);
|
|
}
|
|
}
|