pixel-editor/js/tools/EllipseTool.js

188 lines
7.1 KiB
JavaScript
Raw Normal View History

2022-01-23 14:41:42 +03:00
class EllipseTool extends ResizableTool {
2022-01-22 18:02:10 +03:00
// Saving the empty rect svg
emptyEllipseSVG = document.getElementById("ellipse-empty-button-svg");
// and the full rect svg so that I can change them when the user changes rect modes
fullEllipseSVG = document.getElementById("ellipse-full-button-svg");
// Current fill mode
currFillMode = 'empty';
2022-01-23 14:41:42 +03:00
filledPixels = {};
2022-01-22 18:02:10 +03:00
switchFunction = null;
constructor(name, options, switchFunction) {
super(name, options);
this.switchFunction = switchFunction;
Events.on('click', this.mainButton, this.changeFillType.bind(this));
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
this.resetTutorial();
this.addTutorialTitle("Ellipse tool");
this.addTutorialKey("S", " to select the ellipse");
this.addTutorialKey("S while selected", " to change fill mode (empty or fill)");
this.addTutorialKey("Left drag", " to draw an ellipse");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("ellipse-tutorial.gif");
2022-01-22 18:02:10 +03:00
}
changeFillType() {
if (this.isSelected)
if (this.currFillMode == 'empty') {
this.currFillMode = 'fill';
this.emptyEllipseSVG.setAttribute('display', 'none');
this.fullEllipseSVG.setAttribute('display', 'visible');
}
else {
this.currFillMode = 'empty'
this.emptyEllipseSVG.setAttribute('display', 'visible');
this.fullEllipseSVG.setAttribute('display', 'none');
}
else
this.switchFunction(this);
}
2022-01-23 15:32:23 +03:00
onStart(mousePos, mouseTarget) {
if (mouseTarget.className != "drawingCanvas") {
2022-01-23 15:32:23 +03:00
return;
}
2022-01-23 15:32:23 +03:00
super.onStart(mousePos);
2022-01-22 18:02:10 +03:00
// Putting the tmp layer on top of everything
currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
this.startMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
this.startMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
new HistoryState().EditCanvas();
}
2022-01-23 14:41:42 +03:00
onDrag(mousePos) {
2022-01-22 18:02:10 +03:00
// Drawing the rect at the right position
2022-01-23 14:41:42 +03:00
this.drawEllipse(Math.floor(mousePos[0] / currFile.zoom) + 0.5, Math.floor(mousePos[1] / currFile.zoom) + 0.5,
currFile.TMPLayer.context);
2022-01-22 18:02:10 +03:00
}
/** Finishes drawing the ellipse, decides the end coordinates and moves the preview ellipse to the
2022-01-22 18:02:10 +03:00
* current layer
*
* @param {*} mousePos The position of the mouse when the user stopped dragging
*/
onEnd(mousePos) {
super.onEnd(mousePos);
2022-01-23 15:32:23 +03:00
if (this.startMousePos == undefined)
return;
2022-01-22 18:02:10 +03:00
let tmpContext = currFile.TMPLayer.context;
2022-01-23 14:41:42 +03:00
this.endMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
this.endMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
2022-01-22 18:02:10 +03:00
// If I have to fill it, I do so
if (this.currFillMode == 'fill') {
2022-01-23 15:32:23 +03:00
// Use the fill tool on the tmp canvas
FillTool.fill([this.startMousePos[0] * currFile.zoom, this.startMousePos[1] * currFile.zoom],
currFile.TMPLayer.context);
2022-01-22 18:02:10 +03:00
}
2022-01-23 15:32:23 +03:00
Util.pasteData(currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
currFile.TMPLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
currFile.currentLayer.context);
2022-01-23 14:41:42 +03:00
2022-01-22 18:02:10 +03:00
// Update the layer preview
currFile.currentLayer.updateLayerPreview();
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
2022-01-23 15:32:23 +03:00
this.startMousePos = undefined;
2022-01-22 18:02:10 +03:00
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
}
2022-01-23 14:41:42 +03:00
/** Draws an ellipse with end coordinates given by x and y on the tmp layer (draws
* the preview for the ellipse tool)
2022-01-22 18:02:10 +03:00
*
2022-01-23 14:41:42 +03:00
* @param {*} x The current end x of the ellipse
* @param {*} y The current end y of the ellipse
2022-01-22 18:02:10 +03:00
*/
2022-01-23 14:41:42 +03:00
drawEllipse(x, y, context) {
// Width and height of the ellipse
let width = undefined;
let height = undefined;
2022-01-22 18:02:10 +03:00
// Clearing the tmp canvas
2022-01-23 14:41:42 +03:00
currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
2022-01-22 18:02:10 +03:00
2022-01-23 14:41:42 +03:00
// Compute width and height
width = Math.abs(x - this.startMousePos[0]);
height = Math.abs(y - this.startMousePos[1]);
2022-01-22 18:02:10 +03:00
2022-01-23 14:41:42 +03:00
// Drawing the ellipse
this.previewEllipse(context, this.startMousePos[0], this.startMousePos[1], width, height);
}
previewEllipse(context, xc, yc, a, b) {
let x, y1, y2;
let toFill = {};
let removed = {};
x = xc - a;
while (x < (xc + a)) {
let root = Math.sqrt((1 - (((x - xc)*(x - xc)) / (a*a))) * b*b);
let flooredX = Math.floor(x);
let flooredY1, flooredY2;
y1 = root + yc;
y2 = -root + yc;
flooredY1 = Math.floor(y1);
flooredY2 = Math.floor(y2);
toFill[[flooredX, flooredY1]] = true;
toFill[[flooredX, flooredY2]] = true;
x += 0.005;
2022-01-22 18:02:10 +03:00
}
2022-01-23 14:41:42 +03:00
for (const coord in toFill) {
let arrayCoord = JSON.parse("[" + coord + "]");
if (arrayCoord[0]-xc < 0 || arrayCoord[1]-yc < 0) {
2022-01-23 14:41:42 +03:00
continue;
}
if (!(
// Top and left
(toFill[[arrayCoord[0], arrayCoord[1] - 1]] && toFill[[arrayCoord[0] - 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] - 1]] && !removed[arrayCoord[0] - 1, arrayCoord[1]]) ||
// Top and right
(toFill[[arrayCoord[0], arrayCoord[1] - 1]] && toFill[[arrayCoord[0] + 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] - 1]] && !removed[arrayCoord[0] + 1, arrayCoord[1]]) ||
// Bottom and left
(toFill[[arrayCoord[0], arrayCoord[1] + 1]] && toFill[[arrayCoord[0] - 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] + 1]] && !removed[arrayCoord[0] - 1, arrayCoord[1]]) ||
// Bottom and right
(toFill[[arrayCoord[0], arrayCoord[1] + 1]] && toFill[[arrayCoord[0] + 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] + 1]] && !removed[arrayCoord[0] + 1, arrayCoord[1]])) ||
removed[arrayCoord]) {
context.fillRect(arrayCoord[0], arrayCoord[1], this.currSize, this.currSize);
context.fillRect(xc - Math.abs(xc - arrayCoord[0]), arrayCoord[1], this.currSize, this.currSize);
2022-01-23 14:41:42 +03:00
context.fillRect(arrayCoord[0], yc - Math.abs(yc - arrayCoord[1]), this.currSize, this.currSize);
context.fillRect(xc - Math.abs(xc - arrayCoord[0]), yc - Math.abs(yc - arrayCoord[1]), this.currSize, this.currSize);
2022-01-23 14:41:42 +03:00
}
removed[arrayCoord] = true;
}
2022-01-22 18:02:10 +03:00
}
}