better brushes canvas id, fixed brush color draw issues (WIP)

This commit is contained in:
Hugh Bord 2021-08-06 15:12:37 +10:00
parent 29f800c534
commit fa5e7e0ad7
3 changed files with 19 additions and 40 deletions

View File

@ -101,7 +101,7 @@ export default {
return this.$store.getters.brushSizeType;
},
brushHistory() {
return this.$store.getters.brushHistory;
return this.$store.getters.brushHistory.slice(0,5);
},
brushLibrary() {
return this.$store.getters.brushLibrary;

View File

@ -13,7 +13,7 @@
</template>
<script>
import { mircColours99, blockWidth, blockHeight } from "../../ascii";
import { mircColours99, blockWidth, blockHeight, cyrb53 } from "../../ascii";
export default {
name: "BrushCanvas",
@ -73,7 +73,8 @@ export default {
return this.$store.getters.canvasKey + Math.round(Math.random()*1000);
},
canvasName() {
return `${this.canvasKey}-brush-canvas`;
let hash = cyrb53(JSON.stringify(this.getBlocks))
return `${hash}-brush-canvas`;
},
getBlocks() {
return this.blocks === false
@ -150,7 +151,7 @@ export default {
const curBlock = this.getBlocks[y][x];
if ((!this.isMainCanvas && curBlock.bg) || (curBlock.bg && this.isMainCanvas && this.isTargettingBg)) {
this.ctx.fillStyle = this.mircColours[(this.isMainCanvas ? this.currentBg : curBlock.bg)];
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(
x * BLOCK_WIDTH,
@ -161,13 +162,13 @@ export default {
}
if ((!this.isMainCanvas && curBlock.fg) || (curBlock.fg && this.isMainCanvas && this.isTargettingFg)) {
this.ctx.fillStyle = this.mircColours[(this.isMainCanvas ? this.currentFg : curBlock.fg)];
this.ctx.fillStyle = this.mircColours[curBlock.fg];
}
if ((!this.isMainCanvas && curBlock.char) || (curBlock.char && this.isMainCanvas && this.isTargettingChar)) {
this.ctx.fillStyle = this.mircColours[(this.isMainCanvas ? this.currentFg : curBlock.fg)];
this.ctx.fillStyle = this.mircColours[curBlock.fg];
this.ctx.fillText(
(this.isMainCanvas ? this.currentChar : curBlock.char),
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);

View File

@ -981,28 +981,20 @@ export default {
}
if (this.canTool && brushBlock.bg !== null) {
targetBlock.bg = !this.haveSelectBlocks
? this.currentBg
: brushBlock.bg;
targetBlock.bg = brushBlock.bg;
if (this.mirrorX) {
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].bg = !this.haveSelectBlocks
? this.currentBg
: brushBlock.bg;
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].bg = brushBlock.bg;
}
if (this.mirrorY) {
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].bg = !this.haveSelectBlocks
? this.currentBg
: brushBlock.bg;
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].bg = brushBlock.bg;
}
if (this.mirrorY && this.mirrorX) {
this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].bg = !this.haveSelectBlocks
? this.currentBg
: brushBlock.bg;
].bg = brushBlock.bg;
}
}
}
@ -1013,28 +1005,20 @@ export default {
: '#000000';
if (this.canTool && brushBlock.fg !== null) {
targetBlock.fg = !this.haveSelectBlocks
? this.currentFg
: brushBlock.fg;
targetBlock.fg = brushBlock.fg;
if (this.mirrorX) {
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].fg = !this.haveSelectBlocks
? this.currentFg
: brushBlock.fg;
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].fg = brushBlock.fg;
}
if (this.mirrorY) {
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].fg = !this.haveSelectBlocks
? this.currentFg
: brushBlock.fg;
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].fg = brushBlock.fg;
}
if (this.mirrorY && this.mirrorX) {
this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].fg = !this.haveSelectBlocks
? this.currentFg
: brushBlock.fg;
].fg = brushBlock.fg;
}
}
}
@ -1077,23 +1061,17 @@ export default {
: brushBlock.char;
if (this.mirrorX) {
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].char = !this.haveSelectBlocks
? this.currentChar
: brushBlock.char;
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].char = brushBlock.char;
}
if (this.mirrorY) {
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].char = !this.haveSelectBlocks
? this.currentChar
: brushBlock.char;
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].char = brushBlock.char;
}
if (this.mirrorY && this.mirrorX) {
this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].char = !this.haveSelectBlocks
? this.currentChar
: brushBlock.char;
].char = brushBlock.char;
}
}
}