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

Removed getCursorPosition

This commit is contained in:
unsettledgames 2021-07-22 19:05:58 +02:00
parent 15cca5ffb7
commit 6b84cdaa4d
8 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/ColorModule.js
View File

@ -20,7 +20,6 @@ const ColorModule = (() => {
animation:100,
filter: ".noshrink",
draggable: ".draggable-colour",
// REFACTOR: Don't touch dragging, simulate a mouseup event instead
onEnd: function() {Events.simulateMouseEvent(window, "mouseup");}
});

22
js/Input.js
View File

@ -22,6 +22,25 @@ const Input = (() => {
dragging = false;
}
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= currentLayer.canvas.offsetLeft;
y -= currentLayer.canvas.offsetTop;
return [Math.round(x), Math.round(y)];
}
/** Just listens to hotkeys and calls the linked functions
*
* @param {*} e
@ -155,6 +174,7 @@ const Input = (() => {
return {
spacePressed,
isDragging,
getCurrMouseEvent
getCurrMouseEvent,
getCursorPosition
}
})();

6
js/_ellipse.js
View File

@ -26,7 +26,7 @@ function startEllipseDrawing(mouseEvent) {
isDrawingEllipse = true;
// Saving the start coords of the ellipse
let cursorPos = getCursorPosition(mouseEvent);
let cursorPos = Input.getCursorPosition(mouseEvent);
startEllipseX = Math.floor(cursorPos[0] / zoom) + 0.5;
startEllipseY = Math.floor(cursorPos[1] / zoom) + 0.5;
@ -39,7 +39,7 @@ function startEllipseDrawing(mouseEvent) {
* @param {*} mouseEvent The mouseEvent from which we'll get the mouse position
*/
function updateEllipseDrawing(mouseEvent) {
let pos = getCursorPosition(mouseEvent);
let pos = Input.getCursorPosition(mouseEvent);
// Drawing the ellipse at the right position
drawEllipse(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
@ -53,7 +53,7 @@ function updateEllipseDrawing(mouseEvent) {
*/
function endEllipseDrawing(mouseEvent) {
// Getting the end position
let currentPos = getCursorPosition(mouseEvent);
let currentPos = Input.getCursorPosition(mouseEvent);
let vfxContext = VFXLayer.context;
endEllipseX = Math.round(currentPos[0] / zoom) + 0.5;

19
js/_getCursorPosition.js
View File

@ -1,19 +0,0 @@
//gets cursor position relative to canvas
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= currentLayer.canvas.offsetLeft;
y -= currentLayer.canvas.offsetTop;
return [Math.round(x), Math.round(y)];
}

21
js/_mouseEvents.js
View File

@ -1,3 +1,6 @@
// REFACTOR: let's keep this one global for now, unfortunately it's used by just some tools to keep track of
// their state: I'd wait after we refactor the tools themselves before removing this variable, which should
// ideally be updated in Input.js
var lastMouseMovePos;
//mousedown - start drawing
@ -9,7 +12,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
//prevent right mouse clicks and such, which will open unwanted menus
//mouseEvent.preventDefault();
lastMouseClickPos = getCursorPosition(mouseEvent);
lastMouseClickPos = Input.getCursorPosition(mouseEvent);
//left or right click ?
if (mouseEvent.which == 1) {
@ -82,7 +85,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
if (!documentCreated || Dialogue.isOpen() || !currentLayer.isVisible || currentLayer.isLocked) return;
if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
var cursorLocation = getCursorPosition(mouseEvent);
var cursorLocation = Input.getCursorPosition(mouseEvent);
var selectedColor = getEyedropperColor(cursorLocation);
const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]};
var newColor = Color.rgbToHex(rgbColor);
@ -115,7 +118,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
else if (currentTool.name == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
//get cursor postion
var cursorLocation = getCursorPosition(mouseEvent);
var cursorLocation = Input.getCursorPosition(mouseEvent);
//offset to match cursor point
cursorLocation[0] += 2;
@ -140,7 +143,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
mode = 'out';
}
changeZoom(mode, getCursorPosition(mouseEvent));
changeZoom(mode, Input.getCursorPosition(mouseEvent));
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
@ -161,7 +164,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
currentTool = currentToolTemp;
currentTool.updateCursor();
var cursorLocation = getCursorPosition(mouseEvent);
var cursorLocation = Input.getCursorPosition(mouseEvent);
currentTool.moveBrushPreview(cursorLocation);
@ -197,7 +200,7 @@ window.addEventListener("mousedown", draw, false);
function draw (mouseEvent) {
if (!Dialogue.isOpen())
{
lastMouseMovePos = getCursorPosition(mouseEvent);
lastMouseMovePos = Input.getCursorPosition(mouseEvent);
var cursorLocation = lastMouseMovePos;
@ -295,7 +298,7 @@ function draw (mouseEvent) {
layers[i].copyData(layers[0]);
}
// Updating cursorLocation with new layer position
lastMouseMovePos = getCursorPosition(mouseEvent);
lastMouseMovePos = Input.getCursorPosition(mouseEvent);
cursorLocation = lastMouseMovePos;
// Moving brush preview
currentTool.moveBrushPreview(cursorLocation);
@ -398,7 +401,7 @@ function draw (mouseEvent) {
// If I'm dragging, I move the preview
if (Input.isDragging() && cursorInSelectedArea()) {
updateMovePreview(getCursorPosition(mouseEvent));
updateMovePreview(Input.getCursorPosition(mouseEvent));
}
}
else if (currentTool.name === "line") {
@ -433,7 +436,7 @@ canvasView.addEventListener("wheel", function(mouseEvent){
}
// Changing zoom and position of the first layer
changeZoom(mode, getCursorPosition(mouseEvent));
changeZoom(mode, Input.getCursorPosition(mouseEvent));
for (let i=1; i<layers.length; i++) {
// Copying first layer's data into the other layers

8
js/_rectSelect.js
View File

@ -15,7 +15,7 @@ function startRectSelection(mouseEvent) {
VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
// Saving the start coords of the rect
let cursorPos = getCursorPosition(mouseEvent);
let cursorPos = Input.getCursorPosition(mouseEvent);
startX = Math.round(cursorPos[0] / zoom) - 0.5;
startY = Math.round(cursorPos[1] / zoom) - 0.5;
@ -44,7 +44,7 @@ function startRectSelection(mouseEvent) {
* @param {*} mouseEvent
*/
function updateRectSelection(mouseEvent) {
let pos = getCursorPosition(mouseEvent);
let pos = Input.getCursorPosition(mouseEvent);
// Drawing the rect
drawRect(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
@ -56,7 +56,7 @@ function updateRectSelection(mouseEvent) {
*/
function endRectSelection(mouseEvent) {
// Getting the end position
let currentPos = getCursorPosition(mouseEvent);
let currentPos = Input.getCursorPosition(mouseEvent);
endX = Math.round(currentPos[0] / zoom) + 0.5;
endY = Math.round(currentPos[1] / zoom) + 0.5;
@ -126,7 +126,7 @@ function applyChanges() {
// Checks whether the pointer is inside the selected area or not
function cursorInSelectedArea() {
// Getting the cursor position
let cursorPos = getCursorPosition(Input.getCurrMouseEvent());
let cursorPos = Input.getCursorPosition(Input.getCurrMouseEvent());
// Getting the coordinates relatively to the canvas
let x = cursorPos[0] / zoom;
let y = cursorPos[1] / zoom;

6
js/_rectangle.js
View File

@ -25,7 +25,7 @@ function startRectDrawing(mouseEvent) {
isDrawingRect = true;
// Saving the start coords of the rect
let cursorPos = getCursorPosition(mouseEvent);
let cursorPos = Input.getCursorPosition(mouseEvent);
startRectX = Math.floor(cursorPos[0] / zoom) + 0.5;
startRectY = Math.floor(cursorPos[1] / zoom) + 0.5;
@ -37,7 +37,7 @@ function startRectDrawing(mouseEvent) {
* @param {*} mouseEvent The mouseEvent from which we'll get the mouse position
*/
function updateRectDrawing(mouseEvent) {
let pos = getCursorPosition(mouseEvent);
let pos = Input.getCursorPosition(mouseEvent);
// Drawing the rect at the right position
drawRectangle(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5);
@ -50,7 +50,7 @@ function updateRectDrawing(mouseEvent) {
*/
function endRectDrawing(mouseEvent) {
// Getting the end position
let currentPos = getCursorPosition(mouseEvent);
let currentPos = Input.getCursorPosition(mouseEvent);
let tmpContext = TMPLayer.context;
endRectX = Math.floor(currentPos[0] / zoom) + 0.5;

1
js/pixel-editor.js
View File

@ -28,7 +28,6 @@
//=include _changeZoom.js
//=include ColorModule.js
//=include _drawLine.js
//=include _getCursorPosition.js
//=include _fill.js
//=include _line.js
//=include _checkerboard.js