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

[Merge] Merged changes from master before further implementations

Browse source
This commit is contained in:
Carl Fuchs 2023-02-20 10:31:52 +01:00
parent d72c2266f3
commit 6b6175a521
3 changed files with 14 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,13 @@ import { Orientation } from '../../Enums/Orientation';
import { Position } from '../../Enums/Position'; import { Position } from '../../Enums/Position';
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { type IContainerModel } from '../../Interfaces/IContainerModel';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SHOW_SELF_DIMENSIONS, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, DIMENSION_MARGIN, SHOW_SELF_MARGINS_DIMENSIONS } from '../../utils/default'; import {
SHOW_SELF_DIMENSIONS,
SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS,
DIMENSION_MARGIN,
SHOW_SELF_MARGINS_DIMENSIONS
} 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';
import { type IDimensionStyle } from '../SVG/Elements/Dimension'; import { type IDimensionStyle } from '../SVG/Elements/Dimension';
@ -100,6 +106,7 @@ export function AddSymbolDimensions(
/** /**
* Fonction that call another function given the positions * Fonction that call another function given the positions
* @param ctx
* @param dimMapped Position mapped depending on the Position enum in order: * @param dimMapped Position mapped depending on the Position enum in order:
* [0:left, 1:bottom, 2:up, 3:right] * [0:left, 1:bottom, 2:up, 3:right]
* @param positions List of positions * @param positions List of positions
@ -569,7 +576,7 @@ function AddHorizontalSymbolDimension(
scale: number, scale: number,
depth: number depth: number
): void { ): void {
const width = symbol.x + (symbol.width / 2); const width = symbol.offset + (symbol.width / 2);
if (width == null || width <= 0) { if (width == null || width <= 0) {
return; return;

2
src/Components/Canvas/SelectorSymbol.ts
View file

@ -24,7 +24,7 @@ export function RenderSymbolSelector(
]; ];
const [x, y] = [ const [x, y] = [
props.selected.x + props.selected.width / 2, props.selected.offset + props.selected.width / 2,
-SYMBOL_MARGIN - height]; -SYMBOL_MARGIN - height];
const text = props.selected.displayedText; const text = props.selected.displayedText;

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

@ -182,6 +182,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
const width = symbol.offset + (symbol.width / 2); const width = symbol.offset + (symbol.width / 2);
if (width != null && width > 0) { if (width != null && width > 0) {
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 style = symbol.linkedContainers.values().next().value.dimensionOptions;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
const text = width const text = width
@ -197,7 +198,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
yEnd={-offset} yEnd={-offset}
text={text} text={text}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
} }
@ -211,6 +212,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel,
const height = symbol.offset + (symbol.height / 2); const height = symbol.offset + (symbol.height / 2);
if (height != null && height > 0) { if (height != null && height > 0) {
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 style = symbol.linkedContainers.values().next().value.dimensionOptions;
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
const text = height const text = height
@ -226,7 +228,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel,
yEnd={0} yEnd={0}
text={text} text={text}
scale={scale} scale={scale}
color={color}/> style={style}/>
); );
} }
} }
@ -680,40 +682,3 @@ function AddVerticalSelfMarginDimension(
); );
} }
} }
function AddHorizontalSymbolDimension(
symbol: ISymbolModel,
dimensions: React.ReactNode[],
scale: number,
depth: number
): void {
const width = symbol.x + (symbol.width / 2);
if (width == null || width <= 0) {
return;
}
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();
// TODO: Put this in default.ts
const defaultDimensionSymbolStyle: IDimensionStyle = {
color: 'black'
};
dimensions.push(
<Dimension
key={id}
id={id}
xStart={0}
yStart={-offset}
xEnd={width}
yEnd={-offset}
text={text}
scale={scale}
style={defaultDimensionSymbolStyle}/>
);
}