Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 330: Add DimensionStyle + Refactor dimensionLayer + Add width and dashArray to style

Browse source 
Add DimensionStyle + Refactor dimensionLayer + Add width and dashArray to style

Related work items: #7977
This commit is contained in:
Eric Nguyen 2023-02-13 14:54:50 +00:00
parent c6c4bd1e32
commit 338a2c157c
14 changed files with 475 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

51
csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs
View file

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

27
csharp/SVGLDLibs/SVGLDLibs/Models/DimensionStyle.cs Normal file
View file

@ -0,0 +1,27 @@
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 DimensionStyle
{
/** color */
[DataMember(EmitDefaultValue = false)]
public string color;
/** width */
[DataMember(EmitDefaultValue = false)]
public double width;
/** color */
[DataMember(EmitDefaultValue = false)]
public string dashArray;
}
}

452
src/Components/ContainerProperties/ContainerForm.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { PropertyType } from '../../Enums/PropertyType'; import { PropertyType } from '../../Enums/PropertyType';
import { IContainerProperties } from '../../Interfaces/IContainerProperties'; import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
import { ISymbolModel } from '../../Interfaces/ISymbolModel'; import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
import { import {
SHOW_BORROWER_DIMENSIONS, SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS,
@ -46,7 +46,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='string' type='string'
value={props.properties.displayedText?.toString()} value={props.properties.displayedText?.toString()}
onChange={(value) => props.onChange('displayedText', value)}/> onChange={(value) => { props.onChange('displayedText', value); }}/>
<OrientationSelector <OrientationSelector
id='orientation' id='orientation'
name='Orientation' name='Orientation'
@ -117,17 +117,19 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
props.properties.width, props.properties.width,
props.properties.positionReference props.properties.positionReference
).toString()} ).toString()}
onChange={(value) => props.onChange( onChange={(value) => {
'x', props.onChange(
ApplyXMargin( 'x',
RestoreX( ApplyXMargin(
Number(value), RestoreX(
props.properties.width, Number(value),
props.properties.positionReference props.properties.width,
), props.properties.positionReference
props.properties.margin.left ),
) props.properties.margin.left
)}/> )
);
}}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-y`} id={`${props.properties.id}-y`}
labelText={Text({ textId: '@ContainerY' })} labelText={Text({ textId: '@ContainerY' })}
@ -140,17 +142,19 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
props.properties.height, props.properties.height,
props.properties.positionReference props.properties.positionReference
).toString()} ).toString()}
onChange={(value) => props.onChange( onChange={(value) => {
'y', props.onChange(
ApplyXMargin( 'y',
RestoreY( ApplyXMargin(
Number(value), RestoreY(
props.properties.height, Number(value),
props.properties.positionReference props.properties.height,
), props.properties.positionReference
props.properties.margin.top ),
) props.properties.margin.top
)}/> )
);
}}/>
</div> </div>
</Category> </Category>
@ -171,7 +175,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.minWidth.toString()} value={props.properties.minWidth.toString()}
onChange={(value) => props.onChange('minWidth', Number(value))}/> onChange={(value) => { props.onChange('minWidth', Number(value)); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-width`} id={`${props.properties.id}-width`}
labelText={Text({ textId: '@ContainerWidth' })} labelText={Text({ textId: '@ContainerWidth' })}
@ -182,7 +186,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
min={props.properties.minWidth} min={props.properties.minWidth}
max={props.properties.maxWidth} max={props.properties.maxWidth}
value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()} value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))} onChange={(value) => { props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right)); }}
isDisabled={props.properties.isFlex}/> isDisabled={props.properties.isFlex}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-maxWidth`} id={`${props.properties.id}-maxWidth`}
@ -193,7 +197,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.maxWidth.toString()} value={props.properties.maxWidth.toString()}
onChange={(value) => props.onChange('maxWidth', Number(value))}/> onChange={(value) => { props.onChange('maxWidth', Number(value)); }}/>
<div className='col-span-5 p-3'></div> <div className='col-span-5 p-3'></div>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-minHeight`} id={`${props.properties.id}-minHeight`}
@ -204,7 +208,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.minHeight.toString()} value={props.properties.minHeight.toString()}
onChange={(value) => props.onChange('minHeight', Number(value))}/> onChange={(value) => { props.onChange('minHeight', Number(value)); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-height`} id={`${props.properties.id}-height`}
labelText={Text({ textId: '@ContainerHeight' })} labelText={Text({ textId: '@ContainerHeight' })}
@ -215,7 +219,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
min={props.properties.minHeight} min={props.properties.minHeight}
max={props.properties.maxHeight} max={props.properties.maxHeight}
value={(RemoveWidthMargin(props.properties.height, props.properties.margin.top, props.properties.margin.bottom)).toString()} value={(RemoveWidthMargin(props.properties.height, props.properties.margin.top, props.properties.margin.bottom)).toString()}
onChange={(value) => props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom))} onChange={(value) => { props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom)); }}
isDisabled={props.properties.isFlex} isDisabled={props.properties.isFlex}
/> />
<TextInputGroup <TextInputGroup
@ -227,7 +231,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.maxHeight.toString()} value={props.properties.maxHeight.toString()}
onChange={(value) => props.onChange('maxHeight', Number(value))}/> onChange={(value) => { props.onChange('maxHeight', Number(value)); }}/>
</div> </div>
</Category> </Category>
@ -247,7 +251,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.left ?? 0).toString()} value={(props.properties.margin.left ?? 0).toString()}
onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)}/> onChange={(value) => { props.onChange('left', Number(value), PropertyType.Margin); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-mb`} id={`${props.properties.id}-mb`}
labelText={Text({ textId: '@ContainerMarginBottom' })} labelText={Text({ textId: '@ContainerMarginBottom' })}
@ -257,7 +261,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.bottom ?? 0).toString()} value={(props.properties.margin.bottom ?? 0).toString()}
onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)}/> onChange={(value) => { props.onChange('bottom', Number(value), PropertyType.Margin); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-mt`} id={`${props.properties.id}-mt`}
labelText={Text({ textId: '@ContainerMarginTop' })} labelText={Text({ textId: '@ContainerMarginTop' })}
@ -267,7 +271,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.top ?? 0).toString()} value={(props.properties.margin.top ?? 0).toString()}
onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)}/> onChange={(value) => { props.onChange('top', Number(value), PropertyType.Margin); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-mr`} id={`${props.properties.id}-mr`}
labelText={Text({ textId: '@ContainerMarginRight' })} labelText={Text({ textId: '@ContainerMarginRight' })}
@ -277,7 +281,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.right ?? 0).toString()} value={(props.properties.margin.right ?? 0).toString()}
onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)}/> onChange={(value) => { props.onChange('right', Number(value), PropertyType.Margin); }}/>
</div> </div>
</Category> </Category>
@ -295,7 +299,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='ml-auto mr-auto block' inputClassName='ml-auto mr-auto block'
type={ToggleType.Full} type={ToggleType.Full}
checked={props.properties.isFlex} checked={props.properties.isFlex}
onChange={(event) => props.onChange('isFlex', event.target.checked)} onChange={(event) => { props.onChange('isFlex', event.target.checked); }}
/> />
<ToggleButton <ToggleButton
labelText={Text({ textId: '@ContainerAnchor' })} labelText={Text({ textId: '@ContainerAnchor' })}
@ -304,7 +308,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='ml-auto mr-auto block' inputClassName='ml-auto mr-auto block'
type={ToggleType.Full} type={ToggleType.Full}
checked={props.properties.isAnchor} checked={props.properties.isAnchor}
onChange={(event) => props.onChange('isAnchor', event.target.checked)}/> onChange={(event) => { props.onChange('isAnchor', event.target.checked); }}/>
</div> </div>
</Category> </Category>
@ -334,7 +338,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value: symbol.id value: symbol.id
}))} }))}
value={props.properties.linkedSymbolId ?? ''} value={props.properties.linkedSymbolId ?? ''}
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}/> onChange={(event) => { props.onChange('linkedSymbolId', event.target.value); }}/>
</div> </div>
</Category> </Category>
@ -347,168 +351,244 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
<div className='grid grid-cols-1 gap-6 prop-category-body'> <div className='grid grid-cols-1 gap-6 prop-category-body'>
{ {
SHOW_SELF_DIMENSIONS && SHOW_SELF_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'> <div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes <PositionCheckboxes
id='positionsSelfDimensions' id='positionsSelfDimensions'
attribute='positions' attribute='positions'
name='ShowSelfDimensions' name='ShowSelfDimensions'
labelText={Text({ textId: '@ContainerShowDimension' })} labelText={Text({ textId: '@ContainerShowDimension' })}
value={props.properties.dimensionOptions.selfDimensions.positions} value={props.properties.dimensionOptions.selfDimensions.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)} onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfDimension); }}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@StyleStrokeColor' })}
inputKey='color' inputKey='color'
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.selfDimensions.color} value={props.properties.dimensionOptions.selfDimensions.style.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimensionStyle); }}/>
</div> <TextInputGroup
id={`${props.properties.id}-selfDimensions-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
inputKey='width'
labelClassName=''
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.selfDimensions.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfDimensionStyle); }}/>
<TextInputGroup
id={`${props.properties.id}-selfDimensions-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
inputKey='dashArray'
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.selfDimensions.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfDimensionStyle); }}/>
</div>
} }
{ {
SHOW_SELF_MARGINS_DIMENSIONS && SHOW_SELF_MARGINS_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'> <div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes <PositionCheckboxes
id='positionsSelfMarginsDimensions' id='positionsSelfMarginsDimensions'
attribute='positions' attribute='positions'
name='ShowSelfMarginsDimensions' name='ShowSelfMarginsDimensions'
labelText={Text({ textId: '@ContainerShowMarginsDimension' })} labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
value={props.properties.dimensionOptions.selfMarginsDimensions.positions} value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)} onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfMarginDimension); }}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@StyleStrokeColor' })}
inputKey='color' inputKey='color'
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.selfMarginsDimensions.color} value={props.properties.dimensionOptions.selfMarginsDimensions.style.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimensionStyle); }}/>
</div> <TextInputGroup
id={`${props.properties.id}-selfMarginsDimensions-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
inputKey='width'
labelClassName=''
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.selfMarginsDimensions.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfMarginDimensionStyle); }}/>
<TextInputGroup
id={`${props.properties.id}-selfMarginsDimensions-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
inputKey='dashArray'
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.selfMarginsDimensions.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfMarginDimensionStyle); }}/>
</div>
} }
{ {
SHOW_CHILDREN_DIMENSIONS && SHOW_CHILDREN_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'> <div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes <PositionCheckboxes
id='positionsChildrenDimensions' id='positionsChildrenDimensions'
attribute='positions' attribute='positions'
name='ShowChildrenDimensions' name='ShowChildrenDimensions'
labelText={Text({ textId: '@ContainerShowChildrenDimension' })} labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
value={props.properties.dimensionOptions.childrenDimensions.positions} value={props.properties.dimensionOptions.childrenDimensions.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)} onChange={(key, value) => { props.onChange(key, value, PropertyType.ChildrenDimensions); }}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@StyleStrokeColor' })}
inputKey='color' inputKey='color'
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.childrenDimensions.color} value={props.properties.dimensionOptions.childrenDimensions.style.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensionsStyle); }}/>
</div> <TextInputGroup
id={`${props.properties.id}-childrenDimensions-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
inputKey='width'
labelClassName=''
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.childrenDimensions.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.ChildrenDimensionsStyle); }}/>
<TextInputGroup
id={`${props.properties.id}-childrenDimensions-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
inputKey='dashArray'
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.childrenDimensions.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.ChildrenDimensionsStyle); }}/>
</div>
} }
{ {
SHOW_BORROWER_DIMENSIONS && SHOW_BORROWER_DIMENSIONS &&
<> <>
<div className='grid grid-cols-1 gap-2'> <div className='grid grid-cols-1 gap-2'>
<OrientationCheckboxes <OrientationCheckboxes
id='markPosition' id='markPosition'
name='MarkPosition' name='MarkPosition'
value={props.properties.dimensionOptions.markPosition} value={props.properties.dimensionOptions.markPosition}
labelText={Text({ textId: '@ContainerMarkPosition' })} labelText={Text({ textId: '@ContainerMarkPosition' })}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)} onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionOptions); }}
/> />
</div> </div>
<div className='grid grid-cols-1 gap-2'> <div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes <PositionCheckboxes
id='positionsDimensionWithMarks' id='positionsDimensionWithMarks'
attribute='positions' attribute='positions'
name='ShowDimensionWithMarks' name='ShowDimensionWithMarks'
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })} labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
value={props.properties.dimensionOptions.dimensionWithMarks.positions} value={props.properties.dimensionOptions.dimensionWithMarks.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)} onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionWithMarks); }}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@StyleStrokeColor' })}
inputKey='color' inputKey='color'
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.dimensionWithMarks.color} value={props.properties.dimensionOptions.dimensionWithMarks.style.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarksStyle); }}/>
</div> <TextInputGroup
</> id={`${props.properties.id}-dimensionWithMarks-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
inputKey='width'
labelClassName=''
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.dimensionWithMarks.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.DimensionWithMarksStyle); }}/>
<TextInputGroup
id={`${props.properties.id}-dimensionWithMarks-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
inputKey='dashArray'
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.dimensionWithMarks.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.DimensionWithMarksStyle); }}/>
</div>
</>
} }
</div> </div>
</Category> </Category>
{props.properties.style !== undefined && {props.properties.style !== undefined &&
<Category category={{ <Category category={{
Type: 'Style', Type: 'Style',
DisplayedText: Text({ textId: '@ContainerStyle' }) DisplayedText: Text({ textId: '@ContainerStyle' })
}} }}
heightClass={`${categoryHeight}`} heightClass={`${categoryHeight}`}
> >
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'> <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-stroke`} id={`${props.properties.id}-stroke`}
labelText={Text({ textId: '@StyleStroke' })} labelText={Text({ textId: '@StyleStroke' })}
inputKey='stroke' inputKey='stroke'
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='string' type='string'
value={props.properties.style.stroke ?? 'black'} value={props.properties.style.stroke ?? 'black'}
onChange={(value) => props.onChange('stroke', value, PropertyType.Style)} onChange={(value) => { props.onChange('stroke', value, PropertyType.Style); }}
/> />
<InputGroup <InputGroup
labelKey={`${props.properties.id}-strokeOpacity`} labelKey={`${props.properties.id}-strokeOpacity`}
labelText={Text({ textId: '@StyleStrokeOpacity' })} labelText={Text({ textId: '@StyleStrokeOpacity' })}
inputKey='strokeOpacity' inputKey='strokeOpacity'
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='range' type='range'
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
value={(props.properties.style.strokeOpacity ?? 1).toString()} value={(props.properties.style.strokeOpacity ?? 1).toString()}
onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)} onChange={(event) => { props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style); }}
/> />
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-strokeWidth`} id={`${props.properties.id}-strokeWidth`}
labelText={Text({ textId: '@StyleStrokeWidth' })} labelText={Text({ textId: '@StyleStrokeWidth' })}
inputKey='strokeWidth' inputKey='strokeWidth'
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='number' type='number'
value={(props.properties.style.strokeWidth ?? 1).toString()} value={(props.properties.style.strokeWidth ?? 1).toString()}
onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)} onChange={(value) => { props.onChange('strokeWidth', Number(value), PropertyType.Style); }}
/> />
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-fill`} id={`${props.properties.id}-fill`}
labelText={Text({ textId: '@StyleFill' })} labelText={Text({ textId: '@StyleFill' })}
inputKey='fill' inputKey='fill'
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='string' type='string'
value={props.properties.style.fill ?? 'black'} value={props.properties.style.fill ?? 'black'}
onChange={(value) => props.onChange('fill', value, PropertyType.Style)} onChange={(value) => { props.onChange('fill', value, PropertyType.Style); }}
/> />
<InputGroup <InputGroup
labelKey={`${props.properties.id}-fillOpacity`} labelKey={`${props.properties.id}-fillOpacity`}
labelText={Text({ textId: '@StyleFillOpacity' })} labelText={Text({ textId: '@StyleFillOpacity' })}
inputKey='fillOpacity' inputKey='fillOpacity'
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='range' type='range'
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
value={(props.properties.style.fillOpacity ?? 1).toString()} value={(props.properties.style.fillOpacity ?? 1).toString()}
onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)} onChange={(event) => { props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style); }}
/> />
</div> </div>
</Category> </Category>
} }
</div> </div>
); );

12
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -362,6 +362,18 @@ function AssignProperty(container: IContainerModel, key: string, value: string |
case PropertyType.DimensionWithMarks: case PropertyType.DimensionWithMarks:
(container.properties.dimensionOptions.dimensionWithMarks as any)[key] = value; (container.properties.dimensionOptions.dimensionWithMarks as any)[key] = value;
break; break;
case PropertyType.SelfDimensionStyle:
(container.properties.dimensionOptions.selfDimensions.style as any)[key] = value;
break;
case PropertyType.SelfMarginDimensionStyle:
(container.properties.dimensionOptions.selfMarginsDimensions.style as any)[key] = value;
break;
case PropertyType.ChildrenDimensionsStyle:
(container.properties.dimensionOptions.childrenDimensions.style as any)[key] = value;
break;
case PropertyType.DimensionWithMarksStyle:
(container.properties.dimensionOptions.dimensionWithMarks.style as any)[key] = value;
break;
case PropertyType.DimensionOptions: case PropertyType.DimensionOptions:
(container.properties.dimensionOptions as any)[key] = value; (container.properties.dimensionOptions as any)[key] = value;
break; break;

12
src/Components/SVG/Elements/Dimension.tsx
View file

@ -1,4 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { type IDimensionStyle } from '../../../Interfaces/IDimensionStyle';
import { NOTCHES_LENGTH } from '../../../utils/default'; import { NOTCHES_LENGTH } from '../../../utils/default';
interface IDimensionProps { interface IDimensionProps {
@ -8,7 +9,7 @@ interface IDimensionProps {
xEnd: number xEnd: number
yEnd: number yEnd: number
text: string text: string
color: string style: IDimensionStyle
scale?: number scale?: number
} }
@ -28,8 +29,9 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
export function Dimension(props: IDimensionProps): JSX.Element { export function Dimension(props: IDimensionProps): JSX.Element {
const scale = props.scale ?? 1; const scale = props.scale ?? 1;
const style: React.CSSProperties = { const style: React.CSSProperties = {
stroke: props.color, stroke: props.style.color,
strokeWidth: 2 / scale strokeWidth: (props.style.width ?? 2) / scale,
strokeDasharray: props.style.dashArray
}; };
/// We need to find the points of the notches /// We need to find the points of the notches
@ -79,9 +81,11 @@ export function Dimension(props: IDimensionProps): JSX.Element {
x2={endBottomX} x2={endBottomX}
y2={endBottomY} y2={endBottomY}
style={style}/> style={style}/>
<text textAnchor={'middle'} alignmentBaseline={'central'} <text
x={textX} x={textX}
y={textY} y={textY}
textAnchor={'middle'}
alignmentBaseline={'central'}
style={{ style={{
transform: `rotate(${rotation}turn) scale(${1 / scale})`, transform: `rotate(${rotation}turn) scale(${1 / scale})`,
transformOrigin: `${textX}px ${textY}px` transformOrigin: `${textX}px ${textY}px`

111
src/Components/SVG/Elements/DimensionLayer.tsx
View file

@ -1,7 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { Position } from '../../../Enums/Position'; import { Position } from '../../../Enums/Position';
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { import {
DIMENSION_MARGIN, DIMENSION_MARGIN,
SHOW_BORROWER_DIMENSIONS, SHOW_BORROWER_DIMENSIONS,
@ -12,7 +11,9 @@ import {
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
import { TransformX, TransformY } from '../../../utils/svg'; import { TransformX, TransformY } from '../../../utils/svg';
import { Dimension } from './Dimension'; import { Dimension } from './Dimension';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { type IDimensionStyle } from '../../../Interfaces/IDimensionStyle';
interface IDimensionLayerProps { interface IDimensionLayerProps {
containers: Map<string, IContainerModel> containers: Map<string, IContainerModel>
@ -37,8 +38,7 @@ function ActionByPosition(
horizontalAction: (dim: number, ...params: any[]) => void, horizontalAction: (dim: number, ...params: any[]) => void,
verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void, verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
params: any[] params: any[]
): boolean { ): void {
let incrementDepthSymbols = false;
positions.forEach((position: Position) => { positions.forEach((position: Position) => {
const dim = dimMapped[position]; const dim = dimMapped[position];
switch (position) { switch (position) {
@ -50,12 +50,10 @@ function ActionByPosition(
} }
case Position.Down: case Position.Down:
case Position.Up: case Position.Up:
incrementDepthSymbols = true;
horizontalAction(dim, ...params); horizontalAction(dim, ...params);
break; break;
} }
}); });
return incrementDepthSymbols;
} }
/** /**
@ -74,7 +72,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
if (!SHOW_SELF_DIMENSIONS) { if (!SHOW_SELF_DIMENSIONS) {
return []; return [];
} }
let startDepthSymbols: number = 0;
for (const { container, depth, currentTransform } of it) { for (const { container, depth, currentTransform } of it) {
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
@ -84,7 +81,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
const containerRightDim = rightDim + offset; const containerRightDim = rightDim + offset;
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim]; const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) { if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
const incrementDepthSymbol = ActionByPosition( ActionByPosition(
dimMapped, dimMapped,
container.properties.dimensionOptions.selfDimensions.positions, container.properties.dimensionOptions.selfDimensions.positions,
AddHorizontalSelfDimension, AddHorizontalSelfDimension,
@ -93,14 +90,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
container, container,
currentTransform, currentTransform,
dimensions, dimensions,
scale, scale
container.properties.dimensionOptions.selfDimensions.color] ]
); );
if (incrementDepthSymbol) { startDepthSymbols++; }
} }
if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) { if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
const incrementDepthSymbol = ActionByPosition( ActionByPosition(
dimMapped, dimMapped,
container.properties.dimensionOptions.selfMarginsDimensions.positions, container.properties.dimensionOptions.selfMarginsDimensions.positions,
AddHorizontalSelfMarginsDimension, AddHorizontalSelfMarginsDimension,
@ -109,14 +105,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
container, container,
currentTransform, currentTransform,
dimensions, dimensions,
scale, scale
container.properties.dimensionOptions.selfMarginsDimensions.color] ]
); );
if (incrementDepthSymbol) { startDepthSymbols++; }
} }
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) { if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
const incrementDepthSymbol = ActionByPosition( ActionByPosition(
dimMapped, dimMapped,
container.properties.dimensionOptions.dimensionWithMarks.positions, container.properties.dimensionOptions.dimensionWithMarks.positions,
@ -128,14 +123,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
depth, depth,
currentTransform, currentTransform,
dimensions, dimensions,
scale, scale
container.properties.dimensionOptions.dimensionWithMarks.color] ]
); );
if (incrementDepthSymbol) { startDepthSymbols++; }
} }
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) { if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
const incrementDepthSymbol = ActionByPosition( ActionByPosition(
dimMapped, dimMapped,
container.properties.dimensionOptions.childrenDimensions.positions, container.properties.dimensionOptions.childrenDimensions.positions,
AddHorizontalChildrenDimension, AddHorizontalChildrenDimension,
@ -145,28 +139,32 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
container, container,
currentTransform, currentTransform,
dimensions, dimensions,
scale, scale
container.properties.dimensionOptions.childrenDimensions.color] ]
); );
if (incrementDepthSymbol) { startDepthSymbols++; }
} }
} }
let startDepthSymbols: number = 0;
for (const symbol of symbols) { for (const symbol of symbols) {
if (symbol[1].showDimension) { if (symbol[1].showDimension) {
startDepthSymbols++; startDepthSymbols++;
AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols); AddHorizontalSymbolDimension(
symbol[1],
dimensions,
scale,
startDepthSymbols
);
} }
} }
return dimensions; return dimensions;
} }
function AddHorizontalSymbolDimension(symbol: ISymbolModel, function AddHorizontalSymbolDimension(
symbol: ISymbolModel,
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number,
color: string,
depth: number depth: number
): void { ): void {
const width = symbol.x + (symbol.width / 2); const width = symbol.x + (symbol.width / 2);
@ -177,6 +175,11 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
const text = width const text = width
.toFixed(0) .toFixed(0)
.toString(); .toString();
// TODO: Put this in default.ts
const defaultDimensionSymbolStyle: IDimensionStyle = {
color: 'black'
};
dimensions.push( dimensions.push(
<Dimension <Dimension
key={id} key={id}
@ -187,7 +190,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
yEnd={-offset} yEnd={-offset}
text={text} text={text}
scale={scale} scale={scale}
color={color}/> style={defaultDimensionSymbolStyle}/>
); );
} }
} }
@ -213,10 +216,10 @@ function AddHorizontalChildrenDimension(
container: IContainerModel, container: IContainerModel,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const childrenId = `dim-y${yDim.toFixed(0)}-children-${container.properties.id}`; const childrenId = `dim-y${yDim.toFixed(0)}-children-${container.properties.id}`;
const style = container.properties.dimensionOptions.childrenDimensions.style;
const lastChildId = container.children[container.children.length - 1]; const lastChildId = container.children[container.children.length - 1];
const lastChild = FindContainerById(containers, lastChildId); const lastChild = FindContainerById(containers, lastChildId);
@ -266,7 +269,7 @@ function AddHorizontalChildrenDimension(
yEnd={yDim} yEnd={yDim}
text={textChildren} text={textChildren}
scale={scale} scale={scale}
color={color}/>); style={style}/>);
} }
function AddVerticalChildrenDimension( function AddVerticalChildrenDimension(
@ -276,10 +279,10 @@ function AddVerticalChildrenDimension(
container: IContainerModel, container: IContainerModel,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`; const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
const style = container.properties.dimensionOptions.childrenDimensions.style;
const lastChildId = container.children[container.children.length - 1]; const lastChildId = container.children[container.children.length - 1];
const lastChild = FindContainerById(containers, lastChildId); const lastChild = FindContainerById(containers, lastChildId);
@ -334,7 +337,7 @@ function AddVerticalChildrenDimension(
yEnd={yChildrenEnd + offset} yEnd={yChildrenEnd + offset}
text={textChildren} text={textChildren}
scale={scale} scale={scale}
color={color} style={style}
/>); />);
} }
@ -345,9 +348,9 @@ function AddHorizontalBorrowerDimension(
depth: number, depth: number,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const style = container.properties.dimensionOptions.dimensionWithMarks.style;
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform); const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
const marks = []; // list of vertical lines for the dimension const marks = []; // list of vertical lines for the dimension
for (const { for (const {
@ -392,7 +395,7 @@ function AddHorizontalBorrowerDimension(
yEnd={yDim} yEnd={yDim}
text={value.toFixed(0)} text={value.toFixed(0)}
scale={scale} scale={scale}
color={color}/>); style={style}/>);
count++; count++;
} }
} }
@ -405,9 +408,9 @@ function AddVerticalBorrowerDimension(
depth: number, depth: number,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const style = container.properties.dimensionOptions.dimensionWithMarks.style;
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform); const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
const marks = []; // list of vertical lines for the dimension const marks = []; // list of vertical lines for the dimension
for (const { for (const {
@ -457,7 +460,7 @@ function AddVerticalBorrowerDimension(
yEnd={next} yEnd={next}
text={value.toFixed(0)} text={value.toFixed(0)}
scale={scale} scale={scale}
color={color}/>); style={style}/>);
count++; count++;
} }
} }
@ -468,9 +471,9 @@ function AddVerticalSelfDimension(
container: IContainerModel, container: IContainerModel,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const style = container.properties.dimensionOptions.selfDimensions.style;
const height = container.properties.height; const height = container.properties.height;
const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`; const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
let yStart = container.properties.y + currentTransform[1] + height; let yStart = container.properties.y + currentTransform[1] + height;
@ -493,7 +496,7 @@ function AddVerticalSelfDimension(
yEnd={yEnd} yEnd={yEnd}
text={textVert} text={textVert}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
@ -502,9 +505,9 @@ function AddHorizontalSelfDimension(
container: IContainerModel, container: IContainerModel,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const style = container.properties.dimensionOptions.selfDimensions.style;
const width = container.properties.width; const width = container.properties.width;
const id = `dim-y${yDim.toFixed(0)}-${container.properties.id}`; const id = `dim-y${yDim.toFixed(0)}-${container.properties.id}`;
const xStart = container.properties.x + currentTransform[0]; const xStart = container.properties.x + currentTransform[0];
@ -522,7 +525,7 @@ function AddHorizontalSelfDimension(
yEnd={yDim} yEnd={yDim}
text={text} text={text}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
@ -531,9 +534,9 @@ function AddHorizontalSelfMarginsDimension(
container: IContainerModel, container: IContainerModel,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const style = container.properties.dimensionOptions.selfMarginsDimensions.style;
const left = container.properties.margin.left; const left = container.properties.margin.left;
if (left != null) { if (left != null) {
const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`; const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`;
@ -552,7 +555,7 @@ function AddHorizontalSelfMarginsDimension(
yEnd={yDim} yEnd={yDim}
text={text} text={text}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
@ -574,7 +577,7 @@ function AddHorizontalSelfMarginsDimension(
yEnd={yDim} yEnd={yDim}
text={text} text={text}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
} }
@ -585,9 +588,9 @@ function AddVerticalSelfMarginDimension(
container: IContainerModel, container: IContainerModel,
currentTransform: [number, number], currentTransform: [number, number],
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number
color: string
): void { ): void {
const style = container.properties.dimensionOptions.selfMarginsDimensions.style;
const top = container.properties.margin.top; const top = container.properties.margin.top;
if (top != null) { if (top != null) {
const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`; const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`;
@ -611,7 +614,7 @@ function AddVerticalSelfMarginDimension(
yEnd={yEnd} yEnd={yEnd}
text={textVert} text={textVert}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
const bottom = container.properties.margin.bottom; const bottom = container.properties.margin.bottom;
@ -637,7 +640,7 @@ function AddVerticalSelfMarginDimension(
yEnd={yEnd} yEnd={yEnd}
text={textVert} text={textVert}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
} }

15
src/Enums/PropertyType.ts
View file

@ -24,9 +24,16 @@ export enum PropertyType {
* Dimension options * Dimension options
*/ */
SelfDimension, SelfDimension,
SelfMarginDimension, SelfDimensionStyle,
ChildrenDimensions,
DimensionWithMarks,
DimensionOptions
SelfMarginDimension,
SelfMarginDimensionStyle,
ChildrenDimensions,
ChildrenDimensionsStyle,
DimensionWithMarks,
DimensionWithMarksStyle,
DimensionOptions
} }

16
src/Interfaces/IAvailableContainer.ts
View file

@ -1,12 +1,12 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { AddMethod } from '../Enums/AddMethod'; import { type AddMethod } from '../Enums/AddMethod';
import { PositionReference } from '../Enums/PositionReference'; import { type PositionReference } from '../Enums/PositionReference';
import { IAction } from './IAction'; import { type IAction } from './IAction';
import { IMargin } from './IMargin'; import { type IMargin } from './IMargin';
import { Orientation } from '../Enums/Orientation'; import { type Orientation } from '../Enums/Orientation';
import { IKeyValue } from './IKeyValue'; import { type IKeyValue } from './IKeyValue';
import { IStyle } from './IStyle'; import { type IStyle } from './IStyle';
import { IDimensions } from './IDimensions'; import { type IDimensions } from './IDimensions';
/** Model of available container used in application configuration */ /** Model of available container used in application configuration */
export interface IAvailableContainer { export interface IAvailableContainer {

9
src/Interfaces/IDimensionOptions.ts
View file

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

12
src/Interfaces/IDimensionStyle.ts Normal file
View file

@ -0,0 +1,12 @@
export interface IDimensionStyle {
/**
* Stroke color
*/
color?: string
/** stroke-width */
width?: number
/** stroke-dasharray */
dashArray?: string
}

2
src/Interfaces/ISymbolModel.ts
View file

@ -1,4 +1,4 @@
import { IAvailableSymbol } from './IAvailableSymbol'; import { type IAvailableSymbol } from './IAvailableSymbol';
export interface ISymbolModel { export interface ISymbolModel {
/** Identifier */ /** Identifier */

9
src/Translations/translation.en.json
View file

@ -59,11 +59,14 @@
"@ContainerAlignmentInput": "Alignment", "@ContainerAlignmentInput": "Alignment",
"@ContainerAlignWithSymbol": "Align to symbol", "@ContainerAlignWithSymbol": "Align to symbol",
"@ContainerDimensions": "Dimensions", "@ContainerDimensions": "Dimensions",
"@ContainerShowDimension": "Show Dimension", "@ContainerShowDimension": "Show dimensions",
"@ContainerShowChildrenDimension": "Show surrounding dimension of children", "@ContainerShowChildrenDimension": "Show surrounding dimensions of children",
"@ContainerMarkPosition": "Mark the position for the parents", "@ContainerMarkPosition": "Mark the position for the parents",
"@ContainerShowDimensionWithMarks": "Show dimension with marked children", "@ContainerShowDimensionWithMarks": "Show dimensions with marked children",
"@ContainerShowMarginsDimension": "Show margins dimensions",
"@ContainerStyle": "Style", "@ContainerStyle": "Style",
"@StyleStrokeColor": "Stroke Color",
"@StyleStrokeDashArray": "Stroke Dash Array",
"@StyleStroke": "Stroke", "@StyleStroke": "Stroke",
"@StyleStrokeOpacity": "Stroke Opacity", "@StyleStrokeOpacity": "Stroke Opacity",
"@StyleStrokeWidth": "Stroke Width", "@StyleStrokeWidth": "Stroke Width",

3
src/Translations/translation.fr.json
View file

@ -63,7 +63,10 @@
"@ContainerShowChildrenDimension": "Afficher les cotations englobante des enfants", "@ContainerShowChildrenDimension": "Afficher les cotations englobante des enfants",
"@ContainerMarkPosition": "Marquer la position pour les parents", "@ContainerMarkPosition": "Marquer la position pour les parents",
"@ContainerShowDimensionWithMarks": "Afficher les cotations avec les enfants marqués", "@ContainerShowDimensionWithMarks": "Afficher les cotations avec les enfants marqués",
"@ContainerShowMarginsDimension": "Afficher les cotations des marges",
"@ContainerStyle": "Style", "@ContainerStyle": "Style",
"@StyleStrokeColor": "Couleur du tracé",
"@StyleStrokeDashArray": "Tableau de traits",
"@StyleStroke": "Tracé", "@StyleStroke": "Tracé",
"@StyleStrokeOpacity": "Opacité du tracé", "@StyleStrokeOpacity": "Opacité du tracé",
"@StyleStrokeWidth": "Epaisseur du tracé", "@StyleStrokeWidth": "Epaisseur du tracé",

68
src/utils/default.ts
View file

@ -1,13 +1,14 @@
import { PositionReference } from '../Enums/PositionReference'; import { PositionReference } from '../Enums/PositionReference';
import { IAvailableContainer } from '../Interfaces/IAvailableContainer'; import { type IAvailableContainer } from '../Interfaces/IAvailableContainer';
import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol'; import { type IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
import { IConfiguration } from '../Interfaces/IConfiguration'; import { type IConfiguration } from '../Interfaces/IConfiguration';
import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel'; import { ContainerModel, type IContainerModel } from '../Interfaces/IContainerModel';
import { IContainerProperties } from '../Interfaces/IContainerProperties'; import { type IContainerProperties } from '../Interfaces/IContainerProperties';
import { IEditorState } from '../Interfaces/IEditorState'; import { type IEditorState } from '../Interfaces/IEditorState';
import { ISymbolModel } from '../Interfaces/ISymbolModel'; import { type ISymbolModel } from '../Interfaces/ISymbolModel';
import { Orientation } from '../Enums/Orientation'; import { Orientation } from '../Enums/Orientation';
import { AppState } from '../Enums/AppState'; import { AppState } from '../Enums/AppState';
import { type IDimensionOptions } from '../Interfaces/IDimensionOptions';
/// EDITOR DEFAULTS /// /// EDITOR DEFAULTS ///
@ -187,6 +188,16 @@ const DEFAULT_CONTAINER_STYLE = {
strokeWidth: 2 strokeWidth: 2
}; };
const DEFAULT_DIMENSION_STYLE = {
color: '#000000',
width: 2
};
const DEFAULT_DIMENSION_OPTION: IDimensionOptions = {
positions: [],
style: DEFAULT_DIMENSION_STYLE
};
/** /**
* Default Main container properties * Default Main container properties
*/ */
@ -211,23 +222,11 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
positionReference: PositionReference.TopLeft, positionReference: PositionReference.TopLeft,
hideChildrenInTreeview: false, hideChildrenInTreeview: false,
dimensionOptions: { dimensionOptions: {
childrenDimensions: { childrenDimensions: clone(DEFAULT_DIMENSION_OPTION),
color: '#000000', selfDimensions: clone(DEFAULT_DIMENSION_OPTION),
positions: [] selfMarginsDimensions: clone(DEFAULT_DIMENSION_OPTION),
},
selfDimensions: {
color: '#000000',
positions: []
},
selfMarginsDimensions: {
color: '#000000',
positions: []
},
markPosition: [], markPosition: [],
dimensionWithMarks: { dimensionWithMarks: clone(DEFAULT_DIMENSION_OPTION)
color: '#000000',
positions: []
}
}, },
warning: '', warning: '',
style: DEFAULT_CONTAINER_STYLE style: DEFAULT_CONTAINER_STYLE
@ -276,21 +275,21 @@ export function GetDefaultContainerProps(type: string,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false, hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
dimensionOptions: { dimensionOptions: {
childrenDimensions: { childrenDimensions: {
color: containerConfig.DimensionOptions?.childrenDimensions.color ?? '#000000', positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? [],
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? [] style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
}, },
selfDimensions: { selfDimensions: {
color: containerConfig.DimensionOptions?.selfDimensions.color ?? '#000000', positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? [],
positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? [] style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
}, },
selfMarginsDimensions: { selfMarginsDimensions: {
color: containerConfig.DimensionOptions?.selfMarginsDimensions.color ?? '#000000', positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? [],
positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? [] style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
}, },
markPosition: containerConfig.DimensionOptions?.markPosition ?? [], markPosition: containerConfig.DimensionOptions?.markPosition ?? [],
dimensionWithMarks: { dimensionWithMarks: {
color: containerConfig.DimensionOptions?.dimensionWithMarks.color ?? '#000000', positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? [],
positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? [] style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
} }
}, },
warning: '', warning: '',
@ -317,3 +316,10 @@ export function GetDefaultSymbolModel(name: string,
showDimension: false showDimension: false
}; };
} }
/**
* Macro function for JSON.parse(JSON.stringify(obj))
*/
function clone<T>(object: T): T {
return JSON.parse(JSON.stringify(object));
}