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

[Update] Symbol alignement behavior + filtered Symbollist in ContainerForm.tsx

Browse source
This commit is contained in:
Carl Fuchs 2023-02-22 12:10:01 +01:00
parent bf4f69a95f
commit a476017d99
8 changed files with 148 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,8 @@ import * as React from 'react';
import { SYMBOL_MARGIN } from '../../../../utils/default';
import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel';
import { Selector } from '../Selector/Selector';
import { TransformX, TransformY } from '../../../../utils/svg';
import { PositionReference } from '../../../../Enums/PositionReference';
interface ISelectorSymbolProps {
symbols: Map<string, ISymbolModel>
@ -19,20 +21,44 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
}
const scale = (props.scale ?? 1);
const [width, height] = [
props.selected.width / scale,
props.selected.height / scale
];
let x, y: number;
const scaledHeight = props.selected.height / scale;
const scaledWidth = props.selected.width / scale;
if (props.selected.isVertical) {
x = -SYMBOL_MARGIN / scale - width;
y = (props.selected.offset + props.selected.height / 2) - (props.selected.height / scale / 2);
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;
}
} else {
[x, y] = [
(props.selected.offset + props.selected.width / 2) - (props.selected.width / scale / 2),
-SYMBOL_MARGIN / scale - height];
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;
}
return (
@ -40,8 +66,8 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
text={props.selected.displayedText}
x={x}
y={y}
width={width}
height={height}
width={scaledWidth}
height={scaledHeight}
scale={scale}
/>
);