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

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

@ -5,11 +5,12 @@ import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, S
import { CancelParentTransform, GetDepth, MakeIterator, Pairwise } from '../../../utils/itertools';
import { Dimension } from './Dimension';
import { IContainerProperties } from '../../../Interfaces/IContainerProperties';
import { RestoreX, TransformX } from '../../../utils/svg';
import { TransformX } from '../../../utils/svg';
import { Camelize } from '../../../utils/stringtools';
interface IContainerProps {
model: IContainerModel
scale: number
}
/**
@ -17,7 +18,12 @@ interface IContainerProps {
* @returns Render the container
*/
export function Container(props: IContainerProps): JSX.Element {
const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
const containersElements = props.model.children.map(
child => <Container
key={`container-${child.properties.id}`}
model={child}
scale={props.scale}
/>);
const width: number = props.model.properties.width;
const height: number = props.model.properties.height;
@ -73,7 +79,8 @@ export function Container(props: IContainerProps): JSX.Element {
yStart={yChildren}
yEnd={yChildren}
strokeWidth={strokeWidth}
text={textChildren} />;
text={textChildren}
scale={props.scale} />;
}
const borrowerDimensions: JSX.Element[] = [];
@ -109,7 +116,9 @@ export function Container(props: IContainerProps): JSX.Element {
yStart={props.model.properties.height + yDim * -1}
yEnd={props.model.properties.height + yDim * -1}
strokeWidth={strokeWidth}
text={(next - cur).toFixed(2).toString()} />);
text={(next - cur).toFixed(2).toString()}
scale={props.scale}
/>);
count++;
}
}
@ -128,7 +137,8 @@ export function Container(props: IContainerProps): JSX.Element {
yStart={yDim}
yEnd={yDim}
strokeWidth={strokeWidth}
text={text} />
text={text}
scale={props.scale} />
: null}
{childrenDimensions}
{borrowerDimensions}
@ -137,6 +147,10 @@ export function Container(props: IContainerProps): JSX.Element {
? <text
x={xText}
y={yText}
style={{
transform: `scale(${1 / props.scale}) translateX(-50%)`,
transformBox: 'fill-box'
}}
>
{props.model.properties.displayedText}
</text>

19
src/Components/SVG/Elements/DepthDimensionLayer.tsx
View file

@ -3,13 +3,15 @@ import { ContainerModel } from '../../../Interfaces/IContainerModel';
import { DIMENSION_MARGIN } from '../../../utils/default';
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
import { TransformX } from '../../../utils/svg';
import { Properties } from '../../ContainerProperties/ContainerProperties';
import { Dimension } from './Dimension';
interface IDimensionLayerProps {
roots: ContainerModel | ContainerModel[] | null
scale?: number
}
function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
function GetDimensionsNodes(root: ContainerModel, scale: number): React.ReactNode[] {
const it = MakeBFSIterator(root);
const dimensions: React.ReactNode[] = [];
let currentDepth = 0;
@ -18,7 +20,7 @@ function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
let lastY = 0;
for (const { container, depth } of it) {
if (currentDepth !== depth) {
AddNewDimension(currentDepth, min, max, lastY, dimensions);
AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);
currentDepth = depth;
min = Infinity;
@ -37,7 +39,7 @@ function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
}
}
AddNewDimension(currentDepth, min, max, lastY, dimensions);
AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);
return dimensions;
}
@ -49,12 +51,13 @@ function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
*/
export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
let dimensions: React.ReactNode[] = [];
const scale = props.scale ?? 1;
if (Array.isArray(props.roots)) {
props.roots.forEach(child => {
dimensions.concat(GetDimensionsNodes(child));
dimensions.concat(GetDimensionsNodes(child, scale));
});
} else if (props.roots !== null) {
dimensions = GetDimensionsNodes(props.roots);
dimensions = GetDimensionsNodes(props.roots, scale);
}
return (
<g>
@ -63,7 +66,7 @@ export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
);
}
function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, dimensions: React.ReactNode[]): void {
function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, dimensions: React.ReactNode[]): void {
const id = `dim-depth-${currentDepth}`;
const xStart = min;
const xEnd = max;
@ -87,6 +90,8 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY:
xEnd={xEnd}
yEnd={y}
strokeWidth={strokeWidth}
text={text} />
text={text}
scale={scale}
/>
);
}

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>

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

@ -7,6 +7,7 @@ import { RemoveMargin } from '../../../../utils/svg';
interface ISelectorProps {
selected?: IContainerModel
scale?: number
}
export function Selector(props: ISelectorProps): JSX.Element {
@ -17,6 +18,7 @@ export function Selector(props: ISelectorProps): JSX.Element {
);
}
const scale = (props.scale ?? 1);
let [x, y] = GetAbsolutePosition(props.selected);
let [width, height] = [
props.selected.properties.width,
@ -35,7 +37,7 @@ export function Selector(props: ISelectorProps): JSX.Element {
const style: React.CSSProperties = {
stroke: '#3B82F6',
strokeWidth: 4,
strokeWidth: 4 / scale,
fillOpacity: 0,
transitionProperty: 'all',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
@ -57,6 +59,10 @@ export function Selector(props: ISelectorProps): JSX.Element {
? <text
x={xText}
y={yText}
style={{
transform: `scale(${1 / scale}) translateX(-50%)`,
transformBox: 'fill-box'
}}
>
{props.selected.properties.displayedText}
</text>

2
src/Components/SVG/SVG.scss
View file

@ -9,6 +9,4 @@ text {
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
transform: translateX(-50%);
transform-box: fill-box;
}

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

@ -56,6 +56,8 @@ export function SVG(props: ISVGProps): JSX.Element {
});
const [tool, setTool] = React.useState<Tool>(TOOL_PAN);
const [value, setValue] = React.useState<Value>({} as Value);
const [scale, setScale] = React.useState<number>(value.a);
const svgViewer = React.useRef<ReactSVGPanZoom>(null);
// Framerate limiter
@ -78,9 +80,18 @@ export function SVG(props: ISVGProps): JSX.Element {
let children: React.ReactNode | React.ReactNode[] = [];
if (Array.isArray(props.children)) {
children = props.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
children = props.children.map(child =>
<Container
key={`container-${child.properties.id}`}
model={child}
scale={scale}
/>);
} else if (props.children !== null) {
children = <Container key={`container-${props.children.properties.id}`} model={props.children} />;
children = <Container
key={`container-${props.children.properties.id}`}
model={props.children}
scale={scale}
/>;
}
return (
@ -103,6 +114,10 @@ export function SVG(props: ISVGProps): JSX.Element {
delta.current = delta.current % (1 / MAX_FRAMERATE);
setValue(value);
}}
onZoom={(event: unknown) => {
const value = event as Value;
setScale(value.a);
}}
background={'#ffffff'}
defaultTool='pan'
miniatureProps={{
@ -115,10 +130,10 @@ export function SVG(props: ISVGProps): JSX.Element {
<svg {...properties}>
{children}
{SHOW_DIMENSIONS_PER_DEPTH
? <DepthDimensionLayer roots={props.children} />
? <DepthDimensionLayer scale={scale} roots={props.children} />
: null}
<SymbolLayer symbols={props.symbols} />
<Selector selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
<Selector scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
</svg>
</ReactSVGPanZoom>
</div>

2
src/utils/default.ts
View file

@ -34,7 +34,7 @@ export const SHOW_CHILDREN_DIMENSIONS = false;
export const SHOW_BORROWER_DIMENSIONS = true;
export const SHOW_DIMENSIONS_PER_DEPTH = false;
export const DIMENSION_MARGIN = 50;
export const NOTCHES_LENGTH = 4;
export const NOTCHES_LENGTH = 10;
/// SYMBOL DEFAULTS ///