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

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}
/>
);
}