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

Disable depth for SymbolDimension + Canvas: Add vertical symbol dimension

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-23 12:52:51 +01:00
parent 1e89f7803a
commit cf856d367d
3 changed files with 68 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/Components/Canvas/DimensionLayer.ts
View file

@ -95,6 +95,16 @@ export function AddSymbolDimensions(
scale: number,
depth: number
): void {
if (symbol.isVertical) {
AddVerticalSymbolDimension(
ctx,
symbol,
scale,
depth
);
return;
}
AddHorizontalSymbolDimension(
ctx,
symbol,
@ -575,7 +585,7 @@ function AddHorizontalSymbolDimension(
scale: number,
depth: number
): void {
const width = symbol.offset + (symbol.width / 2);
const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference);
if (width == null || width <= 0) {
return;
@ -599,3 +609,34 @@ function AddHorizontalSymbolDimension(
style: DEFAULT_DIMENSION_SYMBOL_STYLE
});
}
function AddVerticalSymbolDimension(
ctx: CanvasRenderingContext2D,
symbol: ISymbolModel,
scale: number,
depth: number
): void {
const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference);
if (height == null || height <= 0) {
return;
}
const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
const text = height
.toFixed(0)
.toString();
RenderDimension(ctx, {
id,
xStart: -offset,
yStart: height,
xEnd: -offset,
yEnd: 0,
text,
scale,
style: DEFAULT_DIMENSION_SYMBOL_STYLE
});
}

5
src/Components/Canvas/Renderer.ts
View file

@ -71,7 +71,6 @@ export function RenderSymbols(
symbols: Map<string, ISymbolModel>,
scale: number
): void {
let count = 0;
symbols.forEach((symbol: ISymbolModel) => {
RenderSymbol(ctx, symbol);
@ -79,8 +78,8 @@ export function RenderSymbols(
return;
}
AddSymbolDimensions(ctx, symbol, scale, count);
count++;
// TODO: Implement DimensionManager
AddSymbolDimensions(ctx, symbol, scale, 0);
});
}

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

@ -38,29 +38,20 @@ function ActionByPosition(
horizontalAction: (dim: number, ...params: any[]) => void,
verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
params: any[]
): [boolean, boolean] {
let [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols] = [false, false];
): void {
positions.forEach((position: Position) => {
const dim = dimMapped[position];
switch (position) {
case Position.Right:
case Position.Left:
incrementVerticalDepthSymbols = true;
verticalAction(dim, false, ...params);
break;
case Position.Right: {
verticalAction(dim, true, ...params);
break;
}
case Position.Down:
horizontalAction(dim, ...params);
break;
case Position.Up:
incrementHorizontalDepthSymbols = true;
case Position.Down:
horizontalAction(dim, ...params);
break;
}
});
return [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols];
}
/**
@ -79,7 +70,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
if (!SHOW_SELF_DIMENSIONS) {
return [];
}
let [startDepthHorizontalSymbols, startDepthVerticalSymbols] = [0, 0];
for (const { container, depth, currentTransform } of it) {
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
@ -89,7 +79,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
const containerRightDim = rightDim + offset;
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
ActionByPosition(
dimMapped,
container.properties.dimensionOptions.selfDimensions.positions,
AddHorizontalSelfDimension,
@ -98,16 +88,14 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
container,
currentTransform,
dimensions,
scale,
container.properties.dimensionOptions.selfDimensions.color]
scale
]
);
if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
}
if (SHOW_SELF_MARGINS_DIMENSIONS &&
container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
ActionByPosition(
dimMapped,
container.properties.dimensionOptions.selfMarginsDimensions.positions,
AddHorizontalSelfMarginsDimension,
@ -116,15 +104,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
container,
currentTransform,
dimensions,
scale,
container.properties.dimensionOptions.selfMarginsDimensions.color]
scale
]
);
if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
}
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
ActionByPosition(
dimMapped,
container.properties.dimensionOptions.dimensionWithMarks.positions,
@ -136,17 +122,15 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
depth,
currentTransform,
dimensions,
scale,
container.properties.dimensionOptions.dimensionWithMarks.color]
scale
]
);
if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
}
if (SHOW_CHILDREN_DIMENSIONS &&
container.properties.dimensionOptions.childrenDimensions.positions.length > 0 &&
container.children.length >= 2) {
const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
ActionByPosition(
dimMapped,
container.properties.dimensionOptions.childrenDimensions.positions,
AddHorizontalChildrenDimension,
@ -156,26 +140,22 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
container,
currentTransform,
dimensions,
scale,
container.properties.dimensionOptions.childrenDimensions.color]
scale
]
);
if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
}
}
for (const symbol of symbols) {
if (symbol[1].showDimension) {
if (symbol[1].isVertical) {
startDepthVerticalSymbols++;
AddVerticalSymbolDimension(symbol[1], dimensions, scale, startDepthVerticalSymbols);
// TODO: Implement DimensionManager
symbols.forEach((symbol) => {
if (symbol.showDimension) {
if (symbol.isVertical) {
AddVerticalSymbolDimension(symbol, dimensions, scale, 0);
} else {
startDepthHorizontalSymbols++;
AddHorizontalSymbolDimension(symbol[1], dimensions, scale, startDepthHorizontalSymbols);
AddHorizontalSymbolDimension(symbol, dimensions, scale, 0);
}
}
}
});
return dimensions;
}
@ -185,7 +165,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
scale: number,
depth: number
): void {
const width = TransformX(symbol.offset, symbol.width * 2, symbol.config.PositionReference);
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}`;
@ -213,7 +193,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel,
scale: number,
depth: number
): void {
const height = TransformY(symbol.offset, symbol.height * 2, symbol.config.PositionReference);
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}`;