# Architecture

##### Model

```plantuml
@startuml
!define STYLE_RG
!includeurl https://raw.githubusercontent.com/raumgleiter/PlantUML-Style/master/PlantUML_Style.puml
!include <tupadr3/common>
!include <tupadr3/font-awesome/rocket>
@startuml
package  BackEnd{

node "NodeApp\nExpress" #LightSteelBlue
rectangle API #AAAAAA
note right #IndianRed
*start.js
*configurator.js
end note
cloud Client
database database
note right #IndianRed
*sqlHandler.js
*MariaSQL
end note
file FileServer
note right #IndianRed: fileServerManager.js

}

package  "FrontEnd"{
rectangle AJAX
rectangle PDF
note right #IndianRed: pdfCreator.js
rectangle Composing
note right #IndianRed: imageGenerator.js
rectangle WEBSite
note right #IndianRed
*constants.js
*eventHandler.js
*utilities.js
*CSS
*HTML
end note
}

API <-l-> Client
API -d-> database
API -u-> AJAX

API -d-> FileServer

AJAX -u-> PDF

AJAX -u-> Composing
AJAX -u-> WEBSite
@enduml
```

##### Files

``` plantuml
@startuml
!define STYLE_RG
!includeurl https://raw.githubusercontent.com/raumgleiter/PlantUML-Style/master/PlantUML_Style.puml
!include <tupadr3/common>
!include <tupadr3/font-awesome/rocket>
!include <tupadr3/font-awesome-5/user>

' All Skinparams: https://plantuml-documentation.readthedocs.io/en/latest/formatting/all-skin-params.html
' skinparam defaultTextAlignment center

' allowmixing
' skinparam ClassAttributeIconSize 0.1
' skinparam CircledCharacterRadius 0
' skinparam CircledCharacterFontSize 0

'-----------------------------------------------------------------------------

left to right direction

'******************************************************************************

package app {
  class routes {
    Local API to run SQL commands
  }
  class fileServerManager {
    Access to local files and images
  }
  class sqlHandler {
    Execution of SQL commands
  }
  routes --* sqlHandler
}

package public/js {
  class config {
    Mapping of URL parameters to variables
  }
  class configurator {
    Builds the data of the configurator
  }

  class constants {
    Paths and constants (e.g. ".jpg")
  }
  class eventHandler {

  }

  class imageGenerator {
    Processing of layers to final image
  }
  class pdfCreator {
    Generates the PDF
  }
  class sharing {
    Generation of a state that can be saved
  }
  class utilities {
    Commonly used functionality
  }
}

configurator --> fileServerManager
configurator --> sqlHandler
constants -- eventHandler
eventHandler -- utilities
constants -- utilities



'-----------------------------------------------------------------------------
'-----------------------------------------------------------------------------

'******************************************************************************

@enduml
```