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

Merge branch 'dev'

Browse source
This commit is contained in:
Eric NGUYEN 2022-11-21 13:56:05 +01:00
commit 58a881c813
11 changed files with 111 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

24
csharp/SVGLDLibs/SVGLDLibs/Models/ContainerProperties.cs
View file

@ -88,32 +88,14 @@ namespace SVGLDLibs.Models
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
[DataMember(EmitDefaultValue = false)]
public PositionReferenceEnumModel positionReference;
/** Hide the children in the treeview */
[DataMember(EmitDefaultValue = false)]
public bool hideChildrenInTreeview;
/** if true, show the dimension of the container */
/** Dimension options */
[DataMember(EmitDefaultValue = false)]
public Position[] showSelfDimensions;
/** if true show the overall dimensions of its children */
[DataMember(EmitDefaultValue = false)]
public Position[] showChildrenDimensions;
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
* as a reference point for a dimension
*/
[DataMember(EmitDefaultValue = false)]
public Orientation[] markPosition;
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
[DataMember(EmitDefaultValue = false)]
public Position[] showDimensionWithMarks;
public Dimensions dimensionOptions;
/**
* Warnings of a container

32
csharp/SVGLDLibs/SVGLDLibs/Models/Dimensions.cs Normal file
View file

@ -0,0 +1,32 @@
using System.Runtime.Serialization;
namespace SVGLDLibs.Models
{
[DataContract]
public class Dimensions
{
/** if true, show the dimension of the container */
[DataMember(EmitDefaultValue = false)]
public Position[] showSelfDimensions;
/** if true show the overall dimensions of its children */
[DataMember(EmitDefaultValue = false)]
public Position[] showChildrenDimensions;
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
* as a reference point for a dimension
*/
[DataMember(EmitDefaultValue = false)]
public Orientation[] markPosition;
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
[DataMember(EmitDefaultValue = false)]
public Position[] showDimensionWithMarks;
}
}

16
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.showSelfDimensions.length > 0) {
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
ActionByPosition(
ctx,
dimMapped,
container.properties.showSelfDimensions,
container.properties.dimensionOptions.showSelfDimensions,
AddHorizontalSelfDimension,
AddVerticalSelfDimension,
[
@ -32,11 +32,11 @@ export function AddDimensions(
);
}
if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) {
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
ActionByPosition(
ctx,
dimMapped,
container.properties.showDimensionWithMarks,
container.properties.dimensionOptions.showDimensionWithMarks,
AddHorizontalBorrowerDimension,
AddVerticalBorrowerDimension,
[
@ -48,11 +48,11 @@ export function AddDimensions(
);
}
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length >= 2) {
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) {
ActionByPosition(
ctx,
dimMapped,
container.properties.showChildrenDimensions,
container.properties.dimensionOptions.showChildrenDimensions,
AddHorizontalChildrenDimension,
AddVerticalChildrenDimension,
[
@ -238,7 +238,7 @@ function AddHorizontalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Horizontal);
if (isHidden) {
continue;
}
@ -297,7 +297,7 @@ function AddVerticalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Vertical);
if (isHidden) {
continue;
}

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

@ -339,8 +339,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
id='showSelfDimensions'
name='ShowSelfDimensions'
labelText={Text({ textId: '@ContainerShowDimension' })}
value={props.properties.showSelfDimensions}
onChange={props.onChange}
value={props.properties.dimensionOptions.showSelfDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
}
@ -351,8 +351,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
id='showChildrenDimensions'
name='ShowChildrenDimensions'
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
value={props.properties.showChildrenDimensions}
onChange={props.onChange}
value={props.properties.dimensionOptions.showChildrenDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
}
@ -363,9 +363,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
<OrientationCheckboxes
id='markPosition'
name='MarkPosition'
value={props.properties.markPosition}
value={props.properties.dimensionOptions.markPosition}
labelText={Text({ textId: '@ContainerMarkPosition' })}
onChange={props.onChange}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
<div className='grid grid-cols-1 gap-2'>
@ -373,8 +373,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
id='showDimensionWithMarks'
name='ShowDimensionWithMarks'
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
value={props.properties.showDimensionWithMarks}
onChange={props.onChange}
value={props.properties.dimensionOptions.showDimensionWithMarks}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
</>

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

@ -42,10 +42,12 @@ describe.concurrent('Properties', () => {
isAnchor: false,
warning: '',
hideChildrenInTreeview: false,
showChildrenDimensions: [],
showSelfDimensions: [],
showDimensionWithMarks: [],
markPosition: []
dimensionOptions: {
showChildrenDimensions: [],
showSelfDimensions: [],
showDimensionWithMarks: [],
markPosition: []
}
};
const handleChange = vi.fn((key, value) => {

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

@ -318,6 +318,9 @@ function AssignProperty(container: IContainerModel, key: string, value: string |
case PropertyType.Margin:
SetMargin();
break;
case PropertyType.DimensionOptions:
(container.properties.dimensionOptions as any)[key] = value;
break;
default:
(container.properties as any)[key] = value;
}

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

@ -72,10 +72,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) {
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
ActionByPosition(
dimMapped,
container.properties.showSelfDimensions,
container.properties.dimensionOptions.showSelfDimensions,
AddHorizontalSelfDimension,
AddVerticalSelfDimension,
[
@ -86,10 +86,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
);
}
if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) {
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
ActionByPosition(
dimMapped,
container.properties.showDimensionWithMarks,
container.properties.dimensionOptions.showDimensionWithMarks,
AddHorizontalBorrowerDimension,
AddVerticalBorrowerDimension,
[
@ -102,10 +102,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
);
}
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length >= 2) {
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) {
ActionByPosition(
dimMapped,
container.properties.showChildrenDimensions,
container.properties.dimensionOptions.showChildrenDimensions,
AddHorizontalChildrenDimension,
AddVerticalChildrenDimension,
[
@ -279,7 +279,7 @@ function AddHorizontalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Horizontal);
if (isHidden) {
continue;
}
@ -338,7 +338,7 @@ function AddVerticalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Vertical);
if (isHidden) {
continue;
}

5
src/Enums/PropertyType.ts
View file

@ -19,4 +19,9 @@ export enum PropertyType {
* Margin property: is inside the margin property: left, bottom, top, right...
*/
Margin,
/**
* Dimension options
*/
DimensionOptions,
}

22
src/Interfaces/IContainerProperties.ts
View file

@ -1,9 +1,9 @@
import { PositionReference } from '../Enums/PositionReference';
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';
/**
* Properties of a container
@ -78,24 +78,8 @@ export interface IContainerProperties {
/** Hide the children in the treeview */
hideChildrenInTreeview: boolean
// TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface
/** 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 borrow its x coordinate
* 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 liftDimensionToBorrower)
*/
showDimensionWithMarks: Position[]
/** Dimensions options */
dimensionOptions: IDimensions
/**
* Warnings of a container

23
src/Interfaces/IDimensions.ts Normal file
View file

@ -0,0 +1,23 @@
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[]
/** if true show the overall dimensions of its children */
showChildrenDimensions: Position[]
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
* 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 liftDimensionToBorrower)
*/
showDimensionWithMarks: Position[]
}

20
src/utils/default.ts
View file

@ -210,10 +210,12 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
isFlex: false,
positionReference: PositionReference.TopLeft,
hideChildrenInTreeview: false,
showChildrenDimensions: [Position.Up, Position.Left],
showSelfDimensions: [Position.Up, Position.Left],
showDimensionWithMarks: [Position.Down, Position.Right],
markPosition: [],
dimensionOptions: {
showChildrenDimensions: [Position.Up, Position.Left],
showSelfDimensions: [Position.Up, Position.Left],
showDimensionWithMarks: [Position.Down, Position.Right],
markPosition: []
},
warning: '',
style: DEFAULT_CONTAINER_STYLE
};
@ -257,10 +259,12 @@ export function GetDefaultContainerProps(type: string,
minHeight: containerConfig.MinWidth ?? 1,
maxHeight: containerConfig.MaxWidth ?? Number.MAX_SAFE_INTEGER,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [],
showSelfDimensions: containerConfig.ShowSelfDimensions ?? [],
markPosition: containerConfig.MarkPosition ?? [],
showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? [],
dimensionOptions: {
showChildrenDimensions: containerConfig.ShowChildrenDimensions ?? [],
showSelfDimensions: containerConfig.ShowSelfDimensions ?? [],
markPosition: containerConfig.MarkPosition ?? [],
showDimensionWithMarks: containerConfig.ShowDimensionWithMarks ?? []
},
warning: '',
customSVG: containerConfig.CustomSVG,
style: Object.assign(structuredClone(DEFAULT_CONTAINER_STYLE), structuredClone(containerConfig.Style)),