Merge pull request #62 from cracker0dks/dependabot/npm_and_yarn/websocket-extensions-0.1.4

chore(deps): bump websocket-extensions from 0.1.3 to 0.1.4

.dockerignore

@@ -0,0 +1,2 @@
+**/node_modules
+**/git

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{*.js,*.css,*.html}]
+indent_size = 4

.github/workflows/build-docker.yml

@@ -0,0 +1,18 @@
+# This workflow will do clean build of the docker image
+
+name: Docker Image CI (also tests build)
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build the Docker image
+        run: docker build . --file Dockerfile --tag rofl256/whiteboard:$(date +%s)

.github/workflows/linting-testing-code.yml

@@ -0,0 +1,22 @@
+# This workflow will do a clean install of node dependencies and check the code style
+
+name: Linting and testing code CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - run: npm ci
+      - run: npm run style
+      - run: npm run test

.gitignore

@@ -1,3 +1,5 @@
+/config.run.yml
+
 # Logs
 logs
 *.log
@@ -11,6 +13,12 @@ pids
 *.seed
 *.pid.lock
 
+# Compilation result
+/dist
+
+# upload folder, etc.
+/public/uploads
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
@@ -56,6 +64,3 @@ typings/
 
 # dotenv environment variables file
 .env
-
-/public/uploads
-/package-lock.json

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

Dockerfile

@@ -1,4 +1,26 @@
-FROM node:11
+FROM node:12 as base
+
+# Create app directory
+RUN mkdir -p /opt/app
+WORKDIR /opt/app
+
+# Install app dependencies
+COPY ./package.json package-lock.json ./
+RUN npm ci
+
+# Bundle frontend
+COPY src ./src
+COPY assets ./assets
+COPY config ./config
+RUN npm run build
+
+
+#####################
+# Final image
+#####################
+
+FROM node:12-alpine
+ENV NODE_ENV=prod
 
 MAINTAINER cracker0dks
 
@@ -6,12 +28,11 @@ MAINTAINER cracker0dks
 RUN mkdir -p /opt/app
 WORKDIR /opt/app
 
-# Install app dependencies
-COPY ./package.json /opt/app
-RUN npm install
+COPY ./package.json ./package-lock.json config.default.yml ./
+RUN npm ci --only=prod
 
-# Bundle app source
-COPY . /opt/app
+COPY scripts ./scripts
+COPY --from=base /opt/app/dist ./dist
 
 EXPOSE 8080
-CMD [ "npm", "start" ]
+ENTRYPOINT ["node", "scripts/server.js", "--mode=production"]

README.md

@@ -1,98 +1,137 @@
 # whiteboard
+
 This is a lightweight NodeJS collaborative Whiteboard/Sketchboard witch can easily be customized...
 
-![start](https://raw.githubusercontent.com/cracker0dks/whiteboard/master/doc/start.png)
+![start](./doc/start.png)
+
+## Demowhiteboard
 
-## Demowhiteboard ##
 [HERE](https://cloud13.de/testwhiteboard/) (Reset every night)
 
+## Updating
+
+Information related to updating this app can be found [here](./doc/updating_guide.md).
+
 ## Some Features
-* Shows remote user cursors while drawing
-* Undo function for each user
-* Drag+Drop / Copy+Paste Images to Whiteboard from PC and Browsers
-* Resize, Move & Draw Images to Canvas or Background
-* Write text
-* Save Whiteboard to Image and JSON
-* Draw angle lines by pressing "shift" while drawing (with line tool)
-* Draw square by pressing "shift" while drawing (with rectangle tool)
-* Indicator that shows the smallest screen participating
-* Keybindings for ALL the functions
-* Working on PC, Tablet & Mobile
+
+- Shows remote user cursors while drawing
+- Undo / Redo function for each user
+- Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
+- Resize, Move, Rotate & Draw Images to Canvas or Background
+- Write text
+- Save Whiteboard to Image and JSON
+- Draw angle lines by pressing "shift" while drawing (with line tool)
+- Draw square by pressing "shift" while drawing (with rectangle tool)
+- Indicator that shows the smallest screen participating
+- Keybindings for ALL the functions
+- Working on PC, Tablet & Mobile
+
+## Projects using this Whiteboard
+
+- [meetzi](https://meetzi.de/) - WebRtc Conference tool
+- [Accelerator](https://github.com/cracker0dks/Accelerator) - WebRtc Conference tool
+- Your Project here...
 
 ## Install the App
+
 You can run this app with and without docker
+
 ### Without Docker
-1. install the latest NodeJs
+
+1. install the latest NodeJs (version >= 12)
 2. Clone the app
-3. Run `npm i` inside the folder
-4. Run `node server.js`
+3. Run `npm ci` inside the folder
+4. Run `npm run start:prod`
 5. Surf to http://YOURIP:8080
 
 ### With Docker
+
 1. `docker run -d -p 8080:8080 rofl256/whiteboard`
 2. Surf to http://YOURIP:8080
 
+## Development
+
+After you have installed the app, run `npm run start:dev` to start the backend and a frontend development server. The website will be accessible on http://locahost:8080.
+
 ## Default keyboard shortcuts
+
 Use keyboard shortcuts to become more productive while using Whiteboard.
 
 They are especially useful if you work with interactive displays such as XP-Pen Artist, Huion Kamvas and Wacom Cintiq. These devices have quick buttons (6-8 buttons and scrolling). By default, the buttons on these displays are mapped to standard Photoshop keyboard shortcuts. Keys can be configured to function effectively in other software.
 
-The following are predefined shortcuts that you can override in the file [/public/js/keybinds.js](https://github.com/cracker0dks/whiteboard/blob/master/public/js/keybinds.js)
+The following are predefined shortcuts that you can override in the file [./src/js/keybinds.js](./src/js/keybinds.js)
 
-Result | Windows and Linux | macOS
------- | -------------------- | -------
-Clear the whiteboard | Ctrl + Shift + Z | Command + Shift + Z
-Undo your last step | Ctrl + Z | Command + Z
-Select an area | Ctrl + X | Command + X
-Take the mouse | Ctrl + M | Command + M
-Take the pen | Ctrl + P | Command + P
-Draw a line | Ctrl + L | Command + L
-Draw a rectangle | Ctrl + R | Command + R
-Draw a circle | Ctrl + C | Command + C
-Toggle between line, rectangle and circle | Ctrl + Shift + F | Command + Shift + F
-Toggle between pen and eraser | Ctrl + Shift + X | Command + Shift + X
-Toggle between main clolors (black, blue, green, yellow and red) | Ctrl + Shift + R | Command + Shift + R
-Write text | Ctrl + A | Command + A
-Take the eraser | Ctrl + E | Command + E
-Increase thickness | Ctrl + Up Arrow | Command + Up Arrow
-Decrease thickness | Ctrl + Down Arrow | Command + Down Arrow
-Colorpicker | Ctrl + Shift + C | Command + Shift + C
-Set black color | Ctrl + Shift + 1 | Command + Shift + 1
-Set blue color | Ctrl + Shift + 2 | Command + Shift + 2
-Set green color | Ctrl + Shift + 3 | Command + Shift + 3
-Set yellow color | Ctrl + Shift + 4 | Command + Shift + 4
-Set red color | Ctrl + Shift + 5 | Command + Shift + 5
-Save whiteboard as image | Ctrl + S | Command + S
-Save whiteboard as JSON | Ctrl + Shift + K | Command + Shift + K
-Save whiteboard to WebDav | Ctrl + Shift + I (i) | Command + Shift + I (i)
-Load saved JSON to whiteboard | Ctrl + Shift + J | Command + Shift + J
-Share whiteboard | Ctrl + Shift + S | Command + Shift + S
-Hide or show toolbar | Tab | Tab
-Move selected object up | Up Arrow | Up Arrow
-Move selected object down | Down Arrow | Down Arrow
-Move selected object left | Left Arrow | Left Arrow
-Move selected object right | Right Arrow | Right Arrow
-Drop object | Ctrl + Enter | Command + Enter
-Add Image to backgroud | Shift + Enter | Shift + Enter
-Cancel all actions | Escape | Escape
-Delete selected object | Delete | Delete
+| Result                                                           | Windows and Linux    | macOS                   |
+| ---------------------------------------------------------------- | -------------------- | ----------------------- |
+| Clear the whiteboard                                             | Ctrl + Shift + Z     | Command + Shift + Z     |
+| Undo your last step                                              | Ctrl + Z             | Command + Z             |
+| Redo your last undo                                              | Ctrl + Y             | Command + Y             |
+| Select an area                                                   | Ctrl + X             | Command + X             |
+| Take the mouse                                                   | Ctrl + M             | Command + M             |
+| Take the pen                                                     | Ctrl + P             | Command + P             |
+| Draw a line                                                      | Ctrl + L             | Command + L             |
+| Draw a rectangle                                                 | Ctrl + R             | Command + R             |
+| Draw a circle                                                    | Ctrl + C             | Command + C             |
+| Toggle between line, rectangle and circle                        | Ctrl + Shift + F     | Command + Shift + F     |
+| Toggle between pen and eraser                                    | Ctrl + Shift + X     | Command + Shift + X     |
+| Toggle between main clolors (black, blue, green, yellow and red) | Ctrl + Shift + R     | Command + Shift + R     |
+| Write text                                                       | Ctrl + A             | Command + A             |
+| Take the eraser                                                  | Ctrl + E             | Command + E             |
+| Increase thickness                                               | Ctrl + Up Arrow      | Command + Up Arrow      |
+| Decrease thickness                                               | Ctrl + Down Arrow    | Command + Down Arrow    |
+| Colorpicker                                                      | Ctrl + Shift + C     | Command + Shift + C     |
+| Set black color                                                  | Ctrl + Shift + 1     | Command + Shift + 1     |
+| Set blue color                                                   | Ctrl + Shift + 2     | Command + Shift + 2     |
+| Set green color                                                  | Ctrl + Shift + 3     | Command + Shift + 3     |
+| Set yellow color                                                 | Ctrl + Shift + 4     | Command + Shift + 4     |
+| Set red color                                                    | Ctrl + Shift + 5     | Command + Shift + 5     |
+| Save whiteboard as image                                         | Ctrl + S             | Command + S             |
+| Save whiteboard as JSON                                          | Ctrl + Shift + K     | Command + Shift + K     |
+| Save whiteboard to WebDav                                        | Ctrl + Shift + I (i) | Command + Shift + I (i) |
+| Load saved JSON to whiteboard                                    | Ctrl + Shift + J     | Command + Shift + J     |
+| Share whiteboard                                                 | Ctrl + Shift + S     | Command + Shift + S     |
+| Hide or show toolbar                                             | Tab                  | Tab                     |
+| Move selected object up                                          | Up Arrow             | Up Arrow                |
+| Move selected object down                                        | Down Arrow           | Down Arrow              |
+| Move selected object left                                        | Left Arrow           | Left Arrow              |
+| Move selected object right                                       | Right Arrow          | Right Arrow             |
+| Drop object                                                      | Ctrl + Enter         | Command + Enter         |
+| Add Image to backgroud                                           | Shift + Enter        | Shift + Enter           |
+| Cancel all actions                                               | Escape               | Escape                  |
+| Delete selected object                                           | Delete               | Delete                  |
+| Use Line tool when pen is active (Not changeable)                | Shift (Hold)         | Shift (Hold)            |
 
 ## URL Parameters
+
 Call your site with GET parameters to change the WhiteboardID or the Username
 
 `http://YOURIP:8080?whiteboardid=MYID&username=MYNAME`
 
-* whiteboardid => All people with the same ID are drawing on the same board
-* username => The name witch is showing to others while drawing
-* title => Change the name of the Browser Tab
-* randomid => if set to true, a random whiteboardId will be generated if not given aswell
+- whiteboardid => All people with the same ID are drawing on the same board
+- username => The name witch is showing to others while drawing
+- title => Change the name of the Browser Tab
+- randomid => if set to true, a random whiteboardId will be generated if not given aswell
 
-## Security - AccessToken (Optional)
-To prevent clients who might know or guess the base URL from abusing the server to upload files and stuff..., you can set an accesstoken at server start.
+## Configuration
 
-<b>Server (Without docker):</b> `node server.js --accesstoken="mySecToken"`
+Many settings of this project can be set using a simple `yaml` file, to change some behaviors or tweak performances.
 
-<b>Server (With docker):</b> `docker run -d -e accesstoken="mySecToken" -p 8080:8080 rofl256/whiteboard`
+### Config. file
+
+To run the project with custom settings:
+
+1. Create a `config.run.yml` file based on the content of [`config.default.yml`](./config.default.yml),
+2. Change the settings,
+3. Run the project with your custom configuration (it will be merged into the default one):
+
+- locally: `node scripts/server.js --config=./config.run.yml`
+- docker: `docker run -d -p 8080:8080 -v $(pwd)/config.run.yml:/config.run.yml:ro rofl256/whiteboard --config=/config.run.yml`
+
+### Highlights
+
+#### Security - AccessToken (Optional)
+
+To prevent clients who might know or guess the base URL from abusing the server to upload files and stuff..., you can set an accesstoken at server start (see [here](./config.default.yml)).
 
 Then set the same token on the client side as well:
 
@@ -100,14 +139,11 @@ Then set the same token on the client side as well:
 
 Done!
 
-## WebDAV (Optional)
+#### WebDAV (Optional)
+
 This function allows your users to save the whiteboard directly to a webdav server (Nextcloud) as image without downloading it.
 
-To enable it:
-
-<b>Server (Without docker):</b> `node server.js --webdav=true`
-
-<b>Server (With docker):</b> `docker run -d -e webdav=true -p 8080:8080 rofl256/whiteboard`
+To enable set `enableWebdav` to `true` in the [configuration](./config.default.yml).
 
 Then set the same parameter on the client side as well:
 
@@ -119,21 +155,23 @@ Note: For the most owncloud/nextcloud setups you have to set the WebDav-Server U
 
 Done!
 
+### And many more (performance, etc.)
+
+Many more settings can be tweaked. All of them are described in the [default config file](./config.default.yml).
 
 ## Things you may want to know
-* Whiteboards are gone if you restart the Server, so keep that in mind (or save your whiteboard)
-* You shoud be able to customize the layout without ever toutching the whiteboard.js (take a look at index.html & main.js)
 
-## All server start parameters (also docker)
-* accesstoken => take a look at "Security - AccessToken" for a full explanation
-* disablesmallestscreen => set this to "true" if you don't want show the "smallest screen" indicator (A dotted gray line) to the users
-* webdav => Enable the function to save to a webdav-server (Must also be enabled on the client; Take a look at the webdav section)
+- Whiteboards are gone if you restart the Server, so keep that in mind (or save your whiteboard)
+- You should be able to customize the layout without ever touching the whiteboard.js (take a look at index.html & main.js)
 
 ## ToDo
-* Make undo function more reliable on texts
+
+- Make undo function more reliable on texts
 
 ## Nginx Reverse Proxy configuration
+
 Add this to your server part:
+
 ```
     location /whiteboard/ {
         proxy_set_header HOST $host;
@@ -143,22 +181,22 @@ Add this to your server part:
         proxy_pass http://YOURIP:8080/;
     }
 ```
+
 To run it at /whiteboard. Don't forget to change -> YOURIP!
 
 ## Nextcloud integration
+
 1. Install this app on your server
 2. Enable and go to "external sites" (app) on your Nextcloud
-2. Add a link to your server: `https://YOURIP/whiteboard/?whiteboardid=WHITEBOARDNAME&username={uid}`
-You can give each group its own whiteboard by changeing the WHITEBOARDNAME in the URL if you want.
+3. Add a link to your server: `https://YOURIP/whiteboard/?whiteboardid=WHITEBOARDNAME&username={uid}`
+   You can give each group its own whiteboard by changeing the WHITEBOARDNAME in the URL if you want.
 
 Note: You might have to serve the app with https (If your nextcloud server runs https). To do so, its recommend to run this app behind a reverse proxy. (as shown above)
 
 #### (Optional) Set whiteboard icon in nextcloud
+
 ![start](https://raw.githubusercontent.com/cracker0dks/whiteboard/master/doc/iconPrev.jpg)
 
 Upload both icons present at /doc/nextcloud_icons/ to your nextcloud at the "external sites" admin section. Then set it as symbol on your link.
 
-
-
-
-___ MIT License ___
+**_ MIT License _**

config.default.yml

@@ -0,0 +1,54 @@
+# Backend configuration
+backend:
+  # Access token required for interacting with the server -- string (empty string for no restrictions)
+  accessToken: ""
+
+  # Enable the function to save to a webdav-server (check README for more info) -- boolean
+  enableWebdav: false
+
+  # Backend performance tweaks
+  performance:
+    # Whiteboard information broadcasting frequency (in Hz i.e. /s) -- number
+    # => diminishing this will result in more latency
+    whiteboardInfoBroadcastFreq: 1
+
+# Frontend configuration
+frontend:
+  # When a whiteboard is loaded on a client
+  onWhiteboardLoad:
+    # should an (editable) whiteboard be started in read-only mode by default -- boolean
+    setReadOnly: false
+
+    # should the whiteboard info be displayed by default -- boolean
+    displayInfo: false
+
+  # Show the smallest screen indicator ? (with dotted lines) -- boolean
+  showSmallestScreenIndicator: true
+
+  # Image download format, can be "png", "jpeg" (or "webp" -> only working on chrome) -- string
+  imageDownloadFormat: "png"
+
+  # draw the background grid to images on download ? (If True, even PNGs are also not transparent anymore) -- boolean
+  drawBackgroundGrid: false
+
+  # Background Image; Can be "bg_grid.png" or "bg_dots.png"  -- string
+  backgroundGridImage: "bg_grid.png"
+
+  # Frontend performance tweaks
+  performance:
+    # Refresh frequency of the debug / info div (in Hz i.e. /s) -- number
+    refreshInfoFreq: 5
+
+    # Throttling of pointer events (except drawing related) -- array of object (one must have fromUserCount == 0)
+    # Throttling of events can be defined for different user count levels
+    # Throttling consist of skipping certain events (i.e. not broadcasting them to others)
+    pointerEventsThrottling:
+      - # User count from which the specific throttling is applied -- number
+        fromUserCount: 0
+        # Min screen distance (in pixels) below which throttling is applied
+        minDistDelta: 1
+        # Maximum frequency above which throttling is applied
+        maxFreq: 30
+      - fromUserCount: 10
+        minDistDelta: 5
+        maxFreq: 10

config/webpack.base.js

@@ -0,0 +1,59 @@
+const webpack = require("webpack");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+const config = {
+    entry: {
+        main: ["./src/js/index.js"],
+    },
+    output: {
+        path: path.join(__dirname, "..", "dist"),
+        filename: "[name]-[hash].js",
+    },
+    resolve: {
+        extensions: ["*", ".json", ".js"],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js)$/,
+                exclude: /node_modules/,
+                loader: "babel-loader",
+                options: {
+                    compact: true,
+                },
+            },
+            {
+                test: /\.css$/,
+                use: ["style-loader", "css-loader"],
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                    {
+                        loader: "file-loader",
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery",
+            "window.jQuery": "jquery",
+            "window.$": "jquery",
+        }),
+        new CopyPlugin([{ from: "assets", to: "" }]),
+        new HtmlWebpackPlugin({
+            template: "src/index.html",
+            minify: false,
+            inject: true,
+        }),
+    ],
+};
+
+module.exports = config;

config/webpack.build.js

@@ -0,0 +1,11 @@
+const merge = require("webpack-merge");
+const baseConfig = require("./webpack.base");
+
+module.exports = merge(baseConfig, {
+    mode: "production",
+    optimization: {
+        minimize: true,
+        nodeEnv: "production",
+    },
+    devtool: false,
+});

config/webpack.dev.js

@@ -0,0 +1,18 @@
+const merge = require("webpack-merge");
+const baseConfig = require("./webpack.base");
+const webpack = require("webpack");
+
+const devConfig = merge(baseConfig, {
+    mode: "development",
+    devtool: "eval-source-map",
+    optimization: {
+        minimize: false,
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NamedModulesPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
+    ].concat(baseConfig.plugins),
+});
+
+module.exports = devConfig;

doc/updating_guide.md

@@ -0,0 +1,13 @@
+# Updating guide
+
+## From v1.x to 2.x (or latest)
+
+Configuration handling has been updated: the ability to change settings from the CLI or the environment has been removed.
+
+**Configuration is now handled with a yml config file**, which can be overridden with the `--config` CLI argument.
+
+Here is the mapping from old cli argument / env variables to the new config file object:
+
+- accesstoken => `backend.accessToken`
+- webdav => `backend.enableWebdav`
+- disablesmallestscreen => `frontend.showSmallestScreenIndicator`

docker-compose.yml

@@ -0,0 +1,8 @@
+version: "3.1"
+services:
+  whiteboard:
+    image: rofl256/whiteboard
+    restart: always
+    ports:
+      - "8080:8080/tcp"
+    command: --config=./config.default.yml

package.json

@@ -5,8 +5,13 @@
   "main": "server.js",
   "directories": {},
   "scripts": {
-    "test": "echo \"No tests needed!\" && exit 1",
-    "start": "node server.js"
+    "build": "webpack --config config/webpack.build.js",
+    "start:dev": "node scripts/server.js --mode=development",
+    "start:prod": "npm run build && node scripts/server.js --mode=production",
+    "test": "jest",
+    "pretty-quick": "pretty-quick",
+    "format": "prettier --write .",
+    "style": "prettier --check ."
   },
   "repository": {
     "type": "git",
@@ -17,15 +22,79 @@
     "Sketchboard",
     "lightweight"
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
   "dependencies": {
+    "ajv": "6.12.2",
     "dompurify": "^2.0.7",
     "express": "4.*",
     "formidable": "1.*",
     "fs-extra": "7.*",
+    "html2canvas": "^1.0.0-rc.5",
+    "jquery-ui-rotatable": "^1.1.0",
+    "js-yaml": "3.13.1",
     "jsdom": "^14.0.0",
+    "pdfjs-dist": "^2.3.200",
     "socket.io": "2.*",
+    "uuid": "^8.1.0",
     "webdav": "^2.8.0"
   },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.5",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-minify": "^0.5.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.5.2",
+    "html-webpack-plugin": "^4.2.0",
+    "husky": "^4.2.5",
+    "jest": "26.0.1",
+    "jquery": "^3.2.1",
+    "jquery-ui": "^1.12.1",
+    "keymage": "^1.1.3",
+    "prettier": "^2.0.5",
+    "pretty-quick": "^2.0.1",
+    "style-loader": "^1.1.4",
+    "vanilla-picker": "^2.10.1",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^4.2.2"
+  },
   "author": "Cracker0dks",
-  "license": "MIT"
+  "license": "MIT",
+  "private": true,
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-class-properties"
+      ]
+    ]
+  }
 }

public/css/main.css

@@ -1,98 +0,0 @@
-body {
-    position: relative;
-    margin: 0px;
-    height: calc(var(--vh, 1vh) * 100);
-    width: 100%;
-    overflow: hidden;
-}
-
-#whiteboardContainer {
-    height: calc(var(--vh, 1vh) * 100);
-    width: 100%;
-}
-
-.btn-group button {
-    background: transparent;
-    border: 1px solid #636060;
-    /* Green border */
-    color: black;
-    /* White text */
-    padding: 11px 14px;
-    /* Some padding */
-    cursor: pointer;
-    /* Pointer/hand icon */
-    float: left;
-    /* Float the buttons side by side */
-    font-size: 1.2em;
-    height: 45px;
-}
-
-button::-moz-focus-inner {
-    border: 0;
-}
-
-.btn-group button:not(:last-child) {
-    border-right: none;
-    /* Prevent double borders */
-}
-
-/* Clear floats (clearfix hack) */
-
-.btn-group:after {
-    content: "";
-    clear: both;
-    display: table;
-}
-
-/* Add a background color on hover */
-
-.btn-group button:hover {
-    background-color: #9a9a9a;
-}
-
-button {
-    outline-width: 0;
-}
-
-.btn-group {
-    background-color: #808080ab;
-    margin-left: 5px;
-    float: left;
-    position: relative;
-}
-
-.whiteboardTool.active {
-    background: #bfbfbf;
-}
-
-#whiteboardThicknessSlider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 10px;
-    border-radius: 3px;
-    background: transparent;
-    outline: none;
-    opacity: 1;
-    -webkit-transition: opacity .15s ease-in-out;
-    transition: opacity .15s ease-in-out;
-}
-
-.textBox.active {
-    border: 1px dashed gray;
-}
-
-.textBox>.removeIcon, .textBox>.moveIcon {
-    display: none;
-}
-
-.textBox.active>.removeIcon, .textBox.active>.moveIcon {
-    display: block;
-}
-
-.modalBtn {
-    padding: 5px;
-    border-radius: 5px;
-    border: 0px;
-    min-width: 50px;
-    cursor: pointer;
-}

public/index.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<title>Whiteboard</title>
-	<meta charset="utf-8" />
-
-	<!--- jquery and dragabbles -!-->
-	<script type="text/javascript" src="./js/libs/jquery-3.2.1.min.js"></script>
-	<script type="text/javascript" src="./js/libs/jquery-ui.min.js"></script>
-	<!--- For icons -!-->
-	<script type="text/javascript" src="./js/libs/fontawseome5.8.1.min.js"></script>
-	<!--- Socket connection -!-->
-	<script type="text/javascript" src="./js/libs/socketio2.0.4.min.js"></script>
-	<!--- Colorpicker -!-->
-	<script type="text/javascript" src="./js/libs/jqColorPicker.min.js"></script>
-	<!--- For keybindings -!-->
-	<script type="text/javascript" src="./js/libs/keymage.min.js"></script>
-
-	<script type="text/javascript" src="./js/keybinds.js"></script>
-	<script type="text/javascript" src="./js/whiteboard.js"></script>
-	<script type="text/javascript" src="./js/main.js"></script>
-
-	<!--- CSS References -!-->
-	<link rel="stylesheet" href="./css/jquery-ui.min.css">
-	<link href="./css/main.css" rel="stylesheet">
-
-	<!--- Set width for Mobile Devices -!-->
-	<script>
-		//Set correct width height on mobile browsers
-		var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-		if (isChrome) {
-			$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />');
-		} else {
-			$('head').append('<meta name="viewport" content="width=1400" />');
-		}
-	</script>
-</head>
-
-<body>
-	<!---Whiteboard container -!-->
-	<div id="whiteboardContainer"></div>
-
-	<!---Toolbar -!-->
-	<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
-		<div class="btn-group">
-			<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn">
-				<i class="fa fa-trash"></i>
-			</button>
-			<button style="position:absolute; left:0px; top:0px; width: 46px; display:none;"
-				id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn">
-				<i class="fa fa-check"></i>
-			</button>
-			<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn">
-				<i class="fa fa-undo"></i>
-			</button>
-		</div>
-
-		<div class="btn-group">
-			<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
-				<i class="fa fa-mouse-pointer"></i>
-			</button>
-			<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button"
-				class="whiteboardTool">
-				<img src="./images/dottedRec.png">
-			</button>
-			<button tool="pen" title="Take the pen" type="button" class="whiteboardTool active">
-				<i class="fa fa-pencil-alt"></i>
-			</button>
-			<button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button"
-				class="whiteboardTool">
-				╱
-			</button>
-			<button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool">
-				<i class="far fa-square"></i>
-			</button>
-			<button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
-				<i class="far fa-circle"></i>
-			</button>
-			<button tool="text" title="write text" type="button" class="whiteboardTool">
-				<i class="fas fa-font"></i>
-			</button>
-			<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
-				<i class="fa fa-eraser"></i>
-			</button>
-		</div>
-
-		<div class="btn-group">
-			<button style="width: 190px; cursor:default;">
-				<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i
-						class="fa fa-pencil-alt"></i></div>
-				<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;"
-					src="./images/slider-background.svg">
-				<input title="Thickness" id="whiteboardThicknessSlider"
-					style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50"
-					value="3">
-				<div title="Colorpicker"
-					style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;">
-					<div id="whiteboardColorpicker" value="#000000"
-						style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;">
-					</div>
-				</div>
-			</button>
-		</div>
-
-		<div class="btn-group">
-			<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
-				<i class="fas fa-image"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-save"></i>
-			</button>
-			<button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav"
-				type="button" class="whiteboardBtn">
-
-				<i class="fas fa-globe"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-save"></i>
-			</button>
-			<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button"
-				class="whiteboardBtn">
-				<i class="far fa-file-alt"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-save"></i>
-			</button>
-		</div>
-
-		<div class="btn-group">
-			<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
-				<i class="fas fa-image"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-upload"></i>
-			</button>
-
-			<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button"
-				class="whiteboardBtn">
-
-				<i class="far fa-file-alt"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-upload"></i>
-			</button>
-			<input style="display:none;" id="myFile" type="file" />
-
-			<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
-				<i class="fas fa-share-square"></i>
-			</button>
-		</div>
-
-		<div class="btn-group minGroup">
-			<button style="width: 25px;	padding: 11px 11px;" id="minMaxBtn" title="hide buttons" type="button">
-				<i id="minBtn" style="position:relative; left:-5px;" class="fas fa-angle-left"></i>
-				<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
-			</button>
-		</div>
-</body>
-
-</html>

public/js/keybinds.js

@@ -1,45 +0,0 @@
-/* -----------
- KEYBINDINGS
------------ */ 
-
-//> defmod is "command" on OS X and "ctrl" elsewhere
-//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j. 
-
-var keybinds = {
-    // 'key(s)' : 'function',
-    'defmod-shift-z' : 'clearWhiteboard',
-    'defmod-z' : 'undoStep', 
-    'defmod-x' : 'setTool_recSelect',
-    'defmod-m' : 'setTool_mouse',
-    'defmod-p' : 'setTool_pen',
-    'defmod-l' : 'setTool_line',
-    'defmod-r' : 'setTool_rect',
-    'defmod-c' : 'setTool_circle',
-    'defmod-shift-f' : 'toggleLineRecCircle',
-    'defmod-shift-x' : 'togglePenEraser',
-    'defmod-shift-r' : 'toggleMainColors',
-    'defmod-a' : 'setTool_text',
-    'defmod-e' : 'setTool_eraser',
-    'defmod-up' : 'thickness_bigger',
-    'defmod-down' : 'thickness_smaller',
-    'defmod-shift-c' : 'openColorPicker',
-    'defmod-shift-1' : 'setDrawColorBlack',
-    'defmod-shift-2' : 'setDrawColorBlue',
-    'defmod-shift-3' : 'setDrawColorGreen',
-    'defmod-shift-4' : 'setDrawColorYellow',
-    'defmod-shift-5' : 'setDrawColorRed',
-    'defmod-s' : 'saveWhiteboardAsImage',
-    'defmod-shift-k' : 'saveWhiteboardAsJson',
-    'defmod-shift-i' : 'uploadWhiteboardToWebDav',
-    'defmod-shift-j' : 'uploadJsonToWhiteboard',
-    'defmod-shift-s' : 'shareWhiteboard',
-    'tab' : 'hideShowControls',
-    'up' : 'moveDraggableUp',
-    'down' : 'moveDraggableDown',
-    'left' : 'moveDraggableLeft',
-    'right' : 'moveDraggableRight',
-    'defmod-enter' : 'dropDraggable',
-    'shift-enter' : 'addToBackground',
-    'escape' : 'cancelAllActions',
-    'del' : 'deleteSelection'
-}

public/js/libs/keymage.min.js

@@ -1,14 +0,0 @@
-/*
-
- keymage.js - Javascript keyboard bindings handling
- http://github.com/piranha/keymage
-
- (c) 2012-2016 Alexander Solovyov under terms of ISC License
-*/
-(function(h,u){h(function(){function h(b){var a=b.split(/-(?!$)/),c=a[a.length-1],e={code:l[c]};if(!e.code)throw'Unknown key "'+c+'" in keystring "'+b+'"';for(var f,d=0;d<a.length-1;d++){c=a[d];f=z[c];if(!f)throw'Unknown modifier "'+c+'" in keystring "'+b+'"';e[f]=!0}return e}function q(b){for(var a="",c=0;c<r.length;c++)b[r[c]]&&(a+=r[c]+"-");return a+=n[b.code]}function A(b){for(var a=[],c=b.split(" "),e=0;e<c.length;e++){var f=h(c[e]),f=q(f);a.push(f)}a.original=b;return a}function B(b){for(var a=
-    {code:b.keyCode},c=0;c<v.length;c++){var e=v[c];b[e]&&(a[e.slice(0,e.length-3)]=!0)}return q(a)}function w(b,a,c){b=b.split(".");var e=s;b=b.concat(a);a=0;for(var f=b.length;a<f;a++){var d=b[a];if(d&&(e=e[d]||(e[d]={}),c&&c._keymage.preventDefault&&(e.preventDefault=!0),a===f-1))return e.handlers||(e.handlers=[])}}function C(b,a,c){w(b,a,c).push(c)}function x(b,a,c){b=w(b,a);c=b.indexOf(c);~c&&b.splice(c,1)}function y(b,a,c,e){if(a===u&&c===u)return function(a,c){return g(b,a,c)};"function"===typeof a&&
-    (e=c,c=a,a=b,b="");a=A(a);return[b,a,c,e]}function g(b,a,c,e){var d=y(b,a,c,e);c=d[2];e=d[3];c._keymage=e||{};c._keymage.original=a;C.apply(null,d);return function(){x.apply(null,d)}}var v=["shiftKey","ctrlKey","altKey","metaKey"],z={shift:"shift",ctrl:"ctrl",control:"ctrl",alt:"alt",option:"alt",win:"meta",cmd:"meta","super":"meta",meta:"meta",defmod:"undefined"!==typeof navigator&&~navigator.userAgent.indexOf("Mac OS X")?"meta":"ctrl"},r=["shift","ctrl","alt","meta"],D=[16,17,18,91],l={backspace:8,
-    tab:9,enter:13,"return":13,pause:19,caps:20,capslock:20,escape:27,esc:27,space:32,pgup:33,pageup:33,pgdown:34,pagedown:34,end:35,home:36,ins:45,insert:45,del:46,"delete":46,left:37,up:38,right:39,down:40,"*":106,"+":107,plus:107,minus:109,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},d;for(d=0;10>d;d++)l["num-"+d]=d+95;for(d=0;10>d;d++)l[""+d]=d+48;for(d=1;25>d;d++)l["f"+d]=d+111;for(d=65;91>d;d++)l[String.fromCharCode(d).toLowerCase()]=d;var n={},p;for(p in l)if(d=
-    l[p],!n[d]||n[d].length<p.length)n[d]=p;var k="",s={},t=[];g.unbind=function(b,a,c){b=y(b,a,c);x.apply(null,b)};g.parse=h;g.stringify=q;g.bindings=s;g.setScope=function(b){k=b?b:""};g.getScope=function(){return k};g.pushScope=function(b){return k=(k?k+".":"")+b};g.popScope=function(b){var a;if(!b)return a=k.lastIndexOf("."),b=k.slice(a+1),k=-1==a?"":k.slice(0,a),b;k=k.replace(RegExp("(^|\\.)"+b+"(\\.|$).*"),"");return b};g.version="1.1.3";window.addEventListener("keydown",function(b){if(!~D.indexOf(b.keyCode)){var a=
-    t.slice();a.push(B(b));for(var c=k.split("."),d,f,g,m=c.length;0<=m;m--){f=s;g=c.slice(0,m);for(var h=0;h<g.length;h++){var l=g[h];l&&(f=f[l]);if(!f)break}if(f){d=!0;for(h=0;h<a.length;h++){g=a[h];if(!f[g]){d=!1;break}f=f[g]}if(d)break}}c=c.slice(0,m).join(".");g=f.preventDefault;if(d&&!f.handlers)t=a,g&&b.preventDefault();else{if(d)for(m=0;m<f.handlers.length;m++)a=f.handlers[m],d=a._keymage,(!1===a.call(d.context,b,{shortcut:d.original,scope:k,definitionScope:c})||g)&&b.preventDefault();t=[]}}},
-    !1);return g})})("undefined"!==typeof define?define:function(h){"undefined"!==typeof module?module.exports=h():window.keymage=h()});    

public/js/main.js

@@ -1,677 +0,0 @@
-var whiteboardId = getQueryVariable("whiteboardid");
-var randomid = getQueryVariable("randomid");
-if (randomid && !whiteboardId) { //set random whiteboard on empty whiteboardid
-    whiteboardId = Array(2).fill(null).map(() => Math.random().toString(36).substr(2)).join('');
-    const urlParams = new URLSearchParams(window.location.search);
-    urlParams.set('whiteboardid', whiteboardId);
-    window.location.search = urlParams;
-}
-
-whiteboardId = whiteboardId || "myNewWhiteboard";
-whiteboardId = unescape(encodeURIComponent(whiteboardId)).replace(/[^a-zA-Z0-9 ]/g, "");
-var myUsername = getQueryVariable("username");
-var accessToken = getQueryVariable("accesstoken");
-myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6);
-accessToken = accessToken || "";
-var accessDenied = false;
-
-// Custom Html Title
-var title = getQueryVariable("title");
-if (!title === false) {
-    document.title = decodeURIComponent(title);
-}
-
-var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
-var signaling_socket = null;
-var urlSplit = url.split("/");
-var subdir = "";
-for (var i = 3; i < urlSplit.length; i++) {
-    subdir = subdir + '/' + urlSplit[i];
-}
-if (subdir != "") {
-    signaling_socket = io("", { "path": subdir + "/socket.io" }); //Connect even if we are in a subdir behind a reverse proxy
-} else {
-    signaling_socket = io();
-}
-
-signaling_socket.on('connect', function () {
-    console.log("Websocket connected!");
-
-    signaling_socket.on('drawToWhiteboard', function (content) {
-        whiteboard.handleEventsAndData(content, true);
-    });
-
-    signaling_socket.on('refreshUserBadges', function () {
-        whiteboard.refreshUserBadges();
-    });
-
-    signaling_socket.on('wrongAccessToken', function () {
-        if (!accessDenied) {
-            accessDenied = true;
-            showBasicAlert("Access denied! Wrong accessToken!")
-        }
-    });
-
-    signaling_socket.on('updateSmallestScreenResolution', function (widthHeight) {
-        whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]);
-    });
-
-    signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
-});
-
-$(document).ready(function () {
-    if (getQueryVariable("webdav") == "true") {
-        $("#uploadWebDavBtn").show();
-    }
-    whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
-        whiteboardId: whiteboardId,
-        username: btoa(myUsername),
-        sendFunction: function (content) {
-            content["at"] = accessToken;
-            signaling_socket.emit('drawToWhiteboard', content);
-        }
-    });
-
-    // request whiteboard from server
-    $.get(subdir + "/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(function (data) {
-        whiteboard.loadData(data)
-    });
-
-    $(window).resize(function () {
-        signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
-    })
-
-    /*----------------/
-	Whiteboard actions
-    /----------------*/
-
-    //Handle key actions
-    $(document).on("keydown", function (e) {
-        if (e.which == 16) {
-            whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
-        }
-        //console.log(e.which);
-    });
-    $(document).on("keyup", function (e) {
-        if (e.which == 16) {
-            whiteboard.pressedKeys["shift"] = false;
-        }
-    });
-
-    var shortcutFunctions = {
-        clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
-        undoStep: function () { whiteboard.undoWhiteboardClick(); },
-        setTool_mouse: function () { $(".whiteboardTool[tool=mouse]").click(); },
-        setTool_recSelect: function () { $(".whiteboardTool[tool=recSelect]").click(); },
-        setTool_pen: function () {
-            $(".whiteboardTool[tool=pen]").click();
-            whiteboard.redrawMouseCursor();
-        },
-        setTool_line: function () { $(".whiteboardTool[tool=line]").click(); },
-        setTool_rect: function () { $(".whiteboardTool[tool=rect]").click(); },
-        setTool_circle: function () { $(".whiteboardTool[tool=circle]").click(); },
-        setTool_text: function () { $(".whiteboardTool[tool=text]").click(); },
-        setTool_eraser: function () {
-            $(".whiteboardTool[tool=eraser]").click();
-            whiteboard.redrawMouseCursor();
-        },
-        thickness_bigger: function () {
-            var thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
-            $("#whiteboardThicknessSlider").val(thickness);
-            whiteboard.setStrokeThickness(thickness);
-            whiteboard.redrawMouseCursor();
-        },
-        thickness_smaller: function () {
-            var thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
-            $("#whiteboardThicknessSlider").val(thickness);
-            whiteboard.setStrokeThickness(thickness);
-            whiteboard.redrawMouseCursor();
-        },
-        openColorPicker: function () { $("#whiteboardColorpicker").click(); },
-        saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
-        saveWhiteboardAsJson: function () { $("#saveAsJSONBtn").click(); },
-        uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
-        uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
-        shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
-        hideShowControls: function () { $("#minMaxBtn").click(); },
-
-        setDrawColorBlack: function () {
-            whiteboard.setDrawColor("black");
-            whiteboard.redrawMouseCursor();
-            $("#whiteboardColorpicker").css({ "background": "black" });
-        },
-        setDrawColorRed: function () {
-            whiteboard.setDrawColor("red");
-            whiteboard.redrawMouseCursor();
-            $("#whiteboardColorpicker").css({ "background": "red" });
-        },
-        setDrawColorGreen: function () {
-            whiteboard.setDrawColor("green");
-            whiteboard.redrawMouseCursor();
-            $("#whiteboardColorpicker").css({ "background": "green" });
-        },
-        setDrawColorBlue: function () {
-            whiteboard.setDrawColor("blue");
-            whiteboard.redrawMouseCursor();
-            $("#whiteboardColorpicker").css({ "background": "blue" });
-        },
-        setDrawColorYellow: function () {
-            whiteboard.setDrawColor("yellow");
-            whiteboard.redrawMouseCursor();
-            $("#whiteboardColorpicker").css({ "background": "yellow" });
-        },
-
-        toggleLineRecCircle: function () {
-            var activeTool = $(".whiteboardTool.active").attr("tool");
-            if (activeTool == "line") {
-                $(".whiteboardTool[tool=rect]").click();
-            } else if (activeTool == "rect") {
-                $(".whiteboardTool[tool=circle]").click();
-            } else {
-                $(".whiteboardTool[tool=line]").click();
-            }
-        },
-        togglePenEraser: function () {
-            var activeTool = $(".whiteboardTool.active").attr("tool");
-            if (activeTool == "pen") {
-                $(".whiteboardTool[tool=eraser]").click();
-            } else {
-                $(".whiteboardTool[tool=pen]").click();
-            }
-        },
-        toggleMainColors: function () {
-            var bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
-            if (bgColor == "blue") {
-                shortcutFunctions.setDrawColorGreen();
-            } else if (bgColor == "green") {
-                shortcutFunctions.setDrawColorYellow();
-            } else if (bgColor == "yellow") {
-                shortcutFunctions.setDrawColorRed();
-            } else if (bgColor == "red") {
-                shortcutFunctions.setDrawColorBlack();
-            } else {
-                shortcutFunctions.setDrawColorBlue();
-            }
-        },
-
-        moveDraggableUp: function () {
-            var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            var p = $(elm).position();
-            $(elm).css({ top: p.top - 5, left: p.left })
-        },
-        moveDraggableDown: function () {
-            var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            var p = $(elm).position();
-            $(elm).css({ top: p.top + 5, left: p.left })
-        },
-        moveDraggableLeft: function () {
-            var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            var p = $(elm).position();
-            $(elm).css({ top: p.top, left: p.left - 5 })
-        },
-        moveDraggableRight: function () {
-            var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-            var p = $(elm).position();
-            $(elm).css({ top: p.top, left: p.left + 5 })
-        },
-        dropDraggable: function () {
-            $($(".dragMe")[0]).find('.addToCanvasBtn').click();
-        },
-        addToBackground: function () {
-            $($(".dragMe")[0]).find('.addToBackgroundBtn').click();
-        },
-        cancelAllActions: function () { whiteboard.escKeyAction(); },
-        deleteSelection: function () { whiteboard.delKeyAction(); },
-    }
-
-    //Load keybindings from keybinds.js to given functions
-    for (var i in keybinds) {
-        if (shortcutFunctions[keybinds[i]]) {
-            keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true });
-        } else {
-            console.error("function you want to keybind on key:", i, "named:", keybinds[i], "is not available!")
-        }
-    }
-
-    // whiteboard clear button
-    $("#whiteboardTrashBtn").click(function () {
-        $("#whiteboardTrashBtnConfirm").show().focus();
-        $(this).css({ visibility: "hidden" });
-    });
-
-    $("#whiteboardTrashBtnConfirm").mouseout(function () {
-        $(this).hide();
-        $("#whiteboardTrashBtn").css({ visibility: "inherit" });
-    });
-
-    $("#whiteboardTrashBtnConfirm").click(function () {
-        $(this).hide();
-        $("#whiteboardTrashBtn").css({ visibility: "inherit" });
-        whiteboard.clearWhiteboard();
-    });
-
-    // undo button
-    $("#whiteboardUndoBtn").click(function () {
-        whiteboard.undoWhiteboardClick();
-    });
-
-    // switch tool
-    $(".whiteboardTool").click(function () {
-        $(".whiteboardTool").removeClass("active");
-        $(this).addClass("active");
-        var activeTool = $(this).attr("tool");
-        whiteboard.setTool(activeTool);
-        if (activeTool == "mouse" || activeTool == "recSelect") {
-            $(".activeToolIcon").empty();
-        } else {
-            $(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
-        }
-    });
-
-    // upload image button
-    $("#addImgToCanvasBtn").click(function () {
-        showBasicAlert("Please drag the image into the browser.");
-    });
-
-    // save image as png
-    $("#saveAsImageBtn").click(function () {
-        var imgData = whiteboard.getImageDataBase64();
-
-        var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
-        setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
-            var a = document.createElement('a');
-            a.href = imgData;
-            a.download = 'whiteboard.png';
-            w.document.body.appendChild(a);
-            a.click();
-            w.document.body.removeChild(a);
-            setTimeout(function () { w.close(); }, 100);
-        }, 0);
-    });
-
-    // save image to json containing steps
-    $("#saveAsJSONBtn").click(function () {
-        var imgData = whiteboard.getImageDataJson();
-
-        var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
-        setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
-            var a = document.createElement('a');
-            a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' }));
-            a.download = 'whiteboard.json';
-            w.document.body.appendChild(a);
-            a.click();
-            w.document.body.removeChild(a);
-            setTimeout(function () { w.close(); }, 100);
-        }, 0);
-    });
-
-    $("#uploadWebDavBtn").click(function () {
-        if ($(".webdavUploadBtn").length > 0) {
-            return;
-        }
-
-        var webdavserver = localStorage.getItem('webdavserver') || ""
-        var webdavpath = localStorage.getItem('webdavpath') || "/"
-        var webdavusername = localStorage.getItem('webdavusername') || ""
-        var webdavpassword = localStorage.getItem('webdavpassword') || ""
-        var webDavHtml = $('<div>' +
-            '<table>' +
-            '<tr>' +
-            '<td>Server URL:</td>' +
-            '<td><input class="webdavserver" type="text" value="' + webdavserver + '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
-            '<td></td>' +
-            '</tr>' +
-            '<tr>' +
-            '<td>Path:</td>' +
-            '<td><input class="webdavpath" type="text" placeholder="folder" value="' + webdavpath + '"></td>' +
-            '<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
-            '</tr>' +
-            '<tr>' +
-            '<td>Username:</td>' +
-            '<td><input class="webdavusername" type="text" value="' + webdavusername + '" placeholder="username"></td>' +
-            '<td style="font-size: 0.7em;"></td>' +
-            '</tr>' +
-            '<tr>' +
-            '<td>Password:</td>' +
-            '<td><input class="webdavpassword" type="password" value="' + webdavpassword + '" placeholder="password"></td>' +
-            '<td style="font-size: 0.7em;"></td>' +
-            '</tr>' +
-            '<tr>' +
-            '<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
-            '</tr>' +
-            '<tr>' +
-            '<td></td>' +
-            '<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
-            '</tr>' +
-            '</table>' +
-            '</div>');
-        webDavHtml.find(".webdavUploadBtn").click(function () {
-            var webdavserver = webDavHtml.find(".webdavserver").val();
-            localStorage.setItem('webdavserver', webdavserver);
-            var webdavpath = webDavHtml.find(".webdavpath").val();
-            localStorage.setItem('webdavpath', webdavpath);
-            var webdavusername = webDavHtml.find(".webdavusername").val();
-            localStorage.setItem('webdavusername', webdavusername);
-            var webdavpassword = webDavHtml.find(".webdavpassword").val();
-            localStorage.setItem('webdavpassword', webdavpassword);
-            var base64data = whiteboard.getImageDataBase64();
-            var webdavaccess = {
-                webdavserver: webdavserver,
-                webdavpath: webdavpath,
-                webdavusername: webdavusername,
-                webdavpassword: webdavpassword
-            }
-            webDavHtml.find(".loadingWebdavText").show();
-            webDavHtml.find(".webdavUploadBtn").hide();
-            saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
-                if (err) {
-                    webDavHtml.find(".loadingWebdavText").hide();
-                    webDavHtml.find(".webdavUploadBtn").show();
-                } else {
-                    webDavHtml.parents(".basicalert").remove();
-                }
-            });
-        })
-        showBasicAlert(webDavHtml, {
-            header: "Save to Webdav",
-            okBtnText: "cancel",
-            headercolor: "#0082c9"
-        })
-    });
-
-    // upload json containing steps
-    $("#uploadJsonBtn").click(function () {
-        $("#myFile").click();
-    });
-
-    $("#shareWhiteboardBtn").click(function () {
-        var url = window.location.href;
-        var s = url.indexOf("&username=") !== -1 ? "&username=" : "username="; //Remove username from url
-        var urlSlpit = url.split(s);
-        var urlStart = urlSlpit[0];
-        if (urlSlpit.length > 1) {
-            var endSplit = urlSlpit[1].split("&");
-            endSplit = endSplit.splice(1, 1);
-            urlStart += "&" + endSplit.join("&");
-        }
-        $("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
-            document.execCommand('copy');
-        }).remove();
-        showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 })
-    });
-
-    var btnsMini = false;
-    $("#minMaxBtn").click(function () {
-        if (!btnsMini) {
-            $("#toolbar").find(".btn-group:not(.minGroup)").hide();
-            $(this).find("#minBtn").hide();
-            $(this).find("#maxBtn").show();
-        } else {
-            $("#toolbar").find(".btn-group").show();
-            $(this).find("#minBtn").show();
-            $(this).find("#maxBtn").hide();
-        }
-        btnsMini = !btnsMini;
-    })
-
-    // load json to whiteboard
-    $("#myFile").on("change", function () {
-        var file = document.getElementById("myFile").files[0];
-        var reader = new FileReader();
-        reader.onload = function (e) {
-            try {
-                var j = JSON.parse(e.target.result);
-                whiteboard.loadJsonData(j);
-            } catch (e) {
-                showBasicAlert("File was not a valid JSON!");
-            }
-        };
-        reader.readAsText(file);
-        $(this).val("");
-    });
-
-    // On thickness slider change
-    $("#whiteboardThicknessSlider").on("input", function () {
-        whiteboard.setStrokeThickness($(this).val());
-    });
-
-    // handle drag&drop
-    var dragCounter = 0;
-    $('#whiteboardContainer').on("dragenter", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter++;
-        whiteboard.dropIndicator.show();
-    });
-
-    $('#whiteboardContainer').on("dragleave", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter--;
-        if (dragCounter === 0) {
-            whiteboard.dropIndicator.hide();
-        }
-    });
-
-    $('#whiteboardContainer').on('drop', function (e) { //Handle drop
-        if (e.originalEvent.dataTransfer) {
-            if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
-                e.preventDefault();
-                e.stopPropagation();
-                var filename = e.originalEvent.dataTransfer.files[0]["name"];
-                if (isImageFileName(filename)) {
-                    var blob = e.originalEvent.dataTransfer.files[0];
-                    var reader = new window.FileReader();
-                    reader.readAsDataURL(blob);
-                    reader.onloadend = function () {
-                        base64data = reader.result;
-                        uploadImgAndAddToWhiteboard(base64data);
-                    }
-                } else {
-                    showBasicAlert("File must be an image!");
-                }
-            } else { //File from other browser
-
-                var fileUrl = e.originalEvent.dataTransfer.getData('URL');
-                var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
-                var rex = /src="?([^"\s]+)"?\s*/;
-                var url = rex.exec(imageUrl);
-                if (url && url.length > 1) {
-                    url = url[1];
-                } else {
-                    url = "";
-                }
-
-                isValidImageUrl(fileUrl, function (isImage) {
-                    if (isImage && isImageFileName(url)) {
-                        whiteboard.addImgToCanvasByUrl(fileUrl);
-                    } else {
-                        isValidImageUrl(url, function (isImage) {
-                            if (isImage) {
-                                if (isImageFileName(url) || url.startsWith("http")) {
-                                    whiteboard.addImgToCanvasByUrl(url);
-                                } else {
-                                    uploadImgAndAddToWhiteboard(url); //Last option maybe its base64
-                                }
-                            } else {
-                                showBasicAlert("Can only upload Imagedata!");
-                            }
-                        });
-                    }
-                });
-            }
-        }
-        dragCounter = 0;
-        whiteboard.dropIndicator.hide();
-    });
-
-    $('#whiteboardColorpicker').colorPicker({
-        renderCallback: function (elm) {
-            whiteboard.setDrawColor(elm.val());
-        }
-    });
-});
-
-//Prevent site from changing tab on drag&drop
-window.addEventListener("dragover", function (e) {
-    e = e || event;
-    e.preventDefault();
-}, false);
-window.addEventListener("drop", function (e) {
-    e = e || event;
-    e.preventDefault();
-}, false);
-
-function uploadImgAndAddToWhiteboard(base64data) {
-    var date = (+new Date());
-    $.ajax({
-        type: 'POST',
-        url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
-        data: {
-            'imagedata': base64data,
-            'whiteboardId': whiteboardId,
-            'date': date,
-            'at': accessToken
-        },
-        success: function (msg) {
-            var filename = whiteboardId + "_" + date + ".png";
-            whiteboard.addImgToCanvasByUrl(document.URL.substr(0, document.URL.lastIndexOf('/')) + "/uploads/" + filename); //Add image to canvas
-            console.log("Image uploaded!");
-        },
-        error: function (err) {
-            showBasicAlert("Failed to upload frame: " + JSON.stringify(err));
-        }
-    });
-}
-
-function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
-    var date = (+new Date());
-    $.ajax({
-        type: 'POST',
-        url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
-        data: {
-            'imagedata': base64data,
-            'whiteboardId': whiteboardId,
-            'date': date,
-            'at': accessToken,
-            'webdavaccess': JSON.stringify(webdavaccess)
-        },
-        success: function (msg) {
-            showBasicAlert("Whiteboard was saved to Webdav!", {
-                headercolor: "#5c9e5c"
-            });
-            console.log("Image uploaded for webdav!");
-            callback();
-        },
-        error: function (err) {
-            if (err.status == 403) {
-                showBasicAlert("Could not connect to Webdav folder! Please check the credentials and paths and try again!");
-            } else {
-                showBasicAlert("Unknown Webdav error! ", err);
-            }
-            callback(err);
-        }
-    });
-}
-
-// verify if filename refers to an image
-function isImageFileName(filename) {
-    var extension = filename.split(".")[filename.split(".").length - 1];
-    var known_extensions = ["png", "jpg", "jpeg", "gif", "tiff", "bmp", "webp"];
-    return known_extensions.includes(extension.toLowerCase());
-}
-
-// verify if given url is url to an image
-function isValidImageUrl(url, callback) {
-    var img = new Image();
-    var timer = null;
-    img.onerror = img.onabort = function () {
-        clearTimeout(timer);
-        callback(false);
-    };
-    img.onload = function () {
-        clearTimeout(timer);
-        callback(true);
-    };
-    timer = setTimeout(function () {
-        callback(false);
-    }, 2000);
-    img.src = url;
-}
-
-// handle pasting from clipboard
-window.addEventListener("paste", function (e) {
-    if ($(".basicalert").length > 0) {
-        return;
-    }
-    if (e.clipboardData) {
-        var items = e.clipboardData.items;
-        var imgItemFound = false;
-        if (items) {
-            // Loop through all items, looking for any kind of image
-            for (var i = 0; i < items.length; i++) {
-                if (items[i].type.indexOf("image") !== -1) {
-                    imgItemFound = true;
-                    // We need to represent the image as a file,
-                    var blob = items[i].getAsFile();
-
-                    var reader = new window.FileReader();
-                    reader.readAsDataURL(blob);
-                    reader.onloadend = function () {
-                        console.log("Uploading image!");
-                        base64data = reader.result;
-                        uploadImgAndAddToWhiteboard(base64data);
-                    }
-                }
-            }
-        }
-
-        if (!imgItemFound && whiteboard.tool != "text") {
-            showBasicAlert("Please Drag&Drop the image into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)");
-        }
-    }
-});
-
-function showBasicAlert(html, newOptions) {
-    var options = {
-        header: "INFO MESSAGE",
-        okBtnText: "Ok",
-        headercolor: "#d25d5d",
-        hideAfter: false
-    }
-    if (newOptions) {
-        for (var i in newOptions) {
-            options[i] = newOptions[i];
-        }
-    }
-    var alertHtml = $('<div class="basicalert" style="position:absolute; top:0px; left:0px; width:100%; top:70px; font-family: monospace;">' +
-        '<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
-        '<div style="border-bottom: 1px solid #676767; background: ' + options["headercolor"] + '; padding-left: 5px; font-size: 0.8em;">' + options["header"] + '</div>' +
-        '<div style="padding: 10px;" class="htmlcontent"></div>' +
-        '<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' + options["okBtnText"] + '</button></div>' +
-        '</div>' +
-        '</div>');
-    alertHtml.find(".htmlcontent").append(html);
-    $("body").append(alertHtml);
-    alertHtml.find(".okbtn").click(function () {
-        alertHtml.remove();
-    })
-    if (options.hideAfter) {
-        setTimeout(function () {
-            alertHtml.find(".okbtn").click();
-        }, 1000 * options.hideAfter)
-    }
-}
-
-// get 'GET' parameter by variable name
-function getQueryVariable(variable) {
-    var query = window.location.search.substring(1);
-    var vars = query.split("&");
-    for (var i = 0; i < vars.length; i++) {
-        var pair = vars[i].split("=");
-        if (pair[0] == variable) {
-            return pair[1];
-        }
-    }
-    return false;
-}

public/js/whiteboard.js

@@ -1,943 +0,0 @@
-var whiteboard = {
-    canvas: null,
-    ctx: null,
-    drawcolor: "black",
-    tool: "pen",
-    thickness: 4,
-    prevX: null,
-    prevY: null,
-    latestTouchCoods: [],
-    drawFlag: false,
-    oldGCO: null,
-    mouseover: false,
-    lineCap: "round", //butt, square
-    backgroundGrid: null,
-    canvasElement: null,
-    cursorContainer: null,
-    imgContainer: null,
-    svgContainer: null, //For draw prev
-    mouseOverlay: null,
-    ownCursor: null,
-    startCoords: [],
-    penSmoothLastCoords: [],
-    svgLine: null,
-    svgRect: null,
-    svgCirle: null,
-    drawBuffer: [],
-    drawId: 0, //Used for undo function
-    imgDragActive: false,
-    latestActiveTextBoxId: false, //The id of the latest clicked Textbox (for font and color change)
-    pressedKeys: {},
-    settings: {
-        whiteboardId: "0",
-        username: "unknown",
-        sendFunction: null,
-        backgroundGridUrl: './images/KtEBa2.png'
-    },
-    loadWhiteboard: function (whiteboardContainer, newSettings) {
-        var svgns = "http://www.w3.org/2000/svg";
-        var _this = this;
-        for (var i in newSettings) {
-            this.settings[i] = newSettings[i];
-        }
-        this.settings["username"] = this.settings["username"].replace(/[^0-9a-z]/gi, '');
-        this.settings["whiteboardId"] = this.settings["whiteboardId"].replace(/[^0-9a-z]/gi, '');
-
-        //background grid (repeating image) and smallest screen indication
-        _this.backgroundGrid = $('<div style="position: absolute; left:0px; top:0; opacity: 0.2; background-image:url(\'' + _this.settings["backgroundGridUrl"] + '\'); height: 100%; width: 100%;"></div>');
-        // container for background images
-        _this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
-        // whiteboard canvas
-        _this.canvasElement = $('<canvas id="whiteboardCanvas" style="position: absolute; left:0px; top:0; cursor:crosshair;"></canvas>');
-        // SVG container holding drawing or moving previews
-        _this.svgContainer = $('<svg style="position: absolute; top:0px; left:0px;" width="100%" height="100%"></svg>');
-        // drag and drop indicator, hidden by default
-        _this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
-        // container for other users cursors
-        _this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
-        // container for texts by users
-        _this.textContainer = $('<div class="textcontainer" style="position: absolute; left:0px; top:0; height: 100%; width: 100%; cursor:text;"></div>');
-        // mouse overlay for draw callbacks
-        _this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
-
-        $(whiteboardContainer).append(_this.backgroundGrid)
-            .append(_this.imgContainer)
-            .append(_this.canvasElement)
-            .append(_this.svgContainer)
-            .append(_this.dropIndicator)
-            .append(_this.cursorContainer)
-            .append(_this.textContainer)
-            .append(_this.mouseOverlay);
-        this.canvas = $("#whiteboardCanvas")[0];
-        this.canvas.height = $(window).height();
-        this.canvas.width = $(window).width();
-        this.ctx = this.canvas.getContext("2d");
-        this.oldGCO = this.ctx.globalCompositeOperation;
-
-        $(window).resize(function () { //Handel resize
-            var dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); //Copy the buffer
-            _this.canvas.width = $(window).width();
-            _this.canvas.height = $(window).height(); //Set new canvas height
-            _this.drawBuffer = [];
-            _this.loadData(dbCp); //draw old content in
-        });
-
-        $(_this.mouseOverlay).on("mousedown touchstart", function (e) {
-            if (_this.imgDragActive || _this.drawFlag) {
-                return;
-            }
-
-            _this.drawFlag = true;
-            _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1;
-            _this.prevY = (e.offsetY || e.pageY - $(e.target).offset().top) + 1;
-            if (!_this.prevX || !_this.prevY || (_this.prevX == 1 && _this.prevY == 1)) {
-                var touche = e.touches[0];
-                _this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1;
-                _this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top + 1;
-                latestTouchCoods = [_this.prevX, _this.prevY];
-            }
-
-            if (_this.tool === "pen") {
-                _this.penSmoothLastCoords = [_this.prevX, _this.prevY, _this.prevX, _this.prevY, _this.prevX, _this.prevY]
-            } else if (_this.tool === "eraser") {
-                _this.drawEraserLine(_this.prevX, _this.prevY, _this.prevX, _this.prevY, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [_this.prevX, _this.prevY, _this.prevX, _this.prevY], "th": _this.thickness });
-            } else if (_this.tool === "line") {
-                _this.startCoords = [_this.prevX, _this.prevY];
-                _this.svgLine = document.createElementNS(svgns, 'line');
-                _this.svgLine.setAttribute('stroke', 'gray');
-                _this.svgLine.setAttribute('stroke-dasharray', '5, 5');
-                _this.svgLine.setAttribute('x1', _this.prevX);
-                _this.svgLine.setAttribute('y1', _this.prevY);
-                _this.svgLine.setAttribute('x2', _this.prevX);
-                _this.svgLine.setAttribute('y2', _this.prevY);
-                _this.svgContainer.append(_this.svgLine);
-            } else if (_this.tool === "rect" || _this.tool === "recSelect") {
-                _this.svgContainer.find("rect").remove();
-                _this.svgRect = document.createElementNS(svgns, 'rect');
-                _this.svgRect.setAttribute('stroke', 'gray');
-                _this.svgRect.setAttribute('stroke-dasharray', '5, 5');
-                _this.svgRect.setAttribute('style', 'fill-opacity:0.0;');
-                _this.svgRect.setAttribute('x', _this.prevX);
-                _this.svgRect.setAttribute('y', _this.prevY);
-                _this.svgRect.setAttribute('width', 0);
-                _this.svgRect.setAttribute('height', 0);
-                _this.svgContainer.append(_this.svgRect);
-                _this.startCoords = [_this.prevX, _this.prevY];
-            } else if (_this.tool === "circle") {
-                _this.svgCirle = document.createElementNS(svgns, 'circle');
-                _this.svgCirle.setAttribute('stroke', 'gray');
-                _this.svgCirle.setAttribute('stroke-dasharray', '5, 5');
-                _this.svgCirle.setAttribute('style', 'fill-opacity:0.0;');
-                _this.svgCirle.setAttribute('cx', _this.prevX);
-                _this.svgCirle.setAttribute('cy', _this.prevY);
-                _this.svgCirle.setAttribute('r', 0);
-                _this.svgContainer.append(_this.svgCirle);
-                _this.startCoords = [_this.prevX, _this.prevY];
-            }
-        });
-
-        _this.textContainer.on("mousemove touchmove", function (e) {
-            e.preventDefault();
-
-            if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) {
-                return;
-            }
-
-            var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
-            var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
-            _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
-        })
-
-        _this.mouseOverlay.on("mousemove touchmove", function (e) {
-            e.preventDefault();
-            _this.triggerMouseMove(e);
-        });
-
-        _this.mouseOverlay.on("mouseup touchend touchcancel", function (e) {
-            if (_this.imgDragActive) {
-                return;
-            }
-            _this.drawFlag = false;
-            _this.drawId++;
-            _this.ctx.globalCompositeOperation = _this.oldGCO;
-            var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
-            var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
-
-            if (!currX || !currY) {
-                currX = _this.latestTouchCoods[0];
-                currY = _this.latestTouchCoods[1];
-                _this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username });
-            }
-
-            if (_this.tool === "line") {
-                if (_this.pressedKeys.shift) {
-                    var angs = _this.getRoundedAngles(currX, currY);
-                    currX = angs.x;
-                    currY = angs.y;
-                }
-                _this.drawPenLine(currX, currY, _this.startCoords[0], _this.startCoords[1], _this.drawcolor, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.startCoords[0], _this.startCoords[1]], "c": _this.drawcolor, "th": _this.thickness });
-                _this.svgContainer.find("line").remove();
-            } else if (_this.tool === "pen") {
-                _this.pushPointSmoothPen(currX, currY);
-            } else if (_this.tool === "rect") {
-                if (_this.pressedKeys.shift) {
-                    if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
-                        currY = _this.startCoords[1] + (currX - _this.startCoords[0]);
-                    } else {
-                        currY = _this.startCoords[1] - (currX - _this.startCoords[0]);
-                    }
-                }
-                _this.drawRec(_this.startCoords[0], _this.startCoords[1], currX, currY, _this.drawcolor, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords[0], _this.startCoords[1], currX, currY], "c": _this.drawcolor, "th": _this.thickness });
-                _this.svgContainer.find("rect").remove();
-            } else if (_this.tool === "circle") {
-                var a = currX - _this.startCoords[0];
-                var b = currY - _this.startCoords[1];
-                var r = Math.sqrt(a * a + b * b);
-                _this.drawCircle(_this.startCoords[0], _this.startCoords[1], r, _this.drawcolor, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords[0], _this.startCoords[1], r], "c": _this.drawcolor, "th": _this.thickness });
-                _this.svgContainer.find("circle").remove();
-            } else if (_this.tool === "recSelect") {
-                _this.imgDragActive = true;
-                if (_this.pressedKeys.shift) {
-                    if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
-                        currY = _this.startCoords[1] + (currX - _this.startCoords[0]);
-                    } else {
-                        currY = _this.startCoords[1] - (currX - _this.startCoords[0]);
-                    }
-                }
-
-                var width = Math.abs(_this.startCoords[0] - currX);
-                var height = Math.abs(_this.startCoords[1] - currY);
-                var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX;
-                var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY;
-                _this.mouseOverlay.css({ "cursor": "default" });
-                var imgDiv = $('<div class="dragMe" style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; border: 2px dotted gray; overflow: hidden; height:' + height + 'px;" cursor:move;">' +
-                    '<canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="' + width + '" height="' + height + '"/>' +
-                    '<div style="position:absolute; right:5px; top:3px;">' +
-                    '<button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button> ' +
-                    '<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' +
-                    '</div>' +
-                    '</div>');
-                var dragCanvas = $(imgDiv).find("canvas");
-                var dragOutOverlay = $('<div class="dragOutOverlay" style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px; background:white;"></div>');
-                _this.mouseOverlay.append(dragOutOverlay);
-                _this.mouseOverlay.append(imgDiv);
-
-                var destCanvasContext = dragCanvas[0].getContext('2d');
-                destCanvasContext.drawImage(_this.canvas, left, top, width, height, 0, 0, width, height);
-                imgDiv.find(".xCanvasBtn").click(function () {
-                    _this.imgDragActive = false;
-                    _this.refreshCursorAppearance();
-                    imgDiv.remove();
-                    dragOutOverlay.remove();
-                });
-                imgDiv.find(".addToCanvasBtn").click(function () {
-                    _this.imgDragActive = false;
-                    _this.refreshCursorAppearance();
-                    var p = imgDiv.position();
-                    var leftT = Math.round(p.left * 100) / 100;
-                    var topT = Math.round(p.top * 100) / 100;
-                    _this.drawId++;
-                    _this.sendFunction({ "t": _this.tool, "d": [left, top, leftT, topT, width, height] });
-                    _this.dragCanvasRectContent(left, top, leftT, topT, width, height);
-                    imgDiv.remove();
-                    dragOutOverlay.remove();
-                });
-                imgDiv.draggable();
-                _this.svgContainer.find("rect").remove();
-            }
-        });
-
-        _this.mouseOverlay.on("mouseout", function (e) {
-            _this.triggerMouseOut();
-        });
-
-        _this.mouseOverlay.on("mouseover", function (e) {
-            _this.triggerMouseOver();
-        });
-
-        //On textcontainer click (Add a new textbox)
-        _this.textContainer.on("click", function (e) {
-            currX = (e.offsetX || e.pageX - $(e.target).offset().left);
-            currY = (e.offsetY || e.pageY - $(e.target).offset().top);
-            var fontsize = _this.thickness * 0.5;
-            var txId = 'tx' + (+new Date());
-            _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] });
-            _this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true);
-        });
-    },
-    getRoundedAngles: function (currX, currY) { //For drawing lines at 0,45,90° ....
-        var _this = this;
-        var x = currX - _this.startCoords[0];
-        var y = currY - _this.startCoords[1];
-        var angle = Math.atan2(x, y) * (180 / Math.PI);
-        var angle45 = Math.round(angle / 45) * 45;
-        if (angle45 % 90 == 0) {
-            if (Math.abs(currX - _this.startCoords[0]) > Math.abs(currY - _this.startCoords[1])) {
-                currY = _this.startCoords[1]
-            } else {
-                currX = _this.startCoords[0]
-            }
-        } else {
-            if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
-                currX = _this.startCoords[0] + (currY - _this.startCoords[1]);
-            } else {
-                currX = _this.startCoords[0] - (currY - _this.startCoords[1]);
-            }
-        }
-        return { "x": currX, "y": currY };
-    },
-    triggerMouseMove: function (e) {
-        var _this = this;
-        if (_this.imgDragActive) {
-            return;
-        }
-        var currX = e.currX || (e.offsetX || e.pageX - $(e.target).offset().left);
-        var currY = e.currY || (e.offsetY || e.pageY - $(e.target).offset().top);
-        window.requestAnimationFrame(function () {
-            if ((!currX || !currY) && e.touches && e.touches[0]) {
-                var touche = e.touches[0];
-                currX = touche.clientX - $(_this.mouseOverlay).offset().left;
-                currY = touche.clientY - $(_this.mouseOverlay).offset().top;
-            }
-            _this.latestTouchCoods = [currX, currY];
-
-            if (_this.drawFlag) {
-                if (_this.tool === "pen") {
-                    _this.pushPointSmoothPen(currX, currY);
-                } else if (_this.tool == "eraser") {
-                    _this.drawEraserLine(currX, currY, _this.prevX, _this.prevY, _this.thickness);
-                    _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.prevX, _this.prevY], "th": _this.thickness });
-                }
-            }
-
-            if (_this.tool === "eraser") {
-                var left = currX - _this.thickness;
-                var top = currY - _this.thickness;
-                if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
-            } else if (_this.tool === "pen") {
-                var left = currX - _this.thickness / 2;
-                var top = currY - _this.thickness / 2;
-                if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
-            } else if (_this.tool === "line") {
-                if (_this.svgLine) {
-                    if (_this.pressedKeys.shift) {
-                        var angs = _this.getRoundedAngles(currX, currY);
-                        currX = angs.x;
-                        currY = angs.y;
-                    }
-                    _this.svgLine.setAttribute('x2', currX);
-                    _this.svgLine.setAttribute('y2', currY);
-                }
-            } else if (_this.tool === "rect" || (_this.tool === "recSelect" && _this.drawFlag)) {
-                if (_this.svgRect) {
-                    var width = Math.abs(currX - _this.startCoords[0]);
-                    var height = Math.abs(currY - _this.startCoords[1]);
-                    if (_this.pressedKeys.shift) {
-                        height = width;
-                        var x = currX < _this.startCoords[0] ? _this.startCoords[0] - width : _this.startCoords[0];
-                        var y = currY < _this.startCoords[1] ? _this.startCoords[1] - width : _this.startCoords[1];
-                        _this.svgRect.setAttribute('x', x);
-                        _this.svgRect.setAttribute('y', y);
-                    } else {
-                        var x = currX < _this.startCoords[0] ? currX : _this.startCoords[0];
-                        var y = currY < _this.startCoords[1] ? currY : _this.startCoords[1];
-                        _this.svgRect.setAttribute('x', x);
-                        _this.svgRect.setAttribute('y', y);
-                    }
-
-                    _this.svgRect.setAttribute('width', width);
-                    _this.svgRect.setAttribute('height', height);
-                }
-            } else if (_this.tool === "circle") {
-                var a = currX - _this.startCoords[0];
-                var b = currY - _this.startCoords[1];
-                var r = Math.sqrt(a * a + b * b);
-                if (_this.svgCirle) {
-                    _this.svgCirle.setAttribute('r', r);
-                }
-            }
-            _this.prevX = currX;
-            _this.prevY = currY;
-        });
-        _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
-    },
-    triggerMouseOver: function () {
-        var _this = this;
-        if (_this.imgDragActive) {
-            return;
-        }
-        if (!_this.mouseover) {
-            var color = _this.drawcolor;
-            var widthHeight = _this.thickness;
-            if (_this.tool === "eraser") {
-                color = "#00000000";
-                widthHeight = widthHeight * 2;
-            }
-            if (_this.tool === "eraser" || _this.tool === "pen") {
-                _this.ownCursor = $('<div id="ownCursor" style="background:' + color + '; border:1px solid gray; position:absolute; width:' + widthHeight + 'px; height:' + widthHeight + 'px; border-radius:50%;"></div>');
-                _this.cursorContainer.append(_this.ownCursor);
-            }
-        }
-        _this.mouseover = true;
-    },
-    triggerMouseOut: function () {
-        var _this = this;
-        if (_this.imgDragActive) {
-            return;
-        }
-        _this.drawFlag = false;
-        _this.mouseover = false;
-        _this.ctx.globalCompositeOperation = _this.oldGCO;
-        if (_this.ownCursor) _this.ownCursor.remove();
-        _this.svgContainer.find("line").remove();
-        _this.svgContainer.find("rect").remove();
-        _this.svgContainer.find("circle").remove();
-        _this.sendFunction({ "t": "cursor", "event": "out" });
-    },
-    redrawMouseCursor: function () {
-        var _this = this;
-        _this.triggerMouseOut();
-        _this.triggerMouseOver();
-        _this.triggerMouseMove({ currX: whiteboard.prevX, currY: whiteboard.prevY });
-    },
-    delKeyAction: function () {
-        var _this = this;
-        $.each(_this.mouseOverlay.find(".dragOutOverlay"), function () {
-            var width = $(this).width();
-            var height = $(this).height();
-            var p = $(this).position();
-            var left = Math.round(p.left * 100) / 100;
-            var top = Math.round(p.top * 100) / 100;
-            _this.drawId++;
-            _this.sendFunction({ "t": "eraseRec", "d": [left, top, width, height] });
-            _this.eraseRec(left, top, width, height);
-        });
-        _this.mouseOverlay.find(".xCanvasBtn").click(); //Remove all current drops
-        _this.textContainer.find("#" + _this.latestActiveTextBoxId).find(".removeIcon").click();
-    },
-    escKeyAction: function () {
-        var _this = this;
-        if (!_this.drawFlag) {
-            _this.svgContainer.empty();
-        }
-        _this.mouseOverlay.find(".xCanvasBtn").click(); //Remove all current drops
-    },
-    pushPointSmoothPen: function (X, Y) {
-        var _this = this;
-        if (_this.penSmoothLastCoords.length >= 8) {
-            _this.penSmoothLastCoords = [_this.penSmoothLastCoords[2], _this.penSmoothLastCoords[3], _this.penSmoothLastCoords[4], _this.penSmoothLastCoords[5], _this.penSmoothLastCoords[6], _this.penSmoothLastCoords[7]]
-        }
-        _this.penSmoothLastCoords.push(X, Y)
-        if (_this.penSmoothLastCoords.length >= 8) {
-            _this.drawPenSmoothLine(_this.penSmoothLastCoords, _this.drawcolor, _this.thickness);
-            _this.sendFunction({ "t": _this.tool, "d": _this.penSmoothLastCoords, "c": _this.drawcolor, "th": _this.thickness });
-        }
-    },
-    dragCanvasRectContent: function (xf, yf, xt, yt, width, height) {
-        var tempCanvas = document.createElement('canvas');
-        tempCanvas.width = width;
-        tempCanvas.height = height;
-        var tempCanvasContext = tempCanvas.getContext('2d');
-        tempCanvasContext.drawImage(this.canvas, xf, yf, width, height, 0, 0, width, height);
-        this.eraseRec(xf, yf, width, height);
-        this.ctx.drawImage(tempCanvas, xt, yt);
-    },
-    eraseRec: function (fromX, fromY, width, height) {
-        var _this = this;
-        _this.ctx.beginPath();
-        _this.ctx.rect(fromX, fromY, width, height);
-        _this.ctx.fillStyle = "rgba(0,0,0,1)";
-        _this.ctx.globalCompositeOperation = "destination-out";
-        _this.ctx.fill();
-        _this.ctx.closePath();
-        _this.ctx.globalCompositeOperation = _this.oldGCO;
-    },
-    drawPenLine: function (fromX, fromY, toX, toY, color, thickness) {
-        var _this = this;
-        _this.ctx.beginPath();
-        _this.ctx.moveTo(fromX, fromY);
-        _this.ctx.lineTo(toX, toY);
-        _this.ctx.strokeStyle = color;
-        _this.ctx.lineWidth = thickness;
-        _this.ctx.lineCap = _this.lineCap;
-        _this.ctx.stroke();
-        _this.ctx.closePath();
-    },
-    drawPenSmoothLine: function (coords, color, thickness) {
-        var _this = this;
-        var xm1 = coords[0];
-        var ym1 = coords[1];
-        var x0 = coords[2];
-        var y0 = coords[3];
-        var x1 = coords[4];
-        var y1 = coords[5];
-        var x2 = coords[6];
-        var y2 = coords[7];
-        var length = Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
-        var steps = Math.ceil(length / 5);
-        _this.ctx.beginPath();
-        _this.ctx.moveTo(x0, y0);
-        for (var i = 0; i < steps; i++) {
-            var point = lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, (i + 1) / steps);
-            _this.ctx.lineTo(point[0], point[1]);
-        }
-        _this.ctx.strokeStyle = color;
-        _this.ctx.lineWidth = thickness;
-        _this.ctx.lineCap = _this.lineCap;
-        _this.ctx.stroke();
-        _this.ctx.closePath();
-    },
-    drawEraserLine: function (fromX, fromY, toX, toY, thickness) {
-        var _this = this;
-        _this.ctx.beginPath();
-        _this.ctx.moveTo(fromX, fromY);
-        _this.ctx.lineTo(toX, toY);
-        _this.ctx.strokeStyle = "rgba(0,0,0,1)";
-        _this.ctx.lineWidth = thickness * 2;
-        _this.ctx.lineCap = _this.lineCap;
-        _this.ctx.globalCompositeOperation = "destination-out";
-        _this.ctx.stroke();
-        _this.ctx.closePath();
-        _this.ctx.globalCompositeOperation = _this.oldGCO;
-    },
-    drawRec: function (fromX, fromY, toX, toY, color, thickness) {
-        var _this = this;
-        toX = toX - fromX;
-        toY = toY - fromY;
-        _this.ctx.beginPath();
-        _this.ctx.rect(fromX, fromY, toX, toY);
-        _this.ctx.strokeStyle = color;
-        _this.ctx.lineWidth = thickness;
-        _this.ctx.lineCap = _this.lineCap;
-        _this.ctx.stroke();
-        _this.ctx.closePath();
-    },
-    drawCircle: function (fromX, fromY, radius, color, thickness) {
-        var _this = this;
-        _this.ctx.beginPath();
-        _this.ctx.arc(fromX, fromY, radius, 0, 2 * Math.PI, false);
-        _this.ctx.lineWidth = thickness;
-        _this.ctx.strokeStyle = color;
-        _this.ctx.stroke();
-    },
-    clearWhiteboard: function () {
-        var _this = this;
-        _this.canvas.height = _this.canvas.height;
-        _this.imgContainer.empty();
-        _this.textContainer.empty();
-        _this.sendFunction({ "t": "clear" });
-        _this.drawBuffer = [];
-        _this.drawId = 0;
-    },
-    setStrokeThickness(thickness) {
-        var _this = this;
-        _this.thickness = thickness;
-
-        if (_this.tool == "text" && _this.latestActiveTextBoxId) {
-            _this.sendFunction({ "t": "setTextboxFontSize", "d": [_this.latestActiveTextBoxId, thickness] });
-            _this.setTextboxFontSize(_this.latestActiveTextBoxId, thickness);
-        }
-    },
-    addImgToCanvasByUrl: function (url) {
-        var _this = this;
-        var wasTextTool = false;
-        if (_this.tool === "text") {
-            wasTextTool = true;
-            _this.setTool("mouse"); //Set to mouse tool while dropping to prevent errors
-        }
-        _this.imgDragActive = true;
-        _this.mouseOverlay.css({ "cursor": "default" });
-        var imgDiv = $('<div class="dragMe" style="border: 2px dashed gray; position:absolute; left:200px; top:200px; min-width:160px; min-height:100px; cursor:move;">' +
-            '<img style="width:100%; height:100%;" src="' + url + '">' +
-            '<div style="position:absolute; right:5px; top:3px;">' +
-            '<button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Draw to canvas</button> ' +
-            '<button draw="0" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToBackgroundBtn btn btn-default">Add to background</button> ' +
-            '<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' +
-            '</div>' +
-            '<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fas fa-sort-down" aria-hidden="true"></i>' +
-            '</div>');
-        imgDiv.find(".xCanvasBtn").click(function () {
-            _this.imgDragActive = false;
-            _this.refreshCursorAppearance();
-            imgDiv.remove();
-            if (wasTextTool) {
-                _this.setTool("text");
-            }
-        });
-        imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
-            var draw = $(this).attr("draw");
-            _this.imgDragActive = false;
-            _this.refreshCursorAppearance();
-            var width = imgDiv.width();
-            var height = imgDiv.height();
-            var p = imgDiv.position();
-            var left = Math.round(p.left * 100) / 100;
-            var top = Math.round(p.top * 100) / 100;
-            if (draw == "1") { //draw image to canvas
-                _this.drawImgToCanvas(url, width, height, left, top);
-            } else { //Add image to background
-                _this.drawImgToBackground(url, width, height, left, top);
-            }
-            _this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] });
-            _this.drawId++;
-            imgDiv.remove();
-            if (wasTextTool) {
-                _this.setTool("text");
-            }
-        });
-        _this.mouseOverlay.append(imgDiv);
-        imgDiv.draggable();
-        imgDiv.resizable();
-    },
-    drawImgToBackground(url, width, height, left, top) {
-        this.imgContainer.append('<img crossorigin="anonymous" style="width:' + width + 'px; height:' + height + 'px; position:absolute; top:' + top + 'px; left:' + left + 'px;" src="' + url + '">')
-    },
-    addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) {
-        var _this = this;
-        var textBox = $('<div id="' + txId + '" class="textBox" style="font-family: Monospace; position:absolute; top:' + top + 'px; left:' + left + 'px;">' +
-            '<div contentEditable="true" spellcheck="false" class="textContent" style="outline: none; font-size:' + fontsize + 'em; color:' + textcolor + '; min-width:50px; min-height:50px;"></div>' +
-            '<div title="remove textbox" class="removeIcon" style="position:absolute; cursor:pointer; top:-4px; right:2px;">x</div>' +
-            '<div title="move textbox" class="moveIcon" style="position:absolute; cursor:move; top:1px; left:2px; font-size: 0.5em;"><i class="fas fa-expand-arrows-alt"></i></div>' +
-            '</div>');
-        _this.latestActiveTextBoxId = txId;
-        textBox.click(function (e) {
-            e.preventDefault();
-            _this.latestActiveTextBoxId = txId;
-            return false;
-        })
-        textBox.on("mousemove touchmove", function (e) {
-            e.preventDefault();
-            if (_this.imgDragActive) {
-                return;
-            }
-            var textBoxPosition = textBox.position();
-            var currX = (e.offsetX + textBoxPosition.left);
-            var currY = (e.offsetY + textBoxPosition.top);
-            if ($(e.target).hasClass("removeIcon")) {
-                currX += textBox.width() - 4;
-            }
-            _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
-        })
-        this.textContainer.append(textBox);
-        textBox.draggable({
-            handle: ".moveIcon",
-            stop: function () {
-                var textBoxPosition = textBox.position();
-                _this.sendFunction({ "t": "setTextboxPosition", "d": [txId, textBoxPosition.top, textBoxPosition.left] });
-            },
-            drag: function () {
-                var textBoxPosition = textBox.position();
-                _this.sendFunction({ "t": "setTextboxPosition", "d": [txId, textBoxPosition.top, textBoxPosition.left] });
-            }
-        });
-        textBox.find(".textContent").on("input", function () {
-            var text = btoa(unescape(encodeURIComponent($(this).html()))); //Get html and make encode base64 also take care of the charset
-            _this.sendFunction({ "t": "setTextboxText", "d": [txId, text] });
-        });
-        textBox.find(".removeIcon").click(function (e) {
-            $("#" + txId).remove();
-            _this.sendFunction({ "t": "removeTextbox", "d": [txId] });
-            e.preventDefault();
-            return false;
-        });
-        if (newLocalBox) {
-            textBox.find(".textContent").focus();
-        }
-        if (this.tool === "text") {
-            textBox.addClass("active");
-        }
-    },
-    setTextboxText(txId, text) {
-        $("#" + txId).find(".textContent").html(decodeURIComponent(escape(atob(text)))); //Set decoded base64 as html
-    },
-    removeTextbox(txId) {
-        $("#" + txId).remove();
-    },
-    setTextboxPosition(txId, top, left) {
-        $("#" + txId).css({ "top": top + "px", "left": left + "px" });
-    },
-    setTextboxFontSize(txId, fontSize) {
-        $("#" + txId).find(".textContent").css({ "font-size": fontSize + "em" });
-    },
-    setTextboxFontColor(txId, color) {
-        $("#" + txId).find(".textContent").css({ "color": color });
-    },
-    drawImgToCanvas(url, width, height, left, top, doneCallback) {
-        var _this = this;
-        var img = document.createElement('img');
-        img.onload = function () {
-            _this.ctx.drawImage(img, left, top, width, height);
-            if (doneCallback) {
-                doneCallback();
-            }
-        }
-        img.src = url;
-    },
-    undoWhiteboard: function (username) { //Not call this directly because you will get out of sync whit others...
-        var _this = this;
-        if (!username) {
-            username = _this.settings.username;
-        }
-        for (var i = _this.drawBuffer.length - 1; i >= 0; i--) {
-            if (_this.drawBuffer[i]["username"] == username) {
-                var drawId = _this.drawBuffer[i]["drawId"];
-                for (var i = _this.drawBuffer.length - 1; i >= 0; i--) {
-                    if (_this.drawBuffer[i]["drawId"] == drawId && _this.drawBuffer[i]["username"] == username) {
-                        _this.drawBuffer.splice(i, 1);
-                    }
-                }
-                break;
-            }
-        }
-        _this.canvas.height = _this.canvas.height;
-        _this.imgContainer.empty();
-        _this.loadDataInSteps(_this.drawBuffer, false, function (stepData) {
-            //Nothing to do
-        });
-    },
-    undoWhiteboardClick: function () {
-        this.sendFunction({ "t": "undo" });
-        this.undoWhiteboard();
-    },
-    setTool: function (tool) {
-        this.tool = tool;
-        if (this.tool === "text") {
-            $(".textBox").addClass("active");
-            this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front
-        } else {
-            $(".textBox").removeClass("active");
-            this.mouseOverlay.appendTo($(whiteboardContainer));
-        }
-        this.refreshCursorAppearance();
-        this.mouseOverlay.find(".xCanvasBtn").click();
-        this.latestActiveTextBoxId = null;
-    },
-    setDrawColor(color) {
-        var _this = this;
-        _this.drawcolor = color;
-        if (_this.tool == "text" && _this.latestActiveTextBoxId) {
-            _this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
-            _this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
-        }
-    },
-    updateSmallestScreenResolution(width, height) {
-        this.backgroundGrid.empty();
-        if (width < $(window).width() || height < $(window).height()) {
-            this.backgroundGrid.append('<div style="position:absolute; left:0px; top:0px; border-right:3px dotted black; border-bottom:3px dotted black; width:' + width + 'px; height:' + height + 'px;"></div>');
-            this.backgroundGrid.append('<div style="position:absolute; left:' + (width + 5) + 'px; top:0px;">smallest screen participating</div>');
-        }
-    },
-    handleEventsAndData: function (content, isNewData, doneCallback) {
-        var _this = this;
-        var tool = content["t"];
-        var data = content["d"];
-        var color = content["c"];
-        var username = content["username"];
-        var thickness = content["th"];
-        window.requestAnimationFrame(function () {
-            if (tool === "line" || tool === "pen") {
-                if (data.length == 4) { //Only used for old json imports
-                    _this.drawPenLine(data[0], data[1], data[2], data[3], color, thickness);
-                } else {
-                    _this.drawPenSmoothLine(data, color, thickness);
-                }
-            } else if (tool === "rect") {
-                _this.drawRec(data[0], data[1], data[2], data[3], color, thickness);
-            } else if (tool === "circle") {
-                _this.drawCircle(data[0], data[1], data[2], color, thickness);
-            } else if (tool === "eraser") {
-                _this.drawEraserLine(data[0], data[1], data[2], data[3], thickness);
-            } else if (tool === "eraseRec") {
-                _this.eraseRec(data[0], data[1], data[2], data[3]);
-            } else if (tool === "recSelect") {
-                _this.dragCanvasRectContent(data[0], data[1], data[2], data[3], data[4], data[5]);
-            } else if (tool === "addImgBG") {
-                if (content["draw"] == "1") {
-                    _this.drawImgToCanvas(content["url"], data[0], data[1], data[2], data[3], doneCallback)
-                } else {
-                    _this.drawImgToBackground(content["url"], data[0], data[1], data[2], data[3]);
-                }
-            } else if (tool === "addTextBox") {
-                _this.addTextBox(data[0], data[1], data[2], data[3], data[4]);
-            } else if (tool === "setTextboxText") {
-                _this.setTextboxText(data[0], data[1]);
-            } else if (tool === "removeTextbox") {
-                _this.removeTextbox(data[0]);
-            } else if (tool === "setTextboxPosition") {
-                _this.setTextboxPosition(data[0], data[1], data[2]);
-            } else if (tool === "setTextboxFontSize") {
-                _this.setTextboxFontSize(data[0], data[1]);
-            } else if (tool === "setTextboxFontColor") {
-                _this.setTextboxFontColor(data[0], data[1]);
-            } else if (tool === "clear") {
-                _this.canvas.height = _this.canvas.height;
-                _this.imgContainer.empty();
-                _this.textContainer.empty();
-                _this.drawBuffer = [];
-                _this.drawId = 0;
-            } else if (tool === "cursor" && _this.settings) {
-                if (content["event"] === "move") {
-                    if (_this.cursorContainer.find("." + content["username"]).length >= 1) {
-                        _this.cursorContainer.find("." + content["username"]).css({ "left": data[0] + "px", "top": (data[1] - 15) + "px" });
-                    } else {
-                        _this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:' + data[0] + 'px; top:' + (data[1] - 151) + 'px;" class="userbadge ' + content["username"] + '">' +
-                            '<div style="width:4px; height:4px; background:gray; position:absolute; top:13px; left:-2px; border-radius:50%;"></div>' +
-                            decodeURIComponent(atob(content["username"])) + '</div>');
-                    }
-                } else {
-                    _this.cursorContainer.find("." + content["username"]).remove();
-                }
-            } else if (tool === "undo") {
-                _this.undoWhiteboard(username);
-            }
-        });
-
-        if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) {
-            content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
-            content["username"] = content["username"] ? content["username"] : _this.settings.username;
-            _this.drawBuffer.push(content);
-        }
-    },
-    userLeftWhiteboard(username) {
-        this.cursorContainer.find("." + username).remove();
-    },
-    refreshUserBadges() {
-        this.cursorContainer.find(".userbadge").remove();
-    },
-    getImageDataBase64() {
-        _this = this;
-        var width = this.mouseOverlay.width();
-        var height = this.mouseOverlay.height();
-        var copyCanvas = document.createElement('canvas');
-        copyCanvas.width = width;
-        copyCanvas.height = height;
-        var ctx = copyCanvas.getContext("2d");
-
-        $.each(_this.imgContainer.find("img"), function () { //Draw Backgroundimages to the export canvas
-            var width = $(this).width();
-            var height = $(this).height();
-            var p = $(this).position();
-            var left = Math.round(p.left * 100) / 100;
-            var top = Math.round(p.top * 100) / 100;
-            ctx.drawImage(this, left, top, width, height);
-        });
-
-        var destCtx = copyCanvas.getContext('2d'); //Draw the maincanvas to the exportcanvas
-        destCtx.drawImage(this.canvas, 0, 0);
-
-        $.each($(".textBox"), function () { //Draw the text on top
-            var textContainer = $(this)
-            var textEl = $(this).find(".textContent");
-            var text = textEl.text();
-            var fontSize = textEl.css('font-size');
-            var fontColor = textEl.css('color');
-            var p = textContainer.position();
-            var left = Math.round(p.left * 100) / 100;
-            var top = Math.round(p.top * 100) / 100;
-            top += 25; //Fix top position
-            ctx.font = fontSize + " Monospace";
-            ctx.fillStyle = fontColor;
-            ctx.fillText(text, left, top);
-        });
-
-        var url = copyCanvas.toDataURL();
-        return url;
-    },
-    getImageDataJson() {
-        var sendObj = [];
-        for (var i = 0; i < this.drawBuffer.length; i++) {
-            sendObj.push(JSON.parse(JSON.stringify(this.drawBuffer[i])));
-            delete sendObj[i]["username"];
-            delete sendObj[i]["wid"];
-            delete sendObj[i]["drawId"];
-        }
-        return JSON.stringify(sendObj);
-    },
-    loadData: function (content) {
-        var _this = this;
-        _this.loadDataInSteps(content, true, function (stepData) {
-            if (stepData["username"] == _this.settings.username && _this.drawId < stepData["drawId"]) {
-                _this.drawId = stepData["drawId"] + 1;
-            }
-        });
-    },
-    loadDataInSteps(content, isNewData, callAfterEveryStep) {
-        var _this = this;
-
-        function lData(index) {
-            for (var i = index; i < content.length; i++) {
-                if (content[i]["t"] === "addImgBG" && content[i]["draw"] == "1") {
-                    _this.handleEventsAndData(content[i], isNewData, function () {
-                        callAfterEveryStep(content[i], i);
-                        lData(i + 1);
-                    });
-                    break;
-                } else {
-                    _this.handleEventsAndData(content[i], isNewData);
-                    callAfterEveryStep(content[i], i);
-                }
-            }
-        }
-        lData(0);
-    },
-    loadJsonData(content, doneCallback) {
-        var _this = this;
-        _this.loadDataInSteps(content, false, function (stepData, index) {
-            _this.sendFunction(stepData);
-            if (index >= content.length - 1) { //Done with all data
-                _this.drawId++;
-                if (doneCallback) {
-                    doneCallback();
-                }
-            }
-        });
-    },
-    sendFunction: function (content) { //Sends every draw to server
-        var _this = this;
-        content["wid"] = _this.settings.whiteboardId;
-        content["username"] = _this.settings.username;
-        content["drawId"] = _this.drawId;
-
-        var tool = content["t"];
-        if (_this.settings.sendFunction) {
-            _this.settings.sendFunction(content);
-        }
-        if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) {
-            _this.drawBuffer.push(content);
-        }
-    },
-    refreshCursorAppearance() { //Set cursor depending on current active tool
-        var _this = this;
-        if (_this.tool === "pen" || _this.tool === "eraser") {
-            _this.mouseOverlay.css({ "cursor": "none" });
-        } else if (_this.tool === "mouse") {
-            this.mouseOverlay.css({ "cursor": "default" });
-        } else { //Line, Rec, Circle, Cutting
-            _this.mouseOverlay.css({ "cursor": "crosshair" });
-        }
-    }
-}
-
-function lanczosKernel(x) {
-    if (x == 0) {
-        return 1.0;
-    }
-    return 2 * Math.sin(Math.PI * x) * Math.sin(Math.PI * x / 2) / Math.pow(Math.PI * x, 2);
-}
-
-function lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, a) {
-    var cm1 = lanczosKernel(1 + a);
-    var c0 = lanczosKernel(a);
-    var c1 = lanczosKernel(1 - a);
-    var c2 = lanczosKernel(2 - a);
-    var delta = (cm1 + c0 + c1 + c2 - 1) / 4;
-    cm1 -= delta;
-    c0 -= delta;
-    c1 -= delta;
-    c2 -= delta;
-    return [cm1 * xm1 + c0 * x0 + c1 * x1 + c2 * x2, cm1 * ym1 + c0 * y0 + c1 * y1 + c2 * y2];
-}

public/webfonts/fa-regular-400.svg

@@ -1,366 +0,0 @@
-<?xml version="1.0" standalone="no"?> 
-<!--
-Font Awesome Free 5.0.6 by @fontawesome - http://fontawesome.com
-License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
--->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs>
-  <font id="fontawesome-free" horiz-adv-x="640">
-    <font-face font-family="Font Awesome 5 Free"
-      units-per-em="512" ascent="448"
-      descent="64"
-      font-weight="400"
-      font-style="Regular" />
-    <missing-glyph horiz-adv-x="0" />
-    <glyph glyph-name="address-book"
-      unicode="&#xF2B9;"
-      horiz-adv-x="448" d=" M436 288C442.627 288 448 293.373 448 300V340C448 346.627 442.627 352 436 352H416V400C416 426.51 394.51 448 368 448H48C21.49 448 0 426.51 0 400V-16C0 -42.51 21.49 -64 48 -64H368C394.51 -64 416 -42.51 416 -16V32H436C442.627 32 448 37.373 448 44V84C448 90.627 442.627 96 436 96H416V160H436C442.627 160 448 165.373 448 172V212C448 218.627 442.627 224 436 224H416V288H436zM362 -16H54A6 6 0 0 0 48 -10V394A6 6 0 0 0 54 400H362A6 6 0 0 0 368 394V-10A6 6 0 0 0 362 -16zM128 240C128 284.183 163.817 320 208 320S288 284.183 288 240S252.183 160 208 160S128 195.817 128 240zM336 106.523V88C336 74.745 325.255 64 312 64H104C90.745 64 80 74.745 80 88V106.523C80 128.549 94.99 147.7480000000001 116.358 153.09L152.015 162.004C181.116 141.072 226.524 135.059 263.985 162.004L299.642 153.09C321.01 147.748 336 128.548 336 106.523z" />
-    <glyph glyph-name="address-card"
-      unicode="&#xF2BB;"
-      horiz-adv-x="512" d=" M464 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H464C490.51 0 512 21.49 512 48V336C512 362.51 490.51 384 464 384zM458 48H54A6 6 0 0 0 48 54V330A6 6 0 0 0 54 336H458A6 6 0 0 0 464 330V54A6 6 0 0 0 458 48zM404 224H300C293.373 224 288 229.373 288 236V252C288 258.627 293.373 264 300 264H404C410.627 264 416 258.627 416 252V236C416 229.373 410.627 224 404 224zM404 152H300C293.373 152 288 157.373 288 164V180C288 186.627 293.373 192 300 192H404C410.627 192 416 186.627 416 180V164C416 157.373 410.627 152 404 152zM176 288C209.137 288 236 261.137 236 228S209.137 168 176 168S116 194.863 116 228S142.863 288 176 288zM244.731 162.817L217.989 169.503C189.893 149.294 155.837 153.804 134.011 169.503L107.269 162.817C91.243 158.811 80 144.411 80 127.892V114C80 104.059 88.059 96 98 96H254C263.941 96 272 104.059 272 114V127.892C272 144.411 260.757 158.811 244.731 162.817z" />
-    <glyph glyph-name="arrow-alt-circle-down"
-      unicode="&#xF358;"
-      horiz-adv-x="512" d=" M256 440C119 440 8 329 8 192S119 -56 256 -56S504 55 504 192S393 440 256 440zM256 -8C145.5 -8 56 81.5 56 192S145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8zM224 308V192H157C146.3 192 141 179.1 148.5 171.5L247.5 72.5C252.2 67.8 259.8 67.8 264.5 72.5L363.5 171.5C371.1 179.1 365.7 192 355 192H288V308C288 314.6 282.6 320 276 320H236C229.4 320 224 314.6 224 308z" />
-    <glyph glyph-name="arrow-alt-circle-left"
-      unicode="&#xF359;"
-      horiz-adv-x="512" d=" M8 192C8 55 119 -56 256 -56S504 55 504 192S393 440 256 440S8 329 8 192zM456 192C456 81.5 366.5 -8 256 -8S56 81.5 56 192S145.5 392 256 392S456 302.5 456 192zM384 212V172C384 165.4 378.6 160 372 160H256V93C256 82.3 243.1 77 235.5 84.5L136.5 183.5C131.8 188.2 131.8 195.8 136.5 200.5L235.5 299.5C243.1 307.1 256 301.7 256 291V224H372C378.6 224 384 218.6 384 212z" />
-    <glyph glyph-name="arrow-alt-circle-right"
-      unicode="&#xF35A;"
-      horiz-adv-x="512" d=" M504 192C504 329 393 440 256 440S8 329 8 192S119 -56 256 -56S504 55 504 192zM56 192C56 302.5 145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8S56 81.5 56 192zM128 172V212C128 218.6 133.4 224 140 224H256V291C256 301.7 268.9 307 276.5 299.5L375.5 200.5C380.2 195.8 380.2 188.2 375.5 183.5L276.5 84.5C268.9 76.9 256 82.3 256 93V160H140C133.4 160 128 165.4 128 172z" />
-    <glyph glyph-name="arrow-alt-circle-up"
-      unicode="&#xF35B;"
-      horiz-adv-x="512" d=" M256 -56C393 -56 504 55 504 192S393 440 256 440S8 329 8 192S119 -56 256 -56zM256 392C366.5 392 456 302.5 456 192S366.5 -8 256 -8S56 81.5 56 192S145.5 392 256 392zM276 64H236C229.4 64 224 69.4 224 76V192H157C146.3 192 141 204.9 148.5 212.5L247.5 311.5C252.2 316.2 259.8 316.2 264.5 311.5L363.5 212.5C371.1 204.9 365.7 192 355 192H288V76C288 69.4 282.6 64 276 64z" />
-    <glyph glyph-name="bell-slash"
-      unicode="&#xF1F6;"
-      horiz-adv-x="576" d=" M130.9 48C114.138 48 105.765 68.39 117.566 80.191C142.792 105.417 163.66 129.5290000000001 168.215 201.6710000000001L121.438 242.9450000000001A168.48 168.48 0 0 1 121.142 233.1430000000001C121.142 151.21 103.591 133.8510000000001 86.599 117.0650000000001C38.504 69.559 73.726 0 130.919 0H224C224 -35.346 252.654 -64 288 -64S352 -35.346 352 0H396.777L342.377 48H130.9zM288 -24C274.766 -24 264 -13.234 264 0H312C312 -13.234 301.234 -24 288 -24zM571.867 -24.553L503.936 35.018C517.04 59.136 515.4599999999999 91.336 489.404 117.0600000000001C472.415 133.8450000000001 454.858 151.2030000000001 454.858 233.1430000000001C454.858 316.1690000000001 393.9 385.2170000000001 314.391 397.9050000000001A31.848 31.848 0 0 1 320 416C320 433.673 305.673 448 288 448S256 433.673 256 416A31.848 31.848 0 0 1 261.609 397.905C220.138 391.287 183.718 369.334 158.36 338.064L36.459 444.963C31.401 449.399 23.682 448.919 19.219 443.892L3.056 425.687C-1.407 420.6600000000001 -0.925 412.988 4.134 408.553L539.542 -60.963C544.6 -65.399 552.3190000000001 -64.919 556.782 -59.892L572.945 -41.687C577.407 -36.66 576.9250000000001 -28.988 571.8670000000001 -24.553zM288 352C353.538 352 406.857 298.681 406.857 233.143C406.857 135.493 430.078 108.569 458.425 80.191C461.333 77.283 462.9979999999999 73.8630000000001 463.634 70.359L194.482 306.3880000000001C216.258 334.133 250.075 352 288 352z" />
-    <glyph glyph-name="bell"
-      unicode="&#xF0F3;"
-      horiz-adv-x="448" d=" M425.403 117.061C408.4140000000001 133.846 390.8570000000001 151.204 390.8570000000001 233.144C390.8570000000001 316.17 329.899 385.218 250.39 397.906A31.842999999999996 31.842999999999996 0 0 1 256 416C256 433.673 241.673 448 224 448S192 433.673 192 416A31.848 31.848 0 0 1 197.609 397.905C118.101 385.217 57.143 316.169 57.143 233.143C57.143 151.21 39.592 133.851 22.6 117.065C-25.496 69.559 9.726 0 66.919 0H160C160 -35.346 188.654 -64 224 -64C259.346 -64 288 -35.346 288 0H381.08C438.27 0 473.495 69.583 425.403 117.061zM224 -24C210.766 -24 200 -13.234 200 0H248C248 -13.234 237.234 -24 224 -24zM381.092 48H66.9C50.138 48 41.765 68.39 53.566 80.191C82.151 108.776 105.143 135.915 105.143 233.1430000000001C105.143 298.6810000000001 158.462 352 224 352S342.857 298.681 342.857 233.143C342.857 135.493 366.078 108.569 394.425 80.191C406.278 68.339 397.783 48 381.092 48z" />
-    <glyph glyph-name="bookmark"
-      unicode="&#xF02E;"
-      horiz-adv-x="384" d=" M336 448H48C21.49 448 0 426.51 0 400V-64L192 48L384 -64V400C384 426.51 362.51 448 336 448zM336 19.57L192 103.57L48 19.57V394A6 6 0 0 0 54 400H330C333.314 400 336 397.317 336 394.004V19.57z" />
-    <glyph glyph-name="building"
-      unicode="&#xF1AD;"
-      horiz-adv-x="448" d=" M128 300V340C128 346.6 133.4 352 140 352H180C186.6 352 192 346.6 192 340V300C192 293.4 186.6 288 180 288H140C133.4 288 128 293.4 128 300zM268 288H308C314.6 288 320 293.4 320 300V340C320 346.6 314.6 352 308 352H268C261.4 352 256 346.6 256 340V300C256 293.4 261.4 288 268 288zM140 192H180C186.6 192 192 197.4 192 204V244C192 250.6 186.6 256 180 256H140C133.4 256 128 250.6 128 244V204C128 197.4 133.4 192 140 192zM268 192H308C314.6 192 320 197.4 320 204V244C320 250.6 314.6 256 308 256H268C261.4 256 256 250.6 256 244V204C256 197.4 261.4 192 268 192zM192 108V148C192 154.6 186.6 160 180 160H140C133.4 160 128 154.6 128 148V108C128 101.4 133.4 96 140 96H180C186.6 96 192 101.4 192 108zM268 96H308C314.6 96 320 101.4 320 108V148C320 154.6 314.6 160 308 160H268C261.4 160 256 154.6 256 148V108C256 101.4 261.4 96 268 96zM448 -28V-64H0V-28C0 -21.4 5.4 -16 12 -16H31.5V424C31.5 437.3 42.2 448 55.5 448H392.5C405.8 448 416.5 437.3 416.5 424V-16H436C442.6 -16 448 -21.4 448 -28zM79.5 -15H192V52C192 58.6 197.4 64 204 64H244C250.6 64 256 58.6 256 52V-15H368.5V399L80 400L79.5 -15z" />
-    <glyph glyph-name="calendar-alt"
-      unicode="&#xF073;"
-      horiz-adv-x="448" d=" M148 160H108C101.4 160 96 165.4 96 172V212C96 218.6 101.4 224 108 224H148C154.6 224 160 218.6 160 212V172C160 165.4 154.6 160 148 160zM256 172V212C256 218.6 250.6 224 244 224H204C197.4 224 192 218.6 192 212V172C192 165.4 197.4 160 204 160H244C250.6 160 256 165.4 256 172zM352 172V212C352 218.6 346.6 224 340 224H300C293.4 224 288 218.6 288 212V172C288 165.4 293.4 160 300 160H340C346.6 160 352 165.4 352 172zM256 76V116C256 122.6 250.6 128 244 128H204C197.4 128 192 122.6 192 116V76C192 69.4 197.4 64 204 64H244C250.6 64 256 69.4 256 76zM160 76V116C160 122.6 154.6 128 148 128H108C101.4 128 96 122.6 96 116V76C96 69.4 101.4 64 108 64H148C154.6 64 160 69.4 160 76zM352 76V116C352 122.6 346.6 128 340 128H300C293.4 128 288 122.6 288 116V76C288 69.4 293.4 64 300 64H340C346.6 64 352 69.4 352 76zM448 336V-16C448 -42.5 426.5 -64 400 -64H48C21.5 -64 0 -42.5 0 -16V336C0 362.5 21.5 384 48 384H96V436C96 442.6 101.4 448 108 448H148C154.6 448 160 442.6 160 436V384H288V436C288 442.6 293.4 448 300 448H340C346.6 448 352 442.6 352 436V384H400C426.5 384 448 362.5 448 336zM400 -10V288H48V-10C48 -13.3 50.7 -16 54 -16H394C397.3 -16 400 -13.3 400 -10z" />
-    <glyph glyph-name="calendar-check"
-      unicode="&#xF274;"
-      horiz-adv-x="448" d=" M400 384H352V436C352 442.627 346.627 448 340 448H300C293.373 448 288 442.627 288 436V384H160V436C160 442.627 154.627 448 148 448H108C101.373 448 96 442.627 96 436V384H48C21.49 384 0 362.51 0 336V-16C0 -42.51 21.49 -64 48 -64H400C426.51 -64 448 -42.51 448 -16V336C448 362.51 426.51 384 400 384zM394 -16H54A6 6 0 0 0 48 -10V288H400V-10A6 6 0 0 0 394 -16zM341.151 184.65L198.842 43.481C194.137 38.814 186.539 38.844 181.871 43.549L106.78 119.248C102.113 123.953 102.143 131.551 106.848 136.219L129.567 158.755C134.272 163.422 141.87 163.392 146.537 158.686L190.641 114.225L301.713 224.406C306.418 229.073 314.016 229.043 318.6840000000001 224.3379999999999L341.2200000000001 201.62C345.887 196.9149999999999 345.8560000000001 189.317 341.151 184.65z" />
-    <glyph glyph-name="calendar-minus"
-      unicode="&#xF272;"
-      horiz-adv-x="448" d=" M124 120C117.4 120 112 125.4 112 132V156C112 162.6 117.4 168 124 168H324C330.6 168 336 162.6 336 156V132C336 125.4 330.6 120 324 120H124zM448 336V-16C448 -42.5 426.5 -64 400 -64H48C21.5 -64 0 -42.5 0 -16V336C0 362.5 21.5 384 48 384H96V436C96 442.6 101.4 448 108 448H148C154.6 448 160 442.6 160 436V384H288V436C288 442.6 293.4 448 300 448H340C346.6 448 352 442.6 352 436V384H400C426.5 384 448 362.5 448 336zM400 -10V288H48V-10C48 -13.3 50.7 -16 54 -16H394C397.3 -16 400 -13.3 400 -10z" />
-    <glyph glyph-name="calendar-plus"
-      unicode="&#xF271;"
-      horiz-adv-x="448" d=" M336 156V132C336 125.4 330.6 120 324 120H248V44C248 37.4 242.6 32 236 32H212C205.4 32 200 37.4 200 44V120H124C117.4 120 112 125.4 112 132V156C112 162.6 117.4 168 124 168H200V244C200 250.6 205.4 256 212 256H236C242.6 256 248 250.6 248 244V168H324C330.6 168 336 162.6 336 156zM448 336V-16C448 -42.5 426.5 -64 400 -64H48C21.5 -64 0 -42.5 0 -16V336C0 362.5 21.5 384 48 384H96V436C96 442.6 101.4 448 108 448H148C154.6 448 160 442.6 160 436V384H288V436C288 442.6 293.4 448 300 448H340C346.6 448 352 442.6 352 436V384H400C426.5 384 448 362.5 448 336zM400 -10V288H48V-10C48 -13.3 50.7 -16 54 -16H394C397.3 -16 400 -13.3 400 -10z" />
-    <glyph glyph-name="calendar-times"
-      unicode="&#xF273;"
-      horiz-adv-x="448" d=" M311.7 73.3L294.7 56.3C290 51.6 282.4 51.6 277.7 56.3L224 110.1L170.3 56.4C165.6 51.7 158 51.7 153.3 56.4L136.3 73.4C131.6 78.1 131.6 85.7000000000001 136.3 90.4L190 144.1L136.3 197.8C131.6 202.5 131.6 210.1 136.3 214.8L153.3 231.8C158 236.5 165.6 236.5 170.3 231.8L224 178.1L277.7 231.8C282.4 236.5 290 236.5 294.7 231.8L311.7 214.8C316.4 210.1 316.4 202.5 311.7 197.8L257.9 144L311.6 90.3C316.4 85.6 316.4 78 311.7 73.3zM448 336V-16C448 -42.5 426.5 -64 400 -64H48C21.5 -64 0 -42.5 0 -16V336C0 362.5 21.5 384 48 384H96V436C96 442.6 101.4 448 108 448H148C154.6 448 160 442.6 160 436V384H288V436C288 442.6 293.4 448 300 448H340C346.6 448 352 442.6 352 436V384H400C426.5 384 448 362.5 448 336zM400 -10V288H48V-10C48 -13.3 50.7 -16 54 -16H394C397.3 -16 400 -13.3 400 -10z" />
-    <glyph glyph-name="calendar"
-      unicode="&#xF133;"
-      horiz-adv-x="448" d=" M400 384H352V436C352 442.6 346.6 448 340 448H300C293.4 448 288 442.6 288 436V384H160V436C160 442.6 154.6 448 148 448H108C101.4 448 96 442.6 96 436V384H48C21.5 384 0 362.5 0 336V-16C0 -42.5 21.5 -64 48 -64H400C426.5 -64 448 -42.5 448 -16V336C448 362.5 426.5 384 400 384zM394 -16H54C50.7 -16 48 -13.3 48 -10V288H400V-10C400 -13.3 397.3 -16 394 -16z" />
-    <glyph glyph-name="caret-square-down"
-      unicode="&#xF150;"
-      horiz-adv-x="448" d=" M125.1 240H322.9C333.6 240 339 227 331.4 219.5L232.5 121.2C227.8 116.5 220.3 116.5 215.6 121.2L116.7 219.5C109 227 114.4 240 125.1 240zM448 368V16C448 -10.5 426.5 -32 400 -32H48C21.5 -32 0 -10.5 0 16V368C0 394.5 21.5 416 48 416H400C426.5 416 448 394.5 448 368zM400 22V362C400 365.3 397.3 368 394 368H54C50.7 368 48 365.3 48 362V22C48 18.7 50.7 16 54 16H394C397.3 16 400 18.7 400 22z" />
-    <glyph glyph-name="caret-square-left"
-      unicode="&#xF191;"
-      horiz-adv-x="448" d=" M272 290.9V93.1C272 82.4 259 77 251.5 84.6L153.2 183.5C148.5 188.2 148.5 195.7 153.2 200.4L251.5 299.3C259 307 272 301.6 272 290.9zM448 368V16C448 -10.5 426.5 -32 400 -32H48C21.5 -32 0 -10.5 0 16V368C0 394.5 21.5 416 48 416H400C426.5 416 448 394.5 448 368zM400 22V362C400 365.3 397.3 368 394 368H54C50.7 368 48 365.3 48 362V22C48 18.7 50.7 16 54 16H394C397.3 16 400 18.7 400 22z" />
-    <glyph glyph-name="caret-square-right"
-      unicode="&#xF152;"
-      horiz-adv-x="448" d=" M176 93.1V290.9C176 301.6 189 307 196.5 299.4L294.8 200.5C299.5 195.8 299.5 188.3 294.8 183.6L196.5 84.7000000000001C189 77.0000000000001 176 82.4 176 93.1zM448 368V16C448 -10.5 426.5 -32 400 -32H48C21.5 -32 0 -10.5 0 16V368C0 394.5 21.5 416 48 416H400C426.5 416 448 394.5 448 368zM400 22V362C400 365.3 397.3 368 394 368H54C50.7 368 48 365.3 48 362V22C48 18.7 50.7 16 54 16H394C397.3 16 400 18.7 400 22z" />
-    <glyph glyph-name="caret-square-up"
-      unicode="&#xF151;"
-      horiz-adv-x="448" d=" M322.9 144H125.1C114.4 144 109 157 116.6 164.5L215.5 262.8C220.2 267.5 227.7 267.5 232.4 262.8L331.3 164.5C339 157 333.6 144 322.9000000000001 144zM448 368V16C448 -10.5 426.5 -32 400 -32H48C21.5 -32 0 -10.5 0 16V368C0 394.5 21.5 416 48 416H400C426.5 416 448 394.5 448 368zM400 22V362C400 365.3 397.3 368 394 368H54C50.7 368 48 365.3 48 362V22C48 18.7 50.7 16 54 16H394C397.3 16 400 18.7 400 22z" />
-    <glyph glyph-name="chart-bar"
-      unicode="&#xF080;"
-      horiz-adv-x="512" d=" M500 48C506.6 48 512 42.6 512 36V12C512 5.4 506.6 0 500 0H12C5.4 0 0 5.4 0 12V372C0 378.6 5.4 384 12 384H36C42.6 384 48 378.6 48 372V48H500zM144 108V180C144 186.6 138.6 192 132 192H108C101.4 192 96 186.6 96 180V108C96 101.4 101.4 96 108 96H132C138.6 96 144 101.4 144 108zM240 108V308C240 314.6 234.6 320 228 320H204C197.4 320 192 314.6 192 308V108C192 101.4 197.4 96 204 96H228C234.6 96 240 101.4 240 108zM336 108V244C336 250.6 330.6 256 324 256H300C293.4 256 288 250.6 288 244V108C288 101.4 293.4 96 300 96H324C330.6 96 336 101.4 336 108zM432 108V340C432 346.6 426.6 352 420 352H396C389.4 352 384 346.6 384 340V108C384 101.4 389.4 96 396 96H420C426.6 96 432 101.4 432 108z" />
-    <glyph glyph-name="check-circle"
-      unicode="&#xF058;"
-      horiz-adv-x="512" d=" M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8C145.468 -8 56 81.451 56 192C56 302.532 145.451 392 256 392M396.204 261.733L373.668 284.451C369.0010000000001 289.156 361.403 289.187 356.698 284.519L215.346 144.303L155.554 204.58C150.887 209.285 143.289 209.316 138.584 204.649L115.865 182.113C111.16 177.446 111.129 169.848 115.797 165.142L206.578 73.6259999999999C211.245 68.9209999999999 218.843 68.8899999999999 223.548 73.5579999999999L396.1370000000001 244.762C400.8410000000001 249.43 400.8710000000001 257.0279999999999 396.2040000000001 261.733z" />
-    <glyph glyph-name="check-square"
-      unicode="&#xF14A;"
-      horiz-adv-x="448" d=" M400 416H48C21.49 416 0 394.51 0 368V16C0 -10.51 21.49 -32 48 -32H400C426.51 -32 448 -10.51 448 16V368C448 394.51 426.51 416 400 416zM400 16H48V368H400V16zM364.136 257.724L191.547 86.52C186.842 81.853 179.244 81.883 174.577 86.588L83.796 178.104C79.129 182.809 79.159 190.407 83.865 195.075L106.584 217.611C111.289 222.278 118.887 222.248 123.554 217.542L183.346 157.265L324.698 297.481C329.403 302.148 337.001 302.118 341.668 297.413L364.204 274.695C368.871 269.9890000000001 368.841 262.391 364.136 257.724z" />
-    <glyph glyph-name="circle"
-      unicode="&#xF111;"
-      horiz-adv-x="512" d=" M256 440C119 440 8 329 8 192S119 -56 256 -56S504 55 504 192S393 440 256 440zM256 -8C145.5 -8 56 81.5 56 192S145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8z" />
-    <glyph glyph-name="clipboard"
-      unicode="&#xF328;"
-      horiz-adv-x="384" d=" M336 384H256C256 419.29 227.29 448 192 448S128 419.29 128 384H48C21.49 384 0 362.51 0 336V-16C0 -42.51 21.49 -64 48 -64H336C362.51 -64 384 -42.51 384 -16V336C384 362.51 362.51 384 336 384zM330 -16H54A6 6 0 0 0 48 -10V330A6 6 0 0 0 54 336H96V300C96 293.373 101.373 288 108 288H276C282.627 288 288 293.373 288 300V336H330A6 6 0 0 0 336 330V-10A6 6 0 0 0 330 -16zM192 408C205.255 408 216 397.255 216 384S205.255 360 192 360S168 370.745 168 384S178.745 408 192 408" />
-    <glyph glyph-name="clock"
-      unicode="&#xF017;"
-      horiz-adv-x="512" d=" M256 440C119 440 8 329 8 192S119 -56 256 -56S504 55 504 192S393 440 256 440zM256 -8C145.5 -8 56 81.5 56 192S145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8zM317.8 96.4L232.9 158.1C229.8 160.4 228 164 228 167.8V332C228 338.6 233.4 344 240 344H272C278.6 344 284 338.6 284 332V190.3L350.8 141.7C356.2 137.8 357.3 130.3 353.4000000000001 124.9L334.6 99C330.7000000000001 93.7 323.2000000000001 92.5 317.8 96.4z" />
-    <glyph glyph-name="clone"
-      unicode="&#xF24D;"
-      horiz-adv-x="512" d=" M464 448H144C117.49 448 96 426.51 96 400V352H48C21.49 352 0 330.51 0 304V-16C0 -42.51 21.49 -64 48 -64H368C394.51 -64 416 -42.51 416 -16V32H464C490.51 32 512 53.49 512 80V400C512 426.51 490.51 448 464 448zM362 -16H54A6 6 0 0 0 48 -10V298A6 6 0 0 0 54 304H96V80C96 53.49 117.49 32 144 32H368V-10A6 6 0 0 0 362 -16zM458 80H150A6 6 0 0 0 144 86V394A6 6 0 0 0 150 400H458A6 6 0 0 0 464 394V86A6 6 0 0 0 458 80z" />
-    <glyph glyph-name="closed-captioning"
-      unicode="&#xF20A;"
-      horiz-adv-x="512" d=" M464 384H48C21.5 384 0 362.5 0 336V48C0 21.5 21.5 0 48 0H464C490.5 0 512 21.5 512 48V336C512 362.5 490.5 384 464 384zM458 48H54C50.7 48 48 50.7 48 54V330C48 333.3 50.7 336 54 336H458C461.3 336 464 333.3 464 330V54C464 50.7 461.3 48 458 48zM246.9 133.7C248.6 131.3 248.4 128.1 246.4 126C192.8 69.2 73.6 93.9 73.6 193.9C73.6 291.2 195.3 313.4 246.1 264C248.2 262 248.6 260.8 247.1 258.3L229.6 227.8C227.7 224.7 223.4 223.8 220.5 226.1C179.7 258.1 125.9 241.0000000000001 125.9 194.9C125.9 146.9 176.9 124.4 218.1 162.3C220.9 164.8 225.2 164.4 227.3 161.4L246.9 133.7000000000001zM437.3 133.7C439 131.3 438.8 128.1 436.8 126C383.2 69.1 264 93.9 264 193.9C264 291.2 385.7 313.4 436.5 264C438.6 262 439 260.8 437.5 258.3L420 227.8C418.1 224.7 413.8 223.8 410.9 226.1C370.1 258.1 316.3 241.0000000000001 316.3 194.9C316.3 146.9 367.3 124.4 408.5 162.3C411.3 164.8 415.6 164.4 417.7 161.4L437.3 133.7000000000001z" />
-    <glyph glyph-name="comment-alt"
-      unicode="&#xF27A;"
-      horiz-adv-x="576" d=" M288 416C129 416 0 322.9 0 208C0 158.7 23.7 113.5 63.3 77.8C54.6 54.5 41.2 45.1 26.2 34.7C15.1 27 -6 15 1.6 -8.5C6.7 -23.9 22.5 -33.2 39.7 -31.8C97.4 -27.2 150.9 -12.6 196.7 10.7C225.4 3.8 256.1 0 287.9 0C447 0 575.9 93 575.9 208C576 322.9 447.1 416 288 416zM288 48C255.5 48 222.6 52.4 190.7 62C158.4 43 112 16 56 8C88 32 112.8 69.6 117.2 96.4C79.1 122.4 48 161.3 48 208C48 278.9 134.3 368 288 368S528 278.9 528 208C528 137 441.7 48 288 48zM224 208C224 181.5 202.5 160 176 160S128 181.5 128 208S149.5 256 176 256S224 234.5 224 208zM336 208C336 181.5 314.5 160 288 160S240 181.5 240 208S261.5 256 288 256S336 234.5 336 208zM448 208C448 181.5 426.5 160 400 160S352 181.5 352 208S373.5 256 400 256S448 234.5 448 208z" />
-    <glyph glyph-name="comment"
-      unicode="&#xF075;"
-      horiz-adv-x="576" d=" M288 416C129 416 0 322.9 0 208C0 158.7 23.7 113.5 63.3 77.8C54.6 54.5 41.2 45.1 26.2 34.7C15.1 27 -6 15 1.6 -8.5C6.7 -23.9 22.5 -33.2 39.7 -31.8C97.4 -27.2 150.9 -12.6 196.7 10.7C225.4 3.8 256.1 0 287.9 0C447 0 575.9 93 575.9 208C576 322.9 447.1 416 288 416zM288 48C255.5 48 222.6 52.4 190.7 62C158.4 43 112 16 56 8C88 32 112.8 69.6 117.2 96.4C79.1 122.4 48 161.3 48 208C48 278.9 134.3 368 288 368S528 278.9 528 208C528 137 441.7 48 288 48z" />
-    <glyph glyph-name="comments"
-      unicode="&#xF086;"
-      horiz-adv-x="576" d=" M574.507 4.14C569.0859999999999 -17.121 549.9369999999999 -32 527.996 -32C495.75 -32 461.485 -22.01 425.896 -2.266C375.256 -13.892 316.745 -10.143 267.9359999999999 11.171C309.08 14.09 348.2969999999999 23.51 384.267 39.876C400.589 41.096 416.9409999999999 44.196 432.8979999999999 49.469C454.404 35.635 490.663 16 527.996 16C495.996 33.455 484.777 54.958 481.837 74.502C507.28 93.35 527.996 121.685 527.996 155.637C527.996 166.132 525.6129999999999 177.173 520.9549999999999 188.104C528.3599999999999 214.034 529.6109999999999 238.298 526.1399999999999 262.042C558.3039999999999 231.581 575.9959999999999 192.914 575.9959999999999 155.637C575.9959999999999 121.7439999999999 563.0829999999999 90.5899999999999 541.0199999999999 64.5179999999999C543.6729999999999 62.4799999999999 546.9439999999998 60.3419999999999 550.9819999999999 58.1399999999999C570.2429999999998 47.632 579.9289999999999 25.401 574.5069999999998 4.1399999999999zM240.002 368C117.068 368 48.004 295.123 48.004 237.091C48.004 198.895 72.863 167.019 103.395 145.815C99.868 123.827 86.404 99.636 48.004 80C92.804 80 136.314 102.089 162.123 117.653C187.643 109.747 214.006 106.182 240.002 106.182C362.998 106.182 432 179.024 432 237.091C432 295.118 362.943 368 240.002 368M240.002 416C390.193 416 480 321.974 480 237.091C480 214.346 473.494 190.697 461.184 168.7C449.3060000000001 147.474 432.6450000000001 128.406 411.661 112.026C390.068 95.169 364.863 81.981 336.748 72.829C306.893 63.11 274.343 58.183 240.002 58.183C215.553 58.183 191.662 60.87 168.71 66.187C126.311 43.488 85.785 32 48.004 32C25.824 32 6.532 47.197 1.339 68.761C-3.855 90.324 6.403 112.639 26.15 122.737C33.813 126.655 39.474 130.4740000000001 43.669 134.031C36.276 141.86 29.717 150.155 24.035 158.875C8.09 183.345 0.005 209.661 0.005 237.091C0.005 321.741 89.508 416 240.002 416z" />
-    <glyph glyph-name="compass"
-      unicode="&#xF14E;"
-      horiz-adv-x="512" d=" M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM256 -8C145.468 -8 56 81.451 56 192C56 302.531 145.451 392 256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8zM347.326 304.131L313.9670000000001 166.352A24.005 24.005 0 0 0 307.1950000000001 154.623L204.5550000000001 56.844C187.4510000000001 40.551 158.9950000000001 56.41 164.6750000000001 79.868L198.0340000000001 217.647A23.997 23.997 0 0 0 204.8060000000001 229.376L307.4480000000001 327.155C324.7330000000001 343.625 352.9420000000001 327.33 347.3260000000001 304.131zM256 224C238.327 224 224 209.673 224 192S238.327 160 256 160S288 174.327 288 192S273.673 224 256 224z" />
-    <glyph glyph-name="copy"
-      unicode="&#xF0C5;"
-      horiz-adv-x="448" d=" M433.941 382.059L382.059 433.941A48 48 0 0 1 348.118 448H176C149.49 448 128 426.51 128 400V352H48C21.49 352 0 330.51 0 304V-16C0 -42.51 21.49 -64 48 -64H272C298.51 -64 320 -42.51 320 -16V32H400C426.51 32 448 53.49 448 80V348.118A48 48 0 0 1 433.941 382.059zM266 -16H54A6 6 0 0 0 48 -10V298A6 6 0 0 0 54 304H128V80C128 53.49 149.49 32 176 32H272V-10A6 6 0 0 0 266 -16zM394 80H182A6 6 0 0 0 176 86V394A6 6 0 0 0 182 400H288V312C288 298.745 298.745 288 312 288H400V86A6 6 0 0 0 394 80zM400 336H336V400H345.632C347.223 400 348.749 399.368 349.875 398.243L398.243 349.875A6 6 0 0 0 400 345.632V336z" />
-    <glyph glyph-name="copyright"
-      unicode="&#xF1F9;"
-      horiz-adv-x="512" d=" M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM256 -8C145.468 -8 56 81.451 56 192C56 302.531 145.451 392 256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8zM363.351 93.064C353.737 83.352 317.8210000000001 51.668 259.286 51.668C176.856 51.668 118.802 113.093 118.802 193.235C118.802 272.387 179.077 332.636 258.564 332.636C314.095 332.636 347.302 306.016 356.157 297.857A11.965 11.965 0 0 0 358.093 282.535L339.938 254.422C336.097 248.472 327.972 247.14 322.439 251.501C313.844 258.277 290.625 274.039 260.731 274.039C212.428 274.039 182.815 238.709 182.815 193.957C182.815 152.368 209.703 110.265 261.092 110.265C293.749 110.265 317.935 129.304 326.818 137.49C332.088 142.347 340.414 141.529 344.638 135.752L364.503 108.582A11.947000000000001 11.947000000000001 0 0 0 363.351 93.064z" />
-    <glyph glyph-name="credit-card"
-      unicode="&#xF09D;"
-      horiz-adv-x="576" d=" M527.9 416H48.1C21.5 416 0 394.5 0 368V16C0 -10.5 21.5 -32 48.1 -32H527.9C554.5 -32 576 -10.5 576 16V368C576 394.5 554.5 416 527.9 416zM54.1 368H521.9C525.1999999999999 368 527.9 365.3 527.9 362V320H48.1V362C48.1 365.3 50.8 368 54.1 368zM521.9 16H54.1C50.8 16 48.1 18.7 48.1 22V192H527.9V22C527.9 18.7 525.1999999999999 16 521.9 16zM192 116V76C192 69.4 186.6 64 180 64H108C101.4 64 96 69.4 96 76V116C96 122.6 101.4 128 108 128H180C186.6 128 192 122.6 192 116zM384 116V76C384 69.4 378.6 64 372 64H236C229.4 64 224 69.4 224 76V116C224 122.6 229.4 128 236 128H372C378.6 128 384 122.6 384 116z" />
-    <glyph glyph-name="dot-circle"
-      unicode="&#xF192;"
-      horiz-adv-x="512" d=" M256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8C145.468 -8 56 81.451 56 192C56 302.532 145.451 392 256 392M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM256 272C211.817 272 176 236.183 176 192S211.817 112 256 112S336 147.817 336 192S300.183 272 256 272z" />
-    <glyph glyph-name="edit"
-      unicode="&#xF044;"
-      horiz-adv-x="576" d=" M402.3 103.1L434.3 135.1C439.3 140.1 448 136.6 448 129.4V-16C448 -42.5 426.5 -64 400 -64H48C21.5 -64 0 -42.5 0 -16V336C0 362.5 21.5 384 48 384H321.5C328.6 384 332.2 375.4 327.2 370.3L295.2 338.3C293.7 336.8 291.7 336 289.5 336H48V-16H400V97.5C400 99.6 400.8 101.6 402.3 103.1zM558.9 304.9000000000001L296.3 42.3L205.9 32.3C179.7 29.4 157.4 51.5 160.3 77.9L170.3 168.3000000000001L432.9 430.9C455.8 453.8 492.8 453.8 515.6 430.9L558.8000000000001 387.7C581.7 364.8 581.7 327.7 558.9000000000001 304.9zM460.1 274L402 332.1L216.2 146.2L208.9 80.9L274.2 88.2L460.1 274zM524.9 353.7L481.7 396.9C477.6 401 470.9 401 466.9 396.9L436 366L494.1 307.9L525 338.8C529 343 529 349.6 524.9 353.7000000000001z" />
-    <glyph glyph-name="envelope-open"
-      unicode="&#xF2B6;"
-      horiz-adv-x="512" d=" M494.586 283.4840000000001C489.889 287.367 382.863 373.4340000000001 359.3350000000001 392.141C337.231 409.809 299.437 448 256 448C212.795 448 175.364 410.283 152.665 392.141C128.202 372.6910000000001 21.595 286.9460000000001 17.515 283.592A48.004000000000005 48.004000000000005 0 0 1 0 246.515V-16C0 -42.51 21.49 -64 48 -64H464C490.51 -64 512 -42.51 512 -16V246.491A48 48 0 0 1 494.586 283.4840000000001zM464 -10A6 6 0 0 0 458 -16H54A6 6 0 0 0 48 -10V243.653C48 245.466 48.816 247.179 50.226 248.318C66.096 261.132 159.019 335.872 182.59 354.611C200.755 369.12 232.398 400 256 400C279.693 400 311.857 368.631 329.41 354.611C352.983 335.87 445.913 261.118 461.776 248.295A5.99 5.99 0 0 0 463.9999999999999 243.632V-10zM432.009 177.704C436.2580000000001 172.545 435.474 164.909 430.264 160.723C401.289 137.44 370.99 113.126 359.3350000000001 103.86C336.636 85.717 299.205 48 256 48C212.548 48 174.713 86.237 152.665 103.86C141.386 112.827 110.921 137.273 81.738 160.725C76.528 164.912 75.745 172.547 79.993 177.706L95.251 196.234C99.429 201.307 106.908 202.077 112.03 197.96C140.648 174.959 170.596 150.925 182.59 141.389C200.143 127.369 232.307 96 256 96C279.602 96 311.246 126.88 329.41 141.389C341.404 150.924 371.354 174.959 399.973 197.957C405.095 202.073 412.574 201.303 416.751 196.23L432.009 177.704z" />
-    <glyph glyph-name="envelope"
-      unicode="&#xF0E0;"
-      horiz-adv-x="512" d=" M464 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H464C490.51 0 512 21.49 512 48V336C512 362.51 490.51 384 464 384zM464 336V295.195C441.578 276.936 405.832 248.544 329.413 188.705C312.572 175.458 279.212 143.633 256 144.004C232.792 143.629 199.421 175.463 182.587 188.705C106.18 248.535 70.425 276.933 48 295.195V336H464zM48 48V233.602C70.914 215.351 103.409 189.74 152.938 150.956C174.795 133.751 213.072 95.77 256 96.001C298.717 95.77 336.509 133.2000000000001 359.053 150.948C408.581 189.7310000000001 441.085 215.3490000000001 464 233.6010000000001V48H48z" />
-    <glyph glyph-name="eye-slash"
-      unicode="&#xF070;"
-      horiz-adv-x="576" d=" M272.702 88.861C192.219 97.872 136.49 175.747 155.772 255.903L272.702 88.861zM288 56C185.444 56 95.908 110.701 48 192C69.755 228.917 100.1 260.342 136.344 283.658L108.803 323.0010000000001C67.001 295.766 31.921 259.259 6.646 216.369A47.999 47.999 0 0 1 6.646 167.63C63.004 71.994 168.14 8 288 8A332.89 332.89 0 0 1 327.648 10.367L295.627 56.111A284.16 284.16 0 0 0 288 56zM569.354 167.631C536.1220000000001 111.237 485.933 65.889 425.8000000000001 38.139L473.9160000000001 -30.601C477.717 -36.03 476.3960000000001 -43.513 470.967 -47.313L450.23 -61.83C444.8010000000001 -65.631 437.3180000000001 -64.3099999999999 433.5180000000001 -58.881L102.084 414.601C98.283 420.03 99.604 427.513 105.033 431.313L125.77 445.83C131.199 449.631 138.682 448.31 142.482 442.881L198.008 363.556C226.612 371.657 256.808 376 288 376C407.86 376 512.996 312.006 569.354 216.369A48.00200000000001 48.00200000000001 0 0 0 569.354 167.631zM528 192C483.843 266.933 404.323 319.27 311.838 327.007C302.042 316.9220000000001 296 303.17 296 288C296 257.072 321.072 232 352 232S408 257.072 408 288L407.999 288.0420000000001C438.6310000000001 230.765 424.738 157.7820000000001 371.0710000000001 116.323L397.766 78.188C452.626 101.449 498.308 141.614 528 192z" />
-    <glyph glyph-name="file-alt"
-      unicode="&#xF15C;"
-      horiz-adv-x="384" d=" M288 200V172C288 165.4 282.6 160 276 160H108C101.4 160 96 165.4 96 172V200C96 206.6 101.4 212 108 212H276C282.6 212 288 206.6 288 200zM276 128H108C101.4 128 96 122.6 96 116V88C96 81.4 101.4 76 108 76H276C282.6 76 288 81.4 288 88V116C288 122.6 282.6 128 276 128zM384 316.1V-16C384 -42.5 362.5 -64 336 -64H48C21.5 -64 0 -42.5 0 -16V400C0 426.5 21.5 448 48 448H252.1C264.8 448 277 442.9 286 433.9L369.9 350C378.9 341.1 384 328.8 384 316.1zM256 396.1V320H332.1L256 396.1zM336 -16V272H232C218.7 272 208 282.7 208 296V400H48V-16H336z" />
-    <glyph glyph-name="file-archive"
-      unicode="&#xF1C6;"
-      horiz-adv-x="384" d=" M369.941 350.059L286.059 433.9410000000001A48 48 0 0 1 252.118 448H48C21.49 448 0 426.51 0 400V-16C0 -42.51 21.49 -64 48 -64H336C362.51 -64 384 -42.51 384 -16V316.118A48 48 0 0 1 369.941 350.059zM256 396.118L332.118 320H256V396.118zM336 -16H48V400H127.714V384H159.714V400H208V296C208 282.745 218.745 272 232 272H336V-16zM192.27 352H160.27V384H192.27V352zM160.27 352V320H128.27V352H160.27zM160.27 288V256H128.27V288H160.27zM192.27 288H160.27V320H192.27V288zM194.179 182.322A12 12 0 0 1 182.406 192H160.27V224H128.27V192L108.58 94.894C101.989 62.389 126.834 32 160 32C193.052 32 217.871 62.192 211.476 94.62L194.179 182.322zM160.27 57.927C142.352 57.927 127.826 70.032 127.826 84.963C127.826 99.895 142.351 111.999 160.27 111.999S192.714 99.894 192.714 84.963C192.714 70.032 178.188 57.927 160.27 57.927zM192.27 224H160.27V256H192.27V224z" />
-    <glyph glyph-name="file-audio"
-      unicode="&#xF1C7;"
-      horiz-adv-x="384" d=" M369.941 350.059L286.059 433.9410000000001A48 48 0 0 1 252.118 448H48C21.49 448 0 426.51 0 400V-16C0 -42.51 21.49 -64 48 -64H336C362.51 -64 384 -42.51 384 -16V316.118A48 48 0 0 1 369.941 350.059zM332.118 320H256V396.118L332.118 320zM48 -16V400H208V296C208 282.745 218.745 272 232 272H336V-16H48zM192 60.024C192 49.333 179.074 43.979 171.515 51.539L136 87.514H108C101.373 87.514 96 92.887 96 99.514V155.514C96 162.141 101.373 167.514 108 167.514H136L171.515 204.461C179.075 212.021 192 206.667 192 195.976V60.024zM233.201 107.154C242.252 116.451 242.261 131.287 233.202 140.593C211.053 163.345 245.437 196.839 267.597 174.074C294.795 146.134 294.809 101.63 267.598 73.673C245.805 51.287 210.651 83.988 233.201 107.154z" />
-    <glyph glyph-name="file-code"
-      unicode="&#xF1C9;"
-      horiz-adv-x="384" d=" M369.941 350.059L286.059 433.9410000000001A48 48 0 0 1 252.118 448H48C21.49 448 0 426.51 0 400V-16C0 -42.51 21.49 -64 48 -64H336C362.51 -64 384 -42.51 384 -16V316.118A48 48 0 0 1 369.941 350.059zM332.118 320H256V396.118L332.118 320zM48 -16V400H208V296C208 282.745 218.745 272 232 272H336V-16H48zM149.677 99.115L116.854 128L149.676 156.885A8.793 8.793 0 0 1 150.281 169.509L132.878 188.073C129.494 191.686 123.914 191.735 120.44 188.4740000000001L62.78 134.42C59.077 130.946 59.076 125.053 62.781 121.5800000000001L120.44 67.525A8.738 8.738 0 0 1 126.452 65.1440000000001A8.746 8.746 0 0 1 132.879 67.9260000000001L150.282 86.489A8.795 8.795 0 0 1 149.677 99.115zM233.961 226.965L209.56 234.049A8.796 8.796 0 0 1 198.655 228.051L144.04 39.939C142.687 35.279 145.378 30.387 150.038 29.0340000000001L174.441 21.95C179.121 20.595 183.998 23.304 185.346 27.948L239.958 216.06C241.312 220.72 238.621 225.612 233.961 226.9650000000001zM321.219 134.42L263.561 188.475C260.035 191.7820000000001 254.462 191.6400000000001 251.122 188.074L233.719 169.511A8.795 8.795 0 0 1 234.324 156.886L267.146 128L234.324 99.115A8.793 8.793 0 0 1 233.719 86.491L251.122 67.927A8.797 8.797 0 0 1 263.5610000000001 67.526H263.5600000000001L321.2200000000001 121.581C324.923 125.054 324.923 130.947 321.2190000000001 134.42z" />
-    <glyph glyph-name="file-excel"
-      unicode="&#xF1C3;"
-      horiz-adv-x="384" d=" M369.9 350.1L286 434C277 443 264.8 448.1 252.1 448.1H48C21.5 448 0 426.5 0 400V-16C0 -42.5 21.5 -64 48 -64H336C362.5 -64 384 -42.5 384 -16V316.1C384 328.8 378.9 341.1 369.9 350.1zM332.1 320H256V396.1L332.1 320zM48 -16V400H208V296C208 282.7 218.7 272 232 272H336V-16H48zM260 224H231.2C226.8 224 222.8 221.6 220.7 217.7C202.7 184.6 198.5 175.3 192.1 160C178.2 189.1 185.2 177.3 163.5 217.7C161.4 221.6 157.3 224 152.9 224H124C114.7 224 109 214 113.6 206L159.9 128L113.6 50C108.9 42 114.7 32 124 32H152.9C157.3 32 161.3 34.4 163.4 38.3C185.1 78.3 186.4 83.3 192 96C206.9 65.8 197.9 80.1 220.6 38.3C222.7 34.4 226.8 32 231.2 32H260C269.3 32 275 42 270.4 50L224 128C224.7 129.1 254.3 178.5 270.3 206C275 214 269.2 224 260 224z" />
-    <glyph glyph-name="file-image"
-      unicode="&#xF1C5;"
-      horiz-adv-x="384" d=" M369.9 350.1L286 434C277 443 264.8 448.1 252.1 448.1H48C21.5 448 0 426.5 0 400V-16C0 -42.5 21.5 -64 48 -64H336C362.5 -64 384 -42.5 384 -16V316.1C384 328.8 378.9 341.1 369.9 350.1zM332.1 320H256V396.1L332.1 320zM48 -16V400H208V296C208 282.7 218.7 272 232 272H336V-16H48zM80 32H304V160L280.5 183.5C275.8 188.2 268.2 188.2 263.5 183.5L176 96L136.5 135.5C131.8 140.2 124.2 140.2 119.5 135.5L80 96V32zM128 272C101.5 272 80 250.5 80 224S101.5 176 128 176S176 197.5 176 224S154.5 272 128 272z" />
-    <glyph glyph-name="file-pdf"
-      unicode="&#xF1C1;"
-      horiz-adv-x="384" d=" M369.9 350.1L286 434C277 443 264.8 448.1 252.1 448.1H48C21.5 448 0 426.5 0 400V-16C0 -42.5 21.5 -64 48 -64H336C362.5 -64 384 -42.5 384 -16V316.1C384 328.8 378.9 341.1 369.9 350.1zM332.1 320H256V396.1L332.1 320zM48 -16V400H208V296C208 282.7 218.7 272 232 272H336V-16H48zM298.2 127.7C286 139.7 251.2 136.4 233.8 134.2C216.6 144.7 205.1 159.2 197 180.5C200.9 196.6 207.1 221.1 202.4 236.5C198.2 262.7 164.6 260.1 159.8 242.4C155.4 226.3 159.4 203.9 166.8 175.3C156.8 151.4 141.9 119.3 131.4 100.9C111.4 90.6 84.4 74.7 80.4 54.7C77.1 38.9 106.4 -0.5 156.5 85.9C178.9 93.3 203.3 102.4 224.9 106C243.8 95.8 265.9 89 280.7 89C306.2 89 308.7 117.2 298.2 127.7zM100.1 49.9C105.2 63.6 124.6 79.4 130.5 84.9C111.5 54.6 100.1 49.2 100.1 49.9zM181.7 240.5C189.1 240.5 188.4 208.4 183.5 199.7C179.1 213.6 179.2 240.5 181.7 240.5zM157.3 103.9C167 120.8 175.3 140.9 182 158.6C190.3 143.5 200.9 131.4 212.1 123.1C191.3 118.8 173.2 109.9999999999999 157.3 103.9zM288.9 108.9S283.9 102.9 251.6 116.7C286.7 119.3 292.5 111.3 288.9 108.9z" />
-    <glyph glyph-name="file-powerpoint"
-      unicode="&#xF1C4;"
-      horiz-adv-x="384" d=" M369.9 350.1L286 434C277 443 264.8 448.1 252.1 448.1H48C21.5 448 0 426.5 0 400V-16C0 -42.5 21.5 -64 48 -64H336C362.5 -64 384 -42.5 384 -16V316.1C384 328.8 378.9 341.1 369.9 350.1zM332.1 320H256V396.1L332.1 320zM48 -16V400H208V296C208 282.7 218.7 272 232 272H336V-16H48zM120 44V212C120 218.6 125.4 224 132 224H201.2C237.9 224 264 197 264 157.7C264 83.4 195.3 91.2 168.5 91.2V44C168.5 37.4 163.1 32 156.5 32H132C125.4 32 120 37.4 120 44zM168.5 131.4H191.5C199.4 131.4 205.4 133.8 209.6 138.6C218.1 148.4 218 167.1 209.7 176.4C205.6 181 199.8 183.4 192.3 183.4H168.4V131.4z" />
-    <glyph glyph-name="file-video"
-      unicode="&#xF1C8;"
-      horiz-adv-x="384" d=" M369.941 350.059L286.059 433.9410000000001A48 48 0 0 1 252.118 448H48C21.49 448 0 426.51 0 400V-16C0 -42.51 21.49 -64 48 -64H336C362.51 -64 384 -42.51 384 -16V316.118A48 48 0 0 1 369.941 350.059zM332.118 320H256V396.118L332.118 320zM48 -16V400H208V296C208 282.745 218.745 272 232 272H336V-16H48zM276.687 195.303L224 142.626V180C224 191.046 215.046 200 204 200H100C88.954 200 80 191.046 80 180V76C80 64.954 88.954 56 100 56H204C215.046 56 224 64.954 224 76V113.374L276.687 60.7000000000001C286.704 50.682 304 57.72 304 72.014V183.989C304 198.3 286.691 205.308 276.687 195.303z" />
-    <glyph glyph-name="file-word"
-      unicode="&#xF1C2;"
-      horiz-adv-x="384" d=" M369.9 350.1L286 434C277 443 264.8 448.1 252.1 448.1H48C21.5 448 0 426.5 0 400V-16C0 -42.5 21.5 -64 48 -64H336C362.5 -64 384 -42.5 384 -16V316.1C384 328.8 378.9 341.1 369.9 350.1zM332.1 320H256V396.1L332.1 320zM48 -16V400H208V296C208 282.7 218.7 272 232 272H336V-16H48zM268.1 192C262.4000000000001 192 257.5 188 256.4000000000001 182.5C235.8000000000001 84.8 236.0000000000001 87.1 235.4000000000001 79C235.2000000000001 80.2 235.0000000000001 81.6 234.7000000000001 83.3C233.9000000000001 88.4 235.0000000000001 83.1 211.1000000000001 182.8C209.8000000000001 188.2 205.0000000000001 192 199.4000000000001 192H186.1000000000001C180.6000000000001 192 175.8000000000001 188.2 174.4000000000001 182.9C150.0000000000001 83.9 150.4000000000001 86.7 149.6000000000001 79.2C149.5000000000001 80.3 149.4000000000001 81.7 149.1000000000001 83.4C148.4000000000001 88.6 135.0000000000001 156.7 130.0000000000001 182.4C128.9000000000001 188 124.0000000000001 192.1 118.2000000000001 192.1H101.4000000000001C93.6000000000001 192.1 87.9000000000001 184.8 89.7000000000001 177.3C97.7000000000001 144.6999999999999 116.4000000000001 67.8 122.9000000000001 41.3C124.2000000000001 35.9 129.0000000000001 32.1999999999999 134.6000000000001 32.1999999999999H159.8000000000001C165.3000000000001 32.1999999999999 170.1000000000001 35.8999999999999 171.4 41.3L189.3000000000001 112.6999999999999C190.8000000000001 118.8999999999999 191.8000000000001 124.6999999999999 192.3000000000001 130L195.2000000000001 112.6999999999999C195.3000000000001 112.3 207.8000000000001 62.1999999999999 213.1000000000001 41.3C214.4000000000001 35.9999999999999 219.2000000000001 32.1999999999999 224.7000000000001 32.1999999999999H249.4000000000001C254.9000000000001 32.1999999999999 259.7000000000001 35.8999999999999 261.0000000000001 41.3C281.8000000000001 123.1999999999999 291.2000000000001 160.3 295.5000000000001 177.3C297.4000000000001 184.9 291.7000000000001 192.2 283.9000000000001 192.2H268.1z" />
-    <glyph glyph-name="file"
-      unicode="&#xF15B;"
-      horiz-adv-x="384" d=" M369.9 350.1L286 434C277 443 264.8 448.1 252.1 448.1H48C21.5 448 0 426.5 0 400V-16C0 -42.5 21.5 -64 48 -64H336C362.5 -64 384 -42.5 384 -16V316.1C384 328.8 378.9 341.1 369.9 350.1zM332.1 320H256V396.1L332.1 320zM48 -16V400H208V296C208 282.7 218.7 272 232 272H336V-16H48z" />
-    <glyph glyph-name="flag"
-      unicode="&#xF024;"
-      horiz-adv-x="512" d=" M336.174 368C287.042 368 242.869 400 174.261 400C142.96 400 115.958 393.5180000000001 93.54 384.832A48.04 48.04 0 0 1 95.682 405.559C93.067 428.425 74.167 446.406 51.201 447.896C23.242 449.71 0 427.569 0 400C0 382.236 9.657 366.738 24 358.438V-48C24 -56.837 31.163 -64 40 -64H56C64.837 -64 72 -56.837 72 -48V35.443C109.869 52.72 143.259 64 199.826 64C248.958 64 293.131 32 361.7390000000001 32C420.218 32 463.711 54.617 490.287 71.981C503.846 80.839 512 95.949 512 112.145V352.063C512 386.522 476.736 409.831 445.096 396.18C409.193 380.6910000000001 371.641 368 336.174 368zM464 112C442.217 96.588 403.176 80 361.7390000000001 80C301.7940000000001 80 259.737 112 199.826 112C156.465 112 103.447 102.597 72 88V320C93.784 335.4120000000001 132.824 352 174.261 352C234.206 352 276.2630000000001 320 336.1740000000001 320C379.4450000000001 320 432.4940000000001 337.366 464 352V112z" />
-    <glyph glyph-name="folder-open"
-      unicode="&#xF07C;"
-      horiz-adv-x="576" d=" M527.943 224H480V272C480 298.51 458.51 320 432 320H272L208 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H448A48.001 48.001 0 0 1 488.704 22.56L568.646 150.56C588.5939999999999 182.477 565.608 224 527.943 224zM54 336H188.118L252.118 272H426A6 6 0 0 0 432 266V224H152A48 48 0 0 1 110.902 200.798L48 96.551V330.007A5.993 5.993 0 0 0 54 336zM448 48H72L149.234 176H528L448 48z" />
-    <glyph glyph-name="folder"
-      unicode="&#xF07B;"
-      horiz-adv-x="512" d=" M464 320H272L208 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H464C490.51 0 512 21.49 512 48V272C512 298.51 490.51 320 464 320zM458 48H54C50.686 48 48 50.678 48 53.992V330.008A5.993 5.993 0 0 0 54 336H188.118L252.118 272H458A6 6 0 0 0 464 266V54A6 6 0 0 0 458 48z" />
-    <glyph glyph-name="frown"
-      unicode="&#xF119;"
-      horiz-adv-x="512" d=" M256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8C145.468 -8 56 81.451 56 192C56 302.532 145.451 392 256 392M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM320 304C310.465 304 301.488 301.6140000000001 293.63 297.411H293.647C306.382 297.411 316.706 287.087 316.706 274.352C316.706 261.617 306.382 251.293 293.647 251.293S270.588 261.617 270.588 274.352V274.3690000000001C266.386 266.512 264 257.535 264 248C264 217.072 289.072 192 320 192S376 217.072 376 248S350.928 304 320 304zM192 304C182.465 304 173.488 301.6140000000001 165.63 297.411H165.647C178.382 297.411 188.706 287.087 188.706 274.352C188.706 261.617 178.382 251.293 165.647 251.293C152.912 251.293 142.588 261.617 142.588 274.352V274.3690000000001C138.386 266.512 136 257.535 136 248C136 217.072 161.072 192 192 192S248 217.072 248 248S222.928 304 192 304zM363.5470000000001 102.218C306.952 179.182 205.164 179.283 148.4900000000001 102.2189999999999C129.6700000000001 76.6259999999999 168.3480000000001 48.2009999999999 187.16 73.781C224.671 124.791 287.5250000000001 124.577 324.8770000000001 73.7819999999999C343.3860000000001 48.6099999999999 382.6980000000001 76.1769999999999 363.5470000000001 102.2179999999999z" />
-    <glyph glyph-name="futbol"
-      unicode="&#xF1E3;"
-      horiz-adv-x="496" d=" M483.8 268.6C449.8 373.4 352.6 440 248.1 440C222.7 440 196.9 436.1 171.4 427.8C41.2 385.5 -30.1 245.6 12.2 115.4C46.2 10.6 143.4 -56 247.9 -56C273.3 -56 299.1 -52.1 324.6 -43.8C454.8 -1.5 526.1 138.4 483.8 268.6zM409.3 74.9L357.1 68.5L313.4000000000001 129.4L337.8 204.6L408.9 226.7L447.8 190.3C447.6 159.6 440.4 129.1999999999999 426.1 101.1C421.4 91.8 415.4 83.3 409.3 74.9zM409.3 310.3L398.9000000000001 257.2L328.2000000000001 235.2L264.0000000000001 281.7V355.5L311.4000000000001 381.7C350.6 368.7 384.8000000000001 343.7 409.3000000000001 310.3zM184.9 381.6L232 355.5V281.7L167.8 235.2L97.2 257.2L87.1 309.7C111.4 343.1 145 368.3 184.9 381.6zM139 68.5L85.9 75C71.5 95.1 48.6 134.6 48.1 190.3L87.1 226.7L158.2 204.5L182.5 130.2000000000001L139 68.5000000000001zM187.2 1.5L164.8 49.6L208.4 111.3H287L331.3 49.6L308.9000000000001 1.5C302.7000000000001 -0.3 251.3000000000001 -18.9 187.2000000000001 1.5z" />
-    <glyph glyph-name="gem"
-      unicode="&#xF3A5;"
-      horiz-adv-x="576" d=" M464 448H112C108 448 104.2 446 102 442.6L2 295.4C-0.9 291 -0.6 285.2000000000001 2.7 281.2000000000001L278.7 -59.6C283.5 -65.5 292.5 -65.5 297.3 -59.6L573.3 281.2C576.5999999999999 285.3 576.9 291 574 295.4L474.1 442.6C471.8 446 468.1 448 464 448zM444.7 400L508 304H439.6L387.9000000000001 400H444.7000000000001zM242.6 400H333.3L385 304H191L242.6 400zM131.3 400H188.1L136.4 304H68L131.3 400zM88.3 256H139.7L208 96L88.3 256zM191.2 256H384.8L288 12.7L191.2 256zM368 96L436.2 256H487.6L368 96z" />
-    <glyph glyph-name="hand-lizard"
-      unicode="&#xF258;"
-      horiz-adv-x="576" d=" M556.686 157.458L410.328 383.171C397.001 403.728 374.417 416 349.917 416H56C25.121 416 0 390.878 0 360V352C0 307.8880000000001 35.888 272 80 272H276.0420000000001L257.7090000000001 224H144C95.477 224 56 184.523 56 136C56 105.121 81.121 80 112 80H243.552C246.539 80 249.466 79.451 252.249 78.369L352 39.582V-32H576V92.171C576 115.396 569.321 137.972 556.686 157.458zM528 16H400V39.582C400 59.53 387.986 77.09 369.396 84.318L269.645 123.106A71.733 71.733 0 0 1 243.552 128H112C107.589 128 104 131.589 104 136C104 158.056 121.944 176 144 176H257.709C277.476 176 295.495 188.407 302.549 206.873L327.101 271.154C336.097 294.707 318.673 320 293.471 320H80C62.355 320 48 334.355 48 352V360C48 364.411 51.589 368 56 368H349.917C358.083 368 365.61 363.91 370.054 357.058L516.412 131.343A71.84 71.84 0 0 0 528 92.171V16z" />
-    <glyph glyph-name="hand-paper"
-      unicode="&#xF256;"
-      horiz-adv-x="448" d=" M372.57 335.359V346.184C372.57 389.796 332.05 422.875 289.531 411.73C263.902 461.23 195.441 459.18 171.549 410.983C130.269 421.544 89.144 390.055 89.144 346V219.87C69.191 227.297 45.836 224.938 27.061 210.999C-2.294 189.203 -8.733 147.666 12.511 117.846L132.48 -50.569A32 32 0 0 1 158.542 -64.001H381.439C396.343 -64.001 409.274 -53.712 412.621 -39.188L442.805 91.77A203.637 203.637 0 0 1 448 137.436V269C448 309.62 412.477 340.992 372.57 335.359zM399.997 137.437C399.997 125.706 398.663 113.968 396.0320000000001 102.551L368.707 -16H166.787L51.591 145.697C37.152 165.967 66.614 188.473 80.985 168.302L108.113 130.223C117.108 117.597 137.144 123.936 137.144 139.506V346C137.144 371.645 173.715 370.81 173.715 345.309V192C173.715 183.163 180.878 176 189.715 176H196.571C205.408 176 212.571 183.163 212.571 192V381C212.571 406.663 249.142 405.81 249.142 380.309V192C249.142 183.163 256.305 176 265.142 176H271.998C280.835 176 287.998 183.163 287.998 192V346.875C287.998 372.5470000000001 324.568 371.685 324.568 346.184V192C324.568 183.163 331.731 176 340.568 176H347.425C356.262 176 363.425 183.163 363.425 192V268.309C363.425 294.551 399.995 293.949 399.995 269V137.437z" />
-    <glyph glyph-name="hand-peace"
-      unicode="&#xF25B;"
-      horiz-adv-x="448" d=" M362.146 256.024C348.4360000000001 277.673 323.385 290.04 297.14 286.365V374C297.14 414.804 264.329 448 223.999 448C183.669 448 150.859 414.804 150.859 374L160 280L141.321 358.85C126.578 397.157 83.85 415.89 46.209 400.7920000000001C8.735 385.762 -9.571 343.0370000000001 5.008 305.15L60.765 160.223C30.208 135.267 16.771 102.414 36.032 68.005L90.885 -29.994C102.625 -50.97 124.73 -64 148.575 -64H354.277C385.021 -64 411.835 -42.56 418.832 -12.203L446.259 106.7960000000001A67.801 67.801 0 0 1 447.988 121.999L448 192C448 236.956 404.737 269.343 362.146 256.024zM399.987 122C399.987 120.512 399.8180000000001 119.023 399.485 117.577L372.058 -1.424C370.08 -10.006 362.768 -16 354.276 -16H148.575C142.089 -16 136.033 -12.379 132.77 -6.551L77.916 91.449C73.359 99.59 75.297 110.117 82.424 115.937L109.071 137.701A16 16 0 0 1 113.883 155.84L49.793 322.389C37.226 355.044 84.37 373.163 96.51 341.611L156.294 186.254A16 16 0 0 1 171.227 176H182.859C191.696 176 198.859 183.163 198.859 192V374C198.859 408.375 249.14 408.43 249.14 374V192C249.14 183.163 256.303 176 265.14 176H271.996C280.833 176 287.996 183.163 287.996 192V220C287.996 245.122 324.563 245.159 324.563 220V192C324.563 183.163 331.726 176 340.563 176H347.419C356.256 176 363.419 183.163 363.419 192C363.419 217.12 399.986 217.16 399.986 192V122z" />
-    <glyph glyph-name="hand-point-down"
-      unicode="&#xF0A7;"
-      horiz-adv-x="448" d=" M188.8 -64C234.416 -64 272 -26.235 272 19.2V54.847A93.148 93.148 0 0 1 294.064 62.776C316.0700000000001 60.269 339.0420000000001 66.2789999999999 356.855 78.761C409.342 79.9 448 116.159 448 178.701V200C448 260.063 408 298.512 408 327.2V329.879C412.952 335.626 416 343.415 416 351.999V416C416 433.673 403.106 448 387.2 448H156.8C140.894 448 128 433.673 128 416V352C128 343.416 131.048 335.627 136 329.88V327.201C136 320.237 129.807 312.339 112.332 297.0180000000001L112.184 296.889L112.038 296.7580000000001C102.101 287.9020000000001 91.197 278.642 78.785 270.9070000000001C48.537 252.202 0 240.514 0 195.2C0 138.272 35.286 103.2 83.2 103.2C91.226 103.2 98.689 104.014 105.6 105.376V19.2C105.6 -25.899 143.701 -64 188.8 -64zM188.8 -16C170.1 -16 153.6 0.775 153.6 19.2V177.6C136.275 177.6 118.4 151.2000000000001 83.2 151.2000000000001C56.8 151.2000000000001 48 171.8250000000001 48 195.2000000000001C48 203.9940000000001 80.712 215.6450000000001 104.1 230.1260000000001C118.675 239.2000000000001 131.325 249.6500000000001 143.975 260.9250000000001C162.349 277.0340000000001 180.608 294.761 183.571 320.0000000000001H360.3230000000001C364.087 277.2100000000001 400 245.491 400 200V178.701C400 138.177 377.803 121.577 338.675 128.1C330.6740000000001 113.488 304.6960000000001 103.949 285.05 115.175C266.825 95.81 238.669 97.388 224 110.225V19.2C224 0.225 207.775 -16 188.8 -16zM328 384C328 397.255 338.745 408 352 408S376 397.255 376 384S365.255 360 352 360S328 370.745 328 384z" />
-    <glyph glyph-name="hand-point-left"
-      unicode="&#xF0A5;"
-      horiz-adv-x="512" d=" M0 227.2C0 181.584 37.765 144 83.2 144H118.847A93.148 93.148 0 0 1 126.776 121.936C124.269 99.93 130.279 76.958 142.761 59.145C143.9 6.658 180.159 -32 242.701 -32H264C324.063 -32 362.512 8 391.2 8H393.879C399.626 3.048 407.415 0 415.999 0H479.999C497.672 0 511.999 12.894 511.999 28.8V259.2C511.999 275.106 497.672 288 479.999 288H415.999C407.415 288 399.626 284.952 393.879 280H391.2C384.236 280 376.338 286.193 361.017 303.668L360.888 303.8160000000001L360.757 303.962C351.901 313.899 342.641 324.803 334.906 337.215C316.202 367.463 304.514 416 259.2 416C202.272 416 167.2 380.714 167.2 332.8C167.2 324.774 168.014 317.3110000000001 169.376 310.4H83.2C38.101 310.4 0 272.299 0 227.2zM48 227.2C48 245.9 64.775 262.4 83.2 262.4H241.6C241.6 279.725 215.2 297.6 215.2 332.8C215.2 359.2 235.825 368 259.2000000000001 368C267.9940000000001 368 279.6450000000001 335.288 294.1260000000001 311.9C303.2000000000001 297.325 313.6500000000001 284.675 324.925 272.025C341.034 253.651 358.761 235.392 384 232.429V55.677C341.21 51.913 309.491 16 264 16H242.701C202.177 16 185.577 38.197 192.1 77.325C177.488 85.326 167.949 111.304 179.175 130.95C159.81 149.175 161.388 177.331 174.225 192H83.2C64.225 192 48 208.225 48 227.2zM448 88C461.255 88 472 77.255 472 64S461.255 40 448 40S424 50.745 424 64S434.745 88 448 88z" />
-    <glyph glyph-name="hand-point-right"
-      unicode="&#xF0A4;"
-      horiz-adv-x="512" d=" M428.8 310.4H342.623A115.52 115.52 0 0 1 344.799 332.8C344.799 380.714 309.727 416 252.799 416C207.485 416 195.797 367.463 177.092 337.216C169.357 324.803 160.098 313.899 151.241 303.963L151.11 303.817L150.981 303.6690000000001C135.662 286.193 127.764 280 120.8 280H118.121C112.374 284.952 104.585 288 96.001 288H32C14.327 288 0 275.106 0 259.2V28.8C0 12.894 14.327 0 32 0H96C104.584 0 112.373 3.048 118.12 8H120.799C149.487 8 187.936 -32 247.999 -32H269.298C331.8400000000001 -32 368.098 6.658 369.238 59.145C381.7200000000001 76.958 387.729 99.93 385.223 121.936A93.148 93.148 0 0 1 393.152 144H428.8C474.235 144 512 181.584 512 227.2C512 272.299 473.899 310.4 428.8 310.4zM428.8 192H337.774C350.611 177.331 352.189 149.175 332.824 130.95C344.051 111.304 334.511 85.326 319.899 77.325C326.423 38.197 309.823 16 269.299 16H248C202.509 16 170.79 51.913 128 55.676V232.429C153.239 235.393 170.966 253.651 187.075 272.025C198.35 284.675 208.8 297.3250000000001 217.874 311.9C232.355 335.288 244.006 368 252.8 368C276.175 368 296.8 359.2 296.8 332.8C296.8 297.6 270.4000000000001 279.725 270.4000000000001 262.4H428.8000000000001C447.2250000000001 262.4 464.0000000000001 245.9 464.0000000000001 227.2C464.0000000000001 208.225 447.7750000000001 192 428.8000000000001 192zM88 64C88 50.745 77.255 40 64 40S40 50.745 40 64S50.745 88 64 88S88 77.255 88 64z" />
-    <glyph glyph-name="hand-point-up"
-      unicode="&#xF0A6;"
-      horiz-adv-x="448" d=" M105.6 364.8V278.623A115.52 115.52 0 0 1 83.2 280.799C35.286 280.799 0 245.727 0 188.799C0 143.485 48.537 131.797 78.784 113.092C91.197 105.357 102.101 96.098 112.037 87.241L112.183 87.11L112.331 86.981C129.807 71.662 136 63.764 136 56.8V54.121C131.048 48.374 128 40.585 128 32.001V-31.999C128 -49.672 140.894 -63.999 156.8 -63.999H387.2000000000001C403.1060000000001 -63.999 416.0000000000001 -49.672 416.0000000000001 -31.999V32.001C416.0000000000001 40.585 412.9520000000001 48.374 408.0000000000001 54.121V56.8C408.0000000000001 85.488 448.0000000000001 123.937 448.0000000000001 184V205.299C448.0000000000001 267.841 409.3420000000001 304.099 356.8550000000001 305.2390000000001C339.0420000000001 317.721 316.0700000000001 323.73 294.0640000000001 321.224A93.148 93.148 0 0 1 272 329.153V364.8C272 410.235 234.416 448 188.8 448C143.701 448 105.6 409.899 105.6 364.8zM224 364.8V273.774C238.669 286.611 266.825 288.189 285.05 268.824C304.6960000000001 280.0510000000001 330.6740000000001 270.511 338.675 255.899C377.803 262.423 400 245.823 400 205.299V184C400 138.509 364.087 106.79 360.324 64H183.571C180.607 89.239 162.349 106.966 143.975 123.075C131.325 134.35 118.675 144.8 104.1 153.874C80.712 168.355 48 180.006 48 188.8C48 212.175 56.8 232.8 83.2 232.8C118.4 232.8 136.275 206.4 153.6 206.4V364.8C153.6 383.225 170.1 400 188.8 400C207.775 400 224 383.775 224 364.8zM352 24C365.255 24 376 13.255 376 0S365.255 -24 352 -24S328 -13.255 328 0S338.745 24 352 24z" />
-    <glyph glyph-name="hand-pointer"
-      unicode="&#xF25A;"
-      horiz-adv-x="448" d=" M358.182 268.639C338.689 293.4070000000001 305.5030000000001 300.584 278.31 287.737C263.183 303.4240000000001 242.128 310.2240000000001 221.715 307.366V381C221.715 417.944 191.979 448 155.429 448S89.143 417.944 89.143 381V219.871C69.234 227.281 45.871 224.965 27.06 210.999C-2.295 189.204 -8.733 147.6660000000001 12.51 117.847L122.209 -36.154C134.632 -53.59 154.741 -64 176 -64H354.286C385.088 -64 411.86 -42.5 418.843 -12.203L446.272 106.7960000000001A67.873 67.873 0 0 1 448 122V206C448 252.844 401.375 285.273 358.182 268.639zM80.985 168.303L108.111 130.224C117.106 117.598 137.142 123.937 137.142 139.507V381C137.142 406.12 173.713 406.16 173.713 381V206C173.713 197.164 180.876 190 189.713 190H196.57C205.407 190 212.57 197.164 212.57 206V241C212.57 266.12 249.141 266.16 249.141 241V206C249.141 197.164 256.304 190 265.141 190H272C280.837 190 288 197.164 288 206V227C288 252.12 324.5710000000001 252.16 324.5710000000001 227V206C324.5710000000001 197.164 331.7340000000001 190 340.5710000000001 190H347.4280000000001C356.2650000000001 190 363.4280000000001 197.164 363.4280000000001 206C363.4280000000001 231.121 399.999 231.16 399.999 206V122C399.999 120.512 399.8300000000001 119.023 399.497 117.577L372.067 -1.424C370.089 -10.006 362.777 -16 354.2850000000001 -16H176C170.231 -16 164.737 -13.122 161.303 -8.303L51.591 145.697C37.185 165.92 66.585 188.515 80.985 168.303zM176.143 48V144C176.143 152.837 182.411 160 190.143 160H196.143C203.875 160 210.143 152.837 210.143 144V48C210.143 39.163 203.875 32 196.143 32H190.143C182.41 32 176.143 39.163 176.143 48zM251.571 48V144C251.571 152.837 257.839 160 265.5710000000001 160H271.5710000000001C279.3030000000001 160 285.5710000000001 152.837 285.5710000000001 144V48C285.5710000000001 39.163 279.3030000000001 32 271.5710000000001 32H265.5710000000001C257.839 32 251.5710000000001 39.163 251.5710000000001 48zM327 48V144C327 152.837 333.268 160 341 160H347C354.7320000000001 160 361 152.837 361 144V48C361 39.163 354.7320000000001 32 347 32H341C333.268 32 327 39.163 327 48z" />
-    <glyph glyph-name="hand-rock"
-      unicode="&#xF255;"
-      horiz-adv-x="512" d=" M408.864 368.948C386.463 402.846 342.756 411.221 310.051 392.536C280.577 424.005 230.906 423.629 201.717 392.558C154.557 419.578 93.007 387.503 91.046 331.752C44.846 342.593 0 307.999 0 260.5710000000001V203.618C0 170.877 14.28 139.664 39.18 117.984L136.89 32.903C141.142 29.201 140 27.33 140 -1e-13C140 -17.6730000000001 154.327 -32.0000000000001 172 -32.0000000000001H424C441.673 -32.0000000000001 456 -17.6730000000001 456 -1e-13C456 23.5129999999999 454.985 30.745 459.982 42.37L502.817 142.026C508.911 156.203 512 171.198 512 186.5939999999999V301.0370000000001C512 353.876 457.686 389.699 408.8640000000001 368.948zM464 186.594A64.505 64.505 0 0 0 458.718 160.981L415.8830000000001 61.326C410.653 49.155 408.0000000000001 36.286 408.0000000000001 23.076V16H188V26.286C188 42.656 180.86 58.263 168.41 69.103L70.7 154.183C56.274 166.745 48 184.764 48 203.619V260.572C48 293.78 100 294.1090000000001 100 259.895V218.667A16 16 0 0 1 105.493 206.6L112.493 200.505A16 16 0 0 1 139 212.571V329.1430000000001C139 362.24 191 362.868 191 328.466V301.7150000000001C191 292.879 198.164 285.7150000000001 207 285.7150000000001H214C222.836 285.7150000000001 230 292.879 230 301.7150000000001V342.858C230 375.992 282 376.533 282 342.181V301.7150000000001C282 292.879 289.163 285.7150000000001 298 285.7150000000001H305C313.837 285.7150000000001 321 292.879 321 301.7150000000001V329.144C321 362.174 373 362.924 373 328.467V301.716C373 292.88 380.163 285.716 389 285.716H396C404.837 285.716 412 292.88 412 301.716C412 334.862 464 335.329 464 301.039V186.5940000000001z" />
-    <glyph glyph-name="hand-scissors"
-      unicode="&#xF257;"
-      horiz-adv-x="512" d=" M256 -32L326 -31.987C331.114 -31.987 336.231 -31.404 341.203 -30.258L460.202 -2.831C490.56 4.165 512 30.98 512 61.723V267.425C512 291.27 498.97 313.376 477.995 325.115L379.996 379.968C345.587 399.2290000000001 312.733 385.7920000000001 287.778 355.235L142.85 410.992C104.963 425.5710000000001 62.238 407.265 47.208 369.791C32.11 332.149 50.843 289.421 89.15 274.679L168 256L74 265.141C33.196 265.141 0 232.33 0 192.001C0 151.671 33.196 118.86 74 118.86H161.635C157.96 92.615 170.327 67.563 191.976 53.8539999999999C178.657 11.263 211.044 -32 256 -32zM256 16.013C230.84 16.013 230.88 52.58 256 52.58C264.837 52.58 272 59.743 272 68.58V75.436C272 84.273 264.837 91.436 256 91.436H228C202.841 91.436 202.878 128.003 228 128.003H256C264.837 128.003 272 135.166 272 144.003V150.859C272 159.696 264.837 166.859 256 166.859H74C39.57 166.859 39.625 217.14 74 217.14H256C264.837 217.14 272 224.303 272 233.14V244.772A16 16 0 0 1 261.746 259.705L106.389 319.49C74.837 331.63 92.957 378.773 125.611 366.207L292.16 302.116A16.001 16.001 0 0 1 310.299 306.928L332.063 333.5750000000001C337.883 340.702 348.411 342.639 356.551 338.0830000000001L454.551 283.2290000000001C460.379 279.966 464 273.911 464 267.424V61.723C464 53.232 458.006 45.919 449.424 43.941L330.423 16.514A19.743 19.743 0 0 0 326 16.012H256z" />
-    <glyph glyph-name="hand-spock"
-      unicode="&#xF259;"
-      horiz-adv-x="512" d=" M21.096 66.21L150.188 -55.303A32 32 0 0 1 172.12 -64.001H409.7200000000001C423.8900000000001 -64.001 436.3730000000001 -54.682 440.4000000000001 -41.097L472.215 66.216A115.955 115.955 0 0 1 477 99.189V136.028C477 140.079 477.476 144.132 478.414 148.073L510.144 281.4830000000001C520.243 323.8950000000001 487.828 364.221 444.6 364.0080000000001C440.456 388.8640000000001 422.057 411.1730000000001 394.75 418.0000000000001C358.947 426.9520000000001 322.523 405.3450000000001 313.5 369.25L296.599 264L274.924 395.99C266.638 432.06 230.621 454.562 194.62 446.286C165.004 439.4820000000001 144.482 413.897 142.738 384.991C100.101 384.16 69.283 344.428 78.667 303.147L109.707 166.639C82.513 189.154 42.423 186.631 18.225 160.917C-7.151 133.956 -5.873 91.592 21.096 66.21zM53.164 128.021L53.166 128.0219999999999C60.385 135.694 72.407 136.002 80.022 128.8349999999999L133.034 78.9409999999999C143.225 69.351 160 76.6 160 90.594V160.073C160 161.266 159.866 162.456 159.603 163.619L125.473 313.791C119.877 338.408 156.975 346.651 162.527 322.212L192.926 188.4549999999999A16 16 0 0 1 208.529 176.0009999999999H217.1330000000001C227.4090000000001 176.0009999999999 235.0270000000001 185.5679999999999 232.7270000000001 195.5839999999999L191.107 376.7369999999999C185.484 401.2059999999999 222.497 409.813 228.142 385.2449999999999L273.362 188.4169999999999A16 16 0 0 1 288.956 176H302.173A16 16 0 0 1 317.695 188.119L360.067 357.6090000000001C366.171 382.0310000000001 403.029 372.7680000000001 396.932 348.3920000000001L358.805 195.88C356.284 185.792 363.92 176 374.327 176H384.021A16 16 0 0 1 399.586 188.295L426.509 301.4C432.3300000000001 325.848 469.306 317.087 463.475 292.598L431.7200000000001 159.19A100.094 100.094 0 0 1 429 136.028V99.189C429 92.641 428.057 86.138 426.195 79.8610000000001L397.775 -16H178.465L53.978 101.164C46.349 108.344 45.984 120.393 53.164 128.021z" />
-    <glyph glyph-name="handshake"
-      unicode="&#xF2B5;"
-      horiz-adv-x="640" d=" M616 352H568C560.893 352 554.51 348.909 550.116 344H526.59L495.46 380.3L495.3 380.48A103.974 103.974 0 0 1 417.03 416H370.48C352.73 416 335.58 411.06 320.79 401.99C304.33 411.07 285.67 416 266.62 416H234.51C205.607 416 176.911 404.781 155.31 383.2L116.12 344H89.884C85.49 348.909 79.107 352 72 352H24C10.745 352 0 341.255 0 328V88C0 74.745 10.745 64 24 64H72C82.449 64 91.334 70.68 94.629 80H113.43L188.78 12.43C214.322 -14.02 248.705 -32 285.36 -32C301.75 -32 317.64 -28.15 331.4600000000001 -21.07C356.396 -21.566 382.5610000000001 -10.702 400.5300000000001 10.34C420.2140000000001 15.919 438.033 27.766 451.25 44.9400000000001C472.239 49.3410000000001 491.978 61.4320000000001 504.67 80.0000000000001H545.371C548.6659999999999 70.6800000000001 557.5509999999999 64.0000000000001 568 64.0000000000001H616C629.255 64.0000000000001 640 74.7450000000001 640 88.0000000000001V328C640 341.255 629.255 352 616 352zM48 96C39.163 96 32 103.163 32 112S39.163 128 48 128S64 120.837 64 112S56.837 96 48 96zM460.52 101.76C445.17 87.465 423.636 90.432 420.57 93.76C421.984 80.378 402.313 52.717 371.49 54.88C365.949 36.357 343.272 21.054 320 29.13C311.11 20.24 297.54 16 285.36 16C260.4100000000001 16 237.59 30.54 222.22 46.91L140.92 119.8200000000001A31.975999999999996 31.975999999999996 0 0 1 119.56 128.0000000000001H96V296H122.75C131.23 296 139.37 299.37 145.37 305.37L189.25 349.25A64.004 64.004 0 0 0 234.51 368H266.62C272.42 368 278.13 367.21 283.62 365.7L240.35 315.2100000000001C216.79 287.73 216.51 247.59 239.69 219.77C272.078 180.904 331.068 180.542 364.17 217.79L390.1500000000001 247.87L462.59 152C476.03 137.4 473.54 113.87 460.52 101.76zM544 128H519.542C519.6460000000001 148.261 512.743 167.33 499.78 182.4L421.7 285.7200000000001C426.21 295.23 424.04 306.95 415.69 314.17C405.615 322.861 390.46 321.669 381.83 311.69L328.2 249.57C314.372 234.16 289.977 234.425 276.56 250.5A25.856999999999996 25.856999999999996 0 0 0 276.79 283.9700000000001L334.7100000000001 351.55A47.09 47.09 0 0 0 370.48 368H417.0300000000001C433.1400000000001 368 448.4700000000001 361.06 459.1 348.9600000000001L504.52 296H544V128zM592 96C583.163 96 576 103.163 576 112S583.163 128 592 128S608 120.837 608 112S600.837 96 592 96z" />
-    <glyph glyph-name="hdd"
-      unicode="&#xF0A0;"
-      horiz-adv-x="576" d=" M567.403 212.358L462.323 363.411A48 48 0 0 1 422.919 384H153.081A48 48 0 0 1 113.677 363.411L8.597 212.358A48.001 48.001 0 0 1 0 184.946V48C0 21.49 21.49 0 48 0H528C554.51 0 576 21.49 576 48V184.946C576 194.747 573 204.312 567.403 212.358zM153.081 336H422.919L500.832 224H75.168L153.081 336zM528 48H48V176H528V48zM496 112C496 94.327 481.673 80 464 80S432 94.327 432 112S446.327 144 464 144S496 129.673 496 112zM400 112C400 94.327 385.673 80 368 80S336 94.327 336 112S350.327 144 368 144S400 129.673 400 112z" />
-    <glyph glyph-name="heart"
-      unicode="&#xF004;"
-      horiz-adv-x="576" d=" M257.3 -27.4L92.5 134.4C85.4 141 24 199.9 24 273.2C24 363.9 80.8 424 176 424C217.4 424 256.6 401.2 288 374.2C319.3 401.2 358.6 424 400 424C491.7 424 552 367.5 552 273.2C552 221.2 520.2 169.7 483.9 134.5L483.5 134.1L318.7 -27.4A43.7 43.7 0 0 0 257.3 -27.4zM125.9 168.9L288 9.7L449.8 168.4C477.1 195.4 504 234.7 504 273.2C504 340.1 465.8 376 400 376C352.8 376 307.2 326.7 288 307.6C271 324.6 224 376 176 376C110.1 376 72 340.1 72 273.2C72 235.9 98.7 194.3 125.9 168.9z" />
-    <glyph glyph-name="hospital"
-      unicode="&#xF0F8;"
-      horiz-adv-x="448" d=" M128 204V244C128 250.627 133.373 256 140 256H180C186.627 256 192 250.627 192 244V204C192 197.373 186.627 192 180 192H140C133.373 192 128 197.373 128 204zM268 192H308C314.627 192 320 197.373 320 204V244C320 250.627 314.627 256 308 256H268C261.373 256 256 250.627 256 244V204C256 197.373 261.373 192 268 192zM192 108V148C192 154.627 186.627 160 180 160H140C133.373 160 128 154.627 128 148V108C128 101.373 133.373 96 140 96H180C186.627 96 192 101.373 192 108zM268 96H308C314.627 96 320 101.373 320 108V148C320 154.627 314.627 160 308 160H268C261.373 160 256 154.627 256 148V108C256 101.373 261.373 96 268 96zM448 -28V-64H0V-28C0 -21.373 5.373 -16 12 -16H31.5V362.9650000000001C31.5 374.582 42.245 384 55.5 384H144V424C144 437.255 154.745 448 168 448H280C293.255 448 304 437.255 304 424V384H392.5C405.755 384 416.5 374.582 416.5 362.9650000000001V-16H436C442.627 -16 448 -21.373 448 -28zM79.5 -15H192V52C192 58.627 197.373 64 204 64H244C250.627 64 256 58.627 256 52V-15H368.5V336H304V312C304 298.745 293.255 288 280 288H168C154.745 288 144 298.745 144 312V336H79.5V-15zM266 384H240V410A6 6 0 0 1 234 416H214A6 6 0 0 1 208 410V384H182A6 6 0 0 1 176 378V358A6 6 0 0 1 182 352H208V326A6 6 0 0 1 214 320H234A6 6 0 0 1 240 326V352H266A6 6 0 0 1 272 358V378A6 6 0 0 1 266 384z" />
-    <glyph glyph-name="hourglass"
-      unicode="&#xF254;"
-      horiz-adv-x="384" d=" M368 400H372C378.627 400 384 405.373 384 412V436C384 442.627 378.627 448 372 448H12C5.373 448 0 442.627 0 436V412C0 405.373 5.373 400 12 400H16C16 319.4360000000001 48.188 234.193 113.18 192C47.899 149.619 16 64.1 16 -16H12C5.373 -16 0 -21.373 0 -28V-52C0 -58.627 5.373 -64 12 -64H372C378.627 -64 384 -58.627 384 -52V-28C384 -21.373 378.627 -16 372 -16H368C368 64.564 335.812 149.807 270.82 192C336.102 234.381 368 319.9 368 400zM64 400H320C320 298.38 262.693 216 192 216S64 298.379 64 400zM320 -16H64C64 85.62 121.308 168 192 168S320 85.62 320 -16z" />
-    <glyph glyph-name="id-badge"
-      unicode="&#xF2C1;"
-      horiz-adv-x="384" d=" M0 400V-16C0 -42.51 21.49 -64 48 -64H336C362.51 -64 384 -42.51 384 -16V400C384 426.51 362.51 448 336 448H48C21.49 448 0 426.51 0 400zM336 368V-10A6 6 0 0 0 330 -16H54A6 6 0 0 0 48 -10V368H336zM192 288C230.66 288 262 256.66 262 218S230.66 148 192 148S122 179.34 122 218S153.34 288 192 288zM272.187 141.953L240.987 149.753C208.208 126.176 168.477 131.437 143.013 149.753L111.813 141.953C93.116 137.279 80 120.48 80 101.207V85C80 73.402 89.402 64 101 64H283C294.598 64 304 73.402 304 85V101.207C304 120.48 290.884 137.279 272.187 141.953z" />
-    <glyph glyph-name="id-card"
-      unicode="&#xF2C2;"
-      horiz-adv-x="512" d=" M404 192H300C293.373 192 288 197.373 288 204V220C288 226.627 293.373 232 300 232H404C410.627 232 416 226.627 416 220V204C416 197.373 410.627 192 404 192zM416 132V148C416 154.627 410.627 160 404 160H300C293.373 160 288 154.627 288 148V132C288 125.373 293.373 120 300 120H404C410.627 120 416 125.373 416 132zM512 336V48C512 21.49 490.51 0 464 0H48C21.49 0 0 21.49 0 48V336C0 362.51 21.49 384 48 384H464C490.51 384 512 362.51 512 336zM464 54V304H48V54A6 6 0 0 1 54 48H458A6 6 0 0 1 464 54zM176 256C203.614 256 226 233.614 226 206S203.614 156 176 156S126 178.386 126 206S148.386 256 176 256zM233.276 151.681L210.991 157.252C187.578 140.411 159.198 144.169 141.01 157.252L118.725 151.681C105.369 148.342 96 136.343 96 122.577V111C96 102.716 102.716 96 111 96H241C249.284 96 256 102.716 256 111V122.577C256 136.343 246.631 148.342 233.276 151.681z" />
-    <glyph glyph-name="image"
-      unicode="&#xF03E;"
-      horiz-adv-x="512" d=" M464 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H464C490.51 0 512 21.49 512 48V336C512 362.51 490.51 384 464 384zM458 48H54A6 6 0 0 0 48 54V330A6 6 0 0 0 54 336H458A6 6 0 0 0 464 330V54A6 6 0 0 0 458 48zM128 296C105.909 296 88 278.091 88 256S105.909 216 128 216S168 233.909 168 256S150.091 296 128 296zM96 96H416V176L328.485 263.515C323.7990000000001 268.201 316.201 268.201 311.514 263.515L192 144L152.485 183.515C147.799 188.201 140.201 188.201 135.514 183.515L96 144V96z" />
-    <glyph glyph-name="images"
-      unicode="&#xF302;"
-      horiz-adv-x="576" d=" M480 32V16C480 -10.51 458.51 -32 432 -32H48C21.49 -32 0 -10.51 0 16V272C0 298.51 21.49 320 48 320H64V272H54A6 6 0 0 1 48 266V22A6 6 0 0 1 54 16H426A6 6 0 0 1 432 22V32H480zM522 368H150A6 6 0 0 1 144 362V118A6 6 0 0 1 150 112H522A6 6 0 0 1 528 118V362A6 6 0 0 1 522 368zM528 416C554.51 416 576 394.51 576 368V112C576 85.49 554.51 64 528 64H144C117.49 64 96 85.49 96 112V368C96 394.51 117.49 416 144 416H528zM264 304C264 281.909 246.091 264 224 264S184 281.909 184 304S201.909 344 224 344S264 326.091 264 304zM192 208L231.515 247.515C236.201 252.201 243.799 252.201 248.486 247.515L288 208L391.515 311.515C396.201 316.201 403.799 316.201 408.486 311.515L480 240V160H192V208z" />
-    <glyph glyph-name="keyboard"
-      unicode="&#xF11C;"
-      horiz-adv-x="576" d=" M528 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H528C554.51 0 576 21.49 576 48V336C576 362.51 554.51 384 528 384zM536 48C536 43.589 532.411 40 528 40H48C43.589 40 40 43.589 40 48V336C40 340.411 43.589 344 48 344H528C532.411 344 536 340.411 536 336V48zM170 178V206C170 212.627 164.627 218 158 218H130C123.373 218 118 212.627 118 206V178C118 171.373 123.373 166 130 166H158C164.627 166 170 171.373 170 178zM266 178V206C266 212.627 260.627 218 254 218H226C219.373 218 214 212.627 214 206V178C214 171.373 219.373 166 226 166H254C260.627 166 266 171.373 266 178zM362 178V206C362 212.627 356.627 218 350 218H322C315.373 218 310 212.627 310 206V178C310 171.373 315.373 166 322 166H350C356.627 166 362 171.373 362 178zM458 178V206C458 212.627 452.627 218 446 218H418C411.373 218 406 212.627 406 206V178C406 171.373 411.373 166 418 166H446C452.627 166 458 171.373 458 178zM122 96V124C122 130.627 116.627 136 110 136H82C75.373 136 70 130.627 70 124V96C70 89.373 75.373 84 82 84H110C116.627 84 122 89.373 122 96zM506 96V124C506 130.627 500.627 136 494 136H466C459.373 136 454 130.627 454 124V96C454 89.373 459.373 84 466 84H494C500.627 84 506 89.373 506 96zM122 260V288C122 294.627 116.627 300 110 300H82C75.373 300 70 294.627 70 288V260C70 253.373 75.373 248 82 248H110C116.627 248 122 253.373 122 260zM218 260V288C218 294.627 212.627 300 206 300H178C171.373 300 166 294.627 166 288V260C166 253.373 171.373 248 178 248H206C212.627 248 218 253.373 218 260zM314 260V288C314 294.627 308.627 300 302 300H274C267.373 300 262 294.627 262 288V260C262 253.373 267.373 248 274 248H302C308.627 248 314 253.373 314 260zM410 260V288C410 294.627 404.627 300 398 300H370C363.373 300 358 294.627 358 288V260C358 253.373 363.373 248 370 248H398C404.627 248 410 253.373 410 260zM506 260V288C506 294.627 500.627 300 494 300H466C459.373 300 454 294.627 454 288V260C454 253.373 459.373 248 466 248H494C500.627 248 506 253.373 506 260zM408 102V118C408 124.627 402.627 130 396 130H180C173.373 130 168 124.627 168 118V102C168 95.373 173.373 90 180 90H396C402.627 90 408 95.373 408 102z" />
-    <glyph glyph-name="lemon"
-      unicode="&#xF094;"
-      horiz-adv-x="512" d=" M484.112 420.111C455.989 448.233 416.108 456.057 387.0590000000001 439.135C347.604 416.152 223.504 489.111 91.196 356.803C-41.277 224.328 31.923 100.528 8.866 60.942C-8.056 31.891 -0.234 -7.99 27.888 -36.112C56.023 -64.247 95.899 -72.0499999999999 124.945 -55.133C164.368 -32.163 288.502 -105.102 420.803 27.196C553.277 159.673 480.076 283.473 503.134 323.057C520.056 352.1070000000001 512.234 391.988 484.112 420.111zM461.707 347.217C422.907 280.608 507.307 181.582 386.862 61.137C266.422 -59.306 167.387 25.089 100.786 -13.706C78.1069999999999 -26.913 36.751 13.535 50.2929999999999 36.782C89.0929999999999 103.391 4.6929999999999 202.417 125.138 322.862C245.573 443.298 344.616 358.914 411.219 397.708C433.949 410.948 475.224 370.42 461.707 347.217zM291.846 338.481C293.216 327.521 285.442 317.524 274.481 316.154C219.635 309.299 138.702 228.367 131.846 173.519C130.473 162.53 120.447 154.785 109.52 156.154C98.559 157.524 90.785 167.52 92.155 178.48C101.317 251.766 196.322 346.6950000000001 269.5200000000001 355.8450000000001C280.473 357.213 290.4760000000001 349.442 291.8460000000001 338.481z" />
-    <glyph glyph-name="life-ring"
-      unicode="&#xF1CD;"
-      horiz-adv-x="512" d=" M256 -56C392.967 -56 504 55.033 504 192S392.967 440 256 440S8 328.967 8 192S119.033 -56 256 -56zM152.602 20.72L206.013 74.131C237.819 60.625 274.141 60.609 305.987 74.131L359.398 20.72C296.1810000000001 -17.599 215.819 -17.599 152.602 20.72zM336 192C336 147.888 300.112 112 256 112S176 147.888 176 192S211.888 272 256 272S336 236.112 336 192zM427.28 88.602L373.869 142.013C387.374 173.819 387.391 210.141 373.869 241.987L427.28 295.398C465.599 232.181 465.599 151.819 427.28 88.602zM359.397 363.28L305.986 309.8690000000001C274.18 323.374 237.858 323.391 206.013 309.8690000000001L152.602 363.28C215.819 401.599 296.1810000000001 401.599 359.397 363.28zM84.72 295.398L138.131 241.987C124.625 210.181 124.609 173.859 138.131 142.013L84.72 88.602C46.401 151.819 46.401 232.181 84.72 295.398z" />
-    <glyph glyph-name="lightbulb"
-      unicode="&#xF0EB;"
-      horiz-adv-x="384" d=" M272 20V-8C272 -18.449 265.32 -27.334 256 -30.629V-40C256 -53.255 245.255 -64 232 -64H152C138.745 -64 128 -53.255 128 -40V-30.629C118.68 -27.334 112 -18.449 112 -8V20C112 26.627 117.373 32 124 32H260C266.627 32 272 26.627 272 20zM128 272C128 307.29 156.71 336 192 336C200.837 336 208 343.164 208 352S200.837 368 192 368C139.065 368 96 324.935 96 272C96 263.164 103.164 256 112 256S128 263.164 128 272zM192 400C262.734 400 320 342.746 320 272C320 194.398 282.617 211.523 239.02 112H144.98C101.318 211.67 64 194.131 64 272C64 342.735 121.254 400 192 400M192 448C94.805 448 16 369.197 16 272C16 170.269 67.697 180.459 106.516 79.326C110.066 70.077 118.986 64 128.892 64H255.107C265.013 64 273.933 70.078 277.483 79.326C316.303 180.459 368 170.269 368 272C368 369.197 289.195 448 192 448z" />
-    <glyph glyph-name="list-alt"
-      unicode="&#xF022;"
-      horiz-adv-x="512" d=" M464 416H48C21.49 416 0 394.51 0 368V16C0 -10.51 21.49 -32 48 -32H464C490.51 -32 512 -10.51 512 16V368C512 394.51 490.51 416 464 416zM458 16H54A6 6 0 0 0 48 22V362A6 6 0 0 0 54 368H458A6 6 0 0 0 464 362V22A6 6 0 0 0 458 16zM416 108V84C416 77.373 410.627 72 404 72H204C197.373 72 192 77.373 192 84V108C192 114.627 197.373 120 204 120H404C410.627 120 416 114.627 416 108zM416 204V180C416 173.373 410.627 168 404 168H204C197.373 168 192 173.373 192 180V204C192 210.627 197.373 216 204 216H404C410.627 216 416 210.627 416 204zM416 300V276C416 269.373 410.627 264 404 264H204C197.373 264 192 269.373 192 276V300C192 306.627 197.373 312 204 312H404C410.627 312 416 306.627 416 300zM164 288C164 268.118 147.882 252 128 252S92 268.118 92 288S108.118 324 128 324S164 307.882 164 288zM164 192C164 172.118 147.882 156 128 156S92 172.118 92 192S108.118 228 128 228S164 211.882 164 192zM164 96C164 76.118 147.882 60 128 60S92 76.118 92 96S108.118 132 128 132S164 115.882 164 96z" />
-    <glyph glyph-name="map"
-      unicode="&#xF279;"
-      horiz-adv-x="576" d=" M508.505 411.83L381.517 355.424L207.179 413.537A47.992 47.992 0 0 1 172.505 411.863L28.505 347.863A48 48 0 0 1 0 304V16.033C0 -18.905 35.991 -41.831 67.495 -27.83L194.483 28.576L368.822 -29.537A47.992 47.992 0 0 1 403.496 -27.863L547.496 36.137A48 48 0 0 1 576 80V367.967C576 402.905 540.009 425.831 508.505 411.83zM360 24L216 72V360L360 312V24zM48 16V304L168 357.333V69.333L48 16zM528 80L408 26.667V314.6670000000001L528 368V80z" />
-    <glyph glyph-name="meh"
-      unicode="&#xF11A;"
-      horiz-adv-x="512" d=" M256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8C145.468 -8 56 81.451 56 192C56 302.532 145.451 392 256 392M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM320 304C310.465 304 301.488 301.6140000000001 293.63 297.411H293.647C306.382 297.411 316.706 287.087 316.706 274.352C316.706 261.617 306.382 251.293 293.647 251.293S270.588 261.617 270.588 274.352V274.3690000000001C266.386 266.512 264 257.535 264 248C264 217.072 289.072 192 320 192S376 217.072 376 248S350.928 304 320 304zM192 304C182.465 304 173.488 301.6140000000001 165.63 297.411H165.647C178.382 297.411 188.706 287.087 188.706 274.352C188.706 261.617 178.382 251.293 165.647 251.293C152.912 251.293 142.588 261.617 142.588 274.352V274.3690000000001C138.386 266.512 136 257.535 136 248C136 217.072 161.072 192 192 192S248 217.072 248 248S222.928 304 192 304zM328 120H184C152.224 120 152.251 72 184 72H328C359.776 72 359.749 120 328 120z" />
-    <glyph glyph-name="minus-square"
-      unicode="&#xF146;"
-      horiz-adv-x="448" d=" M108 164C101.4 164 96 169.4 96 176V208C96 214.6 101.4 220 108 220H340C346.6 220 352 214.6 352 208V176C352 169.4 346.6 164 340 164H108zM448 368V16C448 -10.5 426.5 -32 400 -32H48C21.5 -32 0 -10.5 0 16V368C0 394.5 21.5 416 48 416H400C426.5 416 448 394.5 448 368zM400 22V362C400 365.3 397.3 368 394 368H54C50.7 368 48 365.3 48 362V22C48 18.7 50.7 16 54 16H394C397.3 16 400 18.7 400 22z" />
-    <glyph glyph-name="money-bill-alt"
-      unicode="&#xF3D1;"
-      horiz-adv-x="640" d=" M320 304C266.979 304 224 253.857 224 192C224 130.153 266.977 80 320 80C373 80 416 130.13 416 192C416 253.857 373.021 304 320 304zM368 139.572C368 132.095 364.0830000000001 128 356.428 128H289.135C281.479 128 277.562 132.095 277.562 139.572V148.473C277.562 155.95 281.479 160.045 289.135 160.045H304.266V199.923C304.266 205.086 304.8 210.426 304.8 210.426H304.444S302.665 207.756 301.596 206.688C297.1449999999999 202.415 291.092 202.237 285.93 207.756L280.412 213.987C275.07 219.328 275.428 225.203 280.946 230.366L302.666 250.305C307.115 254.4 311.032 256.002 317.086 256.002H329.191C336.847 256.002 340.941 252.086 340.941 244.43V160.046H356.429C364.084 160.046 368.001 155.952 368.001 148.474V139.572zM616 384H24C10.745 384 0 373.255 0 360V25C0 11.745 10.745 1 24 1H616C629.255 1 640 11.745 640 25V360C640 373.255 629.255 384 616 384zM512 48H128C128 92.183 92.183 128 48 128V256C92.183 256 128 291.817 128 336H512C512 291.817 547.817 256 592 256V128C547.817 128 512 92.183 512 48z" />
-    <glyph glyph-name="moon"
-      unicode="&#xF186;"
-      horiz-adv-x="512" d=" M279.135 -64C357.891 -64 430.117 -28.196 477.979 30.775C506.249 65.606 475.421 116.497 431.73 108.176C349.382 92.493 273.458 155.444 273.458 238.968C273.458 287.392 299.518 331.26 340.892 354.804C379.637 376.854 369.891 435.592 325.87 443.723A257.936 257.936 0 0 1 279.135 448C137.775 448 23.135 333.425 23.135 192C23.135 50.64 137.711 -64 279.135 -64zM279.135 400C292.12 400 304.824 398.799 317.151 396.522C262.391 365.359 225.4580000000001 306.48 225.4580000000001 238.968C225.4580000000001 125.12 329.0990000000001 39.768 440.7100000000001 61.024C402.574 14.036 344.366 -16 279.135 -16C164.26 -16 71.135 77.125 71.135 192S164.26 400 279.135 400z" />
-    <glyph glyph-name="newspaper"
-      unicode="&#xF1EA;"
-      horiz-adv-x="576" d=" M552 384H112C91.142 384 73.357 370.623 66.752 352H24C10.745 352 0 341.255 0 328V56C0 25.072 25.072 0 56 0H552C565.255 0 576 10.745 576 24V360C576 373.255 565.255 384 552 384zM48 56V304H64V56C64 51.589 60.411 48 56 48S48 51.589 48 56zM528 48H111.422C111.796 50.614 112 53.283 112 56V336H528V48zM172 168H308C314.627 168 320 173.373 320 180V276C320 282.627 314.627 288 308 288H172C165.373 288 160 282.627 160 276V180C160 173.373 165.373 168 172 168zM200 248H280V208H200V248zM160 108V132C160 138.627 165.373 144 172 144H308C314.627 144 320 138.627 320 132V108C320 101.373 314.627 96 308 96H172C165.373 96 160 101.373 160 108zM352 108V132C352 138.627 357.373 144 364 144H468C474.627 144 480 138.627 480 132V108C480 101.373 474.627 96 468 96H364C357.373 96 352 101.373 352 108zM352 252V276C352 282.627 357.373 288 364 288H468C474.627 288 480 282.627 480 276V252C480 245.373 474.627 240 468 240H364C357.373 240 352 245.373 352 252zM352 180V204C352 210.627 357.373 216 364 216H468C474.627 216 480 210.627 480 204V180C480 173.373 474.627 168 468 168H364C357.373 168 352 173.373 352 180z" />
-    <glyph glyph-name="object-group"
-      unicode="&#xF247;"
-      horiz-adv-x="512" d=" M500 320C506.627 320 512 325.373 512 332V404C512 410.627 506.627 416 500 416H428C421.373 416 416 410.627 416 404V392H96V404C96 410.627 90.627 416 84 416H12C5.373 416 0 410.627 0 404V332C0 325.373 5.373 320 12 320H24V64H12C5.373 64 0 58.627 0 52V-20C0 -26.627 5.373 -32 12 -32H84C90.627 -32 96 -26.627 96 -20V-8H416V-20C416 -26.627 421.373 -32 428 -32H500C506.627 -32 512 -26.627 512 -20V52C512 58.627 506.627 64 500 64H488V320H500zM448 384H480V352H448V384zM32 384H64V352H32V384zM64 0H32V32H64V0zM480 0H448V32H480V0zM440 64H428C421.373 64 416 58.627 416 52V40H96V52C96 58.627 90.627 64 84 64H72V320H84C90.627 320 96 325.373 96 332V344H416V332C416 325.373 421.373 320 428 320H440V64zM404 256H320V308C320 314.628 314.627 320 308 320H108C101.373 320 96 314.628 96 308V140C96 133.372 101.373 128 108 128H192V76C192 69.372 197.373 64 204 64H404C410.627 64 416 69.372 416 76V244C416 250.628 410.627 256 404 256zM136 280H280V168H136V280zM376 104H232V128H308C314.627 128 320 133.372 320 140V216H376V104z" />
-    <glyph glyph-name="object-ungroup"
-      unicode="&#xF248;"
-      horiz-adv-x="576" d=" M564 224C570.627 224 576 229.373 576 236V308C576 314.627 570.627 320 564 320H492C485.373 320 480 314.627 480 308V296H392V320H404C410.627 320 416 325.373 416 332V404C416 410.627 410.627 416 404 416H332C325.373 416 320 410.627 320 404V392H96V404C96 410.627 90.627 416 84 416H12C5.373 416 0 410.627 0 404V332C0 325.373 5.373 320 12 320H24V160H12C5.373 160 0 154.627 0 148V76C0 69.373 5.373 64 12 64H84C90.627 64 96 69.373 96 76V88H184V64H172C165.373 64 160 58.627 160 52V-20C160 -26.627 165.373 -32 172 -32H244C250.627 -32 256 -26.627 256 -20V-8H480V-20C480 -26.627 485.373 -32 492 -32H564C570.627 -32 576 -26.627 576 -20V52C576 58.627 570.627 64 564 64H552V224H564zM352 384H384V352H352V384zM352 128H384V96H352V128zM64 96H32V128H64V96zM64 352H32V384H64V352zM96 136V148C96 154.627 90.627 160 84 160H72V320H84C90.627 320 96 325.373 96 332V344H320V332C320 325.373 325.373 320 332 320H344V160H332C325.373 160 320 154.627 320 148V136H96zM224 0H192V32H224V0zM504 64H492C485.373 64 480 58.627 480 52V40H256V52C256 58.627 250.627 64 244 64H232V88H320V76C320 69.373 325.373 64 332 64H404C410.627 64 416 69.373 416 76V148C416 154.627 410.627 160 404 160H392V248H480V236C480 229.373 485.373 224 492 224H504V64zM544 0H512V32H544V0zM544 256H512V288H544V256z" />
-    <glyph glyph-name="paper-plane"
-      unicode="&#xF1D8;"
-      horiz-adv-x="512" d=" M440 441.5L24 201.6C-10.4 181.7 -7.1 130.8 29.7 115.7L144 68.4V-16C144 -62.4 203.2 -81.5 230.6 -44.6L274.4 14.5L386.3 -31.7C392.2 -34.1 398.4 -35.3 404.6 -35.3C412.8 -35.3 420.9 -33.2 428.2 -29.1C441 -21.9 449.8 -9.1 452.1 5.4L511.4999999999999 392.6C517.5999999999999 432.7 474.6 461.4 440 441.5zM192 -16V48.6L228.6 33.5L192 -16zM404.6 12.7L250.8 76.2L391 278.5C401.7 294 381.5 312 367.3 299.7L155.8 115.4L48 160L464 400L404.6 12.7z" />
-    <glyph glyph-name="pause-circle"
-      unicode="&#xF28B;"
-      horiz-adv-x="512" d=" M256 440C119 440 8 329 8 192S119 -56 256 -56S504 55 504 192S393 440 256 440zM256 -8C145.5 -8 56 81.5 56 192S145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8zM352 272V112C352 103.2 344.8 96 336 96H288C279.2 96 272 103.2 272 112V272C272 280.8 279.2 288 288 288H336C344.8 288 352 280.8 352 272zM240 272V112C240 103.2 232.8 96 224 96H176C167.2 96 160 103.2 160 112V272C160 280.8 167.2 288 176 288H224C232.8 288 240 280.8 240 272z" />
-    <glyph glyph-name="play-circle"
-      unicode="&#xF144;"
-      horiz-adv-x="512" d=" M371.7 210L195.7 317C179.9 325.8 160 314.5 160 296V88C160 69.6 179.8 58.2 195.7 67L371.7 168C388.1 177.1 388.1 200.8 371.7 210zM504 192C504 329 393 440 256 440S8 329 8 192S119 -56 256 -56S504 55 504 192zM56 192C56 302.5 145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8S56 81.5 56 192z" />
-    <glyph glyph-name="plus-square"
-      unicode="&#xF0FE;"
-      horiz-adv-x="448" d=" M352 208V176C352 169.4 346.6 164 340 164H252V76C252 69.4 246.6 64 240 64H208C201.4 64 196 69.4 196 76V164H108C101.4 164 96 169.4 96 176V208C96 214.6 101.4 220 108 220H196V308C196 314.6 201.4 320 208 320H240C246.6 320 252 314.6 252 308V220H340C346.6 220 352 214.6 352 208zM448 368V16C448 -10.5 426.5 -32 400 -32H48C21.5 -32 0 -10.5 0 16V368C0 394.5 21.5 416 48 416H400C426.5 416 448 394.5 448 368zM400 22V362C400 365.3 397.3 368 394 368H54C50.7 368 48 365.3 48 362V22C48 18.7 50.7 16 54 16H394C397.3 16 400 18.7 400 22z" />
-    <glyph glyph-name="question-circle"
-      unicode="&#xF059;"
-      horiz-adv-x="512" d=" M256 440C119.043 440 8 328.9170000000001 8 192C8 55.003 119.043 -56 256 -56S504 55.003 504 192C504 328.9170000000001 392.957 440 256 440zM256 -8C145.468 -8 56 81.431 56 192C56 302.495 145.472 392 256 392C366.491 392 456 302.529 456 192C456 81.47 366.569 -8 256 -8zM363.2440000000001 247.2C363.2440000000001 180.148 290.8230000000001 179.116 290.8230000000001 154.337V148C290.8230000000001 141.373 285.4500000000001 136 278.8230000000001 136H233.1760000000001C226.5490000000001 136 221.1760000000001 141.373 221.1760000000001 148V156.659C221.1760000000001 192.404 248.2760000000001 206.693 268.7550000000001 218.175C286.3160000000001 228.02 297.0790000000001 234.716 297.0790000000001 247.754C297.0790000000001 265 275.0800000000001 276.447 257.2950000000001 276.447C234.1060000000001 276.447 223.4010000000001 265.4700000000001 208.3530000000001 246.478C204.2960000000001 241.358 196.8930000000001 240.407 191.6870000000001 244.354L163.8630000000001 265.452C158.7560000000001 269.324 157.6120000000001 276.5180000000001 161.2190000000001 281.815C184.846 316.509 214.94 336 261.794 336C310.865 336 363.244 297.6960000000001 363.244 247.2zM298 80C298 56.841 279.159 38 256 38S214 56.841 214 80S232.841 122 256 122S298 103.159 298 80z" />
-    <glyph glyph-name="registered"
-      unicode="&#xF25D;"
-      horiz-adv-x="512" d=" M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM256 -8C145.468 -8 56 81.451 56 192C56 302.531 145.451 392 256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8zM366.442 73.791C313.396 170.075 316.192 165.259 313.171 169.876C337.438 183.755 352.653 211.439 352.653 243.052C352.653 295.555 322.406 328.304 251.1550000000001 328.304H172.488C165.8710000000001 328.304 160.488 322.921 160.488 316.304V68C160.488 61.383 165.8710000000001 56 172.488 56H211.0560000000001C217.673 56 223.0560000000001 61.383 223.0560000000001 68V151.663H255.0140000000001L302.5290000000001 62.36A11.98 11.98 0 0 1 313.1220000000001 56H355.9320000000001C365.0720000000001 56 370.8460000000001 65.799 366.4420000000001 73.791zM256.933 208.094H223.058V272.234H250.435C282.852 272.234 289.3640000000001 260.101 289.3640000000001 240.525C289.3630000000001 219.612 277.846 208.094 256.9330000000001 208.094z" />
-    <glyph glyph-name="save"
-      unicode="&#xF0C7;"
-      horiz-adv-x="448" d=" M433.941 318.059L350.059 401.9410000000001A48 48 0 0 1 316.118 416H48C21.49 416 0 394.51 0 368V16C0 -10.51 21.49 -32 48 -32H400C426.51 -32 448 -10.51 448 16V284.118A48 48 0 0 1 433.941 318.059zM272 368V288H144V368H272zM394 16H54A6 6 0 0 0 48 22V362A6 6 0 0 0 54 368H96V264C96 250.745 106.745 240 120 240H296C309.255 240 320 250.745 320 264V364.118L398.243 285.875A6 6 0 0 0 400 281.632V22A6 6 0 0 0 394 16zM224 216C175.477 216 136 176.523 136 128S175.477 40 224 40S312 79.477 312 128S272.523 216 224 216zM224 88C201.944 88 184 105.944 184 128S201.944 168 224 168S264 150.056 264 128S246.056 88 224 88z" />
-    <glyph glyph-name="share-square"
-      unicode="&#xF14D;"
-      horiz-adv-x="576" d=" M561.938 289.94L417.94 433.908C387.926 463.922 336 442.903 336 399.968V342.77C293.55 340.89 251.97 336.2200000000001 215.24 324.7800000000001C180.07 313.8300000000001 152.17 297.2000000000001 132.33 275.36C108.22 248.8 96 215.4 96 176.06C96 114.363 129.178 63.605 180.87 31.3C218.416 7.792 266.118 43.951 251.89 87.04C236.375 134.159 234.734 157.963 336 165.8V112C336 69.007 387.968 48.087 417.94 78.06L561.938 222.06C580.688 240.8 580.688 271.2 561.938 289.94zM384 112V215.84C255.309 213.918 166.492 192.65 206.31 72C176.79 90.45 144 123.92 144 176.06C144 285.394 273.14 295.007 384 295.91V400L528 256L384 112zM408.74 27.507A82.658 82.658 0 0 1 429.714 36.81C437.69 41.762 448 35.984 448 26.596V-16C448 -42.51 426.51 -64 400 -64H48C21.49 -64 0 -42.51 0 -16V336C0 362.51 21.49 384 48 384H180C186.627 384 192 378.627 192 372V367.514C192 362.597 189.013 358.145 184.431 356.362C170.729 351.031 158.035 344.825 146.381 337.777A12.138 12.138 0 0 0 140.101 336H54A6 6 0 0 1 48 330V-10A6 6 0 0 1 54 -16H394A6 6 0 0 1 400 -10V15.966C400 21.336 403.579 26.025 408.74 27.507z" />
-    <glyph glyph-name="smile"
-      unicode="&#xF118;"
-      horiz-adv-x="512" d=" M256 392C366.532 392 456 302.549 456 192C456 81.468 366.549 -8 256 -8C145.468 -8 56 81.451 56 192C56 302.532 145.451 392 256 392M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM320 304C310.465 304 301.488 301.6140000000001 293.63 297.411H293.647C306.382 297.411 316.706 287.087 316.706 274.352C316.706 261.617 306.382 251.293 293.647 251.293S270.588 261.617 270.588 274.352V274.3690000000001C266.386 266.512 264 257.535 264 248C264 217.072 289.072 192 320 192S376 217.072 376 248S350.928 304 320 304zM192 304C182.465 304 173.488 301.6140000000001 165.63 297.411H165.647C178.382 297.411 188.706 287.087 188.706 274.352C188.706 261.617 178.382 251.293 165.647 251.293C152.912 251.293 142.588 261.617 142.588 274.352V274.3690000000001C138.386 266.512 136 257.535 136 248C136 217.072 161.072 192 192 192S248 217.072 248 248S222.928 304 192 304zM387.372 121.781C406.1910000000001 147.373 367.516 175.798 348.702 150.219C298.567 82.042 213.473 82.039 163.335 150.219C144.507 175.82 105.857 147.358 124.665 121.781C193.963 27.55 317.988 27.43 387.372 121.781z" />
-    <glyph glyph-name="snowflake"
-      unicode="&#xF2DC;"
-      horiz-adv-x="448" d=" M438.237 92.073L371.663 130.613L431.111 140.94C436.957 142.315 441.72 146.123 444.569 151.07C447.0490000000001 155.377 448.075 160.548 447.093 165.721C444.983 176.836 434.4070000000001 183.76 423.4720000000001 181.188L338.0490000000001 150.073L255.914 192L338.05 233.926L423.473 202.811C434.409 200.239 444.985 207.163 447.094 218.278C449.205 229.393 442.048 240.487 431.113 243.059L371.665 253.386L438.238 291.926C447.778 297.449 450.853 310.018 445.105 320C439.357 329.982 426.965 333.596 417.425 328.074L350.851 289.534L371.656 346.3210000000001C374.902 357.103 368.898 368.863 358.243 372.589C347.589 376.314 336.3209999999999 370.592 333.075 359.81L317.2369999999999 270.075L244.8139999999999 228.149V312L314.3989999999999 370.621C322.0879999999999 378.831 321.3959999999999 391.4770000000001 312.8509999999999 398.866C304.3059999999999 406.257 291.1459999999999 405.589 283.4569999999999 397.38L244.8129999999999 350.92V428C244.8129999999999 439.046 235.4949999999999 448 223.9999999999999 448S203.1869999999999 439.046 203.1869999999999 428V350.92L164.5429999999999 397.38C156.8539999999999 405.5900000000001 143.6939999999999 406.256 135.1489999999999 398.866C126.6049999999999 391.477 125.9129999999999 378.831 133.6019999999999 370.621L203.187 312V228.147L130.764 270.073L114.926 359.809C111.679 370.591 100.411 376.313 89.757 372.588C79.101 368.863 73.098 357.102 76.344 346.32L97.149 289.533L30.576 328.073C21.036 333.596 8.643 329.981 2.896 319.999S0.223 297.448 9.763 291.925L76.337 253.385L16.888 243.057C5.953 240.485 -1.202 229.391 0.907 218.276C3.017 207.162 13.593 200.238 24.529 202.81L109.951 233.925L192.086 192L109.95 150.074L24.527 181.189C13.591 183.761 3.016 176.8370000000001 0.905 165.723C-1.204 154.61 5.951 143.514 16.886 140.942L76.335 130.614L9.761 92.074C0.223 86.551 -2.852 73.982 2.896 64S21.036 50.403 30.576 55.926L97.15 94.466L76.345 37.68C74.61 31.916 75.517 25.875 78.365 20.929C80.845 16.622 84.798 13.145 89.757 11.412C100.412 7.687 111.68 13.409 114.926 24.191L130.764 113.927L203.187 155.853V72L133.602 13.379C125.912 5.169 126.605 -7.476 135.149 -14.866C143.693 -22.254 156.854 -21.589 164.543 -13.379L203.187 33.081V-44C203.187 -55.046 212.505 -64 224 -64S244.813 -55.046 244.813 -44V33.081L283.457 -13.379C287.568 -17.768 293.2389999999999 -19.9999999999999 298.935 -19.9999999999999C303.8949999999999 -19.9999999999999 308.874 -18.3059999999999 312.851 -14.8659999999999C321.396 -7.4759999999999 322.088 5.1690000000001 314.399 13.3790000000001L244.813 72V155.853L317.236 113.927L333.074 24.191C336.32 13.409 347.588 7.687 358.242 11.412C368.8950000000001 15.138 374.901 26.8990000000001 371.654 37.6800000000001L350.849 94.467L417.423 55.927C426.963 50.404 439.356 54.019 445.103 64.001C450.852 73.982 447.778 86.5510000000001 438.237 92.073z" />
-    <glyph glyph-name="square"
-      unicode="&#xF0C8;"
-      horiz-adv-x="448" d=" M400 416H48C21.5 416 0 394.5 0 368V16C0 -10.5 21.5 -32 48 -32H400C426.5 -32 448 -10.5 448 16V368C448 394.5 426.5 416 400 416zM394 16H54C50.7 16 48 18.7 48 22V362C48 365.3 50.7 368 54 368H394C397.3 368 400 365.3 400 362V22C400 18.7 397.3 16 394 16z" />
-    <glyph glyph-name="star-half"
-      unicode="&#xF089;"
-      horiz-adv-x="576" d=" M288 62.7L163.7 -2.7L187.4 135.6999999999999L86.8 233.7L225.8 253.8999999999999L288 379.8999999999999V448C276.6 448 265.2 442.1 259.3 430.2L194 297.8L47.9 276.6C21.7 272.8 11.2 240.5 30.2 222L135.9 119L110.9 -26.5C106.4 -52.6 133.9 -72.5 157.3 -60.2L288 8.4V62.7z" />
-    <glyph glyph-name="star"
-      unicode="&#xF005;"
-      horiz-adv-x="576" d=" M528.1 276.5L382 297.8L316.7 430.2C305 453.8 271.1 454.1 259.3 430.2L194 297.8L47.9 276.5C21.7 272.7 11.2 240.4 30.2 221.9L135.9 118.9L110.9 -26.6C106.4 -52.9 134.1 -72.6 157.3 -60.3L288 8.4L418.7 -60.3C441.9 -72.5 469.6 -52.9 465.1 -26.6L440.1 118.9L545.8 221.9C564.8 240.4 554.3 272.7 528.0999999999999 276.5zM388.6 135.7L412.3 -2.7L288 62.6L163.7 -2.7L187.4 135.7000000000001L86.8 233.7000000000001L225.8 253.9000000000001L288 379.9000000000001L350.2 253.9000000000001L489.2 233.7000000000001L388.6 135.7000000000001z" />
-    <glyph glyph-name="sticky-note"
-      unicode="&#xF249;"
-      horiz-adv-x="448" d=" M448 99.894V368C448 394.51 426.51 416 400 416H48C21.49 416 0 394.51 0 368V16.012C0 -10.498 21.49 -31.988 48 -31.988H316.118A48 48 0 0 1 350.059 -17.929L433.941 65.953A48 48 0 0 1 448 99.894zM320 19.894V96.012H396.118L320 19.894zM400 368V144.012H296C282.745 144.012 272 133.267 272 120.012V16.012H48V368H400z" />
-    <glyph glyph-name="stop-circle"
-      unicode="&#xF28D;"
-      horiz-adv-x="512" d=" M504 192C504 329 393 440 256 440S8 329 8 192S119 -56 256 -56S504 55 504 192zM56 192C56 302.5 145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8S56 81.5 56 192zM352 272V112C352 103.2 344.8 96 336 96H176C167.2 96 160 103.2 160 112V272C160 280.8 167.2 288 176 288H336C344.8 288 352 280.8 352 272z" />
-    <glyph glyph-name="sun"
-      unicode="&#xF185;"
-      horiz-adv-x="512" d=" M220.116 -39.936L199.903 9.489A3.9920000000000004 3.9920000000000004 0 0 1 194.095 11.3750000000001L148.691 -16.7289999999999C119.225 -34.9689999999999 82.396 -8.2099999999999 90.637 25.45L103.336 77.3150000000001A3.9930000000000003 3.9930000000000003 0 0 1 99.746 82.256L46.495 86.2070000000001C11.941 88.7690000000001 -2.137 132.0620000000001 24.321 154.4540000000001L65.08 188.95A3.9920000000000004 3.9920000000000004 0 0 1 65.08 195.056L24.32 229.553C-2.13 251.937 11.93 295.235 46.494 297.799L99.745 301.75A3.9930000000000003 3.9930000000000003 0 0 1 103.335 306.691L90.637 358.557C82.398 392.213 119.218 418.977 148.691 400.736L194.094 372.632A3.9930000000000003 3.9930000000000003 0 0 1 199.902 374.519L220.115 423.944C233.231 456.015 278.753 456.025 291.873 423.944L312.085 374.52A3.9939999999999998 3.9939999999999998 0 0 1 317.894 372.6330000000001L363.2970000000001 400.737C392.761 418.973 429.5940000000001 392.224 421.351 358.558L408.652 306.693A3.9950000000000006 3.9950000000000006 0 0 1 412.242 301.752L465.4929999999999 297.8010000000001C500.0459999999999 295.2380000000001 514.126 251.947 487.6679999999999 229.555L446.908 195.058A3.9930000000000003 3.9930000000000003 0 0 1 446.908 188.951L487.6679999999999 154.455C514.179 132.014 499.99 88.766 465.4929999999999 86.208L412.242 82.257A3.9930000000000003 3.9930000000000003 0 0 1 408.653 77.3149999999999L421.351 25.451C429.592 -8.207 392.7679999999999 -34.97 363.2969999999999 -16.729L317.8939999999999 11.3749999999999A3.9939999999999998 3.9939999999999998 0 0 1 312.0849999999999 9.4879999999999L291.8729999999999 -39.936C278.7139999999999 -72.114 233.1979999999999 -71.9290000000001 220.1159999999999 -39.936zM236.93 24.632L255.994 -21.984L275.058 24.631C285.366 49.831 315.836 59.697 338.95 45.39L381.772 18.883L369.796 67.802C363.321 94.246 382.176 120.141 409.283 122.151L459.509 125.877L421.065 158.413C400.283 176.004 400.318 208.034 421.066 225.593L459.508 258.129L409.283 261.856C382.132 263.871 363.333 289.8040000000001 369.795 316.2050000000001L381.773 365.124L338.95 338.617C315.799 324.29 285.347 334.217 275.058 359.377L255.994 405.992L236.93 359.375C226.625 334.177 196.152 324.3090000000001 173.039 338.615L130.216 365.123L142.193 316.2050000000001C148.667 289.759 129.812 263.867 102.705 261.855L52.481 258.129L90.924 225.592C111.706 208.004 111.671 175.973 90.924 158.414L52.48 125.877L102.706 122.151C129.857 120.137 148.656 94.204 142.193 67.802L130.216 18.883L173.039 45.39C196.227 59.7450000000001 226.661 49.742 236.93 24.6320000000001zM256 64C185.42 64 128 121.421 128 192C128 262.58 185.42 320 256 320C326.579 320 384 262.58 384 192C384 121.421 326.579 64 256 64zM256 272C211.888 272 176 236.112 176 192S211.888 112 256 112S336 147.888 336 192S300.112 272 256 272z" />
-    <glyph glyph-name="thumbs-down"
-      unicode="&#xF165;"
-      horiz-adv-x="512" d=" M466.27 222.69C470.944 245.337 467.134 267.228 457.28 285.68C460.238 309.548 453.259 334.245 439.94 352.67C438.986 408.577 404.117 448 327 448C320 448 312 447.99 304.78 447.99C201.195 447.99 168.997 408 128 408H117.155C111.515 412.975 104.113 416 96 416H32C14.327 416 0 401.673 0 384V144C0 126.327 14.327 112 32 112H96C107.842 112 118.175 118.438 123.708 128H130.76C149.906 111.047 176.773 67.347 199.52 44.6C213.187 30.9330000000001 209.673 -64 271.28 -64C328.86 -64 366.55 -32.064 366.55 40.73C366.55 59.14 362.62 74.46 357.7 87.27H394.18C442.782 87.27 479.9999999999999 128.835 479.9999999999999 172.85C479.9999999999999 192 475.04 207.84 466.2699999999999 222.69zM64 152C50.745 152 40 162.745 40 176S50.745 200 64 200S88 189.255 88 176S77.255 152 64 152zM394.18 135.27H290.19C290.19 97.45 318.55 79.9 318.55 40.73C318.55 16.98 318.55 -16.0000000000001 271.2800000000001 -16.0000000000001C252.3700000000001 2.91 261.8200000000001 50.18 233.4600000000001 78.54C206.9 105.11 167.28 176 138.92 176H128V362.17C181.611 362.17 228.001 399.99 299.64 399.99H337.46C372.972 399.99 398.28 382.87 390.58 334.0900000000001C405.78 325.93 417.08 297.65 404.52 276.52C426.101 256.136 423.219 225.455 409.73 210.9C419.18 210.9 432.09 191.99 432 173.09C431.91 154.18 415.29 135.2700000000001 394.18 135.2700000000001z" />
-    <glyph glyph-name="thumbs-up"
-      unicode="&#xF164;"
-      horiz-adv-x="512" d=" M466.27 161.31C475.04 176.16 480 192 480 211.15C480 255.165 442.782 296.73 394.18 296.73H357.7C362.62 309.54 366.55 324.86 366.55 343.27C366.55 416.064 328.86 448 271.28 448C209.673 448 213.187 353.067 199.52 339.4C176.773 316.653 149.905 272.953 130.76 256H32C14.327 256 0 241.673 0 224V-16C0 -33.673 14.327 -48 32 -48H96C110.893 -48 123.408 -37.826 126.978 -24.05C171.487 -25.051 202.038 -63.99 304.78 -63.99C312 -63.99 320 -64 327 -64C404.117 -64 438.986 -24.577 439.94 31.33C453.259 49.755 460.239 74.452 457.28 98.32C467.134 116.772 470.944 138.663 466.27 161.31zM404.52 107.48C417.08 86.35 405.78 58.0700000000001 390.58 49.91C398.28 1.13 372.972 -15.99 337.46 -15.99H299.64C228.001 -15.99 181.611 21.83 128 21.83V208H138.92C167.28 208 206.9 278.89 233.46 305.46C261.82 333.82 252.37 381.09 271.28 400C318.55 400 318.55 367.02 318.55 343.27C318.55 304.1 290.19 286.55 290.19 248.73H394.18C415.29 248.73 431.91 229.82 432 210.91C432.0899999999999 192.01 419.18 173.1 409.73 173.1C423.219 158.545 426.101 127.864 404.52 107.48zM88 16C88 2.745 77.255 -8 64 -8S40 2.745 40 16S50.745 40 64 40S88 29.255 88 16z" />
-    <glyph glyph-name="times-circle"
-      unicode="&#xF057;"
-      horiz-adv-x="512" d=" M256 440C119 440 8 329 8 192S119 -56 256 -56S504 55 504 192S393 440 256 440zM256 -8C145.5 -8 56 81.5 56 192S145.5 392 256 392S456 302.5 456 192S366.5 -8 256 -8zM357.8 254.2L295.6 192L357.8 129.8C362.5 125.1 362.5 117.5 357.8 112.8L335.2 90.2C330.5 85.5 322.9 85.5 318.2 90.2L256 152.4L193.8 90.2C189.1 85.5 181.5 85.5 176.8 90.2L154.2 112.8C149.5 117.5 149.5 125.1 154.2 129.8L216.4 192L154.2000000000001 254.2C149.5000000000001 258.9 149.5000000000001 266.5 154.2000000000001 271.2L176.8000000000001 293.8C181.5 298.5 189.1000000000001 298.5 193.8000000000001 293.8L256.0000000000001 231.6L318.2000000000001 293.8C322.9000000000001 298.5 330.5000000000001 298.5 335.2000000000001 293.8L357.8000000000001 271.2C362.5000000000001 266.5 362.5000000000001 258.9 357.8000000000001 254.2z" />
-    <glyph glyph-name="trash-alt"
-      unicode="&#xF2ED;"
-      horiz-adv-x="448" d=" M192 260V44C192 37.373 186.627 32 180 32H156C149.373 32 144 37.373 144 44V260C144 266.627 149.373 272 156 272H180C186.627 272 192 266.627 192 260zM292 272H268C261.373 272 256 266.627 256 260V44C256 37.373 261.373 32 268 32H292C298.627 32 304 37.373 304 44V260C304 266.627 298.627 272 292 272zM424 368C437.255 368 448 357.255 448 344V332C448 325.373 442.627 320 436 320H416V-16C416 -42.51 394.51 -64 368 -64H80C53.49 -64 32 -42.51 32 -16V320H12C5.373 320 0 325.373 0 332V344C0 357.255 10.745 368 24 368H98.411L132.429 424.6960000000001A48 48 0 0 0 173.589 448H274.412A48 48 0 0 0 315.572 424.6960000000001L349.589 368H424zM154.389 368H293.612L276.1600000000001 397.087A6 6 0 0 1 271.015 400H176.987A6 6 0 0 1 171.842 397.087L154.389 368zM368 320H80V-10A6 6 0 0 1 86 -16H362A6 6 0 0 1 368 -10V320z" />
-    <glyph glyph-name="user-circle"
-      unicode="&#xF2BD;"
-      horiz-adv-x="512" d=" M256 440C119.033 440 8 328.967 8 192S119.033 -56 256 -56S504 55.033 504 192S392.967 440 256 440zM256 392C366.457 392 456 302.457 456 192C456 155.018 445.951 120.389 428.452 90.672C421.38 116.1160000000001 402.789 144.88 364.522 156.0460000000001C377.207 176.218 384 199.586 384 224C384 294.689 326.811 352 256 352C185.311 352 128 294.81 128 224C128 199.586 134.793 176.217 147.478 156.046C109.179 144.871 90.602 116.133 83.54 90.684C66.046 120.399 56 155.024 56 192C56 302.457 145.543 392 256 392zM336 224C336 179.817 300.183 144 256 144S176 179.817 176 224S211.817 304 256 304S336 268.183 336 224zM128 38.331V66.089C128 86.499 141.53 104.437 161.156 110.044L185.632 117.037C206.342 103.352 230.605 96 256 96S305.658 103.352 326.3690000000001 117.038L350.8450000000001 110.045C370.4700000000001 104.437 384 86.5 384 66.089V38.331C349.315 9.408 304.693 -8 256 -8S162.685 9.408 128 38.331z" />
-    <glyph glyph-name="user"
-      unicode="&#xF007;"
-      horiz-adv-x="512" d=" M423.3090000000001 156.975L402.221 163C431.798 204.11 436 245.706 436 268C436 367.351 355.484 448 256 448C156.649 448 76 367.484 76 268C76 245.701 80.198 204.116 109.779 163L88.691 156.975C21.28 137.715 0 76.41 0 39.395V13.714C0 -29.138 34.862 -64 77.714 -64H434.2850000000001C477.138 -64 512 -29.138 512 13.714V39.395C512 75.642 491.275 137.556 423.309 156.975zM256 400C328.902 400 388 340.901 388 268S328.902 136 256 136S124 195.099 124 268S183.098 400 256 400zM464 13.714C464 -2.696 450.696 -16 434.286 -16H77.714C61.304 -16 48 -2.696 48 13.714V39.395C48 72.562 69.987 101.711 101.878 110.822L147.981 123.994C162.683 112.942 200.427 88 256 88S349.317 112.942 364.019 123.994L410.122 110.822C442.013 101.71 464 72.562 464 39.395V13.714z" />
-    <glyph glyph-name="window-close"
-      unicode="&#xF410;"
-      horiz-adv-x="512" d=" M464 416H48C21.5 416 0 394.5 0 368V16C0 -10.5 21.5 -32 48 -32H464C490.5 -32 512 -10.5 512 16V368C512 394.5 490.5 416 464 416zM464 22C464 18.7 461.3 16 458 16H54C50.7 16 48 18.7 48 22V362C48 365.3 50.7 368 54 368H458C461.3 368 464 365.3 464 362V22zM356.5 253.4L295.1 192L356.5 130.6C361.1 126 361.1 118.5 356.5 113.8L334.2 91.5C329.6 86.9 322.1 86.9 317.4 91.5L256 152.9L194.6 91.5C190 86.9 182.5 86.9 177.8 91.5L155.5 113.8C150.9 118.4 150.9 125.9 155.5 130.6L216.9 192L155.5 253.4000000000001C150.9 258 150.9 265.5 155.5 270.2000000000001L177.8 292.5000000000001C182.4 297.1 189.9 297.1 194.6 292.5000000000001L256 231.1000000000001L317.4 292.5000000000001C322 297.1 329.5 297.1 334.2 292.5000000000001L356.5 270.2000000000001C361.2 265.6 361.2 258.1 356.5 253.4000000000001z" />
-    <glyph glyph-name="window-maximize"
-      unicode="&#xF2D0;"
-      horiz-adv-x="512" d=" M464 416H48C21.5 416 0 394.5 0 368V16C0 -10.5 21.5 -32 48 -32H464C490.5 -32 512 -10.5 512 16V368C512 394.5 490.5 416 464 416zM464 22C464 18.7 461.3 16 458 16H54C50.7 16 48 18.7 48 22V256H464V22z" />
-    <glyph glyph-name="window-minimize"
-      unicode="&#xF2D1;"
-      horiz-adv-x="512" d=" M480 -32H32C14.3 -32 0 -17.7 0 0S14.3 32 32 32H480C497.7 32 512 17.7 512 0S497.7 -32 480 -32z" />
-    <glyph glyph-name="window-restore"
-      unicode="&#xF2D2;"
-      horiz-adv-x="512" d=" M464 448H144C117.5 448 96 426.5 96 400V352H48C21.5 352 0 330.5 0 304V-16C0 -42.5 21.5 -64 48 -64H368C394.5 -64 416 -42.5 416 -16V32H464C490.5 32 512 53.5 512 80V400C512 426.5 490.5 448 464 448zM368 -16H48V192H368V-16zM464 80H416V304C416 330.5 394.5 352 368 352H144V400H464V80z" />
-  </font>
-</defs>
-</svg>

s_whiteboard.js

@@ -1,43 +0,0 @@
-//This file is only for saving the whiteboard. (Not to a file, only to RAM atm. Whiteboard is gone after server restart)
-
-var savedBoards = {};
-module.exports = {
-    handleEventsAndData: function (content) {
-        var tool = content["t"]; //Tool witch is used
-        var wid = content["wid"]; //whiteboard ID
-        var username = content["username"];
-        if (tool === "clear") { //Clear the whiteboard
-            delete savedBoards[wid];
-        } else if (tool === "undo") { //Undo an action
-            if (savedBoards[wid]) {
-                for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
-                    if (savedBoards[wid][i]["username"] == username) {
-                        var drawId = savedBoards[wid][i]["drawId"];
-                        for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
-                            if (savedBoards[wid][i]["drawId"] == drawId && savedBoards[wid][i]["username"] == username) {
-                                savedBoards[wid].splice(i, 1);
-                            }
-                        }
-                        break;
-                    }
-                }
-            }
-        } else if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { //Save all this actions
-            if (!savedBoards[wid]) {
-                savedBoards[wid] = [];
-            }
-            delete content["wid"]; //Delete id from content so we don't store it twice
-            if (tool === "setTextboxText") {
-                for (var i = savedBoards[wid].length - 1; i >= 0; i--) { //Remove old textbox tex -> dont store it twice
-                    if (savedBoards[wid][i]["t"] === "setTextboxText" && savedBoards[wid][i]["d"][0] === content["d"][0]) {
-                        savedBoards[wid].splice(i, 1);
-                    }
-                }
-            }
-            savedBoards[wid].push(content);
-        }
-    },
-    loadStoredData: function (wid) { //Load saved whiteboard
-        return savedBoards[wid] ? savedBoards[wid] : [];
-    }
-}

scripts/config/config-schema.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Whiteboard config",
+  "type": "object",
+  "properties": {
+    "backend": {
+      "type": "object",
+      "required": ["accessToken", "performance", "enableWebdav"],
+      "additionalProperties": false,
+      "properties": {
+        "accessToken": {
+          "type": "string"
+        },
+        "enableWebdav": {
+          "type": "boolean"
+        },
+        "performance": {
+          "additionalProperties": false,
+          "type": "object",
+          "required": ["whiteboardInfoBroadcastFreq"],
+          "properties": {
+            "whiteboardInfoBroadcastFreq": {
+              "type": "number",
+              "minimum": 0
+            }
+          }
+        }
+      }
+    },
+    "frontend": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["onWhiteboardLoad", "showSmallestScreenIndicator", "performance"],
+      "properties": {
+        "onWhiteboardLoad": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": ["displayInfo", "setReadOnly"],
+          "properties": {
+            "setReadOnly": {
+              "type": "boolean"
+            },
+            "displayInfo": {
+              "type": "boolean"
+            }
+          }
+        },
+        "showSmallestScreenIndicator": {
+          "type": "boolean"
+        },
+        "imageDownloadFormat": {
+          "type": "string"
+        },
+        "drawBackgroundGrid": {
+          "type": "boolean"
+        },
+        "backgroundGridImage": {
+          "type": "string"
+        },
+        "performance": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": ["pointerEventsThrottling", "refreshInfoFreq"],
+          "properties": {
+            "pointerEventsThrottling": {
+              "type": "array",
+              "minItems": 1,
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "required": ["fromUserCount", "minDistDelta", "maxFreq"],
+                "properties": {
+                  "fromUserCount": {
+                    "type": "number",
+                    "minimum": 0
+                  },
+                  "minDistDelta": {
+                    "type": "number",
+                    "minimum": 0
+                  },
+                  "maxFreq": {
+                    "type": "number",
+                    "minimum": 0
+                  }
+                }
+              }
+            },
+            "refreshInfoFreq": {
+              "type": "number",
+              "minimum": 0
+            }
+          }
+        }
+      }
+    }
+  },
+  "required": ["backend", "frontend"],
+  "additionalProperties": false
+}

scripts/config/config.js

@@ -0,0 +1,83 @@
+const util = require("util");
+
+const { getDefaultConfig, getConfig, deepMergeConfigs, isConfigValid } = require("./utils");
+
+const { getArgs } = require("./../utils");
+
+const defaultConfig = getDefaultConfig();
+
+const cliArgs = getArgs();
+let userConfig = {};
+
+if (cliArgs["config"]) {
+    userConfig = getConfig(cliArgs["config"]);
+}
+
+const config = deepMergeConfigs(defaultConfig, userConfig);
+
+/**
+ * Update the config based on the CLI args
+ * @param {object} startArgs
+ */
+function updateConfigFromStartArgs(startArgs) {
+    function deprecateCliArg(key, callback) {
+        const val = startArgs[key];
+        if (val) {
+            console.warn(
+                "\x1b[33m\x1b[1m",
+                `Setting config values (${key}) from the CLI is deprecated. ` +
+                    "This ability will be removed in the next major version. " +
+                    "You should use the config file. "
+            );
+            callback(val);
+        }
+    }
+
+    deprecateCliArg("accesstoken", (val) => (config.backend.accessToken = val));
+    deprecateCliArg(
+        "disablesmallestscreen",
+        () => (config.backend.showSmallestScreenIndicator = false)
+    );
+    deprecateCliArg("webdav", () => (config.backend.enableWebdav = true));
+}
+
+/**
+ * Update the config based on the env variables
+ */
+function updateConfigFromEnv() {
+    function deprecateEnv(key, callback) {
+        const val = process.env[key];
+        if (val) {
+            console.warn(
+                "\x1b[33m\x1b[1m",
+                `Setting config values (${key}) from the environment is deprecated. ` +
+                    "This ability will be removed in the next major version. " +
+                    "You should use the config file. "
+            );
+            callback(val);
+        }
+    }
+
+    deprecateEnv("accesstoken", (val) => (config.backend.accessToken = val));
+    deprecateEnv(
+        "disablesmallestscreen",
+        () => (config.backend.showSmallestScreenIndicator = false)
+    );
+    deprecateEnv("webdav", () => (config.backend.enableWebdav = true));
+}
+
+// compatibility layer
+// FIXME: remove this in next major
+updateConfigFromEnv();
+// FIXME: remove this in next major
+updateConfigFromStartArgs(cliArgs);
+
+if (!isConfigValid(config, true)) {
+    throw new Error("Config is not valid. Check logs for details");
+}
+
+if (!process.env.JEST_WORKER_ID) {
+    console.info(util.inspect(config, { showHidden: false, depth: null, colors: true }));
+}
+
+module.exports = config;

scripts/config/utils.js

@@ -0,0 +1,92 @@
+const path = require("path");
+const fs = require("fs");
+const yaml = require("js-yaml");
+
+const Ajv = require("ajv");
+const ajv = new Ajv({ allErrors: true });
+
+const configSchema = require("./config-schema.json");
+
+/**
+ * Load a yaml config file from a given path.
+ *
+ * @param path
+ * @return {Object}
+ */
+function getConfig(path) {
+    return yaml.safeLoad(fs.readFileSync(path, "utf8"));
+}
+
+/**
+ * Check that a config object is valid.
+ *
+ * @param {Object} config Config object
+ * @param {boolean} warn Should we warn in console for errors
+ * @return {boolean}
+ */
+function isConfigValid(config, warn = true) {
+    const validate = ajv.compile(configSchema);
+    const isValidAgainstSchema = validate(config);
+
+    if (!isValidAgainstSchema && warn) console.warn(validate.errors);
+
+    let structureIsValid = false;
+    try {
+        structureIsValid = config.frontend.performance.pointerEventsThrottling.some(
+            (item) => item.fromUserCount === 0
+        );
+    } catch (e) {
+        if (!e instanceof TypeError) {
+            throw e;
+        }
+    }
+
+    if (!structureIsValid && warn)
+        console.warn(
+            "At least one item under frontend.performance.pointerEventsThrottling" +
+                "must have fromUserCount set to 0"
+        );
+
+    return isValidAgainstSchema && structureIsValid;
+}
+
+/**
+ * Load the default project config
+ * @return {Object}
+ */
+function getDefaultConfig() {
+    const defaultConfigPath = path.join(__dirname, "..", "..", "config.default.yml");
+    return getConfig(defaultConfigPath);
+}
+
+/**
+ * Deep merge of project config
+ *
+ * Objects are merged, not arrays
+ *
+ * @param baseConfig
+ * @param overrideConfig
+ * @return {Object}
+ */
+function deepMergeConfigs(baseConfig, overrideConfig) {
+    const out = {};
+
+    Object.entries(baseConfig).forEach(([key, val]) => {
+        out[key] = val;
+        if (overrideConfig.hasOwnProperty(key)) {
+            const overrideVal = overrideConfig[key];
+            if (typeof val === "object" && !Array.isArray(val) && val !== null) {
+                out[key] = deepMergeConfigs(val, overrideVal);
+            } else {
+                out[key] = overrideVal;
+            }
+        }
+    });
+
+    return out;
+}
+
+module.exports.getConfig = getConfig;
+module.exports.getDefaultConfig = getDefaultConfig;
+module.exports.deepMergeConfigs = deepMergeConfigs;
+module.exports.isConfigValid = isConfigValid;

scripts/config/utils.test.js

@@ -0,0 +1,48 @@
+const { getDefaultConfig, deepMergeConfigs, isConfigValid } = require("./utils");
+
+test("Load default config", () => {
+    const defaultConfig = getDefaultConfig();
+    expect(typeof defaultConfig).toBe("object");
+});
+
+test("Full config override", () => {
+    const defaultConfig = getDefaultConfig();
+    expect(deepMergeConfigs(defaultConfig, defaultConfig)).toEqual(defaultConfig);
+});
+
+test("Simple partial config override", () => {
+    expect(deepMergeConfigs({ test: true }, { test: false }).test).toBe(false);
+    expect(deepMergeConfigs({ test: false }, { test: true }).test).toBe(true);
+});
+
+test("Simple deep config override", () => {
+    expect(deepMergeConfigs({ stage1: { stage2: true } }, { stage1: { stage2: false } })).toEqual({
+        stage1: { stage2: false },
+    });
+});
+
+test("Complex object config override", () => {
+    expect(
+        deepMergeConfigs({ stage1: { stage2: true, stage2b: true } }, { stage1: { stage2: false } })
+    ).toEqual({
+        stage1: { stage2: false, stage2b: true },
+    });
+});
+
+test("Override default config", () => {
+    const defaultConfig = getDefaultConfig();
+    const overrideConfig1 = { frontend: { onWhiteboardLoad: { setReadOnly: true } } };
+
+    expect(
+        deepMergeConfigs(defaultConfig, overrideConfig1).frontend.onWhiteboardLoad.setReadOnly
+    ).toBe(true);
+});
+
+test("Dumb config is not valid", () => {
+    expect(isConfigValid({}, false)).toBe(false);
+});
+
+test("Default config is valid", () => {
+    const defaultConfig = getDefaultConfig();
+    expect(isConfigValid(defaultConfig)).toBe(true);
+});

scripts/s_whiteboard.js

@@ -0,0 +1,102 @@
+//This file is only for saving the whiteboard. (Not to a file, only to RAM atm. Whiteboard is gone after server restart)
+
+var savedBoards = {};
+var savedUndos = {};
+module.exports = {
+    handleEventsAndData: function (content) {
+        var tool = content["t"]; //Tool witch is used
+        var wid = content["wid"]; //whiteboard ID
+        var username = content["username"];
+        if (tool === "clear") {
+            //Clear the whiteboard
+            delete savedBoards[wid];
+            delete savedUndos[wid];
+        } else if (tool === "undo") {
+            //Undo an action
+            if (!savedUndos[wid]) {
+                savedUndos[wid] = [];
+            }
+            if (savedBoards[wid]) {
+                for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
+                    if (savedBoards[wid][i]["username"] == username) {
+                        var drawId = savedBoards[wid][i]["drawId"];
+                        for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
+                            if (
+                                savedBoards[wid][i]["drawId"] == drawId &&
+                                savedBoards[wid][i]["username"] == username
+                            ) {
+                                savedUndos[wid].push(savedBoards[wid][i]);
+                                savedBoards[wid].splice(i, 1);
+                            }
+                        }
+                        break;
+                    }
+                }
+                if (savedUndos[wid].length > 1000) {
+                    savedUndos[wid].splice(0, savedUndos[wid].length - 1000);
+                }
+            }
+        } else if (tool === "redo") {
+            if (!savedUndos[wid]) {
+                savedUndos[wid] = [];
+            }
+            if (!savedBoards[wid]) {
+                savedBoards[wid] = [];
+            }
+            for (var i = savedUndos[wid].length - 1; i >= 0; i--) {
+                if (savedUndos[wid][i]["username"] == username) {
+                    var drawId = savedUndos[wid][i]["drawId"];
+                    for (var i = savedUndos[wid].length - 1; i >= 0; i--) {
+                        if (
+                            savedUndos[wid][i]["drawId"] == drawId &&
+                            savedUndos[wid][i]["username"] == username
+                        ) {
+                            savedBoards[wid].push(savedUndos[wid][i]);
+                            savedUndos[wid].splice(i, 1);
+                        }
+                    }
+                    break;
+                }
+            }
+        } else if (
+            [
+                "line",
+                "pen",
+                "rect",
+                "circle",
+                "eraser",
+                "addImgBG",
+                "recSelect",
+                "eraseRec",
+                "addTextBox",
+                "setTextboxText",
+                "removeTextbox",
+                "setTextboxPosition",
+                "setTextboxFontSize",
+                "setTextboxFontColor",
+            ].includes(tool)
+        ) {
+            //Save all this actions
+            if (!savedBoards[wid]) {
+                savedBoards[wid] = [];
+            }
+            delete content["wid"]; //Delete id from content so we don't store it twice
+            if (tool === "setTextboxText") {
+                for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
+                    //Remove old textbox tex -> dont store it twice
+                    if (
+                        savedBoards[wid][i]["t"] === "setTextboxText" &&
+                        savedBoards[wid][i]["d"][0] === content["d"][0]
+                    ) {
+                        savedBoards[wid].splice(i, 1);
+                    }
+                }
+            }
+            savedBoards[wid].push(content);
+        }
+    },
+    loadStoredData: function (wid) {
+        //Load saved whiteboard
+        return savedBoards[wid] ? savedBoards[wid] : [];
+    },
+};

scripts/server-backend.js

@@ -0,0 +1,270 @@
+const path = require("path");
+
+const config = require("./config/config");
+const ReadOnlyBackendService = require("./services/ReadOnlyBackendService");
+const WhiteboardInfoBackendService = require("./services/WhiteboardInfoBackendService");
+
+function startBackendServer(port) {
+    var fs = require("fs-extra");
+    var express = require("express");
+    var formidable = require("formidable"); //form upload processing
+
+    const createDOMPurify = require("dompurify"); //Prevent xss
+    const { JSDOM } = require("jsdom");
+    const window = new JSDOM("").window;
+    const DOMPurify = createDOMPurify(window);
+
+    const { createClient } = require("webdav");
+
+    var s_whiteboard = require("./s_whiteboard.js");
+
+    var app = express();
+    app.use(express.static(path.join(__dirname, "..", "dist")));
+    app.use("/uploads", express.static(path.join(__dirname, "..", "public", "uploads")));
+    var server = require("http").Server(app);
+    server.listen(port);
+    var io = require("socket.io")(server, { path: "/ws-api" });
+    WhiteboardInfoBackendService.start(io);
+
+    console.log("Webserver & socketserver running on port:" + port);
+
+    const { accessToken, enableWebdav } = config.backend;
+
+    app.get("/api/loadwhiteboard", function (req, res) {
+        const wid = req["query"]["wid"];
+        const at = req["query"]["at"]; //accesstoken
+        if (accessToken === "" || accessToken == at) {
+            const widForData = ReadOnlyBackendService.isReadOnly(wid)
+                ? ReadOnlyBackendService.getIdFromReadOnlyId(wid)
+                : wid;
+            const ret = s_whiteboard.loadStoredData(widForData);
+            res.send(ret);
+            res.end();
+        } else {
+            res.status(401); //Unauthorized
+            res.end();
+        }
+    });
+
+    app.post("/api/upload", function (req, res) {
+        //File upload
+        var form = new formidable.IncomingForm(); //Receive form
+        var formData = {
+            files: {},
+            fields: {},
+        };
+
+        form.on("file", function (name, file) {
+            formData["files"][file.name] = file;
+        });
+
+        form.on("field", function (name, value) {
+            formData["fields"][name] = value;
+        });
+
+        form.on("error", function (err) {
+            console.log("File uplaod Error!");
+        });
+
+        form.on("end", function () {
+            if (accessToken === "" || accessToken == formData["fields"]["at"]) {
+                progressUploadFormData(formData, function (err) {
+                    if (err) {
+                        if (err == "403") {
+                            res.status(403);
+                        } else {
+                            res.status(500);
+                        }
+                        res.end();
+                    } else {
+                        res.send("done");
+                    }
+                });
+            } else {
+                res.status(401); //Unauthorized
+                res.end();
+            }
+            //End file upload
+        });
+        form.parse(req);
+    });
+
+    function progressUploadFormData(formData, callback) {
+        console.log("Progress new Form Data");
+        const fields = escapeAllContentStrings(formData.fields);
+        const wid = fields["whiteboardId"];
+        if (ReadOnlyBackendService.isReadOnly(wid)) return;
+
+        const readOnlyWid = ReadOnlyBackendService.getReadOnlyId(wid);
+
+        const name = fields["name"] || "";
+        const date = fields["date"] || +new Date();
+        const filename = `${readOnlyWid}_${date}.png`;
+        let webdavaccess = fields["webdavaccess"] || false;
+        try {
+            webdavaccess = JSON.parse(webdavaccess);
+        } catch (e) {
+            webdavaccess = false;
+        }
+
+        const savingDir = path.join("./public/uploads", readOnlyWid);
+        fs.ensureDir(savingDir, function (err) {
+            if (err) {
+                console.log("Could not create upload folder!", err);
+                return;
+            }
+            let imagedata = fields["imagedata"];
+            if (imagedata && imagedata != "") {
+                //Save from base64 data
+                imagedata = imagedata
+                    .replace(/^data:image\/png;base64,/, "")
+                    .replace(/^data:image\/jpeg;base64,/, "");
+                console.log(filename, "uploaded");
+                const savingPath = path.join(savingDir, filename);
+                fs.writeFile(savingPath, imagedata, "base64", function (err) {
+                    if (err) {
+                        console.log("error", err);
+                        callback(err);
+                    } else {
+                        if (webdavaccess) {
+                            //Save image to webdav
+                            if (enableWebdav) {
+                                saveImageToWebdav(savingPath, filename, webdavaccess, function (
+                                    err
+                                ) {
+                                    if (err) {
+                                        console.log("error", err);
+                                        callback(err);
+                                    } else {
+                                        callback();
+                                    }
+                                });
+                            } else {
+                                callback("Webdav is not enabled on the server!");
+                            }
+                        } else {
+                            callback();
+                        }
+                    }
+                });
+            } else {
+                callback("no imagedata!");
+                console.log("No image Data found for this upload!", name);
+            }
+        });
+    }
+
+    function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
+        if (webdavaccess) {
+            const webdavserver = webdavaccess["webdavserver"] || "";
+            const webdavpath = webdavaccess["webdavpath"] || "/";
+            const webdavusername = webdavaccess["webdavusername"] || "";
+            const webdavpassword = webdavaccess["webdavpassword"] || "";
+
+            const client = createClient(webdavserver, {
+                username: webdavusername,
+                password: webdavpassword,
+            });
+            client
+                .getDirectoryContents(webdavpath)
+                .then((items) => {
+                    const cloudpath = webdavpath + "" + filename;
+                    console.log("webdav saving to:", cloudpath);
+                    fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
+                    callback();
+                })
+                .catch((error) => {
+                    callback("403");
+                    console.log("Could not connect to webdav!");
+                });
+        } else {
+            callback("Error: no access data!");
+        }
+    }
+
+    io.on("connection", function (socket) {
+        let whiteboardId = null;
+        socket.on("disconnect", function () {
+            WhiteboardInfoBackendService.leave(socket.id, whiteboardId);
+            socket.compress(false).broadcast.to(whiteboardId).emit("refreshUserBadges", null); //Removes old user Badges
+        });
+
+        socket.on("drawToWhiteboard", function (content) {
+            if (!whiteboardId || ReadOnlyBackendService.isReadOnly(whiteboardId)) return;
+
+            content = escapeAllContentStrings(content);
+            if (accessToken === "" || accessToken == content["at"]) {
+                const broadcastTo = (wid) =>
+                    socket.compress(false).broadcast.to(wid).emit("drawToWhiteboard", content);
+                // broadcast to current whiteboard
+                broadcastTo(whiteboardId);
+                // broadcast the same content to the associated read-only whiteboard
+                const readOnlyId = ReadOnlyBackendService.getReadOnlyId(whiteboardId);
+                broadcastTo(readOnlyId);
+                s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server
+            } else {
+                socket.emit("wrongAccessToken", true);
+            }
+        });
+
+        socket.on("joinWhiteboard", function (content) {
+            content = escapeAllContentStrings(content);
+            if (accessToken === "" || accessToken == content["at"]) {
+                whiteboardId = content["wid"];
+
+                socket.emit("whiteboardConfig", {
+                    common: config.frontend,
+                    whiteboardSpecific: {
+                        correspondingReadOnlyWid: ReadOnlyBackendService.getReadOnlyId(
+                            whiteboardId
+                        ),
+                        isReadOnly: ReadOnlyBackendService.isReadOnly(whiteboardId),
+                    },
+                });
+
+                socket.join(whiteboardId); //Joins room name=wid
+                const screenResolution = content["windowWidthHeight"];
+                WhiteboardInfoBackendService.join(socket.id, whiteboardId, screenResolution);
+            } else {
+                socket.emit("wrongAccessToken", true);
+            }
+        });
+
+        socket.on("updateScreenResolution", function (content) {
+            content = escapeAllContentStrings(content);
+            if (accessToken === "" || accessToken == content["at"]) {
+                const screenResolution = content["windowWidthHeight"];
+                WhiteboardInfoBackendService.setScreenResolution(
+                    socket.id,
+                    whiteboardId,
+                    screenResolution
+                );
+            }
+        });
+    });
+
+    //Prevent cross site scripting (xss)
+    function escapeAllContentStrings(content, cnt) {
+        if (!cnt) cnt = 0;
+
+        if (typeof content === "string") {
+            return DOMPurify.sanitize(content);
+        }
+        for (var i in content) {
+            if (typeof content[i] === "string") {
+                content[i] = DOMPurify.sanitize(content[i]);
+            }
+            if (typeof content[i] === "object" && cnt < 10) {
+                content[i] = escapeAllContentStrings(content[i], ++cnt);
+            }
+        }
+        return content;
+    }
+
+    process.on("unhandledRejection", (error) => {
+        // Will print "unhandledRejection err is not defined"
+        console.log("unhandledRejection", error.message);
+    });
+}
+
+module.exports = startBackendServer;

scripts/server-frontend-dev.js

@@ -0,0 +1,34 @@
+const devServerConfig = {
+    hot: true,
+    inline: true,
+    stats: {
+        children: false,
+        maxModules: 0,
+    },
+    proxy: {
+        // proxies for the backend
+        "/api": "http://localhost:3000",
+        "/uploads": "http://localhost:3000",
+        "/ws-api": {
+            target: "ws://localhost:3000",
+            ws: true,
+        },
+    },
+};
+
+function startFrontendDevServer(port) {
+    // require here to prevent prod dependency to webpack
+    const webpack = require("webpack");
+    const WebpackDevServer = require("webpack-dev-server");
+    const config = require("../config/webpack.dev");
+
+    new WebpackDevServer(webpack(config), devServerConfig).listen(port, (err) => {
+        if (err) {
+            console.log(err);
+        }
+
+        console.log("Listening on port " + port);
+    });
+}
+
+module.exports = startFrontendDevServer;

scripts/server.js

@@ -0,0 +1,32 @@
+const { getArgs } = require("./utils");
+const startFrontendDevServer = require("./server-frontend-dev");
+const startBackendServer = require("./server-backend");
+
+const SERVER_MODES = {
+    PRODUCTION: 1,
+    DEVELOPMENT: 2,
+};
+
+const args = getArgs();
+
+if (typeof args.mode === "undefined") {
+    // default to production mode
+    args.mode = "production";
+}
+
+if (args.mode !== "production" && args.mode !== "development") {
+    throw new Error("--mode can only be 'development' or 'production'");
+}
+
+const server_mode = args.mode === "production" ? SERVER_MODES.PRODUCTION : SERVER_MODES.DEVELOPMENT;
+
+if (server_mode === SERVER_MODES.DEVELOPMENT) {
+    console.info("Starting server in development mode.");
+    startFrontendDevServer(8080);
+    // this time, it's the frontend server that is on port 8080
+    // requests for the backend will be proxied to prevent cross origins errors
+    startBackendServer(3000);
+} else {
+    console.info("Starting server in production mode.");
+    startBackendServer(8080);
+}

scripts/services/ReadOnlyBackendService.js

@@ -0,0 +1,73 @@
+const { v4: uuidv4 } = require("uuid");
+
+class ReadOnlyBackendService {
+    /**
+     * Mapping from an editable whiteboard id to the matching read-only whiteboard id
+     * @type {Map<string, string>}
+     * @private
+     */
+    #idToReadOnlyId = new Map();
+
+    /**
+     * Mapping from a read-only whiteboard id to the matching editable whiteboard id
+     *
+     * @type {Map<string, string>}
+     * @private
+     */
+    #readOnlyIdToId = new Map();
+
+    /**
+     * Make sure a whiteboardId is ignited in the service
+     *
+     * If it's not found in the service, we assume that it's an editable whiteboard
+     *
+     * @param {string} whiteboardId
+     */
+    init(whiteboardId) {
+        const idToReadOnlyId = this.#idToReadOnlyId;
+        const readOnlyIdToId = this.#readOnlyIdToId;
+
+        if (!idToReadOnlyId.has(whiteboardId) && !readOnlyIdToId.has(whiteboardId)) {
+            const readOnlyId = uuidv4();
+            idToReadOnlyId.set(whiteboardId, readOnlyId);
+            readOnlyIdToId.set(readOnlyId, whiteboardId);
+        }
+    }
+
+    /**
+     * Get the read-only id corresponding to a whiteboard id
+     *
+     * @param {string} whiteboardId
+     * @return {string}
+     */
+    getReadOnlyId(whiteboardId) {
+        // make sure it's inited
+        if (this.isReadOnly(whiteboardId)) return whiteboardId;
+        // run in isReadOnly
+        // this.init(whiteboardId);
+        return this.#idToReadOnlyId.get(whiteboardId);
+    }
+
+    /**
+     * Get the id corresponding to readonly id
+     *
+     * @param {string} readOnlyId
+     * @return {string}
+     */
+    getIdFromReadOnlyId(readOnlyId) {
+        return this.#readOnlyIdToId.get(readOnlyId);
+    }
+
+    /**
+     * Tell is whiteboard id corresponds to a read-only whiteboard
+     *
+     * @param whiteboardId
+     * @return {boolean}
+     */
+    isReadOnly(whiteboardId) {
+        this.init(whiteboardId);
+        return this.#readOnlyIdToId.has(whiteboardId);
+    }
+}
+
+module.exports = new ReadOnlyBackendService();

scripts/services/WhiteboardInfoBackendService.js

@@ -0,0 +1,243 @@
+const config = require("../config/config");
+const ReadOnlyBackendService = require("./ReadOnlyBackendService");
+
+/**
+ * Class to hold information related to a whiteboard
+ */
+class WhiteboardInfo {
+    static defaultScreenResolution = { w: 1000, h: 1000 };
+
+    /**
+     * @type {number}
+     * @private
+     */
+    #nbConnectedUsers = 0;
+    get nbConnectedUsers() {
+        return this.#nbConnectedUsers;
+    }
+
+    /**
+     * @type {Map<string, {w: number, h: number}>}
+     * @private
+     */
+    #screenResolutionByClients = new Map();
+    get screenResolutionByClients() {
+        return this.#screenResolutionByClients;
+    }
+
+    /**
+     * Variable to tell if these info have been sent or not
+     *
+     * @private
+     * @type {boolean}
+     */
+    #hasNonSentUpdates = false;
+    get hasNonSentUpdates() {
+        return this.#hasNonSentUpdates;
+    }
+
+    incrementNbConnectedUsers() {
+        this.#nbConnectedUsers++;
+        this.#hasNonSentUpdates = true;
+    }
+
+    decrementNbConnectedUsers() {
+        this.#nbConnectedUsers--;
+        this.#hasNonSentUpdates = true;
+    }
+
+    hasConnectedUser() {
+        return this.#nbConnectedUsers > 0;
+    }
+
+    /**
+     * Store information about the client's screen resolution
+     *
+     * @param {string} clientId
+     * @param {number} w client's width
+     * @param {number} h client's hight
+     */
+    setScreenResolutionForClient(clientId, { w, h }) {
+        this.#screenResolutionByClients.set(clientId, { w, h });
+        this.#hasNonSentUpdates = true;
+    }
+
+    /**
+     * Delete the stored information about the client's screen resoltion
+     * @param clientId
+     */
+    deleteScreenResolutionOfClient(clientId) {
+        this.#screenResolutionByClients.delete(clientId);
+        this.#hasNonSentUpdates = true;
+    }
+
+    /**
+     * Get the smallest client's screen size on a whiteboard
+     * @return {{w: number, h: number}}
+     */
+    getSmallestScreenResolution() {
+        const { screenResolutionByClients: resolutions } = this;
+        return {
+            w: Math.min(...Array.from(resolutions.values()).map((res) => res.w)),
+            h: Math.min(...Array.from(resolutions.values()).map((res) => res.h)),
+        };
+    }
+
+    infoWasSent() {
+        this.#hasNonSentUpdates = false;
+    }
+
+    shouldSendInfo() {
+        return this.#hasNonSentUpdates;
+    }
+
+    asObject() {
+        const out = {
+            nbConnectedUsers: this.#nbConnectedUsers,
+        };
+
+        if (config.frontend.showSmallestScreenIndicator) {
+            out.smallestScreenResolution = this.getSmallestScreenResolution();
+        }
+
+        return out;
+    }
+}
+
+/**
+ * Wrapper class around map to treat both the editable whiteboard and its read-only version the same
+ */
+class InfoByWhiteBoardMap extends Map {
+    get(wid) {
+        const readOnlyId = ReadOnlyBackendService.getReadOnlyId(wid);
+        return super.get(readOnlyId);
+    }
+
+    set(wid, val) {
+        const readOnlyId = ReadOnlyBackendService.getReadOnlyId(wid);
+        return super.set(readOnlyId, val);
+    }
+
+    has(wid) {
+        const readOnlyId = ReadOnlyBackendService.getReadOnlyId(wid);
+        return super.has(readOnlyId);
+    }
+
+    delete(wid) {
+        const readOnlyId = ReadOnlyBackendService.getReadOnlyId(wid);
+        return super.delete(readOnlyId);
+    }
+}
+
+class WhiteboardInfoBackendService {
+    /**
+     * @type {Map<string, WhiteboardInfo>}
+     */
+    #infoByWhiteboard = new InfoByWhiteBoardMap();
+
+    /**
+     * Start the auto sending of information to all the whiteboards
+     *
+     * @param io
+     */
+    start(io) {
+        // auto clean infoByWhiteboard
+        setInterval(() => {
+            this.#infoByWhiteboard.forEach((info, readOnlyWhiteboardId) => {
+                if (info.shouldSendInfo()) {
+                    // broadcast to editable whiteboard
+                    const wid = ReadOnlyBackendService.getIdFromReadOnlyId(readOnlyWhiteboardId);
+                    io.sockets
+                        .in(wid)
+                        .compress(false)
+                        .emit("whiteboardInfoUpdate", info.asObject());
+
+                    // also send to readonly whiteboard
+                    io.sockets
+                        .in(readOnlyWhiteboardId)
+                        .compress(false)
+                        .emit("whiteboardInfoUpdate", info.asObject());
+
+                    info.infoWasSent();
+                }
+            });
+        }, (1 / config.backend.performance.whiteboardInfoBroadcastFreq) * 1000);
+    }
+
+    /**
+     * Track a join event of client to a whiteboard
+     *
+     * @param {string} clientId
+     * @param {string} whiteboardId
+     * @param {{w: number, h: number}} screenResolution
+     */
+    join(clientId, whiteboardId, screenResolution) {
+        const infoByWhiteboard = this.#infoByWhiteboard;
+
+        if (!infoByWhiteboard.has(whiteboardId)) {
+            infoByWhiteboard.set(whiteboardId, new WhiteboardInfo());
+        }
+
+        const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
+        whiteboardServerSideInfo.incrementNbConnectedUsers();
+        this.setScreenResolution(clientId, whiteboardId, screenResolution);
+    }
+
+    /**
+     * Set the screen resolution of a client
+     * @param {string} clientId
+     * @param {string} whiteboardId
+     * @param {{w: number, h: number}} screenResolution
+     */
+    setScreenResolution(clientId, whiteboardId, screenResolution) {
+        const infoByWhiteboard = this.#infoByWhiteboard;
+
+        const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
+        if (whiteboardServerSideInfo) {
+            whiteboardServerSideInfo.setScreenResolutionForClient(
+                clientId,
+                screenResolution || WhiteboardInfo.defaultScreenResolution
+            );
+        }
+    }
+
+    /**
+     * Track disconnect from a client
+     * @param {string} clientId
+     * @param {string} whiteboardId
+     */
+    leave(clientId, whiteboardId) {
+        const infoByWhiteboard = this.#infoByWhiteboard;
+
+        if (infoByWhiteboard.has(whiteboardId)) {
+            const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
+
+            if (clientId) {
+                whiteboardServerSideInfo.deleteScreenResolutionOfClient(clientId);
+            }
+
+            whiteboardServerSideInfo.decrementNbConnectedUsers();
+
+            if (whiteboardServerSideInfo.hasConnectedUser()) {
+            } else {
+                infoByWhiteboard.delete(whiteboardId);
+            }
+        }
+    }
+
+    /**
+     * Get the number of clients on a whiteboard
+     *
+     * @param {string} wid
+     * @returns number|null
+     */
+    getNbClientOnWhiteboard(wid) {
+        const infoByWhiteboard = this.#infoByWhiteboard;
+        const info = infoByWhiteboard.get(wid);
+
+        if (info) return info.nbConnectedUsers;
+        else return null;
+    }
+}
+
+module.exports = new WhiteboardInfoBackendService();

scripts/services/WhiteboardInfoBackendService.test.js

@@ -0,0 +1,44 @@
+const ReadOnlyBackendService = require("./ReadOnlyBackendService");
+const WhiteboardInfoBackendService = require("./WhiteboardInfoBackendService");
+
+test("Clients lifetime same wid", () => {
+    const wid = "1";
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(null);
+
+    WhiteboardInfoBackendService.join("toto", wid, null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(1);
+
+    WhiteboardInfoBackendService.join("tata", wid, null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(2);
+
+    WhiteboardInfoBackendService.leave("tata", wid, null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(1);
+
+    WhiteboardInfoBackendService.leave("toto", wid, null);
+    // no more user on whiteboard
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(null);
+});
+
+test("Clients lifetime both wid and readonly wid", () => {
+    const wid = "2";
+    const readOnlyWid = ReadOnlyBackendService.getReadOnlyId(wid);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(readOnlyWid)).toBe(null);
+
+    WhiteboardInfoBackendService.join("toto", wid, null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(1);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(readOnlyWid)).toBe(1);
+
+    WhiteboardInfoBackendService.join("tata", readOnlyWid, null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(2);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(readOnlyWid)).toBe(2);
+
+    WhiteboardInfoBackendService.leave("tata", readOnlyWid, null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(1);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(readOnlyWid)).toBe(1);
+
+    WhiteboardInfoBackendService.leave("toto", wid, null);
+    // no more user on whiteboard
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(wid)).toBe(null);
+    expect(WhiteboardInfoBackendService.getNbClientOnWhiteboard(readOnlyWid)).toBe(null);
+});

scripts/utils.js

@@ -0,0 +1,20 @@
+function getArgs() {
+    const args = {};
+    process.argv.slice(2, process.argv.length).forEach((arg) => {
+        // long arg
+        if (arg.slice(0, 2) === "--") {
+            const longArg = arg.split("=");
+            args[longArg[0].slice(2, longArg[0].length)] = longArg[1];
+        }
+        // flags
+        else if (arg[0] === "-") {
+            const flags = arg.slice(1, arg.length).split("");
+            flags.forEach((flag) => {
+                args[flag] = true;
+            });
+        }
+    });
+    return args;
+}
+
+module.exports.getArgs = getArgs;

server.js

@@ -1,293 +0,0 @@
-var PORT = 8080; //Set port for the app
-var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
-var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
-var webdav = false; //Can be set to true if you want to allow webdav save (node server.js --webdav=true)
-
-var fs = require("fs-extra");
-var express = require('express');
-var formidable = require('formidable'); //form upload processing
-
-const createDOMPurify = require('dompurify'); //Prevent xss
-const { JSDOM } = require('jsdom');
-const window = (new JSDOM('')).window;
-const DOMPurify = createDOMPurify(window);
-
-const { createClient } = require("webdav");
-
-var s_whiteboard = require("./s_whiteboard.js");
-
-var app = express();
-app.use(express.static(__dirname + '/public'));
-var server = require('http').Server(app);
-server.listen(PORT);
-var io = require('socket.io')(server);
-console.log("Webserver & socketserver running on port:" + PORT);
-
-if (process.env.accesstoken) {
-    accessToken = process.env.accesstoken;
-}
-if (process.env.disablesmallestscreen) {
-    disablesmallestscreen = true;
-}
-if (process.env.webdav) {
-    webdav = true;
-}
-
-var startArgs = getArgs();
-if (startArgs["accesstoken"]) {
-    accessToken = startArgs["accesstoken"];
-}
-if (startArgs["disablesmallestscreen"]) {
-    disableSmallestScreen = true;
-}
-if (startArgs["webdav"]) {
-    webdav = true;
-}
-
-if (accessToken !== "") {
-    console.log("AccessToken set to: " + accessToken);
-}
-if (disableSmallestScreen) {
-    console.log("Disabled showing smallest screen resolution!");
-}
-if (webdav) {
-    console.log("Webdav save is enabled!");
-}
-
-app.get('/loadwhiteboard', function (req, res) {
-    var wid = req["query"]["wid"];
-    var at = req["query"]["at"]; //accesstoken
-    if (accessToken === "" || accessToken == at) {
-        var ret = s_whiteboard.loadStoredData(wid);
-        res.send(ret);
-        res.end();
-    } else {
-        res.status(401);  //Unauthorized
-        res.end();
-    }
-});
-
-app.post('/upload', function (req, res) { //File upload
-    var form = new formidable.IncomingForm(); //Receive form
-    var formData = {
-        files: {},
-        fields: {}
-    }
-
-    form.on('file', function (name, file) {
-        formData["files"][file.name] = file;
-    });
-
-    form.on('field', function (name, value) {
-        formData["fields"][name] = value;
-    });
-
-    form.on('error', function (err) {
-        console.log('File uplaod Error!');
-    });
-
-    form.on('end', function () {
-        if (accessToken === "" || accessToken == formData["fields"]["at"]) {
-            progressUploadFormData(formData, function (err) {
-                if (err) {
-                    if (err == "403") {
-                        res.status(403);
-                    } else {
-                        res.status(500);
-                    }
-                    res.end();
-                } else {
-                    res.send("done");
-                }
-            });
-        } else {
-            res.status(401);  //Unauthorized
-            res.end();
-        }
-        //End file upload
-    });
-    form.parse(req);
-});
-
-function progressUploadFormData(formData, callback) {
-    console.log("Progress new Form Data");
-    var fields = escapeAllContentStrings(formData.fields);
-    var files = formData.files;
-    var whiteboardId = fields["whiteboardId"];
-
-    var name = fields["name"] || "";
-    var date = fields["date"] || (+new Date());
-    var filename = whiteboardId + "_" + date + ".png";
-    var webdavaccess = fields["webdavaccess"] || false;
-    try {
-        webdavaccess = JSON.parse(webdavaccess);
-    } catch (e) {
-        webdavaccess = false;
-    }
-    fs.ensureDir("./public/uploads", function (err) {
-        if (err) {
-            console.log("Could not create upload folder!", err);
-            return;
-        }
-        var imagedata = fields["imagedata"];
-        if (imagedata && imagedata != "") { //Save from base64 data
-            imagedata = imagedata.replace(/^data:image\/png;base64,/, "").replace(/^data:image\/jpeg;base64,/, "");
-            console.log(filename, "uploaded");
-            fs.writeFile('./public/uploads/' + filename, imagedata, 'base64', function (err) {
-                if (err) {
-                    console.log("error", err);
-                    callback(err);
-                } else {
-                    if (webdavaccess) { //Save image to webdav
-                        if (webdav) {
-                            saveImageToWebdav('./public/uploads/' + filename, filename, webdavaccess, function (err) {
-                                if (err) {
-                                    console.log("error", err);
-                                    callback(err);
-                                } else {
-                                    callback();
-                                }
-                            })
-                        } else {
-                            callback("Webdav is not enabled on the server!");
-                        }
-                    } else {
-                        callback();
-                    }
-                }
-            });
-        } else {
-            callback("no imagedata!");
-            console.log("No image Data found for this upload!", name);
-        }
-    });
-}
-
-function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
-    if (webdavaccess) {
-        var webdavserver = webdavaccess["webdavserver"] || "";
-        var webdavpath = webdavaccess["webdavpath"] || "/";
-        var webdavusername = webdavaccess["webdavusername"] || "";
-        var webdavpassword = webdavaccess["webdavpassword"] || "";
-
-        const client = createClient(
-            webdavserver,
-            {
-                username: webdavusername,
-                password: webdavpassword
-            }
-        )
-        client.getDirectoryContents(webdavpath).then((items) => {
-            var cloudpath = webdavpath+ '' + filename;
-            console.log("webdav saving to:", cloudpath);
-            fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
-            callback();
-        }).catch((error) => {
-            callback("403");
-            console.log("Could not connect to webdav!")
-        });
-    } else {
-        callback("Error: no access data!")
-    }
-}
-
-var smallestScreenResolutions = {};
-io.on('connection', function (socket) {
-    var whiteboardId = null;
-
-    socket.on('disconnect', function () {
-        if (smallestScreenResolutions && smallestScreenResolutions[whiteboardId] && socket && socket.id) {
-            delete smallestScreenResolutions[whiteboardId][socket.id];
-        }
-        socket.broadcast.emit('refreshUserBadges', null); //Removes old user Badges
-        sendSmallestScreenResolution();
-    });
-
-    socket.on('drawToWhiteboard', function (content) {
-        content = escapeAllContentStrings(content);
-        if (accessToken === "" || accessToken == content["at"]) {
-            socket.broadcast.to(whiteboardId).emit('drawToWhiteboard', content); //Send to all users in the room (not own socket)
-            s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server
-        } else {
-            socket.emit('wrongAccessToken', true);
-        }
-    });
-
-    socket.on('joinWhiteboard', function (content) {
-        content = escapeAllContentStrings(content);
-        if (accessToken === "" || accessToken == content["at"]) {
-            whiteboardId = content["wid"];
-            socket.join(whiteboardId); //Joins room name=wid
-            smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId] ? smallestScreenResolutions[whiteboardId] : {};
-            smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
-            sendSmallestScreenResolution();
-        } else {
-            socket.emit('wrongAccessToken', true);
-        }
-    });
-
-    socket.on('updateScreenResolution', function (content) {
-        content = escapeAllContentStrings(content);
-        if (accessToken === "" || accessToken == content["at"]) {
-            smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
-            sendSmallestScreenResolution();
-        }
-    });
-
-    function sendSmallestScreenResolution() {
-        if (disableSmallestScreen) {
-            return;
-        }
-        var smallestWidth = 10000;
-        var smallestHeight = 10000;
-        for (var i in smallestScreenResolutions[whiteboardId]) {
-            smallestWidth = smallestWidth > smallestScreenResolutions[whiteboardId][i]["w"] ? smallestScreenResolutions[whiteboardId][i]["w"] : smallestWidth;
-            smallestHeight = smallestHeight > smallestScreenResolutions[whiteboardId][i]["h"] ? smallestScreenResolutions[whiteboardId][i]["h"] : smallestHeight;
-        }
-        io.to(whiteboardId).emit('updateSmallestScreenResolution', { w: smallestWidth, h: smallestHeight });
-    }
-});
-
-//Prevent cross site scripting (xss)
-function escapeAllContentStrings(content, cnt) {
-    if (!cnt)
-        cnt = 0;
-
-    if (typeof (content) === "string") {
-        return DOMPurify.sanitize(content);
-    }
-    for (var i in content) {
-        if (typeof (content[i]) === "string") {
-            content[i] = DOMPurify.sanitize(content[i]);
-        } if (typeof (content[i]) === "object" && cnt < 10) {
-            content[i] = escapeAllContentStrings(content[i], ++cnt);
-        }
-    }
-    return content;
-}
-
-function getArgs() {
-    const args = {}
-    process.argv
-        .slice(2, process.argv.length)
-        .forEach(arg => {
-            // long arg
-            if (arg.slice(0, 2) === '--') {
-                const longArg = arg.split('=')
-                args[longArg[0].slice(2, longArg[0].length)] = longArg[1]
-            }
-            // flags
-            else if (arg[0] === '-') {
-                const flags = arg.slice(1, arg.length).split('')
-                flags.forEach(flag => {
-                    args[flag] = true
-                })
-            }
-        })
-    return args
-}
-
-process.on('unhandledRejection', error => {
-    // Will print "unhandledRejection err is not defined"
-    console.log('unhandledRejection', error.message);
-})

src/css/main.css

@@ -0,0 +1,166 @@
+:root {
+    --selected-icon-bg-color: #dfdfdf;
+}
+
+body {
+    position: relative;
+    margin: 0px;
+    height: calc(var(--vh, 1vh) * 100);
+    width: 100%;
+    overflow: hidden;
+    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica,
+        Arial, sans-serif;
+}
+
+#whiteboardContainer {
+    height: calc(var(--vh, 1vh) * 100);
+    width: 100%;
+}
+
+.btn-group button {
+    background: transparent;
+    border: 2px solid #636060;
+    margin: -1px;
+    /* Green border */
+    color: black;
+    /* White text */
+    padding: 11px 14px;
+    /* Some padding */
+    cursor: pointer;
+    /* Pointer/hand icon */
+    float: left;
+    /* Float the buttons side by side */
+    font-size: 1.2em;
+    height: 45px;
+    width: 50px;
+}
+
+button::-moz-focus-inner {
+    border: 0;
+}
+
+.whiteboard-edit-group.group-disabled {
+    background: repeating-linear-gradient(
+        45deg,
+        rgba(255, 166, 0, 0.366),
+        rgba(255, 166, 0, 0.366) 10px,
+        rgba(255, 166, 0, 0.666) 10px,
+        rgba(255, 166, 0, 0.666) 20px
+    );
+}
+
+/*
+ * Deactivate all pointer events on all the children
+ * of a group when it's disabled.
+ */
+.whiteboard-edit-group.group-disabled > * {
+    pointer-events: none;
+}
+
+/* Clear floats (clearfix hack) */
+
+.btn-group:after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+/* Add a background color on hover */
+
+.btn-group button:hover {
+    background-color: #9a9a9a;
+}
+
+button {
+    outline-width: 0;
+}
+
+.btn-group {
+    background-color: #808080ab;
+    margin-left: 5px;
+    margin-bottom: 5px;
+    float: left;
+    position: relative;
+}
+
+.whiteboard-tool.active:not(:disabled) {
+    background: var(--selected-icon-bg-color);
+}
+
+#whiteboardThicknessSlider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 10px;
+    border-radius: 3px;
+    background: transparent;
+    outline: none;
+    opacity: 1;
+    -webkit-transition: opacity 0.15s ease-in-out;
+    transition: opacity 0.15s ease-in-out;
+}
+
+.textBox.active {
+    border: 1px dashed gray;
+}
+
+.textBox > .removeIcon,
+.textBox > .moveIcon {
+    display: none;
+}
+
+.textBox.active > .removeIcon,
+.textBox.active > .moveIcon {
+    display: block;
+}
+
+.modalBtn {
+    padding: 5px;
+    border-radius: 5px;
+    border: 0px;
+    min-width: 50px;
+    cursor: pointer;
+}
+
+#displayWhiteboardInfoBtn.active {
+    background: var(--selected-icon-bg-color);
+}
+
+#whiteboardInfoContainer {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.displayNone {
+    display: none;
+}
+
+#shareWhiteboardDialog {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(1, 1, 1, 0.35);
+    z-index: 10000000000000;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#shareWhiteboardDialogMessage {
+    background-color: lightgreen;
+    padding: 20px;
+    font-weight: bold;
+}
+
+.shareWhiteboardDialogContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.shareWhiteboardDialogItem {
+    padding: 5px;
+    margin: 5px;
+}

src/index.html

@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Whiteboard</title>
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
+    </head>
+
+    <body>
+        <!---Whiteboard container -!-->
+        <div id="whiteboardContainer"></div>
+
+        <!---Toolbar -!-->
+        <div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
+            <div class="btn-group">
+                <button
+                    id="whiteboardLockBtn"
+                    style="background-color: orange;"
+                    title="View and Write"
+                    type="button"
+                >
+                    <i class="fa fa-lock"></i>
+                </button>
+                <button id="whiteboardUnlockBtn" title="View Only" type="button">
+                    <i class="fa fa-lock-open"></i>
+                </button>
+            </div>
+
+            <div class="btn-group whiteboard-edit-group">
+                <button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button">
+                    <i class="fa fa-trash"></i>
+                </button>
+                <button
+                    style="position: absolute; left: 0px; top: 0px; width: 46px; display: none;"
+                    id="whiteboardTrashBtnConfirm"
+                    title="Confirm clear..."
+                    type="button"
+                >
+                    <i class="fa fa-check"></i>
+                </button>
+                <button id="whiteboardUndoBtn" title="Undo your last step" type="button">
+                    <i class="fa fa-undo"></i>
+                </button>
+                <button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
+                    <i class="fa fa-redo"></i>
+                </button>
+            </div>
+
+            <div class="btn-group whiteboard-edit-group">
+                <button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
+                    <i class="fa fa-mouse-pointer"></i>
+                </button>
+                <button
+                    style="padding-bottom: 11px;"
+                    tool="recSelect"
+                    title="Select an area"
+                    type="button"
+                    class="whiteboard-tool"
+                >
+                    <img src="./images/dottedRec.png" />
+                </button>
+                <button
+                    tool="pen"
+                    title="Take the pen"
+                    type="button"
+                    class="whiteboard-tool active"
+                >
+                    <i class="fa fa-pencil-alt"></i>
+                </button>
+                <button
+                    style="padding-bottom: 8px; padding-top: 6px;"
+                    tool="line"
+                    title="draw a line"
+                    type="button"
+                    class="whiteboard-tool"
+                >
+                    ╱
+                </button>
+                <button tool="rect" title="draw a rectangle" type="button" class="whiteboard-tool">
+                    <i class="far fa-square"></i>
+                </button>
+                <button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
+                    <i class="far fa-circle"></i>
+                </button>
+                <button tool="text" title="write text" type="button" class="whiteboard-tool">
+                    <i class="fas fa-font"></i>
+                </button>
+                <button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
+                    <i class="fa fa-eraser"></i>
+                </button>
+            </div>
+
+            <div class="btn-group whiteboard-edit-group">
+                <button style="width: 190px; cursor: default;">
+                    <div
+                        class="activeToolIcon"
+                        style="position: absolute; top: 2px; left: 2px; font-size: 0.6em;"
+                    >
+                        <i class="fa fa-pencil-alt"></i>
+                    </div>
+                    <img
+                        style="
+                            position: absolute;
+                            left: 11px;
+                            top: 16px;
+                            height: 14px;
+                            width: 130px;
+                        "
+                        src="./images/slider-background.svg"
+                    />
+                    <input
+                        title="Thickness"
+                        id="whiteboardThicknessSlider"
+                        style="position: absolute; left: 9px; width: 130px; top: 15px;"
+                        type="range"
+                        min="1"
+                        max="50"
+                        value="3"
+                    />
+                    <div
+                        id="whiteboardColorpicker"
+                        style="
+                            position: absolute;
+                            left: 155px;
+                            top: 10px;
+                            width: 26px;
+                            height: 23px;
+                            border-radius: 3px;
+                            border: 1px solid darkgrey;
+                        "
+                        data-color="#000000"
+                    ></div>
+                </button>
+            </div>
+
+            <div class="btn-group whiteboard-edit-group">
+                <button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
+                    <i class="fas fa-image"></i>
+                    <i
+                        style="
+                            position: absolute;
+                            top: 3px;
+                            left: 2px;
+                            color: #000000;
+                            font-size: 0.5em;
+                        "
+                        class="fas fa-upload"
+                    ></i>
+                </button>
+
+                <button
+                    style="position: relative;"
+                    id="uploadJsonBtn"
+                    title="Load saved JSON to whiteboard"
+                    type="button"
+                >
+                    <i class="far fa-file-alt"></i>
+                    <i
+                        style="
+                            position: absolute;
+                            top: 3px;
+                            left: 2px;
+                            color: #000000;
+                            font-size: 0.5em;
+                        "
+                        class="fas fa-upload"
+                    ></i>
+                </button>
+
+                <input style="display: none;" id="myFile" type="file" />
+            </div>
+
+            <div class="btn-group">
+                <button id="saveAsImageBtn" title="Save whiteboard as image" type="button">
+                    <i class="fas fa-image"></i>
+                    <i
+                        style="
+                            position: absolute;
+                            top: 3px;
+                            left: 2px;
+                            color: #000000;
+                            font-size: 0.5em;
+                        "
+                        class="fas fa-save"
+                    ></i>
+                </button>
+                <button
+                    style="position: relative; display: none;"
+                    id="uploadWebDavBtn"
+                    title="Save whiteboard to webdav"
+                    type="button"
+                >
+                    <i class="fas fa-globe"></i>
+                    <i
+                        style="
+                            position: absolute;
+                            top: 3px;
+                            left: 2px;
+                            color: #000000;
+                            font-size: 0.5em;
+                        "
+                        class="fas fa-save"
+                    ></i>
+                </button>
+                <button
+                    style="position: relative;"
+                    id="saveAsJSONBtn"
+                    title="Save whiteboard as JSON"
+                    type="button"
+                >
+                    <i class="far fa-file-alt"></i>
+                    <i
+                        style="
+                            position: absolute;
+                            top: 3px;
+                            left: 2px;
+                            color: #000000;
+                            font-size: 0.5em;
+                        "
+                        class="fas fa-save"
+                    ></i>
+                </button>
+
+                <button id="shareWhiteboardBtn" title="share whiteboard" type="button">
+                    <i class="fas fa-share-square"></i>
+                </button>
+
+                <button id="displayWhiteboardInfoBtn" title="Show whiteboard info" type="button">
+                    <i class="fas fa-info-circle"></i>
+                </button>
+            </div>
+
+            <div class="btn-group minGroup">
+                <button
+                    style="width: 25px; padding: 11px 11px;"
+                    id="minMaxBtn"
+                    title="hide buttons"
+                    type="button"
+                >
+                    <i
+                        id="minBtn"
+                        style="position: relative; left: -5px;"
+                        class="fas fa-angle-left"
+                    ></i>
+                    <i
+                        id="maxBtn"
+                        style="position: relative; left: -5px; display: none;"
+                        class="fas fa-angle-right"
+                    ></i>
+                </button>
+            </div>
+        </div>
+
+        <div id="whiteboardInfoContainer">
+            <p><b>Whiteboard information:</b></p>
+            <p># connected users: <i id="connectedUsersCount">0</i></p>
+            <p>Smallest screen resolution: <i id="smallestScreenResolution">Unknown.</i></p>
+            <p># msg. sent to server: <i id="messageSentCount">0</i></p>
+            <p># msg. received from server: <i id="messageReceivedCount">0</i></p>
+        </div>
+
+        <div id="shareWhiteboardDialog" class="displayNone">
+            <div class="shareWhiteboardDialogContent">
+                <button
+                    class="shareWhiteboardDialogItem"
+                    id="shareWhiteboardDialogCopyReadOnlyLink"
+                >
+                    <i class="fa fa-lock"></i>&nbsp;Share read-only link
+                </button>
+                <button
+                    class="shareWhiteboardDialogItem displayNone"
+                    id="shareWhiteboardDialogCopyReadWriteLink"
+                >
+                    <i class="fa fa-lock-open"></i>&nbsp;Share read/write link
+                </button>
+                <button class="shareWhiteboardDialogItem" id="shareWhiteboardDialogGoBack">
+                    <b>Go back to the whiteboard</b>
+                </button>
+                <p
+                    class="shareWhiteboardDialogItem displayNone"
+                    id="shareWhiteboardDialogMessage"
+                ></p>
+            </div>
+        </div>
+    </body>
+</html>

src/js/classes/Point.js

@@ -0,0 +1,79 @@
+import { computeDist } from "../utils";
+
+class Point {
+    /**
+     * @type {number}
+     */
+    #x;
+    get x() {
+        return this.#x;
+    }
+
+    /**
+     * @type {number}
+     */
+    #y;
+    get y() {
+        return this.#y;
+    }
+
+    /**
+     * @type {Point}
+     */
+    static #lastKnownPos = new Point(0, 0);
+    static get lastKnownPos() {
+        return Point.#lastKnownPos;
+    }
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     */
+    constructor(x, y) {
+        this.#x = x;
+        this.#y = y;
+    }
+
+    get isZeroZero() {
+        return this.#x === 0 && this.#y === 0;
+    }
+
+    /**
+     * Get a Point object from an event
+     * @param {event} e
+     * @returns {Point}
+     */
+    static fromEvent(e) {
+        // the epsilon hack is required to detect touches
+        const epsilon = 0.0001;
+        let x = (e.offsetX || e.pageX - $(e.target).offset().left) + epsilon;
+        let y = (e.offsetY || e.pageY - $(e.target).offset().top) + epsilon;
+
+        if (Number.isNaN(x) || Number.isNaN(y) || (x === epsilon && y === epsilon)) {
+            // if it's a touch actually
+            if (e.touches && e.touches.length && e.touches.length > 0) {
+                const touch = e.touches[0];
+                x = touch.clientX - $("#mouseOverlay").offset().left;
+                y = touch.clientY - $("#mouseOverlay").offset().top;
+            } else {
+                // if it's a touchend event
+                return Point.#lastKnownPos;
+            }
+        }
+
+        Point.#lastKnownPos = new Point(x - epsilon, y - epsilon);
+        return Point.#lastKnownPos;
+    }
+
+    /**
+     * Compute euclidean distance between points
+     *
+     * @param {Point} otherPoint
+     * @returns {number}
+     */
+    distTo(otherPoint) {
+        return computeDist(this, otherPoint);
+    }
+}
+
+export default Point;

src/js/icons.js

@@ -0,0 +1,58 @@
+import { library, dom } from "@fortawesome/fontawesome-svg-core";
+import {
+    faUndo,
+    faTrash,
+    faCheck,
+    faRedo,
+    faMousePointer,
+    faPencilAlt,
+    faEraser,
+    faImage,
+    faFont,
+    faSave,
+    faUpload,
+    faShareSquare,
+    faAngleLeft,
+    faAngleRight,
+    faSortDown,
+    faExpandArrowsAlt,
+    faLock,
+    faLockOpen,
+    faInfoCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+    faSquare,
+    faCircle,
+    faFile,
+    faFileAlt,
+    faPlusSquare,
+} from "@fortawesome/free-regular-svg-icons";
+
+library.add(
+    faUndo,
+    faTrash,
+    faCheck,
+    faRedo,
+    faMousePointer,
+    faPencilAlt,
+    faEraser,
+    faImage,
+    faFont,
+    faSave,
+    faUpload,
+    faShareSquare,
+    faAngleLeft,
+    faAngleRight,
+    faSortDown,
+    faExpandArrowsAlt,
+    faSquare,
+    faCircle,
+    faFile,
+    faFileAlt,
+    faPlusSquare,
+    faLock,
+    faLockOpen,
+    faInfoCircle
+);
+
+dom.i2svg();

src/js/index.js

@@ -0,0 +1,27 @@
+import "jquery-ui/ui/core";
+import "jquery-ui/ui/widgets/draggable";
+import "jquery-ui/ui/widgets/resizable";
+import "jquery-ui-rotatable/jquery.ui.rotatable";
+import "jquery-ui/themes/base/resizable.css";
+import "../css/main.css";
+
+import "./icons";
+import main from "./main";
+
+$(document).ready(function () {
+    // Set correct width height on mobile browsers
+    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    if (isChrome) {
+        $("head").append(
+            '<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />'
+        );
+    } else {
+        $("head").append('<meta name="viewport" content="width=1400" />');
+    }
+
+    main();
+});
+
+if (module.hot) {
+    module.hot.accept();
+}

src/js/keybinds.js

@@ -0,0 +1,48 @@
+/* -----------
+ KEYBINDINGS
+----------- */
+
+//> defmod is "command" on OS X and "ctrl" elsewhere
+//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j.
+
+const keybinds = {
+    // 'key(s)' : 'function',
+    "defmod-shift-z": "clearWhiteboard",
+    "defmod-z": "undoStep",
+    "defmod-y": "redoStep",
+    "defmod-x": "setTool_recSelect",
+    "defmod-m": "setTool_mouse",
+    "defmod-p": "setTool_pen",
+    "defmod-l": "setTool_line",
+    "defmod-r": "setTool_rect",
+    "defmod-c": "setTool_circle",
+    "defmod-shift-f": "toggleLineRecCircle",
+    "defmod-shift-x": "togglePenEraser",
+    "defmod-shift-r": "toggleMainColors",
+    "defmod-a": "setTool_text",
+    "defmod-e": "setTool_eraser",
+    "defmod-up": "thickness_bigger",
+    "defmod-down": "thickness_smaller",
+    "defmod-shift-c": "openColorPicker",
+    "defmod-shift-1": "setDrawColorBlack",
+    "defmod-shift-2": "setDrawColorBlue",
+    "defmod-shift-3": "setDrawColorGreen",
+    "defmod-shift-4": "setDrawColorYellow",
+    "defmod-shift-5": "setDrawColorRed",
+    "defmod-s": "saveWhiteboardAsImage",
+    "defmod-shift-k": "saveWhiteboardAsJson",
+    "defmod-shift-i": "uploadWhiteboardToWebDav",
+    "defmod-shift-j": "uploadJsonToWhiteboard",
+    "defmod-shift-s": "shareWhiteboard",
+    tab: "hideShowControls",
+    up: "moveDraggableUp",
+    down: "moveDraggableDown",
+    left: "moveDraggableLeft",
+    right: "moveDraggableRight",
+    "defmod-enter": "dropDraggable",
+    "shift-enter": "addToBackground",
+    escape: "cancelAllActions",
+    del: "deleteSelection",
+};
+
+export default keybinds;

src/js/main.js

@@ -0,0 +1,914 @@
+import keymage from "keymage";
+import io from "socket.io-client";
+import whiteboard from "./whiteboard";
+import keybinds from "./keybinds";
+import Picker from "vanilla-picker";
+import { dom } from "@fortawesome/fontawesome-svg-core";
+import pdfjsLib from "pdfjs-dist/webpack";
+import shortcutFunctions from "./shortcutFunctions";
+import ReadOnlyService from "./services/ReadOnlyService";
+import InfoService from "./services/InfoService";
+import { getSubDir } from "./utils";
+import ConfigService from "./services/ConfigService";
+import { v4 as uuidv4 } from "uuid";
+
+const urlParams = new URLSearchParams(window.location.search);
+let whiteboardId = urlParams.get("whiteboardid");
+const randomid = urlParams.get("randomid");
+
+if (randomid) {
+    whiteboardId = uuidv4();
+    urlParams.delete("randomid");
+    window.location.search = urlParams;
+}
+
+if (!whiteboardId) {
+    whiteboardId = "myNewWhiteboard";
+}
+
+whiteboardId = unescape(encodeURIComponent(whiteboardId)).replace(/[^a-zA-Z0-9\-]/g, "");
+
+if (urlParams.get("whiteboardid") !== whiteboardId) {
+    urlParams.set("whiteboardid", whiteboardId);
+    window.location.search = urlParams;
+}
+
+const myUsername = urlParams.get("username") || "unknown" + (Math.random() + "").substring(2, 6);
+const accessToken = urlParams.get("accesstoken") || "";
+
+// Custom Html Title
+const title = urlParams.get("title");
+if (title) {
+    document.title = decodeURIComponent(title);
+}
+
+const subdir = getSubDir();
+let signaling_socket;
+
+function main() {
+    signaling_socket = io("", { path: subdir + "/ws-api" }); // Connect even if we are in a subdir behind a reverse proxy
+
+    signaling_socket.on("connect", function () {
+        console.log("Websocket connected!");
+
+        signaling_socket.on("whiteboardConfig", (serverResponse) => {
+            ConfigService.initFromServer(serverResponse);
+            // Inti whiteboard only when we have the config from the server
+            initWhiteboard();
+        });
+
+        signaling_socket.on("whiteboardInfoUpdate", (info) => {
+            InfoService.updateInfoFromServer(info);
+            whiteboard.updateSmallestScreenResolution();
+        });
+
+        signaling_socket.on("drawToWhiteboard", function (content) {
+            whiteboard.handleEventsAndData(content, true);
+            InfoService.incrementNbMessagesReceived();
+        });
+
+        signaling_socket.on("refreshUserBadges", function () {
+            whiteboard.refreshUserBadges();
+        });
+
+        let accessDenied = false;
+        signaling_socket.on("wrongAccessToken", function () {
+            if (!accessDenied) {
+                accessDenied = true;
+                showBasicAlert("Access denied! Wrong accessToken!");
+            }
+        });
+
+        signaling_socket.emit("joinWhiteboard", {
+            wid: whiteboardId,
+            at: accessToken,
+            windowWidthHeight: { w: $(window).width(), h: $(window).height() },
+        });
+    });
+}
+
+function showBasicAlert(html, newOptions) {
+    var options = {
+        header: "INFO MESSAGE",
+        okBtnText: "Ok",
+        headercolor: "#d25d5d",
+        hideAfter: false,
+        onOkClick: false,
+    };
+    if (newOptions) {
+        for (var i in newOptions) {
+            options[i] = newOptions[i];
+        }
+    }
+    var alertHtml = $(
+        '<div class="basicalert" style="position:absolute; left:0px; width:100%; top:70px; font-family: monospace;">' +
+            '<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
+            '<div style="border-bottom: 1px solid #676767; background: ' +
+            options["headercolor"] +
+            '; padding-left: 5px; font-size: 0.8em;">' +
+            options["header"] +
+            '<div style="float: right; margin-right: 4px; color: #373737; cursor: pointer;" class="closeAlert">x</div></div>' +
+            '<div style="padding: 10px;" class="htmlcontent"></div>' +
+            '<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' +
+            options["okBtnText"] +
+            "</button></div>" +
+            "</div>" +
+            "</div>"
+    );
+    alertHtml.find(".htmlcontent").append(html);
+    $("body").append(alertHtml);
+    alertHtml
+        .find(".okbtn")
+        .off("click")
+        .click(function () {
+            if (options.onOkClick) {
+                options.onOkClick();
+            }
+            alertHtml.remove();
+        });
+    alertHtml
+        .find(".closeAlert")
+        .off("click")
+        .click(function () {
+            alertHtml.remove();
+        });
+
+    if (options.hideAfter) {
+        setTimeout(function () {
+            alertHtml.find(".okbtn").click();
+        }, 1000 * options.hideAfter);
+    }
+}
+
+function initWhiteboard() {
+    $(document).ready(function () {
+        // by default set in readOnly mode
+        ReadOnlyService.activateReadOnlyMode();
+
+        if (urlParams.get("webdav") === "true") {
+            $("#uploadWebDavBtn").show();
+        }
+
+        whiteboard.loadWhiteboard("#whiteboardContainer", {
+            //Load the whiteboard
+            whiteboardId: whiteboardId,
+            username: btoa(myUsername),
+            backgroundGridUrl: "./images/" + ConfigService.backgroundGridImage,
+            sendFunction: function (content) {
+                if (ReadOnlyService.readOnlyActive) return;
+                //ADD IN LATER THROUGH CONFIG
+                // if (content.t === 'cursor') {
+                //     if (whiteboard.drawFlag) return;
+                // }
+                content["at"] = accessToken;
+                signaling_socket.emit("drawToWhiteboard", content);
+                InfoService.incrementNbMessagesSent();
+            },
+        });
+
+        // request whiteboard from server
+        $.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(
+            function (data) {
+                whiteboard.loadData(data);
+            }
+        );
+
+        $(window).resize(function () {
+            signaling_socket.emit("updateScreenResolution", {
+                at: accessToken,
+                windowWidthHeight: { w: $(window).width(), h: $(window).height() },
+            });
+        });
+
+        /*----------------/
+        Whiteboard actions
+        /----------------*/
+
+        var tempLineTool = false;
+        var strgPressed = false;
+        //Handle key actions
+        $(document).on("keydown", function (e) {
+            if (e.which == 16) {
+                if (whiteboard.tool == "pen" && !strgPressed) {
+                    tempLineTool = true;
+                    whiteboard.ownCursor.hide();
+                    if (whiteboard.drawFlag) {
+                        whiteboard.mouseup({
+                            offsetX: whiteboard.prevPos.x,
+                            offsetY: whiteboard.prevPos.y,
+                        });
+                        shortcutFunctions.setTool_line();
+                        whiteboard.mousedown({
+                            offsetX: whiteboard.prevPos.x,
+                            offsetY: whiteboard.prevPos.y,
+                        });
+                    } else {
+                        shortcutFunctions.setTool_line();
+                    }
+                }
+                whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
+            } else if (e.which == 17) {
+                strgPressed = true;
+            }
+            //console.log(e.which);
+        });
+        $(document).on("keyup", function (e) {
+            if (e.which == 16) {
+                if (tempLineTool) {
+                    tempLineTool = false;
+                    shortcutFunctions.setTool_pen();
+                    whiteboard.ownCursor.show();
+                }
+                whiteboard.pressedKeys["shift"] = false;
+            } else if (e.which == 17) {
+                strgPressed = false;
+            }
+        });
+
+        //Load keybindings from keybinds.js to given functions
+        Object.entries(keybinds).forEach(([key, functionName]) => {
+            const associatedShortcutFunction = shortcutFunctions[functionName];
+            if (associatedShortcutFunction) {
+                keymage(key, associatedShortcutFunction, { preventDefault: true });
+            } else {
+                console.error(
+                    "Function you want to keybind on key:",
+                    key,
+                    "named:",
+                    functionName,
+                    "is not available!"
+                );
+            }
+        });
+
+        // whiteboard clear button
+        $("#whiteboardTrashBtn")
+            .off("click")
+            .click(function () {
+                $("#whiteboardTrashBtnConfirm").show().focus();
+                $(this).css({ visibility: "hidden" });
+            });
+
+        $("#whiteboardTrashBtnConfirm").mouseout(function () {
+            $(this).hide();
+            $("#whiteboardTrashBtn").css({ visibility: "inherit" });
+        });
+
+        $("#whiteboardTrashBtnConfirm")
+            .off("click")
+            .click(function () {
+                $(this).hide();
+                $("#whiteboardTrashBtn").css({ visibility: "inherit" });
+                whiteboard.clearWhiteboard();
+            });
+
+        // undo button
+        $("#whiteboardUndoBtn")
+            .off("click")
+            .click(function () {
+                whiteboard.undoWhiteboardClick();
+            });
+
+        // redo button
+        $("#whiteboardRedoBtn")
+            .off("click")
+            .click(function () {
+                whiteboard.redoWhiteboardClick();
+            });
+
+        // view only
+        $("#whiteboardLockBtn")
+            .off("click")
+            .click(() => {
+                ReadOnlyService.deactivateReadOnlyMode();
+            });
+        $("#whiteboardUnlockBtn")
+            .off("click")
+            .click(() => {
+                ReadOnlyService.activateReadOnlyMode();
+            });
+        $("#whiteboardUnlockBtn").hide();
+        $("#whiteboardLockBtn").show();
+
+        // switch tool
+        $(".whiteboard-tool")
+            .off("click")
+            .click(function () {
+                $(".whiteboard-tool").removeClass("active");
+                $(this).addClass("active");
+                var activeTool = $(this).attr("tool");
+                whiteboard.setTool(activeTool);
+                if (activeTool == "mouse" || activeTool == "recSelect") {
+                    $(".activeToolIcon").empty();
+                } else {
+                    $(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
+                }
+            });
+
+        // upload image button
+        $("#addImgToCanvasBtn")
+            .off("click")
+            .click(function () {
+                if (ReadOnlyService.readOnlyActive) return;
+                showBasicAlert("Please drag the image into the browser.");
+            });
+
+        // save image as imgae
+        $("#saveAsImageBtn")
+            .off("click")
+            .click(function () {
+                whiteboard.getImageDataBase64(
+                    {
+                        imageFormat: ConfigService.imageDownloadFormat,
+                        drawBackgroundGrid: ConfigService.drawBackgroundGrid,
+                    },
+                    function (imgData) {
+                        var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
+                        setTimeout(function () {
+                            //FireFox seems to require a setTimeout for this to work.
+                            var a = document.createElement("a");
+                            a.href = imgData;
+                            a.download = "whiteboard." + ConfigService.imageDownloadFormat;
+                            w.document.body.appendChild(a);
+                            a.click();
+                            w.document.body.removeChild(a);
+                            setTimeout(function () {
+                                w.close();
+                            }, 100);
+                        }, 0);
+                    }
+                );
+            });
+
+        // save image to json containing steps
+        $("#saveAsJSONBtn")
+            .off("click")
+            .click(function () {
+                var imgData = whiteboard.getImageDataJson();
+
+                var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
+                setTimeout(function () {
+                    //FireFox seems to require a setTimeout for this to work.
+                    var a = document.createElement("a");
+                    a.href = window.URL.createObjectURL(new Blob([imgData], { type: "text/json" }));
+                    a.download = "whiteboard.json";
+                    w.document.body.appendChild(a);
+                    a.click();
+                    w.document.body.removeChild(a);
+                    setTimeout(function () {
+                        w.close();
+                    }, 100);
+                }, 0);
+            });
+
+        $("#uploadWebDavBtn")
+            .off("click")
+            .click(function () {
+                if ($(".webdavUploadBtn").length > 0) {
+                    return;
+                }
+
+                var webdavserver = localStorage.getItem("webdavserver") || "";
+                var webdavpath = localStorage.getItem("webdavpath") || "/";
+                var webdavusername = localStorage.getItem("webdavusername") || "";
+                var webdavpassword = localStorage.getItem("webdavpassword") || "";
+                var webDavHtml = $(
+                    "<div>" +
+                        "<table>" +
+                        "<tr>" +
+                        "<td>Server URL:</td>" +
+                        '<td><input class="webdavserver" type="text" value="' +
+                        webdavserver +
+                        '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
+                        "<td></td>" +
+                        "</tr>" +
+                        "<tr>" +
+                        "<td>Path:</td>" +
+                        '<td><input class="webdavpath" type="text" placeholder="folder" value="' +
+                        webdavpath +
+                        '"></td>' +
+                        '<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
+                        "</tr>" +
+                        "<tr>" +
+                        "<td>Username:</td>" +
+                        '<td><input class="webdavusername" type="text" value="' +
+                        webdavusername +
+                        '" placeholder="username"></td>' +
+                        '<td style="font-size: 0.7em;"></td>' +
+                        "</tr>" +
+                        "<tr>" +
+                        "<td>Password:</td>" +
+                        '<td><input class="webdavpassword" type="password" value="' +
+                        webdavpassword +
+                        '" placeholder="password"></td>' +
+                        '<td style="font-size: 0.7em;"></td>' +
+                        "</tr>" +
+                        "<tr>" +
+                        '<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
+                        "</tr>" +
+                        "<tr>" +
+                        "<td></td>" +
+                        '<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
+                        "</tr>" +
+                        "</table>" +
+                        "</div>"
+                );
+                webDavHtml
+                    .find(".webdavUploadBtn")
+                    .off("click")
+                    .click(function () {
+                        var webdavserver = webDavHtml.find(".webdavserver").val();
+                        localStorage.setItem("webdavserver", webdavserver);
+                        var webdavpath = webDavHtml.find(".webdavpath").val();
+                        localStorage.setItem("webdavpath", webdavpath);
+                        var webdavusername = webDavHtml.find(".webdavusername").val();
+                        localStorage.setItem("webdavusername", webdavusername);
+                        var webdavpassword = webDavHtml.find(".webdavpassword").val();
+                        localStorage.setItem("webdavpassword", webdavpassword);
+                        whiteboard.getImageDataBase64(
+                            {
+                                imageFormat: ConfigService.imageDownloadFormat,
+                                drawBackgroundGrid: ConfigService.drawBackgroundGrid,
+                            },
+                            function (base64data) {
+                                var webdavaccess = {
+                                    webdavserver: webdavserver,
+                                    webdavpath: webdavpath,
+                                    webdavusername: webdavusername,
+                                    webdavpassword: webdavpassword,
+                                };
+                                webDavHtml.find(".loadingWebdavText").show();
+                                webDavHtml.find(".webdavUploadBtn").hide();
+                                saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
+                                    if (err) {
+                                        webDavHtml.find(".loadingWebdavText").hide();
+                                        webDavHtml.find(".webdavUploadBtn").show();
+                                    } else {
+                                        webDavHtml.parents(".basicalert").remove();
+                                    }
+                                });
+                            }
+                        );
+                    });
+                showBasicAlert(webDavHtml, {
+                    header: "Save to Webdav",
+                    okBtnText: "cancel",
+                    headercolor: "#0082c9",
+                });
+                // render newly added icons
+                dom.i2svg();
+            });
+
+        // upload json containing steps
+        $("#uploadJsonBtn")
+            .off("click")
+            .click(function () {
+                $("#myFile").click();
+            });
+
+        $("#shareWhiteboardBtn")
+            .off("click")
+            .click(() => {
+                function urlToClipboard(whiteboardId = null) {
+                    const { protocol, host, pathname, search } = window.location;
+                    const basePath = `${protocol}//${host}${pathname}`;
+                    const getParams = new URLSearchParams(search);
+
+                    // Clear ursername from get parameters
+                    getParams.delete("username");
+
+                    if (whiteboardId) {
+                        // override whiteboardId value in URL
+                        getParams.set("whiteboardid", whiteboardId);
+                    }
+
+                    const url = `${basePath}?${getParams.toString()}`;
+                    $("<textarea/>")
+                        .appendTo("body")
+                        .val(url)
+                        .select()
+                        .each(() => {
+                            document.execCommand("copy");
+                        })
+                        .remove();
+                }
+
+                // UI related
+                // clear message
+                $("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
+
+                $("#shareWhiteboardDialog").toggleClass("displayNone", false);
+                $("#shareWhiteboardDialogGoBack")
+                    .off("click")
+                    .click(() => {
+                        $("#shareWhiteboardDialog").toggleClass("displayNone", true);
+                    });
+
+                $("#shareWhiteboardDialogCopyReadOnlyLink")
+                    .off("click")
+                    .click(() => {
+                        urlToClipboard(ConfigService.correspondingReadOnlyWid);
+
+                        $("#shareWhiteboardDialogMessage")
+                            .toggleClass("displayNone", false)
+                            .text("Read-only link copied to clipboard ✓");
+                    });
+
+                $("#shareWhiteboardDialogCopyReadWriteLink")
+                    .toggleClass("displayNone", ConfigService.isReadOnly)
+                    .click(() => {
+                        $("#shareWhiteboardDialogMessage")
+                            .toggleClass("displayNone", false)
+                            .text("Read/write link copied to clipboard ✓");
+                        urlToClipboard();
+                    });
+            });
+
+        $("#displayWhiteboardInfoBtn")
+            .off("click")
+            .click(() => {
+                InfoService.toggleDisplayInfo();
+            });
+
+        var btnsMini = false;
+        $("#minMaxBtn")
+            .off("click")
+            .click(function () {
+                if (!btnsMini) {
+                    $("#toolbar").find(".btn-group:not(.minGroup)").hide();
+                    $(this).find("#minBtn").hide();
+                    $(this).find("#maxBtn").show();
+                } else {
+                    $("#toolbar").find(".btn-group").show();
+                    $(this).find("#minBtn").show();
+                    $(this).find("#maxBtn").hide();
+                }
+                btnsMini = !btnsMini;
+            });
+
+        // load json to whiteboard
+        $("#myFile").on("change", function () {
+            var file = document.getElementById("myFile").files[0];
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                try {
+                    var j = JSON.parse(e.target.result);
+                    whiteboard.loadJsonData(j);
+                } catch (e) {
+                    showBasicAlert("File was not a valid JSON!");
+                }
+            };
+            reader.readAsText(file);
+            $(this).val("");
+        });
+
+        // On thickness slider change
+        $("#whiteboardThicknessSlider").on("input", function () {
+            if (ReadOnlyService.readOnlyActive) return;
+            whiteboard.setStrokeThickness($(this).val());
+        });
+
+        // handle drag&drop
+        var dragCounter = 0;
+        $("#whiteboardContainer").on("dragenter", function (e) {
+            if (ReadOnlyService.readOnlyActive) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounter++;
+            whiteboard.dropIndicator.show();
+        });
+
+        $("#whiteboardContainer").on("dragleave", function (e) {
+            if (ReadOnlyService.readOnlyActive) return;
+
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounter--;
+            if (dragCounter === 0) {
+                whiteboard.dropIndicator.hide();
+            }
+        });
+
+        $("#whiteboardContainer").on("drop", function (e) {
+            //Handle drop
+            if (ReadOnlyService.readOnlyActive) return;
+
+            if (e.originalEvent.dataTransfer) {
+                if (e.originalEvent.dataTransfer.files.length) {
+                    //File from harddisc
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var filename = e.originalEvent.dataTransfer.files[0]["name"];
+                    if (isImageFileName(filename)) {
+                        var blob = e.originalEvent.dataTransfer.files[0];
+                        var reader = new window.FileReader();
+                        reader.readAsDataURL(blob);
+                        reader.onloadend = function () {
+                            const base64data = reader.result;
+                            uploadImgAndAddToWhiteboard(base64data);
+                        };
+                    } else if (isPDFFileName(filename)) {
+                        //Handle PDF Files
+                        var blob = e.originalEvent.dataTransfer.files[0];
+
+                        var reader = new window.FileReader();
+                        reader.onloadend = function () {
+                            var pdfData = new Uint8Array(this.result);
+
+                            var loadingTask = pdfjsLib.getDocument({ data: pdfData });
+                            loadingTask.promise.then(
+                                function (pdf) {
+                                    console.log("PDF loaded");
+
+                                    var currentDataUrl = null;
+                                    var modalDiv = $(
+                                        "<div>" +
+                                            "Page: <select></select> " +
+                                            '<button style="margin-bottom: 3px;" class="modalBtn"><i class="fas fa-upload"></i> Upload to Whiteboard</button>' +
+                                            '<img style="width:100%;" src=""/>' +
+                                            "</div>"
+                                    );
+
+                                    modalDiv.find("select").change(function () {
+                                        showPDFPageAsImage(parseInt($(this).val()));
+                                    });
+
+                                    modalDiv
+                                        .find("button")
+                                        .off("click")
+                                        .click(function () {
+                                            if (currentDataUrl) {
+                                                $(".basicalert").remove();
+                                                uploadImgAndAddToWhiteboard(currentDataUrl);
+                                            }
+                                        });
+
+                                    for (var i = 1; i < pdf.numPages + 1; i++) {
+                                        modalDiv
+                                            .find("select")
+                                            .append('<option value="' + i + '">' + i + "</option>");
+                                    }
+
+                                    showBasicAlert(modalDiv, {
+                                        header: "Pdf to Image",
+                                        okBtnText: "cancel",
+                                        headercolor: "#0082c9",
+                                    });
+
+                                    // render newly added icons
+                                    dom.i2svg();
+
+                                    showPDFPageAsImage(1);
+                                    function showPDFPageAsImage(pageNumber) {
+                                        // Fetch the page
+                                        pdf.getPage(pageNumber).then(function (page) {
+                                            console.log("Page loaded");
+
+                                            var scale = 1.5;
+                                            var viewport = page.getViewport({ scale: scale });
+
+                                            // Prepare canvas using PDF page dimensions
+                                            var canvas = $("<canvas></canvas>")[0];
+                                            var context = canvas.getContext("2d");
+                                            canvas.height = viewport.height;
+                                            canvas.width = viewport.width;
+
+                                            // Render PDF page into canvas context
+                                            var renderContext = {
+                                                canvasContext: context,
+                                                viewport: viewport,
+                                            };
+                                            var renderTask = page.render(renderContext);
+                                            renderTask.promise.then(function () {
+                                                var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
+                                                currentDataUrl = dataUrl;
+                                                modalDiv.find("img").attr("src", dataUrl);
+                                                console.log("Page rendered");
+                                            });
+                                        });
+                                    }
+                                },
+                                function (reason) {
+                                    // PDF loading error
+
+                                    showBasicAlert(
+                                        "Error loading pdf as image! Check that this is a vaild pdf file!"
+                                    );
+                                    console.error(reason);
+                                }
+                            );
+                        };
+                        reader.readAsArrayBuffer(blob);
+                    } else {
+                        showBasicAlert("File must be an image!");
+                    }
+                } else {
+                    //File from other browser
+
+                    var fileUrl = e.originalEvent.dataTransfer.getData("URL");
+                    var imageUrl = e.originalEvent.dataTransfer.getData("text/html");
+                    var rex = /src="?([^"\s]+)"?\s*/;
+                    var url = rex.exec(imageUrl);
+                    if (url && url.length > 1) {
+                        url = url[1];
+                    } else {
+                        url = "";
+                    }
+
+                    isValidImageUrl(fileUrl, function (isImage) {
+                        if (isImage && isImageFileName(url)) {
+                            whiteboard.addImgToCanvasByUrl(fileUrl);
+                        } else {
+                            isValidImageUrl(url, function (isImage) {
+                                if (isImage) {
+                                    if (isImageFileName(url) || url.startsWith("http")) {
+                                        whiteboard.addImgToCanvasByUrl(url);
+                                    } else {
+                                        uploadImgAndAddToWhiteboard(url); //Last option maybe its base64
+                                    }
+                                } else {
+                                    showBasicAlert("Can only upload Imagedata!");
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+            dragCounter = 0;
+            whiteboard.dropIndicator.hide();
+        });
+
+        new Picker({
+            parent: $("#whiteboardColorpicker")[0],
+            color: "#000000",
+            onChange: function (color) {
+                whiteboard.setDrawColor(color.rgbaString);
+            },
+        });
+
+        // on startup select mouse
+        shortcutFunctions.setTool_mouse();
+        // fix bug cursor not showing up
+        whiteboard.refreshCursorAppearance();
+
+        if (process.env.NODE_ENV === "production") {
+            if (ConfigService.readOnlyOnWhiteboardLoad) ReadOnlyService.activateReadOnlyMode();
+            else ReadOnlyService.deactivateReadOnlyMode();
+
+            if (ConfigService.displayInfoOnWhiteboardLoad) InfoService.displayInfo();
+            else InfoService.hideInfo();
+        } else {
+            // in dev
+            ReadOnlyService.deactivateReadOnlyMode();
+            InfoService.displayInfo();
+        }
+
+        // In any case, if we are on read-only whiteboard we activate read-only mode
+        if (ConfigService.isReadOnly) ReadOnlyService.activateReadOnlyMode();
+    });
+
+    //Prevent site from changing tab on drag&drop
+    window.addEventListener(
+        "dragover",
+        function (e) {
+            e = e || event;
+            e.preventDefault();
+        },
+        false
+    );
+    window.addEventListener(
+        "drop",
+        function (e) {
+            e = e || event;
+            e.preventDefault();
+        },
+        false
+    );
+
+    function uploadImgAndAddToWhiteboard(base64data) {
+        const date = +new Date();
+        $.ajax({
+            type: "POST",
+            url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
+            data: {
+                imagedata: base64data,
+                whiteboardId: whiteboardId,
+                date: date,
+                at: accessToken,
+            },
+            success: function (msg) {
+                const { correspondingReadOnlyWid } = ConfigService;
+                const filename = `${correspondingReadOnlyWid}_${date}.png`;
+                const rootUrl = document.URL.substr(0, document.URL.lastIndexOf("/"));
+                whiteboard.addImgToCanvasByUrl(
+                    `${rootUrl}/uploads/${correspondingReadOnlyWid}/${filename}`
+                ); //Add image to canvas
+                console.log("Image uploaded!");
+            },
+            error: function (err) {
+                showBasicAlert("Failed to upload frame: " + JSON.stringify(err));
+            },
+        });
+    }
+
+    function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
+        var date = +new Date();
+        $.ajax({
+            type: "POST",
+            url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "api/upload",
+            data: {
+                imagedata: base64data,
+                whiteboardId: whiteboardId,
+                date: date,
+                at: accessToken,
+                webdavaccess: JSON.stringify(webdavaccess),
+            },
+            success: function (msg) {
+                showBasicAlert("Whiteboard was saved to Webdav!", {
+                    headercolor: "#5c9e5c",
+                });
+                console.log("Image uploaded for webdav!");
+                callback();
+            },
+            error: function (err) {
+                if (err.status == 403) {
+                    showBasicAlert(
+                        "Could not connect to Webdav folder! Please check the credentials and paths and try again!"
+                    );
+                } else {
+                    showBasicAlert("Unknown Webdav error! ", err);
+                }
+                callback(err);
+            },
+        });
+    }
+
+    // verify if filename refers to an image
+    function isImageFileName(filename) {
+        var extension = filename.split(".")[filename.split(".").length - 1];
+        var known_extensions = ["png", "jpg", "jpeg", "gif", "tiff", "bmp", "webp"];
+        return known_extensions.includes(extension.toLowerCase());
+    }
+
+    // verify if filename refers to an pdf
+    function isPDFFileName(filename) {
+        var extension = filename.split(".")[filename.split(".").length - 1];
+        var known_extensions = ["pdf"];
+        return known_extensions.includes(extension.toLowerCase());
+    }
+
+    // verify if given url is url to an image
+    function isValidImageUrl(url, callback) {
+        var img = new Image();
+        var timer = null;
+        img.onerror = img.onabort = function () {
+            clearTimeout(timer);
+            callback(false);
+        };
+        img.onload = function () {
+            clearTimeout(timer);
+            callback(true);
+        };
+        timer = setTimeout(function () {
+            callback(false);
+        }, 2000);
+        img.src = url;
+    }
+
+    // handle pasting from clipboard
+    window.addEventListener("paste", function (e) {
+        if ($(".basicalert").length > 0) {
+            return;
+        }
+        if (e.clipboardData) {
+            var items = e.clipboardData.items;
+            var imgItemFound = false;
+            if (items) {
+                // Loop through all items, looking for any kind of image
+                for (var i = 0; i < items.length; i++) {
+                    if (items[i].type.indexOf("image") !== -1) {
+                        imgItemFound = true;
+                        // We need to represent the image as a file,
+                        var blob = items[i].getAsFile();
+
+                        var reader = new window.FileReader();
+                        reader.readAsDataURL(blob);
+                        reader.onloadend = function () {
+                            console.log("Uploading image!");
+                            let base64data = reader.result;
+                            uploadImgAndAddToWhiteboard(base64data);
+                        };
+                    }
+                }
+            }
+
+            if (!imgItemFound && whiteboard.tool != "text") {
+                showBasicAlert(
+                    "Please Drag&Drop the image or pdf into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)"
+                );
+            }
+        }
+    });
+}
+
+export default main;

src/js/services/ConfigService.js

@@ -0,0 +1,141 @@
+import { getThrottling } from "./ConfigService.utils";
+
+/**
+ * Class to hold the configuration sent by the backend
+ */
+class ConfigService {
+    /**
+     * @type {object}
+     */
+    #configFromServer = {};
+    get configFromServer() {
+        return this.#configFromServer;
+    }
+
+    /**
+     * Associated read-only id for this whiteboad
+     * @type {string}
+     */
+    #correspondingReadOnlyWid = "";
+    get correspondingReadOnlyWid() {
+        return this.#correspondingReadOnlyWid;
+    }
+
+    /**
+     * @type {boolean}
+     */
+    #isReadOnly = true;
+    get isReadOnly() {
+        return this.#isReadOnly;
+    }
+
+    /**
+     * @type {{displayInfo: boolean, setReadOnly: boolean}}
+     * @readonly
+     */
+    #onWhiteboardLoad = { setReadOnly: false, displayInfo: false };
+    get readOnlyOnWhiteboardLoad() {
+        return this.#onWhiteboardLoad.setReadOnly;
+    }
+    get displayInfoOnWhiteboardLoad() {
+        return this.#onWhiteboardLoad.displayInfo;
+    }
+
+    /**
+     * @type {boolean}
+     */
+    #showSmallestScreenIndicator = true;
+    get showSmallestScreenIndicator() {
+        return this.#showSmallestScreenIndicator;
+    }
+
+    /**
+     * @type {string}
+     */
+    #imageDownloadFormat = "png";
+    get imageDownloadFormat() {
+        return this.#imageDownloadFormat;
+    }
+
+    /**
+     * @type {boolean}
+     */
+    #drawBackgroundGrid = false;
+    get drawBackgroundGrid() {
+        return this.#drawBackgroundGrid;
+    }
+
+    /**
+     * @type {string}
+     */
+    #backgroundGridImage = "bg_grid.png";
+    get backgroundGridImage() {
+        return this.#backgroundGridImage;
+    }
+
+    /**
+     * @type {{minDistDelta: number, minTimeDelta: number}}
+     */
+    #pointerEventsThrottling = { minDistDelta: 0, minTimeDelta: 0 };
+    get pointerEventsThrottling() {
+        return this.#pointerEventsThrottling;
+    }
+
+    /**
+     * @type {number}
+     */
+    #refreshInfoInterval = 1000;
+    get refreshInfoInterval() {
+        return this.#refreshInfoInterval;
+    }
+
+    /**
+     * Init the service from the config sent by the server
+     *
+     * @param {object} configFromServer
+     */
+    initFromServer(configFromServer) {
+        this.#configFromServer = configFromServer;
+
+        const { common } = configFromServer;
+        const {
+            onWhiteboardLoad,
+            showSmallestScreenIndicator,
+            imageDownloadFormat,
+            drawBackgroundGrid,
+            backgroundGridImage,
+            performance,
+        } = common;
+
+        this.#onWhiteboardLoad = onWhiteboardLoad;
+        this.#showSmallestScreenIndicator = showSmallestScreenIndicator;
+        this.#imageDownloadFormat = imageDownloadFormat;
+        this.#drawBackgroundGrid = drawBackgroundGrid;
+        this.#backgroundGridImage = backgroundGridImage;
+        this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
+
+        const { whiteboardSpecific } = configFromServer;
+        const { correspondingReadOnlyWid, isReadOnly } = whiteboardSpecific;
+
+        this.#correspondingReadOnlyWid = correspondingReadOnlyWid;
+        this.#isReadOnly = isReadOnly;
+
+        console.log("Whiteboard config from server:", configFromServer, "parsed:", this);
+    }
+
+    /**
+     * Refresh config that depends on the number of user connected to whiteboard
+     *
+     * @param {number} userCount
+     */
+    refreshUserCountDependant(userCount) {
+        const { configFromServer } = this;
+        const { common } = configFromServer;
+        const { performance } = common;
+        const { pointerEventsThrottling } = performance;
+
+        this.#pointerEventsThrottling = getThrottling(pointerEventsThrottling, userCount);
+    }
+}
+
+export default new ConfigService();

src/js/services/ConfigService.utils.js

@@ -0,0 +1,21 @@
+/**
+ * Helper to extract the correct throttling values based on the config and the number of user
+ *
+ * @param {Array.<{fromUserCount: number, minDistDelta: number, maxFreq: number}>} pointerEventsThrottling
+ * @param {number} userCount
+ * @return {{minDistDelta: number, minTimeDelta: number}}
+ */
+export function getThrottling(pointerEventsThrottling, userCount) {
+    let tmpOut = pointerEventsThrottling[0];
+    let lastDistToUserCount = userCount - tmpOut.fromUserCount;
+    if (lastDistToUserCount < 0) lastDistToUserCount = Number.MAX_VALUE;
+    for (const el of pointerEventsThrottling) {
+        const distToUserCount = userCount - el.fromUserCount;
+        if (el.fromUserCount <= userCount && distToUserCount <= lastDistToUserCount) {
+            tmpOut = el;
+            lastDistToUserCount = distToUserCount;
+        }
+    }
+
+    return { minDistDelta: tmpOut.minDistDelta, minTimeDelta: 1000 * (1 / tmpOut.maxFreq) };
+}

src/js/services/ConfigService.utils.test.js

@@ -0,0 +1,29 @@
+import { getThrottling } from "./ConfigService.utils";
+
+test("Simple throttling config", () => {
+    const throttling = [{ fromUserCount: 0, minDistDelta: 1, maxFreq: 1 }];
+
+    const target0 = { minDistDelta: 1, minTimeDelta: 1000 };
+    expect(getThrottling(throttling, 0)).toEqual(target0);
+
+    const target100 = { minDistDelta: 1, minTimeDelta: 1000 };
+    expect(getThrottling(throttling, 100)).toEqual(target100);
+});
+
+test("Complex throttling config", () => {
+    // mix ordering
+    const throttling = [
+        { fromUserCount: 100, minDistDelta: 100, maxFreq: 1 },
+        { fromUserCount: 0, minDistDelta: 1, maxFreq: 1 },
+        { fromUserCount: 50, minDistDelta: 50, maxFreq: 1 },
+    ];
+
+    const target0 = { minDistDelta: 1, minTimeDelta: 1000 };
+    expect(getThrottling(throttling, 0)).toEqual(target0);
+
+    const target50 = { minDistDelta: 50, minTimeDelta: 1000 };
+    expect(getThrottling(throttling, 50)).toEqual(target50);
+
+    const target100 = { minDistDelta: 100, minTimeDelta: 1000 };
+    expect(getThrottling(throttling, 100)).toEqual(target100);
+});

src/js/services/InfoService.js

@@ -0,0 +1,137 @@
+import ConfigService from "./ConfigService";
+
+/**
+ * Class the handle the information about the whiteboard
+ */
+class InfoService {
+    /**
+     * @type {boolean}
+     */
+    #infoAreDisplayed = false;
+    get infoAreDisplayed() {
+        return this.#infoAreDisplayed;
+    }
+
+    /**
+     * Holds the number of user connected to the server
+     *
+     * @type {number}
+     */
+    #nbConnectedUsers = -1;
+    get nbConnectedUsers() {
+        return this.#nbConnectedUsers;
+    }
+
+    /**
+     * @type {{w: number, h: number}}
+     */
+    #smallestScreenResolution = undefined;
+    get smallestScreenResolution() {
+        return this.#smallestScreenResolution;
+    }
+
+    /**
+     * @type {number}
+     */
+    #nbMessagesSent = 0;
+    get nbMessagesSent() {
+        return this.#nbMessagesSent;
+    }
+
+    /**
+     * @type {number}
+     */
+    #nbMessagesReceived = 0;
+    get nbMessagesReceived() {
+        return this.#nbMessagesReceived;
+    }
+
+    /**
+     * Holds the interval Id
+     * @type {number}
+     */
+    #refreshInfoIntervalId = undefined;
+    get refreshInfoIntervalId() {
+        return this.#refreshInfoIntervalId;
+    }
+
+    /**
+     * @param {number} nbConnectedUsers
+     * @param {{w: number, h: number}} smallestScreenResolution
+     */
+    updateInfoFromServer({ nbConnectedUsers, smallestScreenResolution = undefined }) {
+        if (this.#nbConnectedUsers !== nbConnectedUsers) {
+            // Refresh config service parameters on nb connected user change
+            ConfigService.refreshUserCountDependant(nbConnectedUsers);
+        }
+        this.#nbConnectedUsers = nbConnectedUsers;
+        if (smallestScreenResolution) {
+            this.#smallestScreenResolution = smallestScreenResolution;
+        }
+    }
+
+    incrementNbMessagesReceived() {
+        this.#nbMessagesReceived++;
+    }
+
+    incrementNbMessagesSent() {
+        this.#nbMessagesSent++;
+    }
+
+    refreshDisplayedInfo() {
+        const {
+            nbMessagesReceived,
+            nbMessagesSent,
+            nbConnectedUsers,
+            smallestScreenResolution: ssr,
+        } = this;
+        $("#messageReceivedCount")[0].innerText = String(nbMessagesReceived);
+        $("#messageSentCount")[0].innerText = String(nbMessagesSent);
+        $("#connectedUsersCount")[0].innerText = String(nbConnectedUsers);
+        $("#smallestScreenResolution")[0].innerText = ssr ? `(${ssr.w}, ${ssr.h})` : "Unknown";
+    }
+
+    /**
+     * Show the info div
+     */
+    displayInfo() {
+        $("#whiteboardInfoContainer").toggleClass("displayNone", false);
+        $("#displayWhiteboardInfoBtn").toggleClass("active", true);
+        this.#infoAreDisplayed = true;
+
+        this.refreshDisplayedInfo();
+        this.#refreshInfoIntervalId = setInterval(() => {
+            // refresh only on a specific interval to reduce
+            // refreshing cost
+            this.refreshDisplayedInfo();
+        }, ConfigService.refreshInfoInterval);
+    }
+
+    /**
+     * Hide the info div
+     */
+    hideInfo() {
+        $("#whiteboardInfoContainer").toggleClass("displayNone", true);
+        $("#displayWhiteboardInfoBtn").toggleClass("active", false);
+        this.#infoAreDisplayed = false;
+        const { refreshInfoIntervalId } = this;
+        if (refreshInfoIntervalId) {
+            clearInterval(refreshInfoIntervalId);
+            this.#refreshInfoIntervalId = undefined;
+        }
+    }
+
+    /**
+     * Switch between hiding and showing the info div
+     */
+    toggleDisplayInfo() {
+        const { infoAreDisplayed } = this;
+        if (infoAreDisplayed) {
+            this.hideInfo();
+        } else {
+            this.displayInfo();
+        }
+    }
+}
+
+export default new InfoService();

src/js/services/ReadOnlyService.js

@@ -0,0 +1,61 @@
+import ConfigService from "./ConfigService";
+
+/**
+ * Class the handle the read-only logic
+ */
+class ReadOnlyService {
+    /**
+     * @type {boolean}
+     */
+    #readOnlyActive = true;
+    get readOnlyActive() {
+        return this.#readOnlyActive;
+    }
+
+    /**
+     * @type {object}
+     */
+    #previousToolHtmlElem = null;
+    get previousToolHtmlElem() {
+        return this.#previousToolHtmlElem;
+    }
+
+    /**
+     * Activate read-only mode
+     */
+    activateReadOnlyMode() {
+        this.#readOnlyActive = true;
+
+        this.#previousToolHtmlElem = $(".whiteboard-tool.active");
+
+        // switch to mouse tool to prevent the use of the
+        // other tools
+        $(".whiteboard-tool[tool=mouse]").click();
+        $(".whiteboard-tool").prop("disabled", true);
+        $(".whiteboard-edit-group > button").prop("disabled", true);
+        $(".whiteboard-edit-group").addClass("group-disabled");
+        $("#whiteboardUnlockBtn").hide();
+        $("#whiteboardLockBtn").show();
+    }
+
+    /**
+     * Deactivate read-only mode
+     */
+    deactivateReadOnlyMode() {
+        if (ConfigService.isReadOnly) return;
+
+        this.#readOnlyActive = false;
+
+        $(".whiteboard-tool").prop("disabled", false);
+        $(".whiteboard-edit-group > button").prop("disabled", false);
+        $(".whiteboard-edit-group").removeClass("group-disabled");
+        $("#whiteboardUnlockBtn").show();
+        $("#whiteboardLockBtn").hide();
+
+        // restore previously selected tool
+        const { previousToolHtmlElem } = this;
+        if (previousToolHtmlElem) previousToolHtmlElem.click();
+    }
+}
+
+export default new ReadOnlyService();

src/js/services/ThrottlingService.js

@@ -0,0 +1,48 @@
+import Point from "../classes/Point";
+import { getCurrentTimeMs } from "../utils";
+import ConfigService from "./ConfigService";
+
+/**
+ * Class to handle all the throttling logic
+ */
+class ThrottlingService {
+    /**
+     * @type {number}
+     */
+    #lastSuccessTime = 0;
+    get lastSuccessTime() {
+        return this.#lastSuccessTime;
+    }
+
+    /**
+     * @type {Point}
+     */
+    #lastPointPosition = new Point(0, 0);
+    get lastPointPosition() {
+        return this.#lastPointPosition;
+    }
+
+    /**
+     * Helper to throttle events based on the configuration.
+     * Only if checks are ok, the onSuccess callback will be called.
+     *
+     * @param {Point} newPosition New point position to base the throttling on
+     * @param {function()} onSuccess Callback called when the throttling is successful
+     */
+    throttle(newPosition, onSuccess) {
+        const newTime = getCurrentTimeMs();
+        const { lastPointPosition, lastSuccessTime } = this;
+        if (newTime - lastSuccessTime > ConfigService.pointerEventsThrottling.minTimeDelta) {
+            if (
+                lastPointPosition.distTo(newPosition) >
+                ConfigService.pointerEventsThrottling.minDistDelta
+            ) {
+                onSuccess();
+                this.#lastPointPosition = newPosition;
+                this.#lastSuccessTime = newTime;
+            }
+        }
+    }
+}
+
+export default new ThrottlingService();

src/js/shortcutFunctions.js

@@ -0,0 +1,147 @@
+import whiteboard from "./whiteboard";
+import ReadOnlyService from "./services/ReadOnlyService";
+
+/**
+ * @param {function} callback
+ * @param {boolean} readOnlySensitive should the shortcut function be active event when the whiteboard is in read-only mode
+ */
+function defineShortcut(callback, readOnlySensitive = true) {
+    return () => {
+        if (readOnlySensitive && ReadOnlyService.readOnlyActive) return;
+        callback();
+    };
+}
+
+const shortcutFunctions = {
+    clearWhiteboard: defineShortcut(() => whiteboard.clearWhiteboard()),
+    undoStep: defineShortcut(() => whiteboard.undoWhiteboardClick()),
+    redoStep: defineShortcut(() => whiteboard.redoWhiteboardClick()),
+    setTool_mouse: defineShortcut(() => $(".whiteboard-tool[tool=mouse]").click()),
+    setTool_recSelect: defineShortcut(() => $(".whiteboard-tool[tool=recSelect]").click()),
+    setTool_pen: defineShortcut(() => {
+        $(".whiteboard-tool[tool=pen]").click();
+        whiteboard.redrawMouseCursor();
+    }),
+    setTool_line: defineShortcut(() => $(".whiteboard-tool[tool=line]").click()),
+    setTool_rect: defineShortcut(() => $(".whiteboard-tool[tool=rect]").click()),
+    setTool_circle: defineShortcut(() => $(".whiteboard-tool[tool=circle]").click()),
+    setTool_text: defineShortcut(() => $(".whiteboard-tool[tool=text]").click()),
+    setTool_eraser: defineShortcut(() => {
+        $(".whiteboard-tool[tool=eraser]").click();
+        whiteboard.redrawMouseCursor();
+    }),
+    thickness_bigger: defineShortcut(() => {
+        const thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
+        $("#whiteboardThicknessSlider").val(thickness);
+        whiteboard.setStrokeThickness(thickness);
+        whiteboard.redrawMouseCursor();
+    }),
+    thickness_smaller: defineShortcut(() => {
+        const thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
+        $("#whiteboardThicknessSlider").val(thickness);
+        whiteboard.setStrokeThickness(thickness);
+        whiteboard.redrawMouseCursor();
+    }),
+    openColorPicker: defineShortcut(() => $("#whiteboardColorpicker").click()),
+    saveWhiteboardAsImage: defineShortcut(() => $("#saveAsImageBtn").click(), false),
+    saveWhiteboardAsJson: defineShortcut(() => $("#saveAsJSONBtn").click(), false),
+    uploadWhiteboardToWebDav: defineShortcut(() => $("#uploadWebDavBtn").click()),
+    uploadJsonToWhiteboard: defineShortcut(() => $("#uploadJsonBtn").click()),
+    shareWhiteboard: defineShortcut(() => $("#shareWhiteboardBtn").click(), false),
+    hideShowControls: defineShortcut(() => $("#minMaxBtn").click(), false),
+
+    setDrawColorBlack: defineShortcut(() => {
+        whiteboard.setDrawColor("black");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorRed: defineShortcut(() => {
+        whiteboard.setDrawColor("red");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorGreen: defineShortcut(() => {
+        whiteboard.setDrawColor("green");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorBlue: defineShortcut(() => {
+        whiteboard.setDrawColor("blue");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorYellow: defineShortcut(() => {
+        whiteboard.setDrawColor("yellow");
+        whiteboard.redrawMouseCursor();
+    }),
+    toggleLineRecCircle: defineShortcut(() => {
+        const activeTool = $(".whiteboard-tool.active").attr("tool");
+        if (activeTool === "line") {
+            $(".whiteboard-tool[tool=rect]").click();
+        } else if (activeTool === "rect") {
+            $(".whiteboard-tool[tool=circle]").click();
+        } else {
+            $(".whiteboard-tool[tool=line]").click();
+        }
+    }),
+    togglePenEraser: defineShortcut(() => {
+        const activeTool = $(".whiteboard-tool.active").attr("tool");
+        if (activeTool === "pen") {
+            $(".whiteboard-tool[tool=eraser]").click();
+        } else {
+            $(".whiteboard-tool[tool=pen]").click();
+        }
+    }),
+    toggleMainColors: defineShortcut(() => {
+        const bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
+        if (bgColor === "blue") {
+            shortcutFunctions.setDrawColorGreen();
+        } else if (bgColor === "green") {
+            shortcutFunctions.setDrawColorYellow();
+        } else if (bgColor === "yellow") {
+            shortcutFunctions.setDrawColorRed();
+        } else if (bgColor === "red") {
+            shortcutFunctions.setDrawColorBlack();
+        } else {
+            shortcutFunctions.setDrawColorBlue();
+        }
+    }),
+    moveDraggableUp: defineShortcut(() => {
+        const elm =
+            whiteboard.tool === "text"
+                ? $("#" + whiteboard.latestActiveTextBoxId)
+                : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({ top: p.top - 5, left: p.left });
+    }),
+    moveDraggableDown: defineShortcut(() => {
+        const elm =
+            whiteboard.tool === "text"
+                ? $("#" + whiteboard.latestActiveTextBoxId)
+                : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({ top: p.top + 5, left: p.left });
+    }),
+    moveDraggableLeft: defineShortcut(() => {
+        const elm =
+            whiteboard.tool === "text"
+                ? $("#" + whiteboard.latestActiveTextBoxId)
+                : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({ top: p.top, left: p.left - 5 });
+    }),
+    moveDraggableRight: defineShortcut(() => {
+        const elm =
+            whiteboard.tool === "text"
+                ? $("#" + whiteboard.latestActiveTextBoxId)
+                : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({ top: p.top, left: p.left + 5 });
+    }),
+    dropDraggable: defineShortcut(() => {
+        $($(".dragMe")[0]).find(".addToCanvasBtn").click();
+    }),
+    addToBackground: defineShortcut(() => {
+        $($(".dragMe")[0]).find(".addToBackgroundBtn").click();
+    }),
+    cancelAllActions: defineShortcut(() => whiteboard.escKeyAction()),
+    deleteSelection: defineShortcut(() => whiteboard.delKeyAction()),
+};
+
+export default shortcutFunctions;

src/js/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Compute the euclidean distance between two points
+ * @param {Point} p1
+ * @param {Point} p2
+ */
+export function computeDist(p1, p2) {
+    return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+}
+
+/**
+ * Return the current time in ms since 1970
+ * @returns {number}
+ */
+export function getCurrentTimeMs() {
+    return new Date().getTime();
+}
+
+export function getSubDir() {
+    const url = document.URL.substr(0, document.URL.lastIndexOf("/"));
+    const urlSplit = url.split("/");
+    let subdir = "";
+    for (let i = 3; i < urlSplit.length; i++) {
+        subdir = subdir + "/" + urlSplit[i];
+    }
+
+    return subdir;
+}