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

Added back zooming with wheel, implemented zooming with + and -

Browse Source
This commit is contained in:
Nicola 2022-10-25 13:40:34 +02:00
parent 574cf23563
commit 1d754f4852
3 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/_general.scss
View File

@ -2,6 +2,7 @@
body {
background: darken($basecolor, 6%);
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #fff;
@ -9,6 +10,7 @@ body {
width: 100%;
height: 100%;
overflow: hidden;
user-select:none;
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;

15
js/Input.js
View File

@ -39,8 +39,10 @@ const Input = (() => {
}
function getCursorPosition(e) {
var x;
var y;
if (!currFile.currentLayer)
return [-1,-1];
let x;
let y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
@ -82,8 +84,15 @@ const Input = (() => {
}
else if (!Dialogue.isOpen()){
switch (keyboardEvent.keyCode) {
// + and -
case 43, 187:
Events.emit("zoomin", undefined, 'in');
break;
case 45, 189:
Events.emit("zoomout", undefined, 'out');
break;
//pencil tool - 1, b
case 49: case 66:
case 98: case 66:
Events.emit("tool-shortcut", "brush");
break;
// copy tool c

33
js/tools/ZoomTool.js
View File

@ -1,3 +1,5 @@
// TODO: make this similar to the rect, press once to zoom in, press twice to zoomout
class ZoomTool extends ResizableTool {
constructor (name, options, switchFunc) {
super(name, options, switchFunc);
@ -5,14 +7,32 @@ class ZoomTool extends ResizableTool {
Events.on('click', this.mainButton, switchFunc, this);
Events.on('click', this.biggerButton, this.setZoomIn.bind(this));
Events.on('click', this.smallerButton, this.setZoomOut.bind(this));
Events.on('mousemove', window, this.setMousePos.bind(this));
Events.onCustom('zoomin', this.zoom.bind(this));
Events.onCustom('zoomout', this.zoom.bind(this));
this.mode = 'in';
this.currMousePos = [-1, -1];
}
onStart(mousePos, target) {
if (target.className != 'drawingCanvas')
return;
this.zoom(mousePos, this.mode);
}
onMouseWheel(mousePos, mode) {
this.zoom(mousePos, mode);
}
zoom(mousePos, mode) {
if (mousePos[0] == undefined) {
mode = mousePos[1];
mousePos = this.currMousePos;
}
// Computing current width and height
let oldWidth = currFile.canvasSize[0] * currFile.zoom;
let oldHeight = currFile.canvasSize[1] * currFile.zoom;
@ -21,12 +41,12 @@ class ZoomTool extends ResizableTool {
//change zoom level
//if you want to zoom out, and the zoom isnt already at the smallest level
if (this.mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
if (mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
zoomed = true;
this.zoomOut(oldWidth, oldHeight, mousePos);
}
//if you want to zoom in
else if (this.mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
else if (mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
zoomed = true;
this.zoomIn(oldWidth, oldHeight, mousePos);
}
@ -40,11 +60,11 @@ class ZoomTool extends ResizableTool {
if (zoomed) {
if (currFile.zoom <= 7)
currFile.pixelGrid.disablePixelGrid();
else if (currFile.zoom >= 20 && this.mode == 'in') {
else if (currFile.zoom >= 20 && mode == 'in') {
currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
}
else if (prevZoom >= 20 && this.mode == 'out') {
else if (prevZoom >= 20 && mode == 'out') {
currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
}
@ -109,4 +129,9 @@ class ZoomTool extends ResizableTool {
setZoomOut() {
this.mode = 'out';
}
setMousePos(event) {
if (this && this.currMousePos)
this.currMousePos = Input.getCursorPosition(event);
}
}