Merged PR 227: Refactor Properties in ContainerProperties

Commit 927934a5: Refactor Style inputs to replace React.CSSProperties by IStyle

csharp/SVGLDLibs/SVGLDLibs/Models/CSSStyle.cs

@@ -1,20 +1,23 @@
-using System.Runtime.Serialization;
-
-namespace SVGLDLibs.Models
-{
-    [DataContract]
-    public class CSSStyle
-    {
-        [DataMember(EmitDefaultValue = false)]
-        public double? strokeWidth;
-
-        [DataMember(EmitDefaultValue = false)]
-        public double? fillOpacity;
-
-        [DataMember(EmitDefaultValue = false)]
-        public string stroke;
-
-        [DataMember(EmitDefaultValue = false)]
-        public string fill;
-    }
+using System.Runtime.Serialization;
+
+namespace SVGLDLibs.Models
+{
+    [DataContract]
+    public class CSSStyle
+    {
+        [DataMember(EmitDefaultValue = false)]
+        public string stroke;
+
+        [DataMember(EmitDefaultValue = false)]
+        public double? strokeOpacity;
+
+        [DataMember(EmitDefaultValue = false)]
+        public double? strokeWidth;
+
+        [DataMember(EmitDefaultValue = false)]
+        public string fill;
+
+        [DataMember(EmitDefaultValue = false)]
+        public double? fillOpacity;
+    }
 }

docs/#Project/Home.md

@@ -15,6 +15,8 @@ Liens :
 - [Système de comportement](Pages/Behaviors.md)
 - [Cycle de vie de l'application](Pages/Application.md)
 - [Implémentation du menu contextuel](Pages/ContextMenu.md)
-- [Web workers](Pages/WebWorkers.md)
+- [Implémentation du système de cote](Pages/SVGLD_Cotes.pdf)
+- [Web workers](Pages/WebWorkers.md) (pdf)
+- [Traductions](Pages/Translations.drawio) (nécessite diagrams.net)
 - [Système de CI/CD](Pages/Behaviors.md)
 - [Mise en place du SmartComponent sur Modeler](Pages/SmartComponent.md)

src/Components/CheckboxGroupButtons/CheckboxGroupButtons.tsx

@@ -63,9 +63,7 @@ export function CheckboxGroupButtons(props: ICheckboxGroupButtonsProps): JSX.Ele
       <label className='text-xs font-medium text-gray-800'>
         {props.labelText}
       </label>
-      <div id='XPositionReference'
-        className={`grid ${gridColsClass}`}
-      >
+      <div className={`grid ${gridColsClass}`}>
         {inputGroups}
       </div>
     </>

src/Components/ContainerProperties/ContainerForm.tsx

@@ -21,24 +21,6 @@ interface IContainerFormProps {
   onChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
 }
 
-function GetCSSInputs(properties: IContainerProperties,
-  onChange: (key: string, value: string | number | boolean, type: PropertyType) => void): JSX.Element[] {
-  const groupInput: JSX.Element[] = [];
-  for (const key in properties.style) {
-    groupInput.push(<TextInputGroup
-      key={key}
-      id={key}
-      labelText={key}
-      inputKey={key}
-      labelClassName='col-span-2'
-      inputClassName='col-span-3'
-      type='string'
-      value={(properties.style as any)[key]}
-      onChange={(value) => onChange(key, value, PropertyType.Style)} />);
-  }
-  return groupInput;
-}
-
 export function ContainerForm(props: IContainerFormProps): JSX.Element {
   const categoryHeight = 'h-11';
   return (
@@ -400,16 +382,73 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         </div>
       </Category>
 
-      <Category category={{
-        Type: 'Style',
-        DisplayedText: Text({ textId: '@ContainerStyle' })
-      }}
-      heightClass={`${categoryHeight}`}
-      >
-        <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
-          {GetCSSInputs(props.properties, props.onChange)}
-        </div>
-      </Category>
+      { props.properties.style !== undefined &&
+        <Category category={{
+          Type: 'Style',
+          DisplayedText: Text({ textId: '@ContainerStyle' })
+        }}
+        heightClass={`${categoryHeight}`}
+        >
+          <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
+            <TextInputGroup
+              id={`${props.properties.id}-stroke`}
+              labelText={Text({ textId: '@StyleStroke' })}
+              inputKey='stroke'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='string'
+              value={props.properties.style.stroke ?? 'black'}
+              onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
+            />
+            <InputGroup
+              labelKey={`${props.properties.id}-strokeOpacity`}
+              labelText={Text({ textId: '@StyleStrokeOpacity' })}
+              inputKey='strokeOpacity'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='range'
+              min={0}
+              max={1}
+              step={0.01}
+              value={(props.properties.style.strokeOpacity ?? 1).toString()}
+              onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
+            />
+            <TextInputGroup
+              id={`${props.properties.id}-strokeWidth`}
+              labelText={Text({ textId: '@StyleStrokeWidth' })}
+              inputKey='strokeWidth'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='number'
+              value={(props.properties.style.strokeWidth ?? 1).toString()}
+              onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
+            />
+            <TextInputGroup
+              id={`${props.properties.id}-fill`}
+              labelText={Text({ textId: '@StyleFill' })}
+              inputKey='fill'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='string'
+              value={props.properties.style.fill ?? 'black'}
+              onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
+            />
+            <InputGroup
+              labelKey={`${props.properties.id}-fillOpacity`}
+              labelText={Text({ textId: '@StyleFillOpacity' })}
+              inputKey='fillOpacity'
+              labelClassName='col-span-2'
+              inputClassName='col-span-3'
+              type='range'
+              min={0}
+              max={1}
+              step={0.01}
+              value={(props.properties.style.fillOpacity ?? 1).toString()}
+              onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
+            />
+          </div>
+        </Category>
+      }
     </div>
   );
 }

src/Components/InputGroup/InputGroup.tsx

@@ -13,6 +13,7 @@ interface IInputGroupProps {
   defaultChecked?: boolean
   min?: number
   max?: number
+  step?: number
   isDisabled?: boolean
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
@@ -39,6 +40,7 @@ export function InputGroup(props: IInputGroupProps): JSX.Element {
       onChange={props.onChange}
       min={props.min}
       max={props.max}
+      step={props.step}
       disabled={props.isDisabled} />
   </>;
 }

src/Interfaces/IAvailableContainer.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React from 'react';
 import { AddMethod } from '../Enums/AddMethod';
 import { PositionReference } from '../Enums/PositionReference';
 import { IAction } from './IAction';
@@ -7,6 +6,7 @@ import { IMargin } from './IMargin';
 import { Orientation } from '../Enums/Orientation';
 import { Position } from '../Enums/Position';
 import { IKeyValue } from './IKeyValue';
+import { IStyle } from './IStyle';
 
 /** Model of available container used in application configuration */
 export interface IAvailableContainer {
@@ -22,14 +22,12 @@ export interface IAvailableContainer {
   /** orientation */
   Orientation?: Orientation
 
-  // TODO: Refactor x, y in IPoint interface
   /** horizontal offset */
   X?: number
 
   /** vertical offset */
   Y?: number
 
-  // TODO: Refactor width, height, minWidth... in ISize interface
   /** width */
   Width?: number
 
@@ -59,7 +57,6 @@ export interface IAvailableContainer {
   /** margin */
   Margin?: IMargin
 
-  // TODO: Refactor isAnchor, isFlex in IBehaviors interface
   /** true if anchor, false otherwise */
   IsAnchor?: boolean
 
@@ -113,7 +110,6 @@ export interface IAvailableContainer {
    */
   Pattern?: string
 
-  // TODO: Refactor showSelf., showChildren., markPosition, showDimensionWithMarks in IDimensionOptions interface
   /** Hide the children in the treeview */
   HideChildrenInTreeview?: boolean
 
@@ -155,7 +151,7 @@ export interface IAvailableContainer {
    * (optional)
    * Style of the <rect>
    */
-  Style?: React.CSSProperties
+  Style?: IStyle
 
   /**
    * List of possible actions shown on right-click

src/Interfaces/IContainerProperties.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
 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';
 
 /**
  * Properties of a container
@@ -122,7 +122,7 @@ export interface IContainerProperties {
    * (optional)
    * Style of the <rect>
    */
-  style?: React.CSSProperties
+  style?: IStyle
 
   /**
    * (optional)

src/Interfaces/IStyle.ts

@@ -0,0 +1,11 @@
+export interface IStyle {
+  stroke?: string
+
+  strokeOpacity?: number
+
+  strokeWidth?: number
+
+  fill?: string
+
+  fillOpacity?: number
+}

src/Translations/translation.en.json

@@ -62,6 +62,11 @@
   "@ContainerMarkPosition": "Mark the position for the parents",
   "@ContainerShowDimensionWithMarks": "Show dimension with marked children",
   "@ContainerStyle": "Style",
+  "@StyleStroke": "Stroke",
+  "@StyleStrokeOpacity": "Stroke Opacity",
+  "@StyleStrokeWidth": "Stroke Width",
+  "@StyleFill": "Fill",
+  "@StyleFillOpacity": "Fill Opacity",
 
   "@SymbolName": "Name",
   "@SymbolX": "x",

src/Translations/translation.fr.json

@@ -62,6 +62,11 @@
   "@ContainerMarkPosition": "Marquer la position pour les parents",
   "@ContainerShowDimensionWithMarks": "Afficher les cotations avec les enfants marqués",
   "@ContainerStyle": "Style",
+  "@StyleStroke": "Tracé",
+  "@StyleStrokeOpacity": "Opacité du tracé",
+  "@StyleStrokeWidth": "Epaisseur du tracé",
+  "@StyleFill": "Remplissage",
+  "@StyleFillOpacity": "Opacité du remplissage",
 
   "@SymbolName": "Nom",
   "@SymbolX": "x",