src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -14,13 +14,26 @@ interface IElementsSidebarProps {
 
 export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
-    if (!this.props.MainContainer) {
+    const root = this.props.MainContainer;
+    if (!root) {
       return null;
     }
 
-    const it = this.props.MainContainer.MakeIterator();
+    const queue = [root];
-    for (const container of it) {
+    const visited = new Set([root]);
+    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);
+      });
     }
   }
 
@@ -29,7 +42,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
 
     const containerRows: React.ReactNode[] = [];
     this.iterateChilds((container: Container) => {
-      const depth: number = container.getDepth();
+      const depth: number = Container.getDepth(container);
       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,37 +21,6 @@ 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 = {
@@ -81,4 +50,16 @@ 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

@@ -1,52 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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,7 +1,6 @@
 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,
@@ -80,7 +79,6 @@ 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: 200,
+      Height: 1600,
       IsPositionFixed: false,
       IsWidthFixed: false,
       MaxHeight: 0,
@@ -263,7 +263,7 @@ const GetSVGLayoutConfiguration = () => {
       MinWidth: 0,
       Type: 'Trou',
       TypeChildContainerDefault: null,
-      Width: 1000,
+      Width: 20000,
       XPositionReference: 0
     }
   };