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 1287b93..5d7f397 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -210,10 +210,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 }; @@ -257,10 +259,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)),