From 3b99d0a0203d722871b5951c371a2b1c661c6728 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Tue, 14 Feb 2023 10:13:51 +0100 Subject: [PATCH] Revert dimensionStyle --- .../SVGLDLibs/Models/DimensionOptions.cs | 10 +++- .../SVGLDLibs/Models/DimensionStyle.cs | 27 ----------- .../ContainerProperties/ContainerForm.tsx | 48 +++++++++---------- .../Editor/Actions/ContainerOperations.ts | 12 ----- src/Components/SVG/Elements/Dimension.tsx | 4 +- .../SVG/Elements/DimensionLayer.tsx | 19 ++++---- src/Enums/PropertyType.ts | 7 --- src/Interfaces/IDimensionOptions.ts | 12 ++++- src/Interfaces/IDimensionStyle.ts | 12 ----- src/utils/default.ts | 24 ++++------ 10 files changed, 65 insertions(+), 110 deletions(-) delete mode 100644 csharp/SVGLDLibs/SVGLDLibs/Models/DimensionStyle.cs delete mode 100644 src/Interfaces/IDimensionStyle.ts diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs index 42aafd7..10c6542 100644 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs +++ b/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionOptions.cs @@ -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; } } diff --git a/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionStyle.cs b/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionStyle.cs deleted file mode 100644 index c35cd5f..0000000 --- a/csharp/SVGLDLibs/SVGLDLibs/Models/DimensionStyle.cs +++ /dev/null @@ -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; - } -} diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx index 6781302..8b7a505 100644 --- a/src/Components/ContainerProperties/ContainerForm.tsx +++ b/src/Components/ContainerProperties/ContainerForm.tsx @@ -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); }}/> { props.onChange('width', Number(value), PropertyType.SelfDimensionStyle); }}/> + value={(props.properties.dimensionOptions.selfDimensions.width ?? 0).toString()} + onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfDimension); }}/> { props.onChange('dashArray', value, PropertyType.SelfDimensionStyle); }}/> + value={props.properties.dimensionOptions.selfDimensions.dashArray ?? ''} + onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfDimension); }}/> } { @@ -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); }}/> { props.onChange('width', Number(value), PropertyType.SelfMarginDimensionStyle); }}/> + value={(props.properties.dimensionOptions.selfMarginsDimensions.width ?? 0).toString()} + onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfMarginDimension); }}/> { props.onChange('dashArray', value, PropertyType.SelfMarginDimensionStyle); }}/> + value={props.properties.dimensionOptions.selfMarginsDimensions.dashArray ?? ''} + onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfMarginDimension); }}/> } { @@ -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); }}/> { props.onChange('width', Number(value), PropertyType.ChildrenDimensionsStyle); }}/> + value={(props.properties.dimensionOptions.childrenDimensions.width ?? 0).toString()} + onChange={(value) => { props.onChange('width', Number(value), PropertyType.ChildrenDimensions); }}/> { props.onChange('dashArray', value, PropertyType.ChildrenDimensionsStyle); }}/> + value={props.properties.dimensionOptions.childrenDimensions.dashArray ?? ''} + onChange={(value) => { props.onChange('dashArray', value, PropertyType.ChildrenDimensions); }}/> } { @@ -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); }}/> { props.onChange('width', Number(value), PropertyType.DimensionWithMarksStyle); }}/> + value={(props.properties.dimensionOptions.dimensionWithMarks.width ?? 0).toString()} + onChange={(value) => { props.onChange('width', Number(value), PropertyType.DimensionWithMarks); }}/> { props.onChange('dashArray', value, PropertyType.DimensionWithMarksStyle); }}/> + value={props.properties.dimensionOptions.dimensionWithMarks.dashArray ?? ''} + onChange={(value) => { props.onChange('dashArray', value, PropertyType.DimensionWithMarks); }}/> } diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index 4d5490a..82162e3 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/src/Components/Editor/Actions/ContainerOperations.ts @@ -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; diff --git a/src/Components/SVG/Elements/Dimension.tsx b/src/Components/SVG/Elements/Dimension.tsx index 88f7c99..30469be 100644 --- a/src/Components/SVG/Elements/Dimension.tsx +++ b/src/Components/SVG/Elements/Dimension.tsx @@ -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; + interface IDimensionProps { id: string xStart: number diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 2e0b978..3a2b679 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -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 @@ -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}`; diff --git a/src/Enums/PropertyType.ts b/src/Enums/PropertyType.ts index 7c133b1..f57d2b9 100644 --- a/src/Enums/PropertyType.ts +++ b/src/Enums/PropertyType.ts @@ -24,16 +24,9 @@ export enum PropertyType { * Dimension options */ SelfDimension, - SelfDimensionStyle, - SelfMarginDimension, - SelfMarginDimensionStyle, - ChildrenDimensions, - ChildrenDimensionsStyle, - DimensionWithMarks, - DimensionWithMarksStyle, DimensionOptions } diff --git a/src/Interfaces/IDimensionOptions.ts b/src/Interfaces/IDimensionOptions.ts index b847626..a12865a 100644 --- a/src/Interfaces/IDimensionOptions.ts +++ b/src/Interfaces/IDimensionOptions.ts @@ -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 } diff --git a/src/Interfaces/IDimensionStyle.ts b/src/Interfaces/IDimensionStyle.ts deleted file mode 100644 index 80e33a9..0000000 --- a/src/Interfaces/IDimensionStyle.ts +++ /dev/null @@ -1,12 +0,0 @@ -export interface IDimensionStyle { - /** - * Stroke color - */ - color?: string - - /** stroke-width */ - width?: number - - /** stroke-dasharray */ - dashArray?: string -} diff --git a/src/utils/default.ts b/src/utils/default.ts index a5a6271..5977edd 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -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: '',