137 lines
4.6 KiB
JavaScript
137 lines
4.6 KiB
JavaScript
// 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);
|
|
|
|
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;
|
|
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) {
|
|
zoomed = true;
|
|
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) {
|
|
zoomed = true;
|
|
this.zoomIn(oldWidth, oldHeight, mousePos);
|
|
}
|
|
|
|
//resize canvas
|
|
currFile.layers[0].resize();
|
|
// adjust brush size
|
|
ToolManager.currentTool().updateCursor();
|
|
|
|
// Adjust pixel grid thickness
|
|
if (zoomed) {
|
|
if (currFile.zoom <= 7)
|
|
currFile.pixelGrid.disablePixelGrid();
|
|
else if (currFile.zoom >= 20 && mode == 'in') {
|
|
currFile.pixelGrid.enablePixelGrid();
|
|
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
|
|
}
|
|
else if (prevZoom >= 20 && mode == 'out') {
|
|
currFile.pixelGrid.enablePixelGrid();
|
|
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
|
|
}
|
|
else {
|
|
currFile.pixelGrid.enablePixelGrid();
|
|
}
|
|
}
|
|
|
|
for (let i=0; i<currFile.layers.length; i++) {
|
|
currFile.layers[i].copyData(currFile.layers[0]);
|
|
}
|
|
for (let i=0; i<currFile.sublayers.length; i++) {
|
|
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';
|
|
}
|
|
|
|
setMousePos(event) {
|
|
if (this && this.currMousePos)
|
|
this.currMousePos = Input.getCursorPosition(event);
|
|
}
|
|
} |