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

WIP

Browse source
This commit is contained in:
Carl Fuchs 2023-02-09 17:25:55 +01:00
parent 579422653b
commit 79caa5e9ab
8 changed files with 35 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/Components/SymbolProperties/SymbolForm.tsx
View file

@ -1,6 +1,6 @@
import * as React from 'react';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { RestoreX, TransformX } from '../../utils/svg';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
import { RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
import { InputGroup } from '../InputGroup/InputGroup';
import { TextInputGroup } from '../InputGroup/TextInputGroup';
import { Text } from '../Text/Text';
@ -32,16 +32,23 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
inputClassName=''
type='string'
value={props.symbol.displayedText}
onChange={(value) => props.onChange('displayedText', value)} />
onChange={(value) => { props.onChange('displayedText', value); }} />
<TextInputGroup
id='x'
labelText={Text({ textId: '@SymbolX' })}
labelText={Text({ textId: '@SymbolOffset' })}
inputKey='x'
labelClassName=''
inputClassName=''
type='number'
value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()}
onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
value={TransformX(props.symbol.offset, props.symbol.width, props.symbol.config.PositionReference).toString()}
onChange={(value) => { props.onChange('offset', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference)); }} />
<ToggleButton
labelText={Text({ textId: '@isVertical' })}
inputKey='isVertical'
labelClassName=''
inputClassName=''
checked={props.symbol.isVertical}
onChange={(e) => { props.onChange('isVertical', e.target.checked); }}/>
<TextInputGroup
id='height'
labelText={Text({ textId: '@SymbolHeight' })}
@ -51,7 +58,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='number'
min={0}
value={props.symbol.height.toString()}
onChange={(value) => props.onChange('height', Number(value))} />
onChange={(value) => { props.onChange('height', Number(value)); }} />
<TextInputGroup
id='width'
labelText={Text({ textId: '@SymbolWidth' })}
@ -61,14 +68,14 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='number'
min={0}
value={props.symbol.width.toString()}
onChange={(value) => props.onChange('width', Number(value))} />
onChange={(value) => { props.onChange('width', Number(value)); }} />
<ToggleButton
labelText={Text({ textId: '@ShowDimension' })}
inputKey='showDimension'
labelClassName=''
inputClassName=''
checked={props.symbol.showDimension}
onChange={(e) => props.onChange('showDimension', e.target.checked)}/>
onChange={(e) => { props.onChange('showDimension', e.target.checked); }}/>
</div>
);
}