mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Solved bug that made the colour picker appear in the canvas.

Browse Source 
Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
This commit is contained in:
npalomba 2019-03-31 19:53:39 +02:00
parent 6a973192da
commit 8f4f4c2478
5 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/pixel-editor.scss
View File

@ -35,7 +35,7 @@ svg {
outline: 0 !important;
}
canvas {
.drawingCanvas {
cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
border: solid 1px #fff;

1
js/_addColorButton.js
View File

@ -52,6 +52,7 @@ on('click', 'add-color-button', function(){
//show color picker
addedColor.firstElementChild.jscolor.show();
console.log("showing picker");
//hide edit button
addedColor.lastChild.classList.add('hidden');

18
js/_jscolor.js
View File

@ -547,7 +547,7 @@ var jsc = {
//console.log(e.target,'=====================================')
//if they clicked on the delete button [lospec]
if (e.target.className == 'delete-color-button') {
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: canvas.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryStateDeleteColor(jsc.picker.owner.toString());
deleteColor(jsc.picker.owner.styleElement);
@ -784,15 +784,15 @@ var jsc = {
// Canvas implementation for modern browsers
var canvas = document.createElement('canvas');
var ctx = currentLayer.canvas.getContext('2d');
var ctx = canvas.getContext('2d');
var drawFunc = function (width, height, type) {
currentLayer.canvas.width = width;
currentLayer.canvas.height = height;
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
var hGrad = ctx.createLinearGradient(0, 0, currentLayer.canvas.width, 0);
var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
hGrad.addColorStop(0 / 6, '#F00');
hGrad.addColorStop(1 / 6, '#FF0');
hGrad.addColorStop(2 / 6, '#0F0');
@ -802,9 +802,9 @@ var jsc = {
hGrad.addColorStop(6 / 6, '#F00');
ctx.fillStyle = hGrad;
ctx.fillRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
var vGrad = ctx.createLinearGradient(0, 0, 0, currentLayer.canvas.height);
var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
switch (type.toLowerCase()) {
case 's':
vGrad.addColorStop(0, 'rgba(255,255,255,0)');
@ -816,7 +816,7 @@ var jsc = {
break;
}
ctx.fillStyle = vGrad;
ctx.fillRect(0, 0, currentLayer.canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
paletteObj.elm = canvas;

2
js/_mouseEvents.js
View File

@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
//fill starting at the location
fill(cursorLocation);
}
else if (currentTool == 'zoom') {
else if (currentTool == 'zoom' && mouseEvent.target == canvasView) {
let mode;
if (mouseEvent.which == 1){
mode = "in";

6
views/pixel-editor.hbs
View File

@ -98,8 +98,8 @@
<div id="brush-preview"></div>
<div id="canvas-view">
<canvas id="pixel-canvas"></canvas>
<canvas id="checkerboard"></canvas>
<canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
<canvas id="checkerboard" class = "drawingCanvas"></canvas>
</div>
<div id="canvas-view-shadow"></div>
@ -109,9 +109,7 @@
<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif"/>
<canvas id="load-palette-canvas-holder"></canvas>
</div>
<div class="jscolor-picker-bottom">
<span>#</span><input type="text" id="jscolor-hex-input"/>
<div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14" height="12" }}</div>