Merged PR 311: #7975 Cotations sur les ancrages

Related work items: #7975
This commit is contained in:
parent
532151b939
commit
acb5ba2d82
7 changed files with 251 additions and 182 deletions
|
@ -1,4 +1,4 @@
|
|||
using System.Runtime.Serialization;
|
||||
using System.Runtime.Serialization;
|
||||
using System.Collections.Generic;
|
||||
|
||||
namespace SVGLDLibs.Models
|
||||
|
@ -26,5 +26,8 @@ namespace SVGLDLibs.Models
|
|||
|
||||
[DataMember(EmitDefaultValue = false)]
|
||||
public List<string> linkedContainers { get; set; }
|
||||
|
||||
[DataMember(EmitDefaultValue = false)]
|
||||
public List<bool> showDimension { get; set; }
|
||||
}
|
||||
}
|
|
@ -5,10 +5,18 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|||
import {
|
||||
SHOW_BORROWER_DIMENSIONS,
|
||||
SHOW_CHILDREN_DIMENSIONS,
|
||||
SHOW_SELF_DIMENSIONS,
|
||||
SHOW_SELF_MARGINS_DIMENSIONS
|
||||
SHOW_SELF_DIMENSIONS, SHOW_SELF_MARGINS_DIMENSIONS
|
||||
} from '../../utils/default';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
|
||||
import {
|
||||
ApplyWidthMargin,
|
||||
ApplyXMargin,
|
||||
RemoveWidthMargin,
|
||||
RemoveXMargin,
|
||||
RestoreX,
|
||||
RestoreY,
|
||||
TransformX,
|
||||
TransformY
|
||||
} from '../../utils/svg';
|
||||
import { Text } from '../Text/Text';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
||||
|
@ -38,7 +46,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.displayedText?.toString()}
|
||||
onChange={(value) => props.onChange('displayedText', value)} />
|
||||
onChange={(value) => props.onChange('displayedText', value)}/>
|
||||
<OrientationSelector
|
||||
id='orientation'
|
||||
name='Orientation'
|
||||
|
@ -63,7 +71,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.id.toString()}
|
||||
isDisabled={true} />
|
||||
isDisabled={true}/>
|
||||
</div>
|
||||
<div>
|
||||
<InputGroup
|
||||
|
@ -73,7 +81,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.parentId}
|
||||
isDisabled={true} />
|
||||
isDisabled={true}/>
|
||||
</div>
|
||||
<div>
|
||||
<InputGroup
|
||||
|
@ -83,7 +91,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.type}
|
||||
isDisabled={true} />
|
||||
isDisabled={true}/>
|
||||
</div>
|
||||
</div>
|
||||
</Category>
|
||||
|
@ -119,7 +127,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
)} />
|
||||
)}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-y`}
|
||||
labelText={Text({ textId: '@ContainerY' })}
|
||||
|
@ -142,7 +150,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
),
|
||||
props.properties.margin.top
|
||||
)
|
||||
)} />
|
||||
)}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -163,7 +171,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.minWidth.toString()}
|
||||
onChange={(value) => props.onChange('minWidth', Number(value))} />
|
||||
onChange={(value) => props.onChange('minWidth', Number(value))}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-width`}
|
||||
labelText={Text({ textId: '@ContainerWidth' })}
|
||||
|
@ -175,7 +183,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
max={props.properties.maxWidth}
|
||||
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))}
|
||||
isDisabled={props.properties.isFlex} />
|
||||
isDisabled={props.properties.isFlex}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-maxWidth`}
|
||||
labelText={Text({ textId: '@ContainerMaxWidth' })}
|
||||
|
@ -185,7 +193,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
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>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-minHeight`}
|
||||
|
@ -196,7 +204,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.minHeight.toString()}
|
||||
onChange={(value) => props.onChange('minHeight', Number(value))} />
|
||||
onChange={(value) => props.onChange('minHeight', Number(value))}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-height`}
|
||||
labelText={Text({ textId: '@ContainerHeight' })}
|
||||
|
@ -219,7 +227,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.maxHeight.toString()}
|
||||
onChange={(value) => props.onChange('maxHeight', Number(value))} />
|
||||
onChange={(value) => props.onChange('maxHeight', Number(value))}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -239,7 +247,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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
|
||||
id={`${props.properties.id}-mb`}
|
||||
labelText={Text({ textId: '@ContainerMarginBottom' })}
|
||||
|
@ -249,7 +257,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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
|
||||
id={`${props.properties.id}-mt`}
|
||||
labelText={Text({ textId: '@ContainerMarginTop' })}
|
||||
|
@ -259,7 +267,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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
|
||||
id={`${props.properties.id}-mr`}
|
||||
labelText={Text({ textId: '@ContainerMarginRight' })}
|
||||
|
@ -269,7 +277,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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>
|
||||
</Category>
|
||||
|
||||
|
@ -296,7 +304,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='ml-auto mr-auto block'
|
||||
type={ToggleType.Full}
|
||||
checked={props.properties.isAnchor}
|
||||
onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
|
||||
onChange={(event) => props.onChange('isAnchor', event.target.checked)}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -326,7 +334,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
value: symbol.id
|
||||
}))}
|
||||
value={props.properties.linkedSymbolId ?? ''}
|
||||
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
|
||||
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -339,168 +347,168 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<div className='grid grid-cols-1 gap-6 prop-category-body'>
|
||||
{
|
||||
SHOW_SELF_DIMENSIONS &&
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsSelfDimensions'
|
||||
attribute='positions'
|
||||
name='ShowSelfDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
value={props.properties.dimensionOptions.selfDimensions.positions}
|
||||
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>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsSelfDimensions'
|
||||
attribute='positions'
|
||||
name='ShowSelfDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
value={props.properties.dimensionOptions.selfDimensions.positions}
|
||||
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>
|
||||
<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='positionsChildrenDimensions'
|
||||
attribute='positions'
|
||||
name='ShowChildrenDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
value={props.properties.dimensionOptions.childrenDimensions.positions}
|
||||
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>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsChildrenDimensions'
|
||||
attribute='positions'
|
||||
name='ShowChildrenDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
value={props.properties.dimensionOptions.childrenDimensions.positions}
|
||||
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>
|
||||
}
|
||||
{
|
||||
SHOW_BORROWER_DIMENSIONS &&
|
||||
<>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.dimensionOptions.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsDimensionWithMarks'
|
||||
attribute='positions'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.positions}
|
||||
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>
|
||||
</>
|
||||
<>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.dimensionOptions.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsDimensionWithMarks'
|
||||
attribute='positions'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.positions}
|
||||
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>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
{ props.properties.style !== undefined &&
|
||||
<Category category={{
|
||||
Type: 'Style',
|
||||
DisplayedText: Text({ textId: '@ContainerStyle' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-stroke`}
|
||||
labelText={Text({ textId: '@StyleStroke' })}
|
||||
inputKey='stroke'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.stroke ?? 'black'}
|
||||
onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-strokeOpacity`}
|
||||
labelText={Text({ textId: '@StyleStrokeOpacity' })}
|
||||
inputKey='strokeOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.strokeOpacity ?? 1).toString()}
|
||||
onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-strokeWidth`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='strokeWidth'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='number'
|
||||
value={(props.properties.style.strokeWidth ?? 1).toString()}
|
||||
onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-fill`}
|
||||
labelText={Text({ textId: '@StyleFill' })}
|
||||
inputKey='fill'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.fill ?? 'black'}
|
||||
onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-fillOpacity`}
|
||||
labelText={Text({ textId: '@StyleFillOpacity' })}
|
||||
inputKey='fillOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.fillOpacity ?? 1).toString()}
|
||||
onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
|
||||
/>
|
||||
</div>
|
||||
</Category>
|
||||
{props.properties.style !== undefined &&
|
||||
<Category category={{
|
||||
Type: 'Style',
|
||||
DisplayedText: Text({ textId: '@ContainerStyle' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-stroke`}
|
||||
labelText={Text({ textId: '@StyleStroke' })}
|
||||
inputKey='stroke'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.stroke ?? 'black'}
|
||||
onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-strokeOpacity`}
|
||||
labelText={Text({ textId: '@StyleStrokeOpacity' })}
|
||||
inputKey='strokeOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.strokeOpacity ?? 1).toString()}
|
||||
onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-strokeWidth`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='strokeWidth'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='number'
|
||||
value={(props.properties.style.strokeWidth ?? 1).toString()}
|
||||
onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-fill`}
|
||||
labelText={Text({ textId: '@StyleFill' })}
|
||||
inputKey='fill'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.fill ?? 'black'}
|
||||
onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-fillOpacity`}
|
||||
labelText={Text({ textId: '@StyleFillOpacity' })}
|
||||
inputKey='fillOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.fillOpacity ?? 1).toString()}
|
||||
onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
|
||||
/>
|
||||
</div>
|
||||
</Category>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -12,9 +12,11 @@ import {
|
|||
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
import { Dimension } from './Dimension';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
|
||||
interface IDimensionLayerProps {
|
||||
containers: Map<string, IContainerModel>
|
||||
symbols: Map<string, ISymbolModel>
|
||||
root: IContainerModel
|
||||
scale: number
|
||||
}
|
||||
|
@ -35,7 +37,8 @@ function ActionByPosition(
|
|||
horizontalAction: (dim: number, ...params: any[]) => void,
|
||||
verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
|
||||
params: any[]
|
||||
): void {
|
||||
): boolean {
|
||||
let incrementDepthSymbols = false;
|
||||
positions.forEach((position: Position) => {
|
||||
const dim = dimMapped[position];
|
||||
switch (position) {
|
||||
|
@ -47,10 +50,12 @@ function ActionByPosition(
|
|||
}
|
||||
case Position.Down:
|
||||
case Position.Up:
|
||||
incrementDepthSymbols = true;
|
||||
horizontalAction(dim, ...params);
|
||||
break;
|
||||
}
|
||||
});
|
||||
return incrementDepthSymbols;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -58,7 +63,7 @@ function ActionByPosition(
|
|||
* @param param0 Object with the root container and the scale of the svg
|
||||
* @returns A list of dimensions
|
||||
*/
|
||||
function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
||||
function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
||||
const it = MakeRecursionDFSIterator(root, containers, 0, [0, 0]);
|
||||
const dimensions: React.ReactNode[] = [];
|
||||
const topDim = root.properties.y;
|
||||
|
@ -69,6 +74,7 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
if (!SHOW_SELF_DIMENSIONS) {
|
||||
return [];
|
||||
}
|
||||
let startDepthSymbols: number = 0;
|
||||
|
||||
for (const { container, depth, currentTransform } of it) {
|
||||
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
|
@ -78,7 +84,7 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
const containerRightDim = rightDim + offset;
|
||||
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.selfDimensions.positions,
|
||||
AddHorizontalSelfDimension,
|
||||
|
@ -90,10 +96,11 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
scale,
|
||||
container.properties.dimensionOptions.selfDimensions.color]
|
||||
);
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
|
||||
if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.positions,
|
||||
AddHorizontalSelfMarginsDimension,
|
||||
|
@ -105,12 +112,14 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
scale,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.color]
|
||||
);
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.dimensionWithMarks.positions,
|
||||
|
||||
AddHorizontalBorrowerDimension,
|
||||
AddVerticalBorrowerDimension,
|
||||
[
|
||||
|
@ -122,10 +131,11 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
scale,
|
||||
container.properties.dimensionOptions.dimensionWithMarks.color]
|
||||
);
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
|
||||
ActionByPosition(
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.childrenDimensions.positions,
|
||||
AddHorizontalChildrenDimension,
|
||||
|
@ -138,12 +148,50 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
scale,
|
||||
container.properties.dimensionOptions.childrenDimensions.color]
|
||||
);
|
||||
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
}
|
||||
|
||||
for (const symbol of symbols) {
|
||||
if (symbol[1].showDimension) {
|
||||
startDepthSymbols++;
|
||||
AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols);
|
||||
}
|
||||
}
|
||||
|
||||
return dimensions;
|
||||
}
|
||||
|
||||
function AddHorizontalSymbolDimension(symbol: ISymbolModel,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string,
|
||||
depth: number
|
||||
): void {
|
||||
const width = symbol.x + (symbol.width / 2);
|
||||
if (width != null && width > 0) {
|
||||
const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
|
||||
|
||||
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const text = width
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={0}
|
||||
yStart={-offset}
|
||||
xEnd={width}
|
||||
yEnd={-offset}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
|
@ -152,7 +200,7 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
return (
|
||||
<g>
|
||||
{ Dimensions(props) }
|
||||
{Dimensions(props)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
@ -230,7 +278,6 @@ function AddVerticalChildrenDimension(
|
|||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
|
||||
): void {
|
||||
const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
|
||||
|
||||
|
@ -451,7 +498,6 @@ function AddVerticalSelfDimension(
|
|||
}
|
||||
|
||||
function AddHorizontalSelfDimension(
|
||||
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
|
@ -481,7 +527,6 @@ function AddHorizontalSelfDimension(
|
|||
}
|
||||
|
||||
function AddHorizontalSelfMarginsDimension(
|
||||
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
|
|
|
@ -97,7 +97,7 @@ export function SVG(props: ISVGProps): JSX.Element {
|
|||
{SHOW_DIMENSIONS_PER_DEPTH
|
||||
? <DepthDimensionLayer containers={props.containers} scale={scale} roots={props.children} />
|
||||
: null}
|
||||
<DimensionLayer containers={props.containers} scale={scale} root={props.children} />
|
||||
<DimensionLayer containers={props.containers} symbols={props.symbols} scale={scale} root={props.children} />
|
||||
<SymbolLayer scale={scale} symbols={props.symbols} />
|
||||
<Selector containers={props.containers} scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
|
||||
</svg>
|
||||
|
|
|
@ -4,6 +4,8 @@ import { RestoreX, TransformX } from '../../utils/svg';
|
|||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
||||
import { Text } from '../Text/Text';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { ToggleButton } from '../ToggleButton/ToggleButton';
|
||||
|
||||
interface ISymbolFormProps {
|
||||
symbol: ISymbolModel
|
||||
|
@ -60,6 +62,13 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
|
|||
min={0}
|
||||
value={props.symbol.width.toString()}
|
||||
onChange={(value) => props.onChange('width', Number(value))} />
|
||||
<ToggleButton
|
||||
labelText={Text({ textId: '@ShowDimension' })}
|
||||
inputKey='showDimension'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
checked={props.symbol.showDimension}
|
||||
onChange={(e) => props.onChange('showDimension', e.target.checked)}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -26,4 +26,7 @@ export interface ISymbolModel {
|
|||
|
||||
/** List of linked container id */
|
||||
linkedContainers: Set<string>
|
||||
|
||||
/** Dimensions options */
|
||||
showDimension: boolean
|
||||
}
|
||||
|
|
|
@ -313,6 +313,7 @@ export function GetDefaultSymbolModel(name: string,
|
|||
x: 0,
|
||||
width: symbolConfig.Width ?? DEFAULT_SYMBOL_WIDTH,
|
||||
height: symbolConfig.Height ?? DEFAULT_SYMBOL_HEIGHT,
|
||||
linkedContainers: new Set()
|
||||
linkedContainers: new Set(),
|
||||
showDimension: false
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue