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>
+    );
+  }
+}

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Container } from './Container';
+import { Dimension } from './Dimension';
+
+interface IDimensionLayerProps {
+  isHidden: boolean,
+  roots: Container | Container[] | null,
+}
+
+const GAP: number = 50;
+
+const getDimensionsNodes = (root: Container): React.ReactNode[] => {
+  const it = root.MakeIterator();
+  const dimensions: React.ReactNode[] = [];
+  for (const container of it) {
+    // WARN: this might be dangerous later when using other units/rules
+    const width = Number(container.props.properties.width);
+
+    const id = `dim-${container.props.properties.id}`;
+    const xStart: number = container.props.properties.x;
+    const xEnd = xStart + width;
+    const y = -(GAP * (container.getDepth() + 1));
+    const strokeWidth = 1;
+    const text = width.toString();
+    const dimension = new Dimension({
+      id,
+      xStart,
+      xEnd,
+      y,
+      strokeWidth,
+      text
+    });
+    dimensions.push(dimension.render());
+  }
+  return dimensions;
+};
+
+export const DimensionLayer: React.FC<IDimensionLayerProps> = (props: IDimensionLayerProps) => {
+  let dimensions: React.ReactNode[] = [];
+  if (Array.isArray(props.roots)) {
+    props.roots.forEach(child => {
+      dimensions.concat(getDimensionsNodes(child));
+    });
+  } else if (props.roots !== null) {
+    dimensions = getDimensionsNodes(props.roots);
+  }
+  return (
+    <g visibility={props.isHidden ? 'hidden' : 'visible'}>
+      { dimensions }
+    </g>
+  );
+};

src/Components/SVG/SVG.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
+import { DimensionLayer } from './Elements/DimensionLayer';
 
 interface ISVGProps {
   children: Container | Container[] | null,
@@ -79,6 +80,7 @@ export class SVG extends React.Component<ISVGProps> {
       >
         <svg ref={this.svg} {...properties}>
           { children }
+          <DimensionLayer isHidden={false} roots={this.props.children} />
         </svg>
       </ReactSVGPanZoom>
     );