Default action of AddContainer will now be append

src/Editor.scss

@@ -14,6 +14,8 @@ text {
   stroke-linecap: butt;
   stroke-linejoin: miter;
   stroke-opacity: 1;
+  transform: translateX(-50%);
+  transform-box: fill-box;
 }
 
 @keyframes fadein {

src/Editor.tsx

@@ -212,13 +212,19 @@ class Editor extends React.Component<IEditorProps> {
       throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
     }
 
+    let x = 0;
+    const lastChild: IContainerModel | undefined = parent.children.at(-1);
+    if (lastChild !== undefined) {
+      x = lastChild.properties.x + Number(lastChild.properties.width);
+    }
+
     // Create the container
     const newContainer = new ContainerModel(
       parent,
       {
         id: `${type}-${count}`,
         parentId: parent.properties.id,
-        x: 0,
+        x,
         y: 0,
         width: properties?.Width,
         height: parent.properties.height,

test-server/http.js

@@ -43,23 +43,8 @@ const GetSVGLayoutConfiguration = () => {
   return {
     AvailableContainers: [
       {
-        BodyColor: null,
-        BorderColor: '#ff0000',
-        BorderWidth: 48,
-        ContainerActions: null,
-        ContainerDimensionning: null,
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 3000,
-        MinHeight: 0,
-        MinWidth: 500,
         Type: 'Chassis',
-        TypeChildContainerDefault: 'Trou',
         Width: 500,
-        XPositionReference: 0,
         Style: {
           fillOpacity: 0,
           borderWidth: 2,
@@ -67,158 +52,25 @@ const GetSVGLayoutConfiguration = () => {
         }
       },
       {
-        BodyColor: null,
-        BorderColor: '#FFFFFF',
-        BorderWidth: 0,
-        ContainerActions: null,
-        ContainerDimensionning: null,
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 0,
-        MinHeight: 0,
-        MinWidth: 0,
         Type: 'Trou',
-        TypeChildContainerDefault: 'Remplissage',
-        Width: 0,
-        XPositionReference: 0
+        Width: 300,
+        Style: {
+          fillOpacity: 0,
+          borderWidth: 2,
+          stroke: 'green'
+        }
       },
       {
-        BodyColor: '#99C8FF',
-        BorderColor: '#00FF00',
-        BorderWidth: 0,
-        ContainerActions: [
-          {
-            Action: 'SplitRemplissage',
-            AddingBehavior: 0,
-            CustomLogo: {
-              Base64Image: null,
-              Name: null,
-              Svg: null,
-              Url: ''
-            },
-            Description: 'Diviser le remplissage en insérant un montant',
-            Id: null,
-            Label: 'Diviser le remplissage'
-          }
-        ],
-        ContainerDimensionning: {
-          DimensionningStyle: 1,
-          ShowDimensionning: false,
-          ShowLabel: false
-        },
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 0,
-        MinHeight: 0,
-        MinWidth: 0,
-        Type: 'Remplissage',
-        TypeChildContainerDefault: null,
-        Width: 0,
-        XPositionReference: 0
-      },
-      {
-        BodyColor: '#FFA947',
-        BorderColor: '#FFA947',
-        BorderWidth: 0,
-        ContainerActions: null,
-        ContainerDimensionning: null,
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 0,
-        MinHeight: 0,
-        MinWidth: 0,
         Type: 'Montant',
-        TypeChildContainerDefault: null,
-        Width: 50,
-        XPositionReference: 1
-      },
-      {
-        BodyColor: '#FFA3D1',
-        BorderColor: '#FF6DE6',
-        BorderWidth: 0,
-        ContainerActions: null,
-        ContainerDimensionning: {
-          DimensionningStyle: 0,
-          ShowDimensionning: false,
-          ShowLabel: false
-        },
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 0,
-        MinHeight: 0,
-        MinWidth: 0,
-        Type: 'Ouverture',
-        TypeChildContainerDefault: null,
-        Width: 0,
-        XPositionReference: 0
-      },
-      {
-        BodyColor: '#000000',
-        BorderColor: null,
-        BorderWidth: 0,
-        ContainerActions: null,
-        ContainerDimensionning: {
-          DimensionningStyle: 0,
-          ShowDimensionning: false,
-          ShowLabel: false
-        },
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 0,
-        MinHeight: 0,
-        MinWidth: 0,
-        Type: 'Dilatation',
-        TypeChildContainerDefault: null,
-        Width: 8,
-        XPositionReference: 0
-      },
-      {
-        BodyColor: '#dee2e4',
-        BorderColor: '#54616c',
-        BorderWidth: 0,
-        ContainerActions: [
-          {
-            Action: 'FillHoleWithChassis',
-            AddingBehavior: 1,
-            CustomLogo: {
-              Base64Image: null,
-              Name: null,
-              Svg: null,
-              Url: ''
-            },
-            Description: 'Remplir le trou avec des châssis',
-            Id: null,
-            Label: 'Calepiner'
-          }
-        ],
-        ContainerDimensionning: null,
-        DefaultChildrenContainers: null,
-        Height: 0,
-        IsPositionFixed: false,
-        IsWidthFixed: false,
-        MaxHeight: 0,
-        MaxWidth: 0,
-        MinHeight: 0,
-        MinWidth: 0,
-        Type: '',
-        TypeChildContainerDefault: null,
-        Width: 0,
-        XPositionReference: 0
+        Width: 100,
+        Style: {
+          fillOpacity: 0,
+          borderWidth: 2,
+          stroke: 'blue',
+          transform: 'translateX(-50%)',
+          transformOrigin: 'center',
+          transformBox: 'fill-box'
+        }
       }
     ],
     AvailableSymbols: [
@@ -248,23 +100,8 @@ const GetSVGLayoutConfiguration = () => {
       }
     ],
     MainContainer: {
-      BodyColor: null,
-      BorderColor: '#FFFFFF',
-      BorderWidth: 0,
-      ContainerActions: null,
-      ContainerDimensionning: null,
-      DefaultChildrenContainers: null,
       Height: 200,
-      IsPositionFixed: false,
-      IsWidthFixed: false,
-      MaxHeight: 0,
-      MaxWidth: 0,
-      MinHeight: 0,
-      MinWidth: 0,
-      Type: 'Trou',
-      TypeChildContainerDefault: null,
-      Width: 1000,
-      XPositionReference: 0
+      Width: 1000
     }
   };
 };

test-server/node-http.js

@@ -2,27 +2,39 @@ import http from 'http';
 const host = 'localhost';
 const port = 5000;
 
-const requestListener = function(request, response) {
+const requestListener = async(request, response) => {
+  response.setHeader('Access-Control-Allow-Origin', '*');
+  response.setHeader('Access-Control-Allow-Headers', '*');
+  response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
   if (request.method === 'POST') {
-    response.setHeader('Access-Control-Allow-Origin', '*');
     response.setHeader('Content-Type', 'application/json');
     const url = request.url;
     let json;
-    if (url === '/GetSVGLayoutConfiguration') {
-      json = GetSVGLayoutConfiguration();
-    } else if (url === '/FillHoleWithChassis') {
-      json = FillHoleWithChassis(request);
-    } else if (url === '/SplitRemplissage') {
-      json = SplitRemplissage(request);
+    if (url === '/ApplicationState') {
+      const buffers = [];
+      for await (const chunk of request) {
+        buffers.push(chunk);
+      }
+      const data = Buffer.concat(buffers).toString();
+      const bodyParsed = JSON.parse(data);
+      console.log(bodyParsed);
+      switch (bodyParsed.Action) {
+        case 'FillHoleWithChassis':
+          json = FillHoleWithChassis(bodyParsed);
+          break;
+        case 'SplitRemplissage':
+          json = SplitRemplissage(bodyParsed);
+          break;
+        default:
+          break;
+      }
     } else {
-    // TODO: Return 404 rather than this
+      // TODO: Return 404 rather than this
       json = GetSVGLayoutConfiguration();
     }
     response.writeHead(200);
     return response.end(JSON.stringify(json));
   } else if (request.method === 'OPTIONS') {
-    response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
-    response.setHeader('Access-Control-Allow-Headers', '*');
     response.writeHead(200);
     return response.end();
   }
@@ -269,18 +281,18 @@ const GetSVGLayoutConfiguration = () => {
 
 const FillHoleWithChassis = (request) => {
   const maxWidthChassis = 3000;
-  const nbChassis = Math.ceil(request.ContainerActions.Width / maxWidthChassis);
+  const nbChassis = Math.ceil(request.ContainerAction.Width / maxWidthChassis);
   const lstModels = [];
   for (let i = 0; i <= nbChassis; i++) {
     if (i === 1 && request.ContainerAction.ExistOnBefore) {
-      lstModels.Add({ Type: 'Dilatation' });
+      lstModels.push({ Type: 'Dilatation' });
     }
-    lstModels.Add({ Type: 'Chassis' });
+    lstModels.push({ Type: 'Chassis' });
     if (i < nbChassis) {
-      lstModels.Add({ Type: 'Dilatation' });
+      lstModels.push({ Type: 'Dilatation' });
     }
     if (i === nbChassis && request.ContainerAction.ExistOnAfter) {
-      lstModels.Add({ Type: 'Dilatation' });
+      lstModels.push({ Type: 'Dilatation' });
     }
   }
   return {