Merged PR 179: Fix bugs about flex and context menu (see desc) + disable hard rigid behavior + add missing properties to form + Clean up css

- Clean up some css class
- Fix wrong order when applying flex
- Fix Replace behavior not working because previous container was still existing
- Disable hard rigid behavior which disallow two container to overlap
- Add ENABLE_FLEX, ENABLE_HARD_RIGID ENABLE_SWAP
- Add missing form properties with dimensions
- Update readme

src/Components/ContainerProperties/ContainerForm.tsx

@@ -4,6 +4,7 @@ import { PropertyType } from '../../Enums/PropertyType';
 import { XPositionReference } from '../../Enums/XPositionReference';
 import { IContainerProperties } from '../../Interfaces/IContainerProperties';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
 import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
@@ -34,7 +35,7 @@ function GetCSSInputs(properties: IContainerProperties,
 
 export function ContainerForm(props: IContainerFormProps): JSX.Element {
   return (
-    <div className='grid grid-cols-2 gap-y-4'>
+    <div className='grid grid-cols-2 gap-y-4 items-center'>
       <InputGroup
         labelText='Name'
         inputKey='id'
@@ -228,6 +229,49 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.linkedSymbolId ?? ''}
         onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
       {GetCSSInputs(props.properties, props.onChange)}
+      {
+        SHOW_SELF_DIMENSIONS &&
+        <InputGroup
+          labelText='Show dimension'
+          inputKey='showSelfDimensions'
+          labelClassName=''
+          inputClassName=''
+          type='checkbox'
+          checked={props.properties.showSelfDimensions}
+          onChange={(event) => props.onChange('showSelfDimensions', event.target.checked)} />
+      }
+      {
+        SHOW_CHILDREN_DIMENSIONS &&
+        <InputGroup
+          labelText='Show overall dimension of its children'
+          inputKey='showChildrenDimensions'
+          labelClassName=''
+          inputClassName=''
+          type='checkbox'
+          checked={props.properties.showChildrenDimensions}
+          onChange={(event) => props.onChange('showChildrenDimensions', event.target.checked)} />
+      }
+      {
+        SHOW_BORROWER_DIMENSIONS &&
+      <>
+        <InputGroup
+          labelText='Mark the position'
+          inputKey='markPositionToDimensionBorrower'
+          labelClassName=''
+          inputClassName=''
+          type='checkbox'
+          checked={props.properties.markPositionToDimensionBorrower}
+          onChange={(event) => props.onChange('markPositionToDimensionBorrower', event.target.checked)} />
+        <InputGroup
+          labelText='Show dimension with marked children'
+          inputKey='isDimensionBorrower'
+          labelClassName=''
+          inputClassName=''
+          type='checkbox'
+          checked={props.properties.isDimensionBorrower}
+          onChange={(event) => props.onChange('isDimensionBorrower', event.target.checked)} />
+      </>
+      }
     </div>
   );
 }