Fix type check + moved width and height to rect property

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

View file

@ -82,7 +82,7 @@ class App extends React.Component<IAppProps> {
} as IAppProps);
}
public OnPropertyChange(key: string, value: string) {
public OnPropertyChange(key: string, value: string | number) {
if (this.state.SelectedContainer === null ||
this.state.SelectedContainer === undefined) {
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');
}
const pair = {} as Record<string, string>;
const pair = {} as Record<string, string | number>;
pair[key] = value;
const properties = Object.assign(this.state.SelectedContainer.props.properties, pair);
const props = {

View file

@ -42,7 +42,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
groupInput: React.ReactNode[]
) => {
const id = `property-${key}`;
const type = typeof value === 'number' ? 'number' : 'text';
const type = isNaN(Number(value)) ? 'text' : 'number';
const isDisabled = key === 'id'; // hardcoded
groupInput.push(
<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
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
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-5002'
'
type={type}
id={id}
value={value}

View file

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