Restore DimensionLayer with BFS algorithm and usage of getAbsolutePosition

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { ContainerModel } from '../../../Interfaces/IContainerModel';
+import { DIMENSION_MARGIN } from '../../../utils/default';
+import { getAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
+import { transformX } from './Container';
+import { Dimension } from './Dimension';
+
+interface IDimensionLayerProps {
+  roots: ContainerModel | ContainerModel[] | null
+}
+
+const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
+  const it = MakeBFSIterator(root);
+  const dimensions: React.ReactNode[] = [];
+  for (const { container, depth } of it) {
+    const width = container.properties.width;
+    const id = `dim-${container.properties.id}`;
+    const xStart = getAbsolutePosition(container)[0];
+    const xEnd = xStart + width;
+    const y = (container.properties.y + container.properties.height) + (DIMENSION_MARGIN * (depth + 1));
+    const strokeWidth = 1;
+    const text = width.toString();
+    dimensions.push(
+      <Dimension
+        id={id}
+        xStart={xStart}
+        yStart={y}
+        xEnd={xEnd}
+        yEnd={y}
+        strokeWidth={strokeWidth}
+        text={text}
+      />
+    );
+  }
+  return dimensions;
+};
+
+/**
+ * A layer containing all dimension
+ * @param props
+ * @returns
+ */
+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>
+      { dimensions }
+    </g>
+  );
+};