Skip to content

Commit

Permalink
Add bottom bar and area color picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@circl-lastname
circl-lastname committed Aug 28, 2023
1 parent eb3fbff commit 9dedb60
Showing 1 changed file with 98 additions and 46 deletions.
144 changes: 98 additions & 46 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ let zoomAreaY;

let currentColor = "#000000";

let fillMode = false;
let tool = 0;

let fileDialog = document.createElement("input");
let colorDialog = document.createElement("input");
Expand Down Expand Up @@ -58,13 +58,24 @@ let topBar = [
text: "Redo",
action: actionRedo
},
{
text: "Reset position",
action: actionResetZoom
}
];

let bottomBar = [
{
text: "Pencil",
draw: drawPencil
},
{
text: "Fill",
action: actionFill
draw: drawFill
},
{
text: "Reset position",
action: actionResetZoom
text: "Color picker",
draw: drawEyedropper
}
];

Expand Down Expand Up @@ -162,6 +173,14 @@ function eqPixel(a, b) {
return a.r == b.r && a.g == b.g && a.b == b.b;
}

function pixelToHex(pixel) {
let r = pixel.r.toString(16).padStart(2, "0");
let g = pixel.g.toString(16).padStart(2, "0");
let b = pixel.b.toString(16).padStart(2, "0");

return `#${r}${g}${b}`;
}

function hexToPixel(hexcode) {
let r = parseInt(hexcode.slice(1, 3), 16);
let g = parseInt(hexcode.slice(3, 5), 16);
Expand Down Expand Up @@ -266,26 +285,31 @@ function initBar(bar) {
}
}

function drawBar(bar) {
function drawBar(bar, x, y) {
let barOffset = 4;

for (let item in bar) {
ctx.fillStyle = "#606060";

if (!bar[item].selected) {
ctx.fillRect(x + barOffset + bar[item].textWidth + 4, y, 2, 20);
} else {
ctx.fillRect(x + barOffset - 4 - 1, y, 1 + 4 + bar[item].textWidth + 4 + 2, 20);
}

ctx.fillStyle = "#ffffff";
ctx.textBaseline = "middle";
ctx.font = "16px sans-serif";

ctx.fillText(bar[item].text, barOffset, 10);

ctx.fillStyle = "#606060";
ctx.fillRect(barOffset + bar[item].textWidth + 4, 0, 2, 20);
ctx.fillText(bar[item].text, x + barOffset, y + 10);

barOffset += bar[item].textWidth + 4+2+4;
}
}

function clickBar(bar, e) {
function clickBar(bar, e, x) {
for (let item in bar) {
if (e.x >= bar[item].x && e.x < bar[item].x + bar[item].width) {
if (e.x >= x + bar[item].x && e.x < x + bar[item].x + bar[item].width) {
if (bar[item].action) {
bar[item].action();
return;
Expand All @@ -294,6 +318,21 @@ function clickBar(bar, e) {
}
}

function clickDrawBar(bar, e, x) {
for (let item in bar) {
if (e.x >= x + bar[item].x && e.x < x + bar[item].x + bar[item].width) {
bar[tool].selected = false;

tool = item;

bar[tool].selected = true;

redraw();
return;
}
}
}

function handleResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Expand All @@ -320,17 +359,16 @@ function handleKeyDown(e) {
}

function handleMouseMove(e) {
if (e.x >= 32*3 + 2 && e.y >= 22) {
if (e.buttons == 1 && !fillMode) {
if (e.x >= 32*3 + 2 && e.y >= 22 && e.y < canvas.height - 22) {
if (e.buttons == 1 && tool == 0) {
let areaX = Math.floor((e.x - areaViewX) / areaScale);
let areaY = Math.floor((e.y - areaViewY) / areaScale);

if (areaX < 0 || areaX >= area.width || areaY < 0 || areaY >= area.height) {
return;
}

areaCtx.fillStyle = currentColor;
areaCtx.fillRect(areaX, areaY, 1, 1);
bottomBar[tool].draw(areaX, areaY);

areaChanged = true;

Expand All @@ -350,7 +388,12 @@ function handleMouseMove(e) {

function handleMouseDown(e) {
if (e.y < 20) {
clickBar(topBar, e);
clickBar(topBar, e, 0);
return;
}

if (e.y >= canvas.height - 20) {
clickDrawBar(bottomBar, e, 0);
return;
}

Expand All @@ -376,24 +419,15 @@ function handleMouseDown(e) {
return;
}

if (e.buttons == 1 && e.x >= 32*3 + 2 && e.y >= 22) {
if (e.buttons == 1 && e.x >= 32*3 + 2 && e.y >= 22 && e.y < canvas.height - 22) {
let areaX = Math.floor((e.x - areaViewX) / areaScale);
let areaY = Math.floor((e.y - areaViewY) / areaScale);

if (areaX < 0 || areaX >= area.width || areaY < 0 || areaY >= area.height) {
return;
}

if (!fillMode) {
areaCtx.fillStyle = currentColor;
areaCtx.fillRect(areaX, areaY, 1, 1);
} else {
let imageData = areaCtx.getImageData(0, 0, area.width, area.height);

floodFill(imageData, areaX, areaY, hexToPixel(currentColor));

areaCtx.putImageData(imageData, 0, 0);
}
bottomBar[tool].draw(areaX, areaY);

areaChanged = true;

Expand All @@ -409,7 +443,7 @@ function handleMouseUp(e) {
}

function handleWheel(e) {
if (e.x >= 32*3 + 2 && e.y >= 22) {
if (e.x >= 32*3 + 2 && e.y >= 22 && e.y < canvas.height - 22) {
if (e.x != zoomPreviousX || e.y != zoomPreviousY) {
zoomAreaX = (e.x - areaViewX) / areaScale;
zoomAreaY = (e.y - areaViewY) / areaScale;
Expand Down Expand Up @@ -561,17 +595,32 @@ function actionRedo() {
}
}

function actionFill() {
fillMode = !fillMode;

redraw();
}

function actionResetZoom() {
setAreaPosition();
redraw();
}

function drawPencil(x, y) {
areaCtx.fillStyle = currentColor;
areaCtx.fillRect(x, y, 1, 1);
}

function drawFill(x, y) {
let imageData = areaCtx.getImageData(0, 0, area.width, area.height);

floodFill(imageData, x, y, hexToPixel(currentColor));

areaCtx.putImageData(imageData, 0, 0);
}

function drawEyedropper(x, y) {
let imageData = areaCtx.getImageData(0, 0, area.width, area.height);
let color = pixelToHex(getPixel(imageData, x, y));

currentColor = color;
colorBar.push(color);
}

function redraw() {
ctx.fillStyle = "#202020";
ctx.fillRect(0, 0, canvas.width, canvas.height);
Expand All @@ -580,10 +629,10 @@ function redraw() {
ctx.drawImage(area, areaViewX, areaViewY, area.width*areaScale, area.height*areaScale);

ctx.fillStyle = "#00000080";
ctx.fillRect(0, 20 + 2, 32*3, canvas.height - 20 - 2);
ctx.fillRect(0, 20 + 2, 32*3, canvas.height - 22*2);

ctx.fillStyle = "#606060";
ctx.fillRect(32*3, 20 + 2, 2, canvas.height - 20 - 2);
ctx.fillRect(32*3, 20 + 2, 2, canvas.height - 22*2);

let colorBarOffsetX = 0
let colorBarOffsetY = 0
Expand All @@ -601,23 +650,23 @@ function redraw() {
}

ctx.fillStyle = currentColor;
ctx.fillRect(0, canvas.height - 32, 32, 32);

if (fillMode) {
ctx.fillStyle = "#ffffff";
ctx.textBaseline = "middle";
ctx.font = "16px sans-serif";

ctx.fillText("Fill", 32 + 8, canvas.height - 16);
}
ctx.fillRect(0, canvas.height - 22 - 32, 32, 32);

ctx.fillStyle = "#00000080";
ctx.fillRect(0, 0, canvas.width, 20);

ctx.fillStyle = "#606060";
ctx.fillRect(0, 20, canvas.width, 2);

drawBar(topBar);
drawBar(topBar, 0, 0);

ctx.fillStyle = "#00000080";
ctx.fillRect(0, canvas.height - 20, canvas.width, 20);

ctx.fillStyle = "#606060";
ctx.fillRect(0, canvas.height - 22, canvas.width, 2);

drawBar(bottomBar, 0, canvas.height - 20);
}

function init() {
Expand All @@ -642,6 +691,9 @@ function init() {
resetUndoState();

initBar(topBar);
initBar(bottomBar);

bottomBar[tool].selected = true;

redraw();
}
Expand Down

0 comments on commit 9dedb60

Please sign in to comment.