jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

better brush preview update, bug fixes, redo, cross brush type

This commit is contained in:
Hugh Bord 2021-05-22 12:49:19 +10:00
parent 9e71bdb4de
commit 726d2fc105
7 changed files with 397 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -14,19 +14,16 @@
[STREAMLABS] http://streamlabs.jewbird.live [PATREON] http://patreon.jewbird.live
[YT] http://yt.jewbird.live [TWITCH] http://twitch.jewbird.live [GITHUB] http://git.jewbird.live
```
FIRST SHOW OF COMPRESSION IN LOCALSTORAGE AND ASCIIBIRD STATE FILES !!!
# BUGS
* Need to click circle then click square again to update the brush preview properly
* Context menu / right click / browsers context menu issue
* Brush Y changing wont update when making smaller
* Text broken
* Escape chars in asciis
* If you resize an ascii, and then undo and try fill in blocks it will error cuz the blocks don't exist
* Redo (ctrl y) is a buggy
# FOCUSING ON NOW
* UNDO
* Can we compress and decompress a string?
* vuex mutation undo vs array
* Toolbar stuff / Brush Size
* Need to make brush center on the mouse x and y
@ -39,10 +36,8 @@
* Context Menus (right click menu) - we started this
* Keyboard shortcuts
* Context menu / right click / browsers context menu issue
* Undo feature
* COMPRESSION inside the localStorage
# KILLER ASCIIBIRD FEATURES DONE
@ -51,7 +46,7 @@
* Import ASCII from https://irc.watch/
* Update text colours without deleting the block
* Floating pattlets, resizeable and remembers positions
* .ASB file, but it's not gzipped yet just json.
* .ASB file, compressed asciibird state
* Export mIRC to clipboard
* Modals
@ -60,11 +55,8 @@
# KILLER ASCIIBIRD FEATURES TO DO
* Layers / Insert ASCII as layer
* Undo for brush settings and shit changes
* Overlay image for nance tracing mode
# ASCIIBIRD API?
* Insert image to convert to ASCII into a layer

20
src/Dashboard.vue
View File

@ -107,9 +107,24 @@ import LZString from 'lz-string';
export default {
async created() {
// Load from irc watch if present in the URL bar
const asciiUrl = new URL(location.href).searchParams.get("ascii");
const asciiUrlCdn = new URL(location.href).searchParams.get("ascii");
if (asciiUrlCdn) {
const res = await fetch(`https://ascii.jewbird.live/${asciiUrlCdn}`, {
method: "GET",
headers: {
Accept: "text/plain",
},
});
const asciiData = await res.text();
console.log({ asciiData, asciiUrlCdn });
this.mircAsciiImport(asciiData, asciiUrlCdn);
window.location.href = "/";
}
const asciiUrl = new URL(location.href).searchParams.get("ircwatch");
if (asciiUrl) {
const res = await fetch(`https://ascii.jewbird.live/${asciiUrl}`, {
const res = await fetch(`https://irc.watch/ascii/txt/${ircwatch}`, {
method: "GET",
headers: {
Accept: "text/plain",
@ -302,6 +317,7 @@ export default {
blockHeight: 13 * this.$store.getters.blockSizeMultiplier,
blocks: this.create2DArray(asciiImport.split("\n").length),
history: [],
redo: [],
x: 8 * 35, // the dragable ascii canvas x
y: 13 * 2, // the dragable ascii canvas y
};

4
src/components/Toolbar.vue
View File

@ -4,8 +4,8 @@
@dragstop="onDragStop"
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
style="z-index: 5;"
:min-width="8 * 15"
:max-width="8 * 25"
:min-width="8 * 25"
:max-width="8 * 30"
:max-height="13 * 39"
:min-height="13 * 38"
:w="toolbarState.w"

3
src/components/modals/NewAscii.vue
View File

@ -81,6 +81,7 @@ export default {
blockWidth: 8,
blockHeight: 13,
history: [],
redo: [],
x: 247, // the dragable ascii canvas x
y: 24, // the dragable ascii canvas y
blocks: this.create2DArray(this.forms.createAscii.height),
@ -98,7 +99,7 @@ export default {
}
newAscii.blocks = LZString.compressToUTF16(JSON.stringify(newAscii.blocks))
newAscii.history.push( ... newAscii.blocks)
newAscii.history.push( newAscii.blocks)
this.$store.commit("newAsciibirdMeta", newAscii);
this.$store.commit('openModal', 'new-ascii')
this.$modal.hide("create-ascii-modal");

185
src/components/parts/BrushPreview.vue
View File

@ -67,18 +67,17 @@ export default {
mounted() {
this.ctx = this.$refs.brushcanvas.getContext("2d");
this.delayRedrawCanvas();
this.brushSizeHeight = this.$store.getters.brushSizeHeight;
this.brushSizeWidth = this.$store.getters.brushSizeWidth;
this.brushSizeHeight = this.$store.getters.brushSizeHeight;
this.brushSizeType = this.$store.getters.brushSizeType;
},
data: () => ({
ctx: null,
redraw: true,
blocks: [],
brushSizeHeight: 1,
brushSizeWidth: 1,
brushSizeType: "square",
blocks: [],
brushSizeType: 'square',
}),
computed: {
currentAscii() {
@ -87,6 +86,33 @@ export default {
toolbarState() {
return this.$store.getters.getToolbarState;
},
getTargetingBg() {
return this.$store.getters.getTargetingBg
},
getTargetingFg() {
return this.$store.getters.getTargetingFg
},
getTargetingChar() {
return this.$store.getters.getTargetingChar
},
getFgColour() {
return this.$store.getters.getFgColour
},
getBgColour() {
return this.$store.getters.getBgColour
},
getSelectedChar() {
return this.$store.getters.getSelectedChar
},
brushSizeHeightPreview() {
return this.$store.getters.brushSizeHeight
},
brushSizeWidthPreview() {
return this.$store.getters.brushSizeWidth
},
brushSizeTypePreview() {
return this.$store.getters.brushSizeType
},
},
watch: {
brushSizeWidth() {
@ -95,6 +121,24 @@ export default {
brushSizeHeight() {
this.delayRedrawCanvas()
},
getTargetingBg() {
this.delayRedrawCanvas()
},
getTargetingFg() {
this.delayRedrawCanvas()
},
getTargetingChar() {
this.delayRedrawCanvas()
},
getFgColour() {
this.delayRedrawCanvas()
},
getBgColour() {
this.delayRedrawCanvas()
},
getSelectedChar() {
this.delayRedrawCanvas()
},
},
methods: {
updateBrushSize() {
@ -106,13 +150,14 @@ export default {
this.ctx.clearRect(0, 0, 1000, 1000);
this.delayRedrawCanvas();
this.$store.commit("brushBlocks", this.blocks)
},
drawPreview() {
let brushHeight = this.toolbarState.brushSizeHeight;
let brushWidth = this.toolbarState.brushSizeWidth;
let brushHeight = this.brushSizeHeightPreview;
let brushWidth = this.brushSizeWidthPreview;
this.blocks = [];
this.ctx.fillStyle = this.$store.getters.mircColours[1];
const BLOCK_WIDTH = this.currentAscii.blockWidth;
@ -124,29 +169,49 @@ export default {
let y = 0;
let x = 0;
let targetY = 0;
let targetX = 0;
let block = {
fg: this.getFgColour,
bg: this.getBgColour,
char: this.getSelectedChar,
};
let emptyBlock = {
fg: null,
bg: null,
char: null,
};
let minY = 5 - brushHeight;
let maxY = 5 + brushHeight;
let minX = 5 - brushWidth;
let maxX = 5 + brushWidth;
let block = {
fg: this.$store.getters.getFgColour,
bg: this.$store.getters.getBgColour,
char: this.$store.getters.getSelectedChar,
};
// Recreate 2d array for preview
for (y = 0; y < brushHeight; y++) {
this.blocks[y] = [];
for (x = 0; x < brushWidth; x++) {
this.blocks[y][x] = Object.assign({}, block);
switch(this.brushSizeTypePreview) {
case 'cross':
this.blocks[y][x] = Object.assign({}, emptyBlock);
targetX = x;
if (y % 2 === 0) {
targetX = targetX - 1
}
if (this.blocks[y]) {
if (x % 2 === 0) {
this.blocks[y][targetX] = Object.assign({}, emptyBlock);
} else {
this.blocks[y][targetX] = Object.assign({}, block);
}
}
break;
default:
case 'square':
this.blocks[y][x] = Object.assign({}, block);
break;
}
}
}
@ -155,32 +220,70 @@ export default {
for (x = 0; x < this.blocks[0].length; x++) {
let curBlock = this.blocks[y][x];
if (curBlock.bg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
switch(this.brushSizeTypePreview) {
case 'cross':
if (curBlock.bg && this.getTargetingBg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
this.ctx.fillRect(
x * BLOCK_WIDTH,
y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
this.ctx.fillRect(
x * BLOCK_WIDTH,
y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (curBlock.fg && this.getTargetingFg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
}
if (curBlock.char && this.getTargetingChar) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
break;
default:
case 'square':
if (curBlock.bg && this.getTargetingBg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
this.ctx.fillRect(
x * BLOCK_WIDTH,
y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (curBlock.fg && this.getTargetingFg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
}
if (curBlock.char && this.getTargetingChar) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
break;
}
if (curBlock.fg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
}
if (curBlock.char) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
}
this.ctx.stroke();
this.$store.commit("brushBlocks", this.blocks)
}
},
delayRedrawCanvas() {

24
src/store/index.js
View File

@ -128,7 +128,7 @@ export default new Vuex.Store({
x: 8 * 2,
y: 13 * 2,
h: 13 * 39,
w: 8 * 15,
w: 8 * 25,
},
debugPanelState: {
x: 8 * 2,
@ -214,20 +214,22 @@ export default new Vuex.Store({
}
state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(payload));
state.asciibirdMeta[state.tab].redo = [];
},
undoBlocks(state) {
if (state.asciibirdMeta[state.tab].history.length > 1) {
state.asciibirdMeta[state.tab].blocks = state.asciibirdMeta[state.tab].history.pop();
let previous = state.asciibirdMeta[state.tab].history.pop();
state.asciibirdMeta[state.tab].blocks = previous
state.asciibirdMeta[state.tab].redo.push(previous)
}
},
redoBlocks(state) {
if (state.asciibirdMeta[state.tab].redo.length > 0) {
let next = state.asciibirdMeta[state.tab].redo.pop();
state.asciibirdMeta[state.tab].blocks = next
state.asciibirdMeta[state.tab].history.push(next)
}
},
// redoBlocks(state) {
// let blocksHistory = state.asciibirdMeta[state.tab].history
// if (blocksHistory[blocksHistory.length + 1]) {
// let prevBlockHistory = blocksHistory[blocksHistory.length + 1];
// Object.assign(state.asciibirdMeta[state.tab].blocks, prevBlockHistory);
// }
// },
updateBrushSize(state, payload) {
state.toolbarState.brushSizeHeight = payload.brushSizeHeight;
state.toolbarState.brushSizeWidth = payload.brushSizeWidth;
@ -276,7 +278,7 @@ export default new Vuex.Store({
brushSizeType: (state) => state.toolbarState.brushSizeType,
blockSizeMultiplier: (state) => state.blockSizeMultiplier,
brushBlocks: (state) => state.brushBlocks,
undoIndex: (state) => state.asciibirdMeta[state.tab].history.length-1
undoIndex: (state) => state.asciibirdMeta[state.tab].history.length-1,
},
actions: {},
modules: {},

319
src/views/Editor.vue
View File

@ -1,6 +1,10 @@
<template>
<div>
<div id="canvas-area">
<div
id="canvas-area"
@mouseleave="isMouseOnCanvas = false"
@mouseenter="isMouseOnCanvas = true"
>
<vue-draggable-resizable
style="z-index: 5"
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
@ -46,6 +50,7 @@ body {
.canvastools {
position: absolute;
z-index: 100;
opacity: 0.5;
}
.canvas {
@ -80,23 +85,21 @@ export default {
const _this = this;
this._keyListener = function (e) {
if (this.currentToolIsText) {
e.preventDefault();
e.preventDefault();
_this.canvasKeyDown(e.key);
}
// Ctrl Z here
if (e.key === "z" && (e.ctrlKey)) {
console.log("undo " + "z");
if (e.key === "z" && e.ctrlKey) {
e.preventDefault();
this.undo()
this.undo();
}
// Ctrl Y here
if (e.key === "y" && (e.ctrlKey)) {
// console.log("undo " + "y");
// e.preventDefault();
// this.$store.commit("redoBlocks");
// this.delayRedrawCanvas()
if (e.key === "y" && e.ctrlKey) {
console.log("ctrl y");
e.preventDefault();
this.redo();
}
};
@ -126,13 +129,14 @@ export default {
endY: null,
canSelect: false,
},
isMouseOnCanvas: false,
}),
computed: {
canvasStyle() {
return `width:${this.canvas.width};height:${this.canvas.height};`;
},
undoIndex() {
return this.$store.getters.undoIndex ?? -1
return this.$store.getters.undoIndex ?? -1;
},
generateTitle() {
return this.$store.getters.currentAscii.title ?? "";
@ -149,18 +153,19 @@ export default {
];
},
currentToolIsText() {
return this.$store.getters.getToolbarIcons[
this.$store.getters.getCurrentTool
] === 'text';
return (
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
.name === "text"
);
},
canFg() {
return this.$store.getters.getTargetingFg
return this.$store.getters.getTargetingFg;
},
canBg() {
return this.$store.getters.getTargetingBg
return this.$store.getters.getTargetingBg;
},
canText() {
return this.$store.getters.getTargetingChar
return this.$store.getters.getTargetingChar;
},
isTextEditing() {
return (
@ -214,11 +219,18 @@ export default {
break;
}
},
isMouseOnCanvas() {
this.clearToolCanvas();
},
},
methods: {
undo() {
this.$store.commit("undoBlocks");
this.delayRedrawCanvas()
this.$store.commit("undoBlocks");
this.delayRedrawCanvas();
},
redo() {
this.$store.commit("redoBlocks");
this.delayRedrawCanvas();
},
redrawToolCanvas() {
if (this.currentAsciiBlocks.length) {
@ -262,10 +274,7 @@ export default {
for (x = 0; x < this.currentAscii.width + 1; x++) {
if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
curBlock = Object.assign(
curBlock,
this.currentAsciiBlocks[y][x]
);
curBlock = Object.assign(curBlock, this.currentAsciiBlocks[y][x]);
canvasX = BLOCK_WIDTH * x;
@ -310,8 +319,8 @@ export default {
const blocks = this.$store.getters.currentAsciiBlocks;
const oldWidth = blocks[0].length; // * this.currentAscii.blockWidth;
const oldHeight = blocks.length; // * this.currentAscii.blockHeight;
const oldWidth = blocks[0].length;
const oldHeight = blocks.length;
const canvasBlockHeight = Math.floor(
height / this.currentAscii.blockHeight
@ -409,6 +418,8 @@ export default {
break;
}
this.drawTextIndicator();
}
this.delayRedrawCanvas();
}
@ -420,7 +431,7 @@ export default {
this.canTool = false;
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
break;
case "eraser":
@ -440,13 +451,13 @@ export default {
break;
case "text":
if (
this.textEditing.startX === null ||
this.textEditing.startY === null
) {
this.textEditing.startX = this.x;
this.textEditing.startY = this.y;
}
// if (
// this.textEditing.startX === null ||
// this.textEditing.startY === null
// ) {
this.textEditing.startX = this.x;
this.textEditing.startY = this.y;
// }
break;
}
@ -484,11 +495,12 @@ export default {
case "brush":
this.canTool = true;
this.drawBrush()
this.drawBrush();
break;
case "eraser":
this.canTool = true;
this.eraser();
break;
case "dropper":
@ -535,32 +547,39 @@ export default {
].name
) {
case "brush":
this.drawBrush()
break;
case "eraser":
if (this.canTool) {
if (this.$store.getters.getTargetingFg) {
targetBlock.fg = null;
}
if (this.$store.getters.getTargetingBg) {
targetBlock.bg = null;
}
if (this.$store.getters.getTargetingChar) {
targetBlock.char = null;
}
if (this.isMouseOnCanvas) {
this.drawBrush();
}
break;
case "eraser":
if (this.isMouseOnCanvas) {
this.drawBrush(true);
}
this.eraser();
break;
case "select":
this.drawIndicator();
if (this.selecting.canSelect) {
this.selecting.endX = this.x;
this.selecting.endY = this.y;
}
break;
case "text":
this.drawIndicator();
break;
case "dropper":
this.drawIndicator();
break;
case "fill":
this.drawIndicator();
break;
}
}
@ -585,78 +604,160 @@ export default {
//
// TOOLS
//
// Fill tool
drawBrush() {
this.clearToolCanvas();
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
drawIndicator() {
this.clearToolCanvas();
this.toolCtx.fillStyle = this.$store.getters.mircColours[0];
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
this.toolCtx.fillRect(
this.x * BLOCK_WIDTH,
this.y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
this.toolCtx.stroke();
},
drawTextIndicator() {
this.clearToolCanvas();
this.toolCtx.fillStyle = this.$store.getters.mircColours[0];
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
this.toolCtx.fillRect(
this.textEditing.startX * BLOCK_WIDTH,
this.textEditing.startY * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
for (let x = 0;x < this.$store.getters.brushBlocks[0].length;x++) {
let curBlock = this.$store.getters.brushBlocks[y][x];
this.toolCtx.stroke();
},
drawBrush(plain = false) {
this.clearToolCanvas();
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
let arrayX = this.x + x;
let arrayY = this.y + y;
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
let diffX = Math.ceil(arrayX / 2)
let diffY = Math.ceil(arrayY / 2)
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
for (let x = 0; x < this.$store.getters.brushBlocks[0].length; x++) {
let brushBlock = this.$store.getters.brushBlocks[y][x];
let brushDiffX = arrayX - diffX;
let brushDiffY = arrayY - diffY;
let arrayX = this.x + x;
let arrayY = this.y + y;
let brushX = (this.x * BLOCK_WIDTH) + (x * BLOCK_WIDTH);
let brushY = (this.y * BLOCK_HEIGHT) + (y * BLOCK_HEIGHT);
let diffX = Math.ceil(arrayX / 2);
let diffY = Math.ceil(arrayY / 2);
if (this.currentAsciiBlocks[arrayY] && this.currentAsciiBlocks[arrayY][arrayX]) {
targetBlock = this.currentAsciiBlocks[arrayY][arrayX];
let brushDiffX = arrayX - diffX;
let brushDiffY = arrayY - diffY;
if (this.canBg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
let brushX = this.x * BLOCK_WIDTH + x * BLOCK_WIDTH;
let brushY = this.y * BLOCK_HEIGHT + y * BLOCK_HEIGHT;
this.toolCtx.fillRect(
brushX,
brushY,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
if (
this.currentAsciiBlocks[arrayY] &&
this.currentAsciiBlocks[arrayY][arrayX]
) {
targetBlock = this.currentAsciiBlocks[arrayY][arrayX];
if (this.canTool) {
targetBlock.bg = this.$store.getters.getBgColour;
}
}
if (!plain) {
if (this.canBg && brushBlock.bg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
brushBlock.bg
];
if (this.canFg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.toolCtx.fillRect(brushX, brushY, BLOCK_WIDTH, BLOCK_HEIGHT);
if (this.canTool) {
targetBlock.fg = this.$store.getters.getFgColour;
}
}
if (this.canText) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.toolCtx.fillText(
curBlock.char,
brushX - 1,
brushY + BLOCK_HEIGHT - 3
);
if (this.canTool) {
targetBlock.char = this.$store.getters.getSelectedChar;
}
}
}
}
if (this.canTool ) {
targetBlock.bg = this.$store.getters.getBgColour;
}
}
this.toolCtx.stroke();
if (this.canFg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
brushBlock.fg
];
if (this.canTool ) {
targetBlock.fg = this.$store.getters.getFgColour;
}
}
if (this.canText && brushBlock.char) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
brushBlock.fg
];
this.toolCtx.fillText(
brushBlock.char,
brushX - 1,
brushY + BLOCK_HEIGHT - 3
);
if (this.canTool ) {
targetBlock.char = this.$store.getters.getSelectedChar;
}
}
} else {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
0
];
this.toolCtx.fillRect(brushX, brushY, BLOCK_WIDTH, BLOCK_HEIGHT);
}
}
}
}
this.toolCtx.stroke();
},
eraser() {
if (this.canTool) {
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
for (let x = 0; x < this.$store.getters.brushBlocks[0].length; x++) {
let curBlock = this.$store.getters.brushBlocks[y][x];
let arrayX = this.x + x;
let arrayY = this.y + y;
let diffX = Math.ceil(arrayX / 2);
let diffY = Math.ceil(arrayY / 2);
let brushDiffX = arrayX - diffX;
let brushDiffY = arrayY - diffY;
let brushX = this.x * BLOCK_WIDTH + x * BLOCK_WIDTH;
let brushY = this.y * BLOCK_HEIGHT + y * BLOCK_HEIGHT;
if (
this.currentAsciiBlocks[arrayY] &&
this.currentAsciiBlocks[arrayY][arrayX]
) {
targetBlock = this.currentAsciiBlocks[arrayY][arrayX];
if (this.$store.getters.getTargetingFg) {
targetBlock.fg = null;
}
if (this.$store.getters.getTargetingBg) {
targetBlock.bg = null;
}
if (this.$store.getters.getTargetingChar) {
targetBlock.char = null;
}
}
}
}
}
},
// Fill tool
fill() {
const { x } = this;
const { y } = this;