Merge branch 'dev' into dev.tests

README.md

@@ -19,34 +19,6 @@ Run `npm ci`
 Run `npm run dev`
 
 
-## Testing the API
-
-This program fetch the data structure from others application, allowing it to assemble them later.
-
-### With NodeJS
-
-```bash
-node run ./test-server/node-http.js
-```
-
-The web server will be running at `http://localhost:5000`
-
-Configure the file `.env.development` with the url
-
-
-### With bun
-
-Install `bun`
-
-Inside `test-server` folder, run :
-
-```bash
-bun run http.js
-```
-
-The web server will be running at `http://localhost:5000`
-
-Configure the file `.env.development` with the url
 
 
 # Deploy
@@ -61,3 +33,39 @@ Run `npm run build`
 Run `npm ci`
 
 Run `npm test`
+
+
+# API
+
+You can preload a state by setting the `state` URL parameter
+with a url address to a `state.json` file.
+
+Example: `http://localhost:4000/?state=http://localhost:5000/state.json`
+
+# Testing the external API
+
+This program fetch the data structure from others applications, allowing it to assemble them later.
+
+## With NodeJS
+
+```bash
+node run ./test-server/node-http.js
+```
+
+The web server will be running at `http://localhost:5000`
+
+Configure the file `.env.development` with the url
+
+## With bun.sh
+
+Install `bun`
+
+Inside `test-server` folder, run :
+
+```bash
+bun run http.js
+```
+
+The web server will be running at `http://localhost:5000`
+
+Configure the file `.env.development` with the url

src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './App.scss';
 import { MainMenu } from './Components/MainMenu/MainMenu';
-import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Interfaces/ContainerModel';
 import Editor, { IEditorState } from './Editor';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
@@ -40,6 +40,22 @@ export class App extends React.Component<IAppProps> {
     };
   }
 
+  componentDidMount() {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const state = urlParams.get('state');
+
+    if (state === null) {
+      return;
+    }
+
+    fetch(state)
+      .then((response) => response.json())
+      .then((data: IEditorState) => {
+        this.LoadState(data);
+      });
+  }
+
   public NewEditor() {
     // Fetch the configuration from the API
     fetchConfiguration().then((configuration: Configuration) => {
@@ -86,18 +102,22 @@ export class App extends React.Component<IAppProps> {
       const result = reader.result as string;
       const editorState: IEditorState = JSON.parse(result);
 
-      Revive(editorState);
+      this.LoadState(editorState);
-
-      this.setState({
-        configuration: editorState.configuration,
-        history: editorState.history,
-        historyCurrentStep: editorState.historyCurrentStep,
-        isLoaded: true
-      } as IAppState);
     });
     reader.readAsText(file);
   }
 
+  private LoadState(editorState: IEditorState) {
+    Revive(editorState);
+
+    this.setState({
+      configuration: editorState.configuration,
+      history: editorState.history,
+      historyCurrentStep: editorState.historyCurrentStep,
+      isLoaded: true
+    } as IAppState);
+  }
+
   public render() {
     if (this.state.isLoaded) {
       return (

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
-import { IContainerModel, getDepth, MakeIterator } from '../SVG/Elements/ContainerModel';
+import { IContainerModel, getDepth, MakeIterator } from '../../Interfaces/ContainerModel';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel | null,
@@ -13,7 +13,7 @@ interface IElementsSidebarProps {
   selectContainer: (container: IContainerModel) => void
 }
 
-export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
+export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
     if (!this.props.MainContainer) {
       return null;
@@ -53,7 +53,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
             duration: 0.150
           }}
           className={
-            `w-full elements-sidebar-row whitespace-pre 
+            `w-full elements-sidebar-row whitespace-pre
           text-left text-sm font-medium transition-all ${selectedClass}`
           }
           key={key}

src/Components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
+
+interface IFloatingButtonProps {
+  children: React.ReactNode[] | React.ReactNode
+  className: string
+}
+
+const toggleState = (
+  isHidden: boolean,
+  setHidden: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  setHidden(!isHidden);
+};
+
+const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
+  const [isHidden, setHidden] = React.useState(true);
+  const buttonListClasses = isHidden ? 'invisible opacity-0' : 'visible opacity-100';
+  const icon = isHidden
+    ? <MenuIcon className="floating-btn" />
+    : <XIcon className="floating-btn" />;
+
+  return (
+    <div className={props.className}>
+      <div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
+        { props.children }
+      </div>
+      <button
+        className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+        title='Open menu'
+        onClick={() => toggleState(isHidden, setHidden)}
+      >
+        { icon }
+      </button>
+    </div>);
+};
+
+export default FloatingButton;

src/Components/History/History.tsx

@@ -9,7 +9,7 @@ interface IHistoryProps {
   jumpTo: (move: number) => void
 }
 
-export class History extends React.Component<IHistoryProps> {
+export class History extends React.PureComponent<IHistoryProps> {
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
@@ -33,7 +33,7 @@ export class History extends React.Component<IHistoryProps> {
           key={move}
           onClick={() => this.props.jumpTo(move)}
           className={
-            `w-full elements-sidebar-row whitespace-pre 
+            `w-full elements-sidebar-row whitespace-pre
             text-left text-sm font-medium transition-all ${selectedClass}`
           }
         >

src/Components/Properties/Properties.tsx

@@ -6,20 +6,7 @@ interface IPropertiesProps {
   onChange: (key: string, value: string) => void
 }
 
-interface IPropertiesState {
+export class Properties extends React.PureComponent<IPropertiesProps> {
-  hasUpdate: boolean
-}
-
-export class Properties extends React.Component<IPropertiesProps, IPropertiesState> {
-  public state: IPropertiesState;
-
-  constructor(props: IPropertiesProps) {
-    super(props);
-    this.state = {
-      hasUpdate: false
-    };
-  }
-
   public render() {
     if (this.props.properties === undefined) {
       return <div></div>;
@@ -42,7 +29,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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getDepth, IContainerModel } from './ContainerModel';
+import { getDepth, IContainerModel } from '../../../Interfaces/ContainerModel';
 import { Dimension } from './Dimension';
 
 export interface IContainerProps {
@@ -8,15 +8,16 @@ export interface IContainerProps {
 
 const GAP = 50;
 
-export class Container extends React.Component<IContainerProps> {
+export class Container extends React.PureComponent<IContainerProps> {
   /**
    * Render the container
    * @returns Render the container
    */
   public render(): React.ReactNode {
-    const containersElements = this.props.model.children.map(child => new Container({ model: child } as IContainerProps).render());
+    const containersElements = this.props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
     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/Components/SVG/Elements/Dimension.tsx

@@ -9,7 +9,7 @@ interface IDimensionProps {
   strokeWidth: number;
 }
 
-export class Dimension extends React.Component<IDimensionProps> {
+export class Dimension extends React.PureComponent<IDimensionProps> {
   public render() {
     const style = {
       stroke: 'black'

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContainerModel, getDepth, MakeIterator } from './ContainerModel';
+import { ContainerModel, getDepth, MakeIterator } from '../../../Interfaces/ContainerModel';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {
@@ -22,15 +22,16 @@ const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
     const y = -(GAP * (getDepth(container) + 1));
     const strokeWidth = 1;
     const text = width.toString();
-    const dimension = new Dimension({
+    dimensions.push(
-      id,
+      <Dimension
-      xStart,
+        id={id}
-      xEnd,
+        xStart={xStart}
-      y,
+        xEnd={xEnd}
-      strokeWidth,
+        y={y}
-      text
+        strokeWidth={strokeWidth}
-    });
+        text={text}
-    dimensions.push(dimension.render());
+      />
+    );
   }
   return dimensions;
 };

src/Components/SVG/Elements/Selector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IContainerModel, getAbsolutePosition } from './ContainerModel';
+import { IContainerModel, getAbsolutePosition } from '../../../Interfaces/ContainerModel';
 
 interface ISelectorProps {
   selected: IContainerModel | null

src/Components/SVG/SVG.tsx

@@ -1,90 +1,75 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { ContainerModel } from './Elements/ContainerModel';
+import { ContainerModel } from '../../Interfaces/ContainerModel';
 import { Selector } from './Elements/Selector';
 
 interface ISVGProps {
+  width: number,
+  height: number,
   children: ContainerModel | ContainerModel[] | null,
   selected: ContainerModel | null
 }
 
 interface ISVGState {
-  viewBox: number[],
   value: Value,
   tool: Tool
 }
 
-export class SVG extends React.Component<ISVGProps> {
+export class SVG extends React.PureComponent<ISVGProps> {
   public state: ISVGState;
-  public svg: React.RefObject<SVGSVGElement>;
+  public static ID = 'svg';
 
   constructor(props: ISVGProps) {
     super(props);
     this.state = {
-      viewBox: [
-        0,
-        0,
-        window.innerWidth,
-        window.innerHeight
-      ],
       value: {
         viewerWidth: window.innerWidth,
         viewerHeight: window.innerHeight
       } as Value,
       tool: TOOL_PAN
     };
-    this.svg = React.createRef<SVGSVGElement>();
-  }
-
-  resizeViewBox() {
-    this.setState({
-      viewBox: [
-        0,
-        0,
-        window.innerWidth,
-        window.innerHeight
-      ]
-    });
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resizeViewBox.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resizeViewBox.bind(this));
   }
 
   render() {
     const xmlns = '<http://www.w3.org/2000/svg>';
 
     const properties = {
-      viewBox: this.state.viewBox.join(' '),
+      width: this.props.width,
+      height: this.props.height,
       xmlns
     };
 
     let children: React.ReactNode | React.ReactNode[] = [];
     if (Array.isArray(this.props.children)) {
-      children = this.props.children.map(child => new Container({ model: child }).render());
+      children = this.props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
     } else if (this.props.children !== null) {
-      children = new Container({ model: this.props.children }).render();
+      children = <Container key={`container-${this.props.children.properties.id}`} model={this.props.children}/>;
     }
 
     return (
-      <ReactSVGPanZoom
+      <div id={SVG.ID}>
-        width={window.innerWidth}
+        <ReactSVGPanZoom
-        height={window.innerHeight}
+          width={window.innerWidth}
-        background={'#ffffff'}
+          height={window.innerHeight}
-        defaultTool='pan'
+          background={'#ffffff'}
-        value={this.state.value} onChangeValue={value => this.setState({ value })}
+          defaultTool='pan'
-        tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
+          value={this.state.value} onChangeValue={value => this.setState({ value })}
-      >
+          tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
-        <svg ref={this.svg} {...properties}>
+          miniatureProps={{
-          { children }
+            position: 'left',
-          <Selector selected={this.props.selected} />
+            background: '#616264',
-        </svg>
+            width: window.innerWidth - 12,
-      </ReactSVGPanZoom>
+            height: 120
+          }}
+        >
+          <svg {...properties}>
+            { children }
+            <Selector selected={this.props.selected} />
+          </svg>
+        </ReactSVGPanZoom>
+      </div>
+
     );
   };
 }

src/Components/Sidebar/Sidebar.tsx

@@ -8,7 +8,7 @@ interface ISidebarProps {
   buttonOnClick: (type: string) => void;
 }
 
-export default class Sidebar extends React.Component<ISidebarProps> {
+export default class Sidebar extends React.PureComponent<ISidebarProps> {
   public render() {
     const listElements = this.props.componentOptions.map(componentOption =>
       <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type} onClick={() => this.props.buttonOnClick(componentOption.Type)}>

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

@@ -1,14 +1,15 @@
 import React from 'react';
-import { UploadIcon } from '@heroicons/react/outline';
+import { UploadIcon, PhotographIcon } from '@heroicons/react/outline';
 import './Editor.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
 import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
 import { Configuration } from './Interfaces/Configuration';
 import { SVG } from './Components/SVG/SVG';
 import { History } from './Components/History/History';
-import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Interfaces/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
+import FloatingButton from './Components/FloatingButton/FloatingButton';
 
 interface IEditorProps {
   configuration: Configuration,
@@ -212,13 +213,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,
@@ -251,7 +258,7 @@ class Editor extends React.Component<IEditorProps> {
     } as IEditorState);
   }
 
-  public SaveEditor() {
+  public SaveEditorAsJSON() {
     const exportName = 'state';
     const spaces = import.meta.env.DEV ? 4 : 0;
     const data = JSON.stringify(this.state, getCircularReplacer(), spaces);
@@ -264,6 +271,20 @@ class Editor extends React.Component<IEditorProps> {
     downloadAnchorNode.remove();
   }
 
+  public SaveEditorAsSVG() {
+    const svgWrapper = document.getElementById(SVG.ID) as HTMLElement;
+    const svg = svgWrapper.querySelector('svg') as SVGSVGElement;
+    const preface = '<?xml version="1.0" standalone="no"?>\r\n';
+    const svgBlob = new Blob([preface, svg.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    const downloadLink = document.createElement('a');
+    downloadLink.href = svgUrl;
+    downloadLink.download = 'newesttree.svg';
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+  }
+
   /**
    * Render the application
    * @returns {JSX.Element} Rendered JSX element
@@ -321,16 +342,30 @@ class Editor extends React.Component<IEditorProps> {
             &#9776; History
         </button>
 
-        <SVG selected={current.SelectedContainer}>
+        <SVG
+          width={Number(current.MainContainer?.properties.width)}
+          height={Number(current.MainContainer?.properties.height)}
+          selected={current.SelectedContainer}
+        >
           { current.MainContainer }
         </SVG>
-        <button
+        <FloatingButton className={`fixed flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
-          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-10 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
+          <button
-          title='Export as JSON'
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
-          onClick={() => this.SaveEditor()}
+            title='Export as JSON'
-        >
+            onClick={() => this.SaveEditorAsJSON()}
-          <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          >
-        </button>
+            <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+          <button
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+            title='Export as SVG'
+            onClick={() => this.SaveEditorAsSVG()}
+          >
+            <PhotographIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+        </FloatingButton>
+
       </div>
     );
   }

src/Interfaces/ContainerModel.ts

@@ -1,4 +1,4 @@
-import Properties from '../../../Interfaces/Properties';
+import Properties from './Properties';
 
 export interface IContainerModel {
   children: IContainerModel[],

src/index.scss

@@ -10,9 +10,12 @@
     @apply pl-6 pr-6 pt-2 pb-2 w-full
   }
   .close-button {
-    @apply transition-all w-full h-auto p-4 flex 
+    @apply transition-all w-full h-auto p-4 flex
   }
   .mainmenu-btn {
     @apply transition-all bg-blue-100 hover:bg-blue-200 text-blue-700 text-lg font-semibold p-8  rounded-lg
   }
+  .floating-btn {
+    @apply h-full w-full text-white align-middle items-center justify-center
+  }
 }

src/tests/resources/state.json

@@ -0,0 +1,182 @@
+{
+    "isSidebarOpen": true,
+    "isElementsSidebarOpen": false,
+    "isHistoryOpen": false,
+    "configuration": {
+        "AvailableContainers": [
+            {
+                "Type": "Chassis",
+                "Width": 500,
+                "Style": {
+                    "fillOpacity": 0,
+                    "borderWidth": 2,
+                    "stroke": "red"
+                }
+            },
+            {
+                "Type": "Trou",
+                "Width": 300,
+                "Style": {
+                    "fillOpacity": 0,
+                    "borderWidth": 2,
+                    "stroke": "green"
+                }
+            },
+            {
+                "Type": "Montant",
+                "Width": 100,
+                "Style": {
+                    "fillOpacity": 0,
+                    "borderWidth": 2,
+                    "stroke": "blue",
+                    "transform": "translateX(-50%)",
+                    "transformOrigin": "center",
+                    "transformBox": "fill-box"
+                }
+            }
+        ],
+        "AvailableSymbols": [
+            {
+                "Height": 0,
+                "Image": {
+                    "Base64Image": null,
+                    "Name": null,
+                    "Svg": null,
+                    "Url": "https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg"
+                },
+                "Name": "Poteau structure",
+                "Width": 0,
+                "XPositionReference": 1
+            },
+            {
+                "Height": 0,
+                "Image": {
+                    "Base64Image": null,
+                    "Name": null,
+                    "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",
+                "Width": 0,
+                "XPositionReference": 0
+            }
+        ],
+        "MainContainer": {
+            "Height": 200,
+            "Width": 1000
+        }
+    },
+    "history": [
+        {
+            "MainContainer": {
+                "children": [],
+                "properties": {
+                    "id": "main",
+                    "parentId": "null",
+                    "x": 0,
+                    "y": 0,
+                    "width": 1000,
+                    "height": 200,
+                    "fillOpacity": 0,
+                    "stroke": "black"
+                },
+                "userData": {}
+            },
+            "TypeCounters": {}
+        },
+        {
+            "MainContainer": {
+                "children": [
+                    {
+                        "children": [],
+                        "properties": {
+                            "id": "Chassis-0",
+                            "parentId": "main",
+                            "x": 0,
+                            "y": 0,
+                            "width": 500,
+                            "height": 200,
+                            "fillOpacity": 0,
+                            "borderWidth": 2,
+                            "stroke": "red"
+                        },
+                        "userData": {
+                            "type": "Chassis"
+                        }
+                    }
+                ],
+                "properties": {
+                    "id": "main",
+                    "parentId": "null",
+                    "x": 0,
+                    "y": 0,
+                    "width": 1000,
+                    "height": 200,
+                    "fillOpacity": 0,
+                    "stroke": "black"
+                },
+                "userData": {}
+            },
+            "TypeCounters": {
+                "Chassis": 0
+            },
+            "SelectedContainerId": "main"
+        },
+        {
+            "MainContainer": {
+                "children": [
+                    {
+                        "children": [],
+                        "properties": {
+                            "id": "Chassis-0",
+                            "parentId": "main",
+                            "x": 0,
+                            "y": 0,
+                            "width": 500,
+                            "height": 200,
+                            "fillOpacity": 0,
+                            "borderWidth": 2,
+                            "stroke": "red"
+                        },
+                        "userData": {
+                            "type": "Chassis"
+                        }
+                    },
+                    {
+                        "children": [],
+                        "properties": {
+                            "id": "Chassis-1",
+                            "parentId": "main",
+                            "x": 500,
+                            "y": 0,
+                            "width": 500,
+                            "height": 200,
+                            "fillOpacity": 0,
+                            "borderWidth": 2,
+                            "stroke": "red"
+                        },
+                        "userData": {
+                            "type": "Chassis"
+                        }
+                    }
+                ],
+                "properties": {
+                    "id": "main",
+                    "parentId": "null",
+                    "x": 0,
+                    "y": 0,
+                    "width": 1000,
+                    "height": 200,
+                    "fillOpacity": 0,
+                    "stroke": "black"
+                },
+                "userData": {}
+            },
+            "TypeCounters": {
+                "Chassis": 1
+            },
+            "SelectedContainerId": "main"
+        }
+    ],
+    "historyCurrentStep": 2
+}

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,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') {
+    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
+      // 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 {