Merged PR 308: #8224/#7571 Margins cotation and Colors
Related work items: #8224
This commit is contained in:
Carl Fuchs
parent
4e8f465405
commit
a7feebdcd1
18 changed files with 425 additions and 150 deletions
|
|
@ -2,7 +2,13 @@ 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, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../../utils/default';
|
||||
import {
|
||||
DIMENSION_MARGIN,
|
||||
SHOW_BORROWER_DIMENSIONS,
|
||||
SHOW_CHILDREN_DIMENSIONS,
|
||||
SHOW_SELF_DIMENSIONS,
|
||||
SHOW_SELF_MARGINS_DIMENSIONS
|
||||
} from '../../../utils/default';
|
||||
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
import { Dimension } from './Dimension';
|
||||
|
|
@ -13,8 +19,6 @@ interface IDimensionLayerProps {
|
|||
scale: number
|
||||
}
|
||||
|
||||
const MODULE_STROKE_WIDTH = 1;
|
||||
|
||||
/**
|
||||
* Fonction that call another function given the positions
|
||||
* @param dimMapped Position mapped depending on the Position enum in order:
|
||||
|
|
@ -67,29 +71,46 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
}
|
||||
|
||||
for (const { container, depth, currentTransform } of it) {
|
||||
const containerLeftDim = leftDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerTopDim = topDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerLeftDim = leftDim - offset;
|
||||
const containerTopDim = topDim - offset;
|
||||
const containerBottomDim = bottomDim + offset;
|
||||
const containerRightDim = rightDim + offset;
|
||||
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.showSelfDimensions,
|
||||
container.properties.dimensionOptions.selfDimensions.positions,
|
||||
AddHorizontalSelfDimension,
|
||||
AddVerticalSelfDimension,
|
||||
[
|
||||
container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
scale,
|
||||
container.properties.dimensionOptions.selfDimensions.color]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
|
||||
if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.showDimensionWithMarks,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.positions,
|
||||
AddHorizontalSelfMarginsDimension,
|
||||
AddVerticalSelfMarginDimension,
|
||||
[
|
||||
container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale,
|
||||
container.properties.dimensionOptions.selfMarginsDimensions.color]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.dimensionOptions.dimensionWithMarks.positions,
|
||||
AddHorizontalBorrowerDimension,
|
||||
AddVerticalBorrowerDimension,
|
||||
[
|
||||
|
|
@ -98,14 +119,15 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
depth,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
scale,
|
||||
container.properties.dimensionOptions.dimensionWithMarks.color]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.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.showChildrenDimensions,
|
||||
container.properties.dimensionOptions.childrenDimensions.positions,
|
||||
AddHorizontalChildrenDimension,
|
||||
AddVerticalChildrenDimension,
|
||||
[
|
||||
|
|
@ -113,7 +135,8 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
|
|||
container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
scale,
|
||||
container.properties.dimensionOptions.childrenDimensions.color]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -142,7 +165,8 @@ function AddHorizontalChildrenDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const childrenId = `dim-y${yDim.toFixed(0)}-children-${container.properties.id}`;
|
||||
|
||||
|
|
@ -192,9 +216,9 @@ function AddHorizontalChildrenDimension(
|
|||
xEnd={xChildrenEnd + offset}
|
||||
yStart={yDim}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
scale={scale} />);
|
||||
scale={scale}
|
||||
color={color}/>);
|
||||
}
|
||||
|
||||
function AddVerticalChildrenDimension(
|
||||
|
|
@ -204,7 +228,9 @@ function AddVerticalChildrenDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
scale: number,
|
||||
color: string
|
||||
|
||||
): void {
|
||||
const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
|
||||
|
||||
|
|
@ -259,9 +285,9 @@ function AddVerticalChildrenDimension(
|
|||
yStart={yChildrenStart + offset}
|
||||
xEnd={xDim}
|
||||
yEnd={yChildrenEnd + offset}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
scale={scale}
|
||||
color={color}
|
||||
/>);
|
||||
}
|
||||
|
||||
|
|
@ -272,7 +298,8 @@ function AddHorizontalBorrowerDimension(
|
|||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
|
|
@ -316,9 +343,9 @@ function AddHorizontalBorrowerDimension(
|
|||
xEnd={next}
|
||||
yStart={yDim}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={value.toFixed(0)}
|
||||
scale={scale} />);
|
||||
scale={scale}
|
||||
color={color}/>);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
|
@ -331,7 +358,8 @@ function AddVerticalBorrowerDimension(
|
|||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
|
|
@ -380,9 +408,9 @@ function AddVerticalBorrowerDimension(
|
|||
xEnd={xDim}
|
||||
yStart={cur}
|
||||
yEnd={next}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={value.toFixed(0)}
|
||||
scale={scale} />);
|
||||
scale={scale}
|
||||
color={color}/>);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
|
@ -393,7 +421,8 @@ function AddVerticalSelfDimension(
|
|||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const height = container.properties.height;
|
||||
const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
|
||||
|
|
@ -415,18 +444,20 @@ function AddVerticalSelfDimension(
|
|||
yStart={yStart}
|
||||
xEnd={xDim}
|
||||
yEnd={yEnd}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textVert}
|
||||
scale={scale} />
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
|
||||
function AddHorizontalSelfDimension(
|
||||
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const width = container.properties.width;
|
||||
const id = `dim-y${yDim.toFixed(0)}-${container.properties.id}`;
|
||||
|
|
@ -443,8 +474,125 @@ function AddHorizontalSelfDimension(
|
|||
yStart={yDim}
|
||||
xEnd={xEnd}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={text}
|
||||
scale={scale} />
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
|
||||
function AddHorizontalSelfMarginsDimension(
|
||||
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const left = container.properties.margin.left;
|
||||
if (left != null) {
|
||||
const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`;
|
||||
const xStart = container.properties.x + currentTransform[0] - left;
|
||||
const xEnd = xStart + left;
|
||||
const text = left
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={xStart}
|
||||
yStart={yDim}
|
||||
xEnd={xEnd}
|
||||
yEnd={yDim}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
|
||||
const right = container.properties.margin.right;
|
||||
if (right != null) {
|
||||
const id = `dim-y-margin-right${yDim.toFixed(0)}-${container.properties.id}`;
|
||||
const xStart = container.properties.x + container.properties.width + currentTransform[0];
|
||||
const xEnd = xStart + right;
|
||||
const text = right
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={xStart}
|
||||
yStart={yDim}
|
||||
xEnd={xEnd}
|
||||
yEnd={yDim}
|
||||
text={text}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function AddVerticalSelfMarginDimension(
|
||||
xDim: number,
|
||||
isRight: boolean,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number,
|
||||
color: string
|
||||
): void {
|
||||
const top = container.properties.margin.top;
|
||||
if (top != null) {
|
||||
const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`;
|
||||
let yStart = container.properties.y + currentTransform[1];
|
||||
let yEnd = yStart - top;
|
||||
const textVert = top
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
||||
if (isRight) {
|
||||
[yStart, yEnd] = [yEnd, yStart];
|
||||
}
|
||||
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={idVert}
|
||||
id={idVert}
|
||||
xStart={xDim}
|
||||
yStart={yStart}
|
||||
xEnd={xDim}
|
||||
yEnd={yEnd}
|
||||
text={textVert}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
const bottom = container.properties.margin.bottom;
|
||||
if (bottom != null) {
|
||||
const idVert = `dim-x-margin-bottom${xDim.toFixed(0)}-${container.properties.id}`;
|
||||
let yStart = container.properties.y + container.properties.height + bottom + currentTransform[1];
|
||||
let yEnd = yStart - bottom;
|
||||
const textVert = bottom
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
||||
if (isRight) {
|
||||
[yStart, yEnd] = [yEnd, yStart];
|
||||
}
|
||||
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={idVert}
|
||||
id={idVert}
|
||||
xStart={xDim}
|
||||
yStart={yStart}
|
||||
xEnd={xDim}
|
||||
yEnd={yEnd}
|
||||
text={textVert}
|
||||
scale={scale}
|
||||
color={color}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue