Implement dimension

src/Components/SVG/Elements/Dimension.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+interface IDimensionProps {
+  id: string;
+  xStart: number;
+  xEnd: number;
+  y: number;
+  text: string;
+  strokeWidth: number;
+}
+
+export class Dimension extends React.Component<IDimensionProps> {
+  public render() {
+    const style = {
+      stroke: 'black'
+    } as React.CSSProperties;
+    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>
+    );
+  }
+}