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;
+}