Implement XPositionReference

src/Components/Editor/ContainerOperations.ts

@@ -182,6 +182,7 @@ export function AddContainer(
       width: properties?.Width,
       height: parentClone.properties.height,
       isRigidBody: false,
+      XPositionReference: properties.XPositionReference,
       ...properties.Style
     },
     [],

src/Components/SVG/Elements/Container.tsx

@@ -1,4 +1,6 @@
+import { transform } from 'framer-motion';
 import * as React from 'react';
+import { XPositionReference } from '../../../Enums/XPositionReference';
 import { IContainerModel } from '../../../Interfaces/ContainerModel';
 import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
@@ -17,7 +19,14 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
   const xText = Number(props.model.properties.width) / 2;
   const yText = Number(props.model.properties.height) / 2;
-  const transform = `translate(${Number(props.model.properties.x)}, ${Number(props.model.properties.y)})`;
+
+  const [transformedX, transformedY] = transformPosition(
+    Number(props.model.properties.x),
+    Number(props.model.properties.y),
+    Number(props.model.properties.width),
+    props.model.properties.XPositionReference
+  );
+  const transform = `translate(${transformedX}, ${transformedY})`;
 
   // g style
   const defaultStyle: React.CSSProperties = {
@@ -74,3 +83,13 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
     </g>
   );
 };
+
+function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
+  let transformedX = x;
+  if (xPositionReference === XPositionReference.Center) {
+    transformedX -= width / 2;
+  } else if (xPositionReference === XPositionReference.Right) {
+    transformedX -= width;
+  }
+  return [transformedX, y];
+}

src/Interfaces/AvailableContainer.ts

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

src/Interfaces/Properties.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { XPositionReference } from '../Enums/XPositionReference';
 
 export default interface Properties extends React.CSSProperties {
   id: string
@@ -6,4 +7,5 @@ export default interface Properties extends React.CSSProperties {
   x: number
   y: number
   isRigidBody: boolean
+  XPositionReference?: XPositionReference
 }

test-server/http.js

@@ -76,9 +76,6 @@ const GetSVGLayoutConfiguration = () => {
           fillOpacity: 0,
           borderWidth: 2,
           stroke: 'blue',
-          transform: 'translateX(-50%)',
-          transformOrigin: 'center',
-          transformBox: 'fill-box'
         }
       }
     ],