Merged PR 199: Add more Position for the dimensions + rename isDimensionBorrower and MarkPosition... + Refactor components in ContainerForm with Checkboxes and Selector + Add more docs
Add more Position for the dimensions Rename isDimensionBorrower and MarkPosition... Refactor components in ContainerForm with Checkboxes and Selector Add more docs
This commit is contained in:
Eric Nguyen
parent
38666af314
commit
b88539e34d
13 changed files with 494 additions and 314 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { Position } from '../../../Enums/Position';
|
||||
import { ContainerModel, IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../../utils/default';
|
||||
import { MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
|
|
@ -13,6 +14,43 @@ interface IDimensionLayerProps {
|
|||
|
||||
const MODULE_STROKE_WIDTH = 1;
|
||||
|
||||
/**
|
||||
* Fonction that call another function given the positions
|
||||
* @param dimMapped Position mapped depending on the Position enum in order:
|
||||
* [0:left, 1:bottom, 2:up, 3:right]
|
||||
* @param positions List of positions
|
||||
* @param horizontalAction Action called when a left or right position is present
|
||||
* @param verticalAction Action called when a down or up position is present
|
||||
* @param params Params for the actions
|
||||
* (the two actions must have the same number of params, and in the same order)
|
||||
*/
|
||||
function ActionByPosition(
|
||||
dimMapped: number[],
|
||||
positions: Position[],
|
||||
horizontalAction: (dim: number, ...params: any[]) => void,
|
||||
verticalAction: (dim: number, ...params: any[]) => void,
|
||||
params: any[]
|
||||
): void {
|
||||
positions.forEach((position: Position) => {
|
||||
const dim = dimMapped[position];
|
||||
switch (position) {
|
||||
case Position.Left:
|
||||
case Position.Right:
|
||||
verticalAction(dim, ...params);
|
||||
break;
|
||||
case Position.Down:
|
||||
case Position.Up:
|
||||
horizontalAction(dim, ...params);
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a list of dimensions of all containers in root
|
||||
* @param param0 Object with the root container and the scale of the svg
|
||||
* @returns A list of dimensions
|
||||
*/
|
||||
function Dimensions({ root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
||||
const it = MakeRecursionDFSIterator(root, 0, [0, 0]);
|
||||
const dimensions: React.ReactNode[] = [];
|
||||
|
|
@ -30,39 +68,71 @@ function Dimensions({ root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
|||
const containerTopDim = topDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions) {
|
||||
AddSelfDimension(container, currentTransform, containerTopDim, containerLeftDim, scale, dimensions);
|
||||
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.showSelfDimensions,
|
||||
AddHorizontalSelfDimension,
|
||||
AddVerticalSelfDimension,
|
||||
[container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.isDimensionBorrower) {
|
||||
AddBorrowerDimension(containerBottomDim, containerRightDim, depth, scale, container, currentTransform, dimensions);
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.showDimensionWithMarks,
|
||||
AddHorizontalBorrowerDimension,
|
||||
AddVerticalBorrowerDimension,
|
||||
[container,
|
||||
depth,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions && container.children.length > 1) {
|
||||
AddChildrenDimension(container, currentTransform, dimensions, containerBottomDim, containerRightDim, scale);
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length > 1) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.showChildrenDimensions,
|
||||
AddHorizontalChildrenDimension,
|
||||
AddVerticalChildrenDimension,
|
||||
[container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return dimensions;
|
||||
}
|
||||
|
||||
function AddChildrenDimension(
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerBottomDim: number,
|
||||
containerRightDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
AddHorizontalChildrenDimension(container, currentTransform, dimensions, containerBottomDim, scale);
|
||||
AddVerticalChildrenDimension(container, currentTransform, dimensions, containerRightDim, scale);
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
return (
|
||||
<g>
|
||||
{ Dimensions(props) }
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
/// Dimensions Actions ///
|
||||
|
||||
function AddHorizontalChildrenDimension(
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerBottomDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-children-${container.properties.id}`;
|
||||
|
|
@ -94,18 +164,18 @@ function AddHorizontalChildrenDimension(
|
|||
id={childrenId}
|
||||
xStart={xChildrenStart + offset}
|
||||
xEnd={xChildrenEnd + offset}
|
||||
yStart={containerBottomDim}
|
||||
yEnd={containerBottomDim}
|
||||
yStart={yDim}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
scale={scale} />);
|
||||
}
|
||||
|
||||
function AddVerticalChildrenDimension(
|
||||
xDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerRightDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-v-children-${container.properties.id}`;
|
||||
|
|
@ -135,9 +205,9 @@ function AddVerticalChildrenDimension(
|
|||
dimensions.push(<Dimension
|
||||
key={childrenId}
|
||||
id={childrenId}
|
||||
xStart={containerRightDim}
|
||||
xStart={xDim}
|
||||
yStart={yChildrenStart + offset}
|
||||
xEnd={containerRightDim}
|
||||
xEnd={xDim}
|
||||
yEnd={yChildrenEnd + offset}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
|
|
@ -145,34 +215,20 @@ function AddVerticalChildrenDimension(
|
|||
/>);
|
||||
}
|
||||
|
||||
function AddBorrowerDimension(
|
||||
bottomDim: number,
|
||||
rightDim: number,
|
||||
depth: number,
|
||||
scale: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[]
|
||||
): void {
|
||||
AddHorizontalBorrowerDimension(bottomDim, container, depth, currentTransform, dimensions, scale);
|
||||
AddVerticalBorrowerDimension(rightDim, container, depth, currentTransform, dimensions, scale);
|
||||
}
|
||||
|
||||
function AddHorizontalBorrowerDimension(
|
||||
bottomDim: number,
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
const yDim = bottomDim;
|
||||
const it = MakeRecursionDFSIterator(container, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
for (const {
|
||||
container: childContainer, currentTransform: childCurrentTransform
|
||||
} of it) {
|
||||
const isHidden = !childContainer.properties.markPositionToDimensionBorrower.includes(Orientation.Horizontal);
|
||||
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal);
|
||||
if (isHidden) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -212,20 +268,19 @@ function AddHorizontalBorrowerDimension(
|
|||
}
|
||||
|
||||
function AddVerticalBorrowerDimension(
|
||||
rightDim: number,
|
||||
xDim: number,
|
||||
container: IContainerModel,
|
||||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
const xDim = rightDim;
|
||||
const it = MakeRecursionDFSIterator(container, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
for (const {
|
||||
container: childContainer, currentTransform: childCurrentTransform
|
||||
} of it) {
|
||||
const isHidden = !childContainer.properties.markPositionToDimensionBorrower.includes(Orientation.Vertical);
|
||||
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical);
|
||||
if (isHidden) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -264,24 +319,17 @@ function AddVerticalBorrowerDimension(
|
|||
}
|
||||
}
|
||||
|
||||
function AddSelfDimension(
|
||||
function AddVerticalSelfDimension(
|
||||
xDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
topDim: number,
|
||||
leftDim: number,
|
||||
scale: number,
|
||||
dimensions: React.ReactNode[]
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
AddHorizontalSelfDimension(container, currentTransform, topDim, dimensions, scale);
|
||||
AddVerticalSelfDimension(container, currentTransform, leftDim, dimensions, scale);
|
||||
}
|
||||
|
||||
function AddVerticalSelfDimension(container: IContainerModel, currentTransform: [number, number], leftDim: number, dimensions: React.ReactNode[], scale: number): void {
|
||||
const height = container.properties.height;
|
||||
const idVert = `dim-v-${container.properties.id}`;
|
||||
const yStart = container.properties.y + currentTransform[1];
|
||||
const yEnd = yStart + height;
|
||||
const x = leftDim;
|
||||
const textVert = height
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
|
@ -289,9 +337,9 @@ function AddVerticalSelfDimension(container: IContainerModel, currentTransform:
|
|||
<Dimension
|
||||
key={idVert}
|
||||
id={idVert}
|
||||
xStart={x}
|
||||
xStart={xDim}
|
||||
yStart={yStart}
|
||||
xEnd={x}
|
||||
xEnd={xDim}
|
||||
yEnd={yEnd}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textVert}
|
||||
|
|
@ -300,9 +348,9 @@ function AddVerticalSelfDimension(container: IContainerModel, currentTransform:
|
|||
}
|
||||
|
||||
function AddHorizontalSelfDimension(
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
topDim: number,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
|
|
@ -310,7 +358,6 @@ function AddHorizontalSelfDimension(
|
|||
const id = `dim-${container.properties.id}`;
|
||||
const xStart = container.properties.x + currentTransform[0];
|
||||
const xEnd = xStart + width;
|
||||
const y = topDim;
|
||||
const text = width
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
|
@ -319,24 +366,11 @@ function AddHorizontalSelfDimension(
|
|||
key={id}
|
||||
id={id}
|
||||
xStart={xStart}
|
||||
yStart={y}
|
||||
yStart={yDim}
|
||||
xEnd={xEnd}
|
||||
yEnd={y}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={text}
|
||||
scale={scale} />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
return (
|
||||
<g>
|
||||
{ Dimensions(props) }
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue