Move dimension options in Dimensions class

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;
+        public Dimensions dimensionOptions;
-
-        /** 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;
 
         /**
          * Warnings of a container

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;
+    }
+}

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;
     }

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}
+                value={props.properties.dimensionOptions.showSelfDimensions}
-                onChange={props.onChange}
+                onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
               />
             </div>
           }
@@ -351,8 +351,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 id='showChildrenDimensions'
                 name='ShowChildrenDimensions'
                 labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
-                value={props.properties.showChildrenDimensions}
+                value={props.properties.dimensionOptions.showChildrenDimensions}
-                onChange={props.onChange}
+                onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
               />
             </div>
           }
@@ -363,9 +363,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 <OrientationCheckboxes
                   id='markPosition'
                   name='MarkPosition'
-                  value={props.properties.markPosition}
+                  value={props.properties.dimensionOptions.markPosition}
                   labelText={Text({ textId: '@ContainerMarkPosition' })}
-                  onChange={props.onChange}
+                  onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
                 />
               </div>
               <div className='grid grid-cols-1 gap-2'>
@@ -373,8 +373,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                   id='showDimensionWithMarks'
                   name='ShowDimensionWithMarks'
                   labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
-                  value={props.properties.showDimensionWithMarks}
+                  value={props.properties.dimensionOptions.showDimensionWithMarks}
-                  onChange={props.onChange}
+                  onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
                 />
               </div>
             </>

src/Components/ContainerProperties/ContainerProperties.test.tsx

@@ -42,10 +42,12 @@ describe.concurrent('Properties', () => {
       isAnchor: false,
       warning: '',
       hideChildrenInTreeview: false,
-      showChildrenDimensions: [],
+      dimensionOptions: {
-      showSelfDimensions: [],
+        showChildrenDimensions: [],
-      showDimensionWithMarks: [],
+        showSelfDimensions: [],
-      markPosition: []
+        showDimensionWithMarks: [],
+        markPosition: []
+      }
     };
 
     const handleChange = vi.fn((key, value) => {

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;
   }

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;
     }

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,
 }

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
+  /** Dimensions options */
-  /** if true, show the dimension of the container */
+  dimensionOptions: IDimensions
-  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[]
 
   /**
    * Warnings of a container

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[]
+}

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],
+  dimensionOptions: {
-  showSelfDimensions: [Position.Up, Position.Left],
+    showChildrenDimensions: [Position.Up, Position.Left],
-  showDimensionWithMarks: [Position.Down, Position.Right],
+    showSelfDimensions: [Position.Up, Position.Left],
-  markPosition: [],
+    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 ?? [],
+    dimensionOptions: {
-    showSelfDimensions: containerConfig.ShowSelfDimensions ?? [],
+      showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [],
-    markPosition: containerConfig.MarkPosition ?? [],
+      showSelfDimensions: containerConfig.ShowSelfDimensions ?? [],
-    showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? [],
+      markPosition: containerConfig.MarkPosition ?? [],
+      showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? []
+    },
     warning: '',
     customSVG: containerConfig.CustomSVG,
     style: Object.assign(structuredClone(DEFAULT_CONTAINER_STYLE), structuredClone(containerConfig.Style)),