From 3d6d9793898197bf9323ad9b9876087302fbc4d6 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 9 Nov 2022 16:00:24 +0100 Subject: [PATCH 1/2] Move dimension options in Dimensions class --- .../SVGLDLibs/Models/ContainerProperties.cs | 24 ++------------ .../SVGLDLibs/SVGLDLibs/Models/Dimensions.cs | 32 +++++++++++++++++++ src/Components/Canvas/DimensionLayer.ts | 16 +++++----- .../ContainerProperties/ContainerForm.tsx | 16 +++++----- .../ContainerProperties.test.tsx | 10 +++--- .../Editor/Actions/ContainerOperations.ts | 3 ++ .../SVG/Elements/DimensionLayer.tsx | 16 +++++----- src/Enums/PropertyType.ts | 5 +++ src/Interfaces/IContainerProperties.ts | 22 ++----------- src/Interfaces/IDimensions.ts | 23 +++++++++++++ src/utils/default.ts | 22 +++++++------ 11 files changed, 112 insertions(+), 77 deletions(-) create mode 100644 csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs create mode 100644 src/Interfaces/IDimensions.ts diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs index 27bd9ab..b329176 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs +++ b/csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs @@ -88,32 +88,14 @@ namespace SVGLDLibs.Models /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ [DataMember(EmitDefaultValue = false)] public PositionReferenceEnumModel positionReference; - + /** Hide the children in the treeview */ [DataMember(EmitDefaultValue = false)] public bool hideChildrenInTreeview; - /** if true, show the dimension of the container */ + /** Dimension options */ [DataMember(EmitDefaultValue = false)] - public Position[] showSelfDimensions; - - /** if true show the overall dimensions of its children */ - [DataMember(EmitDefaultValue = false)] - public Position[] showChildrenDimensions; - - /** - * if true, allows a parent dimension borrower to borrow its x coordinate - * as a reference point for a dimension - */ - [DataMember(EmitDefaultValue = false)] - public Orientation[] markPosition; - - /** - * if true, show a dimension from the edge of the container to end - * and insert dimensions marks at lift up children (see liftDimensionToBorrower) - */ - [DataMember(EmitDefaultValue = false)] - public Position[] showDimensionWithMarks; + public Dimensions dimensionOptions; /** * Warnings of a container diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs new file mode 100644 index 0000000..9e75da5 --- /dev/null +++ b/csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs @@ -0,0 +1,32 @@ + +using System.Runtime.Serialization; + +namespace SVGLDLibs.Models +{ + [DataContract] + public class Dimensions + { + + /** if true, show the dimension of the container */ + [DataMember(EmitDefaultValue = false)] + public Position[] showSelfDimensions; + + /** if true show the overall dimensions of its children */ + [DataMember(EmitDefaultValue = false)] + public Position[] showChildrenDimensions; + + /** + * if true, allows a parent dimension borrower to borrow its x coordinate + * as a reference point for a dimension + */ + [DataMember(EmitDefaultValue = false)] + public Orientation[] markPosition; + + /** + * if true, show a dimension from the edge of the container to end + * and insert dimensions marks at lift up children (see liftDimensionToBorrower) + */ + [DataMember(EmitDefaultValue = false)] + public Position[] showDimensionWithMarks; + } +} diff --git a/src/Components/Canvas/DimensionLayer.ts b/src/Components/Canvas/DimensionLayer.ts index 0639ad4..7387a64 100644 --- a/src/Components/Canvas/DimensionLayer.ts +++ b/src/Components/Canvas/DimensionLayer.ts @@ -18,11 +18,11 @@ export function AddDimensions( depth: number ): void { ctx.beginPath(); - if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) { + if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) { ActionByPosition( ctx, dimMapped, - container.properties.showSelfDimensions, + container.properties.dimensionOptions.showSelfDimensions, AddHorizontalSelfDimension, AddVerticalSelfDimension, [ @@ -32,11 +32,11 @@ export function AddDimensions( ); } - if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) { + if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) { ActionByPosition( ctx, dimMapped, - container.properties.showDimensionWithMarks, + container.properties.dimensionOptions.showDimensionWithMarks, AddHorizontalBorrowerDimension, AddVerticalBorrowerDimension, [ @@ -48,11 +48,11 @@ export function AddDimensions( ); } - if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length >= 2) { + if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) { ActionByPosition( ctx, dimMapped, - container.properties.showChildrenDimensions, + container.properties.dimensionOptions.showChildrenDimensions, AddHorizontalChildrenDimension, AddVerticalChildrenDimension, [ @@ -238,7 +238,7 @@ function AddHorizontalBorrowerDimension( for (const { container: childContainer, currentTransform: childCurrentTransform } of it) { - const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal); + const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Horizontal); if (isHidden) { continue; } @@ -297,7 +297,7 @@ function AddVerticalBorrowerDimension( for (const { container: childContainer, currentTransform: childCurrentTransform } of it) { - const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical); + const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Vertical); if (isHidden) { continue; } diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx index 28c5df8..5f81461 100644 --- a/src/Components/ContainerProperties/ContainerForm.tsx +++ b/src/Components/ContainerProperties/ContainerForm.tsx @@ -339,8 +339,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element { id='showSelfDimensions' name='ShowSelfDimensions' labelText={Text({ textId: '@ContainerShowDimension' })} - value={props.properties.showSelfDimensions} - onChange={props.onChange} + value={props.properties.dimensionOptions.showSelfDimensions} + onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)} /> } @@ -351,8 +351,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element { id='showChildrenDimensions' name='ShowChildrenDimensions' labelText={Text({ textId: '@ContainerShowChildrenDimension' })} - value={props.properties.showChildrenDimensions} - onChange={props.onChange} + value={props.properties.dimensionOptions.showChildrenDimensions} + onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)} /> } @@ -363,9 +363,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element { props.onChange(key, value, PropertyType.DimensionOptions)} />
@@ -373,8 +373,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element { id='showDimensionWithMarks' name='ShowDimensionWithMarks' labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })} - value={props.properties.showDimensionWithMarks} - onChange={props.onChange} + value={props.properties.dimensionOptions.showDimensionWithMarks} + onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)} />
diff --git a/src/Components/ContainerProperties/ContainerProperties.test.tsx b/src/Components/ContainerProperties/ContainerProperties.test.tsx index 6fbd509..4a7b8f2 100644 --- a/src/Components/ContainerProperties/ContainerProperties.test.tsx +++ b/src/Components/ContainerProperties/ContainerProperties.test.tsx @@ -42,10 +42,12 @@ describe.concurrent('Properties', () => { isAnchor: false, warning: '', hideChildrenInTreeview: false, - showChildrenDimensions: [], - showSelfDimensions: [], - showDimensionWithMarks: [], - markPosition: [] + dimensionOptions: { + showChildrenDimensions: [], + showSelfDimensions: [], + showDimensionWithMarks: [], + markPosition: [] + } }; const handleChange = vi.fn((key, value) => { diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index f0f176e..01a1d22 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/src/Components/Editor/Actions/ContainerOperations.ts @@ -318,6 +318,9 @@ function AssignProperty(container: IContainerModel, key: string, value: string | case PropertyType.Margin: SetMargin(); break; + case PropertyType.DimensionOptions: + (container.properties.dimensionOptions as any)[key] = value; + break; default: (container.properties as any)[key] = value; } diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 8bb066c..17ce3ef 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -72,10 +72,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale; const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale; const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim]; - if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) { + if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) { ActionByPosition( dimMapped, - container.properties.showSelfDimensions, + container.properties.dimensionOptions.showSelfDimensions, AddHorizontalSelfDimension, AddVerticalSelfDimension, [ @@ -86,10 +86,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re ); } - if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) { + if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) { ActionByPosition( dimMapped, - container.properties.showDimensionWithMarks, + container.properties.dimensionOptions.showDimensionWithMarks, AddHorizontalBorrowerDimension, AddVerticalBorrowerDimension, [ @@ -102,10 +102,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re ); } - if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length >= 2) { + if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) { ActionByPosition( dimMapped, - container.properties.showChildrenDimensions, + container.properties.dimensionOptions.showChildrenDimensions, AddHorizontalChildrenDimension, AddVerticalChildrenDimension, [ @@ -279,7 +279,7 @@ function AddHorizontalBorrowerDimension( for (const { container: childContainer, currentTransform: childCurrentTransform } of it) { - const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal); + const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Horizontal); if (isHidden) { continue; } @@ -338,7 +338,7 @@ function AddVerticalBorrowerDimension( for (const { container: childContainer, currentTransform: childCurrentTransform } of it) { - const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical); + const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Vertical); if (isHidden) { continue; } diff --git a/src/Enums/PropertyType.ts b/src/Enums/PropertyType.ts index e8584e3..f73a837 100644 --- a/src/Enums/PropertyType.ts +++ b/src/Enums/PropertyType.ts @@ -19,4 +19,9 @@ export enum PropertyType { * Margin property: is inside the margin property: left, bottom, top, right... */ Margin, + + /** + * Dimension options + */ + DimensionOptions, } diff --git a/src/Interfaces/IContainerProperties.ts b/src/Interfaces/IContainerProperties.ts index f83c496..254d6ca 100644 --- a/src/Interfaces/IContainerProperties.ts +++ b/src/Interfaces/IContainerProperties.ts @@ -1,9 +1,9 @@ import { PositionReference } from '../Enums/PositionReference'; import { IMargin } from './IMargin'; import { Orientation } from '../Enums/Orientation'; -import { Position } from '../Enums/Position'; import { IKeyValue } from './IKeyValue'; import { IStyle } from './IStyle'; +import { IDimensions } from './IDimensions'; /** * Properties of a container @@ -78,24 +78,8 @@ export interface IContainerProperties { /** Hide the children in the treeview */ hideChildrenInTreeview: boolean - // TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface - /** if true, show the dimension of the container */ - showSelfDimensions: Position[] - - /** if true show the overall dimensions of its children */ - showChildrenDimensions: Position[] - - /** - * if true, allows a parent dimension borrower to borrow its x coordinate - * as a reference point for a dimension - */ - markPosition: Orientation[] - - /** - * if true, show a dimension from the edge of the container to end - * and insert dimensions marks at lift up children (see liftDimensionToBorrower) - */ - showDimensionWithMarks: Position[] + /** Dimensions options */ + dimensionOptions: IDimensions /** * Warnings of a container diff --git a/src/Interfaces/IDimensions.ts b/src/Interfaces/IDimensions.ts new file mode 100644 index 0000000..4802860 --- /dev/null +++ b/src/Interfaces/IDimensions.ts @@ -0,0 +1,23 @@ +import { Orientation } from '../Enums/Orientation'; +import { Position } from '../Enums/Position'; + +export interface IDimensions { + // TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface + /** if true, show the dimension of the container */ + showSelfDimensions: Position[] + + /** if true show the overall dimensions of its children */ + showChildrenDimensions: Position[] + + /** + * if true, allows a parent dimension borrower to borrow its x coordinate + * as a reference point for a dimension + */ + markPosition: Orientation[] + + /** + * if true, show a dimension from the edge of the container to end + * and insert dimensions marks at lift up children (see liftDimensionToBorrower) + */ + showDimensionWithMarks: Position[] +} diff --git a/src/utils/default.ts b/src/utils/default.ts index 283b2ef..d1710c1 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -184,7 +184,7 @@ const DEFAULT_CONTAINER_STYLE = { fillOpacity: 1, fill: 'white', strokeWidth: 2 -} +}; /** * Default Main container properties @@ -209,10 +209,12 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = { isFlex: false, positionReference: PositionReference.TopLeft, hideChildrenInTreeview: false, - showChildrenDimensions: [Position.Up, Position.Left], - showSelfDimensions: [Position.Up, Position.Left], - showDimensionWithMarks: [Position.Down, Position.Right], - markPosition: [], + dimensionOptions: { + showChildrenDimensions: [Position.Up, Position.Left], + showSelfDimensions: [Position.Up, Position.Left], + showDimensionWithMarks: [Position.Down, Position.Right], + markPosition: [] + }, warning: '', style: DEFAULT_CONTAINER_STYLE }; @@ -256,10 +258,12 @@ export function GetDefaultContainerProps(type: string, minHeight: containerConfig.MinWidth ?? 1, maxHeight: containerConfig.MaxWidth ?? Number.MAX_SAFE_INTEGER, hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false, - showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [], - showSelfDimensions: containerConfig.ShowSelfDimensions ?? [], - markPosition: containerConfig.MarkPosition ?? [], - showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? [], + dimensionOptions: { + showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [], + showSelfDimensions: containerConfig.ShowSelfDimensions ?? [], + markPosition: containerConfig.MarkPosition ?? [], + showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? [] + }, warning: '', customSVG: containerConfig.CustomSVG, style: Object.assign(structuredClone(DEFAULT_CONTAINER_STYLE), structuredClone(containerConfig.Style)), From 42c14893945b561c8b4023b3fe84a853d3fad77f Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 10 Nov 2022 15:37:56 +0100 Subject: [PATCH 2/2] Update documentation --- README.md | 5 +- docs/#Project/Pages/ComponentStructure.drawio | 4 +- docs/Tutorial/Pages/PremierComposantReact.md | 171 +++++++++++------- 3 files changed, 115 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index bc56866..0a7dc77 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,7 @@ An svg layout designer. Requirements : - `node` >= 16.x (>= 17.x to run vitest tests) -- `npm` -- pnpm (optional) reduce `node_modules` folder size by using symlinks +- `npm` (included with node) - [`git-lfs`](https://git-lfs.github.com/) (in order to clone the documentation) - `dotnet` (optional) used for api test @@ -18,10 +17,12 @@ Requirements : # Recommanded tools for developers - [VSCode](https://code.visualstudio.com/) +- [pnpm](https://pnpm.io/) - [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) - [Typescript React code snippets](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript) - [vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - [vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +- [vscode-drawio](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) # Develop diff --git a/docs/#Project/Pages/ComponentStructure.drawio b/docs/#Project/Pages/ComponentStructure.drawio index 0f4f484..9d3c594 100644 --- a/docs/#Project/Pages/ComponentStructure.drawio +++ b/docs/#Project/Pages/ComponentStructure.drawio @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d84dbb36af579fc6909ad41526c27e8a38d9de4a8d12a239e0c354d85889e378 -size 24027 +oid sha256:a11fc5b268366176f1c42af46e08ba368dbbf97e6a1f687f97643f2868508640 +size 23871 diff --git a/docs/Tutorial/Pages/PremierComposantReact.md b/docs/Tutorial/Pages/PremierComposantReact.md index 6d8ca2a..60e8b1f 100644 --- a/docs/Tutorial/Pages/PremierComposantReact.md +++ b/docs/Tutorial/Pages/PremierComposantReact.md @@ -127,7 +127,6 @@ Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton ` return (
@@ -139,35 +138,42 @@ On trouve la fonction `onClick` suivante : ```tsx // MainMenu.tsx -{ - setWindowState(WindowState.Loading); +