Refactor Editor and module functions (#15)

Moved all module functions to separate utils modules

Replaced standard with standard with typescript

Extracted UI elements to separate component

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

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,31 +1,32 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
-import { IContainerModel, getDepth, MakeIterator } from '../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../Interfaces/ContainerModel';
+import { getDepth, MakeIterator } from '../../utils/itertools';
 
 interface IElementsSidebarProps {
-  MainContainer: IContainerModel | null,
-  isOpen: boolean,
+  MainContainer: IContainerModel | null
+  isOpen: boolean
   isHistoryOpen: boolean
-  SelectedContainer: IContainerModel | null,
-  onClick: () => void,
-  onPropertyChange: (key: string, value: string) => void,
+  SelectedContainer: IContainerModel | null
+  onClick: () => void
+  onPropertyChange: (key: string, value: string) => void
   selectContainer: (container: IContainerModel) => void
 }
 
 export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
-    if (!this.props.MainContainer) {
+    if (this.props.MainContainer == null) {
       return null;
     }
 
     const it = MakeIterator(this.props.MainContainer);
     for (const container of it) {
-      handleContainer(container as IContainerModel);
+      handleContainer(container);
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     let isOpenClasses = '-right-64';
     if (this.props.isOpen) {
       isOpenClasses = this.props.isHistoryOpen

src/Components/FloatingButton/FloatingButton.tsx

@@ -9,7 +9,7 @@ interface IFloatingButtonProps {
 const toggleState = (
   isHidden: boolean,
   setHidden: React.Dispatch<React.SetStateAction<boolean>>
-) => {
+): void => {
   setHidden(!isHidden);
 };
 

src/Components/History/History.tsx

@@ -2,19 +2,19 @@ import * as React from 'react';
 import { IHistoryState } from '../../App';
 
 interface IHistoryProps {
-  history: IHistoryState[],
-  historyCurrentStep: number,
-  isOpen: boolean,
-  onClick: () => void,
+  history: IHistoryState[]
+  historyCurrentStep: number
+  isOpen: boolean
+  onClick: () => void
   jumpTo: (move: number) => void
 }
 
 export class History extends React.PureComponent<IHistoryProps> {
-  public render() {
+  public render(): JSX.Element {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
     const states = this.props.history.map((step, move) => {
-      const desc = move
+      const desc = move > 0
         ? `Go to modification n°${move}`
         : 'Go to the beginning';
 

src/Components/MainMenu/MainMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface IMainMenuProps {
-  newEditor: () => void;
+  newEditor: () => void
   loadEditor: (files: FileList | null) => void
 }
 

src/Components/Properties/Properties.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import ContainerProperties from '../../Interfaces/Properties';
 
 interface IPropertiesProps {
-  properties?: ContainerProperties,
+  properties?: ContainerProperties
   onChange: (key: string, value: string) => void
 }
 
 export class Properties extends React.PureComponent<IPropertiesProps> {
-  public render() {
+  public render(): JSX.Element {
     if (this.props.properties === undefined) {
       return <div></div>;
     }
@@ -27,7 +27,7 @@ export class Properties extends React.PureComponent<IPropertiesProps> {
   public handleProperties = (
     [key, value]: [string, string | number],
     groupInput: React.ReactNode[]
-  ) => {
+  ): void => {
     const id = `property-${key}`;
     const type = 'text';
     const isDisabled = key === 'id' || key === 'parentId'; // hardcoded

src/Components/SVG/Elements/Container.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { getDepth, IContainerModel } from '../../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../../Interfaces/ContainerModel';
+import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 
 export interface IContainerProps {
@@ -20,11 +21,11 @@ export class Container extends React.PureComponent<IContainerProps> {
     const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`;
 
     // g style
-    const defaultStyle = {
+    const defaultStyle: React.CSSProperties = {
       transitionProperty: 'all',
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '150ms'
-    } as React.CSSProperties;
+    };
 
     // Rect style
     const style = Object.assign(

src/Components/SVG/Elements/Dimension.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 
 interface IDimensionProps {
-  id: string;
-  xStart: number;
-  xEnd: number;
-  y: number;
-  text: string;
-  strokeWidth: number;
+  id: string
+  xStart: number
+  xEnd: number
+  y: number
+  text: string
+  strokeWidth: number
 }
 
 export class Dimension extends React.PureComponent<IDimensionProps> {
-  public render() {
-    const style = {
+  public render(): JSX.Element {
+    const style: React.CSSProperties = {
       stroke: 'black'
-    } as React.CSSProperties;
+    };
     return (
       <g key={this.props.id}>
         <line

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ContainerModel, getDepth, MakeIterator } from '../../../Interfaces/ContainerModel';
+import { ContainerModel } from '../../../Interfaces/ContainerModel';
+import { getDepth, MakeIterator } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {
-  isHidden: boolean,
-  roots: ContainerModel | ContainerModel[] | null,
+  isHidden: boolean
+  roots: ContainerModel | ContainerModel[] | null
 }
 
 const GAP: number = 50;

src/Components/SVG/Elements/Selector.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IContainerModel, getAbsolutePosition } from '../../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../../Interfaces/ContainerModel';
+import { getAbsolutePosition } from '../../../utils/itertools';
 
 interface ISelectorProps {
   selected: IContainerModel | null
@@ -18,7 +19,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     props.selected.properties.width,
     props.selected.properties.height
   ];
-  const style = {
+  const style: React.CSSProperties = {
     stroke: '#3B82F6', // tw blue-500
     strokeWidth: 4,
     fillOpacity: 0,
@@ -26,7 +27,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
     transitionDuration: '150ms',
     animation: 'fadein 750ms ease-in alternate infinite'
-  } as React.CSSProperties;
+  };
 
   return (
     <rect

src/Components/SVG/SVG.tsx

@@ -1,37 +1,49 @@
 import * as React from 'react';
-import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
+import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/ContainerModel';
 import { Selector } from './Elements/Selector';
 
 interface ISVGProps {
-  width: number,
-  height: number,
-  children: ContainerModel | ContainerModel[] | null,
+  width: number
+  height: number
+  children: ContainerModel | ContainerModel[] | null
   selected: ContainerModel | null
 }
 
 interface ISVGState {
-  value: Value,
-  tool: Tool
+  viewerWidth: number,
+  viewerHeight: number,
 }
 
 export class SVG extends React.PureComponent<ISVGProps> {
-  public state: ISVGState;
   public static ID = 'svg';
+  public state: ISVGState;
 
   constructor(props: ISVGProps) {
     super(props);
     this.state = {
-      value: {
-        viewerWidth: window.innerWidth,
-        viewerHeight: window.innerHeight
-      } as Value,
-      tool: TOOL_PAN
+      viewerWidth: window.innerWidth,
+      viewerHeight: window.innerHeight
     };
   }
 
-  render() {
+  resizeViewBox(): void {
+    this.setState({
+      viewerWidth: window.innerWidth,
+      viewerHeight: window.innerHeight
+    });
+  }
+
+  componentDidMount(): void {
+    window.addEventListener('resize', this.resizeViewBox.bind(this));
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('resize', this.resizeViewBox.bind(this));
+  }
+
+  render(): JSX.Element {
     const xmlns = '<http://www.w3.org/2000/svg>';
 
     const properties = {
@@ -49,13 +61,11 @@ export class SVG extends React.PureComponent<ISVGProps> {
 
     return (
       <div id={SVG.ID}>
-        <ReactSVGPanZoom
-          width={window.innerWidth}
-          height={window.innerHeight}
+        <UncontrolledReactSVGPanZoom
+          width={this.state.viewerWidth}
+          height={this.state.viewerHeight}
           background={'#ffffff'}
           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',
@@ -67,9 +77,8 @@ export class SVG extends React.PureComponent<ISVGProps> {
             { children }
             <Selector selected={this.props.selected} />
           </svg>
-        </ReactSVGPanZoom>
+        </UncontrolledReactSVGPanZoom>
       </div>
-
     );
   };
 }

src/Components/Sidebar/Sidebar.tsx

@@ -3,13 +3,13 @@ import { AvailableContainer } from '../../Interfaces/AvailableContainer';
 
 interface ISidebarProps {
   componentOptions: AvailableContainer[]
-  isOpen: boolean;
-  onClick: () => void;
-  buttonOnClick: (type: string) => void;
+  isOpen: boolean
+  onClick: () => void
+  buttonOnClick: (type: string) => void
 }
 
 export default class Sidebar extends React.PureComponent<ISidebarProps> {
-  public render() {
+  public render(): JSX.Element {
     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)}>
         {componentOption.Type}

src/Components/UI/UI.tsx

@@ -0,0 +1,139 @@
+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 { IHistoryState } from '../../App';
+import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
+import FloatingButton from '../FloatingButton/FloatingButton';
+
+interface IUIProps {
+  current: IHistoryState
+  history: IHistoryState[]
+  historyCurrentStep: number
+  AvailableContainers: AvailableContainer[]
+  SelectContainer: (container: ContainerModel) => void
+  OnPropertyChange: (key: string, value: string) => void
+  AddContainer: (type: string) => void
+  SaveEditorAsJSON: () => void
+  SaveEditorAsSVG: () => void
+  LoadState: (move: number) => void
+}
+
+interface IUIState {
+  isSidebarOpen: boolean
+  isElementsSidebarOpen: boolean
+  isHistoryOpen: boolean
+}
+
+export class UI extends React.PureComponent<IUIProps, IUIState> {
+  constructor(props: IUIProps) {
+    super(props);
+    this.state = {
+      isSidebarOpen: true,
+      isElementsSidebarOpen: false,
+      isHistoryOpen: false
+    };
+  }
+
+  /**
+   * Toggle the components sidebar
+   */
+  public ToggleSidebar(): void {
+    this.setState({
+      isSidebarOpen: !this.state.isSidebarOpen
+    });
+  }
+
+  /**
+   * Toggle the elements
+   */
+  public ToggleElementsSidebar(): void {
+    this.setState({
+      isElementsSidebarOpen: !this.state.isElementsSidebarOpen
+    });
+  }
+
+  /**
+   * Toggle the elements
+   */
+  public ToggleHistory(): void {
+    this.setState({
+      isHistoryOpen: !this.state.isHistoryOpen
+    });
+  }
+
+  public render(): JSX.Element {
+    let buttonRightOffsetClasses = 'right-12';
+    if (this.state.isElementsSidebarOpen || this.state.isHistoryOpen) {
+      buttonRightOffsetClasses = 'right-72';
+    }
+    if (this.state.isHistoryOpen && this.state.isElementsSidebarOpen) {
+      buttonRightOffsetClasses = 'right-[544px]';
+    }
+
+    return (
+      <>
+        <Sidebar
+          componentOptions={this.props.AvailableContainers}
+          isOpen={this.state.isSidebarOpen}
+          onClick={() => this.ToggleSidebar()}
+          buttonOnClick={(type: string) => this.props.AddContainer(type)}
+        />
+        <button
+          className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleSidebar()}
+        >
+          &#9776; Components
+        </button>
+
+        <ElementsSidebar
+          MainContainer={this.props.current.MainContainer}
+          SelectedContainer={this.props.current.SelectedContainer}
+          isOpen={this.state.isElementsSidebarOpen}
+          isHistoryOpen={this.state.isHistoryOpen}
+          onClick={() => this.ToggleElementsSidebar()}
+          onPropertyChange={this.props.OnPropertyChange}
+          selectContainer={this.props.SelectContainer}
+        />
+        <button
+          className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleElementsSidebar()}
+        >
+          &#9776; Elements
+        </button>
+
+        <History
+          history={this.props.history}
+          historyCurrentStep={this.props.historyCurrentStep}
+          isOpen={this.state.isHistoryOpen}
+          onClick={() => this.ToggleHistory()}
+          jumpTo={this.props.LoadState}
+        />
+        <button
+          className='fixed z-10 top-4 right-72 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg'
+          onClick={() => this.ToggleHistory()}>
+            &#9776; History
+        </button>
+
+        <FloatingButton className={`fixed flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
+          <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 JSON'
+            onClick={this.props.SaveEditorAsJSON}
+          >
+            <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.props.SaveEditorAsSVG}
+          >
+            <PhotographIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+        </FloatingButton>
+      </>
+    );
+  }
+}