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

Merged PR 182: Implement Scale for text, Selector and Dimension

Browse source
This commit is contained in:
Eric Nguyen 2022-09-09 16:00:13 +00:00
parent b8d3e9f1e9
commit 063467fb58
7 changed files with 75 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/Components/SVG/Elements/Dimension.tsx
View file

@ -9,6 +9,7 @@ interface IDimensionProps {
yEnd: number
text: string
strokeWidth: number
scale?: number
}
/**
@ -25,8 +26,10 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
}
export function Dimension(props: IDimensionProps): JSX.Element {
const scale = props.scale ?? 1;
const style: React.CSSProperties = {
stroke: 'black'
stroke: 'black',
strokeWidth: 2 / scale
};
/// We need to find the points of the notches
@ -41,15 +44,16 @@ export function Dimension(props: IDimensionProps): JSX.Element {
const [perpVecX, perpVecY] = [unitY, -unitX];
// Use the parametric function to get the coordinates (x = x0 + t * v.x)
const startTopX = ApplyParametric(props.xStart, NOTCHES_LENGTH, perpVecX);
const startTopY = ApplyParametric(props.yStart, NOTCHES_LENGTH, perpVecY);
const startBottomX = ApplyParametric(props.xStart, -NOTCHES_LENGTH, perpVecX);
const startBottomY = ApplyParametric(props.yStart, -NOTCHES_LENGTH, perpVecY);
const notchesLength = NOTCHES_LENGTH / scale;
const startTopX = ApplyParametric(props.xStart, notchesLength, perpVecX);
const startTopY = ApplyParametric(props.yStart, notchesLength, perpVecY);
const startBottomX = ApplyParametric(props.xStart, -notchesLength, perpVecX);
const startBottomY = ApplyParametric(props.yStart, -notchesLength, perpVecY);
const endTopX = ApplyParametric(props.xEnd, NOTCHES_LENGTH, perpVecX);
const endTopY = ApplyParametric(props.yEnd, NOTCHES_LENGTH, perpVecY);
const endBottomX = ApplyParametric(props.xEnd, -NOTCHES_LENGTH, perpVecX);
const endBottomY = ApplyParametric(props.yEnd, -NOTCHES_LENGTH, perpVecY);
const endTopX = ApplyParametric(props.xEnd, notchesLength, perpVecX);
const endTopY = ApplyParametric(props.yEnd, notchesLength, perpVecY);
const endBottomX = ApplyParametric(props.xEnd, -notchesLength, perpVecX);
const endBottomY = ApplyParametric(props.yEnd, -notchesLength, perpVecY);
return (
<g key={props.id}>
@ -77,6 +81,10 @@ export function Dimension(props: IDimensionProps): JSX.Element {
<text
x={(props.xStart + props.xEnd) / 2}
y={props.yStart}
style={{
transform: `scale(${1 / scale}) translateX(-50%)`,
transformBox: 'fill-box'
}}
>
{props.text}
</text>