src/Editor.scss

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

src/Editor.tsx

@@ -212,19 +212,13 @@ 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,
+        x: 0,
         y: 0,
         width: properties?.Width,
         height: parent.properties.height,

test-server/http.js

@@ -43,8 +43,23 @@ 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,
@@ -52,25 +67,158 @@ 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',
-        Width: 300,
-        Style: {
-          fillOpacity: 0,
-          borderWidth: 2,
-          stroke: 'green'
-        }
+        TypeChildContainerDefault: 'Remplissage',
+        Width: 0,
+        XPositionReference: 0
       },
       {
+        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',
-        Width: 100,
-        Style: {
-          fillOpacity: 0,
-          borderWidth: 2,
-          stroke: 'blue',
-          transform: 'translateX(-50%)',
-          transformOrigin: 'center',
-          transformBox: 'fill-box'
-        }
+        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
       }
     ],
     AvailableSymbols: [
@@ -100,8 +248,23 @@ const GetSVGLayoutConfiguration = () => {
       }
     ],
     MainContainer: {
+      BodyColor: null,
+      BorderColor: '#FFFFFF',
+      BorderWidth: 0,
+      ContainerActions: null,
+      ContainerDimensionning: null,
+      DefaultChildrenContainers: null,
       Height: 200,
-      Width: 1000
+      IsPositionFixed: false,
+      IsWidthFixed: false,
+      MaxHeight: 0,
+      MaxWidth: 0,
+      MinHeight: 0,
+      MinWidth: 0,
+      Type: 'Trou',
+      TypeChildContainerDefault: null,
+      Width: 1000,
+      XPositionReference: 0
     }
   };
 };

test-server/node-http.js

@@ -2,39 +2,27 @@ import http from 'http';
 const host = 'localhost';
 const port = 5000;
 
-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');
+const requestListener = function(request, response) {
   if (request.method === 'POST') {
+    response.setHeader('Access-Control-Allow-Origin', '*');
     response.setHeader('Content-Type', 'application/json');
     const url = request.url;
     let json;
-    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;
-      }
+    if (url === '/GetSVGLayoutConfiguration') {
+      json = GetSVGLayoutConfiguration();
+    } else if (url === '/FillHoleWithChassis') {
+      json = FillHoleWithChassis(request);
+    } else if (url === '/SplitRemplissage') {
+      json = SplitRemplissage(request);
     } 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();
   }
@@ -281,18 +269,18 @@ const GetSVGLayoutConfiguration = () => {
 
 const FillHoleWithChassis = (request) => {
   const maxWidthChassis = 3000;
-  const nbChassis = Math.ceil(request.ContainerAction.Width / maxWidthChassis);
+  const nbChassis = Math.ceil(request.ContainerActions.Width / maxWidthChassis);
   const lstModels = [];
   for (let i = 0; i <= nbChassis; i++) {
     if (i === 1 && request.ContainerAction.ExistOnBefore) {
-      lstModels.push({ Type: 'Dilatation' });
+      lstModels.Add({ Type: 'Dilatation' });
     }
-    lstModels.push({ Type: 'Chassis' });
+    lstModels.Add({ Type: 'Chassis' });
     if (i < nbChassis) {
-      lstModels.push({ Type: 'Dilatation' });
+      lstModels.Add({ Type: 'Dilatation' });
     }
     if (i === nbChassis && request.ContainerAction.ExistOnAfter) {
-      lstModels.push({ Type: 'Dilatation' });
+      lstModels.Add({ Type: 'Dilatation' });
     }
   }
   return {