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

Add dedicated space for the symbols dimensions + increase global dimension margin

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-23 18:16:21 +01:00
parent 0eca80bed8
commit 63714b3520
2 changed files with 75 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

119
src/Components/SVG/Elements/DimensionLayer.tsx
View file

@ -7,7 +7,8 @@ import {
SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS,
SHOW_SELF_DIMENSIONS,
SHOW_SELF_MARGINS_DIMENSIONS
SHOW_SELF_MARGINS_DIMENSIONS,
SYMBOL_DIMENSION_MARGIN
} from '../../../utils/default';
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
import { TransformX, TransformY } from '../../../utils/svg';
@ -72,7 +73,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
}
for (const { container, depth, currentTransform } of it) {
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
const offset = (DIMENSION_MARGIN * (depth + 2)) / scale;
const containerLeftDim = leftDim - offset;
const containerTopDim = topDim - offset;
const containerBottomDim = bottomDim + offset;
@ -147,14 +148,32 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
}
// TODO: Implement DimensionManager
symbols.forEach((symbol) => {
if (symbol.showDimension) {
if (symbol.isVertical) {
AddVerticalSymbolDimension(symbol, dimensions, scale, 0);
} else {
AddHorizontalSymbolDimension(symbol, dimensions, scale, 0);
}
}
const symbolsWithDimension = [...symbols.values()]
.filter(symbol => symbol.showDimension && symbol.offset > 0);
const horizontalSymbolsWithDimension = symbolsWithDimension
.filter(symbol => !symbol.isVertical);
horizontalSymbolsWithDimension.forEach((symbol, index) => {
AddHorizontalSymbolDimension(
symbol,
dimensions,
scale,
index,
horizontalSymbolsWithDimension.length
);
});
const verticalSymbolsWithDimension = symbolsWithDimension
.filter(symbol => symbol.isVertical);
verticalSymbolsWithDimension.forEach((symbol, index) => {
AddVerticalSymbolDimension(
symbol,
dimensions,
scale,
index,
verticalSymbolsWithDimension.length
);
});
return dimensions;
@ -164,54 +183,62 @@ function AddHorizontalSymbolDimension(
symbol: ISymbolModel,
dimensions: React.ReactNode[],
scale: number,
depth: number
depth: number,
maxDepth: number
): void {
const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference);
if (width != null && width > 0) {
const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
const text = width
.toFixed(0)
.toString();
dimensions.push(<Dimension
key={id}
id={id}
xStart={0}
yStart={-offset}
xEnd={width}
yEnd={-offset}
text={text}
scale={scale}
style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
if (width == null || width <= 0) {
return;
}
const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
const spacing = DIMENSION_MARGIN;
const position = spacing * (depth + 1) / maxDepth;
const offset = SYMBOL_DIMENSION_MARGIN + position / scale;
const text = width
.toFixed(0)
.toString();
dimensions.push(<Dimension
key={id}
id={id}
xStart={0}
yStart={-offset}
xEnd={width}
yEnd={-offset}
text={text}
scale={scale}
style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
}
function AddVerticalSymbolDimension(
symbol: ISymbolModel,
dimensions: React.ReactNode[],
scale: number,
depth: number
depth: number,
maxDepth: number
): void {
const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference);
if (height != null && height > 0) {
const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
const text = height
.toFixed(0)
.toString();
dimensions.push(<Dimension
key={id}
id={id}
xStart={-offset}
yStart={height}
xEnd={-offset}
yEnd={0}
text={text}
scale={scale}
style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
if (height == null || height <= 0) {
return;
}
const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`;
const spacing = DIMENSION_MARGIN;
const position = spacing * (depth + 1) / maxDepth;
const offset = SYMBOL_DIMENSION_MARGIN + position / scale;
const text = height
.toFixed(0)
.toString();
dimensions.push(<Dimension
key={id}
id={id}
xStart={-offset}
yStart={height}
xEnd={-offset}
yEnd={0}
text={text}
scale={scale}
style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
}
/**

3
src/utils/default.ts
View file

@ -69,7 +69,8 @@ export const SHOW_SELF_DIMENSIONS = true;
export const SHOW_SELF_MARGINS_DIMENSIONS = true;
export const SHOW_CHILDREN_DIMENSIONS = true;
export const SHOW_BORROWER_DIMENSIONS = true;
export const DIMENSION_MARGIN = 50;
export const DIMENSION_MARGIN = 70;
export const SYMBOL_DIMENSION_MARGIN = 30;
export const SYMBOL_MARGIN = 25;
export const NOTCHES_LENGTH = 10;
export const DEFAULT_DIMENSION_SYMBOL_STYLE: IDimensionStyle = {