jewbird
/
asciibird
3
3
派生 0
代码 工单 合并请求 版本发布 动态

code review/epic clean for toolbar and editor, thx chat pals beenz n sniff

这个提交包含在：
Hugh Bord 2021-03-29 10:39:42 +10:00
父节点 729671ffa4
当前提交 88d7752c80
共有 4 个文件被更改，包括 211 次插入 和 321 次删除
显示统计 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

79
src/Dashboard.vue
查看文件

@ -47,7 +47,7 @@
<t-button @click="createClick()" class="ml-1">New ASCII</t-button>
<t-button @click="clearCache()" class="ml-1">Clear and Refresh</t-button>
<t-button @click="startImport('mirc')" class="ml-1">Import mIRC</t-button>
<t-button @click="startImport('ansi')" class="ml-1">Import ANSI</t-button>
<!-- <t-button @click="startImport('ansi')" class="ml-1">Import ANSI</t-button> -->
<input
type="file"
style="display: none"
@ -62,7 +62,7 @@
@click="changeTab(key, value)"
:disabled="false"
>
{{ value.title }} ({{ value.width }} / {{ value.height }})
{{ value.title }}
</t-button>
<Toolbar v-if="asciibirdMeta.length" />
@ -264,8 +264,6 @@ export default {
// The proper X and Y value of the block inside the ASCII
let asciiX = 0;
let asciiY = 0;
let firstColor = false;
let secondColor = false;
let colorChar1 = null;
let colorChar2 = null;
@ -304,23 +302,6 @@ export default {
break;
case "\u0003":
secondColor = false;
// CC
// if (
// asciiStringArray[0] === "\u0003" &&
// asciiStringArray[1] === "\u0003"
// ) {
// curBlock = {
// fg: null,
// bg: null,
// char: null,
// };
// console.log("Got CC");
// continue;
// }
asciiStringArray.shift();
theWidth++;
@ -334,7 +315,6 @@ export default {
asciiStringArray.shift();
} else if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.fg = parseInt(parsedColor);
// firstColor = true;
theWidth += parsedColor.toString().length;
asciiStringArray = asciiStringArray.slice(
@ -349,44 +329,42 @@ export default {
// No background colour
if (asciiStringArray[0] !== ",") {
secondColor = true;
break;
} else {
// Remove , from array
asciiStringArray.shift();
}
if (!secondColor) {
colorChar1 = `${asciiStringArray[0]}`;
colorChar2 = `${asciiStringArray[1]}`;
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
colorChar1 = `${asciiStringArray[0]}`;
colorChar2 = `${asciiStringArray[1]}`;
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
// Work out the 01, 02
if (
!isNaN(colorChar1) &&
!isNaN(colorChar2) &&
parseInt(colorChar2) > parseInt(colorChar1) &&
parseInt(parsedColor) <= 10
) {
parsedColor = parseInt(colorChar2);
asciiStringArray.shift();
}
// Work out the 01, 02
if (
!isNaN(colorChar1) &&
!isNaN(colorChar2) &&
parseInt(colorChar2) > parseInt(colorChar1) &&
!isNaN(parsedColor) &&
parseInt(parsedColor) <= 10
) {
parsedColor = parseInt(colorChar2);
asciiStringArray.shift();
}
if (isNaN(parsedColor)) {
curBlock.bg = parseInt(colorChar1);
theWidth += 1;
asciiStringArray.shift();
} else if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.bg = parseInt(parsedColor);
theWidth += parsedColor.toString().length;
if (isNaN(parsedColor)) {
curBlock.bg = parseInt(colorChar1);
theWidth += 1;
asciiStringArray.shift();
} else if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.bg = parseInt(parsedColor);
theWidth += parsedColor.toString().length;
asciiStringArray = asciiStringArray.slice(
parsedColor.toString().length,
asciiStringArray.length
);
asciiStringArray = asciiStringArray.slice(
parsedColor.toString().length,
asciiStringArray.length
);
break;
}
break;
}
break;
@ -416,6 +394,7 @@ export default {
this.currentTab = keys.pop();
this.$store.commit("changeTab", this.currentTab);
document.title = `asciibird - ${this.$store.getters.currentAscii.title}`;
},
createClick() {
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;

155
src/components/Toolbar.vue
查看文件

@ -2,7 +2,10 @@
<div>
<vue-draggable-resizable
@dragging="onDrag"
:grid="[$store.getters.currentAscii.blockHeight, $store.getters.currentAscii.blockWidth]"
:grid="[
$store.getters.currentAscii.blockHeight,
$store.getters.currentAscii.blockWidth,
]"
style="z-index: 5; min-height: 500px"
:min-width="200"
:max-width="500"
@ -14,22 +17,40 @@
<div style="height: 100%; min-height: 500px; max-height: 700px">
<t-card header="Tools and Stuff" style="height: 100%">
<label class="flex ml-1">
<t-checkbox name="targetingFg" v-model="toolbarState.targetingFg" :disabled="!watchTargetingBg && !watchTargetingText" />
<t-checkbox
name="targetingFg"
v-model="$store.getters.getToolbarState.targetingFg"
:disabled="!$store.getters.getTargetingBg && !$store.getters.getTargetingText"
/>
<span class="text-sm">FG</span>
</label>
<label class="flex ml-1">
<t-checkbox name="targetingBg" v-model="toolbarState.targetingBg" :disabled="!watchTargetingFg && !watchTargetingText" checked />
<t-checkbox
name="targetingBg"
v-model="$store.getters.getToolbarState.targetingBg"
:disabled="!$store.getters.getTargetingFg && !$store.getters.getTargetingText"
checked
/>
<span class="text-sm">BG</span>
</label>
<label class="flex ml-1">
<t-checkbox name="targetingText" v-model="toolbarState.targetingText" :disabled="!watchTargetingFg && !watchTargetingBg" />
<t-checkbox
name="targetingText"
v-model="$store.getters.getToolbarState.targetingText"
:disabled="!$store.getters.getTargetingFg && !$store.getters.getTargetingBg"
/>
<span class="text-sm">Text</span>
</label>
<t-card v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg" >
<t-card
v-if="
$store.getters.getToolbarState.isChoosingFg ||
$store.getters.getToolbarState.isChoosingBg
"
>
<t-button
type="button"
v-for="(value, keyColors) in mircColors"
v-for="(value, keyColors) in $store.getters.mircColors"
:key="keyColors"
:style="makeColorButtonClass(value)"
class="border-gray-200 p-2"
@ -42,22 +63,32 @@
<t-button
type="button"
:style="
makeColorButtonClass(mircColors[toolbarState.currentColorFg])
makeColorButtonClass(
$store.getters.mircColors[
$store.getters.getToolbarState.currentColorFg
]
)
"
class="border-gray-200 p-1"
id="currentColorFg"
@click="startColorChange(0)"
>FG</t-button>
>FG</t-button
>
<t-button
type="button"
:style="
makeColorButtonClass(mircColors[toolbarState.currentColorBg])
makeColorButtonClass(
$store.getters.mircColors[
$store.getters.getToolbarState.currentColorBg
]
)
"
class="border-gray-200 p-1"
id="currentColorBg"
@click="startColorChange(1)"
>BG</t-button>
>BG</t-button
>
<t-button
type="button"
@ -72,10 +103,10 @@
<t-button
type="button"
v-for="(value, keyToolbar) in toolbar"
v-for="(value, keyToolbar) in $store.getters.getToolbarIcons"
:key="keyToolbar + 50"
class="border-gray-200 max-h-7 max-w-5 w-7"
@click="onToolbarChange(value)"
@click="$store.commit('changeTool', value.name)"
>
<font-awesome-icon :icon="[value.fa, value.icon]" />
</t-button>
@ -89,80 +120,19 @@
<script>
export default {
created() {
this.mircColors = this.$store.state.mircColors;
this.charCodes = this.$store.state.charCodes;
this.toolbar = this.$store.state.toolbar;
this.toolbarState = this.$store.getters.getToolbarState;
this.onToolbarChange("default");
},
created() {},
name: "Toolbar",
data: () => ({
mircColors: null,
charCodes: null,
toolbar: null,
floating: {
width: 0,
height: 0,
x: 100,
y: 100,
},
toolbarState: {
currentColorFg: 0,
currentColorBg: 1,
isChoosingFg: false,
isChoosingBg: false,
isUpdating: false,
currentTool: "default",
targetingFg: false,
targetingBg: true,
targetingText: false,
},
}),
computed: {
watchFgChange() {
return this.$store.getters.getFgColor;
},
watchBgChange() {
return this.$store.getters.getBgColor;
},
watchTargetingFg() {
return this.toolbarState.targetingFg
},
watchTargetingBg() {
return this.toolbarState.targetingBg
},
watchTargetingText() {
return this.toolbarState.targetingText
},
// watchToolbarState() {
// return this.$store.getters.getToolbarState
// },
},
watch: {
watchFgChange(val, old) {
this.toolbarState.currentColorFg = val;
},
watchBgChange(val, old) {
this.toolbarState.currentColorBg = val;
},
// watchToolbarState(val, old) {
// this.toolbarState = val;
// },
watchTargetingFg(val, old) {
this.$store.commit("changeTargetingFg", val);
this.toolbarState.targetingFg = val
},
watchTargetingBg(val, old) {
this.$store.commit("changeTargetingBg", val);
this.toolbarState.targetingBg = val
},
watchTargetingText(val, old) {
this.$store.commit("changeTargetingText", val);
this.toolbarState.targetingText = val
},
},
computed: {},
watch: {},
methods: {
onResize(x, y, width, height) {
this.floating.x = x;
@ -174,9 +144,6 @@ export default {
this.floating.x = x;
this.floating.y = y;
},
onToolbarChange(item) {
this.$store.commit("changeTool", item.name);
},
makeColorButtonClass(color) {
return `background-color: ${color} !important;`;
},
@ -184,36 +151,35 @@ export default {
return "background-color: grey !important;";
},
swapColors() {
let bg = this.toolbarState.currentColorBg
let fg = this.toolbarState.currentColorFg
let bg = this.$store.getters.getToolbarState.currentColorBg;
let fg = this.$store.getters.getToolbarState.currentColorFg;
this.$store.commit("changeColorFg", bg);
this.$store.commit("changeColorBg", fg);
this.toolbarState.currentColorFg = bg
this.toolbarState.currentColorBg = fg
},
startColorChange(type) {
// this.toolbarState.isChoosingColor = true
if (type === 0) {
// // Fg
this.toolbarState.isChoosingFg = true;
this.$store.getters.getToolbarState.isChoosingFg = true;
} else {
// // Bg
this.toolbarState.isChoosingBg = true;
this.$store.getters.getToolbarState.isChoosingBg = true;
}
},
onColorChange(color) {
if (this.toolbarState.isChoosingFg) {
if (this.$store.getters.getToolbarState.isChoosingFg) {
this.updateColor(0, color);
}
if (this.toolbarState.isChoosingBg) {
if (this.$store.getters.getToolbarState.isChoosingBg) {
this.updateColor(1, color);
}
},
updateColor(type, color) {
if (this.toolbarState.isChoosingBg || this.toolbarState.isChoosingFg) {
if (
this.$store.getters.getToolbarState.isChoosingBg ||
this.$store.getters.getToolbarState.isChoosingFg
) {
switch (type) {
// FG
case 0:
@ -228,10 +194,13 @@ export default {
break;
}
this.toolbarState.isChoosingBg = false;
this.toolbarState.isChoosingFg = false;
this.$store.getters.getToolbarState.isChoosingBg = false;
this.$store.getters.getToolbarState.isChoosingFg = false;
this.$store.commit("updateToolBarState", this.toolbarState);
this.$store.commit(
"updateToolBarState",
$store.getters.getToolbarState
);
}
},
},

3
src/store/index.js
查看文件

@ -52,7 +52,7 @@ export default new Vuex.Store({
tab: 0,
// asciibirdMeta holds all of the ASCII information for all the tabs
asciibirdMeta: [],
toolbar: [{
toolbarIcons: [{
name: 'default',
icon: 'mouse-pointer',
fa: 'fas',
@ -135,6 +135,7 @@ export default new Vuex.Store({
}
},
getters: {
getToolbarIcons: state => state.toolbarIcons,
getToolbarState: state => state.toolbarState,
getCurrentTool: state => state.toolbarState.currentTool,
getTargetingBg: state => state.toolbarState.targetingBg,

295
src/views/Editor.vue
查看文件

@ -3,10 +3,13 @@
<div id="canvas-area">
<vue-draggable-resizable
style="z-index: 5; left: 220px"
:grid="[currentAsciibirdMeta.blockHeight, currentAsciibirdMeta.blockWidth]"
:w="canvas.width + (currentAsciibirdMeta.blockWidth/2)"
:h="canvas.height + (currentAsciibirdMeta.blockHeight/2)"
:draggable="currentTool === 'default'"
:grid="[
$store.getters.currentAscii.blockHeight,
$store.getters.currentAscii.blockWidth,
]"
:w="canvas.width + $store.getters.currentAscii.blockWidth"
:h="canvas.height + $store.getters.currentAscii.blockHeight"
:draggable="$store.getters.getCurrentTool === 'default'"
@resizing="onCanvasResize"
@dragging="onCanvasDrag"
>
@ -32,9 +35,8 @@ body {
.canvas {
position: absolute;
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.8);
border: lightgrey 1px solid;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
z-index: 0;
}
</style>
@ -47,48 +49,28 @@ export default {
props: ["tab", "refresh"],
components: { Block },
mounted() {
this.currentAsciibirdMeta = this.$store.getters.currentAscii;
this.mircColors = this.$store.getters.mircColors;
this.toolbarState = this.$store.getters.getToolbarState;
if (this.currentAsciibirdMeta.blocks) {
if (this.$store.getters.currentAscii.blocks) {
this.ctx = this.$refs.canvas.getContext("2d");
this.canvas.width =
this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
this.$store.getters.currentAscii.width *
this.$store.getters.currentAscii.blockWidth;
this.canvas.height =
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
this.$store.getters.currentAscii.height *
this.$store.getters.currentAscii.blockHeight;
this.delayRedrawCanvas();
this.$store.commit("changeTool", "default");
this.currentTool = "default";
}
},
created() {},
data: () => ({
text: "ASCII",
currentAsciibirdMeta: {
title: "Loading...",
width: 0,
height: 0,
},
mircColors: null,
ctx: null,
canvas: {
width: 512,
height: 512,
},
x: 0,
y: 0,
refreshCanvas: 0,
currentTool: null,
redraw: true,
toolbarState: {
targetingFg: false,
targetingBg: false,
targetingText: false,
},
x: 0, // Ascii X and Y
y: 0, // Ascii X and Y
redraw: true, // Used to limit canvas redraw
canTool: false,
}),
computed: {
@ -96,60 +78,35 @@ export default {
return `width:${this.canvas.width};height:${this.canvas.height};`;
},
generateTitle() {
return this.currentAsciibirdMeta.title ?? "";
},
watchToolChange() {
return this.$store.getters.getCurrentTool;
return this.$store.getters.currentAscii.title ?? "";
},
watchAsciiChange() {
return this.$store.getters.currentAscii;
},
watchTargetingFg() {
return this.$store.getters.getTargetingFg;
},
watchTargetingBg() {
return this.$store.getters.getTargetingBg;
},
watchTargetingText() {
return this.$store.getters.getTargetingText;
},
},
watch: {
watchAsciiChange(val, old) {
this.currentAsciibirdMeta = val;
this.canvas.width =
this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
this.$store.getters.currentAscii.width *
this.$store.getters.currentAscii.blockWidth;
this.canvas.height =
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
this.$store.getters.currentAscii.height *
this.$store.getters.currentAscii.blockHeight;
this.delayRedrawCanvas();
window.title = this.currentAsciibirdMeta.name
},
watchToolChange(val) {
this.currentTool = val;
},
watchTargetingFg(val) {
this.toolbarState.targetingFg = val;
},
watchTargetingBg(val) {
this.toolbarState.targetingBg = val;
},
watchTargetingText(val) {
this.toolbarState.targetingText = val;
document.title = `asciibird - ${this.$store.getters.currentAscii.title}`;
},
},
methods: {
getMircColor(index) {
return this.$store.getters.mircColors[index];
},
redrawCanvas() {
// Clears the whole canvas
// Clears the whole canvas, we can maybe get a better way to check how far
// we need to clear the canvas
this.ctx.clearRect(0, 0, 10000, 10000);
if (this.currentAsciibirdMeta.blocks.length) {
const BLOCK_WIDTH = this.currentAsciibirdMeta.blockWidth;
const BLOCK_HEIGHT = this.currentAsciibirdMeta.blockHeight;
if (this.$store.getters.currentAscii.blocks.length) {
const BLOCK_WIDTH = this.$store.getters.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.$store.getters.currentAscii.blockHeight;
// Position of the meta array
let x = 0;
@ -160,23 +117,29 @@ export default {
let canvasY = 0;
let curBlock = {};
// hack font for ascii shout outs 2 beenz
this.ctx.font = "12.5px Hack";
for (y = 0; y < this.currentAsciibirdMeta.height + 1; y++) {
for (y = 0; y < this.$store.getters.currentAscii.height + 1; y++) {
canvasY = BLOCK_HEIGHT * y;
for (x = 0; x < this.currentAsciibirdMeta.width + 1; x++) {
for (x = 0; x < this.$store.getters.currentAscii.width + 1; x++) {
if (
this.currentAsciibirdMeta.blocks[y] &&
this.currentAsciibirdMeta.blocks[y][x]
this.$store.getters.currentAscii.blocks[y] &&
this.$store.getters.currentAscii.blocks[y][x]
) {
curBlock = Object.assign(curBlock,this.currentAsciibirdMeta.blocks[y][x])
curBlock = Object.assign(
curBlock,
this.$store.getters.currentAscii.blocks[y][x]
);
canvasX = BLOCK_WIDTH * x;
// Background block
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColors[curBlock.bg];
this.ctx.fillStyle = this.$store.getters.mircColors[
curBlock.bg
];
this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
} else {
this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
@ -184,7 +147,9 @@ export default {
if (curBlock.char) {
if (curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColors[curBlock.fg];
this.ctx.fillStyle = this.$store.getters.mircColors[
curBlock.fg
];
} else {
this.ctx.fillStyle = "#000000";
}
@ -209,14 +174,13 @@ export default {
},
onCanvasDrag(left, top) {
// Update left and top in panel
},
// Mouse Up, Down and Move
canvasMouseUp() {
this.delayRedrawCanvas();
switch (this.currentTool) {
switch (this.$store.getters.getCurrentTool) {
case "brush":
this.canTool = false;
break;
@ -229,63 +193,51 @@ export default {
this.canTool = false;
break;
}
},
canvasMouseDown() {
switch (this.currentTool) {
case "default":
break;
if (
this.$store.getters.currentAscii.blocks[this.y] &&
this.$store.getters.currentAscii.blocks[this.y][this.x]
) {
switch (this.$store.getters.getCurrentTool) {
case "default":
break;
case "fill":
// this.canTool = true;
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
this.fillTool()
}
break;
case "fill":
this.fillTool();
break;
case "brush":
this.canTool = true;
break;
case "brush":
this.canTool = true;
break;
case "eraser":
this.canTool = true;
break;
case "eraser":
this.canTool = true;
break;
case "dropper":
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
let curBlock = this.currentAsciibirdMeta.blocks[this.y][this.x];
case "dropper":
let curBlock = this.$store.getters.currentAscii.blocks[this.y][
this.x
];
if (this.toolbarState.targetingFg) {
this.$store.commit("changeColorFg", curBlock.fg);
}
if (this.$store.getters.getTargetingFg) {
this.$store.commit("changeColorFg", curBlock.fg);
}
if (this.toolbarState.targetingBg) {
this.$store.commit("changeColorBg", curBlock.bg);
}
if (this.$store.getters.getTargetingBg) {
this.$store.commit("changeColorBg", curBlock.bg);
}
// if (this.toolbarState.targetingText) {
// }
}
this.currentTool = "default";
this.$store.commit("changeTool", this.currentTool);
break;
this.$store.commit(
"changeTool",
this.$store.getters.getCurrentTool
);
break;
}
}
},
canvasMouseMove(e) {
if (e.offsetX >= 0) {
this.x = e.offsetX;
}
@ -294,92 +246,81 @@ export default {
this.y = e.offsetY;
}
this.x = Math.floor(this.x / this.currentAsciibirdMeta.blockWidth);
this.y = Math.floor(this.y / this.currentAsciibirdMeta.blockHeight);
this.x = Math.floor(this.x / this.$store.getters.currentAscii.blockWidth);
this.y = Math.floor(
this.y / this.$store.getters.currentAscii.blockHeight
);
switch (this.currentTool) {
case "brush":
if (this.canTool) {
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
if (this.toolbarState.targetingFg) {
this.currentAsciibirdMeta.blocks[this.y][
if (
this.$store.getters.currentAscii.blocks[this.y] &&
this.$store.getters.currentAscii.blocks[this.y][this.x]
) {
switch (this.$store.getters.getCurrentTool) {
case "brush":
if (this.canTool) {
if (this.$store.getters.getTargetingFg) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].fg = this.$store.getters.getFgColor;
}
if (this.toolbarState.targetingBg) {
this.currentAsciibirdMeta.blocks[this.y][
if (this.$store.getters.getTargetingBg) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].bg = this.$store.getters.getBgColor;
}
// if (this.toolbarState.targetingText) {
// this.currentAsciibirdMeta.blocks[this.y][this.x].char = null;
// }
}
break;
}
break;
case "eraser":
if (this.canTool) {
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
if (this.toolbarState.targetingFg) {
this.currentAsciibirdMeta.blocks[this.y][this.x].fg = null;
case "eraser":
if (this.canTool) {
if (this.$store.getters.getTargetingFg) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].fg = null;
}
if (this.toolbarState.targetingBg) {
this.currentAsciibirdMeta.blocks[this.y][this.x].bg = null;
if (this.$store.getters.getTargetingBg) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].bg = null;
}
if (this.toolbarState.targetingText) {
this.currentAsciibirdMeta.blocks[this.y][this.x].char = null;
if (this.$store.getters.getTargetingText) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].char = null;
}
}
}
break;
break;
}
}
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
delayRedrawCanvas() {
if (this.redraw) {
this.redraw = false;
setTimeout(() => {
this.redraw = true
this.redraw = true;
this.redrawCanvas();
}, 8);
}
},
// TOOLS
fillTool() {
let fillStartBlock = this.currentAsciibirdMeta.blocks[this.y][this.x];
if (this.toolbarState.targetingBg) {
let fillSameBg = fillStartBlock.bg
let fillStartBlock = this.$store.getters.currentAscii.blocks[this.y][
this.x
];
if (this.$store.getters.getTargetingBg) {
let fillSameBg = fillStartBlock.bg;
}
console.log(fillStartBlock)
console.log(fillStartBlock);
},
},
};
</script>