From d5e69653c0a5dfff6fdd69d5a588556dfc36d4f0 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 10 Apr 2017 17:03:50 +0200 Subject: [PATCH] Select opacity in draw mode in the canvas app --- customize.dist/translations/messages.fr.js | 2 + customize.dist/translations/messages.js | 2 + www/whiteboard/index.html | 3 +- www/whiteboard/main.js | 48 ++++++++++++++-------- www/whiteboard/whiteboard.css | 3 +- www/whiteboard/whiteboard.less | 2 +- 6 files changed, 39 insertions(+), 21 deletions(-) diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 78b1b067a..6d8b3899a 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -154,6 +154,8 @@ define(function () { out.canvas_delete = "Supprimer la sélection"; out.canvas_disable = "Désactiver le dessin"; out.canvas_enable = "Activer le dessin"; + out.canvas_width = "Épaisseur"; + out.canvas_opacity = "Opacité"; // File manager diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 607a9ff4c..66f771033 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -156,6 +156,8 @@ define(function () { out.canvas_delete = "Delete selection"; out.canvas_disable = "Disable draw"; out.canvas_enable = "Enable draw"; + out.canvas_width = "Width"; + out.canvas_opacity = "Opacity"; // File manager diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html index 4bdeb7e77..d9496c344 100644 --- a/www/whiteboard/index.html +++ b/www/whiteboard/index.html @@ -24,7 +24,8 @@ - + +
 
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js index b79dd0f24..d5523104c 100644 --- a/www/whiteboard/main.js +++ b/www/whiteboard/main.js @@ -12,13 +12,14 @@ define([ '/bower_components/chainpad-json-validator/json-ot.js', '/common/cryptpad-common.js', '/common/cryptget.js', + '/whiteboard/colors.js', '/common/visible.js', '/common/notify.js', '/customize/application_config.js', '/bower_components/secure-fabric.js/dist/fabric.min.js', '/bower_components/jquery/dist/jquery.min.js', '/bower_components/file-saver/FileSaver.min.js', -], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Visible, Notify, AppConfig) { +], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, Visible, Notify, AppConfig) { var saveAs = window.saveAs; var Messages = Cryptpad.Messages; @@ -50,14 +51,21 @@ define([ var $cursors = $('#cursors'); var $deleteButton = $('#delete'); + var brush = { + color: '#000000', + opacity: 1 + }; + var $toggle = $('#toggleDraw'); var $width = $('#width'); var $widthLabel = $('label[for="width"]'); - + var $opacity = $('#opacity'); + var $opacityLabel = $('label[for="opacity"]'); +window.canvas = canvas; var createCursor = function () { var w = canvas.freeDrawingBrush.width; var c = canvas.freeDrawingBrush.color; - var size = w > 30 ? w : w+30; + var size = w > 30 ? w+2 : w+32; $cursors.html(''); var $ccanvas = $cursors.find('canvas'); var ccanvas = $ccanvas[0]; @@ -71,7 +79,9 @@ define([ ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = c; ctx.fill(); - ctx.lineWidth = 0; + ctx.lineWidth = 1; + ctx.strokeStyle = brush.color; + ctx.stroke(); ctx.beginPath(); ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10); @@ -81,9 +91,6 @@ define([ ctx.strokeStyle = '#000000'; ctx.stroke(); - //context.lineWidth = w/2; - //context.strokeStyle = '#000000'; - //context.stroke(); var img = ccanvas.toDataURL("image/png"); var $img = $('', { @@ -104,6 +111,17 @@ define([ $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 $picker = $('', { type: 'color', @@ -122,21 +140,15 @@ define([ }; 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({ 'color': c, }); 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 || [ 'red', 'blue', 'green', 'white', 'black', 'purple', @@ -255,12 +267,12 @@ define([ 'background-color': color, }) .click(function () { - var c = rgb2hex($color.css('background-color')); + var c = Colors.rgb2hex($color.css('background-color')); setColor(c); }) .on('dblclick', function (e) { e.preventDefault(); - pickColor(rgb2hex($color.css('background-color')), function (c) { + pickColor(Colors.rgb2hex($color.css('background-color')), function (c) { $color.css({ 'background-color': c, }); diff --git a/www/whiteboard/whiteboard.css b/www/whiteboard/whiteboard.css index 93dc14f5c..a0619360b 100644 --- a/www/whiteboard/whiteboard.css +++ b/www/whiteboard/whiteboard.css @@ -33,7 +33,8 @@ body { line-height: 100px; padding-bottom: 5px; } -#controls #width { +#controls #width, +#controls #opacity { position: relative; vertical-align: middle; } diff --git a/www/whiteboard/whiteboard.less b/www/whiteboard/whiteboard.less index 0b13c07bf..81c7e0bfe 100644 --- a/www/whiteboard/whiteboard.less +++ b/www/whiteboard/whiteboard.less @@ -42,7 +42,7 @@ body { line-height: 100px; padding-bottom: 5px; - #width { + #width, #opacity { .middle; } #clear, #delete, #toggleDraw {