From cd620e2c1f95e1cc011765b47609932eb27b9c77 Mon Sep 17 00:00:00 2001 From: Guillaume Tauzin Date: Tue, 18 Oct 2022 14:13:47 +0200 Subject: [PATCH 01/12] Change UserData in IKeyValue[] --- csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs | 3 ++- src/Components/API/api.test.tsx | 6 +----- src/Interfaces/IAvailableContainer.ts | 3 ++- src/Interfaces/IContainerProperties.ts | 3 ++- src/Interfaces/IKeyValue.ts | 5 +++++ 5 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 src/Interfaces/IKeyValue.ts diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs index e973393..27bd9ab 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs +++ b/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs @@ -1,4 +1,5 @@ using System.Runtime.Serialization; +using System.Collections.Generic; namespace SVGLDLibs.Models { @@ -149,6 +150,6 @@ namespace SVGLDLibs.Models * User data that can be used for data storage or custom SVG */ [DataMember(EmitDefaultValue = false)] - public object userData; + public Dictionary userData; } } \ No newline at end of file diff --git a/src/Components/API/api.test.tsx b/src/Components/API/api.test.tsx index cf8ae3f..f8d01e5 100644 --- a/src/Components/API/api.test.tsx +++ b/src/Components/API/api.test.tsx @@ -192,11 +192,7 @@ describe.concurrent('Models test suite', () => { ], CustomSVG: 'string', Style: {}, - UserData: { - additionalProp1: 'string', - additionalProp2: 'string', - additionalProp3: 'string' - } + UserData: [] }; it('AvailableContainerModel', async() => { diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts index c973d41..a4067e3 100644 --- a/src/Interfaces/IAvailableContainer.ts +++ b/src/Interfaces/IAvailableContainer.ts @@ -6,6 +6,7 @@ import { IAction } from './IAction'; import { IMargin } from './IMargin'; import { Orientation } from '../Enums/Orientation'; import { Position } from '../Enums/Position'; +import { IKeyValue } from './IKeyValue'; /** Model of available container used in application configuration */ export interface IAvailableContainer { @@ -161,5 +162,5 @@ export interface IAvailableContainer { * (optional) * User data that can be used for data storage or custom SVG */ - UserData?: object + UserData?: IKeyValue[] } diff --git a/src/Interfaces/IContainerProperties.ts b/src/Interfaces/IContainerProperties.ts index 11ae73f..35b1db7 100644 --- a/src/Interfaces/IContainerProperties.ts +++ b/src/Interfaces/IContainerProperties.ts @@ -3,6 +3,7 @@ import { PositionReference } from '../Enums/PositionReference'; import { IMargin } from './IMargin'; import { Orientation } from '../Enums/Orientation'; import { Position } from '../Enums/Position'; +import { IKeyValue } from './IKeyValue'; /** * Properties of a container @@ -122,5 +123,5 @@ export interface IContainerProperties { * (optional) * User data that can be used for data storage or custom SVG */ - userData?: object + userData?: IKeyValue[] } diff --git a/src/Interfaces/IKeyValue.ts b/src/Interfaces/IKeyValue.ts new file mode 100644 index 0000000..06a7b0c --- /dev/null +++ b/src/Interfaces/IKeyValue.ts @@ -0,0 +1,5 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +export interface IKeyValue { + Key: string + Value: string +} From afffaa05958c470b74784ac617459d6ee703ab3b Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 19 Oct 2022 10:09:09 +0200 Subject: [PATCH 02/12] Fix Symbols serialization like the containers --- src/utils/saveload.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/utils/saveload.ts b/src/utils/saveload.ts index ad9a4f3..43a6ec0 100644 --- a/src/utils/saveload.ts +++ b/src/utils/saveload.ts @@ -2,6 +2,7 @@ import { IEditorState } from '../Interfaces/IEditorState'; import { IHistoryState } from '../Interfaces/IHistoryState'; import { IContainerModel } from '../Interfaces/IContainerModel'; +import { ISymbolModel } from '../Interfaces/ISymbolModel'; /** * Revive the Editor state @@ -29,13 +30,14 @@ export function ReviveState(state: IHistoryState): void { return; } - state.symbols = new Map(state.symbols); + const symbols: Array<{ Key: string, Value: ISymbolModel }> = (state.symbols) as any; + state.symbols = new Map(symbols.map(({ Key, Value }) => [Key, Value])); for (const symbol of state.symbols.values()) { symbol.linkedContainers = new Set(symbol.linkedContainers); } const containers: Array<{ Key: string, Value: IContainerModel }> = (state.containers) as any; - state.containers = new Map(containers.map(({ Key, Value }: {Key: string, Value: IContainerModel}) => [Key, Value])); + state.containers = new Map(containers.map(({ Key, Value }) => [Key, Value])); } export function GetCircularReplacer(): (key: any, value: object | Map | null) => object | null | undefined { From 60ff7f412ad5f15945cf6ff102546497dc274fb6 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 19 Oct 2022 14:08:15 +0200 Subject: [PATCH 03/12] Fix SortChildren in SetContainer --- src/Components/Editor/Actions/ContainerOperations.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index 3e8525e..f264f5a 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/src/Components/Editor/Actions/ContainerOperations.ts @@ -289,17 +289,17 @@ function SetContainer( symbols ); - // sort the children list by their position - const parent = FindContainerById(containers, container.properties.parentId); - if (parent !== null && parent !== undefined) { - SortChildren(containers, parent); - } - // Apply special behaviors: rigid, flex, symbol, anchor ApplyBehaviors(containers, container, symbols); // Apply special behaviors on siblings ApplyBehaviorsOnSiblingsChildren(containers, container, symbols); + + // sort the children list by their position + const parent = FindContainerById(containers, container.properties.parentId); + if (parent !== null && parent !== undefined) { + SortChildren(containers, parent); + } } /** From f5a55c03237347d00c2920107399f363dcb36baf Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 19 Oct 2022 14:26:14 +0200 Subject: [PATCH 04/12] Fix Configuration test and remove UserData test --- .../SVGLDWebAPI/Controllers/SVGLDController.cs | 2 +- src/Components/API/api.test.tsx | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/csharp/SVGLDLibs/SVGLDWebAPI/Controllers/SVGLDController.cs b/csharp/SVGLDLibs/SVGLDWebAPI/Controllers/SVGLDController.cs index a1c936f..e6031aa 100644 --- a/csharp/SVGLDLibs/SVGLDWebAPI/Controllers/SVGLDController.cs +++ b/csharp/SVGLDLibs/SVGLDWebAPI/Controllers/SVGLDController.cs @@ -45,7 +45,7 @@ public class SVGLDController : ControllerBase } [HttpPost(Name = nameof(SVGLDLibs.Models.Configuration))] - public bool ConfigurationResponseModel(Configuration model) + public bool Configuration(Configuration model) { return true; } diff --git a/src/Components/API/api.test.tsx b/src/Components/API/api.test.tsx index 69116aa..ca8ff72 100644 --- a/src/Components/API/api.test.tsx +++ b/src/Components/API/api.test.tsx @@ -190,8 +190,7 @@ describe.concurrent('Models test suite', () => { } ], CustomSVG: 'string', - Style: {}, - UserData: [] + Style: {} }; it('AvailableContainerModel', async() => { @@ -234,7 +233,7 @@ describe.concurrent('Models test suite', () => { wrapper: 'string' }; - it('ConfigurationResponseModel', async() => { + it('Configuration', async() => { const model: IConfiguration = { AvailableContainers: [ availableContainerModel @@ -246,10 +245,15 @@ describe.concurrent('Models test suite', () => { category ], MainContainer: availableContainerModel, - Patterns: [pattern] + Patterns: [pattern], + APIConfiguration: { + apiFetchUrl: '', + apiGetFeedbackUrl: '', + apiSetContainerListUrl: '' + } }; - const res = await Post2API('ConfigurationResponseModel', JSON.stringify(model)); + const res = await Post2API('Configuration', JSON.stringify(model)); expect(res).toBe(true); }); From 386febce8467e0e96b43fc7449759bf75f3f4183 Mon Sep 17 00:00:00 2001 From: Guillaume Tauzin Date: Thu, 20 Oct 2022 17:29:56 +0200 Subject: [PATCH 05/12] Fix PointModel and SymbolModel --- csharp/SVGLDLibs/SVGLDLibs/Models/PointModel.cs | 4 ++-- .../SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs | 17 ++++++++++++----- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/PointModel.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/PointModel.cs index 26b63a8..4291204 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/PointModel.cs +++ b/csharp/SVGLDLibs/SVGLDLibs/Models/PointModel.cs @@ -6,8 +6,8 @@ namespace SVGLDLibs.Models public class PointModel { [DataMember(EmitDefaultValue = false)] - public string X { get; set; } + public double x { get; set; } [DataMember(EmitDefaultValue = false)] - public string Y { get; set; } + public double y { get; set; } } } \ No newline at end of file diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs index 7cbce20..97e7615 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs +++ b/csharp/SVGLDLibs/SVGLDLibs/Models/SymbolModel.cs @@ -1,17 +1,24 @@ using System.Runtime.Serialization; +using System.Collections.Generic; namespace SVGLDLibs.Models { [DataContract] - public class SymbolModel : AvailableSymbolModel + public class SymbolModel { [DataMember(EmitDefaultValue = false)] - public string Id { get; set; } + public string id { get; set; } [DataMember(EmitDefaultValue = false)] - public PointModel Point { get; set; } + public string type { get; set; } [DataMember(EmitDefaultValue = false)] - public bool IsLinkedToContainer { get; set; } + public AvailableSymbolModel config { get; set; } [DataMember(EmitDefaultValue = false)] - public string LinkedContainerId { get; set; } + public double x { get; set; } + [DataMember(EmitDefaultValue = false)] + public double width { get; set; } + [DataMember(EmitDefaultValue = false)] + public double height { get; set; } + [DataMember(EmitDefaultValue = false)] + public List linkedContainers { get; set; } } } \ No newline at end of file From 3684a34d3b7dfde0c714c930836aa89386f31346 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 2 Nov 2022 12:23:45 +0100 Subject: [PATCH 06/12] Fix depth dimension bottom position --- src/Components/SVG/Elements/DepthDimensionLayer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/SVG/Elements/DepthDimensionLayer.tsx b/src/Components/SVG/Elements/DepthDimensionLayer.tsx index 15bd78e..ec93d9c 100644 --- a/src/Components/SVG/Elements/DepthDimensionLayer.tsx +++ b/src/Components/SVG/Elements/DepthDimensionLayer.tsx @@ -74,7 +74,7 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY: const id = `dim-depth-${currentDepth}`; const xStart = min; const xEnd = max; - const y = (lastY + (DIMENSION_MARGIN * (currentDepth + 1))) / scale; + const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)) / scale; const strokeWidth = 1; const width = xEnd - xStart; const text = width From 4827f1e9efa8bce55337f9406f77f6aa60bab315 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 2 Nov 2022 12:49:44 +0100 Subject: [PATCH 07/12] Add pptx to lfs --- .gitattributes | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitattributes b/.gitattributes index 7118888..54d6a95 100644 --- a/.gitattributes +++ b/.gitattributes @@ -2,3 +2,4 @@ *.pdf filter=lfs diff=lfs merge=lfs -text *.dwg filter=lfs diff=lfs merge=lfs -text *.jpg filter=lfs diff=lfs merge=lfs -text +*.pptx filter=lfs diff=lfs merge=lfs -text From 5f29d1febcde644f3bc653d25d2d7cfa828d5d62 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 2 Nov 2022 12:49:57 +0100 Subject: [PATCH 08/12] Add SVGLD_Cotes.pptx to lfs --- docs/#Project/Pages/SVGLD_Cotes.pptx | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 docs/#Project/Pages/SVGLD_Cotes.pptx diff --git a/docs/#Project/Pages/SVGLD_Cotes.pptx b/docs/#Project/Pages/SVGLD_Cotes.pptx new file mode 100644 index 0000000..14fbfc5 --- /dev/null +++ b/docs/#Project/Pages/SVGLD_Cotes.pptx @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c800e17f3aad51dca4638b4a5474a70fbf7644d32bb7b1d37e88518ad5dc3a2b +size 539089 From 27f2e950c7eeea90c04ceff0b9a9a4baa43221ef Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 2 Nov 2022 12:56:57 +0100 Subject: [PATCH 09/12] Add SVGLD_Cotes as PDF --- docs/#Project/Pages/SVGLD_Cotes.pdf | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 docs/#Project/Pages/SVGLD_Cotes.pdf diff --git a/docs/#Project/Pages/SVGLD_Cotes.pdf b/docs/#Project/Pages/SVGLD_Cotes.pdf new file mode 100644 index 0000000..938f9d6 --- /dev/null +++ b/docs/#Project/Pages/SVGLD_Cotes.pdf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9200f873dc30971dd9f6f88fc4a5c2b0b716d31ba80470d930fef17863866c8b +size 309145 From a455971a57868455665434dbe6c5b19a2daded22 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 2 Nov 2022 16:48:53 +0100 Subject: [PATCH 10/12] Disable flex by default --- src/utils/default.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils/default.ts b/src/utils/default.ts index 0eba5db..97870a4 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -234,8 +234,6 @@ export function GetDefaultContainerProps(type: string, height: number, containerConfig: IAvailableContainer): IContainerProperties { const orientation = containerConfig.Orientation ?? Orientation.Horizontal; - const defaultIsFlex = (orientation === Orientation.Vertical && containerConfig.Height === undefined) || - (orientation === Orientation.Horizontal && containerConfig.Width === undefined); return ({ id: `${type}-${typeCount}`, type, @@ -249,7 +247,7 @@ export function GetDefaultContainerProps(type: string, width, height, isAnchor: containerConfig.IsAnchor ?? false, - isFlex: containerConfig.IsFlex ?? defaultIsFlex, + isFlex: containerConfig.IsFlex ?? false, positionReference: containerConfig.PositionReference ?? PositionReference.TopLeft, minWidth: containerConfig.MinWidth ?? 1, maxWidth: containerConfig.MaxWidth ?? Number.MAX_SAFE_INTEGER, From 60a3ead6aa5594f002bc77f0340b0e90237274a8 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 3 Nov 2022 10:04:41 +0100 Subject: [PATCH 11/12] Fix BuildPatterns not iterating from beginning to the end --- src/Components/Editor/Actions/AddContainer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Editor/Actions/AddContainer.ts b/src/Components/Editor/Actions/AddContainer.ts index 06100ea..89778ab 100644 --- a/src/Components/Editor/Actions/AddContainer.ts +++ b/src/Components/Editor/Actions/AddContainer.ts @@ -353,7 +353,7 @@ function BuildPatterns( continue; } - for (let i = newParent.pattern.children.length - 1; i >= 0; i--) { + for (let i = 0; i <= newParent.pattern.children.length - 1; i++) { const nextNode = GetNextNode(newParent.parent, newParent.pattern, i, configs, patterns); if (nextNode === undefined) { From 505813d53008cbe5f778f855071cb0dfa1ae534f Mon Sep 17 00:00:00 2001 From: Eric Nguyen Date: Fri, 4 Nov 2022 10:58:06 +0000 Subject: [PATCH 12/12] 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 --- docs/#Project/Pages/Translations.drawio | 3 + public/smartcomponent/svg-layout-designer.ts | 38 ++++++ public/svgld.d.ts | 21 +++- src/Components/App/App.tsx | 5 +- src/Components/Bar/Bar.tsx | 11 +- src/Components/Components/Components.tsx | 3 +- .../ContainerProperties/ContainerForm.tsx | 112 +++++++++--------- .../Editor/Actions/ContextMenuActions.ts | 17 +-- src/Components/ElementsList/ElementsList.tsx | 84 +++++++++---- .../LanguageProvider/LanguageProvider.tsx | 31 +++++ src/Components/MainMenu/MainMenu.tsx | 13 +- src/Components/Messages/Messages.tsx | 5 +- src/Components/Settings/Settings.tsx | 9 +- .../SymbolProperties/SymbolForm.tsx | 9 +- src/Components/Text/Text.tsx | 11 ++ src/Components/UI/UI.tsx | 15 +-- src/Events/AppEvents.ts | 110 +++++++++++------ src/Events/EditorEvents.ts | 1 + src/Interfaces/ILanguage.ts | 5 + src/Translations/Translations.ts | 14 +++ src/Translations/translation.en.json | 70 +++++++++++ src/Translations/translation.fr.json | 70 +++++++++++ src/dts/svgld.d.ts | 21 +++- src/index.scss | 2 +- src/main.tsx | 5 +- src/utils/default.ts | 2 + 26 files changed, 527 insertions(+), 160 deletions(-) create mode 100644 docs/#Project/Pages/Translations.drawio create mode 100644 src/Components/LanguageProvider/LanguageProvider.tsx create mode 100644 src/Components/Text/Text.tsx create mode 100644 src/Interfaces/ILanguage.ts create mode 100644 src/Translations/Translations.ts create mode 100644 src/Translations/translation.en.json create mode 100644 src/Translations/translation.fr.json diff --git a/docs/#Project/Pages/Translations.drawio b/docs/#Project/Pages/Translations.drawio new file mode 100644 index 0000000..78684ae --- /dev/null +++ b/docs/#Project/Pages/Translations.drawio @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7fbcd3b23f0c23bb52a72a634a84f7f0b71c707293f0d81991bebc4d93099ca2 +size 306765 diff --git a/public/smartcomponent/svg-layout-designer.ts b/public/smartcomponent/svg-layout-designer.ts index c6ccf8b..66fc222 100644 --- a/public/smartcomponent/svg-layout-designer.ts +++ b/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>) => void) { + const eventType = 'getLanguages'; + this.app.AddEventListener(eventType, callback); + const component = this.GetAppComponent(); + component.dispatchEvent(new CustomEvent(eventType)); + } } diff --git a/public/svgld.d.ts b/public/svgld.d.ts index 49a0de3..cf70054 100644 --- a/public/svgld.d.ts +++ b/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; } @@ -260,10 +260,9 @@ export interface IContainerModel { */ export class ContainerModel implements IContainerModel { children: string[]; - parent: IContainerModel | null; properties: IContainerProperties; userData: Record; - 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; + languageChange?: (selected: string) => void; +} + export interface IMargin { left?: number; bottom?: number; diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index ef86b3c..66ef475 100644 --- a/src/Components/App/App.tsx +++ b/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(false); const appRef = useRef(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 ); diff --git a/src/Components/Bar/Bar.tsx b/src/Components/Bar/Bar.tsx index 4c0b5e7..8f28635 100644 --- a/src/Components/Bar/Bar.tsx +++ b/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 {
props.toggleComponents()}> { props.isComponentsOpen @@ -45,7 +46,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleSymbols()}> { props.isSymbolsOpen @@ -55,7 +56,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleMessages()}> { props.isMessagesOpen @@ -66,7 +67,7 @@ export function Bar(props: IBarProps): JSX.Element {
props.toggleTimeline()}> { props.isHistoryOpen @@ -76,7 +77,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleSettings()}> { props.isSettingsOpen diff --git a/src/Components/Components/Components.tsx b/src/Components/Components/Components.tsx index ee4c99a..53a3dd9 100644 --- a/src/Components/Components/Components.tsx +++ b/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(false); - const disabledTitle = hideDisabled ? 'Show disabled components' : 'Hide disabled components'; + const disabledTitle = hideDisabled ? Text({ textId: '@ShowDisabledComponents' }) : Text({ textId: '@HideDisabledComponents' }); const rootElements: Array = []; const categories = new Map(props.categories.map(category => [ diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx index 31718b5..28c893f 100644 --- a/src/Components/ContainerProperties/ContainerForm.tsx +++ b/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 {
@@ -62,14 +63,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
-
props.onChange('minWidth', Number(value))} />
props.onChange('minHeight', Number(value))} />
props.onChange('left', Number(value), PropertyType.Margin)} /> props.onChange('bottom', Number(value), PropertyType.Margin)} /> props.onChange('top', Number(value), PropertyType.Margin)} />
props.onChange('isFlex', event.target.checked)} /> @@ -321,14 +323,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {