Merged PR 225: Implement translations

Implement translations with useContext in React
+Add events to allow changing the language in the app
+Refactor AppEvents
+Redesign vertical bars in elements

public/smartcomponent/svg-layout-designer.ts

@@ -5,6 +5,7 @@
     type IHistoryState = SVGLD.IHistoryState;
     type IEditorState = SVGLD.IEditorState;
     type IConfiguration = SVGLD.IConfiguration;
+    type ILanguage = SVGLD.ILanguage;
 
     export class SVGLayoutDesigner extends Components.ComponentBase {
 
@@ -210,6 +211,43 @@
             const component = this.GetAppComponent();
             component.dispatchEvent(new CustomEvent(eventType, { detail: configuration }));
         }
+
+        /**
+         * Add a language to the app
+         * @param option Displayed string of the language
+         * @param language Language containing an id and a dictionary
+         * @param callback Callback
+         */
+        public AddLanguage(option: string, language: ILanguage, callback?: () => void) {
+            const eventType = 'addLanguage';
+            this.app.AddEventListener(eventType, callback);
+            const component = this.GetAppComponent();
+            component.dispatchEvent(new CustomEvent(eventType, { detail: { language, option } }));
+        }
+
+        /**
+         * Set the language of the app (defaults: ['fr', 'en'])
+         * @param languageId Language identifier for the language to select
+         * @param callback Callback
+         */
+        public SetLanguage(languageId: string, callback?: (success: boolean) => void) {
+            const eventType = 'setLanguage';
+            this.app.AddEventListener(eventType, callback);
+            const component = this.GetAppComponent();
+            component.dispatchEvent(new CustomEvent(eventType, { detail: languageId }));
+        }
+
+         /**
+         * Set the language of the app (defaults: ['fr', 'en'])
+         * @param languageId Language identifier for the language to select
+         * @param callback Callback
+         */
+        public GetLanguages(callback: (languages: Record<string, Record<string, string>>) => void) {
+            const eventType = 'getLanguages';
+            this.app.AddEventListener(eventType, callback);
+            const component = this.GetAppComponent();
+            component.dispatchEvent(new CustomEvent(eventType));
+        }
     }
 
 

public/svgld.d.ts

@@ -88,6 +88,7 @@ export interface IAPIConfiguration {
 
 
 
+
 /** Model of available container used in application configuration */
 export interface IAvailableContainer {
     /** type */
@@ -212,7 +213,7 @@ export interface IAvailableContainer {
      * (optional)
      * User data that can be used for data storage or custom SVG
      */
-    UserData?: object;
+    UserData?: IKeyValue[];
 }
 
 
@@ -250,7 +251,6 @@ export interface IConfiguration {
 
 export interface IContainerModel {
     children: string[];
-    parent: IContainerModel | null;
     properties: IContainerProperties;
     userData: Record<string, string | number>;
 }
@@ -260,10 +260,9 @@ export interface IContainerModel {
  */
 export class ContainerModel implements IContainerModel {
     children: string[];
-    parent: IContainerModel | null;
     properties: IContainerProperties;
     userData: Record<string, string | number>;
-    constructor(parent: IContainerModel | null, properties: IContainerProperties, children?: string[], userData?: {});
+    constructor(properties: IContainerProperties, children?: string[], userData?: {});
 }
 
 
@@ -271,6 +270,7 @@ export class ContainerModel implements IContainerModel {
 
 
 
+
 /**
  * Properties of a container
  */
@@ -363,7 +363,7 @@ export interface IContainerProperties {
      * (optional)
      * User data that can be used for data storage or custom SVG
      */
-    userData?: object;
+    userData?: IKeyValue[];
 }
 
 
@@ -428,6 +428,17 @@ export interface IInputGroup {
     value: string;
 }
 
+export interface IKeyValue {
+    Key: string;
+    Value: string;
+}
+
+export interface ILanguage {
+    language: string;
+    dictionary: Record<string, string>;
+    languageChange?: (selected: string) => void;
+}
+
 export interface IMargin {
     left?: number;
     bottom?: number;

src/Components/App/App.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { UseCustomEvents } from '../../Events/AppEvents';
 import { MainMenu } from '../MainMenu/MainMenu';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
@@ -7,6 +7,7 @@ import { IEditorState } from '../../Interfaces/IEditorState';
 import { LoadState } from './Actions/Load';
 import { LoadEditor, NewEditor } from './Actions/MenuActions';
 import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
+import { LanguageContext } from '../LanguageProvider/LanguageProvider';
 
 // App will never have props
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -44,6 +45,7 @@ function UseHTTPGETStatePreloading(
 export function App(props: IAppProps): JSX.Element {
   const [isLoaded, setLoaded] = useState<boolean>(false);
   const appRef = useRef<HTMLDivElement>(null);
+  const languageContext = useContext(LanguageContext);
 
   const defaultMainContainer = new ContainerModel(
     DEFAULT_MAINCONTAINER_PROPS
@@ -68,6 +70,7 @@ export function App(props: IAppProps): JSX.Element {
   UseCustomEvents(
     props.root,
     appRef,
+    languageContext,
     setEditorState,
     setLoaded
   );

src/Components/Bar/Bar.tsx

@@ -14,6 +14,7 @@ import {
   Cog8ToothIcon as Cog8ToothIconS
 } from '@heroicons/react/24/solid';
 import { BarIcon } from './BarIcon';
+import { Text } from '../Text/Text';
 
 interface IBarProps {
   isComponentsOpen: boolean
@@ -35,7 +36,7 @@ export function Bar(props: IBarProps): JSX.Element {
     <div className='bar'>
       <BarIcon
         isActive={props.isComponentsOpen}
-        title='Components'
+        title={Text({ textId: '@Components' })}
         onClick={() => props.toggleComponents()}>
         {
           props.isComponentsOpen
@@ -45,7 +46,7 @@ export function Bar(props: IBarProps): JSX.Element {
       </BarIcon>
       <BarIcon
         isActive={props.isSymbolsOpen}
-        title='Symbols'
+        title={Text({ textId: '@Symbols' })}
         onClick={() => props.toggleSymbols()}>
         {
           props.isSymbolsOpen
@@ -55,7 +56,7 @@ export function Bar(props: IBarProps): JSX.Element {
       </BarIcon>
       <BarIcon
         isActive={props.isMessagesOpen}
-        title='Messages'
+        title={Text({ textId: '@Messages' })}
         onClick={() => props.toggleMessages()}>
         {
           props.isMessagesOpen
@@ -66,7 +67,7 @@ export function Bar(props: IBarProps): JSX.Element {
       <div className='grow'></div>
       <BarIcon
         isActive={props.isHistoryOpen}
-        title='Timeline'
+        title={Text({ textId: '@Timeline' })}
         onClick={() => props.toggleTimeline()}>
         {
           props.isHistoryOpen
@@ -76,7 +77,7 @@ export function Bar(props: IBarProps): JSX.Element {
       </BarIcon>
       <BarIcon
         isActive={props.isSettingsOpen}
-        title='Settings'
+        title={Text({ textId: '@Settings' })}
         onClick={() => props.toggleSettings()}>
         {
           props.isSettingsOpen

src/Components/Components/Components.tsx

@@ -5,6 +5,7 @@ import { ICategory } from '../../Interfaces/ICategory';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { TruncateString } from '../../utils/stringtools';
 import { Category } from '../Category/Category';
+import { Text } from '../Text/Text';
 
 interface IComponentsProps {
   selectedContainer: IContainerModel | undefined
@@ -24,7 +25,7 @@ interface SidebarCategory {
 
 export function Components(props: IComponentsProps): JSX.Element {
   const [hideDisabled, setHideDisabled] = React.useState<boolean>(false);
-  const disabledTitle = hideDisabled ? 'Show disabled components' : 'Hide disabled components';
+  const disabledTitle = hideDisabled ? Text({ textId: '@ShowDisabledComponents' }) : Text({ textId: '@HideDisabledComponents' });
 
   const rootElements: Array<JSX.Element | undefined> = [];
   const categories = new Map<string, SidebarCategory>(props.categories.map(category => [

src/Components/ContainerProperties/ContainerForm.tsx

@@ -4,6 +4,7 @@ import { IContainerProperties } from '../../Interfaces/IContainerProperties';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
 import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
+import { Text } from '../Text/Text';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
 import { Select } from '../Select/Select';
@@ -44,7 +45,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
     <div className='grid grid-cols-1 gap-y-4 items-center'>
       <TextInputGroup
         id={`${props.properties.id}-displayedText`}
-        labelText='Displayed text'
+        labelText={Text({ textId: '@ContainerDisplayedText' })}
         inputKey='displayedText'
         labelClassName=''
         inputClassName=''
@@ -54,7 +55,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
       <OrientationSelector
         id='orientation'
         name='Orientation'
-        labelText='Orientation'
+        labelText={Text({ textId: '@ContainerOrientation' })}
         value={props.properties.orientation}
         onChange={props.onChange}
       />
@@ -62,14 +63,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
       <Category
         category={{
           Type: 'Properties',
-          DisplayedText: 'Properties'
+          DisplayedText: Text({ textId: '@ContainerProperties' })
         }}
         heightClass={`${categoryHeight}`}
       >
         <div className='grid grid-cols-1 gap-y-6 items-center prop-category-body'>
           <div>
             <InputGroup
-              labelText='Name'
+              labelText={Text({ textId: '@ContainerName' })}
               inputKey='id'
               labelClassName=''
               inputClassName=''
@@ -79,7 +80,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           </div>
           <div>
             <InputGroup
-              labelText='Parent name'
+              labelText={Text({ textId: '@ContainerParentName' })}
               inputKey='parentId'
               labelClassName=''
               inputClassName=''
@@ -89,7 +90,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           </div>
           <div>
             <InputGroup
-              labelText='Type'
+              labelText={Text({ textId: '@ContainerType' })}
               inputKey='type'
               labelClassName=''
               inputClassName=''
@@ -102,7 +103,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
 
       <Category category={{
         Type: 'Position',
-        DisplayedText: 'Position'
+        DisplayedText: Text({ textId: '@ContainerPosition' })
       }}
       defaultIsOpen={true}
       heightClass={`${categoryHeight}`}
@@ -110,7 +111,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         <div className='grid grid-cols-3 gap-y-2 items-center prop-category-body'>
           <TextInputGroup
             id={`${props.properties.id}-x`}
-            labelText='x'
+            labelText={Text({ textId: '@ContainerX' })}
             inputKey='x'
             labelClassName=''
             inputClassName='col-span-2'
@@ -134,7 +135,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             )} />
           <TextInputGroup
             id={`${props.properties.id}-y`}
-            labelText='y'
+            labelText={Text({ textId: '@ContainerY' })}
             inputKey='y'
             labelClassName=''
             inputClassName='col-span-2'
@@ -158,16 +159,17 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         </div>
       </Category>
 
-      <Category category={{
+      <Category
+        category={{
           Type: 'Size',
-        DisplayedText: 'Size'
+          DisplayedText: Text({ textId: '@ContainerSize' })
         }}
         heightClass={`${categoryHeight}`}
       >
         <div className='grid grid-cols-5 gap-y-2 items-center prop-category-body'>
           <TextInputGroup
             id={`${props.properties.id}-minWidth`}
-            labelText='Minimum Width'
+            labelText={Text({ textId: '@ContainerMinWidth' })}
             inputKey='minWidth'
             labelClassName='col-span-2'
             inputClassName='col-span-3'
@@ -177,7 +179,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(value) => props.onChange('minWidth', Number(value))} />
           <TextInputGroup
             id={`${props.properties.id}-width`}
-            labelText='Width'
+            labelText={Text({ textId: '@ContainerWidth' })}
             inputKey='width'
             labelClassName='col-span-2'
             inputClassName='col-span-3'
@@ -189,7 +191,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             isDisabled={props.properties.isFlex} />
           <TextInputGroup
             id={`${props.properties.id}-maxWidth`}
-            labelText='Maximum Width'
+            labelText={Text({ textId: '@ContainerMaxWidth' })}
             inputKey='maxWidth'
             labelClassName='col-span-2'
             inputClassName='col-span-3'
@@ -200,7 +202,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           <div className='col-span-5 p-3'></div>
           <TextInputGroup
             id={`${props.properties.id}-minHeight`}
-            labelText='Minimum Height'
+            labelText={Text({ textId: '@ContainerMinHeight' })}
             inputKey='minHeight'
             labelClassName='col-span-2'
             inputClassName='col-span-3'
@@ -210,7 +212,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(value) => props.onChange('minHeight', Number(value))} />
           <TextInputGroup
             id={`${props.properties.id}-height`}
-            labelText='Height'
+            labelText={Text({ textId: '@ContainerHeight' })}
             inputKey='height'
             labelClassName='col-span-2'
             inputClassName='col-span-3'
@@ -223,7 +225,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           />
           <TextInputGroup
             id={`${props.properties.id}-maxHeight`}
-            labelText='Maximum Height'
+            labelText={Text({ textId: '@ContainerMaxHeight' })}
             inputKey='maxHeight'
             labelClassName='col-span-2'
             inputClassName='col-span-3'
@@ -236,14 +238,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
 
       <Category category={{
         Type: 'Margins',
-        DisplayedText: 'Margins'
+        DisplayedText: Text({ textId: '@ContainerMargins' })
       }}
       heightClass={`${categoryHeight}`}
       >
         <div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
           <TextInputGroup
             id={`${props.properties.id}-ml`}
-            labelText='Margin left'
+            labelText={Text({ textId: '@ContainerMarginLeft' })}
             inputKey='left'
             labelClassName=''
             inputClassName=''
@@ -253,7 +255,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
           <TextInputGroup
             id={`${props.properties.id}-mb`}
-            labelText='Margin bottom'
+            labelText={Text({ textId: '@ContainerMarginBottom' })}
             inputKey='bottom'
             labelClassName=''
             inputClassName=''
@@ -263,7 +265,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
           <TextInputGroup
             id={`${props.properties.id}-mt`}
-            labelText='Margin top'
+            labelText={Text({ textId: '@ContainerMarginTop' })}
             inputKey='top'
             labelClassName=''
             inputClassName=''
@@ -273,7 +275,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
           <TextInputGroup
             id={`${props.properties.id}-mr`}
-            labelText='Margin right'
+            labelText={Text({ textId: '@ContainerMarginRight' })}
             inputKey='right'
             labelClassName=''
             inputClassName=''
@@ -286,13 +288,13 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
 
       <Category category={{
         Type: 'Behaviors',
-        DisplayedText: 'Behaviors'
+        DisplayedText: Text({ textId: '@ContainerBehaviors' })
       }}
       heightClass={`${categoryHeight}`}
       >
         <div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
           <ToggleButton
-            labelText='Flex'
+            labelText={Text({ textId: '@ContainerFlex' })}
             inputKey='isFlex'
             labelClassName=''
             inputClassName='ml-auto mr-auto block'
@@ -301,7 +303,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(event) => props.onChange('isFlex', event.target.checked)}
           />
           <ToggleButton
-            labelText='Anchor'
+            labelText={Text({ textId: '@ContainerAnchor' })}
             inputKey='isAnchor'
             labelClassName=''
             inputClassName='ml-auto mr-auto block'
@@ -313,7 +315,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
 
       <Category category={{
         Type: 'Alignment',
-        DisplayedText: 'Alignment'
+        DisplayedText: Text({ textId: '@ContainerAlignment' })
       }}
       heightClass={`${categoryHeight}`}
       >
@@ -321,14 +323,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           <PositionReferenceSelector
             id='positionReference'
             name='PositionReference'
-            labelText='Alignment'
+            labelText={Text({ textId: '@ContainerAlignmentInput' })}
             value={props.properties.positionReference}
             onChange={props.onChange}
           />
           <div className='p-3'></div>
           <Select
             inputKey='linkedSymbolId'
-            labelText='Align with symbol'
+            labelText={Text({ textId: '@ContainerAlignWithSymbol' })}
             labelClassName=''
             inputClassName=''
             inputs={[...props.symbols.values()].map(symbol => ({
@@ -343,7 +345,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
 
       <Category category={{
         Type: 'Dimensions',
-        DisplayedText: 'Dimensions'
+        DisplayedText: Text({ textId: '@ContainerDimensions' })
       }}
       heightClass={`${categoryHeight}`}
       >
@@ -354,7 +356,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               <PositionCheckboxes
                 id='showSelfDimensions'
                 name='ShowSelfDimensions'
-                labelText='Show dimension'
+                labelText={Text({ textId: '@ContainerShowDimension' })}
                 value={props.properties.showSelfDimensions}
                 onChange={props.onChange}
               />
@@ -366,7 +368,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               <PositionCheckboxes
                 id='showChildrenDimensions'
                 name='ShowChildrenDimensions'
-                labelText='Show overall dimension of its children'
+                labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
                 value={props.properties.showChildrenDimensions}
                 onChange={props.onChange}
               />
@@ -380,7 +382,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                   id='markPosition'
                   name='MarkPosition'
                   value={props.properties.markPosition}
-                labelText='Mark the position'
+                  labelText={Text({ textId: '@ContainerMarkPosition' })}
                   onChange={props.onChange}
                 />
               </div>
@@ -388,7 +390,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 <PositionCheckboxes
                   id='showDimensionWithMarks'
                   name='ShowDimensionWithMarks'
-                labelText='Show dimension with marked children'
+                  labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
                   value={props.properties.showDimensionWithMarks}
                   onChange={props.onChange}
                 />
@@ -400,7 +402,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
 
       <Category category={{
         Type: 'Style',
-        DisplayedText: 'Style'
+        DisplayedText: Text({ textId: '@ContainerStyle' })
       }}
       heightClass={`${categoryHeight}`}
       >

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -15,6 +15,7 @@ import { GetCurrentHistoryState } from '../Editor';
 import { AddContainers } from './AddContainer';
 import { DeleteContainer } from './ContainerOperations';
 import { DeleteSymbol } from './SymbolOperations';
+import { Text } from '../../Text/Text';
 
 export function InitActions(
   menuActions: Map<string, IMenuAction[]>,
@@ -28,8 +29,8 @@ export function InitActions(
     '',
     [
       {
-        text: 'Undo',
+        text: Text({ textId: '@Undo' }),
-        title: 'Undo last action',
+        title: Text({ textId: '@UndoTitle' }),
         shortcut: '<kbd>Ctrl</kbd>+<kbd>Z</kbd>',
         action: () => {
           if (historyCurrentStep <= 0) {
@@ -39,8 +40,8 @@ export function InitActions(
         }
       },
       {
-        text: 'Redo',
+        text: Text({ textId: '@Redo' }),
-        title: 'Redo last action',
+        title: Text({ textId: '@RedoTitle' }),
         shortcut: '<kbd>Ctrl</kbd>+<kbd>Y</kbd>',
         action: () => {
           if (historyCurrentStep >= history.length - 1) {
@@ -55,8 +56,8 @@ export function InitActions(
   menuActions.set(
     'elements-sidebar-row',
     [{
-      text: 'Delete',
+      text: Text({ textId: '@DeleteContainer' }),
-      title: 'Delete the container',
+      title: Text({ textId: '@DeleteContainerTitle' }),
       shortcut: '<kbd>Suppr</kbd>',
       action: (target: HTMLElement) => {
         const id = target.id;
@@ -73,8 +74,8 @@ export function InitActions(
   menuActions.set(
     'symbols-sidebar-row',
     [{
-      text: 'Delete',
+      text: Text({ textId: '@DeleteSymbol' }),
-      title: 'Delete the container',
+      title: Text({ textId: '@DeleteSymbolTitle' }),
       shortcut: '<kbd>Suppr</kbd>',
       action: (target: HTMLElement) => {
         const id = target.id;

src/Components/ElementsList/ElementsList.tsx

@@ -135,7 +135,6 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
   }): JSX.Element {
     const { container, depth } = containers[index];
     const key = container.properties.id.toString();
-    const tabs = '|\t'.repeat(depth);
     const text = container.properties.displayedText === key
       ? `${key}`
       : `${container.properties.displayedText}`;
@@ -144,29 +143,19 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
       props.selectedContainer !== null &&
       props.selectedContainer.properties.id === container.properties.id;
 
-    const selectedClass: string = isSelected
-      ? 'border-l-4 bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
-      : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
-
     return (
-      <button type="button"
+      ElementsListRow(
-        className={`transition-all w-full border-blue-500 hover:shadow-lg elements-sidebar-row whitespace-pre
+        key,
-          text-left text-sm font-medium inline-flex ${container.properties.type} ${selectedClass}`}
+        container,
-        id={key}
+        depth,
-        key={key}
+        isSelected,
-        style={style}
+        style,
-        title={container.properties.warning}
+        text,
-        onClick={() => props.selectContainer(container.properties.id)}
+        props.containers,
-        onDrop={(event) => HandleOnDrop(event, props.containers, props.mainContainer, props.addContainer)}
+        props.mainContainer,
-        onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
+        props.addContainer,
-        onDragLeave={(event) => HandleDragLeave(event)}
+        props.selectContainer
-      >
+      )
-        {tabs}
-        {text}
-        {container.properties.warning.length > 0 &&
-          <ExclamationTriangleIcon className='w-8'/>
-        }
-      </button>
     );
   }
 
@@ -193,3 +182,52 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
     </div>
   );
 }
+
+function ElementsListRow(
+  key: string,
+  container: IContainerModel,
+  depth: number,
+  isSelected: boolean,
+  style: React.CSSProperties,
+  text: string,
+  containers: Map<string, IContainerModel>,
+  mainContainer: IContainerModel,
+  addContainer: (index: number, type: string, parent: string) => void,
+  selectContainer: (containerId: string) => void
+): JSX.Element {
+  const verticalBars: JSX.Element[] = [];
+  const verticalBarSelectedClass = isSelected
+    ? 'border-l-blue-400 group-hover:border-l-blue-300'
+    : 'border-l-slate-400 group-hover:border-l-slate-300';
+  for (let i = 0; i < depth; i++) {
+    verticalBars.push(
+      <span
+        className={`h-full border-l-2 pr-2 ${verticalBarSelectedClass}`}
+      ></span>
+    );
+  }
+
+  const buttonSelectedClass: string = isSelected
+    ? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
+    : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
+
+  return <button type="button"
+    className={`transition-all border-blue-500 hover:shadow-lg elements-sidebar-row whitespace-pre
+          text-left text-sm font-medium inline-flex group ${container.properties.type} ${buttonSelectedClass}`}
+    id={key}
+    key={key}
+    style={style}
+    title={container.properties.warning}
+    onClick={() => selectContainer(container.properties.id)}
+    onDrop={(event) => HandleOnDrop(event, containers, mainContainer, addContainer)}
+    onDragOver={(event) => HandleDragOver(event, mainContainer)}
+    onDragLeave={(event) => HandleDragLeave(event)}
+  >
+    {verticalBars}
+    <div className='pt-2 pb-2 inline-flex'>
+      {text}
+      {container.properties.warning.length > 0 &&
+        <ExclamationTriangleIcon className='pl-2 w-7' />}
+    </div>
+  </button>;
+}

src/Components/LanguageProvider/LanguageProvider.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { createContext, useState } from 'react';
+import { ILanguage } from '../../Interfaces/ILanguage';
+import { languageOptions, translations } from '../../Translations/Translations';
+import { DEFAULT_LANGUAGE } from '../../utils/default';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const LanguageContext = createContext<ILanguage>({
+  language: DEFAULT_LANGUAGE,
+  dictionary: translations.en
+});
+
+export function LanguageProvider({ children }: { children: React.ReactNode | React.ReactNode[] | undefined }): JSX.Element {
+  const [language, setLanguage] = useState(DEFAULT_LANGUAGE);
+  const provider = {
+    language,
+    dictionary: translations[language],
+    languageChange: (selected: string) => {
+      const newLanguage = languageOptions[selected] !== undefined ? selected : DEFAULT_LANGUAGE;
+      setLanguage(newLanguage);
+    }
+  };
+
+  return (
+    <LanguageContext.Provider
+      value={provider}
+    >
+      { children }
+    </LanguageContext.Provider>
+  );
+};

src/Components/MainMenu/MainMenu.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FAST_BOOT } from '../../utils/default';
 import { Loader } from '../Loader/Loader';
+import { Text } from '../Text/Text';
 
 interface IMainMenuProps {
   newEditor: () => void
@@ -82,8 +83,16 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
           <button type="button" className='mainmenu-btn' onClick={() => {
             setWindowState(WindowState.Loading);
             props.newEditor();
-          }}>Start from scratch</button>
+          }}>
-          <button type="button" className='mainmenu-btn' onClick={() => setWindowState(WindowState.Load)}>Load a configuration file</button>
+            {Text({ textId: '@StartFromScratch' })}
+          </button>
+          <button
+            type="button"
+            className='mainmenu-btn'
+            onClick={() => setWindowState(WindowState.Load)}
+          >
+            {Text({ textId: '@LoadConfigFile' })}
+          </button>
         </div>
       );
   }

src/Components/Messages/Messages.tsx

@@ -7,6 +7,7 @@ import { IMessage } from '../../Interfaces/IMessage';
 import { DISABLE_API } from '../../utils/default';
 import { GetCircularReplacer } from '../../utils/saveload';
 import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
+import { Text } from '../Text/Text';
 
 interface IMessagesProps {
   historyState: IHistoryState
@@ -49,8 +50,8 @@ export function Messages(props: IMessagesProps): JSX.Element {
         <button
           onClick={() => { props.clearMessage(); }}
           className='h-full hover:bg-slate-400 rounded-lg p-1'
-          aria-label='Clear all messages'
+          aria-label={Text({ textId: '@ClearAllMessages' })}
-          title='Clear all messages'
+          title={Text({ textId: '@ClearAllMessages' })}
         >
           <TrashIcon className='heroicon'></TrashIcon>
         </button>

src/Components/Settings/Settings.tsx

@@ -1,5 +1,6 @@
 import { ArrowUpOnSquareIcon, CameraIcon } from '@heroicons/react/24/outline';
 import React from 'react';
+import { Text } from '../Text/Text';
 
 interface ISettingsProps {
   saveEditorAsJSON: () => void
@@ -12,19 +13,19 @@ export function Settings(props: ISettingsProps): JSX.Element {
          m-2 md:text-xs font-bold'>
       <button type="button"
         className={'w-full transition-all flex sidebar-component'}
-        title='Export as JSON'
+        title={Text({ textId: '@ExportAsJSON' })}
         onClick={props.saveEditorAsJSON}
       >
         <ArrowUpOnSquareIcon className="heroicon w-16 h-7" />
-        Export as JSON
+        {Text({ textId: '@ExportAsJSON' })}
       </button>
       <button type="button"
         className={'w-full transition-all flex sidebar-component'}
-        title='Export as SVG'
+        title={Text({ textId: '@ExportAsSVG' })}
         onClick={props.saveEditorAsSVG}
       >
         <CameraIcon className="heroicon w-16 h-7" />
-        Export as SVG
+        {Text({ textId: '@ExportAsSVG' })}
       </button>
     </div>
   );

src/Components/SymbolProperties/SymbolForm.tsx

@@ -4,6 +4,7 @@ import { RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
 import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector';
+import { Text } from '../Text/Text';
 
 interface ISymbolFormProps {
   symbol: ISymbolModel
@@ -15,7 +16,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
   return (
     <div className='grid grid-cols-2 gap-y-4'>
       <InputGroup
-        labelText='Name'
+        labelText={Text({ textId: '@SymbolName' })}
         inputKey='id'
         labelClassName=''
         inputClassName=''
@@ -24,7 +25,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         isDisabled={true} />
       <TextInputGroup
         id='x'
-        labelText='x'
+        labelText={Text({ textId: '@SymbolX' })}
         inputKey='x'
         labelClassName=''
         inputClassName=''
@@ -33,7 +34,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
       <TextInputGroup
         id='height'
-        labelText='Height'
+        labelText={Text({ textId: '@SymbolHeight' })}
         inputKey='height'
         labelClassName=''
         inputClassName=''
@@ -43,7 +44,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         onChange={(value) => props.onChange('height', Number(value))} />
       <TextInputGroup
         id='width'
-        labelText='Width'
+        labelText={Text({ textId: '@SymbolWidth' })}
         inputKey='width'
         labelClassName=''
         inputClassName=''

src/Components/Text/Text.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { LanguageContext } from '../LanguageProvider/LanguageProvider';
+
+interface TextProps {
+  textId: string
+};
+
+export function Text({ textId }: TextProps): string {
+  const languageContext = useContext(LanguageContext);
+  return languageContext.dictionary[textId] ?? textId;
+};

src/Components/UI/UI.tsx

@@ -16,6 +16,7 @@ import { UseWorker, UseAsync } from './UseWorker';
 import { FindContainerById } from '../../utils/itertools';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { GetCurrentHistoryState } from '../Editor/Editor';
+import { Text } from '../Text/Text';
 
 export interface IUIProps {
   editorState: IEditorState
@@ -95,14 +96,14 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
 
   switch (selectedSidebar) {
     case SidebarType.Components:
-      leftSidebarTitle = 'Components';
+      leftSidebarTitle = Text({ textId: '@Components' });
       leftChildren = <Components
         selectedContainer={selectedContainer}
         componentOptions={configuration.AvailableContainers}
         categories={configuration.Categories}
         buttonOnClick={methods.addContainer}
       />;
-      rightSidebarTitle = 'Elements';
+      rightSidebarTitle = Text({ textId: '@Elements' });
       rightChildren = <ElementsList
         containers={current.containers}
         mainContainer={mainContainer}
@@ -115,12 +116,12 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.Symbols:
-      leftSidebarTitle = 'Symbols';
+      leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
       leftChildren = <Symbols
         componentOptions={configuration.AvailableSymbols}
         buttonOnClick={methods.addSymbol}
       />;
-      rightSidebarTitle = 'Symbols';
+      rightSidebarTitle = Text({ textId: '@SymbolsRight' });
       rightChildren = <SymbolsSidebar
         selectedSymbolId={current.selectedSymbolId}
         symbols={current.symbols}
@@ -130,7 +131,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.History:
-      leftSidebarTitle = 'Timeline';
+      leftSidebarTitle = Text({ textId: '@Timeline' });
       leftChildren = <History
         history={editorState.history}
         historyCurrentStep={editorState.historyCurrentStep}
@@ -139,7 +140,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.Messages:
-      leftSidebarTitle = 'Messages';
+      leftSidebarTitle = Text({ textId: '@Messages' });
       leftChildren = <Messages
         historyState={current}
         messages={messages}
@@ -148,7 +149,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
       break;
 
     case SidebarType.Settings:
-      leftSidebarTitle = 'Settings';
+      leftSidebarTitle = Text({ textId: '@Settings' });
       leftChildren = <Settings
         saveEditorAsJSON={methods.saveEditorAsJSON}
         saveEditorAsSVG={methods.saveEditorAsSVG}

src/Events/AppEvents.ts

@@ -2,17 +2,22 @@ import { useEffect } from 'react';
 import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
+import { ILanguage } from '../Interfaces/ILanguage';
+import { languageOptions, translations } from '../Translations/Translations';
 import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default';
 import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload';
 
+interface IAppEventParams {
+  root: Element | Document
+  languageContext: ILanguage
+  setEditor: (newState: IEditorState) => void
+  setLoaded: (loaded: boolean) => void
+  eventInitDict?: CustomEventInit
+}
+
 export interface IAppEvent {
   name: string
-  func: (
+  func: (params: IAppEventParams) => void
-    root: Element | Document,
-    setEditor: (newState: IEditorState) => void,
-    setLoaded: (loaded: boolean) => void,
-    eventInitDict?: CustomEventInit
-  ) => void
 }
 
 export const events: IAppEvent[] = [
@@ -20,12 +25,16 @@ export const events: IAppEvent[] = [
   { name: 'setLoaded', func: SetLoaded },
   { name: 'reviveEditorState', func: ReviveEditorState },
   { name: 'reviveHistory', func: ReviveHistory },
-  { name: 'getDefaultEditorState', func: GetDefaultEditorState }
+  { name: 'getDefaultEditorState', func: GetDefaultEditorState },
+  { name: 'addLanguage', func: AddLanguage },
+  { name: 'setLanguage', func: SetLanguage },
+  { name: 'getLanguages', func: GetLanguages }
 ];
 
 export function UseCustomEvents(
   root: Element | Document,
   appRef: React.RefObject<HTMLDivElement>,
+  languageContext: ILanguage,
   setEditor: (newState: IEditorState) => void,
   setLoaded: (loaded: boolean) => void
 ): void {
@@ -33,12 +42,13 @@ export function UseCustomEvents(
     const funcs = new Map<string, () => void>();
     for (const event of events) {
       function Func(eventInitDict?: CustomEventInit): void {
-        return event.func(
+        return event.func({
           root,
+          languageContext,
           setEditor,
           setLoaded,
           eventInitDict
-        );
+        });
       }
       appRef.current?.addEventListener(event.name, Func);
       funcs.set(event.name, Func);
@@ -55,57 +65,85 @@ export function UseCustomEvents(
   });
 }
 
-function SetEditor(
+function SetEditor({
-  root: Element | Document,
+  root,
-  setEditor: (newState: IEditorState) => void,
+  setEditor,
-  setLoaded: (loaded: boolean) => void,
+  eventInitDict
-  eventInitDict?: CustomEventInit
+}: IAppEventParams): void {
-): void {
   const editor: IEditorState = eventInitDict?.detail;
   setEditor(editor);
   const customEvent = new CustomEvent<IEditorState>('setEditor', { detail: editor });
   root.dispatchEvent(customEvent);
 }
 
-function SetLoaded(
+function SetLoaded({
-  root: Element | Document,
+  setLoaded,
-  setEditor: (newState: IEditorState) => void,
+  eventInitDict
-  setLoaded: (loaded: boolean) => void,
+}: IAppEventParams): void {
-  eventInitDict?: CustomEventInit
-): void {
   const isLoaded: boolean = eventInitDict?.detail;
   setLoaded(isLoaded);
 }
 
-function ReviveEditorState(
+function ReviveEditorState({
-  root: Element | Document,
+  root,
-  setEditor: (newState: IEditorState) => void,
+  eventInitDict
-  setLoaded: (loaded: boolean) => void,
+}: IAppEventParams): void {
-  eventInitDict?: CustomEventInit): void {
   const anEditorState: IEditorState = eventInitDict?.detail;
   Revive(anEditorState);
   const customEvent = new CustomEvent<IEditorState>('reviveEditorState', { detail: anEditorState });
   root.dispatchEvent(customEvent);
 }
 
-function ReviveHistory(
+function ReviveHistory({
-  root: Element | Document,
+  root,
-  setEditor: (newState: IEditorState) => void,
+  eventInitDict
-  setLoaded: (loaded: boolean) => void,
+}: IAppEventParams): void {
-  eventInitDict?: CustomEventInit): void {
   const history: IHistoryState[] = eventInitDict?.detail;
   ReviveHistoryAction(history);
   const customEvent = new CustomEvent<IHistoryState[]>('reviveHistory', { detail: history });
   root.dispatchEvent(customEvent);
 }
 
-function GetDefaultEditorState(
+function GetDefaultEditorState({
-  root: Element | Document,
+  root,
-  setEditor: (newState: IEditorState) => void,
+  eventInitDict
-  setLoaded: (loaded: boolean) => void,
+}: IAppEventParams): void {
-  eventInitDict?: CustomEventInit): void {
   const configuration: IConfiguration = eventInitDict?.detail;
   const editorState = GetDefaultEditorStateAction(configuration);
   const customEvent = new CustomEvent<IEditorState>('getDefaultEditorState', { detail: editorState });
   root.dispatchEvent(customEvent);
 }
+
+function AddLanguage({
+  root,
+  eventInitDict
+}: IAppEventParams): void {
+  const language: ILanguage = eventInitDict?.detail.language;
+  const option: string = eventInitDict?.detail.option;
+  languageOptions[language.language] = option;
+  translations[language.language] = language.dictionary;
+  const customEvent = new CustomEvent('addLanguage');
+  root.dispatchEvent(customEvent);
+}
+
+function SetLanguage({
+  root,
+  languageContext,
+  eventInitDict
+}: IAppEventParams): void {
+  const language: string = eventInitDict?.detail;
+  let success = false;
+  if (languageContext.languageChange !== undefined) {
+    languageContext.languageChange(language);
+    success = true;
+  }
+  const customEvent = new CustomEvent<boolean>('setLanguage', { detail: success });
+  root.dispatchEvent(customEvent);
+}
+
+function GetLanguages({
+  root
+}: IAppEventParams): void {
+  const customEvent = new CustomEvent<Record<string, Record<string, string>>>('getLanguages', { detail: translations });
+  root.dispatchEvent(customEvent);
+}

src/Events/EditorEvents.ts

@@ -9,6 +9,7 @@ import { IHistoryState } from '../Interfaces/IHistoryState';
 import { FindContainerById } from '../utils/itertools';
 import { GetCircularReplacer } from '../utils/saveload';
 
+// TODO: set the params of func in an interface
 export interface IEditorEvent {
   name: string
   func: (

src/Interfaces/ILanguage.ts

@@ -0,0 +1,5 @@
+export interface ILanguage {
+  language: string
+  dictionary: Record<string, string>
+  languageChange?: (selected: string) => void
+}

src/Translations/Translations.ts

@@ -0,0 +1,14 @@
+import en from './translation.en.json';
+import fr from './translation.fr.json';
+
+export const translations: Record<string, Record<string, string>> = {
+  en,
+  fr
+};
+
+// Use languageOptions to restrict existing dictionary
+// and create a select input
+export const languageOptions: Record<string, string> = {
+  en: 'English',
+  fr: 'French'
+};

src/Translations/translation.en.json

@@ -0,0 +1,70 @@
+{
+  "@StartFromScratch": "Start from scratch",
+  "@LoadConfigFile": "Load a configuration file",
+  "@GoBack": "Go back",
+
+  "@Components": "Components",
+  "@Elements": "Elements",
+  "@Symbols": "Symbols",
+  "@SymbolsLeft": "Symbols",
+  "@SymbolsRight": "Symbols",
+  "@Timeline": "Timeline",
+  "@Messages": "Messages",
+  "@Settings": "Settings",
+
+  "@Undo": "Undo",
+  "@UndoTitle": "Undo last action",
+  "@Redo": "Redo",
+  "@RedoTitle": "Redo last action",
+  "@DeleteContainer": "Delete",
+  "@DeleteContainerTitle": "Delete the container",
+  "@DeleteSymbol": "Delete",
+  "@DeleteSymbolTitle": "Delete the container",
+
+  "@ExportAsJSON": "Export as JSON",
+  "@ExportAsSVG": "Export as SVG",
+  
+  "@HideDisabledComponents": "Hide disabled components",
+  "@ShowDisabledComponents": "Show disabled components",
+
+  "@ClearAllMessages": "Clear all messages",
+
+  "@ContainerDisplayedText": "Displayed text",
+  "@ContainerOrientation": "Orientation",
+  "@ContainerProperties": "Properties",
+  "@ContainerName": "Name",
+  "@ContainerParentName": "Parent name",
+  "@ContainerType": "Type",
+  "@ContainerPosition": "Position",
+  "@ContainerX": "x",
+  "@ContainerY": "y",
+  "@ContainerSize": "Size",
+  "@ContainerMinWidth": "Minimum Width",
+  "@ContainerWidth": "Width",
+  "@ContainerMaxWidth": "Maximum Width",
+  "@ContainerMinHeight": "Minimum Height",
+  "@ContainerHeight": "Height",
+  "@ContainerMaxHeight": "Maximum Height",
+  "@ContainerMargins": "Margins",
+  "@ContainerMarginLeft": "Margin Left",
+  "@ContainerMarginBottom": "Margin Bottom",
+  "@ContainerMarginTop": "Margin Top",
+  "@ContainerMarginRight": "Margin Right",
+  "@ContainerBehaviors": "Behaviors",
+  "@ContainerFlex": "Flex",
+  "@ContainerAnchor": "Lock position and size",
+  "@ContainerAlignment": "Alignment",
+  "@ContainerAlignmentInput": "Alignment",
+  "@ContainerAlignWithSymbol": "Align to symbol",
+  "@ContainerDimensions": "Dimensions",
+  "@ContainerShowDimension": "Show Dimension",
+  "@ContainerShowChildrenDimension": "Show surrounding dimension of children",
+  "@ContainerMarkPosition": "Mark the position for the parents",
+  "@ContainerShowDimensionWithMarks": "Show dimension with marked children",
+  "@ContainerStyle": "Style",
+
+  "@SymbolName": "Name",
+  "@SymbolX": "x",
+  "@SymbolHeight": "Height",
+  "@SymbolWidth": "Width"
+}

src/Translations/translation.fr.json

@@ -0,0 +1,70 @@
+{
+  "@StartFromScratch": "Partir de zéro",
+  "@LoadConfigFile": "Charger un fichier de configuration",
+  "@GoBack": "Revenir",
+
+  "@Components": "Composants",
+  "@Elements": "Éléments",
+  "@Symbols": "Symboles",
+  "@SymbolsLeft": "Symboles",
+  "@SymbolsRight": "Symboles",
+  "@Timeline": "Chronologie",
+  "@Messages": "Messages",
+  "@Settings": "Paramètres",
+
+  "@Undo": "Annuler",
+  "@UndoTitle": "Annuler la dernière action",
+  "@Redo": "Refaire",
+  "@RedoTitle": "Refaire la dernière action",
+  "@DeleteContainer": "Supprimer",
+  "@DeleteContainerTitle": "Supprimer le conteneur",
+  "@DeleteSymbol": "Supprimer",
+  "@DeleteSymbolTitle": "Supprimer le symbole",
+
+  "@ExportAsJSON": "Exporter en JSON",
+  "@ExportAsSVG": "Exporter en SVG",
+  
+  "@HideDisabledComponents": "Cacher les composants désactivés",
+  "@ShowDisabledComponents": "Montrer les composants activés",
+
+  "@ClearAllMessages": "Effacer tous les messages",
+
+  "@ContainerDisplayedText": "Texte affiché",
+  "@ContainerOrientation": "Orientation",
+  "@ContainerProperties": "Propriétés",
+  "@ContainerName": "Nom",
+  "@ContainerParentName": "Nom du parent",
+  "@ContainerType": "Type",
+  "@ContainerPosition": "Position",
+  "@ContainerX": "x",
+  "@ContainerY": "y",
+  "@ContainerSize": "Taille",
+  "@ContainerMinWidth": "Largeur minimale",
+  "@ContainerWidth": "Largeur",
+  "@ContainerMaxWidth": "Largeur maximale",
+  "@ContainerMinHeight": "Hauteur minimale",
+  "@ContainerHeight": "Hauteur",
+  "@ContainerMaxHeight": "Hauteur maximale",
+  "@ContainerMargins": "Marges",
+  "@ContainerMarginLeft": "Marge gauche",
+  "@ContainerMarginBottom": "Marge inférieure",
+  "@ContainerMarginTop": "Marge supérieure",
+  "@ContainerMarginRight": "Marge droite",
+  "@ContainerBehaviors": "Comportements",
+  "@ContainerFlex": "Flexible",
+  "@ContainerAnchor": "Verrouiller la position et la taille",
+  "@ContainerAlignment": "Alignement",
+  "@ContainerAlignmentInput": "Alignement",
+  "@ContainerAlignWithSymbol": "Aligner au symbole",
+  "@ContainerDimensions": "Cotations",
+  "@ContainerShowDimension": "Afficher les cotations",
+  "@ContainerShowChildrenDimension": "Afficher les cotations englobante des enfants",
+  "@ContainerMarkPosition": "Marquer la position pour les parents",
+  "@ContainerShowDimensionWithMarks": "Afficher les cotations avec les enfants marqués",
+  "@ContainerStyle": "Style",
+
+  "@SymbolName": "Nom",
+  "@SymbolX": "x",
+  "@SymbolHeight": "Hauteur",
+  "@SymbolWidth": "Largeur"
+}

src/dts/svgld.d.ts

@@ -88,6 +88,7 @@ export interface IAPIConfiguration {
 
 
 
+
 /** Model of available container used in application configuration */
 export interface IAvailableContainer {
     /** type */
@@ -212,7 +213,7 @@ export interface IAvailableContainer {
      * (optional)
      * User data that can be used for data storage or custom SVG
      */
-    UserData?: object;
+    UserData?: IKeyValue[];
 }
 
 
@@ -250,7 +251,6 @@ export interface IConfiguration {
 
 export interface IContainerModel {
     children: string[];
-    parent: IContainerModel | null;
     properties: IContainerProperties;
     userData: Record<string, string | number>;
 }
@@ -260,10 +260,9 @@ export interface IContainerModel {
  */
 export class ContainerModel implements IContainerModel {
     children: string[];
-    parent: IContainerModel | null;
     properties: IContainerProperties;
     userData: Record<string, string | number>;
-    constructor(parent: IContainerModel | null, properties: IContainerProperties, children?: string[], userData?: {});
+    constructor(properties: IContainerProperties, children?: string[], userData?: {});
 }
 
 
@@ -271,6 +270,7 @@ export class ContainerModel implements IContainerModel {
 
 
 
+
 /**
  * Properties of a container
  */
@@ -363,7 +363,7 @@ export interface IContainerProperties {
      * (optional)
      * User data that can be used for data storage or custom SVG
      */
-    userData?: object;
+    userData?: IKeyValue[];
 }
 
 
@@ -428,6 +428,17 @@ export interface IInputGroup {
     value: string;
 }
 
+export interface IKeyValue {
+    Key: string;
+    Value: string;
+}
+
+export interface ILanguage {
+    language: string;
+    dictionary: Record<string, string>;
+    languageChange?: (selected: string) => void;
+}
+
 export interface IMargin {
     left?: number;
     bottom?: number;

src/index.scss

@@ -49,7 +49,7 @@
   }
 
   .elements-sidebar-row {
-    @apply pl-6 pr-6 pt-2 pb-2 w-full
+    @apply pl-6 pr-6 w-full
   }
   .symbols-sidebar-row {
     @apply elements-sidebar-row

src/main.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './Components/App/App';
+import { LanguageProvider } from './Components/LanguageProvider/LanguageProvider';
 import './index.scss';
 
 function RenderRoot(root: Element | Document): void {
   ReactDOM.createRoot(root.querySelector('#root') as HTMLDivElement).render(
     <React.StrictMode>
+      <LanguageProvider>
         <App root={root}/>
+      </LanguageProvider>
     </React.StrictMode>
   );
 }

src/utils/default.ts

@@ -17,6 +17,8 @@ export const FAST_BOOT = true;
 /** Disable any call to the API (default = false) */
 export const DISABLE_API = false;
 
+export const DEFAULT_LANGUAGE = 'fr';
+
 /**
  * Replace the SVG viewer by a canvas
  * Better compatibility with Gecko and WebKit engines like Firefox and Safari.