Merged PR 375: Symbol Y
Implement y axis in symbol Related work items: #7306
This commit is contained in:
Carl Fuchs
Eric Nguyen
commit
9e9a5f3f52
20 changed files with 423 additions and 208 deletions
|
|
@ -2,6 +2,7 @@ import * as React from 'react';
|
|||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { Position } from '../../../Enums/Position';
|
||||
import {
|
||||
DEFAULT_DIMENSION_SYMBOL_STYLE,
|
||||
DIMENSION_MARGIN,
|
||||
SHOW_BORROWER_DIMENSIONS,
|
||||
SHOW_CHILDREN_DIMENSIONS,
|
||||
|
|
@ -10,7 +11,7 @@ import {
|
|||
} from '../../../utils/default';
|
||||
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
import { Dimension, type IDimensionStyle } from './Dimension';
|
||||
import { Dimension } from './Dimension';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
|
||||
|
|
@ -41,14 +42,12 @@ function ActionByPosition(
|
|||
positions.forEach((position: Position) => {
|
||||
const dim = dimMapped[position];
|
||||
switch (position) {
|
||||
case Position.Right:
|
||||
case Position.Left:
|
||||
case Position.Right: {
|
||||
const isRight = position === Position.Right;
|
||||
verticalAction(dim, isRight, ...params);
|
||||
verticalAction(dim, false, ...params);
|
||||
break;
|
||||
}
|
||||
case Position.Down:
|
||||
case Position.Up:
|
||||
case Position.Down:
|
||||
horizontalAction(dim, ...params);
|
||||
break;
|
||||
}
|
||||
|
|
@ -94,7 +93,8 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
);
|
||||
}
|
||||
|
||||
if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
|
||||
if (SHOW_SELF_MARGINS_DIMENSIONS &&
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.positions,
|
||||
|
|
@ -127,7 +127,9 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
);
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
|
||||
if (SHOW_CHILDREN_DIMENSIONS &&
|
||||
container.properties.dimensionOptions.childrenDimensions.positions.length > 0 &&
|
||||
container.children.length >= 2) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.childrenDimensions.positions,
|
||||
|
|
@ -144,24 +146,76 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
}
|
||||
}
|
||||
|
||||
let startDepthSymbols: number = 0;
|
||||
symbols.forEach((symbol: ISymbolModel) => {
|
||||
if (!symbol.showDimension) {
|
||||
return;
|
||||
// TODO: Implement DimensionManager
|
||||
symbols.forEach((symbol) => {
|
||||
if (symbol.showDimension) {
|
||||
if (symbol.isVertical) {
|
||||
AddVerticalSymbolDimension(symbol, dimensions, scale, 0);
|
||||
} else {
|
||||
AddHorizontalSymbolDimension(symbol, dimensions, scale, 0);
|
||||
}
|
||||
}
|
||||
|
||||
startDepthSymbols++;
|
||||
AddHorizontalSymbolDimension(
|
||||
symbol,
|
||||
dimensions,
|
||||
scale,
|
||||
startDepthSymbols
|
||||
);
|
||||
});
|
||||
|
||||
return dimensions;
|
||||
}
|
||||
|
||||
function AddHorizontalSymbolDimension(symbol: ISymbolModel,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
depth: 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}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function AddVerticalSymbolDimension(symbol: ISymbolModel,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
depth: 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}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
|
|
@ -195,8 +249,12 @@ function AddHorizontalChildrenDimension(
|
|||
return;
|
||||
}
|
||||
|
||||
let xChildrenStart = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference);
|
||||
let xChildrenEnd = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference);
|
||||
let xChildrenStart = TransformX(lastChild.properties.x,
|
||||
lastChild.properties.width,
|
||||
lastChild.properties.positionReference);
|
||||
let xChildrenEnd = TransformX(lastChild.properties.x,
|
||||
lastChild.properties.width,
|
||||
lastChild.properties.positionReference);
|
||||
|
||||
// Find the min and max
|
||||
for (let i = container.children.length - 2; i >= 0; i--) {
|
||||
|
|
@ -258,8 +316,12 @@ function AddVerticalChildrenDimension(
|
|||
return;
|
||||
}
|
||||
|
||||
let yChildrenStart = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
|
||||
let yChildrenEnd = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
|
||||
let yChildrenStart = TransformY(lastChild.properties.y,
|
||||
lastChild.properties.height,
|
||||
lastChild.properties.positionReference);
|
||||
let yChildrenEnd = TransformY(lastChild.properties.y,
|
||||
lastChild.properties.height,
|
||||
lastChild.properties.positionReference);
|
||||
|
||||
// Find the min and max
|
||||
for (let i = container.children.length - 2; i >= 0; i--) {
|
||||
|
|
@ -611,40 +673,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}/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue