src/Components/Editor/Shortcuts.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { ENABLE_SHORTCUTS } from '../../utils/default';
 
 export function onKeyDown(
   event: KeyboardEvent,
@@ -7,6 +8,10 @@ export function onKeyDown(
   historyCurrentStep: number,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
+  if (!ENABLE_SHORTCUTS) {
+    return;
+  }
+
   event.preventDefault();
   if (event.isComposing || event.keyCode === 229) {
     return;

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -14,6 +14,7 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'main',
           parentId: null,
+          displayedText: 'main',
           x: 0,
           y: 0,
           width: 2000,
@@ -47,6 +48,7 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'main',
         parentId: '',
+        displayedText: 'main',
         x: 0,
         y: 0,
         width: 2000,
@@ -106,6 +108,7 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'main',
         parentId: '',
+        displayedText: 'main',
         x: 0,
         y: 0,
         minWidth: 1,
@@ -125,6 +128,7 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'child-1',
           parentId: 'main',
+          displayedText: 'child-1',
           x: 0,
           y: 0,
           minWidth: 1,
@@ -145,6 +149,7 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'child-2',
           parentId: 'main',
+          displayedText: 'child-2',
           x: 0,
           y: 0,
           minWidth: 1,
@@ -185,6 +190,7 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'main',
         parentId: '',
+        displayedText: 'main',
         x: 0,
         y: 0,
         minWidth: 1,
@@ -203,6 +209,7 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'child-1',
         parentId: 'main',
+        displayedText: 'child-1',
         x: 0,
         y: 0,
         minWidth: 1,

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -83,7 +83,9 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
     const container = containers[index];
     const depth: number = getDepth(container);
     const key = container.properties.id.toString();
-    const text = '|\t'.repeat(depth) + key;
+    const text = container.properties.displayedText === key
+      ? `${'|\t'.repeat(depth)} ${key}`
+      : `${'|\t'.repeat(depth)} ${container.properties.displayedText} (${key})`;
     const selectedClass: string = props.SelectedContainer !== undefined &&
         props.SelectedContainer !== null &&
         props.SelectedContainer.properties.id === container.properties.id

src/Components/Properties/DynamicForm.tsx

@@ -52,6 +52,15 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         value={props.properties.parentId?.toString()}
         isDisabled={true}
       />
+      <InputGroup
+        labelText='Displayed text'
+        inputKey='displayedText'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        value={props.properties.displayedText?.toString()}
+        onChange={(event) => props.onChange('displayedText', event.target.value)}
+      />
       <InputGroup
         labelText='x'
         inputKey='x'

src/Components/Properties/Properties.test.tsx

@@ -23,6 +23,7 @@ describe.concurrent('Properties', () => {
     const prop: IProperties = {
       id: 'stuff',
       parentId: 'parentId',
+      displayedText: 'stuff',
       x: 1,
       y: 1,
       width: 1,

src/Components/Properties/StaticForm.tsx

@@ -52,6 +52,14 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
         defaultValue={props.properties.parentId?.toString()}
         isDisabled={true}
       />
+      <InputGroup
+        labelText='Displayed text'
+        inputKey='displayedText'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        defaultValue={props.properties.displayedText?.toString()}
+      />
       <InputGroup
         labelText='x'
         inputKey='x'

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 } from '../../../utils/default';
+import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION, SHOW_TEXT } 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) {
+  if (props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) {
     const {
       childrenId,
       xChildrenStart,
@@ -79,7 +79,8 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
       transform={transform}
       key={`container-${props.model.properties.id}`}
     >
-      <Dimension
+      { SHOW_PARENT_DIMENSION
+        ? <Dimension
           id={id}
           xStart={xStart}
           xEnd={xEnd}
@@ -88,14 +89,18 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
           strokeWidth={strokeWidth}
           text={text}
         />
+        : null
+      }
       { dimensionChildren }
       { svg }
-      <text
+      { SHOW_TEXT
+        ? <text
           x={xText}
           y={yText}
         >
-        {props.model.properties.id}
+          {props.model.properties.displayedText}
         </text>
+        : null }
       { containersElements }
     </g>
   );

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -0,0 +1,90 @@
+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
+      key={id}
+      id={id}
+      xStart={xStart}
+      yStart={y}
+      xEnd={xEnd}
+      yEnd={y}
+      strokeWidth={strokeWidth}
+      text={text} />
+  );
+}

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 { 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
+        key={id}
+        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,6 +4,9 @@ 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';
+import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
+import { SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
 
 interface ISVGProps {
   width: number
@@ -74,6 +77,11 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
         <svg {...properties}>
           { children }
           <Selector selected={props.selected} />
+          {
+            SHOW_DIMENSIONS_PER_DEPTH
+              ? <DepthDimensionLayer roots={props.children}/>
+              : null
+          }
         </svg>
       </UncontrolledReactSVGPanZoom>
     </div>

src/Interfaces/IProperties.ts

@@ -11,6 +11,9 @@ export default interface IProperties {
   /** id of the parent container (null when there is no parent) */
   parentId: string | null
 
+  /** Text displayed in the container */
+  displayedText: string
+
   /** horizontal offset */
   x: number
 

src/utils/default.ts

@@ -4,6 +4,23 @@ import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IContainerModel } from '../Interfaces/IContainerModel';
 import IProperties from '../Interfaces/IProperties';
 
+/// CONTAINRE DEFAULTS ///
+
+export const SHOW_TEXT = true;
+
+/// DIMENSIONS DEFAULTS ///
+
+export const SHOW_PARENT_DIMENSION = true;
+export const SHOW_CHILDREN_DIMENSIONS = false;
+export const SHOW_DIMENSIONS_PER_DEPTH = true;
+export const DIMENSION_MARGIN = 50;
+export const NOTCHES_LENGTH = 4;
+
+/// EDITOR DEFAULTS ///
+
+export const ENABLE_SHORTCUTS = true;
+export const MAX_HISTORY = 200;
+
 export const DEFAULT_CONFIG: IConfiguration = {
   AvailableContainers: [
     {
@@ -31,6 +48,7 @@ export const DEFAULT_CONFIG: IConfiguration = {
 export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   id: 'main',
   parentId: 'null',
+  displayedText: 'main',
   x: 0,
   y: 0,
   minWidth: 1,
@@ -55,6 +73,7 @@ export const GetDefaultContainerProps = (
 ): IProperties => ({
   id: `${type}-${typeCount}`,
   parentId: parent.properties.id,
+  displayedText: `${type}-${typeCount}`,
   x,
   y,
   width: containerConfig.Width ?? containerConfig.MinWidth ?? parent.properties.width,
@@ -67,8 +86,3 @@ 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,6 +22,34 @@ 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