Merge branch 'master' into rotation

# Conflicts:
#	package.json

.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

.prettierrc.json

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

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:11 as base
+FROM node:12 as base
 
 # Create app directory
 RUN mkdir -p /opt/app
@@ -19,7 +19,7 @@ RUN npm run build
 # Final image
 #####################
 
-FROM node:11-alpine
+FROM node:12-alpine
 ENV NODE_ENV=prod
 
 MAINTAINER cracker0dks
@@ -28,7 +28,7 @@ MAINTAINER cracker0dks
 RUN mkdir -p /opt/app
 WORKDIR /opt/app
 
-COPY ./package.json ./package-lock.json ./
+COPY ./package.json ./package-lock.json config.default.yml ./
 RUN npm ci --only=prod
 
 COPY scripts ./scripts

README.md

@@ -1,34 +1,51 @@
 # whiteboard
+
 This is a lightweight NodeJS collaborative Whiteboard/Sketchboard witch can easily be customized...
 
 ![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 / Redo function for each user
+- Shows remote user cursors while drawing
-* Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
+- Undo / Redo function for each user
-* Resize, Move & Draw Images to Canvas or Background
+- Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
-* Write text
+- Resize, Move & Draw Images to Canvas or Background
-* Save Whiteboard to Image and JSON
+- Write text
-* Draw angle lines by pressing "shift" while drawing (with line tool)
+- Save Whiteboard to Image and JSON
-* Draw square by pressing "shift" while drawing (with rectangle tool)
+- Draw angle lines by pressing "shift" while drawing (with line tool)
-* Indicator that shows the smallest screen participating
+- Draw square by pressing "shift" while drawing (with rectangle tool)
-* Keybindings for ALL the functions
+- Indicator that shows the smallest screen participating
-* Working on PC, Tablet & Mobile
+- 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 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
 
@@ -37,67 +54,84 @@ You can run this app with and without docker
 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 [./src/js/keybinds.js](./src/js/keybinds.js)
 
-Result | Windows and Linux | macOS
+| Result                                                           | Windows and Linux    | macOS                   |
------- | -------------------- | -------
+| ---------------------------------------------------------------- | -------------------- | ----------------------- |
-Clear the whiteboard | Ctrl + Shift + Z | Command + Shift + Z
+| Clear the whiteboard                                             | Ctrl + Shift + Z     | Command + Shift + Z     |
-Undo your last step | Ctrl + Z | Command + Z
+| Undo your last step                                              | Ctrl + Z             | Command + Z             |
-Redo your last undo | Ctrl + Y | Command + Y
+| Redo your last undo                                              | Ctrl + Y             | Command + Y             |
-Select an area | Ctrl + X | Command + X
+| Select an area                                                   | Ctrl + X             | Command + X             |
-Take the mouse | Ctrl + M | Command + M
+| Take the mouse                                                   | Ctrl + M             | Command + M             |
-Take the pen | Ctrl + P | Command + P
+| Take the pen                                                     | Ctrl + P             | Command + P             |
-Draw a line | Ctrl + L | Command + L
+| Draw a line                                                      | Ctrl + L             | Command + L             |
-Draw a rectangle | Ctrl + R | Command + R
+| Draw a rectangle                                                 | Ctrl + R             | Command + R             |
-Draw a circle | Ctrl + C | Command + C
+| Draw a circle                                                    | Ctrl + C             | Command + C             |
-Toggle between line, rectangle and circle | Ctrl + Shift + F | Command + Shift + F
+| 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 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
+| Toggle between main clolors (black, blue, green, yellow and red) | Ctrl + Shift + R     | Command + Shift + R     |
-Write text | Ctrl + A | Command + A
+| Write text                                                       | Ctrl + A             | Command + A             |
-Take the eraser | Ctrl + E | Command + E
+| Take the eraser                                                  | Ctrl + E             | Command + E             |
-Increase thickness | Ctrl + Up Arrow | Command + Up Arrow
+| Increase thickness                                               | Ctrl + Up Arrow      | Command + Up Arrow      |
-Decrease thickness | Ctrl + Down Arrow | Command + Down Arrow
+| Decrease thickness                                               | Ctrl + Down Arrow    | Command + Down Arrow    |
-Colorpicker | Ctrl + Shift + C | Command + Shift + C
+| Colorpicker                                                      | Ctrl + Shift + C     | Command + Shift + C     |
-Set black color | Ctrl + Shift + 1 | Command + Shift + 1
+| Set black color                                                  | Ctrl + Shift + 1     | Command + Shift + 1     |
-Set blue color | Ctrl + Shift + 2 | Command + Shift + 2
+| Set blue color                                                   | Ctrl + Shift + 2     | Command + Shift + 2     |
-Set green color | Ctrl + Shift + 3 | Command + Shift + 3
+| Set green color                                                  | Ctrl + Shift + 3     | Command + Shift + 3     |
-Set yellow color | Ctrl + Shift + 4 | Command + Shift + 4
+| Set yellow color                                                 | Ctrl + Shift + 4     | Command + Shift + 4     |
-Set red color | Ctrl + Shift + 5 | Command + Shift + 5
+| Set red color                                                    | Ctrl + Shift + 5     | Command + Shift + 5     |
-Save whiteboard as image | Ctrl + S | Command + S
+| Save whiteboard as image                                         | Ctrl + S             | Command + S             |
-Save whiteboard as JSON | Ctrl + Shift + K | Command + Shift + K
+| Save whiteboard as JSON                                          | Ctrl + Shift + K     | Command + Shift + K     |
-Save whiteboard to WebDav | Ctrl + Shift + I (i) | Command + Shift + I (i)
+| Save whiteboard to WebDav                                        | Ctrl + Shift + I (i) | Command + Shift + I (i) |
-Load saved JSON to whiteboard | Ctrl + Shift + J | Command + Shift + J
+| Load saved JSON to whiteboard                                    | Ctrl + Shift + J     | Command + Shift + J     |
-Share whiteboard | Ctrl + Shift + S | Command + Shift + S
+| Share whiteboard                                                 | Ctrl + Shift + S     | Command + Shift + S     |
-Hide or show toolbar | Tab | Tab
+| Hide or show toolbar                                             | Tab                  | Tab                     |
-Move selected object up | Up Arrow | Up Arrow
+| Move selected object up                                          | Up Arrow             | Up Arrow                |
-Move selected object down | Down Arrow | Down Arrow
+| Move selected object down                                        | Down Arrow           | Down Arrow              |
-Move selected object left | Left Arrow | Left Arrow
+| Move selected object left                                        | Left Arrow           | Left Arrow              |
-Move selected object right | Right Arrow | Right Arrow
+| Move selected object right                                       | Right Arrow          | Right Arrow             |
-Drop object | Ctrl + Enter | Command + Enter
+| Drop object                                                      | Ctrl + Enter         | Command + Enter         |
-Add Image to backgroud | Shift + Enter | Shift + Enter
+| Add Image to backgroud                                           | Shift + Enter        | Shift + Enter           |
-Cancel all actions | Escape | Escape
+| Cancel all actions                                               | Escape               | Escape                  |
-Delete selected object | Delete | Delete
+| 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
+- whiteboardid => All people with the same ID are drawing on the same board
-* username => The name witch is showing to others while drawing
+- username => The name witch is showing to others while drawing
-* title => Change the name of the Browser Tab
+- title => Change the name of the Browser Tab
-* randomid => if set to true, a random whiteboardId will be generated if not given aswell
+- randomid => if set to true, a random whiteboardId will be generated if not given aswell
 
-## Security - AccessToken (Optional)
+## Configuration
-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.
 
-<b>Server (Without docker):</b> `node scripts/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 -p 8080:8080 rofl256/whiteboard --accesstoken="mySecToken"`
+### 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:
 
@@ -105,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:
+To enable set `enableWebdav` to `true` in the [configuration](./config.default.yml).
-
-<b>Server (Without docker):</b> `node scripts/server.js --webdav=true`
-
-<b>Server (With docker):</b> `docker run -d -p 8080:8080 rofl256/whiteboard --webdav=true`
 
 Then set the same parameter on the client side as well:
 
@@ -124,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 should be able to customize the layout without ever touching the whiteboard.js (take a look at index.html & main.js)
 
-## All server start parameters (also docker)
+- Whiteboards are gone if you restart the Server, so keep that in mind (or save your whiteboard)
-* accesstoken => take a look at "Security - AccessToken" for a full explanation
+- You should be able to customize the layout without ever touching the whiteboard.js (take a look at index.html & main.js)
-* 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)
 
 ## 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;
@@ -148,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}`
+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

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

config/webpack.build.js

@@ -7,5 +7,5 @@ module.exports = merge(baseConfig, {
         minimize: true,
         nodeEnv: "production",
     },
-  devtool: false
+    devtool: false,
 });

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

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

package.json

@@ -8,7 +8,10 @@
     "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": "echo \"No tests needed!\" && exit 1"
+    "test": "jest",
+    "pretty-quick": "pretty-quick",
+    "format": "prettier --write .",
+    "style": "prettier --check ."
   },
   "repository": {
     "type": "git",
@@ -19,12 +22,20 @@
     "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.*",
     "jquery-ui-rotatable": "^1.1.0",
+    "html2canvas": "^1.0.0-rc.5",
+    "js-yaml": "3.13.1",
     "jsdom": "^14.0.0",
     "pdfjs-dist": "^2.3.200",
     "socket.io": "2.*",
@@ -46,9 +57,13 @@
     "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",

scripts/WhiteboardServerSideInfo.js

@@ -0,0 +1,99 @@
+const config = require("./config/config");
+
+/**
+ * Class to hold information related to a whiteboard
+ */
+class WhiteboardServerSideInfo {
+    static defaultScreenResolution = { w: 1000, h: 1000 };
+
+    constructor() {
+        /**
+         * @type {number}
+         * @private
+         */
+        this._nbConnectedUsers = 0;
+
+        /**
+         * @type {Map<int, {w: number, h: number}>}
+         * @private
+         */
+        this._screenResolutionByClients = new Map();
+
+        /**
+         * Variable to tell if these info have been sent or not
+         *
+         * @private
+         * @type {boolean}
+         */
+        this._hasNonSentUpdates = false;
+    }
+
+    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 {number} 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;
+    }
+}
+
+module.exports = WhiteboardServerSideInfo;

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,80 @@
+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");
+}
+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

@@ -7,10 +7,12 @@ module.exports = {
         var tool = content["t"]; //Tool witch is used
         var wid = content["wid"]; //whiteboard ID
         var username = content["username"];
-        if (tool === "clear") { //Clear the whiteboard
+        if (tool === "clear") {
+            //Clear the whiteboard
             delete savedBoards[wid];
             delete savedUndos[wid];
-        } else if (tool === "undo") { //Undo an action
+        } else if (tool === "undo") {
+            //Undo an action
             if (!savedUndos[wid]) {
                 savedUndos[wid] = [];
             }
@@ -19,7 +21,10 @@ module.exports = {
                     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) {
+                            if (
+                                savedBoards[wid][i]["drawId"] == drawId &&
+                                savedBoards[wid][i]["username"] == username
+                            ) {
                                 savedUndos[wid].push(savedBoards[wid][i]);
                                 savedBoards[wid].splice(i, 1);
                             }
@@ -42,7 +47,10 @@ module.exports = {
                 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) {
+                        if (
+                            savedUndos[wid][i]["drawId"] == drawId &&
+                            savedUndos[wid][i]["username"] == username
+                        ) {
                             savedBoards[wid].push(savedUndos[wid][i]);
                             savedUndos[wid].splice(i, 1);
                         }
@@ -50,14 +58,36 @@ module.exports = {
                     break;
                 }
             }
-        } else if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { //Save all this actions
+        } 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
+                for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
-                    if (savedBoards[wid][i]["t"] === "setTextboxText" && savedBoards[wid][i]["d"][0] === content["d"][0]) {
+                    //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);
                     }
                 }
@@ -65,7 +95,8 @@ module.exports = {
             savedBoards[wid].push(content);
         }
     },
-    loadStoredData: function (wid) { //Load saved whiteboard
+    loadStoredData: function (wid) {
+        //Load saved whiteboard
         return savedBoards[wid] ? savedBoards[wid] : [];
-    }
+    },
-}
+};

scripts/server-backend.js

@@ -1,18 +1,16 @@
-const { getArgs } = require("./utils");
 const path = require("path");
 
+const config = require("./config/config");
+const WhiteboardServerSideInfo = require("./WhiteboardServerSideInfo");
+
 function startBackendServer(port) {
-    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 express = require("express");
-    var formidable = require('formidable'); //form upload processing
+    var formidable = require("formidable"); //form upload processing
 
-    const createDOMPurify = require('dompurify'); //Prevent xss
+    const createDOMPurify = require("dompurify"); //Prevent xss
-    const { JSDOM } = require('jsdom');
+    const { JSDOM } = require("jsdom");
-    const window = (new JSDOM('')).window;
+    const window = new JSDOM("").window;
     const DOMPurify = createDOMPurify(window);
 
     const { createClient } = require("webdav");
@@ -20,44 +18,16 @@ function startBackendServer(port) {
     var s_whiteboard = require("./s_whiteboard.js");
 
     var app = express();
-    app.use(express.static(path.join(__dirname, '..', 'dist')));
+    app.use(express.static(path.join(__dirname, "..", "dist")));
-    app.use("/uploads", express.static(path.join(__dirname, '..', 'public', 'uploads')));
+    app.use("/uploads", express.static(path.join(__dirname, "..", "public", "uploads")));
-    var server = require('http').Server(app);
+    var server = require("http").Server(app);
     server.listen(port);
-    var io = require('socket.io')(server, {path: "/ws-api", });
+    var io = require("socket.io")(server, { path: "/ws-api" });
     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();
+    const { accessToken, enableWebdav } = config.backend;
-    if (startArgs["accesstoken"]) {
-        accessToken = startArgs["accesstoken"];
-    }
-    if (startArgs["disablesmallestscreen"]) {
-        disableSmallestScreen = true;
-    }
-    if (startArgs["webdav"]) {
-        webdav = true;
-    }
 
-    if (accessToken !== "") {
+    app.get("/api/loadwhiteboard", function (req, res) {
-        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('/api/loadwhiteboard', function (req, res) {
         var wid = req["query"]["wid"];
         var at = req["query"]["at"]; //accesstoken
         if (accessToken === "" || accessToken == at) {
@@ -70,26 +40,27 @@ function startBackendServer(port) {
         }
     });
 
-    app.post('/api/upload', function (req, res) { //File upload
+    app.post("/api/upload", function (req, res) {
+        //File upload
         var form = new formidable.IncomingForm(); //Receive form
         var formData = {
             files: {},
-            fields: {}
+            fields: {},
-        }
+        };
 
-        form.on('file', function (name, file) {
+        form.on("file", function (name, file) {
             formData["files"][file.name] = file;
         });
 
-        form.on('field', function (name, value) {
+        form.on("field", function (name, value) {
             formData["fields"][name] = value;
         });
 
-        form.on('error', function (err) {
+        form.on("error", function (err) {
-            console.log('File uplaod Error!');
+            console.log("File uplaod Error!");
         });
 
-        form.on('end', function () {
+        form.on("end", function () {
             if (accessToken === "" || accessToken == formData["fields"]["at"]) {
                 progressUploadFormData(formData, function (err) {
                     if (err) {
@@ -119,7 +90,7 @@ function startBackendServer(port) {
         var whiteboardId = fields["whiteboardId"];
 
         var name = fields["name"] || "";
-        var date = fields["date"] || (+new Date());
+        var date = fields["date"] || +new Date();
         var filename = whiteboardId + "_" + date + ".png";
         var webdavaccess = fields["webdavaccess"] || false;
         try {
@@ -133,24 +104,33 @@ function startBackendServer(port) {
                 return;
             }
             var imagedata = fields["imagedata"];
-            if (imagedata && imagedata != "") { //Save from base64 data
+            if (imagedata && imagedata != "") {
-                imagedata = imagedata.replace(/^data:image\/png;base64,/, "").replace(/^data:image\/jpeg;base64,/, "");
+                //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) {
+                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 (webdavaccess) {
-                            if (webdav) {
+                            //Save image to webdav
-                                saveImageToWebdav('./public/uploads/' + filename, filename, webdavaccess, function (err) {
+                            if (enableWebdav) {
+                                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!");
                             }
@@ -173,106 +153,130 @@ function startBackendServer(port) {
             var webdavusername = webdavaccess["webdavusername"] || "";
             var webdavpassword = webdavaccess["webdavpassword"] || "";
 
-            const client = createClient(
+            const client = createClient(webdavserver, {
-                webdavserver,
-                {
                 username: webdavusername,
-                    password: webdavpassword
+                password: webdavpassword,
-                }
+            });
-            )
+            client
-            client.getDirectoryContents(webdavpath).then((items) => {
+                .getDirectoryContents(webdavpath)
-                var cloudpath = webdavpath+ '' + filename;
+                .then((items) => {
+                    var cloudpath = webdavpath + "" + filename;
                     console.log("webdav saving to:", cloudpath);
                     fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
                     callback();
-            }).catch((error) => {
+                })
+                .catch((error) => {
                     callback("403");
-                console.log("Could not connect to webdav!")
+                    console.log("Could not connect to webdav!");
                 });
         } else {
-            callback("Error: no access data!")
+            callback("Error: no access data!");
         }
     }
 
-    var smallestScreenResolutions = {};
+    /**
-    io.on('connection', function (socket) {
+     * @type {Map<string, WhiteboardServerSideInfo>}
+     */
+    const infoByWhiteboard = new Map();
+
+    setInterval(() => {
+        infoByWhiteboard.forEach((info, whiteboardId) => {
+            if (info.shouldSendInfo()) {
+                io.sockets
+                    .in(whiteboardId)
+                    .compress(false)
+                    .emit("whiteboardInfoUpdate", info.asObject());
+                info.infoWasSent();
+            }
+        });
+    }, (1 / config.backend.performance.whiteboardInfoBroadcastFreq) * 1000);
+
+    io.on("connection", function (socket) {
         var whiteboardId = null;
+        socket.on("disconnect", function () {
+            if (infoByWhiteboard.has(whiteboardId)) {
+                const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
 
-        socket.on('disconnect', function () {
+                if (socket && socket.id) {
-            if (smallestScreenResolutions && smallestScreenResolutions[whiteboardId] && socket && socket.id) {
+                    whiteboardServerSideInfo.deleteScreenResolutionOfClient(socket.id);
-                delete smallestScreenResolutions[whiteboardId][socket.id];
+                }
+
+                whiteboardServerSideInfo.decrementNbConnectedUsers();
+
+                if (whiteboardServerSideInfo.hasConnectedUser()) {
+                    socket.compress(false).broadcast.emit("refreshUserBadges", null); //Removes old user Badges
+                } else {
+                    infoByWhiteboard.delete(whiteboardId);
+                }
             }
-            socket.broadcast.emit('refreshUserBadges', null); //Removes old user Badges
-            sendSmallestScreenResolution();
         });
 
-        socket.on('drawToWhiteboard', function (content) {
+        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)
+                socket.compress(false).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.emit("wrongAccessToken", true);
             }
         });
 
-        socket.on('joinWhiteboard', function (content) {
+        socket.on("joinWhiteboard", function (content) {
             content = escapeAllContentStrings(content);
             if (accessToken === "" || accessToken == content["at"]) {
+                socket.emit("whiteboardConfig", { common: config.frontend });
+
                 whiteboardId = content["wid"];
                 socket.join(whiteboardId); //Joins room name=wid
-                smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId] ? smallestScreenResolutions[whiteboardId] : {};
+                if (!infoByWhiteboard.has(whiteboardId)) {
-                smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
+                    infoByWhiteboard.set(whiteboardId, new WhiteboardServerSideInfo());
-                sendSmallestScreenResolution();
+                }
+
+                const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
+                whiteboardServerSideInfo.incrementNbConnectedUsers();
+                whiteboardServerSideInfo.setScreenResolutionForClient(
+                    socket.id,
+                    content["windowWidthHeight"] || WhiteboardServerSideInfo.defaultScreenResolution
+                );
             } else {
-                socket.emit('wrongAccessToken', true);
+                socket.emit("wrongAccessToken", true);
             }
         });
 
-        socket.on('updateScreenResolution', function (content) {
+        socket.on("updateScreenResolution", function (content) {
             content = escapeAllContentStrings(content);
-            if (smallestScreenResolutions[whiteboardId] && (accessToken === "" || accessToken == content["at"])) {
+            if (accessToken === "" || accessToken == content["at"]) {
-                smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
+                const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
-                sendSmallestScreenResolution();
+                whiteboardServerSideInfo.setScreenResolutionForClient(
+                    socket.id,
+                    content["windowWidthHeight"] || WhiteboardServerSideInfo.defaultScreenResolution
+                );
             }
         });
-    
-        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)
+        if (!cnt) cnt = 0;
-            cnt = 0;
 
-        if (typeof (content) === "string") {
+        if (typeof content === "string") {
             return DOMPurify.sanitize(content);
         }
         for (var i in content) {
-            if (typeof (content[i]) === "string") {
+            if (typeof content[i] === "string") {
                 content[i] = DOMPurify.sanitize(content[i]);
-            } if (typeof (content[i]) === "object" && cnt < 10) {
+            }
+            if (typeof content[i] === "object" && cnt < 10) {
                 content[i] = escapeAllContentStrings(content[i], ++cnt);
             }
         }
         return content;
     }
 
-    process.on('unhandledRejection', error => {
+    process.on("unhandledRejection", (error) => {
         // Will print "unhandledRejection err is not defined"
-        console.log('unhandledRejection', error.message);
+        console.log("unhandledRejection", error.message);
-    })
+    });
 }
 
 module.exports = startBackendServer;

scripts/server-frontend-dev.js

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

scripts/server.js

@@ -4,8 +4,8 @@ const startBackendServer = require("./server-backend");
 
 const SERVER_MODES = {
     PRODUCTION: 1,
-    DEVELOPMENT: 2
+    DEVELOPMENT: 2,
-}
+};
 
 const args = getArgs();
 
@@ -15,7 +15,7 @@ if ( typeof args.mode === "undefined") {
 }
 
 if (args.mode !== "production" && args.mode !== "development") {
-    throw new Error("--mode can only be 'development' or 'production'")
+    throw new Error("--mode can only be 'development' or 'production'");
 }
 
 const server_mode = args.mode === "production" ? SERVER_MODES.PRODUCTION : SERVER_MODES.DEVELOPMENT;

scripts/utils.js

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

src/css/main.css

@@ -1,3 +1,7 @@
+:root {
+    --selected-icon-bg-color: #dfdfdf;
+}
+
 body {
     position: relative;
     margin: 0px;
@@ -13,7 +17,8 @@ body {
 
 .btn-group button {
     background: transparent;
-    border: 1px solid #636060;
+    border: 2px solid #636060;
+    margin: -1px;
     /* Green border */
     color: black;
     /* White text */
@@ -25,15 +30,29 @@ body {
     /* Float the buttons side by side */
     font-size: 1.2em;
     height: 45px;
+    width: 50px;
 }
 
 button::-moz-focus-inner {
     border: 0;
 }
 
-.btn-group button:not(:last-child) {
+.whiteboard-edit-group.group-disabled {
-    border-right: none;
+    background: repeating-linear-gradient(
-    /* Prevent double borders */
+        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) */
@@ -57,12 +76,13 @@ button {
 .btn-group {
     background-color: #808080ab;
     margin-left: 5px;
+    margin-bottom: 5px;
     float: left;
     position: relative;
 }
 
-.whiteboardTool.active {
+.whiteboard-tool.active:not(:disabled) {
-    background: #bfbfbf;
+    background: var(--selected-icon-bg-color);
 }
 
 #whiteboardThicknessSlider {
@@ -73,19 +93,21 @@ button {
     background: transparent;
     outline: none;
     opacity: 1;
-    -webkit-transition: opacity .15s ease-in-out;
+    -webkit-transition: opacity 0.15s ease-in-out;
-    transition: opacity .15s ease-in-out;
+    transition: opacity 0.15s ease-in-out;
 }
 
 .textBox.active {
     border: 1px dashed gray;
 }
 
-.textBox>.removeIcon, .textBox>.moveIcon {
+.textBox > .removeIcon,
+.textBox > .moveIcon {
     display: none;
 }
 
-.textBox.active>.removeIcon, .textBox.active>.moveIcon {
+.textBox.active > .removeIcon,
+.textBox.active > .moveIcon {
     display: block;
 }
 
@@ -96,3 +118,17 @@ button {
     min-width: 50px;
     cursor: pointer;
 }
+
+#displayWhiteboardInfoBtn.active {
+    background: var(--selected-icon-bg-color);
+}
+
+#whiteboardInfoContainer {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.displayNone {
+    display: none;
+}

src/index.html

@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html>
-
     <head>
         <title>Whiteboard</title>
         <meta charset="utf-8" />
-	<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
+        <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
     </head>
 
     <body>
@@ -14,116 +13,250 @@
         <!---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">
+                <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;"
+                <button
-				id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn">
+                    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" class="whiteboardBtn">
+                <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" class="whiteboardBtn">
+                <button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
                     <i class="fa fa-redo"></i>
                 </button>
             </div>
 
-		<div class="btn-group">
+            <div class="btn-group whiteboard-edit-group">
-			<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
+                <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"
+                <button
-				class="whiteboardTool">
+                    style="padding-bottom: 11px;"
-				<img src="./images/dottedRec.png">
+                    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="whiteboardTool active">
+                <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"
+                <button
-				class="whiteboardTool">
+                    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="whiteboardTool">
+                <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="whiteboardTool">
+                <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="whiteboardTool">
+                <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="whiteboardTool">
+                <button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
                     <i class="fa fa-eraser"></i>
                 </button>
             </div>
 
-		<div class="btn-group">
+            <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
+                    <div
-						class="fa fa-pencil-alt"></i></div>
+                        class="activeToolIcon"
-				<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;"
+                        style="position: absolute; top: 2px; left: 2px; font-size: 0.6em;"
-					src="./images/slider-background.svg">
+                    >
-				<input title="Thickness" id="whiteboardThicknessSlider"
+                        <i class="fa fa-pencil-alt"></i>
-					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>
+                    <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">
+            <div class="btn-group whiteboard-edit-group">
-			<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
+                <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; "
+                    <i
-					class="fas fa-save"></i>
+                        style="
+                            position: absolute;
+                            top: 3px;
+                            left: 2px;
+                            color: #000000;
+                            font-size: 0.5em;
+                        "
+                        class="fas fa-upload"
+                    ></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>
+                <button
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
+                    style="position: relative;"
-					class="fas fa-save"></i>
+                    id="uploadJsonBtn"
-			</button>
+                    title="Load saved JSON to whiteboard"
-			<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button"
+                    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; "
+                    <i
-					class="fas fa-save"></i>
+                        style="
-			</button>
+                            position: absolute;
-		</div>
+                            top: 3px;
-
+                            left: 2px;
-		<div class="btn-group">
+                            color: #000000;
-			<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
+                            font-size: 0.5em;
-				<i class="fas fa-image"></i>
+                        "
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
+                        class="fas fa-upload"
-					class="fas fa-upload"></i>
+                    ></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" />
+            </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">
+                <button
-				<i id="minBtn" style="position:relative; left:-5px;" class="fas fa-angle-left"></i>
+                    style="width: 25px; padding: 11px 11px;"
-				<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
+                    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>
     </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

@@ -16,6 +16,9 @@ import {
     faAngleRight,
     faSortDown,
     faExpandArrowsAlt,
+    faLock,
+    faLockOpen,
+    faInfoCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import {
     faSquare,
@@ -46,7 +49,10 @@ library.add(
     faCircle,
     faFile,
     faFileAlt,
-    faPlusSquare
+    faPlusSquare,
+    faLock,
+    faLockOpen,
+    faInfoCircle
 );
 
-dom.i2svg()
+dom.i2svg();

src/js/index.js

@@ -1,7 +1,7 @@
 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-rotatable/jquery.ui.rotatable";
 import "jquery-ui/themes/base/resizable.css";
 import "../css/main.css";
 
@@ -9,19 +9,19 @@ 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" />');
+        $("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" />');
+        $("head").append('<meta name="viewport" content="width=1400" />');
     }
 
     main();
 });
 
-
 if (module.hot) {
     module.hot.accept();
 }

src/js/keybinds.js

@@ -7,42 +7,42 @@
 
 const keybinds = {
     // 'key(s)' : 'function',
-    'defmod-shift-z' : 'clearWhiteboard',
+    "defmod-shift-z": "clearWhiteboard",
-    'defmod-z' : 'undoStep', 
+    "defmod-z": "undoStep",
-    'defmod-y' : 'redoStep',
+    "defmod-y": "redoStep",
-    'defmod-x' : 'setTool_recSelect',
+    "defmod-x": "setTool_recSelect",
-    'defmod-m' : 'setTool_mouse',
+    "defmod-m": "setTool_mouse",
-    'defmod-p' : 'setTool_pen',
+    "defmod-p": "setTool_pen",
-    'defmod-l' : 'setTool_line',
+    "defmod-l": "setTool_line",
-    'defmod-r' : 'setTool_rect',
+    "defmod-r": "setTool_rect",
-    'defmod-c' : 'setTool_circle',
+    "defmod-c": "setTool_circle",
-    'defmod-shift-f' : 'toggleLineRecCircle',
+    "defmod-shift-f": "toggleLineRecCircle",
-    'defmod-shift-x' : 'togglePenEraser',
+    "defmod-shift-x": "togglePenEraser",
-    'defmod-shift-r' : 'toggleMainColors',
+    "defmod-shift-r": "toggleMainColors",
-    'defmod-a' : 'setTool_text',
+    "defmod-a": "setTool_text",
-    'defmod-e' : 'setTool_eraser',
+    "defmod-e": "setTool_eraser",
-    'defmod-up' : 'thickness_bigger',
+    "defmod-up": "thickness_bigger",
-    'defmod-down' : 'thickness_smaller',
+    "defmod-down": "thickness_smaller",
-    'defmod-shift-c' : 'openColorPicker',
+    "defmod-shift-c": "openColorPicker",
-    'defmod-shift-1' : 'setDrawColorBlack',
+    "defmod-shift-1": "setDrawColorBlack",
-    'defmod-shift-2' : 'setDrawColorBlue',
+    "defmod-shift-2": "setDrawColorBlue",
-    'defmod-shift-3' : 'setDrawColorGreen',
+    "defmod-shift-3": "setDrawColorGreen",
-    'defmod-shift-4' : 'setDrawColorYellow',
+    "defmod-shift-4": "setDrawColorYellow",
-    'defmod-shift-5' : 'setDrawColorRed',
+    "defmod-shift-5": "setDrawColorRed",
-    'defmod-s' : 'saveWhiteboardAsImage',
+    "defmod-s": "saveWhiteboardAsImage",
-    'defmod-shift-k' : 'saveWhiteboardAsJson',
+    "defmod-shift-k": "saveWhiteboardAsJson",
-    'defmod-shift-i' : 'uploadWhiteboardToWebDav',
+    "defmod-shift-i": "uploadWhiteboardToWebDav",
-    'defmod-shift-j' : 'uploadJsonToWhiteboard',
+    "defmod-shift-j": "uploadJsonToWhiteboard",
-    'defmod-shift-s' : 'shareWhiteboard',
+    "defmod-shift-s": "shareWhiteboard",
-    'tab' : 'hideShowControls',
+    tab: "hideShowControls",
-    'up' : 'moveDraggableUp',
+    up: "moveDraggableUp",
-    'down' : 'moveDraggableDown',
+    down: "moveDraggableDown",
-    'left' : 'moveDraggableLeft',
+    left: "moveDraggableLeft",
-    'right' : 'moveDraggableRight',
+    right: "moveDraggableRight",
-    'defmod-enter' : 'dropDraggable',
+    "defmod-enter": "dropDraggable",
-    'shift-enter' : 'addToBackground',
+    "shift-enter": "addToBackground",
-    'escape' : 'cancelAllActions',
+    escape: "cancelAllActions",
-    'del' : 'deleteSelection'
+    del: "deleteSelection",
-}
+};
 
 export default keybinds;

src/js/main.js

@@ -1,91 +1,171 @@
 import keymage from "keymage";
-import io from 'socket.io-client';
+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 { getQueryVariable, getSubDir } from "./utils";
+import ConfigService from "./services/ConfigService";
 
-function main() {
+let whiteboardId = getQueryVariable("whiteboardid");
-
+const randomid = getQueryVariable("randomid");
-    var whiteboardId = getQueryVariable("whiteboardid");
+if (randomid && !whiteboardId) {
-    var randomid = getQueryVariable("randomid");
+    //set random whiteboard on empty whiteboardid
-    if (randomid && !whiteboardId) { //set random whiteboard on empty whiteboardid
+    whiteboardId = Array(2)
-        whiteboardId = Array(2).fill(null).map(() => Math.random().toString(36).substr(2)).join('');
+        .fill(null)
+        .map(() => Math.random().toString(36).substr(2))
+        .join("");
     const urlParams = new URLSearchParams(window.location.search);
-        urlParams.set('whiteboardid', whiteboardId);
+    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");
+const myUsername = getQueryVariable("username") || "unknown" + (Math.random() + "").substring(2, 6);
-    var accessToken = getQueryVariable("accesstoken");
+const accessToken = getQueryVariable("accesstoken") || "";
-    myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6);
-    accessToken = accessToken || "";
-    var accessDenied = false;
 
 // Custom Html Title
-    var title = getQueryVariable("title");
+const title = getQueryVariable("title");
 if (!title === false) {
     document.title = decodeURIComponent(title);
 }
 
-    var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
+const subdir = getSubDir();
-    var signaling_socket = null;
+let signaling_socket;
-    var urlSplit = url.split("/");
-    var subdir = "";
-    for (var i = 3; i < urlSplit.length; i++) {
-        subdir = subdir + '/' + urlSplit[i];
-    }
-    signaling_socket = io("", { "path": subdir + "/ws-api" }); // Connect even if we are in a subdir behind a reverse proxy
 
-    signaling_socket.on('connect', function () {
+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('drawToWhiteboard', function (content) {
+        signaling_socket.on("whiteboardConfig", (serverResponse) => {
-            whiteboard.handleEventsAndData(content, true);
+            ConfigService.initFromServer(serverResponse);
+            // Inti whiteboard only when we have the config from the server
+            initWhiteboard();
         });
 
-        signaling_socket.on('refreshUserBadges', function () {
+        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();
         });
 
-        signaling_socket.on('wrongAccessToken', function () {
+        let accessDenied = false;
+        signaling_socket.on("wrongAccessToken", function () {
             if (!accessDenied) {
                 accessDenied = true;
-                showBasicAlert("Access denied! Wrong accessToken!")
+                showBasicAlert("Access denied! Wrong accessToken!");
             }
         });
 
-        signaling_socket.on('updateSmallestScreenResolution', function (widthHeight) {
+        signaling_socket.emit("joinWhiteboard", {
-            whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]);
+            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").click(function () {
+        if (options.onOkClick) {
+            options.onOkClick();
+        }
+        alertHtml.remove();
+    });
+    alertHtml.find(".closeAlert").click(function () {
+        alertHtml.remove();
     });
 
-        signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
+    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 (getQueryVariable("webdav") == "true") {
             $("#uploadWebDavBtn").show();
         }
-        whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
+
+        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);
+                signaling_socket.emit("drawToWhiteboard", content);
-            }
+                InfoService.incrementNbMessagesSent();
+            },
         });
 
         // request whiteboard from server
-        $.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(function (data) {
+        $.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(
-            whiteboard.loadData(data)
+            function (data) {
-        });
+                whiteboard.loadData(data);
+            }
+        );
 
         $(window).resize(function () {
-            signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
+            signaling_socket.emit("updateScreenResolution", {
-        })
+                at: accessToken,
+                windowWidthHeight: { w: $(window).width(), h: $(window).height() },
+            });
+        });
 
         /*----------------/
         Whiteboard actions
@@ -100,11 +180,15 @@ function main() {
                     tempLineTool = true;
                     whiteboard.ownCursor.hide();
                     if (whiteboard.drawFlag) {
-                        whiteboard.mouseup({ offsetX: whiteboard.currX, offsetY: whiteboard.currY })
+                        whiteboard.mouseup({
+                            offsetX: whiteboard.prevPos.x,
+                            offsetY: whiteboard.prevPos.y,
+                        });
                         shortcutFunctions.setTool_line();
-                        whiteboard.prevX = whiteboard.currX;
+                        whiteboard.mousedown({
-                        whiteboard.prevY = whiteboard.currY;
+                            offsetX: whiteboard.prevPos.x,
-                        whiteboard.mousedown({ offsetX: whiteboard.currX, offsetY: whiteboard.currY })
+                            offsetY: whiteboard.prevPos.y,
+                        });
                     } else {
                         shortcutFunctions.setTool_line();
                     }
@@ -128,136 +212,21 @@ function main() {
             }
         });
 
-        var shortcutFunctions = {
-            clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
-            undoStep: function () { whiteboard.undoWhiteboardClick(); },
-            redoStep: function () { whiteboard.redoWhiteboardClick(); },
-            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();
-            },
-            setDrawColorRed: function () {
-                whiteboard.setDrawColor("red");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorGreen: function () {
-                whiteboard.setDrawColor("green");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorBlue: function () {
-                whiteboard.setDrawColor("blue");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorYellow: function () {
-                whiteboard.setDrawColor("yellow");
-                whiteboard.redrawMouseCursor();
-            },
-
-            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) {
+        Object.entries(keybinds).forEach(([key, functionName]) => {
-            if (shortcutFunctions[keybinds[i]]) {
+            const associatedShortcutFunction = shortcutFunctions[functionName];
-                keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true });
+            if (associatedShortcutFunction) {
+                keymage(key, associatedShortcutFunction, { preventDefault: true });
             } else {
-                console.error("function you want to keybind on key:", i, "named:", keybinds[i], "is not available!")
+                console.error(
-            }
+                    "Function you want to keybind on key:",
+                    key,
+                    "named:",
+                    functionName,
+                    "is not available!"
+                );
             }
+        });
 
         // whiteboard clear button
         $("#whiteboardTrashBtn").click(function () {
@@ -286,9 +255,19 @@ function main() {
             whiteboard.redoWhiteboardClick();
         });
 
+        // view only
+        $("#whiteboardLockBtn").click(() => {
+            ReadOnlyService.deactivateReadOnlyMode();
+        });
+        $("#whiteboardUnlockBtn").click(() => {
+            ReadOnlyService.activateReadOnlyMode();
+        });
+        $("#whiteboardUnlockBtn").hide();
+        $("#whiteboardLockBtn").show();
+
         // switch tool
-        $(".whiteboardTool").click(function () {
+        $(".whiteboard-tool").click(function () {
-            $(".whiteboardTool").removeClass("active");
+            $(".whiteboard-tool").removeClass("active");
             $(this).addClass("active");
             var activeTool = $(this).attr("tool");
             whiteboard.setTool(activeTool);
@@ -301,38 +280,51 @@ function main() {
 
         // upload image button
         $("#addImgToCanvasBtn").click(function () {
+            if (ReadOnlyService.readOnlyActive) return;
             showBasicAlert("Please drag the image into the browser.");
         });
 
-        // save image as png
+        // save image as imgae
         $("#saveAsImageBtn").click(function () {
-            var imgData = whiteboard.getImageDataBase64();
+            whiteboard.getImageDataBase64(
-
+                {
-            var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
+                    imageFormat: ConfigService.imageDownloadFormat,
-            setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
+                    drawBackgroundGrid: ConfigService.drawBackgroundGrid,
-                var a = document.createElement('a');
+                },
+                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.png';
+                        a.download = "whiteboard." + ConfigService.imageDownloadFormat;
                         w.document.body.appendChild(a);
                         a.click();
                         w.document.body.removeChild(a);
-                setTimeout(function () { w.close(); }, 100);
+                        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
+            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.
+            setTimeout(function () {
-                var a = document.createElement('a');
+                //FireFox seems to require a setTimeout for this to work.
-                a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' }));
+                var a = document.createElement("a");
-                a.download = 'whiteboard.json';
+                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);
+                setTimeout(function () {
+                    w.close();
+                }, 100);
             }, 0);
         });
 
@@ -341,57 +333,72 @@ function main() {
                 return;
             }
 
-            var webdavserver = localStorage.getItem('webdavserver') || ""
+            var webdavserver = localStorage.getItem("webdavserver") || "";
-            var webdavpath = localStorage.getItem('webdavpath') || "/"
+            var webdavpath = localStorage.getItem("webdavpath") || "/";
-            var webdavusername = localStorage.getItem('webdavusername') || ""
+            var webdavusername = localStorage.getItem("webdavusername") || "";
-            var webdavpassword = localStorage.getItem('webdavpassword') || ""
+            var webdavpassword = localStorage.getItem("webdavpassword") || "";
-            var webDavHtml = $('<div>' +
+            var webDavHtml = $(
-                '<table>' +
+                "<div>" +
-                '<tr>' +
+                    "<table>" +
-                '<td>Server URL:</td>' +
+                    "<tr>" +
-                '<td><input class="webdavserver" type="text" value="' + webdavserver + '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
+                    "<td>Server URL:</td>" +
-                '<td></td>' +
+                    '<td><input class="webdavserver" type="text" value="' +
-                '</tr>' +
+                    webdavserver +
-                '<tr>' +
+                    '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
-                '<td>Path:</td>' +
+                    "<td></td>" +
-                '<td><input class="webdavpath" type="text" placeholder="folder" value="' + webdavpath + '"></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>" +
-                '<tr>' +
+                    "<tr>" +
-                '<td>Username:</td>' +
+                    "<td>Username:</td>" +
-                '<td><input class="webdavusername" type="text" value="' + webdavusername + '" placeholder="username"></td>' +
+                    '<td><input class="webdavusername" type="text" value="' +
+                    webdavusername +
+                    '" placeholder="username"></td>' +
                     '<td style="font-size: 0.7em;"></td>' +
-                '</tr>' +
+                    "</tr>" +
-                '<tr>' +
+                    "<tr>" +
-                '<td>Password:</td>' +
+                    "<td>Password:</td>" +
-                '<td><input class="webdavpassword" type="password" value="' + webdavpassword + '" placeholder="password"></td>' +
+                    '<td><input class="webdavpassword" type="password" value="' +
+                    webdavpassword +
+                    '" placeholder="password"></td>' +
                     '<td style="font-size: 0.7em;"></td>' +
-                '</tr>' +
+                    "</tr>" +
-                '<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>" +
-                '<tr>' +
+                    "<tr>" +
-                '<td></td>' +
+                    "<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>' +
+                    "</tr>" +
-                '</table>' +
+                    "</table>" +
-                '</div>');
+                    "</div>"
+            );
             webDavHtml.find(".webdavUploadBtn").click(function () {
                 var webdavserver = webDavHtml.find(".webdavserver").val();
-                localStorage.setItem('webdavserver', webdavserver);
+                localStorage.setItem("webdavserver", webdavserver);
                 var webdavpath = webDavHtml.find(".webdavpath").val();
-                localStorage.setItem('webdavpath', webdavpath);
+                localStorage.setItem("webdavpath", webdavpath);
                 var webdavusername = webDavHtml.find(".webdavusername").val();
-                localStorage.setItem('webdavusername', webdavusername);
+                localStorage.setItem("webdavusername", webdavusername);
                 var webdavpassword = webDavHtml.find(".webdavpassword").val();
-                localStorage.setItem('webdavpassword', webdavpassword);
+                localStorage.setItem("webdavpassword", webdavpassword);
-                var base64data = whiteboard.getImageDataBase64();
+                whiteboard.getImageDataBase64(
+                    {
+                        imageFormat: ConfigService.imageDownloadFormat,
+                        drawBackgroundGrid: ConfigService.drawBackgroundGrid,
+                    },
+                    function (base64data) {
                         var webdavaccess = {
                             webdavserver: webdavserver,
                             webdavpath: webdavpath,
                             webdavusername: webdavusername,
-                    webdavpassword: webdavpassword
+                            webdavpassword: webdavpassword,
-                }
+                        };
                         webDavHtml.find(".loadingWebdavText").show();
                         webDavHtml.find(".webdavUploadBtn").hide();
                         saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
@@ -402,12 +409,14 @@ function main() {
                                 webDavHtml.parents(".basicalert").remove();
                             }
                         });
-            })
+                    }
+                );
+            });
             showBasicAlert(webDavHtml, {
                 header: "Save to Webdav",
                 okBtnText: "cancel",
-                headercolor: "#0082c9"
+                headercolor: "#0082c9",
-            })
+            });
             // render newly added icons
             dom.i2svg();
         });
@@ -427,10 +436,19 @@ function main() {
                 endSplit = endSplit.splice(1, 1);
                 urlStart += "&" + endSplit.join("&");
             }
-            $("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
+            $("<textarea/>")
-                document.execCommand('copy');
+                .appendTo("body")
-            }).remove();
+                .val(urlStart)
-            showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 })
+                .select()
+                .each(function () {
+                    document.execCommand("copy");
+                })
+                .remove();
+            showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 });
+        });
+
+        $("#displayWhiteboardInfoBtn").click(() => {
+            InfoService.toggleDisplayInfo();
         });
 
         var btnsMini = false;
@@ -445,7 +463,7 @@ function main() {
                 $(this).find("#maxBtn").hide();
             }
             btnsMini = !btnsMini;
-        })
+        });
 
         // load json to whiteboard
         $("#myFile").on("change", function () {
@@ -465,19 +483,23 @@ function main() {
 
         // 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) {
+        $("#whiteboardContainer").on("dragenter", function (e) {
+            if (ReadOnlyService.readOnlyActive) return;
             e.preventDefault();
             e.stopPropagation();
             dragCounter++;
             whiteboard.dropIndicator.show();
         });
 
-        $('#whiteboardContainer').on("dragleave", function (e) {
+        $("#whiteboardContainer").on("dragleave", function (e) {
+            if (ReadOnlyService.readOnlyActive) return;
+
             e.preventDefault();
             e.stopPropagation();
             dragCounter--;
@@ -486,9 +508,13 @@ function main() {
             }
         });
 
-        $('#whiteboardContainer').on('drop', function (e) { //Handle drop
+        $("#whiteboardContainer").on("drop", function (e) {
+            //Handle drop
+            if (ReadOnlyService.readOnlyActive) return;
+
             if (e.originalEvent.dataTransfer) {
-                if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
+                if (e.originalEvent.dataTransfer.files.length) {
+                    //File from harddisc
                     e.preventDefault();
                     e.stopPropagation();
                     var filename = e.originalEvent.dataTransfer.files[0]["name"];
@@ -499,8 +525,9 @@ function main() {
                         reader.onloadend = function () {
                             const base64data = reader.result;
                             uploadImgAndAddToWhiteboard(base64data);
-                        }
+                        };
-                    } else if (isPDFFileName(filename)) { //Handle PDF Files
+                    } else if (isPDFFileName(filename)) {
+                        //Handle PDF Files
                         var blob = e.originalEvent.dataTransfer.files[0];
 
                         var reader = new window.FileReader();
@@ -508,86 +535,91 @@ function main() {
                             var pdfData = new Uint8Array(this.result);
 
                             var loadingTask = pdfjsLib.getDocument({ data: pdfData });
-                            loadingTask.promise.then(function (pdf) {
+                            loadingTask.promise.then(
-                                console.log('PDF loaded');
+                                function (pdf) {
+                                    console.log("PDF loaded");
 
                                     var currentDataUrl = null;
-                                var modalDiv = $('<div>' +
+                                    var modalDiv = $(
-                                    'Page: <select></select> ' +
+                                        "<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>')
+                                            "</div>"
+                                    );
 
                                     modalDiv.find("select").change(function () {
                                         showPDFPageAsImage(parseInt($(this).val()));
-                                })
+                                    });
 
                                     modalDiv.find("button").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>')
+                                        modalDiv
+                                            .find("select")
+                                            .append('<option value="' + i + '">' + i + "</option>");
                                     }
 
                                     showBasicAlert(modalDiv, {
                                         header: "Pdf to Image",
                                         okBtnText: "cancel",
-                                    headercolor: "#0082c9"
+                                        headercolor: "#0082c9",
-                                })
+                                    });
 
                                     showPDFPageAsImage(1);
                                     function showPDFPageAsImage(pageNumber) {
-
                                         // Fetch the page
                                         pdf.getPage(pageNumber).then(function (page) {
-                                        console.log('Page loaded');
+                                            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');
+                                            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
+                                                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');
+                                                console.log("Page rendered");
-
                                             });
                                         });
                                     }
-
+                                },
-                            }, function (reason) {
+                                function (reason) {
                                     // PDF loading error
 
-                                showBasicAlert("Error loading pdf as image! Check that this is a vaild pdf file!");
+                                    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
+                } else {
+                    //File from other browser
 
-                    var fileUrl = e.originalEvent.dataTransfer.getData('URL');
+                    var fileUrl = e.originalEvent.dataTransfer.getData("URL");
-                    var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
+                    var imageUrl = e.originalEvent.dataTransfer.getData("text/html");
                     var rex = /src="?([^"\s]+)"?\s*/;
                     var url = rex.exec(imageUrl);
                     if (url && url.length > 1) {
@@ -620,73 +652,102 @@ function main() {
         });
 
         new Picker({
-            parent: $('#whiteboardColorpicker')[0],
+            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();
+        }
     });
 
     //Prevent site from changing tab on drag&drop
-    window.addEventListener("dragover", function (e) {
+    window.addEventListener(
+        "dragover",
+        function (e) {
             e = e || event;
             e.preventDefault();
-    }, false);
+        },
-    window.addEventListener("drop", function (e) {
+        false
+    );
+    window.addEventListener(
+        "drop",
+        function (e) {
             e = e || event;
             e.preventDefault();
-    }, false);
+        },
+        false
+    );
 
     function uploadImgAndAddToWhiteboard(base64data) {
-        var date = (+new Date());
+        var date = +new Date();
         $.ajax({
-            type: 'POST',
+            type: "POST",
-            url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/api/upload',
+            url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
             data: {
-                'imagedata': base64data,
+                imagedata: base64data,
-                'whiteboardId': whiteboardId,
+                whiteboardId: whiteboardId,
-                'date': date,
+                date: date,
-                'at': accessToken
+                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
+                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());
+        var date = +new Date();
         $.ajax({
-            type: 'POST',
+            type: "POST",
-            url: document.URL.substr(0, document.URL.lastIndexOf('/')) + 'api/upload',
+            url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "api/upload",
             data: {
-                'imagedata': base64data,
+                imagedata: base64data,
-                'whiteboardId': whiteboardId,
+                whiteboardId: whiteboardId,
-                'date': date,
+                date: date,
-                'at': accessToken,
+                at: accessToken,
-                'webdavaccess': JSON.stringify(webdavaccess)
+                webdavaccess: JSON.stringify(webdavaccess),
             },
             success: function (msg) {
                 showBasicAlert("Whiteboard was saved to Webdav!", {
-                    headercolor: "#5c9e5c"
+                    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!");
+                    showBasicAlert(
+                        "Could not connect to Webdav folder! Please check the credentials and paths and try again!"
+                    );
                 } else {
                     showBasicAlert("Unknown Webdav error! ", err);
                 }
                 callback(err);
-            }
+            },
         });
     }
 
@@ -744,69 +805,18 @@ function main() {
                             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)");
+                showBasicAlert(
+                    "Please Drag&Drop the image or pdf 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,
-            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").click(function () {
-            if (options.onOkClick) {
-                options.onOkClick();
-            }
-            alertHtml.remove();
-        })
-        alertHtml.find(".closeAlert").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;
-    }
 }
 
 export default main;

src/js/services/ConfigService.js

@@ -0,0 +1,118 @@
+import { getThrottling } from "./ConfigService.utils";
+
+/**
+ * Class to hold the configuration sent by the backend
+ */
+class ConfigService {
+    /**
+     * @type {object}
+     */
+    #configFromServer = {};
+    get configFromServer() {
+        return this.#configFromServer;
+    }
+
+    /**
+     * @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;
+
+        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,57 @@
+/**
+ * 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() {
+        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,44 @@
+/**
+ * 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();
+}
+
+/**
+ * get 'GET' parameter by variable name
+ * @param variable
+ * @return {boolean|*}
+ */
+export function getQueryVariable(variable) {
+    const query = window.location.search.substring(1);
+    const vars = query.split("&");
+    for (let i = 0; i < vars.length; i++) {
+        const pair = vars[i].split("=");
+        if (pair[0] === variable) {
+            return pair[1];
+        }
+    }
+    return false;
+}
+
+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;
+}