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' })}

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

@ -31,7 +31,7 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
export function Dimension(props: IDimensionProps): JSX.Element {
const scale = props.scale ?? 1;
const style: React.CSSProperties = {
stroke: props.style.color,
stroke: props.style.color ?? '#000000',
strokeWidth: (props.style.width ?? 2) / scale,
strokeDasharray: props.style.dashArray
};

2
src/utils/default.ts
View file

@ -275,7 +275,7 @@ export function GetDefaultContainerProps(type: string,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
dimensionOptions: {
childrenDimensions: {
...containerConfig.DimensionOptions?.selfDimensions,
...containerConfig.DimensionOptions?.childrenDimensions,
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
},
selfDimensions: {

18
test-server/http.js
View file

@ -81,7 +81,7 @@ const GetSVGLayoutConfiguration = () => {
Style: {
fillOpacity: 1,
strokeWidth: 2,
stroke: 'red',
stroke: '#ff0000',
fill: '#d3c9b7',
},
IsFlex: true,
@ -96,7 +96,7 @@ const GetSVGLayoutConfiguration = () => {
Style: {
fillOpacity: 1,
strokeWidth: 2,
stroke: 'red',
stroke: '#ff0000',
fill: '#d3c9b7',
},
IsFlex: true,
@ -115,8 +115,8 @@ const GetSVGLayoutConfiguration = () => {
Style: {
fillOpacity: 1,
strokeWidth: 2,
stroke: 'green',
fill: 'white'
stroke: '#00ff00',
fill: '#ffffff'
},
Category: "Stuff",
IsFlex: true,
@ -258,8 +258,8 @@ const GetSVGLayoutConfiguration = () => {
Style: {
fillOpacity: 1,
strokeWidth: 2,
stroke: 'blue',
fill: 'blue',
stroke: '#0000ff',
fill: '#0000ff',
}
},
{
@ -270,8 +270,8 @@ const GetSVGLayoutConfiguration = () => {
Style: {
fillOpacity: 1,
strokeWidth: 2,
stroke: 'red',
fill: 'red',
stroke: '#ff0000',
fill: '#ff0000',
}
}
],
@ -370,7 +370,7 @@ const GetSVGLayoutConfiguration = () => {
Height: 200,
Orientation: 0,
Style: {
stroke: 'black',
stroke: '#000000',
strokeWidth: 2,
fillOpacity: 0
}