web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix the color picker in Chromium 53 and improve the cursor

Browse Source
This commit is contained in:
yflory 2017-04-06 12:38:11 +02:00
parent 5c292fb1fa
commit 84029ac2d7
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
www/whiteboard/index.html
View File

@ -69,6 +69,13 @@
#color-picker { #color-picker {
display: block; display: block;
} }
#pickers {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
z-index: -5;
}
</style> </style>
</head> </head>
<body> <body>
@ -94,6 +101,6 @@
</div> </div>
</div> </div>
<div id="cursors" style="display: none; background: white; text-align: center;"></div> <div id="cursors" style="display: none; background: white; text-align: center;"></div>
<div id="pickers" style="display: none;"></div> <div id="pickers"></div>
</body> </body>
</html> </html>

34
www/whiteboard/main.js
View File

@ -53,25 +53,36 @@ define([
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;
$cursors.html('<canvas width="'+w+'" height="'+w+'"></canvas>'); var size = w > 30 ? w : w+30;
$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];
var context = ccanvas.getContext('2d'); var ctx = ccanvas.getContext('2d');
var centerX = w / 2; var centerX = size / 2;
var centerY = w / 2; var centerY = size / 2;
var radius = w/2; var radius = w/2;
context.beginPath(); ctx.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = c; ctx.fillStyle = c;
context.fill(); 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.lineWidth = w/2;
//context.strokeStyle = '#000000'; //context.strokeStyle = '#000000';
//context.stroke(); //context.stroke();
var img = ccanvas.toDataURL("image/png"); 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 () { var updateBrushWidth = function () {
@ -93,7 +104,8 @@ define([
value: '#FFFFFF', value: '#FFFFFF',
}) })
.css({ .css({
display: 'none', visibility: 'hidden'
//display: 'none',
}) })
.on('change', function () { .on('change', function () {
var color = this.value; var color = this.value;
@ -213,7 +225,7 @@ define([
setColor(c); setColor(c);
}) })
// FIXME double click doesn't seem to work in chromium currently // FIXME double click doesn't seem to work in chromium currently
.dblclick(function (e) { .on('dblclick', function (e) {
e.preventDefault(); e.preventDefault();
pickColor(rgb2hex($color.css('background-color')), function (c) { pickColor(rgb2hex($color.css('background-color')), function (c) {
$color.css({ $color.css({