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

Final fix for XPositionReference : We are now lying to the user in the form. The transformation is applied to the value that is shown but the transformation is restored for the computing afterward

Browse source
This commit is contained in:
Eric NGUYEN 2022-08-16 16:34:32 +02:00
parent 7014f520b9
commit 1622816035
6 changed files with 59 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,13 +18,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
const xText = props.model.properties.width / 2;
const yText = props.model.properties.height / 2;
const [transformedX, transformedY] = transformPosition(
props.model.properties.x,
props.model.properties.y,
props.model.properties.width,
props.model.properties.XPositionReference
);
const transform = `translate(${transformedX}, ${transformedY})`;
const transform = `translate(${props.model.properties.x}, ${props.model.properties.y})`;
// g style
const defaultStyle: React.CSSProperties = {
@ -107,17 +101,17 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
const childrenId = `dim-children-${props.model.properties.id}`;
const lastChild = props.model.children[props.model.children.length - 1];
let xChildrenStart = lastChild.properties.x;
let xChildrenEnd = lastChild.properties.x;
let xChildrenStart = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference);
let xChildrenEnd = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference);
// Find the min and max
for (let i = props.model.children.length - 2; i >= 0; i--) {
const child = props.model.children[i];
const left = child.properties.x;
const left = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference);
if (left < xChildrenStart) {
xChildrenStart = left;
}
const right = child.properties.x;
const right = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference);
if (right > xChildrenEnd) {
xChildrenEnd = right;
}
@ -128,12 +122,22 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren };
}
export function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
export function transformX(x: number, width: number, xPositionReference = XPositionReference.Left): number {
let transformedX = x;
if (xPositionReference === XPositionReference.Center) {
transformedX += width / 2;
} else if (xPositionReference === XPositionReference.Right) {
transformedX += width;
}
return transformedX;
}
export function restoreX(x: number, width: number, xPositionReference = XPositionReference.Left): number {
let transformedX = x;
if (xPositionReference === XPositionReference.Center) {
transformedX -= width / 2;
} else if (xPositionReference === XPositionReference.Right) {
transformedX -= width;
}
return [transformedX, y];
return transformedX;
}

11
src/Components/SVG/Elements/Selector.tsx
View file

@ -1,7 +1,6 @@
import * as React from 'react';
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { getAbsolutePosition } from '../../../utils/itertools';
import { transformPosition } from './Container';
interface ISelectorProps {
selected: IContainerModel | null
@ -16,12 +15,6 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
}
const [x, y] = getAbsolutePosition(props.selected);
const [transformedX, transformedY] = transformPosition(
x,
y,
props.selected.properties.width,
props.selected.properties.XPositionReference
);
const [width, height] = [
props.selected.properties.width,
props.selected.properties.height
@ -38,8 +31,8 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
return (
<rect
x={transformedX}
y={transformedY}
x={x}
y={y}
width={width}
height={height}
style={style}