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

Fix type check + moved width and height to rect property

Browse source
This commit is contained in:
Siklos 2022-08-01 19:42:28 +02:00
parent 6ac76f6619
commit 05622c3a64
3 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.tsx
View file

@ -82,7 +82,7 @@ class App extends React.Component<IAppProps> {
} as IAppProps); } as IAppProps);
} }
public OnPropertyChange(key: string, value: string) { public OnPropertyChange(key: string, value: string | number) {
if (this.state.SelectedContainer === null || if (this.state.SelectedContainer === null ||
this.state.SelectedContainer === undefined) { this.state.SelectedContainer === undefined) {
throw new Error('Property was changed before selecting a Container'); throw new Error('Property was changed before selecting a Container');
@ -93,7 +93,7 @@ class App extends React.Component<IAppProps> {
throw new Error('Property was changed before the main container was added'); throw new Error('Property was changed before the main container was added');
} }
const pair = {} as Record<string, string>; const pair = {} as Record<string, string | number>;
pair[key] = value; pair[key] = value;
const properties = Object.assign(this.state.SelectedContainer.props.properties, pair); const properties = Object.assign(this.state.SelectedContainer.props.properties, pair);
const props = { const props = {

5
src/Components/Properties/Properties.tsx
View file

@ -42,7 +42,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
groupInput: React.ReactNode[] groupInput: React.ReactNode[]
) => { ) => {
const id = `property-${key}`; const id = `property-${key}`;
const type = typeof value === 'number' ? 'number' : 'text'; const type = isNaN(Number(value)) ? 'text' : 'number';
const isDisabled = key === 'id'; // hardcoded const isDisabled = key === 'id'; // hardcoded
groupInput.push( groupInput.push(
<div key={id} className='mt-4'> <div key={id} className='mt-4'>
@ -52,8 +52,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
bg-slate-600 border-2 border-slate-600 rounded-lg shadow-sm placeholder-slate-400 bg-slate-600 border-2 border-slate-600 rounded-lg shadow-sm placeholder-slate-400
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
disabled:bg-slate-700 disabled:text-slate-400 disabled:border-slate-700 disabled:shadow-none disabled:bg-slate-700 disabled:text-slate-400 disabled:border-slate-700 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600 '
focus:invalid:border-pink-500 focus:invalid:ring-pink-5002'
type={type} type={type}
id={id} id={id}
value={value} value={value}

4
src/Components/SVG/Elements/Container.tsx
View file

@ -31,6 +31,8 @@ export class Container extends React.Component<IContainerProps> {
const style = Object.assign(defaultStyle, this.props.properties); const style = Object.assign(defaultStyle, this.props.properties);
style.x = 0; style.x = 0;
style.y = 0; style.y = 0;
delete style.height;
delete style.width;
return ( return (
<g <g
@ -39,6 +41,8 @@ export class Container extends React.Component<IContainerProps> {
key={`container-${this.props.properties.id}`} key={`container-${this.props.properties.id}`}
> >
<rect <rect
width={this.props.properties.width}
height={this.props.properties.height}
style={style} style={style}
> >
</rect> </rect>