From 84029ac2d78d1c705da518ddd67310678da904d6 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 6 Apr 2017 12:38:11 +0200 Subject: [PATCH] Fix the color picker in Chromium 53 and improve the cursor --- www/whiteboard/index.html | 9 ++++++++- www/whiteboard/main.js | 34 +++++++++++++++++++++++----------- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html index 29df86e77..7f624a0ee 100644 --- a/www/whiteboard/index.html +++ b/www/whiteboard/index.html @@ -69,6 +69,13 @@ #color-picker { display: block; } + #pickers { + visibility: hidden; + position: absolute; + width: 0; + height: 0; + z-index: -5; + } @@ -94,6 +101,6 @@ - +
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js index 97d25bfaa..5509f5f9b 100644 --- a/www/whiteboard/main.js +++ b/www/whiteboard/main.js @@ -53,25 +53,36 @@ define([ var createCursor = function () { var w = canvas.freeDrawingBrush.width; var c = canvas.freeDrawingBrush.color; - $cursors.html(''); + var size = w > 30 ? w : w+30; + $cursors.html(''); var $ccanvas = $cursors.find('canvas'); var ccanvas = $ccanvas[0]; - var context = ccanvas.getContext('2d'); - var centerX = w / 2; - var centerY = w / 2; + var ctx = ccanvas.getContext('2d'); + var centerX = size / 2; + var centerY = size / 2; var radius = w/2; - context.beginPath(); - context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); - context.fillStyle = c; - context.fill(); + ctx.beginPath(); + ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); + ctx.fillStyle = c; + ctx.fill(); + ctx.lineWidth = 0; + + ctx.beginPath(); + ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10); + ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10); + ctx.moveTo(0, size/2); ctx.lineTo(10, size/2); + ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2); + ctx.strokeStyle = '#000000'; + ctx.stroke(); + //context.lineWidth = w/2; //context.strokeStyle = '#000000'; //context.stroke(); var img = ccanvas.toDataURL("image/png"); - canvas.freeDrawingCursor = 'url('+img+') '+w/2+' '+w/2+', crosshair'; + canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair'; }; var updateBrushWidth = function () { @@ -93,7 +104,8 @@ define([ value: '#FFFFFF', }) .css({ - display: 'none', + visibility: 'hidden' + //display: 'none', }) .on('change', function () { var color = this.value; @@ -213,7 +225,7 @@ define([ setColor(c); }) // FIXME double click doesn't seem to work in chromium currently - .dblclick(function (e) { + .on('dblclick', function (e) { e.preventDefault(); pickColor(rgb2hex($color.css('background-color')), function (c) { $color.css({