Implement dimension per depth

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -0,0 +1,89 @@
+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[] = [];
+  let currentDepth = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  let lastY = 0;
+  for (const { container, depth } of it) {
+    if (currentDepth !== depth) {
+      AddNewDimension(currentDepth, min, max, lastY, dimensions);
+
+      currentDepth = depth;
+      min = Infinity;
+      max = -Infinity;
+    }
+
+    const absoluteX = getAbsolutePosition(container)[0];
+    const x = transformX(absoluteX, container.properties.width, container.properties.XPositionReference);
+    lastY = container.properties.y + container.properties.height;
+    if (x < min) {
+      min = x;
+    }
+
+    if (x > max) {
+      max = x;
+    }
+  }
+
+  AddNewDimension(currentDepth, min, max, lastY, dimensions);
+
+  return dimensions;
+};
+
+/**
+ * A layer containing all dimension
+ * @param props
+ * @returns
+ */
+export const DepthDimensionLayer: 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>
+  );
+};
+
+function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, dimensions: React.ReactNode[]): void {
+  const id = `dim-depth-${currentDepth}`;
+  const xStart = min;
+  const xEnd = max;
+  const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1));
+  const strokeWidth = 1;
+  const width = xEnd - xStart;
+  const text = width.toString();
+
+  if (width === 0) {
+    return;
+  }
+
+  dimensions.push(
+    <Dimension
+      id={id}
+      xStart={xStart}
+      yStart={y}
+      xEnd={xEnd}
+      yEnd={y}
+      strokeWidth={strokeWidth}
+      text={text} />
+  );
+}

src/Components/SVG/SVG.tsx

@@ -5,6 +5,8 @@ import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector';
 import { BAR_WIDTH } from '../Bar/Bar';
 import { DimensionLayer } from './Elements/DimensionLayer';
+import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
+import { SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
 
 interface ISVGProps {
   width: number
@@ -75,7 +77,11 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
         <svg {...properties}>
           { children }
           <Selector selected={props.selected} />
-          <DimensionLayer roots={props.children}/>
+          {
+            SHOW_DIMENSIONS_PER_DEPTH
+              ? <DepthDimensionLayer roots={props.children}/>
+              : null
+          }
         </svg>
       </UncontrolledReactSVGPanZoom>
     </div>

src/utils/default.ts

@@ -7,7 +7,8 @@ import IProperties from '../Interfaces/IProperties';
 /// DIMENSIONS DEFAULTS ///
 
 export const SHOW_PARENT_DIMENSION = true;
-export const SHOW_CHILDREN_DIMENSIONS = true;
+export const SHOW_CHILDREN_DIMENSIONS = false;
+export const SHOW_DIMENSIONS_PER_DEPTH = true;
 export const DIMENSION_MARGIN = 50;
 export const NOTCHES_LENGTH = 4;