src/Components/SVG/Elements/Container.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Interweave, Node } from 'interweave';
 import { XPositionReference } from '../../../Enums/XPositionReference';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION } from '../../../utils/default';
+import { DIMENSION_MARGIN } from '../../../utils/default';
 import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 import IProperties from '../../../Interfaces/IProperties';
@@ -54,7 +54,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   const text = (props.model.properties.width ?? 0).toString();
 
   let dimensionChildren: JSX.Element | null = null;
-  if (props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) {
+  if (props.model.children.length > 1) {
     const {
       childrenId,
       xChildrenStart,
@@ -79,8 +79,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
       transform={transform}
       key={`container-${props.model.properties.id}`}
     >
-      { SHOW_PARENT_DIMENSION
+      <Dimension
-        ? <Dimension
         id={id}
         xStart={xStart}
         xEnd={xEnd}
@@ -89,8 +88,6 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
         strokeWidth={strokeWidth}
         text={text}
       />
-        : null
-      }
       { dimensionChildren }
       { svg }
       <text

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,57 +0,0 @@
-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>
-  );
-};

src/Components/SVG/SVG.tsx

@@ -4,7 +4,6 @@ import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector';
 import { BAR_WIDTH } from '../Bar/Bar';
-import { DimensionLayer } from './Elements/DimensionLayer';
 
 interface ISVGProps {
   width: number
@@ -75,7 +74,6 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
         <svg {...properties}>
           { children }
           <Selector selected={props.selected} />
-          <DimensionLayer roots={props.children}/>
         </svg>
       </UncontrolledReactSVGPanZoom>
     </div>

src/utils/default.ts

@@ -4,17 +4,6 @@ import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IContainerModel } from '../Interfaces/IContainerModel';
 import IProperties from '../Interfaces/IProperties';
 
-/// DIMENSIONS DEFAULTS ///
-
-export const SHOW_PARENT_DIMENSION = true;
-export const SHOW_CHILDREN_DIMENSIONS = true;
-export const DIMENSION_MARGIN = 50;
-export const NOTCHES_LENGTH = 4;
-
-/// EDITOR DEFAULTS ///
-
-export const MAX_HISTORY = 200;
-
 export const DEFAULT_CONFIG: IConfiguration = {
   AvailableContainers: [
     {
@@ -78,3 +67,8 @@ export const GetDefaultContainerProps = (
   style: containerConfig.Style,
   userData: containerConfig.UserData
 });
+
+export const DIMENSION_MARGIN = 50;
+export const NOTCHES_LENGTH = 4;
+
+export const MAX_HISTORY = 200;

src/utils/itertools.ts

@@ -22,34 +22,6 @@ export function * MakeIterator(root: IContainerModel): Generator<IContainerModel
   }
 }
 
-export interface ContainerAndDepth {
-  container: IContainerModel
-  depth: number
-}
-/**
- * Returns a Generator iterating of over the children depth-first
- */
-export function * MakeBFSIterator(root: IContainerModel): Generator<ContainerAndDepth, void, unknown> {
-  const queue: IContainerModel[] = [root];
-  let depth = 0;
-  while (queue.length > 0) {
-    let levelSize = queue.length;
-    while (levelSize-- !== 0) {
-      const container = queue.shift() as IContainerModel;
-      yield {
-        container,
-        depth
-      };
-
-      for (let i = container.children.length - 1; i >= 0; i--) {
-        const child = container.children[i];
-        queue.push(child);
-      }
-    }
-    depth++;
-  }
-}
-
 /**
  * Returns the depth of the container
  * @returns The depth of the container