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

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

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

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

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

12
src/Interfaces/IDimensionOptions.ts
View file

@ -1,9 +1,17 @@
import { type Position } from '../Enums/Position'; import { type Position } from '../Enums/Position';
import { type IDimensionStyle } from './IDimensionStyle';
export interface IDimensionOptions { export interface IDimensionOptions {
positions: Position[] 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 strokeWidth: 2
}; };
export const DEFAULT_DIMENSION_STYLE = {
color: '#000000',
width: 2
};
export const DEFAULT_DIMENSION_OPTION: IDimensionOptions = { export const DEFAULT_DIMENSION_OPTION: IDimensionOptions = {
positions: [], positions: [],
style: DEFAULT_DIMENSION_STYLE color: '#000000',
width: 2
}; };
/** /**
@ -274,21 +270,21 @@ export function GetDefaultContainerProps(type: string,
hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false, hideChildrenInTreeview: containerConfig.HideChildrenInTreeview ?? false,
dimensionOptions: { dimensionOptions: {
childrenDimensions: { childrenDimensions: {
positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? [], ...containerConfig.DimensionOptions?.selfDimensions,
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE) positions: containerConfig.DimensionOptions?.childrenDimensions.positions ?? []
}, },
selfDimensions: { selfDimensions: {
positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? [], ...containerConfig.DimensionOptions?.selfDimensions,
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE) positions: containerConfig.DimensionOptions?.selfDimensions.positions ?? []
}, },
selfMarginsDimensions: { selfMarginsDimensions: {
positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? [], ...containerConfig.DimensionOptions?.selfMarginsDimensions,
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE) positions: containerConfig.DimensionOptions?.selfMarginsDimensions.positions ?? []
}, },
markPosition: containerConfig.DimensionOptions?.markPosition ?? [], markPosition: containerConfig.DimensionOptions?.markPosition ?? [],
dimensionWithMarks: { dimensionWithMarks: {
positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? [], ...containerConfig.DimensionOptions?.dimensionWithMarks,
style: containerConfig.DimensionOptions?.dimensionWithMarks.style ?? clone(DEFAULT_DIMENSION_STYLE) positions: containerConfig.DimensionOptions?.dimensionWithMarks.positions ?? []
} }
}, },
warning: '', warning: '',