Merged PR 330: Add DimensionStyle + Refactor dimensionLayer + Add width and dashArray to style
Add DimensionStyle + Refactor dimensionLayer + Add width and dashArray to style Related work items: #7977
This commit is contained in:
Eric Nguyen
parent
c6c4bd1e32
commit
338a2c157c
14 changed files with 475 additions and 324 deletions
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { Position } from '../../../Enums/Position';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import {
|
||||
DIMENSION_MARGIN,
|
||||
SHOW_BORROWER_DIMENSIONS,
|
||||
|
|
@ -12,7 +11,9 @@ import {
|
|||
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
import { Dimension } from './Dimension';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { type IDimensionStyle } from '../../../Interfaces/IDimensionStyle';
|
||||
|
||||
interface IDimensionLayerProps {
|
||||
containers: Map<string, IContainerModel>
|
||||
|
|
@ -37,8 +38,7 @@ function ActionByPosition(
|
|||
horizontalAction: (dim: number, ...params: any[]) => void,
|
||||
verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
|
||||
params: any[]
|
||||
): boolean {
|
||||
let incrementDepthSymbols = false;
|
||||
): void {
|
||||
positions.forEach((position: Position) => {
|
||||
const dim = dimMapped[position];
|
||||
switch (position) {
|
||||
|
|
@ -50,12 +50,10 @@ function ActionByPosition(
|
|||
}
|
||||
case Position.Down:
|
||||
case Position.Up:
|
||||
incrementDepthSymbols = true;
|
||||
horizontalAction(dim, ...params);
|
||||
break;
|
||||
}
|
||||
});
|
||||
return incrementDepthSymbols;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -74,7 +72,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
if (!SHOW_SELF_DIMENSIONS) {
|
||||
return [];
|
||||
}
|
||||
let startDepthSymbols: number = 0;
|
||||
|
||||
for (const { container, depth, currentTransform } of it) {
|
||||
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
|
|
@ -84,7 +81,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 incrementDepthSymbol = ActionByPosition(
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.selfDimensions.positions,
|
||||
AddHorizontalSelfDimension,
|
||||
|
|
@ -93,14 +90,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale,
|
||||
container.properties.dimensionOptions.selfDimensions.color]
|
||||
scale
|
||||
]
|
||||
);
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
|
||||
if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.positions,
|
||||
AddHorizontalSelfMarginsDimension,
|
||||
|
|
@ -109,14 +105,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.color]
|
||||
scale
|
||||
]
|
||||
);
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.dimensionWithMarks.positions,
|
||||
|
||||
|
|
@ -128,14 +123,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
depth,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale,
|
||||
container.properties.dimensionOptions.dimensionWithMarks.color]
|
||||
scale
|
||||
]
|
||||
);
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
|
||||
const incrementDepthSymbol = ActionByPosition(
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.childrenDimensions.positions,
|
||||
AddHorizontalChildrenDimension,
|
||||
|
|
@ -145,28 +139,32 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
|
|||
container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale,
|
||||
container.properties.dimensionOptions.childrenDimensions.color]
|
||||
scale
|
||||
]
|
||||
);
|
||||
|
||||
if (incrementDepthSymbol) { startDepthSymbols++; }
|
||||
}
|
||||
}
|
||||
|
||||
let startDepthSymbols: number = 0;
|
||||
for (const symbol of symbols) {
|
||||
if (symbol[1].showDimension) {
|
||||
startDepthSymbols++;
|
||||
AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols);
|
||||
AddHorizontalSymbolDimension(
|
||||
symbol[1],
|
||||
dimensions,
|
||||
scale,
|
||||
startDepthSymbols
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return dimensions;
|
||||
}
|
||||
|
||||
function AddHorizontalSymbolDimension(symbol: ISymbolModel,
|
||||
function AddHorizontalSymbolDimension(
|
||||
symbol: ISymbolModel,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string,
|
||||
depth: number
|
||||
): void {
|
||||
const width = symbol.x + (symbol.width / 2);
|
||||
|
|
@ -177,6 +175,11 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
|
|||
const text = width
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
||||
// TODO: Put this in default.ts
|
||||
const defaultDimensionSymbolStyle: IDimensionStyle = {
|
||||
color: 'black'
|
||||
};
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={id}
|
||||
|
|
@ -187,7 +190,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
|
|||
yEnd={-offset}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={defaultDimensionSymbolStyle}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -213,10 +216,10 @@ function AddHorizontalChildrenDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-y${yDim.toFixed(0)}-children-${container.properties.id}`;
|
||||
const style = container.properties.dimensionOptions.childrenDimensions.style;
|
||||
|
||||
const lastChildId = container.children[container.children.length - 1];
|
||||
const lastChild = FindContainerById(containers, lastChildId);
|
||||
|
|
@ -266,7 +269,7 @@ function AddHorizontalChildrenDimension(
|
|||
yEnd={yDim}
|
||||
text={textChildren}
|
||||
scale={scale}
|
||||
color={color}/>);
|
||||
style={style}/>);
|
||||
}
|
||||
|
||||
function AddVerticalChildrenDimension(
|
||||
|
|
@ -276,10 +279,10 @@ function AddVerticalChildrenDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
|
||||
const style = container.properties.dimensionOptions.childrenDimensions.style;
|
||||
|
||||
const lastChildId = container.children[container.children.length - 1];
|
||||
const lastChild = FindContainerById(containers, lastChildId);
|
||||
|
|
@ -334,7 +337,7 @@ function AddVerticalChildrenDimension(
|
|||
yEnd={yChildrenEnd + offset}
|
||||
text={textChildren}
|
||||
scale={scale}
|
||||
color={color}
|
||||
style={style}
|
||||
/>);
|
||||
}
|
||||
|
||||
|
|
@ -345,9 +348,9 @@ function AddHorizontalBorrowerDimension(
|
|||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const style = container.properties.dimensionOptions.dimensionWithMarks.style;
|
||||
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
for (const {
|
||||
|
|
@ -392,7 +395,7 @@ function AddHorizontalBorrowerDimension(
|
|||
yEnd={yDim}
|
||||
text={value.toFixed(0)}
|
||||
scale={scale}
|
||||
color={color}/>);
|
||||
style={style}/>);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
|
@ -405,9 +408,9 @@ function AddVerticalBorrowerDimension(
|
|||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const style = container.properties.dimensionOptions.dimensionWithMarks.style;
|
||||
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
for (const {
|
||||
|
|
@ -457,7 +460,7 @@ function AddVerticalBorrowerDimension(
|
|||
yEnd={next}
|
||||
text={value.toFixed(0)}
|
||||
scale={scale}
|
||||
color={color}/>);
|
||||
style={style}/>);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
|
@ -468,9 +471,9 @@ function AddVerticalSelfDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const style = container.properties.dimensionOptions.selfDimensions.style;
|
||||
const height = container.properties.height;
|
||||
const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
|
||||
let yStart = container.properties.y + currentTransform[1] + height;
|
||||
|
|
@ -493,7 +496,7 @@ function AddVerticalSelfDimension(
|
|||
yEnd={yEnd}
|
||||
text={textVert}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={style}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -502,9 +505,9 @@ function AddHorizontalSelfDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const style = container.properties.dimensionOptions.selfDimensions.style;
|
||||
const width = container.properties.width;
|
||||
const id = `dim-y${yDim.toFixed(0)}-${container.properties.id}`;
|
||||
const xStart = container.properties.x + currentTransform[0];
|
||||
|
|
@ -522,7 +525,7 @@ function AddHorizontalSelfDimension(
|
|||
yEnd={yDim}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={style}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -531,9 +534,9 @@ function AddHorizontalSelfMarginsDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const style = container.properties.dimensionOptions.selfMarginsDimensions.style;
|
||||
const left = container.properties.margin.left;
|
||||
if (left != null) {
|
||||
const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`;
|
||||
|
|
@ -552,7 +555,7 @@ function AddHorizontalSelfMarginsDimension(
|
|||
yEnd={yDim}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={style}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -574,7 +577,7 @@ function AddHorizontalSelfMarginsDimension(
|
|||
yEnd={yDim}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={style}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -585,9 +588,9 @@ function AddVerticalSelfMarginDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
scale: number
|
||||
): void {
|
||||
const style = container.properties.dimensionOptions.selfMarginsDimensions.style;
|
||||
const top = container.properties.margin.top;
|
||||
if (top != null) {
|
||||
const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`;
|
||||
|
|
@ -611,7 +614,7 @@ function AddVerticalSelfMarginDimension(
|
|||
yEnd={yEnd}
|
||||
text={textVert}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={style}/>
|
||||
);
|
||||
}
|
||||
const bottom = container.properties.margin.bottom;
|
||||
|
|
@ -637,7 +640,7 @@ function AddVerticalSelfMarginDimension(
|
|||
yEnd={yEnd}
|
||||
text={textVert}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
style={style}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue