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

Implement new features for svg components + improve form properties (#25)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
- Make Dimension an actual svg line
- Implement XPositionReference
- Select the container above after delete
- Remove DimensionLayer
- Improve form properties

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/25
This commit is contained in:
Siklos 2022-08-11 11:48:31 -04:00
parent d11dfec22b
commit faa058e57d
11 changed files with 119 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/Components/SVG/Elements/Container.tsx
View file

@ -1,4 +1,5 @@
import * as React from 'react';
import { XPositionReference } from '../../../Enums/XPositionReference';
import { IContainerModel } from '../../../Interfaces/ContainerModel';
import { getDepth } from '../../../utils/itertools';
import { Dimension } from './Dimension';
@ -17,7 +18,14 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
const xText = Number(props.model.properties.width) / 2;
const yText = Number(props.model.properties.height) / 2;
const transform = `translate(${Number(props.model.properties.x)}, ${Number(props.model.properties.y)})`;
const [transformedX, transformedY] = transformPosition(
Number(props.model.properties.x),
Number(props.model.properties.y),
Number(props.model.properties.width),
props.model.properties.XPositionReference
);
const transform = `translate(${transformedX}, ${transformedY})`;
// g style
const defaultStyle: React.CSSProperties = {
@ -54,7 +62,8 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
id={id}
xStart={xStart}
xEnd={xEnd}
y={y}
yStart={y}
yEnd={y}
strokeWidth={strokeWidth}
text={text}
/>
@ -74,3 +83,13 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
</g>
);
};
function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
let transformedX = x;
if (xPositionReference === XPositionReference.Center) {
transformedX -= width / 2;
} else if (xPositionReference === XPositionReference.Right) {
transformedX -= width;
}
return [transformedX, y];
}