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

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

Browse source 
Related work items: #8224
This commit is contained in:
Carl Fuchs 2023-01-30 14:59:55 +00:00
parent 4e8f465405
commit a7feebdcd1
18 changed files with 425 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,12 @@ import * as React from 'react';
import { PropertyType } from '../../Enums/PropertyType';
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
import {
SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS,
SHOW_SELF_DIMENSIONS,
SHOW_SELF_MARGINS_DIMENSIONS
} from '../../utils/default';
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
import { Text } from '../Text/Text';
import { InputGroup } from '../InputGroup/InputGroup';
@ -336,24 +341,63 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
SHOW_SELF_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='showSelfDimensions'
id='positionsSelfDimensions'
attribute='positions'
name='ShowSelfDimensions'
labelText={Text({ textId: '@ContainerShowDimension' })}
value={props.properties.dimensionOptions.showSelfDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
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>
}
{
SHOW_CHILDREN_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='showChildrenDimensions'
id='positionsChildrenDimensions'
attribute='positions'
name='ShowChildrenDimensions'
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
value={props.properties.dimensionOptions.showChildrenDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
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>
}
{
@ -370,12 +414,21 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
</div>
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='showDimensionWithMarks'
id='positionsDimensionWithMarks'
attribute='positions'
name='ShowDimensionWithMarks'
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
value={props.properties.dimensionOptions.showDimensionWithMarks}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
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>
</>
}