Merged PR 205: Add new AddingBehavior ReplaceParent + Allow AddingBehavior override by response + fix double key in context menu + Rename node-http.js to http.js

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -39,7 +39,7 @@ export function GetAction(
       Container: container,
       PreviousContainer: prev,
       NextContainer: next,
-      Action: action.Action,
+      Action: action,
       ApplicationState: currentState
     };
     /* eslint-enable */
@@ -59,7 +59,7 @@ export function GetAction(
   };
 }
 
-function GetPreviousAndNextSiblings(container: IContainerModel): { prev: IContainerModel | undefined; next: IContainerModel | undefined; } {
+function GetPreviousAndNextSiblings(container: IContainerModel): { prev: IContainerModel | undefined, next: IContainerModel | undefined } {
   let prev;
   let next;
   if (container.parent !== undefined &&
@@ -85,7 +85,8 @@ function HandleSetContainerList(
   historyCurrentStep: number,
   setNewHistory: (newHistory: IHistoryState[]) => void
 ): void {
-  switch (action.AddingBehavior) {
+  const addingBehavior = response.AddingBehavior ?? action.AddingBehavior;
+  switch (addingBehavior) {
     case AddMethod.Append:
       setNewHistory(
         AddContainers(
@@ -98,7 +99,7 @@ function HandleSetContainerList(
         ));
       break;
     case AddMethod.Insert:
-      break;
+      throw new Error('Not yet supported');
     case AddMethod.Replace:
       setNewHistory(
         HandleReplace(
@@ -110,6 +111,25 @@ function HandleSetContainerList(
         )
       );
       break;
+    case AddMethod.ReplaceParent:
+      if (selectedContainer.parent === undefined || selectedContainer.parent === null) {
+        Swal.fire({
+          title: 'Error',
+          text: 'The selected container has not parent to replace',
+          icon: 'error'
+        });
+        return;
+      }
+      setNewHistory(
+        HandleReplace(
+          selectedContainer.parent,
+          response,
+          configuration,
+          history,
+          historyCurrentStep
+        )
+      );
+      break;
   }
 }
 

src/Components/Menu/Menu.tsx

@@ -88,7 +88,7 @@ export function Menu(props: IMenuProps): JSX.Element {
 
       actions.forEach((action, index) => {
         children.push(<MenuItem
-          key={`contextmenu-item-${count}`}
+          key={`contextmenu-item-${count}-${index}`}
           className="contextmenu-item"
           text={action.text}
           onClick={() => action.action(target)} />);

src/Enums/AddMethod.ts

@@ -8,5 +8,6 @@
 export enum AddMethod {
   Append,
   Insert,
-  Replace
+  Replace,
+  ReplaceParent
 }

src/Interfaces/ISetContainerListRequest.ts

@@ -1,10 +1,11 @@
+import { IAction } from './IAction';
 import { IContainerModel } from './IContainerModel';
 import { IHistoryState } from './IHistoryState';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 export interface ISetContainerListRequest {
   /** Name of the action declared in the API */
-  Action: string
+  Action: IAction
 
   /** Selected container */
   Container: IContainerModel

src/Interfaces/ISetContainerListResponse.ts

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import { AddMethod } from '../Enums/AddMethod';
 import { IAvailableContainer } from './IAvailableContainer';
 
 export interface ISetContainerListResponse {
   Containers: IAvailableContainer[]
+  AddingBehavior?: AddMethod
 }

test-server/http.js

@@ -1,30 +1,42 @@
-// http.js
+import http from 'http';
-import { serve } from 'bun';
+const host = 'localhost';
+const port = 5000;
 
-serve({
+const requestListener = async (request, response) => {
-  port: 5000,
+  response.setHeader('Access-Control-Allow-Origin', '*');
-  async fetch(request) {
+  response.setHeader('Access-Control-Allow-Headers', '*');
-    console.log(`${request.method}: ${request.url}`);
+  response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
   if (request.method === 'POST') {
-      const url = new URL(request.url);
+    response.setHeader('Content-Type', 'application/json');
+    const url = request.url;
     let json;
-      if (url.pathname === '/GetSVGLayoutConfiguration') {
+    if (url === '/SetContainerList') {
-        json = GetSVGLayoutConfiguration();
+      const buffers = [];
-      } else if (url.pathname === '/SetContainerList') {
+      for await (const chunk of request) {
-        const bodyParsed = await request.json();
+        buffers.push(chunk);
+      }
+      const data = Buffer.concat(buffers).toString();
+      const bodyParsed = JSON.parse(data);
       console.log(bodyParsed);
-        switch (bodyParsed.Action) {
+      switch (bodyParsed.Action.Action) {
         case 'FillHoleWithChassis':
           json = FillHoleWithChassis(bodyParsed);
           break;
         case 'SplitRemplissage':
           json = SplitRemplissage(bodyParsed);
           break;
+        case 'SplitRemplissageParent':
+          json = SplitRemplissage(bodyParsed);
         default:
           break;
       }
-      } else if (url.pathname === '/GetFeedback') {
+    } else if (url === '/GetFeedback') {
-        const bodyParsed = await request.json();
+      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);
       json = {
         messages: [
@@ -35,28 +47,23 @@ serve({
         ]
       }
     } else {
-        // TODO: Return 404 rather than this
       json = GetSVGLayoutConfiguration();
     }
-      return new Response(JSON.stringify(json), {
+    response.writeHead(200);
-        status: 200,
+    return response.end(JSON.stringify(json));
-        headers: {
+  } else if (request.method === 'OPTIONS') {
-          'Content-Type': 'application/json',
+    response.writeHead(200);
-          'Access-Control-Allow-Origin': '*',
+    return response.end();
-          'Access-Control-Allow-Headers': '*'
-        }
-      });
   }
 
-    return new Response('Welcome to Bun!', {
+  response.setHeader('Content-Type', 'text/plain');
-      status: 200,
+  response.writeHead(200);
-      headers: {
+  return response.end('Hello world');
-        'Content-Type': 'text/plain',
+};
-        'Access-Control-Allow-Origin': '*',
+
-        'Access-Control-Allow-Headers': '*'
+const server = http.createServer(requestListener);
-      }
+server.listen(port, host, () => {
-    });
+  console.log(`Server is running on http://${host}:${port}`);
-  }
 });
 
 const GetSVGLayoutConfiguration = () => {
@@ -64,11 +71,8 @@ const GetSVGLayoutConfiguration = () => {
     AvailableContainers: [
       {
         Type: 'Chassis',
-        DisplayedText: 'Chassis?',
+        DisplayedText: 'Chassis horizontal',
-        Whitelist: ["Trou"],
+        MaxHeight: 200,
-        MaxWidth: 500,
-        MinWidth: 200,
-        Width: 200,
         DefaultChildType: 'Trou',
         Style: {
           fillOpacity: 1,
@@ -76,8 +80,24 @@ const GetSVGLayoutConfiguration = () => {
           stroke: 'red',
           fill: '#d3c9b7',
         },
-        ShowSelfDimensions: true,
+        ShowSelfDimensions: [0, 2],
-        IsDimensionBorrower: true,
+        ShowDimensionWithMarks: [1, 3],
+        Category: "Stuff"
+      },
+      {
+        Type: 'ChassisVertical',
+        Orientation: 1,
+        DisplayedText: 'Chassis vertical',
+        MaxWidth: 200,
+        DefaultChildType: 'Trou',
+        Style: {
+          fillOpacity: 1,
+          strokeWidth: 2,
+          stroke: 'red',
+          fill: '#d3c9b7',
+        },
+        ShowSelfDimensions: [0, 2],
+        ShowDimensionWithMarks: [1, 3],
         Category: "Stuff"
       },
       {
@@ -121,6 +141,19 @@ const GetSVGLayoutConfiguration = () => {
               Url: ""
             },
             AddingBehavior: 2
+          },
+          {
+            Id: "SplitRemplissageParent",
+            Action: "SplitRemplissageParent",
+            Label: "Diviser le parent",
+            Description: "Diviser le remplissage en insérant un montant",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 3
           }
         ],
         Style: {
@@ -138,8 +171,8 @@ const GetSVGLayoutConfiguration = () => {
       {
         Type: 'Montant',
         Width: 10,
-        PositionReference: 1,
+        PositionReference: 4,
-        MarkPositionToDimensionBorrower: true,
+        MarkPositionToDimensionBorrower: [0],
         Style: {
           fillOpacity: 0,
           strokeWidth: 2,
@@ -147,11 +180,24 @@ const GetSVGLayoutConfiguration = () => {
           fill: '#713f12',
         }
       },
+      {
+        Type: 'Traverse',
+        Height: 10,
+        PositionReference: 4,
+        Orientation: 1,
+        MarkPositionToDimensionBorrower: [1],
+        Style: {
+          fillOpacity: 0,
+          strokeWidth: 2,
+          stroke: '#6517fa',
+          fill: '#6517fa',
+        }
+      },
       {
         Type: 'Dilatation',
         Width: 4,
         PositionReference: 1,
-        MarkPositionToDimensionBorrower: true,
+        MarkPositionToDimensionBorrower: [0],
         Style: {
           fillOpacity: 0,
           strokeWidth: 2,
@@ -222,7 +268,13 @@ const GetSVGLayoutConfiguration = () => {
     MainContainer: {
       Type: 'main',
       Width: 800,
-      Height: 200
+      Height: 800,
+      Orientation: 1,
+      Style: {
+        stroke: 'black',
+        strokeWidth: 2,
+        fillOpacity: 0
+      }
     }
   }
 };
@@ -265,3 +317,5 @@ const SplitRemplissage = (request) => {
     Containers: lstModels
   };
 };
+
+

test-server/node-http.js

@@ -1,306 +0,0 @@
-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');
-  if (request.method === 'POST') {
-    response.setHeader('Content-Type', 'application/json');
-    const url = request.url;
-    let json;
-    if (url === '/SetContainerList') {
-      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 if (url === '/GetFeedback') {
-      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);
-      json = {
-        messages: [
-          {
-            text: `${new Date()}`,
-            type: 3
-          }
-        ]
-      }
-    } else {
-      json = GetSVGLayoutConfiguration();
-    }
-    response.writeHead(200);
-    return response.end(JSON.stringify(json));
-  } else if (request.method === 'OPTIONS') {
-    response.writeHead(200);
-    return response.end();
-  }
-
-  response.setHeader('Content-Type', 'text/plain');
-  response.writeHead(200);
-  return response.end('Hello world');
-};
-
-const server = http.createServer(requestListener);
-server.listen(port, host, () => {
-  console.log(`Server is running on http://${host}:${port}`);
-});
-
-const GetSVGLayoutConfiguration = () => {
-  return {
-    AvailableContainers: [
-      {
-        Type: 'Chassis',
-        DisplayedText: 'Chassis horizontal',
-        MaxHeight: 200,
-        DefaultChildType: 'Trou',
-        Style: {
-          fillOpacity: 1,
-          strokeWidth: 2,
-          stroke: 'red',
-          fill: '#d3c9b7',
-        },
-        ShowSelfDimensions: [0, 2],
-        ShowDimensionWithMarks: [1, 3],
-        Category: "Stuff"
-      },
-      {
-        Type: 'ChassisVertical',
-        Orientation: 1,
-        DisplayedText: 'Chassis vertical',
-        MaxWidth: 200,
-        DefaultChildType: 'Trou',
-        Style: {
-          fillOpacity: 1,
-          strokeWidth: 2,
-          stroke: 'red',
-          fill: '#d3c9b7',
-        },
-        ShowSelfDimensions: [0, 2],
-        ShowDimensionWithMarks: [1, 3],
-        Category: "Stuff"
-      },
-      {
-        Type: 'Trou',
-        Blacklist: ["Chassis"],
-        Margin: {
-          left: 10,
-          bottom: 10,
-          top: 10,
-          right: 10,
-        },
-        DefaultChildType: 'Remplissage',
-        Style: {
-          fillOpacity: 1,
-          strokeWidth: 2,
-          stroke: 'green',
-          fill: 'white'
-        },
-        Category: "Stuff"
-      },
-      {
-        Type: 'Remplissage',
-        Category: "Other stuff",
-        CustomSVG: `
-          <rect width="{width}" height="{height}" style="{style}"></rect>
-          <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
-          <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
-          <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
-        `
-        ,
-        Actions: [
-          {
-            Id: "SplitRemplissage",
-            Action: "SplitRemplissage",
-            Label: "Diviser le remplissage",
-            Description: "Diviser le remplissage en insérant un montant",
-            CustomLogo: {
-              Base64Image: null,
-              Name: 'Image1',
-              Svg: null,
-              Url: ""
-            },
-            AddingBehavior: 2
-          }
-        ],
-        Style: {
-          fillOpacity: 1,
-          strokeWidth: 1,
-          fill: '#bfdbfe'
-        },
-        UserData: {
-          styleLine: {
-            transform: "scaleY(0.5) translateY(100%)",
-            transformBox: "fill-box"
-          }
-        }
-      },
-      {
-        Type: 'Montant',
-        Width: 10,
-        PositionReference: 4,
-        MarkPositionToDimensionBorrower: [0],
-        Style: {
-          fillOpacity: 0,
-          strokeWidth: 2,
-          stroke: '#713f12',
-          fill: '#713f12',
-        }
-      },
-      {
-        Type: 'Traverse',
-        Height: 10,
-        PositionReference: 4,
-        Orientation: 1,
-        MarkPositionToDimensionBorrower: [1],
-        Style: {
-          fillOpacity: 0,
-          strokeWidth: 2,
-          stroke: '#6517fa',
-          fill: '#6517fa',
-        }
-      },
-      {
-        Type: 'Dilatation',
-        Width: 4,
-        PositionReference: 1,
-        MarkPositionToDimensionBorrower: [0],
-        Style: {
-          fillOpacity: 0,
-          strokeWidth: 2,
-          stroke: '#713f12',
-          fill: '#713f12',
-        }
-      },
-      {
-        Type: '200',
-        MaxWidth: 500,
-        MinWidth: 200,
-        Style: {
-          fillOpacity: 1,
-          strokeWidth: 2,
-          stroke: 'blue',
-          fill: 'blue',
-        }
-      },
-      {
-        Type: '400',
-        MaxWidth: 500,
-        MinWidth: 400,
-        Style: {
-          fillOpacity: 1,
-          strokeWidth: 2,
-          stroke: 'red',
-          fill: 'red',
-        }
-      }
-    ],
-    AvailableSymbols: [
-      {
-        Width: 32,
-        Height: 32,
-        Image: {
-          Base64Image: null,
-          Name: 'Image1',
-          Svg: null,
-          Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
-        },
-        Name: 'Poteau structure',
-        PositionReference: 1
-      },
-      {
-        Width: 32,
-        Height: 32,
-        Image: {
-          Base64Image: null,
-          Name: 'Image2',
-          Svg: null,
-          Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png'
-        },
-        Name: 'Joint de structure',
-        PositionReference: 0
-      }
-    ],
-    Categories: [
-      {
-        Type: "Stuff",
-        DisplayedText: "Stuff made here"
-      },
-      {
-        Type: "Other stuff",
-        DisplayedText: "Stuff not made here"
-      }
-    ],
-    Patterns: [],
-    MainContainer: {
-      Type: 'main',
-      Width: 800,
-      Height: 800,
-      Orientation: 1,
-      Style: {
-        stroke: 'black',
-        strokeWidth: 2,
-        fillOpacity: 0
-      }
-    }
-  }
-};
-
-const FillHoleWithChassis = (request) => {
-  const maxWidthChassis = 3000;
-  const nbChassis = Math.ceil(request.ContainerAction.Width / maxWidthChassis);
-  const lstModels = [];
-  for (let i = 0; i <= nbChassis; i++) {
-    if (i === 1 && request.ContainerAction.ExistOnBefore) {
-      lstModels.push({ Type: 'Dilatation' });
-    }
-    lstModels.push({ Type: 'Chassis' });
-    if (i < nbChassis) {
-      lstModels.push({ Type: 'Dilatation' });
-    }
-    if (i === nbChassis && request.ContainerAction.ExistOnAfter) {
-      lstModels.push({ Type: 'Dilatation' });
-    }
-  }
-  return {
-    Containers: lstModels
-  };
-};
-
-const SplitRemplissage = (request) => {
-  const lstModels = [
-    {
-      Type: 'Remplissage'
-    },
-    {
-      Type: 'Montant'
-    },
-    {
-      Type: 'Remplissage'
-    },
-  ];
-
-  return {
-    Containers: lstModels
-  };
-};
-
-