Renamed interfaces to IInterface

docs/ComponentStructure.drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2022-08-12T07:34:44.035Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" etag="H2W9OobHoTTI1UYQNxBI" version="20.2.3" type="device"><diagram id="Lr04U8grSjRMwiP2IEPw" name="Page-1">5ZxRc5s4EMc/jeeenAEE2H5sEqftzGWm01zb673cKCCDerLkEXLs9NOfBAIb5KbqTGrJdl9qFgnQb1d/VismI3Cz3L7lcFXesxyRURTk2xG4HUXyXzyT/ynLc2OZTNPGUHCcN6ZwZ3jA35E2Btq6xjmqeg0FY0TgVd+YMUpRJno2yDnb9JstGOnfdQULZBgeMkhM6xeci7KxTqPJzv4O4aJs7xymesBL2DbWI6lKmLPNngnMR+CGMyaaX8vtDSIKXsul6Xf3g7Pdg3FEhU2Hb18XtJyjj/lGLBbfP2///XIPxyHQDyee2xGjXALQh4yLkhWMQjLfWa85W9McqcsG8mjX5k/GVtIYSuM3JMSz9iZcCyZNpVgSfba5p7rRD8eiTRVb8wy9NAAdE5AXSLzQLuqIy1BFbIkEf5b9OCJQ4Kf+c0AdM0XXbodV/tBkf4VyfCGUE6eUm+s+QbLWd3qzWhng+1g3JRboYQXr0W+khB1C+IS4QNuXIZqD1h3iVM9/LYBhoo83OzkJW40o96Sk7ff6nBIX0Yi2WPytul8l+ujr3pnbrb5yffCsD14xgiPLCAZOIzg9cZ2wpRy7pBwZOjHPsWB8FKVEPvT1o/pViJpMY8Gt4eHzW9mz31w+A951cKw2IIl7atOpiDO1AaEB5bRiGthmGE6DGkSXgnnqFPOp58vWmFOnmE89YbbGPHGK2Ukm6AKz04UJMBKOT+8tko1PFeLq0lQgvlA5g48JxzgM+usbMHGdcYSTE4/q2DKqnUp0bAR1nRz/NKpvGBUQ00oNsJQxHeicmqClAuVjjMfAtxBPDPj3kuk9omsLD9xhXglFNOMIUS+JJ9M+cffLmLYefbKiklqKitP0OnSyWHRcmrL1jNNUMTVzGJpJKeeMEJR/RDATUsg/QPoPY8vI8j1Qd1Y5zkKVU/T7oHoqvNQkME16mhRPTU3qtq2Oo0mnvuafWEb+zGXkT4zI1ymMilzXMRn335PJzPV7cmqmhYigzK68eq06Kb9mAtKC1Gow6O2VJCSRb/hnBv5bLPPqCjNqwf+vWoCJDG3FtWQbqp7xkT2hTp2zXex76JDhfJgErh0SmhPCzHHkgEWfRSXfjf+hG0Zk5INbyqiS7gUmZGCCBBdUHmZIVQmkQeHDGSRv9IklzvNa9w/B77vnNSbEYLMzOZC3pwfwg9+G35wQ4dUVPV8PDDeAnHugnW2XMQHiWX8CxAd2+4+L3/wq4ozxp4NKTcfVGf7okvB3hTFv8Jul9zPGPx5UzbpsyBV+cPLfs9iW4kFw2DNH+qLFLMZfQ5sFV1MxDh5VYxklMkjknWSKX3mZ3YeDd+uBAsxxk/vIrMM/4Bw9WrHvWgZsUS+sliupKlT4yX6cxr7RB7NTVxfbyi9wWvptHX8BnJ1ufkRmjV3vila/oCol2+yKNWte05IPm9XPL4HqK/opMpF3IhOZ5d93uBJMXfqnzmg+FP2j0g6o36tB2e/ulwO69ao/DjALaHeEyelIi+u1EFZ1zbaDvMyyyXj2ch0vHRF654d2kdDPMd9nVg5oPeU/90H9st3zc4fd1J8PnK3UOhNVFuT3GzeJ5inU8cdguLPi3hGmDll+b6O2C1WJoRUfH3kP9cY97/iiCpdDuXddNo4jg35w1vsmvm1cxRdVuYwC3+LfrKidMf5x6Nu2VWxW1s6a/yD+k8R8/R6Xv1mLOGf+sXf6Y6b958x/+L23e/4X9dmOudz6ffojD3d/86Q+t/eXY8D8fw==</diagram></mxfile>

src/Components/API/api.ts

@@ -1,10 +1,10 @@
-import { Configuration } from '../../Interfaces/Configuration';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
 
 /**
  * Fetch the configuration from the API
  * @returns {Configation} The model of the configuration for the application
  */
-export async function fetchConfiguration(): Promise<Configuration> {
+export async function fetchConfiguration(): Promise<IConfiguration> {
   const url = `${import.meta.env.VITE_API_URL}`;
   // The test library cannot use the Fetch API
   // @ts-expect-error
@@ -15,7 +15,7 @@ export async function fetchConfiguration(): Promise<Configuration> {
     })
       .then(async(response) =>
         await response.json()
-      ) as Configuration;
+      ) as IConfiguration;
   }
   return await new Promise((resolve) => {
     const xhr = new XMLHttpRequest();

src/Components/App/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import './App.scss';
 import { MainMenu } from '../MainMenu/MainMenu';
-import { ContainerModel } from '../../Interfaces/ContainerModel';
+import { ContainerModel } from '../../Interfaces/IContainerModel';
 import Editor, { IEditorState } from '../Editor/Editor';
 import { LoadState } from './Load';
 import { LoadEditor, NewEditor } from './MenuActions';

src/Components/App/MenuActions.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Configuration } from '../../Interfaces/Configuration';
-import { ContainerModel } from '../../Interfaces/ContainerModel';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { fetchConfiguration } from '../API/api';
 import { IEditorState } from '../Editor/Editor';
 import { LoadState } from './Load';
@@ -11,7 +11,7 @@ export function NewEditor(
 ): void {
   // Fetch the configuration from the API
   fetchConfiguration()
-    .then((configuration: Configuration) => {
+    .then((configuration: IConfiguration) => {
       // Set the main container from the given properties of the API
       const MainContainer = new ContainerModel(
         null,

src/Components/Editor/ContainerOperations.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
-import { HistoryState } from '../../Interfaces/HistoryState';
-import { Configuration } from '../../Interfaces/Configuration';
-import { ContainerModel, IContainerModel } from '../../Interfaces/ContainerModel';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
 
@@ -11,9 +11,9 @@ import { getCurrentHistory } from './Editor';
  */
 export function SelectContainer(
   container: ContainerModel,
-  fullHistory: HistoryState[],
+  fullHistory: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -46,9 +46,9 @@ export function SelectContainer(
  */
 export function DeleteContainer(
   containerId: string,
-  fullHistory: HistoryState[],
+  fullHistory: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -108,10 +108,10 @@ export function DeleteContainer(
  */
 export function AddContainerToSelectedContainer(
   type: string,
-  configuration: Configuration,
-  fullHistory: HistoryState[],
+  configuration: IConfiguration,
+  fullHistory: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -151,10 +151,10 @@ export function AddContainer(
   index: number,
   type: string,
   parentId: string,
-  configuration: Configuration,
-  fullHistory: HistoryState[],
+  configuration: IConfiguration,
+  fullHistory: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   const history = getCurrentHistory(fullHistory, historyCurrentStep);

src/Components/Editor/Editor.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import './Editor.scss';
-import { Configuration } from '../../Interfaces/Configuration';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { SVG } from '../SVG/SVG';
-import { HistoryState } from '../../Interfaces/HistoryState';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { UI } from '../UI/UI';
 import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddContainer } from './ContainerOperations';
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Save';
@@ -10,22 +10,22 @@ import { onKeyDown } from './Shortcuts';
 import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations';
 
 interface IEditorProps {
-  configuration: Configuration
-  history: HistoryState[]
+  configuration: IConfiguration
+  history: IHistoryState[]
   historyCurrentStep: number
 }
 
 export interface IEditorState {
-  history: HistoryState[]
+  history: IHistoryState[]
   historyCurrentStep: number
-  configuration: Configuration
+  configuration: IConfiguration
 }
 
-export const getCurrentHistory = (history: HistoryState[], historyCurrentStep: number): HistoryState[] => history.slice(0, historyCurrentStep + 1);
-export const getCurrentHistoryState = (history: HistoryState[], historyCurrentStep: number): HistoryState => history[historyCurrentStep];
+export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] => history.slice(0, historyCurrentStep + 1);
+export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
 
 const Editor: React.FunctionComponent<IEditorProps> = (props) => {
-  const [history, setHistory] = React.useState<HistoryState[]>(structuredClone(props.history));
+  const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
   const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
 
   React.useEffect(() => {

src/Components/Editor/PropertiesOperations.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
-import { IContainerModel, ContainerModel } from '../../Interfaces/ContainerModel';
-import { HistoryState } from '../../Interfaces/HistoryState';
-import Properties from '../../Interfaces/Properties';
+import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import IProperties from '../../Interfaces/IProperties';
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
 import { RecalculatePhysics } from './RigidBodyBehaviors';
@@ -15,9 +15,9 @@ import { RecalculatePhysics } from './RigidBodyBehaviors';
 export function OnPropertyChange(
   key: string,
   value: string | number | boolean,
-  fullHistory: HistoryState[],
+  fullHistory: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -73,10 +73,10 @@ export function OnPropertyChange(
   */
 export function OnPropertiesSubmit(
   event: React.SyntheticEvent<HTMLFormElement>,
-  properties: Properties,
-  fullHistory: HistoryState[],
+  properties: IProperties,
+  fullHistory: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: Dispatch<SetStateAction<HistoryState[]>>,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   event.preventDefault();

src/Components/Editor/RigidBodyBehaviors.ts

@@ -1,5 +1,5 @@
-import { IContainerModel } from '../../Interfaces/ContainerModel';
-import { SizePointer } from '../../Interfaces/SizePointer';
+import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { ISizePointer } from '../../Interfaces/ISizePointer';
 
 /**
  * "Transform the container into a rigid body"
@@ -167,17 +167,17 @@ function constraintBodyInsideUnallocatedWidth(
  * (except the fact that disk space is divided by block).
  * @param container Container where to find an available width
  * @param exception Container to exclude of the widths (since a container will be moved, it might need to be excluded)
- * @returns {SizePointer[]} Array of unallocated widths (x=position of the unallocated space, width=size of the allocated space)
+ * @returns {ISizePointer[]} Array of unallocated widths (x=position of the unallocated space, width=size of the allocated space)
  */
 function getAvailableWidths(
   container: IContainerModel,
   exception: IContainerModel
-): SizePointer[] {
+): ISizePointer[] {
   // Initialize the first size pointer
   // which takes full width of the available space
   const x = 0;
   const width = Number(container.properties.width);
-  let unallocatedSpaces: SizePointer[] = [{ x, width }];
+  let unallocatedSpaces: ISizePointer[] = [{ x, width }];
 
   // We will only uses containers that also have the rigid bodies
   // as out-of-bound or enormouse containers should be ignored
@@ -192,7 +192,7 @@ function getAvailableWidths(
     }
 
     // get the space of the child that is inside the parent
-    let newUnallocatedSpace: SizePointer[] = [];
+    let newUnallocatedSpace: ISizePointer[] = [];
 
     // We will iterate on a mutable variable in order to divide it
     for (const unallocatedSpace of unallocatedSpaces) {
@@ -229,7 +229,7 @@ function getAvailableWidthsTwoLines(
   max1: number,
   min2: number,
   max2: number
-): SizePointer[] {
+): ISizePointer[] {
   if (min2 < min1 && max2 > max1) {
     // object 2 is overlapping full width
     return [];
@@ -276,5 +276,5 @@ function getAvailableWidthsTwoLines(
  */
 const isFitting = (
   container: IContainerModel,
-  sizePointer: SizePointer
+  sizePointer: ISizePointer
 ): boolean => Number(container.properties.width) <= sizePointer.width;

src/Components/Editor/Save.ts

@@ -1,13 +1,13 @@
-import { HistoryState } from '../../Interfaces/HistoryState';
-import { Configuration } from '../../Interfaces/Configuration';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { getCircularReplacer } from '../../utils/saveload';
 import { ID } from '../SVG/SVG';
 import { IEditorState } from './Editor';
 
 export function SaveEditorAsJSON(
-  history: HistoryState[],
+  history: IHistoryState[],
   historyCurrentStep: number,
-  configuration: Configuration
+  configuration: IConfiguration
 ): void {
   const exportName = 'state';
   const spaces = import.meta.env.DEV ? 4 : 0;

src/Components/Editor/Shortcuts.ts

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction } from 'react';
-import { HistoryState } from '../../Interfaces/HistoryState';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
 
 export function onKeyDown(
   event: KeyboardEvent,
-  history: HistoryState[],
+  history: IHistoryState[],
   historyCurrentStep: number,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import * as React from 'react';
 import { fireEvent, render, screen } from '../../utils/test-utils';
 import { ElementsSidebar } from './ElementsSidebar';
-import { IContainerModel } from '../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../Interfaces/IContainerModel';
 
 describe.concurrent('Elements sidebar', () => {
   it('With a MainContainer', () => {

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
-import ContainerProperties from '../../Interfaces/Properties';
-import { IContainerModel } from '../../Interfaces/ContainerModel';
+import ContainerProperties from '../../Interfaces/IProperties';
+import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { getDepth, MakeIterator } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
 import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick } from './MouseEventHandlers';
-import { Point } from '../../Interfaces/Point';
+import { IPoint } from '../../Interfaces/IPoint';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel
@@ -64,7 +64,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
   // States
   const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
   const [onClickContainerId, setOnClickContainerId] = React.useState<string>('');
-  const [contextMenuPosition, setContextMenuPosition] = React.useState<Point>({
+  const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
     x: 0,
     y: 0
   });

src/Components/ElementsSidebar/MouseEventHandlers.ts

@@ -1,12 +1,12 @@
-import { IContainerModel } from '../../Interfaces/ContainerModel';
-import { Point } from '../../Interfaces/Point';
+import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { IPoint } from '../../Interfaces/IPoint';
 import { findContainerById } from '../../utils/itertools';
 
 export function handleRightClick(
   event: MouseEvent,
   setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
   setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>,
-  setContextMenuPosition: React.Dispatch<React.SetStateAction<Point>>
+  setContextMenuPosition: React.Dispatch<React.SetStateAction<IPoint>>
 ): void {
   event.preventDefault();
 
@@ -16,7 +16,7 @@ export function handleRightClick(
     return;
   }
 
-  const contextMenuPosition: Point = { x: event.pageX, y: event.pageY };
+  const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY };
   setIsContextMenuOpen(true);
   setOnClickContainerId(event.target.id);
   setContextMenuPosition(contextMenuPosition);

src/Components/History/History.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HistoryState } from "../../Interfaces/HistoryState";
+import { IHistoryState } from "../../Interfaces/IHistoryState";
 
 interface IHistoryProps {
-  history: HistoryState[]
+  history: IHistoryState[]
   historyCurrentStep: number
   isOpen: boolean
   jumpTo: (move: number) => void

src/Components/Properties/Properties.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ContainerProperties from '../../Interfaces/Properties';
+import ContainerProperties from '../../Interfaces/IProperties';
 import { ToggleButton } from '../ToggleButton/ToggleButton';
 import { INPUT_TYPES } from './PropertiesInputTypes';
 

src/Components/SVG/Elements/Container.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { XPositionReference } from '../../../Enums/XPositionReference';
-import { IContainerModel } from '../../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 
-export interface IContainerProps {
+interface IContainerProps {
   model: IContainerModel
 }
 

src/Components/SVG/Elements/Selector.tsx

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

src/Components/SVG/SVG.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { ContainerModel } from '../../Interfaces/ContainerModel';
+import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector';
 import { BAR_WIDTH } from '../Bar/Bar';
 

src/Components/Sidebar/Sidebar.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { AvailableContainer } from '../../Interfaces/AvailableContainer';
+import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { truncateString } from '../../utils/stringtools';
 
 interface ISidebarProps {
-  componentOptions: AvailableContainer[]
+  componentOptions: IAvailableContainer[]
   isOpen: boolean
   buttonOnClick: (type: string) => void
 }

src/Components/UI/UI.tsx

@@ -2,23 +2,23 @@ import * as React from 'react';
 import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
 import { Sidebar } from '../Sidebar/Sidebar';
 import { History } from '../History/History';
-import { AvailableContainer } from '../../Interfaces/AvailableContainer';
-import { ContainerModel } from '../../Interfaces/ContainerModel';
-import { HistoryState } from '../../Interfaces/HistoryState';
+import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
+import { ContainerModel } from '../../Interfaces/IContainerModel';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
 import { FloatingButton } from '../FloatingButton/FloatingButton';
 import { Bar } from '../Bar/Bar';
-import Properties from '../../Interfaces/Properties';
+import IProperties from '../../Interfaces/IProperties';
 
 interface IUIProps {
-  current: HistoryState
-  history: HistoryState[]
+  current: IHistoryState
+  history: IHistoryState[]
   historyCurrentStep: number
-  AvailableContainers: AvailableContainer[]
+  AvailableContainers: IAvailableContainer[]
   SelectContainer: (container: ContainerModel) => void
   DeleteContainer: (containerId: string) => void
   OnPropertyChange: (key: string, value: string | number | boolean) => void
-  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, properties: Properties) => void
+  OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>, properties: IProperties) => void
   AddContainerToSelectedContainer: (type: string) => void
   AddContainer: (index: number, type: string, parentId: string) => void
   SaveEditorAsJSON: () => void

src/Interfaces/Configuration.ts

@@ -1,9 +0,0 @@
-import { AvailableContainer } from './AvailableContainer';
-import { AvailableSymbolModel } from './AvailableSymbol';
-
-/** Model of configuration for the application to configure it */
-export interface Configuration {
-  AvailableContainers: AvailableContainer[]
-  AvailableSymbols: AvailableSymbolModel[]
-  MainContainer: AvailableContainer
-}

src/Interfaces/IAvailableContainer.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { XPositionReference } from '../Enums/XPositionReference';
 
 /** Model of available container used in application configuration */
-export interface AvailableContainer {
+export interface IAvailableContainer {
   Type: string
   Width: number
   Height: number

src/Interfaces/IAvailableSymbol.ts

@@ -1,12 +1,12 @@
 import { XPositionReference } from '../Enums/XPositionReference';
-import { Image } from './Image';
+import { IImage } from './IImage';
 
 /**
  * Model of available symbol to configure the application */
-export interface AvailableSymbolModel {
+export interface IAvailableSymbolModel {
   Name: string
   XPositionReference: XPositionReference
-  Image: Image
+  Image: IImage
   Width: number
   Height: number
 }

src/Interfaces/IConfiguration.ts

@@ -0,0 +1,9 @@
+import { IAvailableContainer } from './IAvailableContainer';
+import { IAvailableSymbolModel } from './IAvailableSymbol';
+
+/** Model of configuration for the application to configure it */
+export interface IConfiguration {
+  AvailableContainers: IAvailableContainer[]
+  AvailableSymbols: IAvailableSymbolModel[]
+  MainContainer: IAvailableContainer
+}

src/Interfaces/IContainerModel.ts

@@ -1,21 +1,21 @@
-import Properties from './Properties';
+import IProperties from './IProperties';
 
 export interface IContainerModel {
   children: IContainerModel[]
   parent: IContainerModel | null
-  properties: Properties
+  properties: IProperties
   userData: Record<string, string | number>
 }
 
 export class ContainerModel implements IContainerModel {
   public children: IContainerModel[];
   public parent: IContainerModel | null;
-  public properties: Properties;
+  public properties: IProperties;
   public userData: Record<string, string | number>;
 
   constructor(
     parent: IContainerModel | null,
-    properties: Properties,
+    properties: IProperties,
     children: IContainerModel[] = [],
     userData = {}) {
     this.parent = parent;

src/Interfaces/IHistoryState.ts

@@ -1,6 +1,6 @@
-import { IContainerModel } from './ContainerModel';
+import { IContainerModel } from './IContainerModel';
 
-export interface HistoryState {
+export interface IHistoryState {
   LastAction: string
   MainContainer: IContainerModel
   SelectedContainer: IContainerModel | null

src/Interfaces/IImage.ts

@@ -1,5 +1,5 @@
 /** Model of an image with multiple source */
-export interface Image {
+export interface IImage {
   Name: string
   Url: string
   Base64Image: string

src/Interfaces/IPoint.ts

@@ -1,4 +1,4 @@
-export interface Point {
+export interface IPoint {
   x: number
   y: number
 }

src/Interfaces/IProperties.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { XPositionReference } from '../Enums/XPositionReference';
 
-export default interface Properties extends React.CSSProperties {
+export default interface IProperties extends React.CSSProperties {
   id: string
   parentId: string | null
   x: number

src/Interfaces/ISizePointer.ts

@@ -3,7 +3,7 @@
  * x being the address where the pointer is pointing
  * width being the overall (un)allocated space affected to the address
  */
-export interface SizePointer {
+export interface ISizePointer {
   x: number
   width: number
 }

src/utils/default.ts

@@ -1,7 +1,7 @@
-import { Configuration } from '../Interfaces/Configuration';
-import Properties from '../Interfaces/Properties';
+import { IConfiguration } from '../Interfaces/IConfiguration';
+import IProperties from '../Interfaces/IProperties';
 
-export const DEFAULT_CONFIG: Configuration = {
+export const DEFAULT_CONFIG: IConfiguration = {
   AvailableContainers: [
     {
       Type: 'Container',
@@ -25,7 +25,7 @@ export const DEFAULT_CONFIG: Configuration = {
   }
 };
 
-export const DEFAULT_MAINCONTAINER_PROPS: Properties = {
+export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   id: 'main',
   parentId: 'null',
   x: 0,

src/utils/itertools.ts

@@ -1,4 +1,4 @@
-import { IContainerModel } from '../Interfaces/ContainerModel';
+import { IContainerModel } from '../Interfaces/IContainerModel';
 
 /**
  * Returns a Generator iterating of over the children depth-first