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

Merge pull request #2 from npalomba/master

Browse Source 
Added eraser tool
This commit is contained in:
Lospec 2019-04-04 13:45:18 -04:00 committed by GitHub
commit 3a62ba155e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 1166 additions and 938 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
_ext
routes
build
node_modules
node_modules
.idea

6
README.md
View File

@ -21,9 +21,9 @@ Suggestions / Planned features:
- Selections
- New selection tool
- New canvas layer above the drawing layer
- New currentLayer.canvas layer above the drawing layer
- Move when click and drag
- Merge with canvas when click outside
- Merge with currentLayer.canvas when click outside
- Copy/paste
- Add as selection
@ -35,7 +35,7 @@ Suggestions / Planned features:
- Palette option remove unused colors
- Pixel Grid
- Another canvas
- Another currentLayer.canvas
- Must be rescaled each zoom
- Possibly add collaborate function using together.js

26
css/pixel-editor.scss
View File

@ -35,9 +35,9 @@ svg {
outline: 0 !important;
}
#pixel-canvas {
.drawingCanvas {
cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
border: solid 1px #fff;
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
@ -49,11 +49,20 @@ svg {
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
width: 400px;
height: 400px;
display: none;
position: fixed;
display:none;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
}
#checkerboard {
z-index:1;
}
#pixel-canvas {
z-index:2;
background:transparent;
}
#eyedropper-preview {
position: absolute;
width: 45px;
@ -83,7 +92,6 @@ svg {
}
#canvas-view {
background: color(indent-dark);
bottom: 0px;
left: 64px;
right: 48px;
@ -414,19 +422,23 @@ svg {
}
#tools-menu li button#pencil-bigger-button,
#tools-menu li button#zoom-in-button {
#tools-menu li button#zoom-in-button,
#tools-menu li button#eraser-bigger-button{
left: 0;
}
#tools-menu li button#pencil-smaller-button,
#tools-menu li button#zoom-out-button {
#tools-menu li button#zoom-out-button,
#tools-menu li button#eraser-smaller-button{
right: 0;
}
#tools-menu li.selected button#pencil-bigger-button,
#tools-menu li.selected button#pencil-smaller-button,
#tools-menu li.selected button#zoom-in-button,
#tools-menu li.selected button#zoom-out-button {
#tools-menu li.selected button#zoom-out-button,
#tools-menu li.selected button#eraser-bigger-button,
#tools-menu li.selected button#eraser-smaller-button{
display: block;
}

BIN
images/eraser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

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');

48
js/_canvas.js Normal file
View File

@ -0,0 +1,48 @@
/** Handler class for a single canvas (a single layer)
*
* @param width Canvas width
* @param height Canvas height
* @param canvas HTML canvas element
*/
function Canvas(width, height, canvas) {
this.canvasSize = [width, height],
this.canvas = canvas,
this.context = this.canvas.getContext("2d"),
// Initializes the canvas
this.initialize = function() {
var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
if (zoom < 1) zoom = 1;
//resize canvas
this.canvas.width = this.canvasSize[0];
this.canvas.height = this.canvasSize[1];
this.canvas.style.width = (this.canvas.width*zoom)+'px';
this.canvas.style.height = (this.canvas.height*zoom)+'px';
//unhide canvas
this.canvas.style.display = 'block';
//center canvas in window
this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
},
// Resizes canvas
this.resize = function() {
let newWidth = (this.canvas.width * zoom) + 'px';
let newHeight = (this.canvas.height *zoom)+ 'px';
this.canvas.style.width = newWidth;
this.canvas.style.height = newHeight;
},
// Copies the otherCanvas' position and size
this.copyData = function(otherCanvas) {
this.canvas.style.width = otherCanvas.canvas.style.width;
this.canvas.style.height = otherCanvas.canvas.style.height;
this.canvas.style.left = otherCanvas.canvas.style.left;
this.canvas.style.top = otherCanvas.canvas.style.top;
}
}

10
js/_changeZoom.js
View File

@ -1,6 +1,5 @@
function changeZoom (direction, cursorLocation) {
function changeZoom (layer, direction, cursorLocation) {
var oldWidth = canvasSize[0] * zoom;
var oldHeight = canvasSize[1] * zoom;
var newWidth, newHeight;
@ -13,7 +12,7 @@ function changeZoom (direction, cursorLocation) {
newHeight = canvasSize[1] * zoom;
//adjust canvas position
setCanvasOffset(canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
}
//if you want to zoom in
else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){
@ -22,12 +21,11 @@ function changeZoom (direction, cursorLocation) {
newHeight = canvasSize[1] * zoom;
//adjust canvas position
setCanvasOffset(canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
}
//resize canvas
canvas.style.width = (canvas.width*zoom)+'px';
canvas.style.height = (canvas.height*zoom)+'px';
layer.resize();
// adjust brush size
updateCursor();

59
js/_checkerboard.js Normal file
View File

@ -0,0 +1,59 @@
// This script contains all the functions used to manage the checkboard
// Setting current colour (each square has a different colour
var currentColor = firstCheckerBoardColor;
// Saving number of squares filled until now
var nSquaresFilled = 0;
function fillCheckerboard() {
// Getting checkerboard context
var context = checkerBoard.context;
// Cycling through the canvas (using it as a matrix)
for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
nSquaresFilled = 0;
for (var j=0; j<canvasSize[1] / checkerBoardSquareSize; j++) {
var rectX;
var rectY;
// Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize
if (i * checkerBoardSquareSize < canvasSize[0]) {
rectX = i * checkerBoardSquareSize;
}
else {
rectX = canvasSize[0];
}
if (j * checkerBoardSquareSize < canvasSize[1]) {
rectY = j * checkerBoardSquareSize;
}
else {
rectY = canvasSize[1];
}
// Selecting the colour
context.fillStyle = currentColor;
context.fillRect(rectX, rectY, checkerBoardSquareSize, checkerBoardSquareSize);
// Changing colour
changeCheckerboardColor();
nSquaresFilled++;
}
// If the number of filled squares was even, I change colour for the next column
if ((nSquaresFilled % 2) == 0) {
changeCheckerboardColor();
}
}
}
// Simply switches the checkerboard colour
function changeCheckerboardColor(isVertical) {
if (currentColor == firstCheckerBoardColor) {
currentColor = secondCheckerBoardColor;
} else if (currentColor == secondCheckerBoardColor) {
currentColor = firstCheckerBoardColor;
}
}

2
js/_clickedColor.js
View File

@ -9,7 +9,7 @@ function clickedColor (e){
if (selectedColor) selectedColor.classList.remove("selected");
//set current color
context.fillStyle = this.style.backgroundColor;
currentLayer.context.fillStyle = this.style.backgroundColor;
//make color selected
e.target.parentElement.classList.add('selected');

3
js/_colorChanged.js
View File

@ -24,9 +24,6 @@ on('input', 'jscolor-hex-input', function (e) {
//changes all of one color to another after being changed from color picker
function colorChanged(e) {
console.log('colorChanged()');
//get colors
var newColor = hexToRgb(e.target.value);
var oldColor = e.target.oldColor;

6
js/_createColorPalette.js
View File

@ -36,10 +36,10 @@ function createColorPalette(selectedPalette, fillBackground) {
//fill bg with lightest color
if (fillBackground) {
context.fillStyle = lightestColor;
context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.fillStyle = lightestColor;
currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
}
//set as current color
context.fillStyle = darkestColor;
currentLayer.context.fillStyle = darkestColor;
}

2
js/_deleteColor.js
View File

@ -73,7 +73,7 @@ function deleteColor (color) {
//set current color TO LIGHTEST COLOR
lightestColor[1].parentElement.classList.add('selected');
context.fillStyle = '#'+lightestColor[1].jscolor.toString();
currentLayer.context.fillStyle = '#'+lightestColor[1].jscolor.toString();
}
//delete the element

10
js/_drawLine.js
View File

@ -6,11 +6,17 @@ function line(x0,y0,x1,y1) {
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
var breaker = 0;
while (true) {
//set pixel
context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
// If the current tool is the brush
if (currentTool == 'pencil') {
// I fill the rect
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (currentTool == 'eraser') {
// In case I'm using the eraser I must clear the rect
currentLayer.context.clearRect(x0-Math.floor(eraserSize/2), y0-Math.floor(eraserSize/2), eraserSize, eraserSize);
}
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;

37
js/_fill.js
View File

@ -3,9 +3,15 @@ function fill(cursorLocation) {
//changes a pixels color
function colorPixel(tempImage, pixelPos, fillColor) {
//console.log('colorPixel:',pixelPos);
tempImage.data[pixelPos] = fillColor.r;
tempImage.data[pixelPos + 1] = fillColor.g;
tempImage.data[pixelPos + 2] = fillColor.b;
tempImage.data[pixelPos + 3] = 255;
/*
tempImage.data[pixelPos] = fillColor.r;
tempImage.data[pixelPos + 1] = fillColor.g;
tempImage.data[pixelPos + 2] = fillColor.b;
*/
}
//change x y to color value passed from the function and use that as the original color
@ -23,47 +29,45 @@ function fill(cursorLocation) {
new HistoryStateEditCanvas();
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
//console.log('filling at '+ Math.floor(cursorLocation[0]/zoom) + ','+ Math.floor(cursorLocation[1]/zoom));
//temporary image holds the data while we change it
var tempImage = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
//this is an array that holds all of the pixels at the top of the cluster
var topmostPixelsArray = [[Math.floor(cursorLocation[0]/zoom), Math.floor(cursorLocation[1]/zoom)]];
//console.log('topmostPixelsArray:',topmostPixelsArray)
//the offset of the pixel in the temp image data to start with
var startingPosition = (topmostPixelsArray[0][1] * canvasSize[0] + topmostPixelsArray[0][0]) * 4;
//the color of the cluster that is being filled
var clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2]];
//the new color to fill with
var fillColor = hexToRgb(context.fillStyle);
var fillColor = hexToRgb(currentLayer.context.fillStyle);
//if you try to fill with the same color that's already there, exit the function
if (clusterColor[0] == fillColor.r &&
clusterColor[1] == fillColor.g &&
clusterColor[2] == fillColor.b )
return;
//loop until there are no more values left in this array
while (topmostPixelsArray.length) {
var reachLeft, reachRight;
//move the most recent pixel from the array and set it as our current working pixels
var currentPixel = topmostPixelsArray.pop();
//set the values of this pixel to x/y variables just for readability
var x = currentPixel[0];
var y = currentPixel[1];
//this variable holds the index of where the starting values for the current pixel are in the data array
//we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because
//we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because
//each pixel has 4 values, rgba
var pixelPos = (y * canvasSize[0] + x) * 4;
//move up in the image until you reach the top or the pixel you hit was not the right color
while (y-- >= 0 && matchStartColor(tempImage, pixelPos, clusterColor)) {
pixelPos -= canvasSize[0] * 4;
@ -74,7 +78,6 @@ function fill(cursorLocation) {
reachRight = false;
while (y++ < canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
colorPixel(tempImage, pixelPos, fillColor);
if (x > 0) {
if (matchStartColor(tempImage, pixelPos - 4, clusterColor)) {
if (!reachLeft) {
@ -102,6 +105,6 @@ function fill(cursorLocation) {
pixelPos += canvasSize[0] * 4;
}
}
context.putImageData(tempImage, 0, 0);
currentLayer.context.putImageData(tempImage, 0, 0);
//console.log('done filling')
}

30
js/_history.js
View File

@ -5,19 +5,19 @@ const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
//prototype for undoing canvas changes
function HistoryStateEditCanvas () {
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.undo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0);
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0);
this.canvas = currentCanvas;
redoStates.push(this);
}
this.redo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0);
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0);
this.canvas = currentCanvas;
undoStates.push(this);
@ -48,11 +48,11 @@ function HistoryStateAddColor (colorValue) {
//prototype for undoing deleted colors
function HistoryStateDeleteColor (colorValue) {
this.colorValue = colorValue;
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.undo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0);
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0);
addColor(this.colorValue);
@ -61,8 +61,8 @@ function HistoryStateDeleteColor (colorValue) {
}
this.redo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0);
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0);
deleteColor(this.colorValue);
@ -78,11 +78,11 @@ function HistoryStateDeleteColor (colorValue) {
function HistoryStateEditColor (newColorValue, oldColorValue) {
this.newColorValue = newColorValue;
this.oldColorValue = oldColorValue;
this.canvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.undo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0);
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0);
//find new color in palette and change it back to old color
var colors = document.getElementsByClassName('color-button');
@ -99,8 +99,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
}
this.redo = function () {
var currentCanvas = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
context.putImageData(this.canvas, 0, 0);
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0);
//find old color in palette and change it back to new color
var colors = document.getElementsByClassName('color-button');

5
js/_hotkeyListener.js
View File

@ -33,6 +33,11 @@ function KeyPress(e) {
case 53:
changeTool('zoom');
break;
// eraser -6, r
case 54: case 82:
console.log("Pressed r");
changeTool('eraser');
break;
//Z
case 90:
console.log('PRESSED Z ', keyboardEvent.ctrlKey)

2
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: 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);

4
js/_loadImage.js
View File

@ -15,10 +15,10 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
newPixel(this.width, this.height, []);
//draw the image onto the canvas
context.drawImage(img, 0, 0);
currentLayer.context.drawImage(img, 0, 0);
var colorPalette = {};
var imagePixelData = context.getImageData(0,0,this.width, this.height).data;
var imagePixelData = currentLayer.context.getImageData(0,0,this.width, this.height).data;
var imagePixelDataLength = imagePixelData.length;

147
js/_mouseEvents.js
View File

@ -17,7 +17,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
currentTool = 'pan';
else if (mouseEvent.altKey)
currentTool = 'eyedropper';
else if (mouseEvent.target == canvas && currentTool == 'pencil')
else if (mouseEvent.target == currentLayer.canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
new HistoryStateEditCanvas();
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
@ -27,10 +27,14 @@ window.addEventListener("mousedown", function (mouseEvent) {
}
else if (currentTool == 'pencil' && mouseEvent.which == 3) {
currentTool = 'resize-brush';
prevBrushSize=brushSize;
prevBrushSize = brushSize;
}
else if (currentTool == 'eraser' && mouseEvent.which == 3) {
currentTool = 'resize-eraser';
prevEraserSize = eraserSize;
}
if (currentTool == 'eyedropper' && mouseEvent.target == canvas)
if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas)
eyedropperPreview.style.display = 'block';
return false;
@ -45,7 +49,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
if (!documentCreated || dialogueOpen) return;
if (currentTool == 'eyedropper' && mouseEvent.target == canvas) {
if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas) {
var cursorLocation = getCursorPosition(mouseEvent);
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
@ -77,10 +81,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
}
else if (currentTool == 'fill' && mouseEvent.target == canvas) {
else if (currentTool == 'fill' && mouseEvent.target == currentLayer.canvas) {
console.log('filling')
//if you clicked on anything but the canvas, do nothing
if (!mouseEvent.target == canvas) return;
if (!mouseEvent.target == currentLayer.canvas) return;
//get cursor postion
var cursorLocation = getCursorPosition(mouseEvent);
@ -92,9 +96,20 @@ window.addEventListener("mouseup", function (mouseEvent) {
//fill starting at the location
fill(cursorLocation);
}
else if (currentTool == 'zoom' && mouseEvent.target == canvas) {
if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
else if (currentTool == 'zoom' && mouseEvent.target == canvasView) {
let mode;
if (mouseEvent.which == 1){
mode = "in";
}
else if (mouseEvent.which == 3){
mode = "out";
}
changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}
dragging = false;
@ -120,18 +135,18 @@ function draw (mouseEvent) {
if (currentTool == 'pencil') {
//move the brush preview
brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
//hide brush preview outside of canvas / canvas view
if (mouseEvent.target == canvas || mouseEvent.target == canvasView)
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
brushPreview.style.visibility = 'visible';
else
brushPreview.style.visibility = 'hidden';
//draw line to current pixel
if (dragging) {
if (mouseEvent.target == canvas || mouseEvent.target == canvasView) {
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
lastPos = cursorLocation;
}
@ -145,33 +160,42 @@ function draw (mouseEvent) {
if (colorLightness>127) brushPreview.classList.remove('dark');
else brushPreview.classList.add('dark');
}
else if (currentTool == 'pan' && dragging) {
// Decided to write a different implementation in case of differences between the brush and the eraser tool
else if (currentTool == 'eraser') {
// Uses the same preview as the brush
//move the brush preview
brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - eraserSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - eraserSize * zoom / 2 + 'px';
setCanvasOffset(canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
/*
if (
//right
canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - canvasSize[0]*zoom*0.25 - 48 &&
//left
canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
if (
//bottom
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
//top
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
canvas.style.top = canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
*/
//hide brush preview outside of canvas / canvas view
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
brushPreview.style.visibility = 'visible';
else
brushPreview.style.visibility = 'hidden';
//draw line to current pixel
if (dragging) {
if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
lastPos = cursorLocation;
}
}
}
else if (currentTool == 'pan' && dragging) {
// Setting first layer position
setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastPos[1]));
// Copying that position to the other layers
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}
else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == canvas) {
else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
eyedropperPreview.style.display = 'block';
eyedropperPreview.style.left = cursorLocation[0] + canvas.offsetLeft - 30 + 'px';
eyedropperPreview.style.top = cursorLocation[1] + canvas.offsetTop - 30 + 'px';
eyedropperPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
eyedropperPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - 30 + 'px';
var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
@ -180,31 +204,60 @@ function draw (mouseEvent) {
else eyedropperPreview.classList.add('dark');
}
else if (currentTool == 'resize-brush' && dragging) {
//get new brush size based on x distance from original clicking location
var distanceFromClick = cursorLocation[0] - lastPos[0];
//var roundingAmount = 20 - Math.round(distanceFromClick/10);
//this doesnt work in reverse... because... it's not basing it off of the brush size which it should be
var brushSizeChange = Math.round(distanceFromClick/10);
var newBrushSize = prevBrushSize + brushSizeChange;
//set the brush to the new size as long as its bigger than 1
brushSize = Math.max(1,newBrushSize);
//fix offset so the cursor stays centered
brushPreview.style.left = lastPos[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
var newBrushSize = prevBrushSize + brushSizeChange;
updateCursor();
}
//set the brush to the new size as long as its bigger than 1
brushSize = Math.max(1,newBrushSize);
//fix offset so the cursor stays centered
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
updateCursor();
}
else if (currentTool == 'resize-eraser' && dragging) {
//get new brush size based on x distance from original clicking location
var distanceFromClick = cursorLocation[0] - lastPos[0];
//var roundingAmount = 20 - Math.round(distanceFromClick/10);
//this doesnt work in reverse... because... it's not basing it off of the brush size which it should be
var eraserSizeChange = Math.round(distanceFromClick/10);
var newEraserSizeChange = prevEraserSize + eraserSizeChange;
//set the brush to the new size as long as its bigger than 1
eraserSize = Math.max(1,newEraserSizeChange);
//fix offset so the cursor stays centered
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - eraserSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - eraserSize * zoom / 2 + 'px';
updateCursor();
}
}
//mousewheel scrroll
canvasView.addEventListener("wheel", function(mouseEvent){
if (currentTool == 'zoom' || mouseEvent.altKey) {
if (mouseEvent.deltaY < 0) changeZoom('in', getCursorPosition(mouseEvent));
else if (mouseEvent.deltaY > 0) changeZoom('out', getCursorPosition(mouseEvent))
let mode;
if (mouseEvent.deltaY < 0){
mode = 'in';
}
else if (mouseEvent.deltaY > 0) {
mode = 'out';
}
// Changing zoom and position of the first layer
changeZoom(layers[0], mode, getCursorPosition(mouseEvent))
for (let i=1; i<layers.length; i++) {
// Copying first layer's data into the other layers
layers[i].copyData(layers[0]);
}
}
});

36
js/_newPixel.js
View File

@ -1,26 +1,15 @@
function newPixel (width, height, palette) {
canvasSize = [width,height];
currentLayer = new Canvas(width, height, canvas);
currentLayer.initialize();
var maxHorizontalZoom = Math.floor(window.innerWidth/canvasSize[0]*0.75);
var maxVerticalZoom = Math.floor(window.innerHeight/canvasSize[1]*0.75);
checkerBoard = new Canvas(width, height, checkerBoardCanvas);
checkerBoard.initialize();
zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
if (zoom < 1) zoom = 1;
//resize canvas
canvas.width = canvasSize[0];
canvas.height = canvasSize[1];
canvas.style.width = (canvas.width*zoom)+'px';
canvas.style.height = (canvas.height*zoom)+'px';
//unhide canvas
canvas.style.display = 'block';
//center canvas in window
canvas.style.left = 64+canvasView.clientWidth/2-(canvasSize[0]*zoom/2)+'px';
canvas.style.top = 48+canvasView.clientHeight/2-(canvasSize[1]*zoom/2)+'px';
canvasSize = currentLayer.canvasSize;
layers.push(currentLayer);
layers.push(checkerBoard);
//remove current palette
colors = document.getElementsByClassName('color-button');
@ -56,13 +45,16 @@ function newPixel (width, height, palette) {
addColor(defaultBackgroundColor);
//fill background of canvas with bg color
context.fillStyle = '#'+defaultBackgroundColor;
context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
fillCheckerboard();
/*
currentLayer.context.fillStyle = '#'+defaultBackgroundColor;
currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
console.log('#'+defaultBackgroundColor)
*/
//set current drawing color as foreground color
context.fillStyle = '#'+defaultForegroundColor;
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
selectedPalette = 'none';
}

4
js/_replaceAllOfColor.js
View File

@ -7,7 +7,7 @@ function replaceAllOfColor (oldColor, newColor) {
if (typeof newColor === 'string') newColor = hexToRgb(newColor);
//create temporary image from canvas to search through
var tempImage = context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
//loop through all pixels
for (var i=0;i<tempImage.data.length;i+=4) {
@ -21,5 +21,5 @@ function replaceAllOfColor (oldColor, newColor) {
}
//put temp image back onto canvas
context.putImageData(tempImage,0,0);
currentLayer.context.putImageData(tempImage,0,0);
}

19
js/_setCanvasOffset.js
View File

@ -1,24 +1,23 @@
function setCanvasOffset (offsetLeft, offsetTop) {
function setCanvasOffset (canvas, offsetLeft, offsetTop) {
//horizontal offset
var minXOffset = -canvasSize[0]*zoom+ 164;
var maxXOffset = window.innerWidth - 148
var maxXOffset = window.innerWidth - 148;
if (offsetLeft < minXOffset)
canvas.style.left = minXOffset +'px';
else if (offsetLeft > maxXOffset)
canvas.style.left = maxXOffset +'px';
else if (offsetLeft > maxXOffset)
canvas.style.left = maxXOffset +'px';
else
canvas.style.left = offsetLeft +'px';
canvas.style.left = offsetLeft +'px';
//vertical offset
var minYOffset = -canvasSize[1]*zoom + 164;
var maxYOffset = window.innerHeight-100;
if (offsetTop < minYOffset)
canvas.style.top = minYOffset +'px';
else if (offsetTop > maxYOffset)
canvas.style.top = maxYOffset +'px';
canvas.style.top = minYOffset +'px';
else if (offsetTop > maxYOffset)
canvas.style.top = maxYOffset +'px';
else
canvas.style.top = offsetTop +'px';
canvas.style.top = offsetTop +'px';
}

49
js/_toolButtons.js
View File

@ -1,19 +1,36 @@
//pencil
on('click',"pencil-button", function(){
changeTool('pencil');
}, false);
changeTool('pencil');
}, false);
//pencil bigger
on('click',"pencil-bigger-button", function(){
brushSize++;
updateCursor();
}, false);
brushSize++;
updateCursor();
}, false);
//pencil smaller
on('click',"pencil-smaller-button", function(e){
if(brushSize > 1) brushSize--;
updateCursor();
}, false);
on('click',"pencil-smaller-button", function(){
if(brushSize > 1) brushSize--;
updateCursor();
}, false);
//eraser
on('click',"eraser-button", function(){
changeTool('eraser');
}, false);
//eraser bigger
on('click',"eraser-bigger-button", function(){
eraserSize++;
updateCursor();
}, false);
//eraser smaller
on('click',"eraser-smaller-button", function(e){
if(eraserSize > 1) eraserSize--;
updateCursor();
}, false);
//fill
on('click',"fill-button", function(){
@ -37,11 +54,19 @@ on('click',"zoom-button", function(){
//zoom in button
on('click',"zoom-in-button", function(){
//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
changeZoom('in',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
changeZoom(layers[0],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}, false);
//zoom out button
on('click',"zoom-out-button", function(){
changeZoom('out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
changeZoom(layers[0],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}, false);

10
js/_updateCursor.js
View File

@ -6,7 +6,12 @@ function updateCursor () {
brushPreview.style.display = 'block';
brushPreview.style.width = brushSize * zoom + 'px';
brushPreview.style.height = brushSize * zoom + 'px';
} else
} else if (currentTool == 'eraser' || currentTool == 'resize-eraser') {
canvasView.style.cursor = 'crosshair';
brushPreview.style.display = 'block';
brushPreview.style.width = eraserSize * zoom + 'px';
brushPreview.style.height = eraserSize * zoom + 'px';
} else
brushPreview.style.display = 'none';
if (currentTool == 'eyedropper') {
@ -26,7 +31,6 @@ function updateCursor () {
if (currentTool == 'zoom')
canvasView.style.cursor = "url('/pixel-editor/zoom-in.png'), auto";
if (currentTool == 'resize-brush')
if (currentTool == 'resize-brush' || currentTool == 'resize-eraser')
canvasView.style.cursor = 'default';
}

21
js/_variables.js
View File

@ -2,15 +2,25 @@
var canvasSize,zoom;
var dragging = false;
var lastPos = [0,0];
var canvasPosition;
var currentTool = 'pencil';
var currentToolTemp = 'pencil';
var brushSize = 1;
var eraserSize = 1;
var prevBrushSize = 1;
var menuOpen = false;
var prevEraserSize = 1;
var dialogueOpen = false;
var documentCreated = false;
// Checkerboard management
// Checkerboard color 1
var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
// Checkerboard color 2
var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
// Square size for the checkerboard
var checkerBoardSquareSize = 16;
// Checkerboard canvas
var checkerBoardCanvas = document.getElementById("checkerboard");
//common elements
var brushPreview = document.getElementById("brush-preview");
var eyedropperPreview = document.getElementById("eyedropper-preview");
@ -19,7 +29,12 @@ var colors = document.getElementsByClassName("color-button");
var colorsMenu = document.getElementById("colors-menu");
var popUpContainer = document.getElementById("pop-up-container");
//html canvas
// main canvas
var canvas = document.getElementById("pixel-canvas");
var context = canvas.getContext("2d");
// Layers
var layers = [];
// Currently selected layer
var currentLayer;

4
js/pixel-editor.js
View File

@ -40,7 +40,9 @@
//=include _fill.js
//=include _history.js
//=include _deleteColor.js
//=include _replaceAllOfColor.js
//=include _replaceAllOfColor.js
//=include _checkerboard.js
//=include _canvas.js
/**load file**/

1543
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -16,9 +16,9 @@
"gulp-include": "^2.3.1",
"handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git",
"hbs": "^4.0.3",
"opn": "^6.0.0",
"sass": "^1.17.3",
"hbs-register-helpers": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-helpers.git",
"hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git"
"hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git",
"opn": "^6.0.0",
"sass": "^1.17.3"
}
}

11
views/pixel-editor.hbs
View File

@ -33,6 +33,7 @@
<img src="/pixel-editor/pan-held.png" />
<img src="/pixel-editor/pencil.png" />
<img src="/pixel-editor/zoom-in.png" />
<img src = "/pixel-editor/eraser.png"/>
</div>
<ul id="main-menu">
<li class="logo">Lospec Pixel Editor</li>
@ -77,6 +78,11 @@
<button title="Zoom In" id="zoom-in-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Zoom Out" id="zoom-out-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
<li class = "expanded">
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button>
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
</ul>
<ul id="colors-menu">
@ -92,7 +98,8 @@
<div id="brush-preview"></div>
<div id="canvas-view">
<canvas id="pixel-canvas"></canvas>
<canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
<canvas id="checkerboard" class = "drawingCanvas"></canvas>
</div>
<div id="canvas-view-shadow"></div>
@ -102,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>