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

Fixed bug in canvas dragging, must fix the one on resizing.

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

5
js/_canvas.js
View File

@ -1,7 +1,7 @@
function Canvas(width, height, canvas) {
this.canvasSize = [width, height],
this.canvas = canvas,
this.context = canvas.getContext("2d"),
this.context = this.canvas.getContext("2d"),
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);
@ -25,11 +25,8 @@ function Canvas(width, height, 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;
this.width = newWidth;
this.height = newHeight;
}
}

11
js/_changeZoom.js
View File

@ -1,5 +1,5 @@
function changeZoom (direction, cursorLocation) {
function changeZoom (layer, direction, cursorLocation) {
var oldWidth = canvasSize[0] * zoom;
var oldHeight = canvasSize[1] * zoom;
@ -13,7 +13,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 +22,13 @@ 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, 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';
for (let i=0; i<layers.length; i++) {
layer.resize();
}
// adjust brush size
updateCursor();

31
js/_mouseEvents.js
View File

@ -94,8 +94,17 @@ window.addEventListener("mouseup", function (mouseEvent) {
fill(cursorLocation);
}
else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
let mode;
if (mouseEvent.which == 1){
mode = "in";
}
else if (mouseEvent.which == 3){
mode = "out";
}
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
}
}
dragging = false;
@ -168,8 +177,9 @@ function draw (mouseEvent) {
}
else if (currentTool == 'pan' && dragging) {
setCanvasOffset(currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
for (let i=0; i<layers.length; i++) {
setCanvasOffset(layers[i].canvas, layers[i].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[i].canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
}
/*
if (
//right
@ -224,8 +234,17 @@ function draw (mouseEvent) {
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';
}
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
}
}
});

6
js/_newPixel.js
View File

@ -3,10 +3,14 @@ function newPixel (width, height, palette) {
currentLayer = new Canvas(width, height, canvas);
currentLayer.initialize();
checkerBoard = new Canvas(width, height, checkerBoard);
checkerBoard = new Canvas(width, height, checkerBoardCanvas);
checkerBoard.initialize();
canvasSize = currentLayer.canvasSize;
layers.push(currentLayer);
layers.push(checkerBoard);
//remove current palette
colors = document.getElementsByClassName('color-button');
while (colors.length > 0) {

16
js/_setCanvasOffset.js
View File

@ -1,4 +1,4 @@
function setCanvasOffset (offsetLeft, offsetTop) {
function setCanvasOffset (canvas, offsetLeft, offsetTop) {
//horizontal offset
var minXOffset = -canvasSize[0]*zoom+ 164;
@ -6,19 +6,19 @@ function setCanvasOffset (offsetLeft, offsetTop) {
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';
}

10
js/_toolButtons.js
View File

@ -54,11 +54,15 @@ 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]);
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
}
}, false);
//zoom out button
on('click',"zoom-out-button", function(){
changeZoom('out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
}
}, false);

1
js/_updateCursor.js
View File

@ -12,7 +12,6 @@ function updateCursor () {
brushPreview.style.display = 'block';
brushPreview.style.width = eraserSize * zoom + 'px';
brushPreview.style.height = eraserSize * zoom + 'px';
currentLayer.context.fillStyle = 'rgba(255, 0, 0, 0)';
} else
brushPreview.style.display = 'none';

2
js/_variables.js
View File

@ -17,7 +17,7 @@ var documentCreated = false;
var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
var checkerBoardSquareSize = 16;
var checkerBoard = document.getElementById("checkerboard");
var checkerBoardCanvas = document.getElementById("checkerboard");
//common elements
var brushPreview = document.getElementById("brush-preview");