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

Moved setCanvasOffset to layer

Browse Source
This commit is contained in:
unsettledgames 2020-07-21 22:30:46 +02:00
parent 466eb0580c
commit 81cc4c8900
5 changed files with 28 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/_addColor.js
View File

@ -4,7 +4,6 @@ let currentPalette = [];
//input hex color string
//returns list item element
function addColor (newColor) {
//add # at beginning if not present
if (newColor.charAt(0) != '#')
newColor = '#' + newColor;
@ -19,13 +18,6 @@ function addColor (newColor) {
button.addEventListener('mouseup', clickedColor);
listItem.appendChild(button);
/*
//create input to hold color value
var colorValue = document.createElement("input");
colorValue.classList.add("color-value");
listItem.appendChild(colorValue);
*/
//insert new listItem element at the end of the colors menu (right before add button)
colorsMenu.insertBefore(listItem, colorsMenu.children[colorsMenu.children.length-1]);

4
js/_changeZoom.js
View File

@ -11,7 +11,7 @@ function changeZoom (layer, direction, cursorLocation) {
newHeight = canvasSize[1] * zoom;
//adjust canvas position
setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
layer.setCanvasOffset(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){
@ -20,7 +20,7 @@ function changeZoom (layer, direction, cursorLocation) {
newHeight = canvasSize[1] * zoom;
//adjust canvas position
setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
layer.setCanvasOffset(layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight));
}
//resize canvas

20
js/_getCursorPosition.js
View File

@ -17,23 +17,3 @@ function getCursorPosition(e) {
return [x,y];
}
//get cursor position relative to canvas
function getCursorPositionRelative(e, layer) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= layer.canvas.offsetLeft;
y -= layer.canvas.offsetTop;
return [x,y];
}

25
js/_layer.js
View File

@ -160,6 +160,31 @@ class Layer {
this.canvas.style.width = newWidth;
this.canvas.style.height = newHeight;
}
setCanvasOffset (offsetLeft, offsetTop) {
//horizontal offset
var minXOffset = -this.canvasSize[0] * zoom + 164;
var maxXOffset = window.innerWidth - 148;
if (offsetLeft < minXOffset)
this.canvas.style.left = minXOffset +'px';
else if (offsetLeft > maxXOffset)
this.canvas.style.left = maxXOffset +'px';
else
this.canvas.style.left = offsetLeft +'px';
//vertical offset
var minYOffset = -this.canvasSize[1] * zoom + 164;
var maxYOffset = window.innerHeight - 100;
if (offsetTop < minYOffset)
this.canvas.style.top = minYOffset +'px';
else if (offsetTop > maxYOffset)
this.canvas.style.top = maxYOffset +'px';
else
this.canvas.style.top = offsetTop +'px';
}
// Copies the otherCanvas' position and size
copyData(otherCanvas) {
this.canvas.style.width = otherCanvas.canvas.style.width;

23
js/_setCanvasOffset.js
View File

@ -1,23 +0,0 @@
function setCanvasOffset (canvas, offsetLeft, offsetTop) {
//horizontal offset
var minXOffset = -canvasSize[0]*zoom+ 164;
var maxXOffset = window.innerWidth - 148;
if (offsetLeft < minXOffset)
canvas.style.left = minXOffset +'px';
else if (offsetLeft > maxXOffset)
canvas.style.left = maxXOffset +'px';
else
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';
else
canvas.style.top = offsetTop +'px';
}