Implement #7539

src/Components/SymbolProperties/SymbolForm.tsx

@@ -22,6 +22,15 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='string'
         value={props.symbol.id.toString()}
         isDisabled={true} />
+      <TextInputGroup
+        id='displayedText'
+        labelText={Text({ textId: '@SymbolDisplayedText' })}
+        inputKey='displayedText'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        value={props.symbol.displayedText}
+        onChange={(value) => props.onChange('displayedText', value)} />
       <TextInputGroup
         id='x'
         labelText={Text({ textId: '@SymbolX' })}

src/Components/SymbolsList/SymbolsList.tsx

@@ -16,13 +16,13 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
   const divRef = React.useRef<HTMLDivElement>(null);
   const height = useSize(divRef)[1];
   // Render
-  const containers = [...props.symbols.values()];
+  const symbols = [...props.symbols.values()];
   function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
-    const container = containers[index];
+    const symbol = symbols[index];
-    const key = container.id.toString();
+    const key = symbol.id;
-    const text = key;
+    const text = symbol.displayedText;
     const selectedClass: string = props.selectedSymbolId !== '' &&
-      props.selectedSymbolId === container.id
+      props.selectedSymbolId === symbol.id
       ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
       : 'bg-slate-300/60 hover:bg-slate-300';
 
@@ -45,7 +45,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
       <div ref={divRef} className='h-1/2 text-gray-800'>
         <List
           className='List divide-y divide-black'
-          itemCount={containers.length}
+          itemCount={symbols.length}
           itemSize={35}
           height={height}
           width={'100%'}

src/Interfaces/IAvailableSymbol.ts

@@ -10,6 +10,9 @@ export interface IAvailableSymbol {
 
   Image: IImage
 
+  /** displayed text */
+  DisplayedText?: string
+
   X?: number
 
   Y?: number

src/Interfaces/ISymbolModel.ts

@@ -4,6 +4,9 @@ export interface ISymbolModel {
   /** Identifier */
   id: string
 
+  /** Displayed Text */
+  displayedText: string
+
   /** Type */
   type: string
 

src/Translations/translation.en.json

@@ -69,6 +69,7 @@
   "@StyleFillOpacity": "Fill Opacity",
 
   "@SymbolName": "Name",
+  "@SymbolDisplayedText": "Displayed text",
   "@SymbolX": "x",
   "@SymbolHeight": "Height",
   "@SymbolWidth": "Width"

src/Translations/translation.fr.json

@@ -69,6 +69,7 @@
   "@StyleFillOpacity": "Opacité du remplissage",
 
   "@SymbolName": "Nom",
+  "@SymbolDisplayedText": "Texte affiché",
   "@SymbolX": "x",
   "@SymbolHeight": "Hauteur",
   "@SymbolWidth": "Largeur"

src/utils/default.ts

@@ -227,6 +227,8 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
  * @param parent Parent of the container
  * @param x horizontal offset
  * @param y vertical offset
+ * @param width
+ * @param height
  * @param containerConfig default config of the container sent by the API
  * @returns {IContainerProperties} Default properties of a newly created container
  */
@@ -276,8 +278,10 @@ export function GetDefaultSymbolModel(name: string,
   newCounters: Record<string, number>,
   type: string,
   symbolConfig: IAvailableSymbol): ISymbolModel {
+  const id = `${name}-${newCounters[type]}`;
   return {
-    id: `${name}-${newCounters[type]}`,
+    id,
+    displayedText: symbolConfig.DisplayedText ?? id,
     type: name,
     config: structuredClone(symbolConfig),
     x: 0,

test-server/http.js

@@ -30,6 +30,7 @@ const requestListener = async (request, response) => {
           break;
         case 'SplitRemplissageParent':
           json = SplitRemplissage(bodyParsed);
+          break;
         default:
           break;
       }
@@ -274,6 +275,7 @@ const GetSVGLayoutConfiguration = () => {
     ],
     AvailableSymbols: [
       {
+        DisplayedText: 'Nom du Symbol',
         Width: 32,
         Height: 32,
         Image: {
@@ -359,7 +361,7 @@ const FillHoleWithChassis = (request) => {
   };
 };
 
-const SplitRemplissage = (request) => {
+const SplitRemplissage = () => {
   const lstModels = [
     {
       Type: 'Remplissage',
@@ -380,7 +382,7 @@ const SplitRemplissage = (request) => {
 };
 
 
-const Insert = (request) => {
+const Insert = () => {
   const lstModels = [
     {
       Type: 'Remplissage',