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

Added back zoom

This commit is contained in:
unsettledgames 2021-11-01 12:31:09 +01:00
parent c1aba0a89e
commit 2d8974f9d6
8 changed files with 112 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/ToolManager.js
View File

@ -4,8 +4,15 @@ const ToolManager = (() => {
rectangleTool = new RectangleTool("rectangle", {type: 'html'}, switchTool);
lineTool = new LineTool("line", {type: 'html'}, switchTool);
fillTool = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool);
eyedropperTool = new EyedropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);
panTool = new PanTool("pan", {type: 'custom'}, switchTool);
zoomTool = new ZoomTool("zoom", {type:'custom'});
rectSelectTool = new RectangularSelectionTool("rectangularselection",
{type: 'cursor', style:'crosshair'}, switchTool);
moveSelectionTool = new MoveSelectionTool("moveselection",
{type:'cursor', style:'crosshair'}, switchTool);
currTool = brushTool;
currTool.onSelect();
@ -14,6 +21,12 @@ const ToolManager = (() => {
Events.on("mouseup", window, onMouseUp);
Events.on("mousemove", window, onMouseMove);
Events.on("mousedown", window, onMouseDown);
Events.on("mousewheel", window, onMouseWheel);
function onMouseWheel(mouseEvent) {
let mousePos = Input.getCursorPosition(mouseEvent);
zoomTool.onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out');
}
function onMouseDown(mouseEvent) {
if (!Startup.documentCreated())

75
js/_changeZoom.js
View File

@ -1,75 +0,0 @@
/** Changes the zoom level of the canvas
* @param {*} direction 'in' or 'out'
* @param {*} cursorLocation The position of the cursor when the user zoomed
*/
function changeZoom (direction, cursorLocation) {
// Computing current width and height
let oldWidth = canvasSize[0] * zoom;
let oldHeight = canvasSize[1] * zoom;
let newWidth, newHeight;
let prevZoom = zoom;
let zoomed = false;
//change zoom level
//if you want to zoom out, and the zoom isnt already at the smallest level
if (direction == 'out' && zoom > MIN_ZOOM_LEVEL) {
zoomed = true;
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]/oldHeight);
}
//if you want to zoom in
else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
zoomed = true;
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;
//adjust canvas position
layers[0].setCanvasOffset(
layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth),
layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight));
}
//resize canvas
layers[0].resize();
// adjust brush size
ToolManager.currentTool().updateCursor();
// Adjust pixel grid thickness
if (zoomed) {
if (zoom <= 7)
disablePixelGrid();
else if (zoom >= 20 && direction == 'in') {
enablePixelGrid();
repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else if (prevZoom >= 20 && direction == 'out') {
enablePixelGrid();
repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else {
enablePixelGrid();
}
}
}

4
js/_tools.js
View File

@ -43,7 +43,7 @@ class Tool {
canvasView.style.cursor = 'default';
break;
case 'cursor':
this.cursor = "crosshair";
this.cursor = this.cursorType.style;
canvasView.style.cursor = this.cursor || 'default';
break;
default:
@ -53,6 +53,8 @@ class Tool {
updateCursor() {}
onMouseWheel(mousePos, mode) {}
onHover(cursorLocation, cursorTarget) {
this.prevMousePos = this.currMousePos;
this.currMousePos = cursorLocation;

1
js/pixel-editor.js
View File

@ -29,7 +29,6 @@
//=include _palettes.js
/**functions**/
//=include _changeZoom.js
//=include _checkerboard.js
//=include _copyPaste.js
//=include _resizeCanvas.js

5
js/tools/EyeDropperTool.js
View File

@ -8,9 +8,12 @@ class EyedropperTool extends Tool {
Events.on('click', this.mainButton, switchFunction, this);
}
onStart(mousePos) {
onStart(mousePos, target) {
super.onStart(mousePos);
if (target.className != 'drawingCanvas')
return;
this.eyedropperPreview.style.display = 'block';
this.onDrag(mousePos);
}

5
js/tools/MoveSelectionTool.js Normal file
View File

@ -0,0 +1,5 @@
class MoveSelectionTool extends Tool {
constructor (name, options, switchFunc) {
super(name, options, switchFunc);
}
}

5
js/tools/RectangularSelectionTool.js Normal file
View File

@ -0,0 +1,5 @@
class RectangularSelectionTool extends Tool {
constructor (name, options, switchFunc) {
super(name, options, switchFunc);
}
}

82
js/tools/ZoomTool.js
View File

@ -0,0 +1,82 @@
class ZoomTool extends Tool {
constructor (name, options) {
super(name, options, undefined);
}
onMouseWheel(mousePos, mode) {
super.onMouseWheel(mousePos, mode);
// Computing current width and height
let oldWidth = canvasSize[0] * zoom;
let oldHeight = canvasSize[1] * zoom;
let newWidth, newHeight;
let prevZoom = 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' && zoom > MIN_ZOOM_LEVEL) {
zoomed = true;
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) * mousePos[0]/oldWidth,
layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
}
//if you want to zoom in
else if (mode == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
zoomed = true;
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;
//adjust canvas position
layers[0].setCanvasOffset(
layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth),
layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
}
//resize canvas
layers[0].resize();
// adjust brush size
ToolManager.currentTool().updateCursor();
// Adjust pixel grid thickness
if (zoomed) {
if (zoom <= 7)
disablePixelGrid();
else if (zoom >= 20 && mode == 'in') {
enablePixelGrid();
repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else if (prevZoom >= 20 && mode == 'out') {
enablePixelGrid();
repaintPixelGrid((zoom - prevZoom) * 0.6);
}
else {
enablePixelGrid();
}
}
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}
}