From 4fbc67835c2571412642149c7de6699fda370002 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 15 Aug 2022 22:26:59 +0200
Subject: [PATCH] XPositionReference: Fix Selector and Append

---
 src/Components/Editor/ContainerOperations.ts | 24 +++++++++++++++++---
 src/Components/SVG/Elements/Container.tsx    |  2 +-
 src/Components/SVG/Elements/Selector.tsx     | 11 +++++++--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts
index e2df160..a6defd6 100644
--- a/src/Components/Editor/ContainerOperations.ts
+++ b/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;
diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index e743899..36e5f19 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/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;
diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx
index e70ca79..5f0c2ea 100644
--- a/src/Components/SVG/Elements/Selector.tsx
+++ b/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}