Add minWidth to containers (default 1) and forms

src/Components/App/MenuActions.ts

@@ -5,6 +5,7 @@ import { fetchConfiguration } from '../API/api';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { LoadState } from './Load';
 import { XPositionReference } from '../../Enums/XPositionReference';
+import { DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
 
 export function NewEditor(
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
@@ -17,19 +18,9 @@ export function NewEditor(
       const MainContainer = new ContainerModel(
         null,
         {
-          id: 'main',
-          parentId: 'null',
-          x: 0,
-          y: 0,
+          ...DEFAULT_MAINCONTAINER_PROPS,
           width: Number(configuration.MainContainer.Width),
-          height: Number(configuration.MainContainer.Height),
-          isRigidBody: false,
-          isAnchor: false,
-          XPositionReference: XPositionReference.Left,
-          style: {
-            fillOpacity: 0,
-            stroke: 'black'
-          }
+          height: Number(configuration.MainContainer.Height)
         }
       );
 

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -164,9 +164,6 @@ export function constraintBodyInsideUnallocatedWidth(
     // We want the container to fit automatically inside the available space
     // even if it means to resize the container
     const availableWidth: ISizePointer | undefined = availableWidths.find((width) => {
-      if (container.properties.minWidth === undefined) {
-        return true;
-      }
       return isFitting(container.properties.minWidth, width);
     });
 

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -18,6 +18,7 @@ describe.concurrent('Elements sidebar', () => {
           y: 0,
           width: 2000,
           height: 100,
+          minWidth: 1,
           XPositionReference: XPositionReference.Left,
           isRigidBody: false,
           isAnchor: false
@@ -50,6 +51,7 @@ describe.concurrent('Elements sidebar', () => {
         y: 0,
         width: 2000,
         height: 100,
+        minWidth: 1,
         isRigidBody: false,
         isAnchor: false,
         XPositionReference: XPositionReference.Left
@@ -106,6 +108,7 @@ describe.concurrent('Elements sidebar', () => {
         parentId: '',
         x: 0,
         y: 0,
+        minWidth: 1,
         width: 2000,
         height: 100,
         XPositionReference: XPositionReference.Left,
@@ -124,6 +127,7 @@ describe.concurrent('Elements sidebar', () => {
           parentId: 'main',
           x: 0,
           y: 0,
+          minWidth: 1,
           width: 0,
           height: 0,
           isRigidBody: false,
@@ -143,6 +147,7 @@ describe.concurrent('Elements sidebar', () => {
           parentId: 'main',
           x: 0,
           y: 0,
+          minWidth: 1,
           width: 0,
           height: 0,
           XPositionReference: XPositionReference.Left,
@@ -182,6 +187,7 @@ describe.concurrent('Elements sidebar', () => {
         parentId: '',
         x: 0,
         y: 0,
+        minWidth: 1,
         width: 2000,
         height: 100,
         XPositionReference: XPositionReference.Left,
@@ -199,6 +205,7 @@ describe.concurrent('Elements sidebar', () => {
         parentId: 'main',
         x: 0,
         y: 0,
+        minWidth: 1,
         width: 0,
         height: 0,
         XPositionReference: XPositionReference.Left,

src/Components/InputGroup/InputGroup.tsx

@@ -11,6 +11,7 @@ interface IInputGroupProps {
   checked?: boolean
   defaultValue?: string
   defaultChecked?: boolean
+  min?: number
   isDisabled?: boolean
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
@@ -42,6 +43,7 @@ export const InputGroup: React.FunctionComponent<IInputGroupProps> = (props) =>
       checked={props.checked}
       defaultChecked={props.defaultChecked}
       onChange={props.onChange}
+      min={props.min}
       disabled={props.isDisabled}
     />
   </>;

src/Components/Properties/DynamicForm.tsx

@@ -70,12 +70,23 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         value={props.properties.y.toString()}
         onChange={(event) => props.onChange('y', Number(event.target.value))}
       />
+      <InputGroup
+        labelText='Minimum width'
+        inputKey='minWidth'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        min={1}
+        value={props.properties.minWidth.toString()}
+        onChange={(event) => props.onChange('minWidth', Number(event.target.value))}
+      />
       <InputGroup
         labelText='Width'
         inputKey='width'
         labelClassName=''
         inputClassName=''
         type='number'
+        min={props.properties.minWidth}
         value={props.properties.width.toString()}
         onChange={(event) => props.onChange('width', Number(event.target.value))}
       />
@@ -85,6 +96,7 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         labelClassName=''
         inputClassName=''
         type='number'
+        min={0}
         value={props.properties.height.toString()}
         onChange={(event) => props.onChange('height', Number(event.target.value))}
       />

src/Components/Properties/Properties.test.tsx

@@ -27,6 +27,7 @@ describe.concurrent('Properties', () => {
       y: 1,
       width: 1,
       height: 1,
+      minWidth: 1,
       XPositionReference: XPositionReference.Left,
       isRigidBody: false,
       isAnchor: false

src/Components/Properties/StaticForm.tsx

@@ -68,12 +68,22 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
         type='number'
         defaultValue={props.properties.y.toString()}
       />
+      <InputGroup
+        labelText='Minimum width'
+        inputKey='minWidth'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        min={0}
+        defaultValue={props.properties.minWidth.toString()}
+      />
       <InputGroup
         labelText='Width'
         inputKey='width'
         labelClassName=''
         inputClassName=''
         type='number'
+        min={props.properties.minWidth}
         defaultValue={props.properties.width.toString()}
       />
       <InputGroup
@@ -82,6 +92,7 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
         labelClassName=''
         inputClassName=''
         type='number'
+        min={1}
         defaultValue={props.properties.height.toString()}
       />
       <InputGroup

src/Interfaces/IProperties.ts

@@ -17,6 +17,13 @@ export default interface IProperties {
   /** vertical offset */
   y: number
 
+  /**
+   * Minimum width (min=1)
+   * Allows the container to set isRigidBody to false when it gets squeezed
+   * by an anchor
+   */
+  minWidth: number
+
   /** width */
   width: number
 
@@ -32,14 +39,6 @@ export default interface IProperties {
   /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
   XPositionReference: XPositionReference
 
-  /**
-   * (optional)
-   * Minimum width used when isRigidBody = true.
-   * Allows the container to set isRigidBody to false when it gets squeezed
-   * by an anchor
-   */
-  minWidth?: number
-
   /**
    * (optional)
    * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows

src/utils/default.ts

@@ -33,6 +33,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   parentId: 'null',
   x: 0,
   y: 0,
+  minWidth: 1,
   width: Number(DEFAULT_CONFIG.MainContainer.Width),
   height: Number(DEFAULT_CONFIG.MainContainer.Height),
   isRigidBody: false,
@@ -61,7 +62,7 @@ export const GetDefaultContainerProps = (
   isRigidBody: false,
   isAnchor: false,
   XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left,
-  minWidth: containerConfig.MinWidth,
+  minWidth: containerConfig.MinWidth ?? 0,
   customSVG: containerConfig.CustomSVG,
   style: containerConfig.Style,
   userData: containerConfig.UserData