style: formatted entire repo
This commit is contained in:
Florent Chehab
parent
dafb9f4646
commit
d4a30ea3ed
151
README.md
151
README.md
|
|
@ -1,27 +1,33 @@
|
|||
# whiteboard
|
||||
|
||||
This is a lightweight NodeJS collaborative Whiteboard/Sketchboard witch can easily be customized...
|
||||
|
||||
|
||||
|
||||
## Demowhiteboard ##
|
||||
## Demowhiteboard
|
||||
|
||||
[HERE](https://cloud13.de/testwhiteboard/) (Reset every night)
|
||||
|
||||
## Some Features
|
||||
* Shows remote user cursors while drawing
|
||||
* Undo / Redo function for each user
|
||||
* Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
|
||||
* Resize, Move & Draw Images to Canvas or Background
|
||||
* Write text
|
||||
* Save Whiteboard to Image and JSON
|
||||
* Draw angle lines by pressing "shift" while drawing (with line tool)
|
||||
* Draw square by pressing "shift" while drawing (with rectangle tool)
|
||||
* Indicator that shows the smallest screen participating
|
||||
* Keybindings for ALL the functions
|
||||
* Working on PC, Tablet & Mobile
|
||||
|
||||
- Shows remote user cursors while drawing
|
||||
- Undo / Redo function for each user
|
||||
- Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
|
||||
- Resize, Move & Draw Images to Canvas or Background
|
||||
- Write text
|
||||
- Save Whiteboard to Image and JSON
|
||||
- Draw angle lines by pressing "shift" while drawing (with line tool)
|
||||
- Draw square by pressing "shift" while drawing (with rectangle tool)
|
||||
- Indicator that shows the smallest screen participating
|
||||
- Keybindings for ALL the functions
|
||||
- Working on PC, Tablet & Mobile
|
||||
|
||||
## Install the App
|
||||
|
||||
You can run this app with and without docker
|
||||
|
||||
### Without Docker
|
||||
|
||||
1. install the latest NodeJs
|
||||
2. Clone the app
|
||||
3. Run `npm ci` inside the folder
|
||||
|
|
@ -29,6 +35,7 @@ You can run this app with and without docker
|
|||
5. Surf to http://YOURIP:8080
|
||||
|
||||
### With Docker
|
||||
|
||||
1. `docker run -d -p 8080:8080 rofl256/whiteboard`
|
||||
2. Surf to http://YOURIP:8080
|
||||
|
||||
|
|
@ -37,63 +44,66 @@ 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
|
||||
------ | -------------------- | -------
|
||||
Clear the whiteboard | Ctrl + Shift + Z | Command + Shift + Z
|
||||
Undo your last step | Ctrl + Z | Command + Z
|
||||
Redo your last undo | Ctrl + Y | Command + Y
|
||||
Select an area | Ctrl + X | Command + X
|
||||
Take the mouse | Ctrl + M | Command + M
|
||||
Take the pen | Ctrl + P | Command + P
|
||||
Draw a line | Ctrl + L | Command + L
|
||||
Draw a rectangle | Ctrl + R | Command + R
|
||||
Draw a circle | Ctrl + C | Command + C
|
||||
Toggle between line, rectangle and circle | Ctrl + Shift + F | Command + Shift + F
|
||||
Toggle between pen and eraser | Ctrl + Shift + X | Command + Shift + X
|
||||
Toggle between main clolors (black, blue, green, yellow and red) | Ctrl + Shift + R | Command + Shift + R
|
||||
Write text | Ctrl + A | Command + A
|
||||
Take the eraser | Ctrl + E | Command + E
|
||||
Increase thickness | Ctrl + Up Arrow | Command + Up Arrow
|
||||
Decrease thickness | Ctrl + Down Arrow | Command + Down Arrow
|
||||
Colorpicker | Ctrl + Shift + C | Command + Shift + C
|
||||
Set black color | Ctrl + Shift + 1 | Command + Shift + 1
|
||||
Set blue color | Ctrl + Shift + 2 | Command + Shift + 2
|
||||
Set green color | Ctrl + Shift + 3 | Command + Shift + 3
|
||||
Set yellow color | Ctrl + Shift + 4 | Command + Shift + 4
|
||||
Set red color | Ctrl + Shift + 5 | Command + Shift + 5
|
||||
Save whiteboard as image | Ctrl + S | Command + S
|
||||
Save whiteboard as JSON | Ctrl + Shift + K | Command + Shift + K
|
||||
Save whiteboard to WebDav | Ctrl + Shift + I (i) | Command + Shift + I (i)
|
||||
Load saved JSON to whiteboard | Ctrl + Shift + J | Command + Shift + J
|
||||
Share whiteboard | Ctrl + Shift + S | Command + Shift + S
|
||||
Hide or show toolbar | Tab | Tab
|
||||
Move selected object up | Up Arrow | Up Arrow
|
||||
Move selected object down | Down Arrow | Down Arrow
|
||||
Move selected object left | Left Arrow | Left Arrow
|
||||
Move selected object right | Right Arrow | Right Arrow
|
||||
Drop object | Ctrl + Enter | Command + Enter
|
||||
Add Image to backgroud | Shift + Enter | Shift + Enter
|
||||
Cancel all actions | Escape | Escape
|
||||
Delete selected object | Delete | Delete
|
||||
Use Line tool when pen is active (Not changeable) | Shift (Hold) | Shift (Hold)
|
||||
| Result | Windows and Linux | macOS |
|
||||
| ---------------------------------------------------------------- | -------------------- | ----------------------- |
|
||||
| Clear the whiteboard | Ctrl + Shift + Z | Command + Shift + Z |
|
||||
| Undo your last step | Ctrl + Z | Command + Z |
|
||||
| Redo your last undo | Ctrl + Y | Command + Y |
|
||||
| Select an area | Ctrl + X | Command + X |
|
||||
| Take the mouse | Ctrl + M | Command + M |
|
||||
| Take the pen | Ctrl + P | Command + P |
|
||||
| Draw a line | Ctrl + L | Command + L |
|
||||
| Draw a rectangle | Ctrl + R | Command + R |
|
||||
| Draw a circle | Ctrl + C | Command + C |
|
||||
| Toggle between line, rectangle and circle | Ctrl + Shift + F | Command + Shift + F |
|
||||
| Toggle between pen and eraser | Ctrl + Shift + X | Command + Shift + X |
|
||||
| Toggle between main clolors (black, blue, green, yellow and red) | Ctrl + Shift + R | Command + Shift + R |
|
||||
| Write text | Ctrl + A | Command + A |
|
||||
| Take the eraser | Ctrl + E | Command + E |
|
||||
| Increase thickness | Ctrl + Up Arrow | Command + Up Arrow |
|
||||
| Decrease thickness | Ctrl + Down Arrow | Command + Down Arrow |
|
||||
| Colorpicker | Ctrl + Shift + C | Command + Shift + C |
|
||||
| Set black color | Ctrl + Shift + 1 | Command + Shift + 1 |
|
||||
| Set blue color | Ctrl + Shift + 2 | Command + Shift + 2 |
|
||||
| Set green color | Ctrl + Shift + 3 | Command + Shift + 3 |
|
||||
| Set yellow color | Ctrl + Shift + 4 | Command + Shift + 4 |
|
||||
| Set red color | Ctrl + Shift + 5 | Command + Shift + 5 |
|
||||
| Save whiteboard as image | Ctrl + S | Command + S |
|
||||
| Save whiteboard as JSON | Ctrl + Shift + K | Command + Shift + K |
|
||||
| Save whiteboard to WebDav | Ctrl + Shift + I (i) | Command + Shift + I (i) |
|
||||
| Load saved JSON to whiteboard | Ctrl + Shift + J | Command + Shift + J |
|
||||
| Share whiteboard | Ctrl + Shift + S | Command + Shift + S |
|
||||
| Hide or show toolbar | Tab | Tab |
|
||||
| Move selected object up | Up Arrow | Up Arrow |
|
||||
| Move selected object down | Down Arrow | Down Arrow |
|
||||
| Move selected object left | Left Arrow | Left Arrow |
|
||||
| Move selected object right | Right Arrow | Right Arrow |
|
||||
| Drop object | Ctrl + Enter | Command + Enter |
|
||||
| Add Image to backgroud | Shift + Enter | Shift + Enter |
|
||||
| Cancel all actions | Escape | Escape |
|
||||
| Delete selected object | Delete | Delete |
|
||||
| Use Line tool when pen is active (Not changeable) | Shift (Hold) | Shift (Hold) |
|
||||
|
||||
## URL Parameters
|
||||
|
||||
Call your site with GET parameters to change the WhiteboardID or the Username
|
||||
|
||||
`http://YOURIP:8080?whiteboardid=MYID&username=MYNAME`
|
||||
|
||||
* whiteboardid => All people with the same ID are drawing on the same board
|
||||
* username => The name witch is showing to others while drawing
|
||||
* title => Change the name of the Browser Tab
|
||||
* randomid => if set to true, a random whiteboardId will be generated if not given aswell
|
||||
- whiteboardid => All people with the same ID are drawing on the same board
|
||||
- username => The name witch is showing to others while drawing
|
||||
- title => Change the name of the Browser Tab
|
||||
- randomid => if set to true, a random whiteboardId will be generated if not given aswell
|
||||
|
||||
## Security - AccessToken (Optional)
|
||||
|
||||
To prevent clients who might know or guess the base URL from abusing the server to upload files and stuff..., you can set an accesstoken at server start.
|
||||
|
||||
<b>Server (Without docker):</b> `node scripts/server.js --accesstoken="mySecToken"`
|
||||
|
|
@ -107,6 +117,7 @@ Then set the same token on the client side as well:
|
|||
Done!
|
||||
|
||||
## 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:
|
||||
|
|
@ -125,21 +136,25 @@ Note: For the most owncloud/nextcloud setups you have to set the WebDav-Server U
|
|||
|
||||
Done!
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
- 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)
|
||||
* accesstoken => take a look at "Security - AccessToken" for a full explanation
|
||||
* disablesmallestscreen => set this to "true" if you don't want show the "smallest screen" indicator (A dotted gray line) to the users
|
||||
* webdav => Enable the function to save to a webdav-server (Must also be enabled on the client; Take a look at the webdav section)
|
||||
|
||||
- accesstoken => take a look at "Security - AccessToken" for a full explanation
|
||||
- disablesmallestscreen => set this to "true" if you don't want show the "smallest screen" indicator (A dotted gray line) to the users
|
||||
- webdav => Enable the function to save to a webdav-server (Must also be enabled on the client; Take a look at the webdav section)
|
||||
|
||||
## 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;
|
||||
|
|
@ -149,22 +164,22 @@ Add this to your server part:
|
|||
proxy_pass http://YOURIP:8080/;
|
||||
}
|
||||
```
|
||||
|
||||
To run it at /whiteboard. Don't forget to change -> YOURIP!
|
||||
|
||||
## Nextcloud integration
|
||||
|
||||
1. Install this app on your server
|
||||
2. Enable and go to "external sites" (app) on your Nextcloud
|
||||
2. Add a link to your server: `https://YOURIP/whiteboard/?whiteboardid=WHITEBOARDNAME&username={uid}`
|
||||
You can give each group its own whiteboard by changeing the WHITEBOARDNAME in the URL if you want.
|
||||
3. Add a link to your server: `https://YOURIP/whiteboard/?whiteboardid=WHITEBOARDNAME&username={uid}`
|
||||
You can give each group its own whiteboard by changeing the WHITEBOARDNAME in the URL if you want.
|
||||
|
||||
Note: You might have to serve the app with https (If your nextcloud server runs https). To do so, its recommend to run this app behind a reverse proxy. (as shown above)
|
||||
|
||||
#### (Optional) Set whiteboard icon in nextcloud
|
||||
|
||||
|
||||
|
||||
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 _**
|
||||
|
|
|
|||
|
|
@ -1,61 +1,59 @@
|
|||
const webpack = require("webpack");
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const path = require("path");
|
||||
|
||||
const config = {
|
||||
entry: {
|
||||
main: ["./src/js/index.js"],
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "..", "dist"),
|
||||
filename: "[name]-[hash].js"
|
||||
},
|
||||
resolve: {
|
||||
extensions: ["*", ".json", ".js"]
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
compact: true
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
},
|
||||
entry: {
|
||||
main: ["./src/js/index.js"],
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "..", "dist"),
|
||||
filename: "[name]-[hash].js",
|
||||
},
|
||||
resolve: {
|
||||
extensions: ["*", ".json", ".js"],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
compact: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: "file-loader",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
"window.jQuery": "jquery",
|
||||
"window.$": "jquery",
|
||||
}),
|
||||
new CopyPlugin([
|
||||
{ from: 'assets', to: '' },
|
||||
]),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html',
|
||||
minify: false,
|
||||
inject: true
|
||||
})
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery",
|
||||
"window.jQuery": "jquery",
|
||||
"window.$": "jquery",
|
||||
}),
|
||||
new CopyPlugin([{ from: "assets", to: "" }]),
|
||||
new HtmlWebpackPlugin({
|
||||
template: "src/index.html",
|
||||
minify: false,
|
||||
inject: true,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ const merge = require("webpack-merge");
|
|||
const baseConfig = require("./webpack.base");
|
||||
|
||||
module.exports = merge(baseConfig, {
|
||||
mode: "production",
|
||||
optimization: {
|
||||
minimize: true,
|
||||
nodeEnv: "production",
|
||||
},
|
||||
devtool: false
|
||||
mode: "production",
|
||||
optimization: {
|
||||
minimize: true,
|
||||
nodeEnv: "production",
|
||||
},
|
||||
devtool: false,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ const baseConfig = require("./webpack.base");
|
|||
const webpack = require("webpack");
|
||||
|
||||
const devConfig = merge(baseConfig, {
|
||||
mode: "development",
|
||||
devtool: "eval-source-map",
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NamedModulesPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
].concat(baseConfig.plugins),
|
||||
mode: "development",
|
||||
devtool: "eval-source-map",
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NamedModulesPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
].concat(baseConfig.plugins),
|
||||
});
|
||||
|
||||
module.exports = devConfig;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
version: '3.1'
|
||||
version: "3.1"
|
||||
services:
|
||||
whiteboard:
|
||||
image: rofl256/whiteboard
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -27,7 +32,7 @@ module.exports = {
|
|||
break;
|
||||
}
|
||||
}
|
||||
if(savedUndos[wid].length > 1000) {
|
||||
if (savedUndos[wid].length > 1000) {
|
||||
savedUndos[wid].splice(0, savedUndos[wid].length - 1000);
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
if (savedBoards[wid][i]["t"] === "setTextboxText" && savedBoards[wid][i]["d"][0] === content["d"][0]) {
|
||||
for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
|
||||
//Remove old textbox tex -> dont store it twice
|
||||
if (
|
||||
savedBoards[wid][i]["t"] === "setTextboxText" &&
|
||||
savedBoards[wid][i]["d"][0] === content["d"][0]
|
||||
) {
|
||||
savedBoards[wid].splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -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] : [];
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,26 +5,26 @@ 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 formidable = require('formidable'); //form upload processing
|
||||
|
||||
const createDOMPurify = require('dompurify'); //Prevent xss
|
||||
const { JSDOM } = require('jsdom');
|
||||
const window = (new JSDOM('')).window;
|
||||
var express = require("express");
|
||||
var formidable = require("formidable"); //form upload processing
|
||||
|
||||
const createDOMPurify = require("dompurify"); //Prevent xss
|
||||
const { JSDOM } = require("jsdom");
|
||||
const window = new JSDOM("").window;
|
||||
const DOMPurify = createDOMPurify(window);
|
||||
|
||||
|
||||
const { createClient } = require("webdav");
|
||||
|
||||
|
||||
var s_whiteboard = require("./s_whiteboard.js");
|
||||
|
||||
|
||||
var app = express();
|
||||
app.use(express.static(path.join(__dirname, '..', 'dist')));
|
||||
app.use("/uploads", express.static(path.join(__dirname, '..', 'public', 'uploads')));
|
||||
var server = require('http').Server(app);
|
||||
app.use(express.static(path.join(__dirname, "..", "dist")));
|
||||
app.use("/uploads", express.static(path.join(__dirname, "..", "public", "uploads")));
|
||||
var server = require("http").Server(app);
|
||||
server.listen(port);
|
||||
var io = require('socket.io')(server, {path: "/ws-api", });
|
||||
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;
|
||||
|
|
@ -35,7 +35,7 @@ function startBackendServer(port) {
|
|||
if (process.env.webdav) {
|
||||
webdav = true;
|
||||
}
|
||||
|
||||
|
||||
var startArgs = getArgs();
|
||||
if (startArgs["accesstoken"]) {
|
||||
accessToken = startArgs["accesstoken"];
|
||||
|
|
@ -46,7 +46,7 @@ function startBackendServer(port) {
|
|||
if (startArgs["webdav"]) {
|
||||
webdav = true;
|
||||
}
|
||||
|
||||
|
||||
if (accessToken !== "") {
|
||||
console.log("AccessToken set to: " + accessToken);
|
||||
}
|
||||
|
|
@ -56,8 +56,8 @@ function startBackendServer(port) {
|
|||
if (webdav) {
|
||||
console.log("Webdav save is enabled!");
|
||||
}
|
||||
|
||||
app.get('/api/loadwhiteboard', function (req, res) {
|
||||
|
||||
app.get("/api/loadwhiteboard", function (req, res) {
|
||||
var wid = req["query"]["wid"];
|
||||
var at = req["query"]["at"]; //accesstoken
|
||||
if (accessToken === "" || accessToken == at) {
|
||||
|
|
@ -65,31 +65,32 @@ function startBackendServer(port) {
|
|||
res.send(ret);
|
||||
res.end();
|
||||
} else {
|
||||
res.status(401); //Unauthorized
|
||||
res.status(401); //Unauthorized
|
||||
res.end();
|
||||
}
|
||||
});
|
||||
|
||||
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: {}
|
||||
}
|
||||
|
||||
form.on('file', function (name, file) {
|
||||
fields: {},
|
||||
};
|
||||
|
||||
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) {
|
||||
console.log('File uplaod Error!');
|
||||
|
||||
form.on("error", function (err) {
|
||||
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) {
|
||||
|
|
@ -104,22 +105,22 @@ function startBackendServer(port) {
|
|||
}
|
||||
});
|
||||
} else {
|
||||
res.status(401); //Unauthorized
|
||||
res.status(401); //Unauthorized
|
||||
res.end();
|
||||
}
|
||||
//End file upload
|
||||
});
|
||||
form.parse(req);
|
||||
});
|
||||
|
||||
|
||||
function progressUploadFormData(formData, callback) {
|
||||
console.log("Progress new Form Data");
|
||||
var fields = escapeAllContentStrings(formData.fields);
|
||||
var files = formData.files;
|
||||
var whiteboardId = fields["whiteboardId"];
|
||||
|
||||
|
||||
var name = fields["name"] || "";
|
||||
var date = fields["date"] || (+new Date());
|
||||
var date = fields["date"] || +new Date();
|
||||
var filename = whiteboardId + "_" + date + ".png";
|
||||
var webdavaccess = fields["webdavaccess"] || false;
|
||||
try {
|
||||
|
|
@ -133,24 +134,33 @@ function startBackendServer(port) {
|
|||
return;
|
||||
}
|
||||
var imagedata = fields["imagedata"];
|
||||
if (imagedata && imagedata != "") { //Save from base64 data
|
||||
imagedata = imagedata.replace(/^data:image\/png;base64,/, "").replace(/^data:image\/jpeg;base64,/, "");
|
||||
if (imagedata && imagedata != "") {
|
||||
//Save from base64 data
|
||||
imagedata = imagedata
|
||||
.replace(/^data:image\/png;base64,/, "")
|
||||
.replace(/^data:image\/jpeg;base64,/, "");
|
||||
console.log(filename, "uploaded");
|
||||
fs.writeFile('./public/uploads/' + filename, imagedata, 'base64', function (err) {
|
||||
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) {
|
||||
//Save image to webdav
|
||||
if (webdav) {
|
||||
saveImageToWebdav('./public/uploads/' + filename, filename, webdavaccess, function (err) {
|
||||
if (err) {
|
||||
console.log("error", err);
|
||||
callback(err);
|
||||
} else {
|
||||
callback();
|
||||
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!");
|
||||
}
|
||||
|
|
@ -165,78 +175,92 @@ function startBackendServer(port) {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
|
||||
if (webdavaccess) {
|
||||
var webdavserver = webdavaccess["webdavserver"] || "";
|
||||
var webdavpath = webdavaccess["webdavpath"] || "/";
|
||||
var webdavusername = webdavaccess["webdavusername"] || "";
|
||||
var webdavpassword = webdavaccess["webdavpassword"] || "";
|
||||
|
||||
const client = createClient(
|
||||
webdavserver,
|
||||
{
|
||||
username: webdavusername,
|
||||
password: webdavpassword
|
||||
}
|
||||
)
|
||||
client.getDirectoryContents(webdavpath).then((items) => {
|
||||
var cloudpath = webdavpath+ '' + filename;
|
||||
console.log("webdav saving to:", cloudpath);
|
||||
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
|
||||
callback();
|
||||
}).catch((error) => {
|
||||
callback("403");
|
||||
console.log("Could not connect to webdav!")
|
||||
|
||||
const client = createClient(webdavserver, {
|
||||
username: webdavusername,
|
||||
password: webdavpassword,
|
||||
});
|
||||
client
|
||||
.getDirectoryContents(webdavpath)
|
||||
.then((items) => {
|
||||
var cloudpath = webdavpath + "" + filename;
|
||||
console.log("webdav saving to:", cloudpath);
|
||||
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
|
||||
callback();
|
||||
})
|
||||
.catch((error) => {
|
||||
callback("403");
|
||||
console.log("Could not connect to webdav!");
|
||||
});
|
||||
} else {
|
||||
callback("Error: no access data!")
|
||||
callback("Error: no access data!");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var smallestScreenResolutions = {};
|
||||
io.on('connection', function (socket) {
|
||||
io.on("connection", function (socket) {
|
||||
var whiteboardId = null;
|
||||
|
||||
socket.on('disconnect', function () {
|
||||
if (smallestScreenResolutions && smallestScreenResolutions[whiteboardId] && socket && socket.id) {
|
||||
|
||||
socket.on("disconnect", function () {
|
||||
if (
|
||||
smallestScreenResolutions &&
|
||||
smallestScreenResolutions[whiteboardId] &&
|
||||
socket &&
|
||||
socket.id
|
||||
) {
|
||||
delete smallestScreenResolutions[whiteboardId][socket.id];
|
||||
}
|
||||
socket.compress(false).broadcast.emit('refreshUserBadges', null); //Removes old user Badges
|
||||
socket.compress(false).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.compress(false).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"]) {
|
||||
whiteboardId = content["wid"];
|
||||
socket.join(whiteboardId); //Joins room name=wid
|
||||
smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId] ? smallestScreenResolutions[whiteboardId] : {};
|
||||
smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
|
||||
smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId]
|
||||
? smallestScreenResolutions[whiteboardId]
|
||||
: {};
|
||||
smallestScreenResolutions[whiteboardId][socket.id] = content[
|
||||
"windowWidthHeight"
|
||||
] || { w: 10000, h: 10000 };
|
||||
sendSmallestScreenResolution();
|
||||
} 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"])) {
|
||||
smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
|
||||
if (
|
||||
smallestScreenResolutions[whiteboardId] &&
|
||||
(accessToken === "" || accessToken == content["at"])
|
||||
) {
|
||||
smallestScreenResolutions[whiteboardId][socket.id] = content[
|
||||
"windowWidthHeight"
|
||||
] || { w: 10000, h: 10000 };
|
||||
sendSmallestScreenResolution();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function sendSmallestScreenResolution() {
|
||||
if (disableSmallestScreen) {
|
||||
return;
|
||||
|
|
@ -244,35 +268,44 @@ function startBackendServer(port) {
|
|||
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;
|
||||
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 });
|
||||
io.to(whiteboardId).emit("updateSmallestScreenResolution", {
|
||||
w: smallestWidth,
|
||||
h: smallestHeight,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Prevent cross site scripting (xss)
|
||||
function escapeAllContentStrings(content, cnt) {
|
||||
if (!cnt)
|
||||
cnt = 0;
|
||||
|
||||
if (typeof (content) === "string") {
|
||||
if (!cnt) cnt = 0;
|
||||
|
||||
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;
|
||||
module.exports = startBackendServer;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,33 @@
|
|||
const devServerConfig = {
|
||||
hot: true,
|
||||
inline: true,
|
||||
stats: {
|
||||
children: false,
|
||||
maxModules: 0
|
||||
},
|
||||
proxy: {
|
||||
// proxies for the backend
|
||||
'/api': 'http://localhost:3000',
|
||||
'/uploads': 'http://localhost:3000',
|
||||
'/ws-api': {
|
||||
target: 'ws://localhost:3000',
|
||||
ws: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
hot: true,
|
||||
inline: true,
|
||||
stats: {
|
||||
children: false,
|
||||
maxModules: 0,
|
||||
},
|
||||
proxy: {
|
||||
// proxies for the backend
|
||||
"/api": "http://localhost:3000",
|
||||
"/uploads": "http://localhost:3000",
|
||||
"/ws-api": {
|
||||
target: "ws://localhost:3000",
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function startFrontendDevServer(port) {
|
||||
// require here to prevent prod dependency to webpack
|
||||
const webpack = require("webpack");
|
||||
const WebpackDevServer = require("webpack-dev-server");
|
||||
const config = require("../config/webpack.dev");
|
||||
// require here to prevent prod dependency to webpack
|
||||
const webpack = require("webpack");
|
||||
const WebpackDevServer = require("webpack-dev-server");
|
||||
const config = require("../config/webpack.dev");
|
||||
|
||||
new WebpackDevServer(webpack(config), devServerConfig)
|
||||
.listen(port, (err) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
}
|
||||
new WebpackDevServer(webpack(config), devServerConfig).listen(port, (err) => {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
console.log("Listening on port " + port);
|
||||
console.log("Listening on port " + port);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@ const startBackendServer = require("./server-backend");
|
|||
|
||||
const SERVER_MODES = {
|
||||
PRODUCTION: 1,
|
||||
DEVELOPMENT: 2
|
||||
}
|
||||
DEVELOPMENT: 2,
|
||||
};
|
||||
|
||||
const args = getArgs();
|
||||
|
||||
if ( typeof args.mode === "undefined") {
|
||||
if (typeof args.mode === "undefined") {
|
||||
// default to production mode
|
||||
args.mode = "production";
|
||||
}
|
||||
|
||||
if (args.mode !== "production" && args.mode !== "development") {
|
||||
throw new Error("--mode can only be 'development' or 'production'")
|
||||
throw new Error("--mode can only be 'development' or 'production'");
|
||||
}
|
||||
|
||||
const server_mode = args.mode === "production" ? SERVER_MODES.PRODUCTION : SERVER_MODES.DEVELOPMENT;
|
||||
|
||||
if (server_mode === SERVER_MODES.DEVELOPMENT){
|
||||
if (server_mode === SERVER_MODES.DEVELOPMENT) {
|
||||
console.info("Starting server in development mode.");
|
||||
startFrontendDevServer(8080);
|
||||
// this time, it's the frontend server that is on port 8080
|
||||
|
|
|
|||
|
|
@ -1,22 +1,20 @@
|
|||
function getArgs() {
|
||||
const args = {}
|
||||
process.argv
|
||||
.slice(2, process.argv.length)
|
||||
.forEach(arg => {
|
||||
// long arg
|
||||
if (arg.slice(0, 2) === '--') {
|
||||
const longArg = arg.split('=')
|
||||
args[longArg[0].slice(2, longArg[0].length)] = longArg[1]
|
||||
}
|
||||
// flags
|
||||
else if (arg[0] === '-') {
|
||||
const flags = arg.slice(1, arg.length).split('')
|
||||
flags.forEach(flag => {
|
||||
args[flag] = true
|
||||
})
|
||||
}
|
||||
})
|
||||
return args
|
||||
const args = {};
|
||||
process.argv.slice(2, process.argv.length).forEach((arg) => {
|
||||
// long arg
|
||||
if (arg.slice(0, 2) === "--") {
|
||||
const longArg = arg.split("=");
|
||||
args[longArg[0].slice(2, longArg[0].length)] = longArg[1];
|
||||
}
|
||||
// flags
|
||||
else if (arg[0] === "-") {
|
||||
const flags = arg.slice(1, arg.length).split("");
|
||||
flags.forEach((flag) => {
|
||||
args[flag] = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
return args;
|
||||
}
|
||||
|
||||
module.exports.getArgs = getArgs;
|
||||
module.exports.getArgs = getArgs;
|
||||
|
|
|
|||
|
|
@ -36,12 +36,11 @@ button::-moz-focus-inner {
|
|||
.whiteboard-edit-group.group-disabled {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 166, 0, 0.366) ,
|
||||
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
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -90,19 +89,21 @@ button {
|
|||
background: transparent;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out;
|
||||
-webkit-transition: opacity 0.15s ease-in-out;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.textBox.active {
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
.textBox>.removeIcon, .textBox>.moveIcon {
|
||||
.textBox > .removeIcon,
|
||||
.textBox > .moveIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.textBox.active>.removeIcon, .textBox.active>.moveIcon {
|
||||
.textBox.active > .removeIcon,
|
||||
.textBox.active > .moveIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
367
src/index.html
367
src/index.html
|
|
@ -1,140 +1,255 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Whiteboard</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<title>Whiteboard</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<!---Whiteboard container -!-->
|
||||
<div id="whiteboardContainer"></div>
|
||||
|
||||
<body>
|
||||
<!---Whiteboard container -!-->
|
||||
<div id="whiteboardContainer"></div>
|
||||
<!---Toolbar -!-->
|
||||
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
|
||||
<div class="btn-group">
|
||||
<button
|
||||
id="whiteboardLockBtn"
|
||||
style="background-color: orange;"
|
||||
title="View and Write"
|
||||
type="button"
|
||||
>
|
||||
<i class="fa fa-lock"></i>
|
||||
</button>
|
||||
<button id="whiteboardUnlockBtn" title="View Only" type="button">
|
||||
<i class="fa fa-lock-open"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!---Toolbar -!-->
|
||||
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
|
||||
<div class="btn-group">
|
||||
<button id="whiteboardLockBtn" style="background-color: orange;" title="View and Write" type="button">
|
||||
<i class="fa fa-lock"></i>
|
||||
</button>
|
||||
<button id="whiteboardUnlockBtn" title="View Only" type="button">
|
||||
<i class="fa fa-lock-open"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
<button
|
||||
style="position: absolute; left: 0px; top: 0px; width: 46px; display: none;"
|
||||
id="whiteboardTrashBtnConfirm"
|
||||
title="Confirm clear..."
|
||||
type="button"
|
||||
>
|
||||
<i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button id="whiteboardUndoBtn" title="Undo your last step" type="button">
|
||||
<i class="fa fa-undo"></i>
|
||||
</button>
|
||||
<button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
|
||||
<i class="fa fa-redo"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
<button style="position:absolute; left:0px; top:0px; width: 46px; display:none;"
|
||||
id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button">
|
||||
<i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button id="whiteboardUndoBtn" title="Undo your last step" type="button">
|
||||
<i class="fa fa-undo"></i>
|
||||
</button>
|
||||
<button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
|
||||
<i class="fa fa-redo"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
|
||||
<i class="fa fa-mouse-pointer"></i>
|
||||
</button>
|
||||
<button
|
||||
style="padding-bottom: 11px;"
|
||||
tool="recSelect"
|
||||
title="Select an area"
|
||||
type="button"
|
||||
class="whiteboard-tool"
|
||||
>
|
||||
<img src="./images/dottedRec.png" />
|
||||
</button>
|
||||
<button
|
||||
tool="pen"
|
||||
title="Take the pen"
|
||||
type="button"
|
||||
class="whiteboard-tool active"
|
||||
>
|
||||
<i class="fa fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
style="padding-bottom: 8px; padding-top: 6px;"
|
||||
tool="line"
|
||||
title="draw a line"
|
||||
type="button"
|
||||
class="whiteboard-tool"
|
||||
>
|
||||
╱
|
||||
</button>
|
||||
<button tool="rect" title="draw a rectangle" type="button" class="whiteboard-tool">
|
||||
<i class="far fa-square"></i>
|
||||
</button>
|
||||
<button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
|
||||
<i class="far fa-circle"></i>
|
||||
</button>
|
||||
<button tool="text" title="write text" type="button" class="whiteboard-tool">
|
||||
<i class="fas fa-font"></i>
|
||||
</button>
|
||||
<button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
|
||||
<i class="fa fa-eraser"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
|
||||
<i class="fa fa-mouse-pointer"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button"
|
||||
class="whiteboard-tool">
|
||||
<img src="./images/dottedRec.png">
|
||||
</button>
|
||||
<button tool="pen" title="Take the pen" type="button" class="whiteboard-tool active">
|
||||
<i class="fa fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button"
|
||||
class="whiteboard-tool">
|
||||
╱
|
||||
</button>
|
||||
<button tool="rect" title="draw a rectangle" type="button" class="whiteboard-tool">
|
||||
<i class="far fa-square"></i>
|
||||
</button>
|
||||
<button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
|
||||
<i class="far fa-circle"></i>
|
||||
</button>
|
||||
<button tool="text" title="write text" type="button" class="whiteboard-tool">
|
||||
<i class="fas fa-font"></i>
|
||||
</button>
|
||||
<button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
|
||||
<i class="fa fa-eraser"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button style="width: 190px; cursor: default;">
|
||||
<div
|
||||
class="activeToolIcon"
|
||||
style="position: absolute; top: 2px; left: 2px; font-size: 0.6em;"
|
||||
>
|
||||
<i class="fa fa-pencil-alt"></i>
|
||||
</div>
|
||||
<img
|
||||
style="
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 16px;
|
||||
height: 14px;
|
||||
width: 130px;
|
||||
"
|
||||
src="./images/slider-background.svg"
|
||||
/>
|
||||
<input
|
||||
title="Thickness"
|
||||
id="whiteboardThicknessSlider"
|
||||
style="position: absolute; left: 9px; width: 130px; top: 15px;"
|
||||
type="range"
|
||||
min="1"
|
||||
max="50"
|
||||
value="3"
|
||||
/>
|
||||
<div
|
||||
id="whiteboardColorpicker"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 155px;
|
||||
top: 10px;
|
||||
width: 26px;
|
||||
height: 23px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid darkgrey;
|
||||
"
|
||||
data-color="#000000"
|
||||
></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button style="width: 190px; cursor:default;">
|
||||
<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i
|
||||
class="fa fa-pencil-alt"></i></div>
|
||||
<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;"
|
||||
src="./images/slider-background.svg">
|
||||
<input title="Thickness" id="whiteboardThicknessSlider"
|
||||
style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50"
|
||||
value="3">
|
||||
<div id="whiteboardColorpicker"
|
||||
style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; border: 1px solid darkgrey;"
|
||||
data-color="#000000">
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
|
||||
<i class="fas fa-image"></i>
|
||||
<i
|
||||
style="
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
color: #000000;
|
||||
font-size: 0.5em;
|
||||
"
|
||||
class="fas fa-upload"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
|
||||
<i class="fas fa-image"></i>
|
||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-upload"></i>
|
||||
</button>
|
||||
<button
|
||||
style="position: relative;"
|
||||
id="uploadJsonBtn"
|
||||
title="Load saved JSON to whiteboard"
|
||||
type="button"
|
||||
>
|
||||
<i class="far fa-file-alt"></i>
|
||||
<i
|
||||
style="
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
color: #000000;
|
||||
font-size: 0.5em;
|
||||
"
|
||||
class="fas fa-upload"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button">
|
||||
<i class="far fa-file-alt"></i>
|
||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-upload"></i>
|
||||
</button>
|
||||
<input style="display: none;" id="myFile" type="file" />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
|
||||
<i class="fas fa-share-square"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="btn-group minGroup">
|
||||
<button
|
||||
style="width: 25px; padding: 11px 11px;"
|
||||
id="minMaxBtn"
|
||||
title="hide buttons"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
id="minBtn"
|
||||
style="position: relative; left: -5px;"
|
||||
class="fas fa-angle-left"
|
||||
></i>
|
||||
<i
|
||||
id="maxBtn"
|
||||
style="position: relative; left: -5px; display: none;"
|
||||
class="fas fa-angle-right"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
|
||||
<i class="fas fa-share-square"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group minGroup">
|
||||
<button style="width: 25px; padding: 11px 11px;" id="minMaxBtn" title="hide buttons" type="button">
|
||||
<i id="minBtn" style="position:relative; left:-5px;" class="fas fa-angle-left"></i>
|
||||
<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 10px; right: 10px; display:none;">
|
||||
<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>
|
||||
<div style="position: absolute; bottom: 10px; right: 10px; display: none;">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {computeDist} from "../utils";
|
||||
import { computeDist } from "../utils";
|
||||
|
||||
class Point {
|
||||
/**
|
||||
|
|
@ -42,7 +42,8 @@ class Point {
|
|||
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 (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;
|
||||
|
|
@ -65,7 +66,7 @@ class Point {
|
|||
|
||||
/**
|
||||
* Compute euclidean distance between points
|
||||
*
|
||||
*
|
||||
* @param {Point} otherPoint
|
||||
* @returns {number}
|
||||
*/
|
||||
|
|
@ -74,4 +75,4 @@ class Point {
|
|||
}
|
||||
}
|
||||
|
||||
export default Point;
|
||||
export default Point;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
faSortDown,
|
||||
faExpandArrowsAlt,
|
||||
faLock,
|
||||
faLockOpen
|
||||
faLockOpen,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faSquare,
|
||||
|
|
@ -53,4 +53,4 @@ library.add(
|
|||
faLockOpen
|
||||
);
|
||||
|
||||
dom.i2svg()
|
||||
dom.i2svg();
|
||||
|
|
|
|||
|
|
@ -8,19 +8,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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,48 @@
|
|||
/* -----------
|
||||
KEYBINDINGS
|
||||
----------- */
|
||||
----------- */
|
||||
|
||||
//> defmod is "command" on OS X and "ctrl" elsewhere
|
||||
//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j.
|
||||
//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j.
|
||||
|
||||
const keybinds = {
|
||||
// 'key(s)' : 'function',
|
||||
'defmod-shift-z' : 'clearWhiteboard',
|
||||
'defmod-z' : 'undoStep',
|
||||
'defmod-y' : 'redoStep',
|
||||
'defmod-x' : 'setTool_recSelect',
|
||||
'defmod-m' : 'setTool_mouse',
|
||||
'defmod-p' : 'setTool_pen',
|
||||
'defmod-l' : 'setTool_line',
|
||||
'defmod-r' : 'setTool_rect',
|
||||
'defmod-c' : 'setTool_circle',
|
||||
'defmod-shift-f' : 'toggleLineRecCircle',
|
||||
'defmod-shift-x' : 'togglePenEraser',
|
||||
'defmod-shift-r' : 'toggleMainColors',
|
||||
'defmod-a' : 'setTool_text',
|
||||
'defmod-e' : 'setTool_eraser',
|
||||
'defmod-up' : 'thickness_bigger',
|
||||
'defmod-down' : 'thickness_smaller',
|
||||
'defmod-shift-c' : 'openColorPicker',
|
||||
'defmod-shift-1' : 'setDrawColorBlack',
|
||||
'defmod-shift-2' : 'setDrawColorBlue',
|
||||
'defmod-shift-3' : 'setDrawColorGreen',
|
||||
'defmod-shift-4' : 'setDrawColorYellow',
|
||||
'defmod-shift-5' : 'setDrawColorRed',
|
||||
'defmod-s' : 'saveWhiteboardAsImage',
|
||||
'defmod-shift-k' : 'saveWhiteboardAsJson',
|
||||
'defmod-shift-i' : 'uploadWhiteboardToWebDav',
|
||||
'defmod-shift-j' : 'uploadJsonToWhiteboard',
|
||||
'defmod-shift-s' : 'shareWhiteboard',
|
||||
'tab' : 'hideShowControls',
|
||||
'up' : 'moveDraggableUp',
|
||||
'down' : 'moveDraggableDown',
|
||||
'left' : 'moveDraggableLeft',
|
||||
'right' : 'moveDraggableRight',
|
||||
'defmod-enter' : 'dropDraggable',
|
||||
'shift-enter' : 'addToBackground',
|
||||
'escape' : 'cancelAllActions',
|
||||
'del' : 'deleteSelection'
|
||||
}
|
||||
"defmod-shift-z": "clearWhiteboard",
|
||||
"defmod-z": "undoStep",
|
||||
"defmod-y": "redoStep",
|
||||
"defmod-x": "setTool_recSelect",
|
||||
"defmod-m": "setTool_mouse",
|
||||
"defmod-p": "setTool_pen",
|
||||
"defmod-l": "setTool_line",
|
||||
"defmod-r": "setTool_rect",
|
||||
"defmod-c": "setTool_circle",
|
||||
"defmod-shift-f": "toggleLineRecCircle",
|
||||
"defmod-shift-x": "togglePenEraser",
|
||||
"defmod-shift-r": "toggleMainColors",
|
||||
"defmod-a": "setTool_text",
|
||||
"defmod-e": "setTool_eraser",
|
||||
"defmod-up": "thickness_bigger",
|
||||
"defmod-down": "thickness_smaller",
|
||||
"defmod-shift-c": "openColorPicker",
|
||||
"defmod-shift-1": "setDrawColorBlack",
|
||||
"defmod-shift-2": "setDrawColorBlue",
|
||||
"defmod-shift-3": "setDrawColorGreen",
|
||||
"defmod-shift-4": "setDrawColorYellow",
|
||||
"defmod-shift-5": "setDrawColorRed",
|
||||
"defmod-s": "saveWhiteboardAsImage",
|
||||
"defmod-shift-k": "saveWhiteboardAsJson",
|
||||
"defmod-shift-i": "uploadWhiteboardToWebDav",
|
||||
"defmod-shift-j": "uploadJsonToWhiteboard",
|
||||
"defmod-shift-s": "shareWhiteboard",
|
||||
tab: "hideShowControls",
|
||||
up: "moveDraggableUp",
|
||||
down: "moveDraggableDown",
|
||||
left: "moveDraggableLeft",
|
||||
right: "moveDraggableRight",
|
||||
"defmod-enter": "dropDraggable",
|
||||
"shift-enter": "addToBackground",
|
||||
escape: "cancelAllActions",
|
||||
del: "deleteSelection",
|
||||
};
|
||||
|
||||
export default keybinds;
|
||||
export default keybinds;
|
||||
|
|
|
|||
505
src/js/main.js
505
src/js/main.js
|
|
@ -1,5 +1,5 @@
|
|||
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";
|
||||
|
|
@ -9,13 +9,16 @@ import shortcutFunctions from "./shortcutFunctions";
|
|||
import ReadOnlyService from "./services/ReadOnlyService";
|
||||
|
||||
function main() {
|
||||
|
||||
var whiteboardId = getQueryVariable("whiteboardid");
|
||||
var randomid = getQueryVariable("randomid");
|
||||
if (randomid && !whiteboardId) { //set random whiteboard on empty whiteboardid
|
||||
whiteboardId = Array(2).fill(null).map(() => Math.random().toString(36).substr(2)).join('');
|
||||
if (randomid && !whiteboardId) {
|
||||
//set random whiteboard on empty whiteboardid
|
||||
whiteboardId = Array(2)
|
||||
.fill(null)
|
||||
.map(() => Math.random().toString(36).substr(2))
|
||||
.join("");
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
urlParams.set('whiteboardid', whiteboardId);
|
||||
urlParams.set("whiteboardid", whiteboardId);
|
||||
window.location.search = urlParams;
|
||||
}
|
||||
|
||||
|
|
@ -33,40 +36,44 @@ function main() {
|
|||
document.title = decodeURIComponent(title);
|
||||
}
|
||||
|
||||
var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
|
||||
var url = document.URL.substr(0, document.URL.lastIndexOf("/"));
|
||||
var signaling_socket = null;
|
||||
var urlSplit = url.split("/");
|
||||
var subdir = "";
|
||||
for (var i = 3; i < urlSplit.length; i++) {
|
||||
subdir = subdir + '/' + urlSplit[i];
|
||||
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 = io("", { path: subdir + "/ws-api" }); // Connect even if we are in a subdir behind a reverse proxy
|
||||
|
||||
signaling_socket.on('connect', function () {
|
||||
signaling_socket.on("connect", function () {
|
||||
console.log("Websocket connected!");
|
||||
|
||||
let messageReceivedCount = 0;
|
||||
signaling_socket.on('drawToWhiteboard', function (content) {
|
||||
signaling_socket.on("drawToWhiteboard", function (content) {
|
||||
whiteboard.handleEventsAndData(content, true);
|
||||
$('#messageReceivedCount')[0].innerText = String(messageReceivedCount++);
|
||||
$("#messageReceivedCount")[0].innerText = String(messageReceivedCount++);
|
||||
});
|
||||
|
||||
signaling_socket.on('refreshUserBadges', function () {
|
||||
signaling_socket.on("refreshUserBadges", function () {
|
||||
whiteboard.refreshUserBadges();
|
||||
});
|
||||
|
||||
signaling_socket.on('wrongAccessToken', function () {
|
||||
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.on("updateSmallestScreenResolution", function (widthHeight) {
|
||||
whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]);
|
||||
});
|
||||
|
||||
signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
|
||||
signaling_socket.emit("joinWhiteboard", {
|
||||
wid: whiteboardId,
|
||||
at: accessToken,
|
||||
windowWidthHeight: { w: $(window).width(), h: $(window).height() },
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
|
|
@ -78,29 +85,35 @@ function main() {
|
|||
}
|
||||
|
||||
let messageSentCount = 0;
|
||||
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
|
||||
whiteboard.loadWhiteboard("#whiteboardContainer", {
|
||||
//Load the whiteboard
|
||||
whiteboardId: whiteboardId,
|
||||
username: btoa(myUsername),
|
||||
sendFunction: function (content) {
|
||||
if (ReadOnlyService.readOnlyActive) return;
|
||||
//ADD IN LATER THROUGH CONFIG
|
||||
// if (content.t === 'cursor') {
|
||||
//ADD IN LATER THROUGH CONFIG
|
||||
// if (content.t === 'cursor') {
|
||||
// if (whiteboard.drawFlag) return;
|
||||
// }
|
||||
content["at"] = accessToken;
|
||||
signaling_socket.emit('drawToWhiteboard', content);
|
||||
$('#messageSentCount')[0].innerText = String(messageSentCount++);
|
||||
}
|
||||
signaling_socket.emit("drawToWhiteboard", content);
|
||||
$("#messageSentCount")[0].innerText = String(messageSentCount++);
|
||||
},
|
||||
});
|
||||
|
||||
// request whiteboard from server
|
||||
$.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(function (data) {
|
||||
whiteboard.loadData(data)
|
||||
});
|
||||
$.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(
|
||||
function (data) {
|
||||
whiteboard.loadData(data);
|
||||
}
|
||||
);
|
||||
|
||||
$(window).resize(function () {
|
||||
signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
|
||||
})
|
||||
signaling_socket.emit("updateScreenResolution", {
|
||||
at: accessToken,
|
||||
windowWidthHeight: { w: $(window).width(), h: $(window).height() },
|
||||
});
|
||||
});
|
||||
|
||||
/*----------------/
|
||||
Whiteboard actions
|
||||
|
|
@ -115,12 +128,18 @@ function main() {
|
|||
tempLineTool = true;
|
||||
whiteboard.ownCursor.hide();
|
||||
if (whiteboard.drawFlag) {
|
||||
whiteboard.mouseup({ offsetX: whiteboard.prevPos.x, offsetY: whiteboard.prevPos.y })
|
||||
whiteboard.mouseup({
|
||||
offsetX: whiteboard.prevPos.x,
|
||||
offsetY: whiteboard.prevPos.y,
|
||||
});
|
||||
shortcutFunctions.setTool_line();
|
||||
whiteboard.mousedown({ offsetX: whiteboard.prevPos.x, offsetY: whiteboard.prevPos.y })
|
||||
whiteboard.mousedown({
|
||||
offsetX: whiteboard.prevPos.x,
|
||||
offsetY: whiteboard.prevPos.y,
|
||||
});
|
||||
} else {
|
||||
shortcutFunctions.setTool_line();
|
||||
}
|
||||
}
|
||||
}
|
||||
whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
|
||||
} else if (e.which == 17) {
|
||||
|
|
@ -147,9 +166,15 @@ function main() {
|
|||
if (associatedShortcutFunction) {
|
||||
keymage(key, associatedShortcutFunction, { preventDefault: true });
|
||||
} else {
|
||||
console.error("Function you want to keybind on key:", key, "named:", functionName, "is not available!")
|
||||
console.error(
|
||||
"Function you want to keybind on key:",
|
||||
key,
|
||||
"named:",
|
||||
functionName,
|
||||
"is not available!"
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// whiteboard clear button
|
||||
$("#whiteboardTrashBtn").click(function () {
|
||||
|
|
@ -211,15 +236,18 @@ function main() {
|
|||
$("#saveAsImageBtn").click(function () {
|
||||
var imgData = whiteboard.getImageDataBase64();
|
||||
|
||||
var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
|
||||
setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
|
||||
var a = document.createElement('a');
|
||||
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.png";
|
||||
w.document.body.appendChild(a);
|
||||
a.click();
|
||||
w.document.body.removeChild(a);
|
||||
setTimeout(function () { w.close(); }, 100);
|
||||
setTimeout(function () {
|
||||
w.close();
|
||||
}, 100);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
|
|
@ -227,15 +255,18 @@ function main() {
|
|||
$("#saveAsJSONBtn").click(function () {
|
||||
var imgData = whiteboard.getImageDataJson();
|
||||
|
||||
var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
|
||||
setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
|
||||
var a = document.createElement('a');
|
||||
a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' }));
|
||||
a.download = 'whiteboard.json';
|
||||
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
|
||||
setTimeout(function () {
|
||||
//FireFox seems to require a setTimeout for this to work.
|
||||
var a = document.createElement("a");
|
||||
a.href = window.URL.createObjectURL(new Blob([imgData], { type: "text/json" }));
|
||||
a.download = "whiteboard.json";
|
||||
w.document.body.appendChild(a);
|
||||
a.click();
|
||||
w.document.body.removeChild(a);
|
||||
setTimeout(function () { w.close(); }, 100);
|
||||
setTimeout(function () {
|
||||
w.close();
|
||||
}, 100);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
|
|
@ -244,57 +275,67 @@ function main() {
|
|||
return;
|
||||
}
|
||||
|
||||
var webdavserver = localStorage.getItem('webdavserver') || ""
|
||||
var webdavpath = localStorage.getItem('webdavpath') || "/"
|
||||
var webdavusername = localStorage.getItem('webdavusername') || ""
|
||||
var webdavpassword = localStorage.getItem('webdavpassword') || ""
|
||||
var webDavHtml = $('<div>' +
|
||||
'<table>' +
|
||||
'<tr>' +
|
||||
'<td>Server URL:</td>' +
|
||||
'<td><input class="webdavserver" type="text" value="' + webdavserver + '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
|
||||
'<td></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td>Path:</td>' +
|
||||
'<td><input class="webdavpath" type="text" placeholder="folder" value="' + webdavpath + '"></td>' +
|
||||
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td>Username:</td>' +
|
||||
'<td><input class="webdavusername" type="text" value="' + webdavusername + '" placeholder="username"></td>' +
|
||||
'<td style="font-size: 0.7em;"></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td>Password:</td>' +
|
||||
'<td><input class="webdavpassword" type="password" value="' + webdavpassword + '" placeholder="password"></td>' +
|
||||
'<td style="font-size: 0.7em;"></td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td></td>' +
|
||||
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
|
||||
'</tr>' +
|
||||
'</table>' +
|
||||
'</div>');
|
||||
var webdavserver = localStorage.getItem("webdavserver") || "";
|
||||
var webdavpath = localStorage.getItem("webdavpath") || "/";
|
||||
var webdavusername = localStorage.getItem("webdavusername") || "";
|
||||
var webdavpassword = localStorage.getItem("webdavpassword") || "";
|
||||
var webDavHtml = $(
|
||||
"<div>" +
|
||||
"<table>" +
|
||||
"<tr>" +
|
||||
"<td>Server URL:</td>" +
|
||||
'<td><input class="webdavserver" type="text" value="' +
|
||||
webdavserver +
|
||||
'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
|
||||
"<td></td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>Path:</td>" +
|
||||
'<td><input class="webdavpath" type="text" placeholder="folder" value="' +
|
||||
webdavpath +
|
||||
'"></td>' +
|
||||
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>Username:</td>" +
|
||||
'<td><input class="webdavusername" type="text" value="' +
|
||||
webdavusername +
|
||||
'" placeholder="username"></td>' +
|
||||
'<td style="font-size: 0.7em;"></td>' +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>Password:</td>" +
|
||||
'<td><input class="webdavpassword" type="password" value="' +
|
||||
webdavpassword +
|
||||
'" placeholder="password"></td>' +
|
||||
'<td style="font-size: 0.7em;"></td>' +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td></td>" +
|
||||
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
|
||||
"</tr>" +
|
||||
"</table>" +
|
||||
"</div>"
|
||||
);
|
||||
webDavHtml.find(".webdavUploadBtn").click(function () {
|
||||
var webdavserver = webDavHtml.find(".webdavserver").val();
|
||||
localStorage.setItem('webdavserver', webdavserver);
|
||||
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();
|
||||
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) {
|
||||
|
|
@ -305,12 +346,12 @@ function main() {
|
|||
webDavHtml.parents(".basicalert").remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
showBasicAlert(webDavHtml, {
|
||||
header: "Save to Webdav",
|
||||
okBtnText: "cancel",
|
||||
headercolor: "#0082c9"
|
||||
})
|
||||
headercolor: "#0082c9",
|
||||
});
|
||||
// render newly added icons
|
||||
dom.i2svg();
|
||||
});
|
||||
|
|
@ -330,10 +371,15 @@ function main() {
|
|||
endSplit = endSplit.splice(1, 1);
|
||||
urlStart += "&" + endSplit.join("&");
|
||||
}
|
||||
$("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
|
||||
document.execCommand('copy');
|
||||
}).remove();
|
||||
showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 })
|
||||
$("<textarea/>")
|
||||
.appendTo("body")
|
||||
.val(urlStart)
|
||||
.select()
|
||||
.each(function () {
|
||||
document.execCommand("copy");
|
||||
})
|
||||
.remove();
|
||||
showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 });
|
||||
});
|
||||
|
||||
var btnsMini = false;
|
||||
|
|
@ -348,7 +394,7 @@ function main() {
|
|||
$(this).find("#maxBtn").hide();
|
||||
}
|
||||
btnsMini = !btnsMini;
|
||||
})
|
||||
});
|
||||
|
||||
// load json to whiteboard
|
||||
$("#myFile").on("change", function () {
|
||||
|
|
@ -374,7 +420,7 @@ function main() {
|
|||
|
||||
// handle drag&drop
|
||||
var dragCounter = 0;
|
||||
$('#whiteboardContainer').on("dragenter", function (e) {
|
||||
$("#whiteboardContainer").on("dragenter", function (e) {
|
||||
if (ReadOnlyService.readOnlyActive) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
@ -382,7 +428,7 @@ function main() {
|
|||
whiteboard.dropIndicator.show();
|
||||
});
|
||||
|
||||
$('#whiteboardContainer').on("dragleave", function (e) {
|
||||
$("#whiteboardContainer").on("dragleave", function (e) {
|
||||
if (ReadOnlyService.readOnlyActive) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
|
@ -393,11 +439,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"];
|
||||
|
|
@ -408,8 +456,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();
|
||||
|
|
@ -417,86 +466,91 @@ function main() {
|
|||
var pdfData = new Uint8Array(this.result);
|
||||
|
||||
var loadingTask = pdfjsLib.getDocument({ data: pdfData });
|
||||
loadingTask.promise.then(function (pdf) {
|
||||
console.log('PDF loaded');
|
||||
loadingTask.promise.then(
|
||||
function (pdf) {
|
||||
console.log("PDF loaded");
|
||||
|
||||
var currentDataUrl = null;
|
||||
var modalDiv = $('<div>' +
|
||||
'Page: <select></select> ' +
|
||||
'<button style="margin-bottom: 3px;" class="modalBtn"><i class="fas fa-upload"></i> Upload to Whiteboard</button>' +
|
||||
'<img style="width:100%;" src=""/>' +
|
||||
'</div>')
|
||||
var currentDataUrl = null;
|
||||
var modalDiv = $(
|
||||
"<div>" +
|
||||
"Page: <select></select> " +
|
||||
'<button style="margin-bottom: 3px;" class="modalBtn"><i class="fas fa-upload"></i> Upload to Whiteboard</button>' +
|
||||
'<img style="width:100%;" src=""/>' +
|
||||
"</div>"
|
||||
);
|
||||
|
||||
modalDiv.find("select").change(function () {
|
||||
showPDFPageAsImage(parseInt($(this).val()));
|
||||
})
|
||||
|
||||
modalDiv.find("button").click(function () {
|
||||
if (currentDataUrl) {
|
||||
$(".basicalert").remove();
|
||||
uploadImgAndAddToWhiteboard(currentDataUrl);
|
||||
}
|
||||
})
|
||||
|
||||
for (var i = 1; i < pdf.numPages + 1; i++) {
|
||||
modalDiv.find("select").append('<option value="' + i + '">' + i + '</option>')
|
||||
}
|
||||
|
||||
showBasicAlert(modalDiv, {
|
||||
header: "Pdf to Image",
|
||||
okBtnText: "cancel",
|
||||
headercolor: "#0082c9"
|
||||
})
|
||||
|
||||
showPDFPageAsImage(1);
|
||||
function showPDFPageAsImage(pageNumber) {
|
||||
|
||||
// Fetch the page
|
||||
pdf.getPage(pageNumber).then(function (page) {
|
||||
console.log('Page loaded');
|
||||
|
||||
|
||||
var scale = 1.5;
|
||||
var viewport = page.getViewport({ scale: scale });
|
||||
|
||||
// Prepare canvas using PDF page dimensions
|
||||
var canvas = $("<canvas></canvas>")[0];
|
||||
var context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
// Render PDF page into canvas context
|
||||
var renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
var renderTask = page.render(renderContext);
|
||||
renderTask.promise.then(function () {
|
||||
var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
|
||||
currentDataUrl = dataUrl;
|
||||
modalDiv.find("img").attr("src", dataUrl);
|
||||
console.log('Page rendered');
|
||||
|
||||
});
|
||||
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>");
|
||||
}
|
||||
|
||||
showBasicAlert(modalDiv, {
|
||||
header: "Pdf to Image",
|
||||
okBtnText: "cancel",
|
||||
headercolor: "#0082c9",
|
||||
});
|
||||
|
||||
showPDFPageAsImage(1);
|
||||
function showPDFPageAsImage(pageNumber) {
|
||||
// Fetch the page
|
||||
pdf.getPage(pageNumber).then(function (page) {
|
||||
console.log("Page loaded");
|
||||
|
||||
var scale = 1.5;
|
||||
var viewport = page.getViewport({ scale: scale });
|
||||
|
||||
// Prepare canvas using PDF page dimensions
|
||||
var canvas = $("<canvas></canvas>")[0];
|
||||
var context = canvas.getContext("2d");
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
// Render PDF page into canvas context
|
||||
var renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
};
|
||||
var renderTask = page.render(renderContext);
|
||||
renderTask.promise.then(function () {
|
||||
var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
|
||||
currentDataUrl = dataUrl;
|
||||
modalDiv.find("img").attr("src", dataUrl);
|
||||
console.log("Page rendered");
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
function (reason) {
|
||||
// PDF loading error
|
||||
|
||||
showBasicAlert(
|
||||
"Error loading pdf as image! Check that this is a vaild pdf file!"
|
||||
);
|
||||
console.error(reason);
|
||||
}
|
||||
|
||||
}, function (reason) {
|
||||
// PDF loading error
|
||||
|
||||
showBasicAlert("Error loading pdf as image! Check that this is a vaild pdf file!");
|
||||
console.error(reason);
|
||||
});
|
||||
|
||||
}
|
||||
);
|
||||
};
|
||||
reader.readAsArrayBuffer(blob);
|
||||
} else {
|
||||
showBasicAlert("File must be an image!");
|
||||
}
|
||||
} else { //File from other browser
|
||||
} else {
|
||||
//File from other browser
|
||||
|
||||
var fileUrl = e.originalEvent.dataTransfer.getData('URL');
|
||||
var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
|
||||
var fileUrl = e.originalEvent.dataTransfer.getData("URL");
|
||||
var imageUrl = e.originalEvent.dataTransfer.getData("text/html");
|
||||
var rex = /src="?([^"\s]+)"?\s*/;
|
||||
var url = rex.exec(imageUrl);
|
||||
if (url && url.length > 1) {
|
||||
|
|
@ -529,11 +583,11 @@ function main() {
|
|||
});
|
||||
|
||||
new Picker({
|
||||
parent: $('#whiteboardColorpicker')[0],
|
||||
parent: $("#whiteboardColorpicker")[0],
|
||||
color: "#000000",
|
||||
onChange: function (color) {
|
||||
whiteboard.setDrawColor(color.rgbaString);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// on startup select mouse
|
||||
|
|
@ -549,64 +603,76 @@ function main() {
|
|||
});
|
||||
|
||||
//Prevent site from changing tab on drag&drop
|
||||
window.addEventListener("dragover", function (e) {
|
||||
e = e || event;
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
window.addEventListener("drop", function (e) {
|
||||
e = e || event;
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
window.addEventListener(
|
||||
"dragover",
|
||||
function (e) {
|
||||
e = e || event;
|
||||
e.preventDefault();
|
||||
},
|
||||
false
|
||||
);
|
||||
window.addEventListener(
|
||||
"drop",
|
||||
function (e) {
|
||||
e = e || event;
|
||||
e.preventDefault();
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
function uploadImgAndAddToWhiteboard(base64data) {
|
||||
var date = (+new Date());
|
||||
var date = +new Date();
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/api/upload',
|
||||
type: "POST",
|
||||
url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
|
||||
data: {
|
||||
'imagedata': base64data,
|
||||
'whiteboardId': whiteboardId,
|
||||
'date': date,
|
||||
'at': accessToken
|
||||
imagedata: base64data,
|
||||
whiteboardId: whiteboardId,
|
||||
date: date,
|
||||
at: accessToken,
|
||||
},
|
||||
success: function (msg) {
|
||||
var filename = whiteboardId + "_" + date + ".png";
|
||||
whiteboard.addImgToCanvasByUrl(document.URL.substr(0, document.URL.lastIndexOf('/')) + "/uploads/" + filename); //Add image to canvas
|
||||
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',
|
||||
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + 'api/upload',
|
||||
type: "POST",
|
||||
url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "api/upload",
|
||||
data: {
|
||||
'imagedata': base64data,
|
||||
'whiteboardId': whiteboardId,
|
||||
'date': date,
|
||||
'at': accessToken,
|
||||
'webdavaccess': JSON.stringify(webdavaccess)
|
||||
imagedata: base64data,
|
||||
whiteboardId: whiteboardId,
|
||||
date: date,
|
||||
at: accessToken,
|
||||
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);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -664,13 +730,15 @@ 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)"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -681,21 +749,28 @@ function main() {
|
|||
okBtnText: "Ok",
|
||||
headercolor: "#d25d5d",
|
||||
hideAfter: false,
|
||||
onOkClick: 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>');
|
||||
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 () {
|
||||
|
|
@ -703,15 +778,15 @@ function main() {
|
|||
options.onOkClick();
|
||||
}
|
||||
alertHtml.remove();
|
||||
})
|
||||
});
|
||||
alertHtml.find(".closeAlert").click(function () {
|
||||
alertHtml.remove();
|
||||
})
|
||||
});
|
||||
|
||||
if (options.hideAfter) {
|
||||
setTimeout(function () {
|
||||
alertHtml.find(".okbtn").click();
|
||||
}, 1000 * options.hideAfter)
|
||||
}, 1000 * options.hideAfter);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -729,4 +804,4 @@ function main() {
|
|||
}
|
||||
}
|
||||
|
||||
export default main;
|
||||
export default main;
|
||||
|
|
|
|||
|
|
@ -57,4 +57,4 @@ class ReadOnlyService {
|
|||
}
|
||||
}
|
||||
|
||||
export default new ReadOnlyService();
|
||||
export default new ReadOnlyService();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ function defineShortcut(callback, readOnlySensitive = true) {
|
|||
return () => {
|
||||
if (readOnlySensitive && ReadOnlyService.readOnlyActive) return;
|
||||
callback();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const shortcutFunctions = {
|
||||
|
|
@ -103,33 +103,45 @@ const shortcutFunctions = {
|
|||
}
|
||||
}),
|
||||
moveDraggableUp: defineShortcut(() => {
|
||||
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
const elm =
|
||||
whiteboard.tool === "text"
|
||||
? $("#" + whiteboard.latestActiveTextBoxId)
|
||||
: $(".dragMe")[0];
|
||||
const p = $(elm).position();
|
||||
if (p) $(elm).css({top: p.top - 5, left: p.left})
|
||||
if (p) $(elm).css({ top: p.top - 5, left: p.left });
|
||||
}),
|
||||
moveDraggableDown: defineShortcut(() => {
|
||||
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
const elm =
|
||||
whiteboard.tool === "text"
|
||||
? $("#" + whiteboard.latestActiveTextBoxId)
|
||||
: $(".dragMe")[0];
|
||||
const p = $(elm).position();
|
||||
if (p) $(elm).css({top: p.top + 5, left: p.left})
|
||||
if (p) $(elm).css({ top: p.top + 5, left: p.left });
|
||||
}),
|
||||
moveDraggableLeft: defineShortcut(() => {
|
||||
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
const elm =
|
||||
whiteboard.tool === "text"
|
||||
? $("#" + whiteboard.latestActiveTextBoxId)
|
||||
: $(".dragMe")[0];
|
||||
const p = $(elm).position();
|
||||
if (p) $(elm).css({top: p.top, left: p.left - 5})
|
||||
if (p) $(elm).css({ top: p.top, left: p.left - 5 });
|
||||
}),
|
||||
moveDraggableRight: defineShortcut(() => {
|
||||
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
|
||||
const elm =
|
||||
whiteboard.tool === "text"
|
||||
? $("#" + whiteboard.latestActiveTextBoxId)
|
||||
: $(".dragMe")[0];
|
||||
const p = $(elm).position();
|
||||
if (p) $(elm).css({top: p.top, left: p.left + 5})
|
||||
if (p) $(elm).css({ top: p.top, left: p.left + 5 });
|
||||
}),
|
||||
dropDraggable: defineShortcut(() => {
|
||||
$($(".dragMe")[0]).find('.addToCanvasBtn').click();
|
||||
$($(".dragMe")[0]).find(".addToCanvasBtn").click();
|
||||
}),
|
||||
addToBackground: defineShortcut(() => {
|
||||
$($(".dragMe")[0]).find('.addToBackgroundBtn').click();
|
||||
$($(".dragMe")[0]).find(".addToBackgroundBtn").click();
|
||||
}),
|
||||
cancelAllActions: defineShortcut(() => whiteboard.escKeyAction()),
|
||||
deleteSelection: defineShortcut(() => whiteboard.delKeyAction()),
|
||||
}
|
||||
};
|
||||
|
||||
export default shortcutFunctions;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@
|
|||
* @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 Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -14,5 +12,5 @@ export function computeDist(p1, p2) {
|
|||
* @returns {number}
|
||||
*/
|
||||
export function getCurrentTimeMs() {
|
||||
return (new Date()).getTime();
|
||||
}
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue