Implement more options + Add depth dimension (revert DimensionLayer) (#37)

- Displayed text
- Enable Shortcuts
- Hide text
- Disable Dimension
- Depth dimension

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/37

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,23 +79,28 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
       transform={transform}
       key={`container-${props.model.properties.id}`}
     >
-      <Dimension
-        id={id}
-        xStart={xStart}
-        xEnd={xEnd}
-        yStart={y}
-        yEnd={y}
-        strokeWidth={strokeWidth}
-        text={text}
-      />
+      { SHOW_PARENT_DIMENSION
+        ? <Dimension
+          id={id}
+          xStart={xStart}
+          xEnd={xEnd}
+          yStart={y}
+          yEnd={y}
+          strokeWidth={strokeWidth}
+          text={text}
+        />
+        : null
+      }
       { dimensionChildren }
       { svg }
-      <text
-        x={xText}
-        y={yText}
-      >
-        {props.model.properties.id}
-      </text>
+      { SHOW_TEXT
+        ? <text
+          x={xText}
+          y={yText}
+        >
+          {props.model.properties.displayedText}
+        </text>
+        : null }
       { containersElements }
     </g>
   );