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 #54

Browse Source
This commit is contained in:
unsettledgames 2021-07-25 22:53:26 +02:00
parent 2ab45f0f66
commit 3361048f24
3 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
js/_changeZoom.js
View File

@ -12,21 +12,36 @@ function changeZoom (direction, cursorLocation) {
//change zoom level
//if you want to zoom out, and the zoom isnt already at the smallest level
if (direction == 'out' && zoom > 1) {
if (direction == 'out' && zoom > MIN_ZOOM_LEVEL) {
zoomed = true;
zoom -= Math.ceil(zoom / 10);
if (zoom > 2)
zoom -= Math.ceil(zoom / 10);
else
zoom -= Math.ceil(zoom * 2 / 10) / 2;
newWidth = canvasSize[0] * zoom;
newHeight = canvasSize[1] * zoom;
//adjust canvas position
layers[0].setCanvasOffset(
layers[0].canvas.offsetLeft + (oldWidth - newWidth) * cursorLocation[0]/oldWidth,
layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldWidth);
layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldHeight);
}
//if you want to zoom in
else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
zoomed = true;
zoom += Math.ceil(zoom/10);
if (zoom > 2)
zoom += Math.ceil(zoom/10);
else {
if (zoom + zoom/10 > 2) {
zoom += Math.ceil(zoom/10);
zoom = Math.ceil(zoom);
}
else {
zoom += Math.ceil(zoom * 2 / 10) / 2;
}
}
newWidth = canvasSize[0] * zoom;
newHeight = canvasSize[1] * zoom;
@ -47,11 +62,11 @@ function changeZoom (direction, cursorLocation) {
disablePixelGrid();
else if (zoom >= 20 && direction == 'in') {
enablePixelGrid();
repaintPixelGrid(zoom - prevZoom);
repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else if ((prevZoom >= 20 && direction == 'out')) {
else if (prevZoom >= 20 && direction == 'out') {
enablePixelGrid();
repaintPixelGrid(zoom - prevZoom);
repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else {
enablePixelGrid();

4
js/_consts.js
View File

@ -4,4 +4,6 @@ const MAX_Z_INDEX = 5000;
// Index of the first layer the user can use in the layers array
const firstUserLayerIndex = 2;
// Number of layers that are only used by the editor
const nAppLayers = 3;
const nAppLayers = 3;
const MIN_ZOOM_LEVEL = 0.5;

11
js/_pixelGrid.js
View File

@ -1,15 +1,15 @@
// REFACTOR: inherit from Layer, override init method (call super as well)
// OPTIMIZABLE: only draw the grid for the current viewport. The grid should be refreshed
// everytime the user pans the view
// Start colour of the pixel grid (can be changed in the preferences)
let pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels
let lineDistance = 12;
let lineDistance = 11;
// The grid is not visible by default
let pixelGridVisible = false;
// The grid is enabled, but is disabled in order to save performance with big sprites
let pixelGridEnabled = true;
// Used to edit lineDistance depending on the zoom level
let zoomFactor = 1;
function disablePixelGrid() {
pixelGridEnabled = false;
@ -23,7 +23,6 @@ function enablePixelGrid() {
function repaintPixelGrid(factor) {
lineDistance += factor;
console.log("Line distance: " + lineDistance + " zoom: " + zoom);
fillPixelGrid();
}
@ -67,11 +66,11 @@ function fillPixelGrid() {
pixelGrid.canvas.width = originalSize[0] * Math.round(lineDistance);
pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
context.strokeStyle = settings.pixelGridColour;
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
context.strokeStyle = settings.pixelGridColour;
context.beginPath();
context.moveTo(i * Math.round(lineDistance) + 0.5, 0);
context.lineTo(i * Math.round(lineDistance) + 0.5, originalSize[1] * Math.round(lineDistance));