Merge pull request 'Fix multple bugs' (#11) from dev.rigidbody into dev

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/11

src/Components/Properties/Properties.tsx

@@ -42,7 +42,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
     groupInput: React.ReactNode[]
   ) => {
     const id = `property-${key}`;
-    const type = isNaN(Number(value)) ? 'text' : 'number';
+    const type = 'text';
     const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
     groupInput.push(
       <div key={id} className='mt-4'>

src/Components/SVG/Elements/Container.tsx

@@ -17,6 +17,7 @@ export class Container extends React.Component<IContainerProps> {
     const containersElements = this.props.model.children.map(child => new Container({ model: child } as IContainerProps).render());
     const xText = Number(this.props.model.properties.width) / 2;
     const yText = Number(this.props.model.properties.height) / 2;
+    const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`;
 
     // g style
     const defaultStyle = {
@@ -46,7 +47,7 @@ export class Container extends React.Component<IContainerProps> {
     return (
       <g
         style={defaultStyle}
-        transform={`translate(${this.props.model.properties.x}, ${this.props.model.properties.y})`}
+        transform={transform}
         key={`container-${this.props.model.properties.id}`}
       >
         <Dimension

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

@@ -3,22 +3,31 @@ import { serve } from 'bun';
 
 serve({
   port: 5000,
-  fetch(request) {
+  async fetch(request) {
     console.log(`${request.method}: ${request.url}`);
     if (request.method === 'POST') {
       const url = new URL(request.url);
       let json;
       if (url.pathname === '/GetSVGLayoutConfiguration') {
-        json = JSON.stringify(GetSVGLayoutConfiguration());
+        json = GetSVGLayoutConfiguration();
-      } else if (url.pathname === '/FillHoleWithChassis') {
+      } else if (url.pathname === '/ApplicationState') {
-        json = JSON.stringify(FillHoleWithChassis(request));
+        const bodyParsed = await request.json();
-      } else if (url.pathname === '/SplitRemplissage') {
+        console.log(bodyParsed);
-        json = JSON.stringify(SplitRemplissage(request));
+        switch (bodyParsed.Action) {
+          case 'FillHoleWithChassis':
+            json = FillHoleWithChassis(bodyParsed);
+            break;
+          case 'SplitRemplissage':
+            json = SplitRemplissage(bodyParsed);
+            break;
+          default:
+            break;
+        }
       } else {
         // TODO: Return 404 rather than this
-        json = JSON.stringify(GetSVGLayoutConfiguration());
+        json = GetSVGLayoutConfiguration();
       }
-      return new Response(json, {
+      return new Response(JSON.stringify(json), {
         status: 200,
         headers: {
           'Content-Type': 'application/json',
@@ -43,23 +52,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 +61,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: 300,
-        Width: 0,
+        Style: {
-        XPositionReference: 0
+          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: 100,
-        Width: 50,
+        Style: {
-        XPositionReference: 1
+          fillOpacity: 0,
-      },
+          borderWidth: 2,
-      {
+          stroke: 'blue',
-        BodyColor: '#FFA3D1',
+          transform: 'translateX(-50%)',
-        BorderColor: '#FF6DE6',
+          transformOrigin: 'center',
-        BorderWidth: 0,
+          transformBox: 'fill-box'
-        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: [
@@ -248,41 +109,26 @@ const GetSVGLayoutConfiguration = () => {
       }
     ],
     MainContainer: {
-      BodyColor: null,
-      BorderColor: '#FFFFFF',
-      BorderWidth: 0,
-      ContainerActions: null,
-      ContainerDimensionning: null,
-      DefaultChildrenContainers: null,
       Height: 200,
-      IsPositionFixed: false,
+      Width: 1000
-      IsWidthFixed: false,
-      MaxHeight: 0,
-      MaxWidth: 0,
-      MinHeight: 0,
-      MinWidth: 0,
-      Type: 'Trou',
-      TypeChildContainerDefault: null,
-      Width: 1000,
-      XPositionReference: 0
     }
   };
 };
 
 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 {

test-server/node-http.js

@@ -2,18 +2,32 @@ import http from 'http';
 const host = 'localhost';
 const port = 5000;
 
-const requestListener = function(request, response) {
+const requestListener = async(request, response) => {
-  if (request.method === 'POST') {
   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('Content-Type', 'application/json');
     const url = request.url;
     let json;
-    if (url === '/GetSVGLayoutConfiguration') {
+    if (url === '/ApplicationState') {
-      json = GetSVGLayoutConfiguration();
+      const buffers = [];
-    } else if (url === '/FillHoleWithChassis') {
+      for await (const chunk of request) {
-      json = FillHoleWithChassis(request);
+        buffers.push(chunk);
-    } else if (url === '/SplitRemplissage') {
+      }
-      json = SplitRemplissage(request);
+      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
       json = GetSVGLayoutConfiguration();
@@ -21,8 +35,6 @@ const requestListener = function(request, response) {
     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 {