XPositionReference: Fix Selector and Append

src/Components/Editor/ContainerOperations.ts

@@ -7,6 +7,7 @@ import { getCurrentHistory } from './Editor';
 import IProperties from '../../Interfaces/IProperties';
 import { AddMethod } from '../../Enums/AddMethod';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
+import { transformPosition } from '../SVG/Elements/Container';
 
 /**
  * Select a container
@@ -248,13 +249,30 @@ export function AddContainer(
   setHistoryCurrentStep(history.length - 1);
 }
 
-function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, parentClone: IContainerModel, x: number): number {
+/**
+ * Returns a new offset by applying an Add method (append, insert etc.)
+ * See AddMethod
+ * @param index Index of the container
+ * @param containerConfig Configuration of a container
+ * @param parent Parent container
+ * @param x Additionnal offset
+ * @returns New offset
+ */
+function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, parent: IContainerModel, x: number): number {
   if (index > 0 && (
     containerConfig.AddMethod === undefined ||
     containerConfig.AddMethod === AddMethod.Append)) {
-    const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1);
+    const lastChild: IContainerModel | undefined = parent.children.at(index - 1);
+
     if (lastChild !== undefined) {
-      x += lastChild.properties.x + Number(lastChild.properties.width);
+      const [transformedX] = transformPosition(
+        Number(lastChild.properties.x),
+        Number(lastChild.properties.y),
+        Number(lastChild.properties.width),
+        lastChild.properties.XPositionReference
+      );
+
+      x += transformedX + Number(lastChild.properties.width);
     }
   }
   return x;

src/Components/SVG/Elements/Container.tsx

@@ -130,7 +130,7 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
   return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren };
 }
 
-function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
+export function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
   let transformedX = x;
   if (xPositionReference === XPositionReference.Center) {
     transformedX -= width / 2;

src/Components/SVG/Elements/Selector.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { getAbsolutePosition } from '../../../utils/itertools';
+import { transformPosition } from './Container';
 
 interface ISelectorProps {
   selected: IContainerModel | null
@@ -15,6 +16,12 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
   }
 
   const [x, y] = getAbsolutePosition(props.selected);
+  const [transformedX, transformedY] = transformPosition(
+    x,
+    y,
+    Number(props.selected.properties.width),
+    props.selected.properties.XPositionReference
+  );
   const [width, height] = [
     props.selected.properties.width,
     props.selected.properties.height
@@ -31,8 +38,8 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
 
   return (
     <rect
-      x={x}
-      y={y}
+      x={transformedX}
+      y={transformedY}
       width={width}
       height={height}
       style={style}