Implement displayed text

src/Components/Sidebar/Sidebar.tsx

@@ -32,7 +32,7 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       draggable={true}
       onDragStart={(event) => HandleDragStart(event)}
     >
-      {TruncateString(componentOption.Type, 25)}
+      {TruncateString(componentOption.DisplayedText ?? componentOption.Type, 25)}
     </button>);
     if (componentOption.Category === null || componentOption.Category === undefined) {
       rootElements.push(componentButton);

src/Interfaces/IAvailableContainer.ts

@@ -10,6 +10,9 @@ export interface IAvailableContainer {
   /** type */
   Type: string
 
+  /** displayed text */
+  DisplayedText?: string
+
   /** category */
   Category?: string
 

src/utils/default.ts

@@ -160,7 +160,7 @@ export function GetDefaultContainerProps(type: string,
     type,
     parentId: parent.properties.id,
     linkedSymbolId: '',
-    displayedText: `${type}-${typeCount}`,
+    displayedText: `${containerConfig.DisplayedText ?? type}-${typeCount}`,
     x,
     y,
     margin: containerConfig.Margin ?? {},

test-server/http.js

@@ -64,6 +64,7 @@ const GetSVGLayoutConfiguration = () => {
     AvailableContainers: [
       {
         Type: 'Chassis',
+        DisplayedText: 'Chassis?',
         MaxWidth: 500,
         MinWidth: 200,
         Width: 200,