Changed MainContainer dimension to something more respectable

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -14,26 +14,13 @@ interface IElementsSidebarProps {
 
 export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
-    const root = this.props.MainContainer;
+    if (!this.props.MainContainer) {
-    if (!root) {
       return null;
     }
 
-    const queue = [root];
+    const it = this.props.MainContainer.MakeIterator();
-    const visited = new Set([root]);
+    for (const container of it) {
-    while (queue.length > 0) {
-      const container = queue.pop() as Container;
-
       handleContainer(container);
-
-      // if this reverse() gets costly, replace it by a simple for
-      container.props.children.reverse().forEach((child) => {
-        if (visited.has(child)) {
-          return;
-        }
-        visited.add(child);
-        queue.push(child);
-      });
     }
   }
 
@@ -42,7 +29,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
 
     const containerRows: React.ReactNode[] = [];
     this.iterateChilds((container: Container) => {
-      const depth: number = Container.getDepth(container);
+      const depth: number = container.getDepth();
       const key = container.props.properties.id.toString();
       const text = '|\t'.repeat(depth) + key;
       const selectedClass: string = this.props.SelectedContainer !== null &&

src/Components/SVG/Elements/Container.tsx

@@ -21,6 +21,37 @@ export class Container extends React.Component<IContainerProps> {
     return properties;
   }
 
+  public * MakeIterator() {
+    const queue: Container[] = [this];
+    const visited = new Set<Container>(queue);
+    while (queue.length > 0) {
+      const container = queue.pop() as Container;
+
+      yield container;
+
+      // if this reverse() gets costly, replace it by a simple for
+      container.props.children.reverse().forEach((child) => {
+        if (visited.has(child)) {
+          return;
+        }
+        visited.add(child);
+        queue.push(child);
+      });
+    }
+  }
+
+  public getDepth() {
+    let depth = 0;
+
+    let current: Container | null = this.props.parent;
+    while (current != null) {
+      depth++;
+      current = current.props.parent;
+    }
+
+    return depth;
+  }
+
   public render(): React.ReactNode {
     const containersElements = this.props.children.map(child => child.render());
     const defaultStyle = {
@@ -50,16 +81,4 @@ export class Container extends React.Component<IContainerProps> {
       </g>
     );
   }
-
-  public static getDepth(container: Container): number {
-    let depth = 0;
-
-    let current: Container | null = container.props.parent;
-    while (current != null) {
-      depth++;
-      current = current.props.parent;
-    }
-
-    return depth;
-  }
 }

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

test-server/http.js

@@ -254,7 +254,7 @@ const GetSVGLayoutConfiguration = () => {
       ContainerActions: null,
       ContainerDimensionning: null,
       DefaultChildrenContainers: null,
-      Height: 1600,
+      Height: 200,
       IsPositionFixed: false,
       IsWidthFixed: false,
       MaxHeight: 0,
@@ -263,7 +263,7 @@ const GetSVGLayoutConfiguration = () => {
       MinWidth: 0,
       Type: 'Trou',
       TypeChildContainerDefault: null,
-      Width: 20000,
+      Width: 1000,
       XPositionReference: 0
     }
   };