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

Merged PR 208: Fix scaling and position of symbols

Browse source
This commit is contained in:
Eric Nguyen 2022-10-04 09:25:03 +00:00
parent 32684a725b
commit ec7ee7891e
6 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/Components/SVG/Elements/Symbol.tsx
View file

@ -1,7 +1,7 @@
import { Interweave } from 'interweave';
import * as React from 'react';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { DIMENSION_MARGIN } from '../../../utils/default';
import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
interface ISymbolProps {
model: ISymbolModel
@ -30,8 +30,14 @@ export function Symbol(props: ISymbolProps): JSX.Element {
return (
<image
href={href}
preserveAspectRatio="none"
style={{
fill: 'none',
transform: `scale(${1 / props.scale}) translateX(-50%) translateY(-50%)`,
transformBox: 'fill-box'
}}
x={props.model.x}
y={-DIMENSION_MARGIN / props.scale}
y={-SYMBOL_MARGIN / props.scale}
height={props.model.height}
width={props.model.width} />
);

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

@ -2,6 +2,8 @@ import * as React from 'react';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { RestoreX, TransformX } from '../../utils/svg';
import { InputGroup } from '../InputGroup/InputGroup';
import { TextInputGroup } from '../InputGroup/TextInputGroup';
import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector';
interface ISymbolFormProps {
symbol: ISymbolModel
@ -20,15 +22,17 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='string'
value={props.symbol.id.toString()}
isDisabled={true} />
<InputGroup
<TextInputGroup
id='x'
labelText='x'
inputKey='x'
labelClassName=''
inputClassName=''
type='number'
value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.XPositionReference).toString()}
onChange={(event) => props.onChange('x', RestoreX(Number(event.target.value), props.symbol.width, props.symbol.config.XPositionReference))} />
<InputGroup
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))} />
<TextInputGroup
id='height'
labelText='Height'
inputKey='height'
labelClassName=''
@ -36,8 +40,9 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='number'
min={0}
value={props.symbol.height.toString()}
onChange={(event) => props.onChange('height', Number(event.target.value))} />
<InputGroup
onChange={(value) => props.onChange('height', Number(value))} />
<TextInputGroup
id='width'
labelText='Width'
inputKey='width'
labelClassName=''
@ -45,7 +50,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='number'
min={0}
value={props.symbol.width.toString()}
onChange={(event) => props.onChange('width', Number(event.target.value))} />
onChange={(value) => props.onChange('width', Number(value))} />
</div>
);
}