|
|
|
@ -11,13 +11,15 @@ define([
|
|
|
|
'json.sortify',
|
|
|
|
'json.sortify',
|
|
|
|
'/bower_components/chainpad-json-validator/json-ot.js',
|
|
|
|
'/bower_components/chainpad-json-validator/json-ot.js',
|
|
|
|
'/common/cryptpad-common.js',
|
|
|
|
'/common/cryptpad-common.js',
|
|
|
|
|
|
|
|
'/common/cryptget.js',
|
|
|
|
|
|
|
|
'/whiteboard/colors.js',
|
|
|
|
'/common/visible.js',
|
|
|
|
'/common/visible.js',
|
|
|
|
'/common/notify.js',
|
|
|
|
'/common/notify.js',
|
|
|
|
'/customize/application_config.js',
|
|
|
|
'/customize/application_config.js',
|
|
|
|
'/bower_components/secure-fabric.js/dist/fabric.min.js',
|
|
|
|
'/bower_components/secure-fabric.js/dist/fabric.min.js',
|
|
|
|
'/bower_components/jquery/dist/jquery.min.js',
|
|
|
|
'/bower_components/jquery/dist/jquery.min.js',
|
|
|
|
'/bower_components/file-saver/FileSaver.min.js',
|
|
|
|
'/bower_components/file-saver/FileSaver.min.js',
|
|
|
|
], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Visible, Notify, AppConfig) {
|
|
|
|
], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, Visible, Notify, AppConfig) {
|
|
|
|
var saveAs = window.saveAs;
|
|
|
|
var saveAs = window.saveAs;
|
|
|
|
var Messages = Cryptpad.Messages;
|
|
|
|
var Messages = Cryptpad.Messages;
|
|
|
|
|
|
|
|
|
|
|
|
@ -47,15 +49,23 @@ define([
|
|
|
|
var $pickers = $('#pickers');
|
|
|
|
var $pickers = $('#pickers');
|
|
|
|
var $colors = $('#colors');
|
|
|
|
var $colors = $('#colors');
|
|
|
|
var $cursors = $('#cursors');
|
|
|
|
var $cursors = $('#cursors');
|
|
|
|
|
|
|
|
var $deleteButton = $('#delete');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var brush = {
|
|
|
|
|
|
|
|
color: '#000000',
|
|
|
|
|
|
|
|
opacity: 1
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var $toggle = $('#toggleDraw');
|
|
|
|
var $toggle = $('#toggleDraw');
|
|
|
|
var $width = $('#width');
|
|
|
|
var $width = $('#width');
|
|
|
|
var $widthLabel = $('label[for="width"]');
|
|
|
|
var $widthLabel = $('label[for="width"]');
|
|
|
|
|
|
|
|
var $opacity = $('#opacity');
|
|
|
|
|
|
|
|
var $opacityLabel = $('label[for="opacity"]');
|
|
|
|
|
|
|
|
window.canvas = canvas;
|
|
|
|
var createCursor = function () {
|
|
|
|
var createCursor = function () {
|
|
|
|
var w = canvas.freeDrawingBrush.width;
|
|
|
|
var w = canvas.freeDrawingBrush.width;
|
|
|
|
var c = canvas.freeDrawingBrush.color;
|
|
|
|
var c = canvas.freeDrawingBrush.color;
|
|
|
|
var size = w > 30 ? w : w+30;
|
|
|
|
var size = w > 30 ? w+2 : w+32;
|
|
|
|
$cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
|
|
|
|
$cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
|
|
|
|
var $ccanvas = $cursors.find('canvas');
|
|
|
|
var $ccanvas = $cursors.find('canvas');
|
|
|
|
var ccanvas = $ccanvas[0];
|
|
|
|
var ccanvas = $ccanvas[0];
|
|
|
|
@ -69,7 +79,9 @@ define([
|
|
|
|
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
|
|
|
|
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
|
|
|
|
ctx.fillStyle = c;
|
|
|
|
ctx.fillStyle = c;
|
|
|
|
ctx.fill();
|
|
|
|
ctx.fill();
|
|
|
|
ctx.lineWidth = 0;
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
|
|
|
ctx.strokeStyle = brush.color;
|
|
|
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
|
|
|
|
ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
|
|
|
|
@ -79,9 +91,6 @@ define([
|
|
|
|
ctx.strokeStyle = '#000000';
|
|
|
|
ctx.strokeStyle = '#000000';
|
|
|
|
ctx.stroke();
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
|
|
//context.lineWidth = w/2;
|
|
|
|
|
|
|
|
//context.strokeStyle = '#000000';
|
|
|
|
|
|
|
|
//context.stroke();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var img = ccanvas.toDataURL("image/png");
|
|
|
|
var img = ccanvas.toDataURL("image/png");
|
|
|
|
var $img = $('<img>', {
|
|
|
|
var $img = $('<img>', {
|
|
|
|
@ -102,6 +111,17 @@ define([
|
|
|
|
|
|
|
|
|
|
|
|
$width.on('change', updateBrushWidth);
|
|
|
|
$width.on('change', updateBrushWidth);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var updateBrushOpacity = function () {
|
|
|
|
|
|
|
|
var val = $opacity.val();
|
|
|
|
|
|
|
|
brush.opacity = Number(val);
|
|
|
|
|
|
|
|
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
|
|
|
|
|
|
|
|
$opacityLabel.text(val);
|
|
|
|
|
|
|
|
createCursor();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
updateBrushOpacity();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$opacity.on('change', updateBrushOpacity);
|
|
|
|
|
|
|
|
|
|
|
|
var pickColor = function (current, cb) {
|
|
|
|
var pickColor = function (current, cb) {
|
|
|
|
var $picker = $('<input>', {
|
|
|
|
var $picker = $('<input>', {
|
|
|
|
type: 'color',
|
|
|
|
type: 'color',
|
|
|
|
@ -120,21 +140,15 @@ define([
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var setColor = function (c) {
|
|
|
|
var setColor = function (c) {
|
|
|
|
canvas.freeDrawingBrush.color = c;
|
|
|
|
c = Colors.rgb2hex(c);
|
|
|
|
|
|
|
|
brush.color = c;
|
|
|
|
|
|
|
|
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
|
|
|
|
module.$color.css({
|
|
|
|
module.$color.css({
|
|
|
|
'color': c,
|
|
|
|
'color': c,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
createCursor();
|
|
|
|
createCursor();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var rgb2hex = function (rgb) {
|
|
|
|
|
|
|
|
if (rgb.indexOf('#') === 0) { return rgb; }
|
|
|
|
|
|
|
|
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
|
|
|
|
|
|
var hex = function (x) {
|
|
|
|
|
|
|
|
return ("0" + parseInt(x).toString(16)).slice(-2);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var palette = AppConfig.whiteboardPalette || [
|
|
|
|
var palette = AppConfig.whiteboardPalette || [
|
|
|
|
'red', 'blue', 'green', 'white', 'black', 'purple',
|
|
|
|
'red', 'blue', 'green', 'white', 'black', 'purple',
|
|
|
|
@ -151,9 +165,29 @@ define([
|
|
|
|
module.draw = !module.draw;
|
|
|
|
module.draw = !module.draw;
|
|
|
|
canvas.isDrawingMode = module.draw;
|
|
|
|
canvas.isDrawingMode = module.draw;
|
|
|
|
$toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
|
|
|
|
$toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
|
|
|
|
|
|
|
|
if (module.draw) { $deleteButton.hide(); }
|
|
|
|
|
|
|
|
else { $deleteButton.show(); }
|
|
|
|
};
|
|
|
|
};
|
|
|
|
$toggle.click(toggleDrawMode);
|
|
|
|
$toggle.click(toggleDrawMode);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var deleteSelection = function () {
|
|
|
|
|
|
|
|
if (canvas.getActiveObject()) {
|
|
|
|
|
|
|
|
canvas.getActiveObject().remove();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (canvas.getActiveGroup()) {
|
|
|
|
|
|
|
|
canvas.getActiveGroup()._objects.forEach(function (el) {
|
|
|
|
|
|
|
|
el.remove();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
canvas.discardActiveGroup();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
canvas.renderAll();
|
|
|
|
|
|
|
|
onLocal();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
$deleteButton.click(deleteSelection);
|
|
|
|
|
|
|
|
$(window).on('keyup', function (e) {
|
|
|
|
|
|
|
|
if (e.which === 46) { deleteSelection (); }
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var setEditable = function (bool) {
|
|
|
|
var setEditable = function (bool) {
|
|
|
|
if (readOnly && bool) { return; }
|
|
|
|
if (readOnly && bool) { return; }
|
|
|
|
if (bool) { $controls.show(); }
|
|
|
|
if (bool) { $controls.show(); }
|
|
|
|
@ -233,12 +267,12 @@ define([
|
|
|
|
'background-color': color,
|
|
|
|
'background-color': color,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.click(function () {
|
|
|
|
.click(function () {
|
|
|
|
var c = rgb2hex($color.css('background-color'));
|
|
|
|
var c = Colors.rgb2hex($color.css('background-color'));
|
|
|
|
setColor(c);
|
|
|
|
setColor(c);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.on('dblclick', function (e) {
|
|
|
|
.on('dblclick', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
e.preventDefault();
|
|
|
|
pickColor(rgb2hex($color.css('background-color')), function (c) {
|
|
|
|
pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
|
|
|
|
$color.css({
|
|
|
|
$color.css({
|
|
|
|
'background-color': c,
|
|
|
|
'background-color': c,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -327,6 +361,17 @@ define([
|
|
|
|
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
|
|
|
|
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
|
|
|
|
module.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
|
|
|
|
module.$userNameButton = $($bar.find('.' + Toolbar.constants.changeUsername));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* save as template */
|
|
|
|
|
|
|
|
if (!Cryptpad.isTemplate(window.location.href)) {
|
|
|
|
|
|
|
|
var templateObj = {
|
|
|
|
|
|
|
|
rt: info.realtime,
|
|
|
|
|
|
|
|
Crypt: Cryptget,
|
|
|
|
|
|
|
|
getTitle: function () { return document.title; }
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
var $templateButton = Cryptpad.createButton('template', true, templateObj);
|
|
|
|
|
|
|
|
$rightside.append($templateButton);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var $export = Cryptpad.createButton('export', true, {}, saveImage);
|
|
|
|
var $export = Cryptpad.createButton('export', true, {}, saveImage);
|
|
|
|
$rightside.append($export);
|
|
|
|
$rightside.append($export);
|
|
|
|
|
|
|
|
|
|
|
|
@ -498,6 +543,10 @@ define([
|
|
|
|
realtime: realtime
|
|
|
|
realtime: realtime
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var isNew = false;
|
|
|
|
|
|
|
|
var userDoc = module.realtime.getUserDoc();
|
|
|
|
|
|
|
|
if (userDoc === "" || userDoc === "{}") { isNew = true; }
|
|
|
|
|
|
|
|
|
|
|
|
Cryptpad.removeLoadingScreen();
|
|
|
|
Cryptpad.removeLoadingScreen();
|
|
|
|
setEditable(true);
|
|
|
|
setEditable(true);
|
|
|
|
initializing = false;
|
|
|
|
initializing = false;
|
|
|
|
@ -528,6 +577,9 @@ define([
|
|
|
|
onLocal();
|
|
|
|
onLocal();
|
|
|
|
module.$userNameButton.click();
|
|
|
|
module.$userNameButton.click();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isNew) {
|
|
|
|
|
|
|
|
Cryptpad.selectTemplate('whiteboard', info.realtime, Cryptget);
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
ansuz
8 years ago