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

Remove usage of scale for symbols + Remove shenanigans with multipliers

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-23 10:57:27 +01:00
parent a476017d99
commit 1c8cebf0f5
4 changed files with 25 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/Components/Editor/Behaviors/SymbolBehaviors.ts
View file

@ -8,7 +8,7 @@ export function ApplySymbol(containers: Map<string, IContainerModel>,
symbol: ISymbolModel): IContainerModel {
if (symbol.isVertical) {
container.properties.y = TransformY(symbol.offset,
symbol.height * 2,
symbol.height,
symbol.config.PositionReference);
container.properties.y = RestoreY(container.properties.y,
container.properties.height,
@ -21,7 +21,10 @@ export function ApplySymbol(containers: Map<string, IContainerModel>,
container.properties.y = y;
return container;
} else {
container.properties.x = TransformX(symbol.offset, symbol.width * 2, symbol.config.PositionReference);
container.properties.x = TransformX(
symbol.offset,
symbol.width,
symbol.config.PositionReference);
container.properties.x = RestoreX(container.properties.x,
container.properties.width,
container.properties.positionReference);

45
src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx
View file

@ -1,6 +1,6 @@
import '../Selector.scss';
import * as React from 'react';
import { SYMBOL_MARGIN } from '../../../../utils/default';
import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../../utils/default';
import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel';
import { Selector } from '../Selector/Selector';
import { TransformX, TransformY } from '../../../../utils/svg';
@ -9,7 +9,6 @@ import { PositionReference } from '../../../../Enums/PositionReference';
interface ISelectorSymbolProps {
symbols: Map<string, ISymbolModel>
selected?: ISymbolModel
scale?: number
}
export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
@ -20,45 +19,17 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
);
}
const scale = (props.scale ?? 1);
let x, y: number;
const scaledHeight = props.selected.height / scale;
const scaledWidth = props.selected.width / scale;
const scaledHeight = props.selected.height;
const scaledWidth = props.selected.width;
if (props.selected.isVertical) {
x = (-SYMBOL_MARGIN - props.selected.width) / scale;
y = TransformY(props.selected.offset, props.selected.height * 2, props.selected.config.PositionReference);
switch (props.selected.config.PositionReference) {
case PositionReference.CenterLeft:
case PositionReference.CenterCenter:
case PositionReference.CenterRight:
y -= scaledHeight / 2;
break;
case PositionReference.BottomLeft:
case PositionReference.BottomCenter:
case PositionReference.BottomRight:
y -= scaledHeight;
break;
}
x = -DIMENSION_MARGIN;
y = props.selected.offset;
} else {
x = TransformX(props.selected.offset, props.selected.width * 2, props.selected.config.PositionReference);
switch (props.selected.config.PositionReference) {
case PositionReference.TopCenter:
case PositionReference.CenterCenter:
case PositionReference.BottomCenter:
x -= scaledWidth / 2;
break;
case PositionReference.TopRight:
case PositionReference.CenterRight:
case PositionReference.BottomRight:
x -= scaledWidth;
break;
}
y = (-SYMBOL_MARGIN - props.selected.height) / scale;
x = props.selected.offset;
y = -DIMENSION_MARGIN;
}
return (
@ -68,7 +39,7 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
y={y}
width={scaledWidth}
height={scaledHeight}
scale={scale}
scale={1}
/>
);
}

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

@ -1,9 +1,7 @@
import { Interweave } from 'interweave';
import * as React from 'react';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
import { TransformX, TransformY } from '../../../utils/svg';
import { PositionReference } from '../../../Enums/PositionReference';
import { DIMENSION_MARGIN } from '../../../utils/default';
interface ISymbolProps {
model: ISymbolModel
@ -17,14 +15,15 @@ export function Symbol(props: ISymbolProps): JSX.Element {
let x, y: number;
if (props.model.isVertical) {
x = -DIMENSION_MARGIN;
y = props.model.offset;
} else {
x = props.model.offset;
y = -DIMENSION_MARGIN;
}
if (hasSVG) {
if (props.model.isVertical) {
x = -DIMENSION_MARGIN / props.scale;
y = props.model.offset;
} else {
x = props.model.offset;
y = -DIMENSION_MARGIN / props.scale;
}
return (
<g
x={x}
@ -38,47 +37,14 @@ export function Symbol(props: ISymbolProps): JSX.Element {
</g>
);
}
if (props.model.isVertical) {
x = (-SYMBOL_MARGIN - props.model.width) / props.scale;
y = TransformY(props.model.offset, props.model.height * 2, props.model.config.PositionReference);
switch (props.model.config.PositionReference) {
case PositionReference.CenterLeft:
case PositionReference.CenterCenter:
case PositionReference.CenterRight:
y -= props.model.height / props.scale / 2;
break;
case PositionReference.BottomLeft:
case PositionReference.BottomCenter:
case PositionReference.BottomRight:
y -= props.model.height / props.scale;
break;
}
} else {
x = TransformX(props.model.offset, props.model.width * 2, props.model.config.PositionReference);
switch (props.model.config.PositionReference) {
case PositionReference.TopCenter:
case PositionReference.CenterCenter:
case PositionReference.BottomCenter:
x -= props.model.width / props.scale / 2;
break;
case PositionReference.TopRight:
case PositionReference.CenterRight:
case PositionReference.BottomRight:
x -= props.model.width / props.scale;
break;
}
y = (-SYMBOL_MARGIN - props.model.height) / props.scale;
}
return (
<image
href={href}
preserveAspectRatio="none"
x={x}
y={y}
height={props.model.height / props.scale}
width={props.model.width / props.scale} />
height={props.model.height}
width={props.model.width} />
);
}

2
test-server/http.js
View file

@ -287,7 +287,7 @@ const GetSVGLayoutConfiguration = () => {
Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
},
Name: 'Poteau CenterCenter',
PositionReference: 1,
PositionReference: 4,
AssociatedContainer: {
Type: 'Montant'
}