From f569e54ce0a0b51724d02837c24120b8261cf81d Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Thu, 18 Aug 2022 14:37:49 +0200
Subject: [PATCH] Add displayed text

---
 src/Components/ElementsSidebar/ElementsSidebar.tsx | 4 +++-
 src/Components/Properties/DynamicForm.tsx          | 9 +++++++++
 src/Components/Properties/StaticForm.tsx           | 8 ++++++++
 src/Components/SVG/Elements/Container.tsx          | 2 +-
 src/Interfaces/IProperties.ts                      | 3 +++
 src/utils/default.ts                               | 2 ++
 6 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index 345ad05..6a2d688 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/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
diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx
index 76bc4e1..a34b5bf 100644
--- a/src/Components/Properties/DynamicForm.tsx
+++ b/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'
diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx
index 2b0bd6a..e2b38c8 100644
--- a/src/Components/Properties/StaticForm.tsx
+++ b/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'
diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index ff84123..6e561f2 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/src/Components/SVG/Elements/Container.tsx
@@ -98,7 +98,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
           x={xText}
           y={yText}
         >
-          {props.model.properties.id}
+          {props.model.properties.displayedText}
         </text>
         : null }
       { containersElements }
diff --git a/src/Interfaces/IProperties.ts b/src/Interfaces/IProperties.ts
index a400a0a..205d93f 100644
--- a/src/Interfaces/IProperties.ts
+++ b/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
 
diff --git a/src/utils/default.ts b/src/utils/default.ts
index ff556ec..f8fe20c 100644
--- a/src/utils/default.ts
+++ b/src/utils/default.ts
@@ -48,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,
@@ -72,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,