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;