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

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

@ -7,7 +7,8 @@ import {
SHOW_BORROWER_DIMENSIONS, SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS,
SHOW_SELF_DIMENSIONS, SHOW_SELF_DIMENSIONS,
SHOW_SELF_MARGINS_DIMENSIONS SHOW_SELF_MARGINS_DIMENSIONS,
SYMBOL_DIMENSION_MARGIN
} from '../../../utils/default'; } from '../../../utils/default';
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
import { TransformX, TransformY } from '../../../utils/svg'; import { TransformX, TransformY } from '../../../utils/svg';
@ -72,7 +73,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
} }
for (const { container, depth, currentTransform } of it) { 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 containerLeftDim = leftDim - offset;
const containerTopDim = topDim - offset; const containerTopDim = topDim - offset;
const containerBottomDim = bottomDim + offset; const containerBottomDim = bottomDim + offset;
@ -147,14 +148,32 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
} }
// TODO: Implement DimensionManager // TODO: Implement DimensionManager
symbols.forEach((symbol) => { const symbolsWithDimension = [...symbols.values()]
if (symbol.showDimension) { .filter(symbol => symbol.showDimension && symbol.offset > 0);
if (symbol.isVertical) { const horizontalSymbolsWithDimension = symbolsWithDimension
AddVerticalSymbolDimension(symbol, dimensions, scale, 0); .filter(symbol => !symbol.isVertical);
} else {
AddHorizontalSymbolDimension(symbol, dimensions, scale, 0); 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; return dimensions;
@ -164,13 +183,18 @@ function AddHorizontalSymbolDimension(
symbol: ISymbolModel, symbol: ISymbolModel,
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number,
depth: number depth: number,
maxDepth: number
): void { ): void {
const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference);
if (width != null && width > 0) { if (width == null || width <= 0) {
return;
}
const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const spacing = DIMENSION_MARGIN;
const position = spacing * (depth + 1) / maxDepth;
const offset = SYMBOL_DIMENSION_MARGIN + position / scale;
const text = width const text = width
.toFixed(0) .toFixed(0)
.toString(); .toString();
@ -185,19 +209,23 @@ function AddHorizontalSymbolDimension(
scale={scale} scale={scale}
style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>); style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
} }
}
function AddVerticalSymbolDimension( function AddVerticalSymbolDimension(
symbol: ISymbolModel, symbol: ISymbolModel,
dimensions: React.ReactNode[], dimensions: React.ReactNode[],
scale: number, scale: number,
depth: number depth: number,
maxDepth: number
): void { ): void {
const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference); const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference);
if (height != null && height > 0) { if (height == null || height <= 0) {
return;
}
const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`; const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const spacing = DIMENSION_MARGIN;
const position = spacing * (depth + 1) / maxDepth;
const offset = SYMBOL_DIMENSION_MARGIN + position / scale;
const text = height const text = height
.toFixed(0) .toFixed(0)
.toString(); .toString();
@ -212,7 +240,6 @@ function AddVerticalSymbolDimension(
scale={scale} scale={scale}
style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>); style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
} }
}
/** /**
* A layer containing all dimension * A layer containing all dimension

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_SELF_MARGINS_DIMENSIONS = true;
export const SHOW_CHILDREN_DIMENSIONS = true; export const SHOW_CHILDREN_DIMENSIONS = true;
export const SHOW_BORROWER_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 SYMBOL_MARGIN = 25;
export const NOTCHES_LENGTH = 10; export const NOTCHES_LENGTH = 10;
export const DEFAULT_DIMENSION_SYMBOL_STYLE: IDimensionStyle = { export const DEFAULT_DIMENSION_SYMBOL_STYLE: IDimensionStyle = {