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

Revert dimensionStyle

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-14 10:13:51 +01:00
parent 30e94f6d92
commit 3b99d0a020
10 changed files with 65 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

10
csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs
View file

@ -18,6 +18,14 @@ namespace SVGLDLibs.Models
/** color */
[DataMember(EmitDefaultValue = false)]
public DimensionStyle style;
public string color;
/** width */
[DataMember(EmitDefaultValue = false)]
public double width;
/** color */
[DataMember(EmitDefaultValue = false)]
public string dashArray;
}
}

27
csharp/SVGLDLibs/SVGLDLibs/Models/DimensionStyle.cs
View file

@ -1,27 +0,0 @@
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 DimensionStyle
{
/** color */
[DataMember(EmitDefaultValue = false)]
public string color;
/** width */
[DataMember(EmitDefaultValue = false)]
public double width;
/** color */
[DataMember(EmitDefaultValue = false)]
public string dashArray;
}
}

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

@ -366,8 +366,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.selfDimensions.style.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimensionStyle); }}/>
value={props.properties.dimensionOptions.selfDimensions.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/>
<TextInputGroup
id={`${props.properties.id}-selfDimensions-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
@ -376,8 +376,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.selfDimensions.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfDimensionStyle); }}/>
value={(props.properties.dimensionOptions.selfDimensions.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfDimension); }}/>
<TextInputGroup
id={`${props.properties.id}-selfDimensions-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
@ -385,8 +385,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.selfDimensions.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfDimensionStyle); }}/>
value={props.properties.dimensionOptions.selfDimensions.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfDimension); }}/>
</div>
}
{
@ -406,8 +406,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.selfMarginsDimensions.style.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimensionStyle); }}/>
value={props.properties.dimensionOptions.selfMarginsDimensions.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/>
<TextInputGroup
id={`${props.properties.id}-selfMarginsDimensions-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
@ -416,8 +416,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.selfMarginsDimensions.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfMarginDimensionStyle); }}/>
value={(props.properties.dimensionOptions.selfMarginsDimensions.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfMarginDimension); }}/>
<TextInputGroup
id={`${props.properties.id}-selfMarginsDimensions-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
@ -425,8 +425,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.selfMarginsDimensions.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfMarginDimensionStyle); }}/>
value={props.properties.dimensionOptions.selfMarginsDimensions.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfMarginDimension); }}/>
</div>
}
{
@ -446,8 +446,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.childrenDimensions.style.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensionsStyle); }}/>
value={props.properties.dimensionOptions.childrenDimensions.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/>
<TextInputGroup
id={`${props.properties.id}-childrenDimensions-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
@ -456,8 +456,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.childrenDimensions.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.ChildrenDimensionsStyle); }}/>
value={(props.properties.dimensionOptions.childrenDimensions.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.ChildrenDimensions); }}/>
<TextInputGroup
id={`${props.properties.id}-childrenDimensions-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
@ -465,8 +465,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.childrenDimensions.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.ChildrenDimensionsStyle); }}/>
value={props.properties.dimensionOptions.childrenDimensions.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.ChildrenDimensions); }}/>
</div>
}
{
@ -496,8 +496,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='color'
value={props.properties.dimensionOptions.dimensionWithMarks.style.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarksStyle); }}/>
value={props.properties.dimensionOptions.dimensionWithMarks.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
<TextInputGroup
id={`${props.properties.id}-dimensionWithMarks-width`}
labelText={Text({ textId: '@StyleStrokeWidth' })}
@ -506,8 +506,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName=''
type='number'
min={0}
value={(props.properties.dimensionOptions.dimensionWithMarks.style.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.DimensionWithMarksStyle); }}/>
value={(props.properties.dimensionOptions.dimensionWithMarks.width ?? 0).toString()}
onChange={(value) => { props.onChange('width', Number(value), PropertyType.DimensionWithMarks); }}/>
<TextInputGroup
id={`${props.properties.id}-dimensionWithMarks-dasharray`}
labelText={Text({ textId: '@StyleStrokeDashArray' })}
@ -515,8 +515,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
labelClassName=''
inputClassName=''
type='text'
value={props.properties.dimensionOptions.dimensionWithMarks.style.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.DimensionWithMarksStyle); }}/>
value={props.properties.dimensionOptions.dimensionWithMarks.dashArray ?? ''}
onChange={(value) => { props.onChange('dashArray', value, PropertyType.DimensionWithMarks); }}/>
</div>
</>
}

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

@ -362,18 +362,6 @@ function AssignProperty(container: IContainerModel, key: string, value: string |
case PropertyType.DimensionWithMarks:
(container.properties.dimensionOptions.dimensionWithMarks as any)[key] = value;
break;
case PropertyType.SelfDimensionStyle:
(container.properties.dimensionOptions.selfDimensions.style as any)[key] = value;
break;
case PropertyType.SelfMarginDimensionStyle:
(container.properties.dimensionOptions.selfMarginsDimensions.style as any)[key] = value;
break;
case PropertyType.ChildrenDimensionsStyle:
(container.properties.dimensionOptions.childrenDimensions.style as any)[key] = value;
break;
case PropertyType.DimensionWithMarksStyle:
(container.properties.dimensionOptions.dimensionWithMarks.style as any)[key] = value;
break;
case PropertyType.DimensionOptions:
(container.properties.dimensionOptions as any)[key] = value;
break;

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

@ -1,7 +1,9 @@
import * as React from 'react';
import { type IDimensionStyle } from '../../../Interfaces/IDimensionStyle';
import { type IDimensionOptions } from '../../../Interfaces/IDimensionOptions';
import { NOTCHES_LENGTH } from '../../../utils/default';
export type IDimensionStyle = Omit<IDimensionOptions, 'positions'>;
interface IDimensionProps {
id: string
xStart: number

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

@ -10,10 +10,9 @@ import {
} from '../../../utils/default';
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
import { TransformX, TransformY } from '../../../utils/svg';
import { Dimension } from './Dimension';
import { Dimension, type IDimensionStyle } from './Dimension';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { type IDimensionStyle } from '../../../Interfaces/IDimensionStyle';
interface IDimensionLayerProps {
containers: Map<string, IContainerModel>
@ -219,7 +218,7 @@ function AddHorizontalChildrenDimension(
scale: number
): void {
const childrenId = `dim-y${yDim.toFixed(0)}-children-${container.properties.id}`;
const style = container.properties.dimensionOptions.childrenDimensions.style;
const style = container.properties.dimensionOptions.childrenDimensions;
const lastChildId = container.children[container.children.length - 1];
const lastChild = FindContainerById(containers, lastChildId);
@ -282,7 +281,7 @@ function AddVerticalChildrenDimension(
scale: number
): void {
const childrenId = `dim-x${xDim.toFixed(0)}-children-${container.properties.id}`;
const style = container.properties.dimensionOptions.childrenDimensions.style;
const style = container.properties.dimensionOptions.childrenDimensions;
const lastChildId = container.children[container.children.length - 1];
const lastChild = FindContainerById(containers, lastChildId);
@ -350,7 +349,7 @@ function AddHorizontalBorrowerDimension(
dimensions: React.ReactNode[],
scale: number
): void {
const style = container.properties.dimensionOptions.dimensionWithMarks.style;
const style = container.properties.dimensionOptions.dimensionWithMarks;
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
const marks = []; // list of vertical lines for the dimension
for (const {
@ -410,7 +409,7 @@ function AddVerticalBorrowerDimension(
dimensions: React.ReactNode[],
scale: number
): void {
const style = container.properties.dimensionOptions.dimensionWithMarks.style;
const style = container.properties.dimensionOptions.dimensionWithMarks;
const it = MakeRecursionDFSIterator(container, containers, depth, currentTransform);
const marks = []; // list of vertical lines for the dimension
for (const {
@ -473,7 +472,7 @@ function AddVerticalSelfDimension(
dimensions: React.ReactNode[],
scale: number
): void {
const style = container.properties.dimensionOptions.selfDimensions.style;
const style = container.properties.dimensionOptions.selfDimensions;
const height = container.properties.height;
const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
let yStart = container.properties.y + currentTransform[1] + height;
@ -507,7 +506,7 @@ function AddHorizontalSelfDimension(
dimensions: React.ReactNode[],
scale: number
): void {
const style = container.properties.dimensionOptions.selfDimensions.style;
const style = container.properties.dimensionOptions.selfDimensions;
const width = container.properties.width;
const id = `dim-y${yDim.toFixed(0)}-${container.properties.id}`;
const xStart = container.properties.x + currentTransform[0];
@ -536,7 +535,7 @@ function AddHorizontalSelfMarginsDimension(
dimensions: React.ReactNode[],
scale: number
): void {
const style = container.properties.dimensionOptions.selfMarginsDimensions.style;
const style = container.properties.dimensionOptions.selfMarginsDimensions;
const left = container.properties.margin.left;
if (left != null) {
const id = `dim-y-margin-left${yDim.toFixed(0)}-${container.properties.id}`;
@ -590,7 +589,7 @@ function AddVerticalSelfMarginDimension(
dimensions: React.ReactNode[],
scale: number
): void {
const style = container.properties.dimensionOptions.selfMarginsDimensions.style;
const style = container.properties.dimensionOptions.selfMarginsDimensions;
const top = container.properties.margin.top;
if (top != null) {
const idVert = `dim-x-margin-top${xDim.toFixed(0)}-${container.properties.id}`;

7
src/Enums/PropertyType.ts
View file

@ -24,16 +24,9 @@ export enum PropertyType {
* Dimension options
*/
SelfDimension,
SelfDimensionStyle,
SelfMarginDimension,
SelfMarginDimensionStyle,
ChildrenDimensions,
ChildrenDimensionsStyle,
DimensionWithMarks,
DimensionWithMarksStyle,
DimensionOptions
}

12
src/Interfaces/IDimensionOptions.ts
View file

@ -1,9 +1,17 @@
import { type Position } from '../Enums/Position';
import { type IDimensionStyle } from './IDimensionStyle';
export interface IDimensionOptions {
positions: Position[]
style: IDimensionStyle
/**
* Stroke color
*/
color?: string
/** stroke-width */
width?: number
/** stroke-dasharray */
dashArray?: string
}

12
src/Interfaces/IDimensionStyle.ts
View file

@ -1,12 +0,0 @@
export interface IDimensionStyle {
/**
* Stroke color
*/
color?: string
/** stroke-width */
width?: number
/** stroke-dasharray */
dashArray?: string
}

24
src/utils/default.ts
View file

@ -187,14 +187,10 @@ const DEFAULT_CONTAINER_STYLE = {
strokeWidth: 2
};
export const DEFAULT_DIMENSION_STYLE = {
color: '#000000',
width: 2
};
export const DEFAULT_DIMENSION_OPTION: IDimensionOptions = {
positions: [],
style: DEFAULT_DIMENSION_STYLE
color: '#000000',
width: 2
};
/**
@ -274,21 +270,21 @@ export function GetDefaultContainerProps(type: string,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
dimensionOptions: {
childrenDimensions: {
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? [],
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
...containerConfig.DimensionOptions?.selfDimensions,
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
},
selfDimensions: {
positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? [],
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
...containerConfig.DimensionOptions?.selfDimensions,
positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? []
},
selfMarginsDimensions: {
positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? [],
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
...containerConfig.DimensionOptions?.selfMarginsDimensions,
positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? []
},
markPosition: containerConfig.DimensionOptions?.markPosition ?? [],
dimensionWithMarks: {
positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? [],
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE)
...containerConfig.DimensionOptions?.dimensionWithMarks,
positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? []
}
},
warning: '',