mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Added fill mode for the rectangle tool

Browse Source 
You can select the fill mode by clicking again on the rect button once you select it. Also added new icons.
This commit is contained in:
unsettledgames 2020-03-07 22:34:12 +01:00
parent 30282fe795
commit 3e5b05bb6b
6 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

6
js/_move.js
View File

@ -1,5 +1,6 @@
var imageDataToMove; var imageDataToMove;
var canMoveSelection = false; var canMoveSelection = false;
var lastMovePos;
// TODO: move with arrows // TODO: move with arrows
function updateMovePreview(mouseEvent) { function updateMovePreview(mouseEvent) {
@ -12,6 +13,7 @@ function updateMovePreview(mouseEvent) {
Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2),
Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2)); Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
lastMovePos = lastMousePos;
moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height) moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height)
} }
@ -21,6 +23,6 @@ function endSelection() {
currentLayer.context.putImageData( currentLayer.context.putImageData(
imageDataToMove, imageDataToMove,
Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2),
Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2)); Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
} }

7
js/_rectSelect.js
View File

@ -73,11 +73,6 @@ function endRectSelection(mouseEvent) {
// Updating the cursor // Updating the cursor
updateCursor(); updateCursor();
// NOW
// the move tool stops working when esc is pressed
// when the move tool is disabled, the control is given to the brush tool
// the image data is added to the original layer when the move tool is disabled
//currentLayer.context.putImageData(imageData, startX, startY); //currentLayer.context.putImageData(imageData, startX, startY);
} }
@ -89,7 +84,7 @@ function drawRect(x, y) {
// Clearing the vfx canvas // Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height); vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
vfxContext.lineWidth = 1; vfxContext.lineWidth = 1;
vfxContext.fillStyle = "black"; vfxContext.strokeStyle = "black";
vfxContext.setLineDash([4]); vfxContext.setLineDash([4]);
// Drawing the rect // Drawing the rect

28
js/_rectangle.js
View File

@ -1,5 +1,7 @@
var rectangleSize = 1; var rectangleSize = 1;
var prevRectangleSie = rectangleSize; var prevRectangleSie = rectangleSize;
var emptySVG = document.getElementById("empty-button-svg");
var fullSVG = document.getElementById("full-button-svg");
var drawMode = 'empty'; var drawMode = 'empty';
var isDrawingRect = false; var isDrawingRect = false;
@ -70,19 +72,10 @@ function endRectDrawing(mouseEvent) {
line(endRectX, endRectY, startRectX, endRectY, rectangleSize); line(endRectX, endRectY, startRectX, endRectY, rectangleSize);
line(startRectX, endRectY, startRectX, startRectY, rectangleSize); line(startRectX, endRectY, startRectX, startRectY, rectangleSize);
/* if (drawMode == 'fill') {
// Drawing the final rectangle currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
currentLayer.context.lineWidth = rectangleSize; }
currentLayer.context.strokeStyle = currentGlobalColor;
// Drawing the rect
currentLayer.context.beginPath();
console.log("Coords: " + startRectX + ", " + startRectY);
currentLayer.context.imageSmoothingEnabled = false;
currentLayer.context.rect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
currentLayer.context.setLineDash([]);
currentLayer.context.stroke();
*/
// Clearing the vfx canvas // Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height); vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
} }
@ -106,6 +99,17 @@ function drawRectangle(x, y) {
vfxContext.stroke(); vfxContext.stroke();
} }
function setRectToolSvg() {
if (drawMode == 'empty') {
emptySVG.setAttribute("display", "visible");
fullSVG.setAttribute("display", "none");
}
else {
emptySVG.setAttribute("display", "none");
fullSVG.setAttribute("display", "visible");
}
}
function applyChanges() { function applyChanges() {
VFXCanvas.style.zIndex = MIN_Z_INDEX; VFXCanvas.style.zIndex = MIN_Z_INDEX;
} }

4
js/_toolButtons.js
View File

@ -37,10 +37,12 @@ on('click',"rectangle-button", function(){
// If the user clicks twice on the button, they change the draw mode // If the user clicks twice on the button, they change the draw mode
if (currentTool == 'rectangle') { if (currentTool == 'rectangle') {
if (drawMode == 'empty') { if (drawMode == 'empty') {
drawMode = 'full'; drawMode = 'fill';
setRectToolSvg();
} }
else { else {
drawMode = 'empty'; drawMode = 'empty';
setRectToolSvg();
} }
} }
else { else {

4
views/pixel-editor.hbs
View File

@ -16,7 +16,6 @@
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
{{{google-analytics}}} {{{google-analytics}}}
{{{favicons}}} {{{favicons}}}
</head> </head>
<body oncontextmenu="return false;"> <body oncontextmenu="return false;">
@ -87,7 +86,8 @@
</li> </li>
<li class="expanded"> <li class="expanded">
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32"}}</button> <button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "empty-button-svg"}}
{{svg "fullrect.svg" width="32" height="32" id = "full-button-svg" display = "none"}}</button>
<button title="Increase Brush Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <button title="Increase Brush Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Brush Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button> <button title="Decrease Brush Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li> </li>