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/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