svg-layout-designer-react/src/utils/svg.ts
Eric Nguyen 7f3f6a489a Merged PR 167: Add Flex and fix bugs (read desc)
Note: The branch name does not fit the new features.

- Implement Flex with simplex
- Enable rigid body by default (removed IsRigidBody property) <=== possibly a bad idea
- Sort children in add and update properties
- Implement MaxWidth
- Add more docs

Fixes :
- .env.production url
- Symbols: not blocking the linked container when the parent is moving
2022-08-25 13:28:32 +00:00

97 lines
2.4 KiB
TypeScript

import { XPositionReference } from '../Enums/XPositionReference';
// TODO: Big refactoring
/**
* TODO:
* All of these methods should have been
* inside ContainerModel class
* But because of serialization, the methods are lost.
* Rather than adding more functions to this class,
* it is better to fix serialization with the reviver.
*/
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;
}
export function ApplyMargin(
x: number,
y: number,
width: number,
height: number,
left?: number,
bottom?: number,
top?: number,
right?: number
): { x: number, y: number, width: number, height: number } {
left = left ?? 0;
right = right ?? 0;
bottom = bottom ?? 0;
top = top ?? 0;
x = ApplyXMargin(x, left);
y += top;
width = ApplyWidthMargin(width, left, right);
height -= (bottom + top);
return { x, y, width, height };
}
export function RemoveMargin(
x: number,
y: number,
width: number,
height: number,
left?: number,
bottom?: number,
top?: number,
right?: number
): { x: number, y: number, width: number, height: number } {
bottom = bottom ?? 0;
top = top ?? 0;
x = RemoveXMargin(x, left);
y -= top;
width = RemoveWidthMargin(width, left, right);
height += (bottom + top);
return { x, y, width, height };
}
export function ApplyXMargin(x: number, left?: number): number {
left = left ?? 0;
x += left;
return x;
}
export function RemoveXMargin(x: number, left?: number): number {
left = left ?? 0;
x -= left;
return x;
}
export function ApplyWidthMargin(width: number, left?: number, right?: number): number {
left = left ?? 0;
right = right ?? 0;
width -= (left + right);
return width;
}
export function RemoveWidthMargin(width: number, left?: number, right?: number): number {
left = left ?? 0;
right = right ?? 0;
width += (left + right);
return width;
}