mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added back ZoomTool

This commit is contained in:
Nicola 2022-10-25 12:55:27 +02:00
parent 5d55425e83
commit 574cf23563
3 changed files with 78 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/ToolManager.js
View File

@ -11,7 +11,7 @@ const ToolManager = (() => {
tools["eyedropper"] = new EyeDropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);
tools["pan"] = new PanTool("pan", {type: 'custom'}, switchTool);
tools["zoom"] = new ZoomTool("zoom", {type:'custom'});
tools["zoom"] = new ZoomTool("zoom", {type:'custom'}, switchTool);
tools["moveselection"] = new MoveSelectionTool("moveselection",
{type:'cursor', style:'crosshair'}, switchTool, tools["brush"]);

111
js/tools/ZoomTool.js
View File

@ -1,56 +1,34 @@
class ZoomTool extends Tool {
constructor (name, options) {
super(name, options, undefined);
}
onMouseWheel(mousePos, mode) {
super.onMouseWheel(mousePos, mode);
class ZoomTool extends ResizableTool {
constructor (name, options, switchFunc) {
super(name, options, switchFunc);
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));
this.mode = 'in';
}
onStart(mousePos, target) {
if (target.className != 'drawingCanvas')
return;
// Computing current width and height
let oldWidth = currFile.canvasSize[0] * currFile.zoom;
let oldHeight = currFile.canvasSize[1] * currFile.zoom;
let newWidth, newHeight;
let prevZoom = currFile.zoom;
let zoomed = false;
//change zoom level
//if you want to zoom out, and the zoom isnt already at the smallest level
if (mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
if (this.mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
zoomed = true;
if (currFile.zoom > 2)
currFile.zoom -= Math.ceil(currFile.zoom / 10);
else
currFile.zoom -= Math.ceil(currFile.zoom * 2 / 10) / 2;
newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position
currFile.layers[0].setCanvasOffset(
currFile.layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth,
currFile.layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
this.zoomOut(oldWidth, oldHeight, mousePos);
}
//if you want to zoom in
else if (mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
else if (this.mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
zoomed = true;
if (currFile.zoom > 2)
currFile.zoom += Math.ceil(currFile.zoom/10);
else {
if (currFile.zoom + currFile.zoom/10 > 2) {
currFile.zoom += Math.ceil(currFile.zoom/10);
currFile.zoom = Math.ceil(currFile.zoom);
}
else {
currFile.zoom += Math.ceil(currFile.zoom * 2 / 10) / 2;
}
}
newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position
currFile.layers[0].setCanvasOffset(
currFile.layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth),
currFile.layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
this.zoomIn(oldWidth, oldHeight, mousePos);
}
//resize canvas
@ -62,11 +40,11 @@ class ZoomTool extends Tool {
if (zoomed) {
if (currFile.zoom <= 7)
currFile.pixelGrid.disablePixelGrid();
else if (currFile.zoom >= 20 && mode == 'in') {
else if (currFile.zoom >= 20 && this.mode == 'in') {
currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
}
else if (prevZoom >= 20 && mode == 'out') {
else if (prevZoom >= 20 && this.mode == 'out') {
currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
}
@ -82,4 +60,53 @@ class ZoomTool extends Tool {
currFile.sublayers[i].copyData(currFile.layers[0]);
}
}
zoomIn(oldWidth, oldHeight, mousePos) {
let newWidth, newHeight;
if (currFile.zoom > 2)
currFile.zoom += Math.ceil(currFile.zoom/10);
else {
if (currFile.zoom + currFile.zoom/10 > 2) {
currFile.zoom += Math.ceil(currFile.zoom/10);
currFile.zoom = Math.ceil(currFile.zoom);
}
else {
currFile.zoom += Math.ceil(currFile.zoom * 2 / 10) / 2;
}
}
newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position
currFile.layers[0].setCanvasOffset(
currFile.layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth),
currFile.layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
}
zoomOut(oldWidth, oldHeight, mousePos) {
let newWidth, newHeight;
if (currFile.zoom > 2)
currFile.zoom -= Math.ceil(currFile.zoom / 10);
else
currFile.zoom -= Math.ceil(currFile.zoom * 2 / 10) / 2;
newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position
currFile.layers[0].setCanvasOffset(
currFile.layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth,
currFile.layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
}
setZoomIn() {
this.mode = 'in';
}
setZoomOut() {
this.mode = 'out';
}
}

8
views/tools-menu.hbs
View File

@ -54,6 +54,14 @@
<li><button id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
<li class = "expanded">
<button id="zoom-button">{{svg "zoom.svg" width="24" height="24"}}</button>
<ul class="size-buttons">
<button title="Zoom in" id="zoom-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Zoom out" id="zoom-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</ul>
</li>
</ul>
<div id="tool-tutorial" class="fade-in">