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

Fix bug with colors and dimensions misapplied

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-23 12:21:05 +01:00
parent dcccfec1d2
commit cfbedd3e59
4 changed files with 25 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -385,7 +385,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.selfDimensions.color}
value={props.properties.dimensionOptions.selfDimensions.color ?? '#000000'}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/>
<TextInputGroup
id={`${props.properties.id}-selfDimensions-width`}
@ -425,7 +425,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.selfMarginsDimensions.color}
value={props.properties.dimensionOptions.selfMarginsDimensions.color ?? '#000000'}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/>
<TextInputGroup
id={`${props.properties.id}-selfMarginsDimensions-width`}
@ -465,7 +465,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.childrenDimensions.color}
value={props.properties.dimensionOptions.childrenDimensions.color ?? '#000000'}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/>
<TextInputGroup
id={`${props.properties.id}-childrenDimensions-width`}
@ -515,7 +515,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.dimensionWithMarks.color}
value={props.properties.dimensionOptions.dimensionWithMarks.color ?? '#000000'}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
<TextInputGroup
id={`${props.properties.id}-dimensionWithMarks-width`}
@ -550,16 +550,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
heightClass={`${categoryHeight}`}
>
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
<TextInputGroup
id={`${props.properties.id}-stroke`}
<InputGroup
labelText={Text({ textId: '@StyleStroke' })}
inputKey='stroke'
inputKey={`${props.properties.id}-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); }}
/>
type='color'
value={props.properties.style.stroke ?? '#000000'}
onChange={(e) => { props.onChange('stroke', e.target.value, PropertyType.Style); }}/>
<InputGroup
labelKey={`${props.properties.id}-strokeOpacity`}
labelText={Text({ textId: '@StyleStrokeOpacity' })}
@ -583,16 +581,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value={(props.properties.style.strokeWidth ?? 1).toString()}
onChange={(value) => { props.onChange('strokeWidth', Number(value), PropertyType.Style); }}
/>
<TextInputGroup
id={`${props.properties.id}-fill`}
<InputGroup
labelText={Text({ textId: '@StyleFill' })}
inputKey='fill'
inputKey={`${props.properties.id}-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); }}
/>
type='color'
value={props.properties.style.fill ?? '#000000'}
onChange={(e) => { props.onChange('fill', e.target.value, PropertyType.Style); }}/>
<InputGroup
labelKey={`${props.properties.id}-fillOpacity`}
labelText={Text({ textId: '@StyleFillOpacity' })}