README.md

@@ -15,6 +15,34 @@ 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
@@ -29,39 +57,3 @@ 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 './Interfaces/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
 import Editor, { IEditorState } from './Editor';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
@@ -40,22 +40,6 @@ 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) => {
@@ -102,22 +86,18 @@ export class App extends React.Component<IAppProps> {
       const result = reader.result as string;
       const editorState: IEditorState = JSON.parse(result);
 
-      this.LoadState(editorState);
+      Revive(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 '../../Interfaces/ContainerModel';
+import { IContainerModel, getDepth, MakeIterator } from '../SVG/Elements/ContainerModel';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel | null,
@@ -13,7 +13,7 @@ interface IElementsSidebarProps {
   selectContainer: (container: IContainerModel) => void
 }
 
-export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps> {
+export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
     if (!this.props.MainContainer) {
       return null;
@@ -53,7 +53,7 @@ export class ElementsSidebar extends React.PureComponent<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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-interface IFloatingButtonProps {
-}
-
-const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
-  return <></>;
-};
-
-export default FloatingButton;

src/Components/History/History.tsx

@@ -9,7 +9,7 @@ interface IHistoryProps {
   jumpTo: (move: number) => void
 }
 
-export class History extends React.PureComponent<IHistoryProps> {
+export class History extends React.Component<IHistoryProps> {
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
@@ -33,7 +33,7 @@ export class History extends React.PureComponent<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,7 +6,20 @@ interface IPropertiesProps {
   onChange: (key: string, value: string) => void
 }
 
-export class Properties extends React.PureComponent<IPropertiesProps> {
+interface IPropertiesState {
+  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>;

src/Components/SVG/Elements/Container.tsx

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

src/Components/SVG/Elements/ContainerModel.ts

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

src/Components/SVG/Elements/Dimension.tsx

@@ -9,7 +9,7 @@ interface IDimensionProps {
   strokeWidth: number;
 }
 
-export class Dimension extends React.PureComponent<IDimensionProps> {
+export class Dimension extends React.Component<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 '../../../Interfaces/ContainerModel';
+import { ContainerModel, getDepth, MakeIterator } from './ContainerModel';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {
@@ -22,16 +22,15 @@ const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
     const y = -(GAP * (getDepth(container) + 1));
     const strokeWidth = 1;
     const text = width.toString();
-    dimensions.push(
+    const dimension = new Dimension({
-      <Dimension
+      id,
-        id={id}
+      xStart,
-        xStart={xStart}
+      xEnd,
-        xEnd={xEnd}
+      y,
-        y={y}
+      strokeWidth,
-        strokeWidth={strokeWidth}
+      text
-        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 '../../../Interfaces/ContainerModel';
+import { IContainerModel, getAbsolutePosition } from './ContainerModel';
 
 interface ISelectorProps {
   selected: IContainerModel | null

src/Components/SVG/SVG.tsx

@@ -1,28 +1,33 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { ContainerModel } from '../../Interfaces/ContainerModel';
+import { ContainerModel } from './Elements/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.PureComponent<ISVGProps> {
+export class SVG extends React.Component<ISVGProps> {
   public state: ISVGState;
   public svg: React.RefObject<SVGSVGElement>;
 
   constructor(props: ISVGProps) {
     super(props);
     this.state = {
+      viewBox: [
+        0,
+        0,
+        window.innerWidth,
+        window.innerHeight
+      ],
       value: {
         viewerWidth: window.innerWidth,
         viewerHeight: window.innerHeight
@@ -32,20 +37,38 @@ export class SVG extends React.PureComponent<ISVGProps> {
     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 = {
-      width: this.props.width,
+      viewBox: this.state.viewBox.join(' '),
-      height: this.props.height,
       xmlns
     };
 
     let children: React.ReactNode | React.ReactNode[] = [];
     if (Array.isArray(this.props.children)) {
-      children = this.props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
+      children = this.props.children.map(child => new Container({ model: child }).render());
     } else if (this.props.children !== null) {
-      children = <Container key={`container-${this.props.children.properties.id}`} model={this.props.children}/>;
+      children = new Container({ model: this.props.children }).render();
     }
 
     return (
@@ -56,12 +79,6 @@ export class SVG extends React.PureComponent<ISVGProps> {
         defaultTool='pan'
         value={this.state.value} onChangeValue={value => this.setState({ value })}
         tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
-        miniatureProps={{
-          position: 'left',
-          background: '#616264',
-          width: window.innerWidth - 12,
-          height: 120
-        }}
       >
         <svg ref={this.svg} {...properties}>
           { children }

src/Components/Sidebar/Sidebar.tsx

@@ -8,7 +8,7 @@ interface ISidebarProps {
   buttonOnClick: (type: string) => void;
 }
 
-export default class Sidebar extends React.PureComponent<ISidebarProps> {
+export default class Sidebar extends React.Component<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.tsx

@@ -6,7 +6,7 @@ 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 './Interfaces/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
 
@@ -327,15 +327,11 @@ class Editor extends React.Component<IEditorProps> {
             &#9776; History
         </button>
 
-        <SVG
+        <SVG selected={current.SelectedContainer}>
-          width={Number(current.MainContainer?.properties.width)}
-          height={Number(current.MainContainer?.properties.height)}
-          selected={current.SelectedContainer}
-        >
           { current.MainContainer }
         </SVG>
         <button
-          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-40 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
+          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`}
           title='Export as JSON'
           onClick={() => this.SaveEditor()}
         >

src/tests/resources/state.json

@@ -1,182 +0,0 @@
-{
-    "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
-}