diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/AvailableContainerModel.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/AvailableContainerModel.cs index d779007..c0050b9 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/AvailableContainerModel.cs +++ b/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) diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs new file mode 100644 index 0000000..a98e500 --- /dev/null +++ b/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; + + + + + } + +} diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs index 9e75da5..dfdbcfe 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs +++ b/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; } } diff --git a/src/Components/API/api.test.tsx b/src/Components/API/api.test.tsx index ca8ff72..53f3ae0 100644 --- a/src/Components/API/api.test.tsx +++ b/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: [ - Position.Down, - Position.Left, - Position.Right, - Position.Up - ], - ShowChildrenDimensions: [ - Position.Down, - Position.Left, - Position.Right, - Position.Up - ], - MarkPosition: [ - Orientation.Horizontal, - Orientation.Vertical - ], - ShowDimensionWithMarks: [ - Position.Down, - Position.Left, - Position.Right, - Position.Up - ], + DimensionOptions: { + childrenDimensions: { + color: '#000000', + positions: [] + }, + selfDimensions: { + color: '#000000', + positions: [] + }, + selfMarginsDimensions: { + color: '#000000', + positions: [] + }, + markPosition: [], + dimensionWithMarks: { + color: '#000000', + positions: [] + } + }, IsHidden: true, Blacklist: [ 'string' diff --git a/src/Components/Canvas/DimensionLayer.ts b/src/Components/Canvas/DimensionLayer.ts index 7387a64..1b40961 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.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, [ diff --git a/src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx b/src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx index f86ae64..ab87b9c 100644 --- a/src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx +++ b/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 { - onChange(id, newSelectedValues); + onChange(attribute, newSelectedValues); }} />; } diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx index 5f81461..55c8224 100644 --- a/src/Components/ContainerProperties/ContainerForm.tsx +++ b/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 &&
props.onChange(key, value, PropertyType.DimensionOptions)} + value={props.properties.dimensionOptions.selfDimensions.positions} + onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)} /> + props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
} + { + SHOW_SELF_MARGINS_DIMENSIONS && +
+ props.onChange(key, value, PropertyType.SelfMarginDimension)} + /> + props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/> +
+ } { SHOW_CHILDREN_DIMENSIONS &&
props.onChange(key, value, PropertyType.DimensionOptions)} + value={props.properties.dimensionOptions.childrenDimensions.positions} + onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)} /> + props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
} { @@ -370,12 +414,21 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
props.onChange(key, value, PropertyType.DimensionOptions)} + value={props.properties.dimensionOptions.dimensionWithMarks.positions} + onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)} /> + props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
} diff --git a/src/Components/ContainerProperties/ContainerProperties.test.tsx b/src/Components/ContainerProperties/ContainerProperties.test.tsx index 4a7b8f2..d02686c 100644 --- a/src/Components/ContainerProperties/ContainerProperties.test.tsx +++ b/src/Components/ContainerProperties/ContainerProperties.test.tsx @@ -43,10 +43,23 @@ describe.concurrent('Properties', () => { warning: '', hideChildrenInTreeview: false, dimensionOptions: { - showChildrenDimensions: [], - showSelfDimensions: [], - showDimensionWithMarks: [], - markPosition: [] + childrenDimensions: { + color: '#000000', + positions: [] + }, + selfDimensions: { + color: '#000000', + positions: [] + }, + selfMarginsDimensions: { + color: '#000000', + positions: [] + }, + markPosition: [], + dimensionWithMarks: { + color: '#000000', + positions: [] + } } }; diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index 01a1d22..131df82 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/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; diff --git a/src/Components/SVG/Elements/DepthDimensionLayer.tsx b/src/Components/SVG/Elements/DepthDimensionLayer.tsx index 77dd44f..f4bff37 100644 --- a/src/Components/SVG/Elements/DepthDimensionLayer.tsx +++ b/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} /> ); } diff --git a/src/Components/SVG/Elements/Dimension.tsx b/src/Components/SVG/Elements/Dimension.tsx index bd238ba..0848bea 100644 --- a/src/Components/SVG/Elements/Dimension.tsx +++ b/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 ( + style={style}/> + style={style}/> - + {props.text} diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 17ce3ef..c705909 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/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 containerTopDim = topDim - (DIMENSION_MARGIN * (depth + 1)) / scale; - const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale; - const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale; + const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; + const containerLeftDim = leftDim - offset; + const containerTopDim = topDim - offset; + 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( + + ); + } + + 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( + + ); + } +} + +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( + + ); + } + 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( + + ); + } +} diff --git a/src/Enums/PropertyType.ts b/src/Enums/PropertyType.ts index f73a837..edd78ff 100644 --- a/src/Enums/PropertyType.ts +++ b/src/Enums/PropertyType.ts @@ -23,5 +23,10 @@ export enum PropertyType { /** * Dimension options */ - DimensionOptions, + SelfDimension, + SelfMarginDimension, + ChildrenDimensions, + DimensionWithMarks, + DimensionOptions + } diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts index 90b2b7f..dab4e59 100644 --- a/src/Interfaces/IAvailableContainer.ts +++ b/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 */ - ShowSelfDimensions?: Position[] - - /** 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[] + /** Dimensions options */ + DimensionOptions?: IDimensions /** * if true, hide the entry in the sidebar (default: false) diff --git a/src/Interfaces/IDimensionOptions.ts b/src/Interfaces/IDimensionOptions.ts new file mode 100644 index 0000000..4c44adf --- /dev/null +++ b/src/Interfaces/IDimensionOptions.ts @@ -0,0 +1,10 @@ +import { Position } from '../Enums/Position'; + +export interface IDimensionOptions { + + positions: Position[] + /** + * Stroke color + */ + color: string +} diff --git a/src/Interfaces/IDimensions.ts b/src/Interfaces/IDimensions.ts index 4802860..c87bce7 100644 --- a/src/Interfaces/IDimensions.ts +++ b/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 + } diff --git a/src/index.scss b/src/index.scss index a276784..0122e22 100644 --- a/src/index.scss +++ b/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 diff --git a/src/utils/default.ts b/src/utils/default.ts index b5c6fa1..b0648b1 100644 --- a/src/utils/default.ts +++ b/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], - showSelfDimensions: [Position.Up, Position.Left], - showDimensionWithMarks: [Position.Down, Position.Right], - markPosition: [] + childrenDimensions: { + color: '#000000', + positions: [] + }, + 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 ?? [], - showSelfDimensions: containerConfig.ShowSelfDimensions ?? [], - markPosition: containerConfig.MarkPosition ?? [], - showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? [] + childrenDimensions: { + color: containerConfig.DimensionOptions?.childrenDimensions.color ?? '#000000', + positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? [] + }, + 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,