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='' labelClassName=''
inputClassName='' inputClassName=''
type='color' 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); }}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-selfDimensions-width`} id={`${props.properties.id}-selfDimensions-width`}
@ -425,7 +425,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' 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); }}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-selfMarginsDimensions-width`} id={`${props.properties.id}-selfMarginsDimensions-width`}
@ -465,7 +465,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' 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); }}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-childrenDimensions-width`} id={`${props.properties.id}-childrenDimensions-width`}
@ -515,7 +515,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
type='color' 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); }}/> onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-dimensionWithMarks-width`} id={`${props.properties.id}-dimensionWithMarks-width`}
@ -550,16 +550,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
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 <InputGroup
id={`${props.properties.id}-stroke`}
labelText={Text({ textId: '@StyleStroke' })} labelText={Text({ textId: '@StyleStroke' })}
inputKey='stroke' inputKey={`${props.properties.id}-stroke`}
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='string' type='color'
value={props.properties.style.stroke ?? 'black'} value={props.properties.style.stroke ?? '#000000'}
onChange={(value) => { props.onChange('stroke', value, PropertyType.Style); }} onChange={(e) => { props.onChange('stroke', e.target.value, PropertyType.Style); }}/>
/>
<InputGroup <InputGroup
labelKey={`${props.properties.id}-strokeOpacity`} labelKey={`${props.properties.id}-strokeOpacity`}
labelText={Text({ textId: '@StyleStrokeOpacity' })} labelText={Text({ textId: '@StyleStrokeOpacity' })}
@ -583,16 +581,14 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
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 <InputGroup
id={`${props.properties.id}-fill`}
labelText={Text({ textId: '@StyleFill' })} labelText={Text({ textId: '@StyleFill' })}
inputKey='fill' inputKey={`${props.properties.id}-fill`}
labelClassName='col-span-2' labelClassName='col-span-2'
inputClassName='col-span-3' inputClassName='col-span-3'
type='string' type='color'
value={props.properties.style.fill ?? 'black'} value={props.properties.style.fill ?? '#000000'}
onChange={(value) => { props.onChange('fill', value, PropertyType.Style); }} onChange={(e) => { props.onChange('fill', e.target.value, PropertyType.Style); }}/>
/>
<InputGroup <InputGroup
labelKey={`${props.properties.id}-fillOpacity`} labelKey={`${props.properties.id}-fillOpacity`}
labelText={Text({ textId: '@StyleFillOpacity' })} 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 { 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.style.color, stroke: props.style.color ?? '#000000',
strokeWidth: (props.style.width ?? 2) / scale, strokeWidth: (props.style.width ?? 2) / scale,
strokeDasharray: props.style.dashArray strokeDasharray: props.style.dashArray
}; };

2
src/utils/default.ts
View file

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

18
test-server/http.js
View file

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