infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix the color picker in Chromium 53 and improve the cursor

pull/1/head
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 {
display: block;
}
#pickers {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
z-index: -5;
}
</style>
</head>
<body>
@ -94,6 +101,6 @@
</div>
</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>
</html>

34
www/whiteboard/main.js
View File

@ -53,25 +53,36 @@ define([
var createCursor = function () {
var w = canvas.freeDrawingBrush.width;
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 = $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({