Implement dimension

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