Add displayed text

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

@@ -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 }

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

@@ -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,