Merged PR 308: #8224/#7571 Margins cotation and Colors

Related work items: #8224

csharp/SVGLDLibs/SVGLDLibs/Models/AvailableContainerModel.cs

@@ -1,4 +1,4 @@
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Runtime.Serialization;
 
 namespace SVGLDLibs.Models
@@ -112,26 +112,10 @@ namespace SVGLDLibs.Models
         [DataMember(EmitDefaultValue = false)]
         public bool? HideChildrenInTreeview { get; set; }
 
-        /** if true, show the dimension of the container */
-        [DataMember(EmitDefaultValue = false)]
-        public Position[] ShowSelfDimensions { get; set; }
 
-        /** if true show the overall dimensions of its children */
         [DataMember(EmitDefaultValue = false)]
-        public Position[] ShowChildrenDimensions { get; set; }
+        public Dimensions DimensionOptions { get; set; }
 
-        /**
-         * if true, allows a parent dimension borrower to uses its x coordinate for as a reference point for a dimension
-         */
-        [DataMember(EmitDefaultValue = false)]
-        public Orientation[] MarkPosition { get; set; }
-
-        /**
-         * if true, show a dimension from the edge of the container to end
-         * and insert dimensions mark
-         */
-        [DataMember(EmitDefaultValue = false)]
-        public Position[] ShowDimensionWithMarks { get; set; }
 
         /**
          * if true, hide the entry in the sidebar (default: false)

csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.Serialization;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace SVGLDLibs.Models
+{
+
+    [DataContract]
+    public class DimensionOptions
+    {
+
+        /** positions of the dimension */
+        [DataMember(EmitDefaultValue = false)]
+        public Position[] positions;
+
+        /** color */
+        [DataMember(EmitDefaultValue = false)]
+        public string color;
+
+
+
+
+    }
+
+}

csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs

@@ -9,11 +9,14 @@ namespace SVGLDLibs.Models
 
         /** if true, show the dimension of the container */
         [DataMember(EmitDefaultValue = false)]
-        public Position[] showSelfDimensions;
+        public DimensionOptions selfDimensions;
+
+        [DataMember(EmitDefaultValue = false)]
+        public DimensionOptions selfMarginsDimensions;
 
         /** if true show the overall dimensions of its children */
         [DataMember(EmitDefaultValue = false)]
-        public Position[] showChildrenDimensions;
+        public DimensionOptions childrenDimensions;
 
         /**
          * if true, allows a parent dimension borrower to borrow its x coordinate
@@ -27,6 +30,6 @@ namespace SVGLDLibs.Models
          * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
          */
         [DataMember(EmitDefaultValue = false)]
-        public Position[] showDimensionWithMarks;
+        public DimensionOptions dimensionWithMarks;
     }
 }

src/Components/API/api.test.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { describe, it, expect } from 'vitest';
 import { AddMethod } from '../../Enums/AddMethod';
-import { Orientation } from '../../Enums/Orientation';
-import { Position } from '../../Enums/Position';
 import { PositionReference } from '../../Enums/PositionReference';
 import { IAction } from '../../Interfaces/IAction';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
@@ -145,28 +143,25 @@ describe.concurrent('Models test suite', () => {
     DefaultChildType: 'string',
     PositionReference: 0,
     HideChildrenInTreeview: true,
-    ShowSelfDimensions: [
+    DimensionOptions: {
-      Position.Down,
+      childrenDimensions: {
-      Position.Left,
+        color: '#000000',
-      Position.Right,
+        positions: []
-      Position.Up
+      },
-    ],
+      selfDimensions: {
-    ShowChildrenDimensions: [
+        color: '#000000',
-      Position.Down,
+        positions: []
-      Position.Left,
+      },
-      Position.Right,
+      selfMarginsDimensions: {
-      Position.Up
+        color: '#000000',
-    ],
+        positions: []
-    MarkPosition: [
+      },
-      Orientation.Horizontal,
+      markPosition: [],
-      Orientation.Vertical
+      dimensionWithMarks: {
-    ],
+        color: '#000000',
-    ShowDimensionWithMarks: [
+        positions: []
-      Position.Down,
+      }
-      Position.Left,
+    },
-      Position.Right,
-      Position.Up
-    ],
     IsHidden: true,
     Blacklist: [
       'string'

src/Components/Canvas/DimensionLayer.ts

@@ -18,11 +18,11 @@ export function AddDimensions(
   depth: number
 ): void {
   ctx.beginPath();
-  if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
+  if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
     ActionByPosition(
       ctx,
       dimMapped,
-      container.properties.dimensionOptions.showSelfDimensions,
+      container.properties.dimensionOptions.selfDimensions.positions,
       AddHorizontalSelfDimension,
       AddVerticalSelfDimension,
       [
@@ -32,11 +32,11 @@ export function AddDimensions(
     );
   }
 
-  if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
+  if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
     ActionByPosition(
       ctx,
       dimMapped,
-      container.properties.dimensionOptions.showDimensionWithMarks,
+      container.properties.dimensionOptions.dimensionWithMarks.positions,
       AddHorizontalBorrowerDimension,
       AddVerticalBorrowerDimension,
       [
@@ -48,11 +48,11 @@ export function AddDimensions(
     );
   }
 
-  if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) {
+  if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
     ActionByPosition(
       ctx,
       dimMapped,
-      container.properties.dimensionOptions.showChildrenDimensions,
+      container.properties.dimensionOptions.childrenDimensions.positions,
       AddHorizontalChildrenDimension,
       AddVerticalChildrenDimension,
       [

src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx

@@ -8,6 +8,7 @@ interface IPositionCheckboxesProps {
   name: string
   labelText: string
   value: Position[]
+  attribute: string
   onChange: (key: string, value: number[]) => void
 }
 
@@ -16,6 +17,7 @@ export function PositionCheckboxes({
   name,
   labelText,
   value,
+  attribute,
   onChange
 }: IPositionCheckboxesProps): JSX.Element {
   return <CheckboxGroupButtons
@@ -64,7 +66,7 @@ export function PositionCheckboxes({
       }
     ]}
     onChange={(newSelectedValues) => {
-      onChange(id, newSelectedValues);
+      onChange(attribute, newSelectedValues);
     }}
   />;
 }

src/Components/ContainerProperties/ContainerForm.tsx

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { PropertyType } from '../../Enums/PropertyType';
 import { IContainerProperties } from '../../Interfaces/IContainerProperties';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
+import {
+  SHOW_BORROWER_DIMENSIONS,
+  SHOW_CHILDREN_DIMENSIONS,
+  SHOW_SELF_DIMENSIONS,
+  SHOW_SELF_MARGINS_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';
@@ -336,24 +341,63 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             SHOW_SELF_DIMENSIONS &&
             <div className='grid grid-cols-1 gap-2'>
               <PositionCheckboxes
-                id='showSelfDimensions'
+                id='positionsSelfDimensions'
+                attribute='positions'
                 name='ShowSelfDimensions'
                 labelText={Text({ textId: '@ContainerShowDimension' })}
-                value={props.properties.dimensionOptions.showSelfDimensions}
+                value={props.properties.dimensionOptions.selfDimensions.positions}
-                onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
+                onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)}
               />
+              <InputGroup
+                labelText={Text({ textId: '@Color' })}
+                inputKey='color'
+                labelClassName=''
+                inputClassName=''
+                type='color'
+                value={props.properties.dimensionOptions.selfDimensions.color}
+                onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
+            </div>
+          }
+          {
+            SHOW_SELF_MARGINS_DIMENSIONS &&
+                <div className='grid grid-cols-1 gap-2'>
+                  <PositionCheckboxes
+                    id='positionsSelfMarginsDimensions'
+                    attribute='positions'
+                    name='ShowSelfMarginsDimensions'
+                    labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
+                    value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
+                    onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)}
+                  />
+                  <InputGroup
+                    labelText={Text({ textId: '@Color' })}
+                    inputKey='color'
+                    labelClassName=''
+                    inputClassName=''
+                    type='color'
+                    value={props.properties.dimensionOptions.selfMarginsDimensions.color}
+                    onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
                 </div>
           }
           {
             SHOW_CHILDREN_DIMENSIONS &&
             <div className='grid grid-cols-1 gap-2'>
               <PositionCheckboxes
-                id='showChildrenDimensions'
+                id='positionsChildrenDimensions'
+                attribute='positions'
                 name='ShowChildrenDimensions'
                 labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
-                value={props.properties.dimensionOptions.showChildrenDimensions}
+                value={props.properties.dimensionOptions.childrenDimensions.positions}
-                onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
+                onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)}
               />
+              <InputGroup
+                labelText={Text({ textId: '@Color' })}
+                inputKey='color'
+                labelClassName=''
+                inputClassName=''
+                type='color'
+                value={props.properties.dimensionOptions.childrenDimensions.color}
+                onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
             </div>
           }
           {
@@ -370,12 +414,21 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
               </div>
               <div className='grid grid-cols-1 gap-2'>
                 <PositionCheckboxes
-                  id='showDimensionWithMarks'
+                  id='positionsDimensionWithMarks'
+                  attribute='positions'
                   name='ShowDimensionWithMarks'
                   labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
-                  value={props.properties.dimensionOptions.showDimensionWithMarks}
+                  value={props.properties.dimensionOptions.dimensionWithMarks.positions}
-                  onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
+                  onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)}
                 />
+                <InputGroup
+                  labelText={Text({ textId: '@Color' })}
+                  inputKey='color'
+                  labelClassName=''
+                  inputClassName=''
+                  type='color'
+                  value={props.properties.dimensionOptions.dimensionWithMarks.color}
+                  onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
               </div>
             </>
           }

src/Components/ContainerProperties/ContainerProperties.test.tsx

@@ -43,10 +43,23 @@ describe.concurrent('Properties', () => {
       warning: '',
       hideChildrenInTreeview: false,
       dimensionOptions: {
-        showChildrenDimensions: [],
+        childrenDimensions: {
-        showSelfDimensions: [],
+          color: '#000000',
-        showDimensionWithMarks: [],
+          positions: []
-        markPosition: []
+        },
+        selfDimensions: {
+          color: '#000000',
+          positions: []
+        },
+        selfMarginsDimensions: {
+          color: '#000000',
+          positions: []
+        },
+        markPosition: [],
+        dimensionWithMarks: {
+          color: '#000000',
+          positions: []
+        }
       }
     };
 

src/Components/Editor/Actions/ContainerOperations.ts

@@ -11,8 +11,10 @@ import { Orientation } from '../../../Enums/Orientation';
 
 /**
  * Select a container
- * @param container Selected container
  * @returns New history
+ * @param containerId
+ * @param fullHistory
+ * @param historyCurrentStep
  */
 export function SelectContainer(
   containerId: string,
@@ -135,6 +137,7 @@ function GetSelectedContainerOnDelete(
 /**
  * Unlink a container and its children to symbols
  * (used when deleting a container)
+ * @param containers
  * @param symbols Symbols to update
  * @param container Container to unlink
  */
@@ -318,6 +321,18 @@ function AssignProperty(container: IContainerModel, key: string, value: string |
     case PropertyType.Margin:
       SetMargin();
       break;
+    case PropertyType.SelfDimension:
+      (container.properties.dimensionOptions.selfDimensions as any)[key] = value;
+      break;
+    case PropertyType.SelfMarginDimension:
+      (container.properties.dimensionOptions.selfMarginsDimensions as any)[key] = value;
+      break;
+    case PropertyType.ChildrenDimensions:
+      (container.properties.dimensionOptions.childrenDimensions as any)[key] = value;
+      break;
+    case PropertyType.DimensionWithMarks:
+      (container.properties.dimensionOptions.dimensionWithMarks as any)[key] = value;
+      break;
     case PropertyType.DimensionOptions:
       (container.properties.dimensionOptions as any)[key] = value;
       break;

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -24,7 +24,7 @@ function GetDimensionsNodes(
   let lastY = 0;
   for (const { container, depth } of it) {
     if (currentDepth !== depth) {
-      AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);
+      AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
 
       currentDepth = depth;
       min = Infinity;
@@ -43,7 +43,7 @@ function GetDimensionsNodes(
     }
   }
 
-  AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);
+  AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
 
   return dimensions;
 }
@@ -70,12 +70,11 @@ export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
   );
 }
 
-function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, dimensions: React.ReactNode[]): void {
+function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, color: string, dimensions: React.ReactNode[]): void {
   const id = `dim-depth-${currentDepth}`;
   const xStart = min;
   const xEnd = max;
   const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)) / scale;
-  const strokeWidth = 1;
   const width = xEnd - xStart;
   const text = width
     .toFixed(0)
@@ -93,9 +92,9 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY:
       yStart={y}
       xEnd={xEnd}
       yEnd={y}
-      strokeWidth={strokeWidth}
       text={text}
       scale={scale}
+      color={color}
     />
   );
 }

src/Components/SVG/Elements/Dimension.tsx

@@ -8,7 +8,7 @@ interface IDimensionProps {
   xEnd: number
   yEnd: number
   text: string
-  strokeWidth: number
+  color: string
   scale?: number
 }
 
@@ -28,7 +28,7 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
 export function Dimension(props: IDimensionProps): JSX.Element {
   const scale = props.scale ?? 1;
   const style: React.CSSProperties = {
-    stroke: 'black',
+    stroke: props.color,
     strokeWidth: 2 / scale
   };
 
@@ -56,6 +56,9 @@ export function Dimension(props: IDimensionProps): JSX.Element {
   const endBottomX = ApplyParametric(props.xEnd, -notchesLength, perpVecX);
   const endBottomY = ApplyParametric(props.yEnd, -notchesLength, perpVecY);
 
+  const textX = ApplyParametric((props.xStart + props.xEnd) / 2, notchesLength, perpVecX);
+  const textY = ApplyParametric((props.yStart + props.yEnd) / 2, notchesLength, perpVecY);
+
   return (
     <g key={props.id}>
       <line
@@ -63,28 +66,25 @@ export function Dimension(props: IDimensionProps): JSX.Element {
         y1={startTopY}
         x2={startBottomX}
         y2={startBottomY}
-        strokeWidth={props.strokeWidth}
         style={style}/>
       <line
         x1={props.xStart}
         y1={props.yStart}
         x2={props.xEnd}
         y2={props.yEnd}
-        strokeWidth={props.strokeWidth}
         style={style}/>
       <line
         x1={endTopX}
         y1={endTopY}
         x2={endBottomX}
         y2={endBottomY}
-        strokeWidth={props.strokeWidth}
         style={style}/>
-      <text
+      <text textAnchor={'middle'} alignmentBaseline={'central'}
-        x={(props.xStart + props.xEnd) / 2}
+        x={textX}
-        y={(props.yStart + props.yEnd) / 2}
+        y={textY}
         style={{
-          transform: `rotate(${rotation}turn) scale(${1 / scale}) translateX(-50%) translateY(-100%)`,
+          transform: `rotate(${rotation}turn) scale(${1 / scale})`,
-          transformBox: 'fill-box'
+          transformOrigin: `${textX}px ${textY}px`
         }}
       >
         {props.text}

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { Orientation } from '../../../Enums/Orientation';
 import { Position } from '../../../Enums/Position';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../../utils/default';
+import {
+  DIMENSION_MARGIN,
+  SHOW_BORROWER_DIMENSIONS,
+  SHOW_CHILDREN_DIMENSIONS,
+  SHOW_SELF_DIMENSIONS,
+  SHOW_SELF_MARGINS_DIMENSIONS
+} from '../../../utils/default';
 import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
 import { TransformX, TransformY } from '../../../utils/svg';
 import { Dimension } from './Dimension';
@@ -13,8 +19,6 @@ interface IDimensionLayerProps {
   scale: number
 }
 
-const MODULE_STROKE_WIDTH = 1;
-
 /**
  * Fonction that call another function given the positions
  * @param dimMapped Position mapped depending on the Position enum in order:
@@ -67,29 +71,46 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
   }
 
   for (const { container, depth, currentTransform } of it) {
-    const containerLeftDim = leftDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
+    const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
-    const containerTopDim = topDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
+    const containerLeftDim = leftDim - offset;
-    const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
+    const containerTopDim = topDim - offset;
-    const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
+    const containerBottomDim = bottomDim + offset;
+    const containerRightDim = rightDim + offset;
     const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
-    if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
+    if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
       ActionByPosition(
         dimMapped,
-        container.properties.dimensionOptions.showSelfDimensions,
+        container.properties.dimensionOptions.selfDimensions.positions,
         AddHorizontalSelfDimension,
         AddVerticalSelfDimension,
         [
           container,
           currentTransform,
           dimensions,
-          scale]
+          scale,
+          container.properties.dimensionOptions.selfDimensions.color]
       );
     }
 
-    if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
+    if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
       ActionByPosition(
         dimMapped,
-        container.properties.dimensionOptions.showDimensionWithMarks,
+        container.properties.dimensionOptions.selfMarginsDimensions.positions,
+        AddHorizontalSelfMarginsDimension,
+        AddVerticalSelfMarginDimension,
+        [
+          container,
+          currentTransform,
+          dimensions,
+          scale,
+          container.properties.dimensionOptions.selfMarginsDimensions.color]
+      );
+    }
+
+    if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
+      ActionByPosition(
+        dimMapped,
+        container.properties.dimensionOptions.dimensionWithMarks.positions,
         AddHorizontalBorrowerDimension,
         AddVerticalBorrowerDimension,
         [
@@ -98,14 +119,15 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
           depth,
           currentTransform,
           dimensions,
-          scale]
+          scale,
+          container.properties.dimensionOptions.dimensionWithMarks.color]
       );
     }
 
-    if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) {
+    if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
       ActionByPosition(
         dimMapped,
-        container.properties.dimensionOptions.showChildrenDimensions,
+        container.properties.dimensionOptions.childrenDimensions.positions,
         AddHorizontalChildrenDimension,
         AddVerticalChildrenDimension,
         [
@@ -113,7 +135,8 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
           container,
           currentTransform,
           dimensions,
-          scale]
+          scale,
+          container.properties.dimensionOptions.childrenDimensions.color]
       );
     }
   }
@@ -142,7 +165,8 @@ function AddHorizontalChildrenDimension(
   container: IContainerModel,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
-  scale: number
+  scale: number,
+  color: string
 ): void {
   const childrenId = `dim-y${yDim.toFixed(0)}-children-${container.properties.id}`;
 
@@ -192,9 +216,9 @@ function AddHorizontalChildrenDimension(
     xEnd={xChildrenEnd + offset}
     yStart={yDim}
     yEnd={yDim}
-    strokeWidth={MODULE_STROKE_WIDTH}
     text={textChildren}
-    scale={scale} />);
+    scale={scale}
+    color={color}/>);
 }
 
 function AddVerticalChildrenDimension(
@@ -204,7 +228,9 @@ function AddVerticalChildrenDimension(
   container: IContainerModel,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
-  scale: number
+  scale: number,
+  color: string
+
 ): void {
   const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
 
@@ -259,9 +285,9 @@ function AddVerticalChildrenDimension(
     yStart={yChildrenStart + offset}
     xEnd={xDim}
     yEnd={yChildrenEnd + offset}
-    strokeWidth={MODULE_STROKE_WIDTH}
     text={textChildren}
     scale={scale}
+    color={color}
   />);
 }
 
@@ -272,7 +298,8 @@ function AddHorizontalBorrowerDimension(
   depth: number,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
-  scale: number
+  scale: number,
+  color: string
 ): void {
   const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
   const marks = []; // list of vertical lines for the dimension
@@ -316,9 +343,9 @@ function AddHorizontalBorrowerDimension(
       xEnd={next}
       yStart={yDim}
       yEnd={yDim}
-      strokeWidth={MODULE_STROKE_WIDTH}
       text={value.toFixed(0)}
-      scale={scale} />);
+      scale={scale}
+      color={color}/>);
     count++;
   }
 }
@@ -331,7 +358,8 @@ function AddVerticalBorrowerDimension(
   depth: number,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
-  scale: number
+  scale: number,
+  color: string
 ): void {
   const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
   const marks = []; // list of vertical lines for the dimension
@@ -380,9 +408,9 @@ function AddVerticalBorrowerDimension(
       xEnd={xDim}
       yStart={cur}
       yEnd={next}
-      strokeWidth={MODULE_STROKE_WIDTH}
       text={value.toFixed(0)}
-      scale={scale} />);
+      scale={scale}
+      color={color}/>);
     count++;
   }
 }
@@ -393,7 +421,8 @@ function AddVerticalSelfDimension(
   container: IContainerModel,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
-  scale: number
+  scale: number,
+  color: string
 ): void {
   const height = container.properties.height;
   const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
@@ -415,18 +444,20 @@ function AddVerticalSelfDimension(
       yStart={yStart}
       xEnd={xDim}
       yEnd={yEnd}
-      strokeWidth={MODULE_STROKE_WIDTH}
       text={textVert}
-      scale={scale} />
+      scale={scale}
+      color={color}/>
   );
 }
 
 function AddHorizontalSelfDimension(
+
   yDim: number,
   container: IContainerModel,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
-  scale: number
+  scale: number,
+  color: string
 ): void {
   const width = container.properties.width;
   const id = `dim-y${yDim.toFixed(0)}-${container.properties.id}`;
@@ -443,8 +474,125 @@ function AddHorizontalSelfDimension(
       yStart={yDim}
       xEnd={xEnd}
       yEnd={yDim}
-      strokeWidth={MODULE_STROKE_WIDTH}
       text={text}
-      scale={scale} />
+      scale={scale}
+      color={color}/>
   );
 }
+
+function AddHorizontalSelfMarginsDimension(
+
+  yDim: number,
+  container: IContainerModel,
+  currentTransform: [number, number],
+  dimensions: React.ReactNode[],
+  scale: number,
+  color: string
+): void {
+  const left = container.properties.margin.left;
+  if (left != null) {
+    const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`;
+    const xStart = container.properties.x + currentTransform[0] - left;
+    const xEnd = xStart + left;
+    const text = left
+      .toFixed(0)
+      .toString();
+    dimensions.push(
+      <Dimension
+        key={id}
+        id={id}
+        xStart={xStart}
+        yStart={yDim}
+        xEnd={xEnd}
+        yEnd={yDim}
+        text={text}
+        scale={scale}
+        color={color}/>
+    );
+  }
+
+  const right = container.properties.margin.right;
+  if (right != null) {
+    const id = `dim-y-margin-right${yDim.toFixed(0)}-${container.properties.id}`;
+    const xStart = container.properties.x + container.properties.width + currentTransform[0];
+    const xEnd = xStart + right;
+    const text = right
+      .toFixed(0)
+      .toString();
+    dimensions.push(
+      <Dimension
+        key={id}
+        id={id}
+        xStart={xStart}
+        yStart={yDim}
+        xEnd={xEnd}
+        yEnd={yDim}
+        text={text}
+        scale={scale}
+        color={color}/>
+    );
+  }
+}
+
+function AddVerticalSelfMarginDimension(
+  xDim: number,
+  isRight: boolean,
+  container: IContainerModel,
+  currentTransform: [number, number],
+  dimensions: React.ReactNode[],
+  scale: number,
+  color: string
+): void {
+  const top = container.properties.margin.top;
+  if (top != null) {
+    const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`;
+    let yStart = container.properties.y + currentTransform[1];
+    let yEnd = yStart - top;
+    const textVert = top
+      .toFixed(0)
+      .toString();
+
+    if (isRight) {
+      [yStart, yEnd] = [yEnd, yStart];
+    }
+
+    dimensions.push(
+      <Dimension
+        key={idVert}
+        id={idVert}
+        xStart={xDim}
+        yStart={yStart}
+        xEnd={xDim}
+        yEnd={yEnd}
+        text={textVert}
+        scale={scale}
+        color={color}/>
+    );
+  }
+  const bottom = container.properties.margin.bottom;
+  if (bottom != null) {
+    const idVert = `dim-x-margin-bottom${xDim.toFixed(0)}-${container.properties.id}`;
+    let yStart = container.properties.y + container.properties.height + bottom + currentTransform[1];
+    let yEnd = yStart - bottom;
+    const textVert = bottom
+      .toFixed(0)
+      .toString();
+
+    if (isRight) {
+      [yStart, yEnd] = [yEnd, yStart];
+    }
+
+    dimensions.push(
+      <Dimension
+        key={idVert}
+        id={idVert}
+        xStart={xDim}
+        yStart={yStart}
+        xEnd={xDim}
+        yEnd={yEnd}
+        text={textVert}
+        scale={scale}
+        color={color}/>
+    );
+  }
+}

src/Enums/PropertyType.ts

@@ -23,5 +23,10 @@ export enum PropertyType {
   /**
    * Dimension options
    */
-  DimensionOptions,
+  SelfDimension,
+  SelfMarginDimension,
+  ChildrenDimensions,
+  DimensionWithMarks,
+  DimensionOptions
+
 }

src/Interfaces/IAvailableContainer.ts

@@ -4,9 +4,9 @@ import { PositionReference } from '../Enums/PositionReference';
 import { IAction } from './IAction';
 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';
 
 /** Model of available container used in application configuration */
 export interface IAvailableContainer {
@@ -113,22 +113,8 @@ export interface IAvailableContainer {
   /** Hide the children in the treeview */
   HideChildrenInTreeview?: boolean
 
-  /** if true, show the dimension of the container */
+  /** Dimensions options */
-  ShowSelfDimensions?: Position[]
+  DimensionOptions?: IDimensions
-
-  /** if true show the overall dimensions of its children */
-  ShowChildrenDimensions?: Position[]
-
-  /**
-   * if true, allows a parent dimension borrower to uses its x coordinate for 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 MarkPosition)
-   */
-  ShowDimensionWithMarks?: Position[]
 
   /**
    * if true, hide the entry in the sidebar (default: false)

src/Interfaces/IDimensionOptions.ts

@@ -0,0 +1,10 @@
+import { Position } from '../Enums/Position';
+
+export interface IDimensionOptions {
+
+  positions: Position[]
+  /**
+     * Stroke color
+     */
+  color: string
+}

src/Interfaces/IDimensions.ts

@@ -1,13 +1,17 @@
+
+import { IDimensionOptions } from './IDimensionOptions';
 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[]
+  selfDimensions: IDimensionOptions
+
+  /** if true, show the dimension of the container */
+  selfMarginsDimensions: IDimensionOptions
 
   /** if true show the overall dimensions of its children */
-  showChildrenDimensions: Position[]
+  childrenDimensions: IDimensionOptions
 
   /**
    * if true, allows a parent dimension borrower to borrow its x coordinate
@@ -19,5 +23,6 @@ export interface IDimensions {
    * 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[]
+  dimensionWithMarks: IDimensionOptions
+
 }

src/index.scss

@@ -124,6 +124,9 @@
         focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
         disabled:bg-slate-200 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
   }
+  .input-group[type='color'] {
+    @apply py-0
+  }
 
   .prop-category-body {
     @apply rounded-lg bg-slate-300 p-3

src/utils/default.ts

@@ -7,7 +7,6 @@ import { IContainerProperties } from '../Interfaces/IContainerProperties';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { ISymbolModel } from '../Interfaces/ISymbolModel';
 import { Orientation } from '../Enums/Orientation';
-import { Position } from '../Enums/Position';
 import { AppState } from '../Enums/AppState';
 
 /// EDITOR DEFAULTS ///
@@ -63,6 +62,7 @@ export const DEFAULTCHILDTYPE_MAX_DEPTH = 10;
 /// DIMENSIONS DEFAULTS ///
 
 export const SHOW_SELF_DIMENSIONS = true;
+export const SHOW_SELF_MARGINS_DIMENSIONS = true;
 export const SHOW_CHILDREN_DIMENSIONS = true;
 export const SHOW_BORROWER_DIMENSIONS = true;
 export const SHOW_DIMENSIONS_PER_DEPTH = false;
@@ -211,10 +211,23 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
   positionReference: PositionReference.TopLeft,
   hideChildrenInTreeview: false,
   dimensionOptions: {
-    showChildrenDimensions: [Position.Up, Position.Left],
+    childrenDimensions: {
-    showSelfDimensions: [Position.Up, Position.Left],
+      color: '#000000',
-    showDimensionWithMarks: [Position.Down, Position.Right],
+      positions: []
-    markPosition: []
+    },
+    selfDimensions: {
+      color: '#000000',
+      positions: []
+    },
+    selfMarginsDimensions: {
+      color: '#000000',
+      positions: []
+    },
+    markPosition: [],
+    dimensionWithMarks: {
+      color: '#000000',
+      positions: []
+    }
   },
   warning: '',
   style: DEFAULT_CONTAINER_STYLE
@@ -262,10 +275,23 @@ export function GetDefaultContainerProps(type: string,
     maxHeight: containerConfig.MaxWidth ?? Number.MAX_SAFE_INTEGER,
     hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
     dimensionOptions: {
-      showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [],
+      childrenDimensions: {
-      showSelfDimensions: containerConfig.ShowSelfDimensions ?? [],
+        color: containerConfig.DimensionOptions?.childrenDimensions.color ?? '#000000',
-      markPosition: containerConfig.MarkPosition ?? [],
+        positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
-      showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? []
+      },
+      selfDimensions: {
+        color: containerConfig.DimensionOptions?.selfDimensions.color ?? '#000000',
+        positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? []
+      },
+      selfMarginsDimensions: {
+        color: containerConfig.DimensionOptions?.selfMarginsDimensions.color ?? '#000000',
+        positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? []
+      },
+      markPosition: containerConfig.DimensionOptions?.markPosition ?? [],
+      dimensionWithMarks: {
+        color: containerConfig.DimensionOptions?.dimensionWithMarks.color ?? '#000000',
+        positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? []
+      }
     },
     warning: '',
     customSVG: containerConfig.CustomSVG,