Merged PR 196: Implement Vertical orientation + Upgrade Heroicons to 2.0
Implémenter l'orientation verticale Modifier l'effet de append Implementer RigidBody Implementer Flex et simplex Implémenter Push Implémenter Swap Implement MinMaxHeight without behaviors Fix Margin for Height Implement PositionReference Fix dimension vertical position inside children Add orientation change in form Implement sortChildren Implement Anchor Fix warning message on overlapping Fix minimap when root container is vertical #7287 #7288 #7289 #7290 #7291 #7292 #7294 #7295 #7296 #7297 #7298 #7299 #7300 #7301 #7302
This commit is contained in:
Eric Nguyen
parent
459e83a0c8
commit
18cbacaca1
45 changed files with 2112 additions and 1063 deletions
|
|
@ -1,39 +1,328 @@
|
|||
import * as React from 'react';
|
||||
import { ContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { DIMENSION_MARGIN } from '../../../utils/default';
|
||||
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
||||
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';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
import { Dimension } from './Dimension';
|
||||
|
||||
interface IDimensionLayerProps {
|
||||
roots: ContainerModel | ContainerModel[] | null
|
||||
root: ContainerModel
|
||||
scale: number
|
||||
}
|
||||
|
||||
function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
|
||||
const it = MakeBFSIterator(root);
|
||||
const MODULE_STROKE_WIDTH = 1;
|
||||
|
||||
function Dimensions({ root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
||||
const it = MakeRecursionDFSIterator(root, 0, [0, 0]);
|
||||
const dimensions: React.ReactNode[] = [];
|
||||
for (const { container, depth } of it) {
|
||||
const width = container.properties.width;
|
||||
const id = `dim-${container.properties.id}`;
|
||||
const xStart = GetAbsolutePosition(container)[0];
|
||||
const xEnd = xStart + width;
|
||||
const y = (container.properties.y + container.properties.height) + (DIMENSION_MARGIN * (depth + 1));
|
||||
const strokeWidth = 1;
|
||||
const text = width
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={xStart}
|
||||
yStart={y}
|
||||
xEnd={xEnd}
|
||||
yEnd={y}
|
||||
strokeWidth={strokeWidth}
|
||||
text={text} />
|
||||
const topDim = root.properties.y;
|
||||
const leftDim = root.properties.x;
|
||||
const rightDim = root.properties.x + root.properties.width;
|
||||
const bottomDim = root.properties.y + root.properties.height;
|
||||
|
||||
if (!SHOW_SELF_DIMENSIONS) {
|
||||
return [];
|
||||
}
|
||||
|
||||
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;
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions) {
|
||||
AddSelfDimension(container, currentTransform, containerTopDim, containerLeftDim, scale, dimensions);
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.isDimensionBorrower) {
|
||||
AddBorrowerDimension(containerBottomDim, containerRightDim, depth, scale, container, currentTransform, dimensions);
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions && container.children.length > 0) {
|
||||
AddChildrenDimension(container, currentTransform, dimensions, containerBottomDim, containerRightDim, 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);
|
||||
}
|
||||
|
||||
function AddHorizontalChildrenDimension(
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerBottomDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-children-${container.properties.id}`;
|
||||
|
||||
const lastChild = container.children[container.children.length - 1];
|
||||
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--) {
|
||||
const child = container.children[i];
|
||||
const left = TransformX(child.properties.x, child.properties.width, child.properties.positionReference);
|
||||
if (left < xChildrenStart) {
|
||||
xChildrenStart = left;
|
||||
}
|
||||
const right = TransformX(child.properties.x, child.properties.width, child.properties.positionReference);
|
||||
if (right > xChildrenEnd) {
|
||||
xChildrenEnd = right;
|
||||
}
|
||||
}
|
||||
|
||||
const textChildren = (xChildrenEnd - xChildrenStart)
|
||||
.toFixed(2)
|
||||
.toString();
|
||||
|
||||
const offset = currentTransform[0] + container.properties.x;
|
||||
dimensions.push(<Dimension
|
||||
key={childrenId}
|
||||
id={childrenId}
|
||||
xStart={xChildrenStart + offset}
|
||||
xEnd={xChildrenEnd + offset}
|
||||
yStart={containerBottomDim}
|
||||
yEnd={containerBottomDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
scale={scale} />);
|
||||
}
|
||||
|
||||
function AddVerticalChildrenDimension(
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerRightDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-v-children-${container.properties.id}`;
|
||||
|
||||
const lastChild = container.children[container.children.length - 1];
|
||||
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--) {
|
||||
const child = container.children[i];
|
||||
const top = TransformY(child.properties.y, child.properties.height, child.properties.positionReference);
|
||||
if (top < yChildrenStart) {
|
||||
yChildrenStart = top;
|
||||
}
|
||||
const bottom = TransformY(child.properties.y, child.properties.height, child.properties.positionReference);
|
||||
if (bottom > yChildrenEnd) {
|
||||
yChildrenEnd = bottom;
|
||||
}
|
||||
}
|
||||
|
||||
const textChildren = (yChildrenEnd - yChildrenStart)
|
||||
.toFixed(2)
|
||||
.toString();
|
||||
|
||||
const offset = currentTransform[0] + container.properties.x;
|
||||
dimensions.push(<Dimension
|
||||
key={childrenId}
|
||||
id={childrenId}
|
||||
xStart={containerRightDim}
|
||||
yStart={yChildrenStart + offset}
|
||||
xEnd={containerRightDim}
|
||||
yEnd={yChildrenEnd + offset}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
scale={scale}
|
||||
/>);
|
||||
}
|
||||
|
||||
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,
|
||||
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) {
|
||||
if (!childContainer.properties.markPositionToDimensionBorrower) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const x = TransformX(
|
||||
childContainer.properties.x,
|
||||
childContainer.properties.width,
|
||||
childContainer.properties.positionReference
|
||||
);
|
||||
|
||||
const restoredX = x + childCurrentTransform[0];
|
||||
|
||||
marks.push(
|
||||
restoredX
|
||||
);
|
||||
}
|
||||
return dimensions;
|
||||
|
||||
const restoredX = container.properties.x + currentTransform[0];
|
||||
marks.push(restoredX);
|
||||
marks.push(restoredX + container.properties.width);
|
||||
marks.sort((a, b) => a - b);
|
||||
let count = 0;
|
||||
for (const { cur, next } of Pairwise(marks)) {
|
||||
const id = `dim-borrow-${container.properties.id}-{${count}}`;
|
||||
dimensions.push(<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={cur}
|
||||
xEnd={next}
|
||||
yStart={yDim}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={(next - cur).toFixed(0).toString()}
|
||||
scale={scale} />);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
function AddVerticalBorrowerDimension(
|
||||
rightDim: 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) {
|
||||
if (!childContainer.properties.markPositionToDimensionBorrower) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const y = TransformY(
|
||||
childContainer.properties.y,
|
||||
childContainer.properties.height,
|
||||
childContainer.properties.positionReference
|
||||
);
|
||||
|
||||
const restoredy = y + childCurrentTransform[1];
|
||||
|
||||
marks.push(
|
||||
restoredy
|
||||
);
|
||||
}
|
||||
|
||||
const restoredY = container.properties.y + currentTransform[1];
|
||||
marks.push(restoredY);
|
||||
marks.push(restoredY + container.properties.height);
|
||||
marks.sort((a, b) => a - b);
|
||||
let count = 0;
|
||||
for (const { cur, next } of Pairwise(marks)) {
|
||||
const id = `dim-v-borrow-${container.properties.id}-{${count}}`;
|
||||
dimensions.push(<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={xDim}
|
||||
xEnd={xDim}
|
||||
yStart={cur}
|
||||
yEnd={next}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={(next - cur).toFixed(0).toString()}
|
||||
scale={scale} />);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
function AddSelfDimension(
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
topDim: number,
|
||||
leftDim: number,
|
||||
scale: number,
|
||||
dimensions: React.ReactNode[]
|
||||
): 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();
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={idVert}
|
||||
id={idVert}
|
||||
xStart={x}
|
||||
yStart={yStart}
|
||||
xEnd={x}
|
||||
yEnd={yEnd}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textVert}
|
||||
scale={scale} />
|
||||
);
|
||||
}
|
||||
|
||||
function AddHorizontalSelfDimension(
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
topDim: number,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
const width = container.properties.width;
|
||||
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();
|
||||
dimensions.push(
|
||||
<Dimension
|
||||
key={id}
|
||||
id={id}
|
||||
xStart={xStart}
|
||||
yStart={y}
|
||||
xEnd={xEnd}
|
||||
yEnd={y}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={text}
|
||||
scale={scale} />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -42,17 +331,9 @@ function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
|
|||
* @returns
|
||||
*/
|
||||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
let dimensions: React.ReactNode[] = [];
|
||||
if (Array.isArray(props.roots)) {
|
||||
props.roots.forEach(child => {
|
||||
dimensions.concat(GetDimensionsNodes(child));
|
||||
});
|
||||
} else if (props.roots !== null) {
|
||||
dimensions = GetDimensionsNodes(props.roots);
|
||||
}
|
||||
return (
|
||||
<g>
|
||||
{dimensions}
|
||||
{ Dimensions(props) }
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue