Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 308: #8224/#7571 Margins cotation and Colors

Browse source 
Related work items: #8224
This commit is contained in:
Carl Fuchs 2023-01-30 14:59:55 +00:00
parent 4e8f465405
commit a7feebdcd1
18 changed files with 425 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

20
csharp/SVGLDLibs/SVGLDLibs/Models/AvailableContainerModel.cs
View file

@ -1,4 +1,4 @@
using System.Collections.Generic;
using System.Collections.Generic;
using System.Runtime.Serialization;
namespace SVGLDLibs.Models
@ -112,26 +112,10 @@ namespace SVGLDLibs.Models
[DataMember(EmitDefaultValue = false)]
public bool? HideChildrenInTreeview { get; set; }
/** if true, show the dimension of the container */
[DataMember(EmitDefaultValue = false)]
public Position[] ShowSelfDimensions { get; set; }
/** if true show the overall dimensions of its children */
[DataMember(EmitDefaultValue = false)]
public Position[] ShowChildrenDimensions { get; set; }
public Dimensions DimensionOptions { get; set; }
/**
* if true, allows a parent dimension borrower to uses its x coordinate for as a reference point for a dimension
*/
[DataMember(EmitDefaultValue = false)]
public Orientation[] MarkPosition { get; set; }
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions mark
*/
[DataMember(EmitDefaultValue = false)]
public Position[] ShowDimensionWithMarks { get; set; }
/**
* if true, hide the entry in the sidebar (default: false)

28
csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs Normal file
View file

@ -0,0 +1,28 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.Text;
using System.Threading.Tasks;
namespace SVGLDLibs.Models
{
[DataContract]
public class DimensionOptions
{
/** positions of the dimension */
[DataMember(EmitDefaultValue = false)]
public Position[] positions;
/** color */
[DataMember(EmitDefaultValue = false)]
public string color;
}
}

9
csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs
View file

@ -9,11 +9,14 @@ namespace SVGLDLibs.Models
/** if true, show the dimension of the container */
[DataMember(EmitDefaultValue = false)]
public Position[] showSelfDimensions;
public DimensionOptions selfDimensions;
[DataMember(EmitDefaultValue = false)]
public DimensionOptions selfMarginsDimensions;
/** if true show the overall dimensions of its children */
[DataMember(EmitDefaultValue = false)]
public Position[] showChildrenDimensions;
public DimensionOptions childrenDimensions;
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
@ -27,6 +30,6 @@ namespace SVGLDLibs.Models
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
[DataMember(EmitDefaultValue = false)]
public Position[] showDimensionWithMarks;
public DimensionOptions dimensionWithMarks;
}
}

43
src/Components/API/api.test.tsx
View file

@ -1,8 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */
import { describe, it, expect } from 'vitest';
import { AddMethod } from '../../Enums/AddMethod';
import { Orientation } from '../../Enums/Orientation';
import { Position } from '../../Enums/Position';
import { PositionReference } from '../../Enums/PositionReference';
import { IAction } from '../../Interfaces/IAction';
import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
@ -145,28 +143,25 @@ describe.concurrent('Models test suite', () => {
DefaultChildType: 'string',
PositionReference: 0,
HideChildrenInTreeview: true,
ShowSelfDimensions: [
Position.Down,
Position.Left,
Position.Right,
Position.Up
],
ShowChildrenDimensions: [
Position.Down,
Position.Left,
Position.Right,
Position.Up
],
MarkPosition: [
Orientation.Horizontal,
Orientation.Vertical
],
ShowDimensionWithMarks: [
Position.Down,
Position.Left,
Position.Right,
Position.Up
],
DimensionOptions: {
childrenDimensions: {
color: '#000000',
positions: []
},
selfDimensions: {
color: '#000000',
positions: []
},
selfMarginsDimensions: {
color: '#000000',
positions: []
},
markPosition: [],
dimensionWithMarks: {
color: '#000000',
positions: []
}
},
IsHidden: true,
Blacklist: [
'string'

12
src/Components/Canvas/DimensionLayer.ts
View file

@ -18,11 +18,11 @@ export function AddDimensions(
depth: number
): void {
ctx.beginPath();
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
ActionByPosition(
ctx,
dimMapped,
container.properties.dimensionOptions.showSelfDimensions,
container.properties.dimensionOptions.selfDimensions.positions,
AddHorizontalSelfDimension,
AddVerticalSelfDimension,
[
@ -32,11 +32,11 @@ export function AddDimensions(
);
}
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
ActionByPosition(
ctx,
dimMapped,
container.properties.dimensionOptions.showDimensionWithMarks,
container.properties.dimensionOptions.dimensionWithMarks.positions,
AddHorizontalBorrowerDimension,
AddVerticalBorrowerDimension,
[
@ -48,11 +48,11 @@ export function AddDimensions(
);
}
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(
ctx,
dimMapped,
container.properties.dimensionOptions.showChildrenDimensions,
container.properties.dimensionOptions.childrenDimensions.positions,
AddHorizontalChildrenDimension,
AddVerticalChildrenDimension,
[

4
src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx
View file

@ -8,6 +8,7 @@ interface IPositionCheckboxesProps {
name: string
labelText: string
value: Position[]
attribute: string
onChange: (key: string, value: number[]) => void
}
@ -16,6 +17,7 @@ export function PositionCheckboxes({
name,
labelText,
value,
attribute,
onChange
}: IPositionCheckboxesProps): JSX.Element {
return <CheckboxGroupButtons
@ -64,7 +66,7 @@ export function PositionCheckboxes({
}
]}
onChange={(newSelectedValues) => {
onChange(id, newSelectedValues);
onChange(attribute, newSelectedValues);
}}
/>;
}

73
src/Components/ContainerProperties/ContainerForm.tsx
View file

@ -2,7 +2,12 @@ import * as React from 'react';
import { PropertyType } from '../../Enums/PropertyType';
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
import {
SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS,
SHOW_SELF_DIMENSIONS,
SHOW_SELF_MARGINS_DIMENSIONS
} from '../../utils/default';
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
import { Text } from '../Text/Text';
import { InputGroup } from '../InputGroup/InputGroup';
@ -336,24 +341,63 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
SHOW_SELF_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='showSelfDimensions'
id='positionsSelfDimensions'
attribute='positions'
name='ShowSelfDimensions'
labelText={Text({ textId: '@ContainerShowDimension' })}
value={props.properties.dimensionOptions.showSelfDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
value={props.properties.dimensionOptions.selfDimensions.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)}
/>
<InputGroup
labelText={Text({ textId: '@Color' })}
inputKey='color'
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.selfDimensions.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
</div>
}
{
SHOW_SELF_MARGINS_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='positionsSelfMarginsDimensions'
attribute='positions'
name='ShowSelfMarginsDimensions'
labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)}
/>
<InputGroup
labelText={Text({ textId: '@Color' })}
inputKey='color'
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.selfMarginsDimensions.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
</div>
}
{
SHOW_CHILDREN_DIMENSIONS &&
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='showChildrenDimensions'
id='positionsChildrenDimensions'
attribute='positions'
name='ShowChildrenDimensions'
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
value={props.properties.dimensionOptions.showChildrenDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
value={props.properties.dimensionOptions.childrenDimensions.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)}
/>
<InputGroup
labelText={Text({ textId: '@Color' })}
inputKey='color'
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.childrenDimensions.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
</div>
}
{
@ -370,12 +414,21 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
</div>
<div className='grid grid-cols-1 gap-2'>
<PositionCheckboxes
id='showDimensionWithMarks'
id='positionsDimensionWithMarks'
attribute='positions'
name='ShowDimensionWithMarks'
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
value={props.properties.dimensionOptions.showDimensionWithMarks}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
value={props.properties.dimensionOptions.dimensionWithMarks.positions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)}
/>
<InputGroup
labelText={Text({ textId: '@Color' })}
inputKey='color'
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.dimensionWithMarks.color}
onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
</div>
</>
}

21
src/Components/ContainerProperties/ContainerProperties.test.tsx
View file

@ -43,10 +43,23 @@ describe.concurrent('Properties', () => {
warning: '',
hideChildrenInTreeview: false,
dimensionOptions: {
showChildrenDimensions: [],
showSelfDimensions: [],
showDimensionWithMarks: [],
markPosition: []
childrenDimensions: {
color: '#000000',
positions: []
},
selfDimensions: {
color: '#000000',
positions: []
},
selfMarginsDimensions: {
color: '#000000',
positions: []
},
markPosition: [],
dimensionWithMarks: {
color: '#000000',
positions: []
}
}
};

17
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -11,8 +11,10 @@ import { Orientation } from '../../../Enums/Orientation';
/**
* Select a container
* @param container Selected container
* @returns New history
* @param containerId
* @param fullHistory
* @param historyCurrentStep
*/
export function SelectContainer(
containerId: string,
@ -135,6 +137,7 @@ function GetSelectedContainerOnDelete(
/**
* Unlink a container and its children to symbols
* (used when deleting a container)
* @param containers
* @param symbols Symbols to update
* @param container Container to unlink
*/
@ -318,6 +321,18 @@ function AssignProperty(container: IContainerModel, key: string, value: string |
case PropertyType.Margin:
SetMargin();
break;
case PropertyType.SelfDimension:
(container.properties.dimensionOptions.selfDimensions as any)[key] = value;
break;
case PropertyType.SelfMarginDimension:
(container.properties.dimensionOptions.selfMarginsDimensions as any)[key] = value;
break;
case PropertyType.ChildrenDimensions:
(container.properties.dimensionOptions.childrenDimensions as any)[key] = value;
break;
case PropertyType.DimensionWithMarks:
(container.properties.dimensionOptions.dimensionWithMarks as any)[key] = value;
break;
case PropertyType.DimensionOptions:
(container.properties.dimensionOptions as any)[key] = value;
break;

9
src/Components/SVG/Elements/DepthDimensionLayer.tsx
View file

@ -24,7 +24,7 @@ function GetDimensionsNodes(
let lastY = 0;
for (const { container, depth } of it) {
if (currentDepth !== depth) {
AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);
AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
currentDepth = depth;
min = Infinity;
@ -43,7 +43,7 @@ function GetDimensionsNodes(
}
}
AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);
AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
return dimensions;
}
@ -70,12 +70,11 @@ export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
);
}
function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, dimensions: React.ReactNode[]): void {
function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, color: string, dimensions: React.ReactNode[]): void {
const id = `dim-depth-${currentDepth}`;
const xStart = min;
const xEnd = max;
const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)) / scale;
const strokeWidth = 1;
const width = xEnd - xStart;
const text = width
.toFixed(0)
@ -93,9 +92,9 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY:
yStart={y}
xEnd={xEnd}
yEnd={y}
strokeWidth={strokeWidth}
text={text}
scale={scale}
color={color}
/>
);
}

20
src/Components/SVG/Elements/Dimension.tsx
View file

@ -8,7 +8,7 @@ interface IDimensionProps {
xEnd: number
yEnd: number
text: string
strokeWidth: number
color: string
scale?: number
}
@ -28,7 +28,7 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
export function Dimension(props: IDimensionProps): JSX.Element {
const scale = props.scale ?? 1;
const style: React.CSSProperties = {
stroke: 'black',
stroke: props.color,
strokeWidth: 2 / scale
};
@ -56,6 +56,9 @@ export function Dimension(props: IDimensionProps): JSX.Element {
const endBottomX = ApplyParametric(props.xEnd, -notchesLength, perpVecX);
const endBottomY = ApplyParametric(props.yEnd, -notchesLength, perpVecY);
const textX = ApplyParametric((props.xStart + props.xEnd) / 2, notchesLength, perpVecX);
const textY = ApplyParametric((props.yStart + props.yEnd) / 2, notchesLength, perpVecY);
return (
<g key={props.id}>
<line
@ -63,28 +66,25 @@ export function Dimension(props: IDimensionProps): JSX.Element {
y1={startTopY}
x2={startBottomX}
y2={startBottomY}
strokeWidth={props.strokeWidth}
style={style}/>
<line
x1={props.xStart}
y1={props.yStart}
x2={props.xEnd}
y2={props.yEnd}
strokeWidth={props.strokeWidth}
style={style}/>
<line
x1={endTopX}
y1={endTopY}
x2={endBottomX}
y2={endBottomY}
strokeWidth={props.strokeWidth}
style={style}/>
<text
x={(props.xStart + props.xEnd) / 2}
y={(props.yStart + props.yEnd) / 2}
<text textAnchor={'middle'} alignmentBaseline={'central'}
x={textX}
y={textY}
style={{
transform: `rotate(${rotation}turn) scale(${1 / scale}) translateX(-50%) translateY(-100%)`,
transformBox: 'fill-box'
transform: `rotate(${rotation}turn) scale(${1 / scale})`,
transformOrigin: `${textX}px ${textY}px`
}}
>
{props.text}

214
src/Components/SVG/Elements/DimensionLayer.tsx
View file

@ -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}/>
);
}
}

7
src/Enums/PropertyType.ts
View file

@ -23,5 +23,10 @@ export enum PropertyType {
/**
* Dimension options
*/
DimensionOptions,
SelfDimension,
SelfMarginDimension,
ChildrenDimensions,
DimensionWithMarks,
DimensionOptions
}

20
src/Interfaces/IAvailableContainer.ts
View file

@ -4,9 +4,9 @@ import { PositionReference } from '../Enums/PositionReference';
import { IAction } from './IAction';
import { IMargin } from './IMargin';
import { Orientation } from '../Enums/Orientation';
import { Position } from '../Enums/Position';
import { IKeyValue } from './IKeyValue';
import { IStyle } from './IStyle';
import { IDimensions } from './IDimensions';
/** Model of available container used in application configuration */
export interface IAvailableContainer {
@ -113,22 +113,8 @@ export interface IAvailableContainer {
/** Hide the children in the treeview */
HideChildrenInTreeview?: boolean
/** if true, show the dimension of the container */
ShowSelfDimensions?: Position[]
/** if true show the overall dimensions of its children */
ShowChildrenDimensions?: Position[]
/**
* if true, allows a parent dimension borrower to uses its x coordinate for as a reference point for a dimension
*/
MarkPosition?: Orientation[]
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see MarkPosition)
*/
ShowDimensionWithMarks?: Position[]
/** Dimensions options */
DimensionOptions?: IDimensions
/**
* if true, hide the entry in the sidebar (default: false)

10
src/Interfaces/IDimensionOptions.ts Normal file
View file

@ -0,0 +1,10 @@
import { Position } from '../Enums/Position';
export interface IDimensionOptions {
positions: Position[]
/**
* Stroke color
*/
color: string
}

15
src/Interfaces/IDimensions.ts
View file

@ -1,13 +1,17 @@
import { IDimensionOptions } from './IDimensionOptions';
import { Orientation } from '../Enums/Orientation';
import { Position } from '../Enums/Position';
export interface IDimensions {
// TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface
/** if true, show the dimension of the container */
showSelfDimensions: Position[]
selfDimensions: IDimensionOptions
/** if true, show the dimension of the container */
selfMarginsDimensions: IDimensionOptions
/** if true show the overall dimensions of its children */
showChildrenDimensions: Position[]
childrenDimensions: IDimensionOptions
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
@ -19,5 +23,6 @@ export interface IDimensions {
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
showDimensionWithMarks: Position[]
dimensionWithMarks: IDimensionOptions
}

3
src/index.scss
View file

@ -124,6 +124,9 @@
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
disabled:bg-slate-200 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
}
.input-group[type='color'] {
@apply py-0
}
.prop-category-body {
@apply rounded-lg bg-slate-300 p-3

44
src/utils/default.ts
View file

@ -7,7 +7,6 @@ import { IContainerProperties } from '../Interfaces/IContainerProperties';
import { IEditorState } from '../Interfaces/IEditorState';
import { ISymbolModel } from '../Interfaces/ISymbolModel';
import { Orientation } from '../Enums/Orientation';
import { Position } from '../Enums/Position';
import { AppState } from '../Enums/AppState';
/// EDITOR DEFAULTS ///
@ -63,6 +62,7 @@ export const DEFAULTCHILDTYPE_MAX_DEPTH = 10;
/// DIMENSIONS DEFAULTS ///
export const SHOW_SELF_DIMENSIONS = true;
export const SHOW_SELF_MARGINS_DIMENSIONS = true;
export const SHOW_CHILDREN_DIMENSIONS = true;
export const SHOW_BORROWER_DIMENSIONS = true;
export const SHOW_DIMENSIONS_PER_DEPTH = false;
@ -211,10 +211,23 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
positionReference: PositionReference.TopLeft,
hideChildrenInTreeview: false,
dimensionOptions: {
showChildrenDimensions: [Position.Up, Position.Left],
showSelfDimensions: [Position.Up, Position.Left],
showDimensionWithMarks: [Position.Down, Position.Right],
markPosition: []
childrenDimensions: {
color: '#000000',
positions: []
},
selfDimensions: {
color: '#000000',
positions: []
},
selfMarginsDimensions: {
color: '#000000',
positions: []
},
markPosition: [],
dimensionWithMarks: {
color: '#000000',
positions: []
}
},
warning: '',
style: DEFAULT_CONTAINER_STYLE
@ -262,10 +275,23 @@ export function GetDefaultContainerProps(type: string,
maxHeight: containerConfig.MaxWidth ?? Number.MAX_SAFE_INTEGER,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
dimensionOptions: {
showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [],
showSelfDimensions: containerConfig.ShowSelfDimensions ?? [],
markPosition: containerConfig.MarkPosition ?? [],
showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? []
childrenDimensions: {
color: containerConfig.DimensionOptions?.childrenDimensions.color ?? '#000000',
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
},
selfDimensions: {
color: containerConfig.DimensionOptions?.selfDimensions.color ?? '#000000',
positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? []
},
selfMarginsDimensions: {
color: containerConfig.DimensionOptions?.selfMarginsDimensions.color ?? '#000000',
positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? []
},
markPosition: containerConfig.DimensionOptions?.markPosition ?? [],
dimensionWithMarks: {
color: containerConfig.DimensionOptions?.dimensionWithMarks.color ?? '#000000',
positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? []
}
},
warning: '',
customSVG: containerConfig.CustomSVG,