Added AddMethod and Default x,y,width,height on Add

src/Components/Editor/ContainerOperations.ts

@@ -1,10 +1,12 @@
-import { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
 import IProperties from '../../Interfaces/IProperties';
+import { AddMethod } from '../../Enums/AddMethod';
+import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 
 /**
  * Select a container
@@ -169,10 +171,10 @@ export function AddContainer(
   }
 
   // Get the preset properties from the API
-  const properties = configuration.AvailableContainers
+  const containerConfig = configuration.AvailableContainers
     .find(option => option.Type === type);
 
-  if (properties === undefined) {
+  if (containerConfig === undefined) {
     throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
   }
 
@@ -198,27 +200,25 @@ export function AddContainer(
     throw new Error('[AddContainer] Container model was not found among children of the main container!');
   }
 
-  let x = 0;
-  if (index > 0) {
-    const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1);
-    if (lastChild !== undefined) {
-      x = lastChild.properties.x + Number(lastChild.properties.width);
-    }
-  }
+  let x = containerConfig.DefaultX ?? 0;
+  const y = containerConfig.DefaultY ?? 0;
+  const width = containerConfig.Width ?? parentClone.properties.width;
+  const height = containerConfig.Height ?? parentClone.properties.height;
+
+  x = ApplyAddMethod(index, containerConfig, parentClone, x);
 
   const defaultProperties: IProperties = {
     id: `${type}-${count}`,
     parentId: parentClone.properties.id,
     x,
-    y: 0,
-    width: properties.Width,
-    height: parentClone.properties.height,
+    y,
+    width,
+    height,
     isRigidBody: false,
     isAnchor: false,
-    XPositionReference: properties.XPositionReference,
-    ...properties.Style
+    XPositionReference: containerConfig.XPositionReference,
+    ...containerConfig.Style
   };
-
   // Create the container
   const newContainer = new ContainerModel(
     parentClone,
@@ -247,3 +247,15 @@ export function AddContainer(
   setHistory(history);
   setHistoryCurrentStep(history.length - 1);
 }
+
+function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, parentClone: IContainerModel, x: number): number {
+  if (index > 0 && (
+    containerConfig.AddMethod === undefined ||
+    containerConfig.AddMethod === AddMethod.Append)) {
+    const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1);
+    if (lastChild !== undefined) {
+      x += lastChild.properties.x + Number(lastChild.properties.width);
+    }
+  }
+  return x;
+}

src/Components/Properties/PropertiesInputTypes.tsx

@@ -4,5 +4,6 @@ export const INPUT_TYPES: Record<string, string> = {
   width: 'number',
   height: 'number',
   isRigidBody: 'checkbox',
-  isAnchor: 'checkbox'
+  isAnchor: 'checkbox',
+  XPositionReference: 'number'
 };

src/Enums/AddMethod.ts

@@ -0,0 +1,10 @@
+/**
+ * Add method when creating a container
+ * - Append will append to the last children in list
+ * - Insert will always place it at the begining
+ * (default: Append)
+ */
+export enum AddMethod {
+  Append,
+  Insert
+}

src/Interfaces/IAvailableContainer.ts

@@ -1,11 +1,15 @@
 import React from 'react';
+import { AddMethod } from '../Enums/AddMethod';
 import { XPositionReference } from '../Enums/XPositionReference';
 
 /** Model of available container used in application configuration */
 export interface IAvailableContainer {
   Type: string
-  Width: number
-  Height: number
+  Width?: number
+  Height?: number
+  DefaultX?: number
+  DefaultY?: number
+  AddMethod?: AddMethod
   XPositionReference?: XPositionReference
   Style: React.CSSProperties
 }

test-server/http.js

@@ -62,20 +62,34 @@ const GetSVGLayoutConfiguration = () => {
       },
       {
         Type: 'Trou',
-        Width: 300,
+        DefaultX: 10,
+        DefaultY: 10,
+        Width: 480,
+        Height: 180,
         Style: {
           fillOpacity: 0,
           borderWidth: 2,
           stroke: 'green'
         }
       },
+      {
+        Type: 'Remplissage',
+        Style: {
+          fillOpacity: 1,
+          borderWidth: 2,
+          stroke: '#bfdbfe',
+          fill: '#bfdbfe'
+        }
+      },
       {
         Type: 'Montant',
-        Width: 100,
+        Width: 10,
+        XPositionReference: 1,
         Style: {
           fillOpacity: 0,
           borderWidth: 2,
-          stroke: 'blue',
+          stroke: '#713f12',
+          fill: '#713f12'
         }
       }
     ],