2021-08-06 01:51:58 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-08-07 06:05:54 +00:00
|
|
|
<t-card class="overflow-x-scroll h-full">
|
|
|
|
<div :style="`height: ${blocksWidthHeight.h}px;width: ${blocksWidthHeight.w}px;`">
|
|
|
|
<canvas
|
|
|
|
:ref="canvasName"
|
|
|
|
:id="canvasName"
|
|
|
|
class="previewcanvas"
|
|
|
|
:width="blocksWidthHeight.w"
|
|
|
|
:height="blocksWidthHeight.h"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-08-06 04:00:21 +00:00
|
|
|
</t-card>
|
2021-08-06 01:51:58 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2021-08-07 06:05:54 +00:00
|
|
|
<style>
|
|
|
|
.previewcanvas {
|
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
|
border: lightgrey 1px solid;
|
|
|
|
z-index: 0;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2021-08-06 01:51:58 +00:00
|
|
|
<script>
|
2021-08-14 06:41:42 +00:00
|
|
|
import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks, checkVisible } from "../../ascii";
|
2021-08-06 01:51:58 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "BrushCanvas",
|
2021-08-14 06:41:42 +00:00
|
|
|
created() {
|
|
|
|
window.addEventListener('load', () => {
|
|
|
|
// Fixes the font on load issue
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
})
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
mounted() {
|
2021-08-14 06:41:42 +00:00
|
|
|
this.ctx = this.$refs[this.canvasName].getContext("2d");
|
2021-08-06 01:51:58 +00:00
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
blocks: {
|
|
|
|
type: [Array, Boolean],
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: () => ({
|
|
|
|
ctx: null,
|
|
|
|
redraw: true,
|
|
|
|
}),
|
|
|
|
computed: {
|
2021-08-14 06:41:42 +00:00
|
|
|
blockWidth() {
|
|
|
|
return blockWidth * this.blockSizeMultiplier;
|
|
|
|
},
|
|
|
|
blockHeight() {
|
|
|
|
return blockHeight * this.blockSizeMultiplier;
|
|
|
|
},
|
|
|
|
blockSizeMultiplier() {
|
|
|
|
return this.$store.getters.blockSizeMultiplier
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
currentAscii() {
|
|
|
|
return this.$store.getters.currentAscii;
|
|
|
|
},
|
|
|
|
toolbarState() {
|
|
|
|
return this.$store.getters.toolbarState;
|
|
|
|
},
|
|
|
|
isTargettingBg() {
|
|
|
|
return this.$store.getters.isTargettingBg;
|
|
|
|
},
|
|
|
|
isTargettingFg() {
|
|
|
|
return this.$store.getters.isTargettingFg;
|
|
|
|
},
|
|
|
|
isTargettingChar() {
|
|
|
|
return this.$store.getters.isTargettingChar;
|
|
|
|
},
|
|
|
|
currentFg() {
|
|
|
|
return this.$store.getters.currentFg;
|
|
|
|
},
|
|
|
|
currentBg() {
|
|
|
|
return this.$store.getters.currentBg;
|
|
|
|
},
|
|
|
|
currentChar() {
|
|
|
|
return this.$store.getters.currentChar;
|
|
|
|
},
|
|
|
|
brushSizeHeight() {
|
|
|
|
return this.$store.getters.brushSizeHeight;
|
|
|
|
},
|
|
|
|
brushSizeWidth() {
|
|
|
|
return this.$store.getters.brushSizeWidth;
|
|
|
|
},
|
|
|
|
brushSizeType() {
|
|
|
|
return this.$store.getters.brushSizeType;
|
|
|
|
},
|
|
|
|
options() {
|
|
|
|
return this.$store.getters.options;
|
|
|
|
},
|
|
|
|
canvasName() {
|
2021-08-06 05:12:37 +00:00
|
|
|
let hash = cyrb53(JSON.stringify(this.getBlocks))
|
|
|
|
return `${hash}-brush-canvas`;
|
2021-08-06 01:51:58 +00:00
|
|
|
},
|
|
|
|
getBlocks() {
|
|
|
|
return this.blocks === false
|
|
|
|
? this.$store.getters.brushBlocks
|
|
|
|
: this.blocks;
|
|
|
|
},
|
|
|
|
isMainCanvas() {
|
|
|
|
return this.blocks === false;
|
|
|
|
},
|
2021-08-06 04:00:21 +00:00
|
|
|
blocksWidthHeight() {
|
|
|
|
return {
|
2021-08-14 06:41:42 +00:00
|
|
|
w: getBlocksWidth(this.getBlocks) * this.blockWidth,
|
|
|
|
h: this.getBlocks.length * this.blockHeight
|
2021-08-07 22:36:00 +00:00
|
|
|
}
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
mircColours() {
|
|
|
|
return mircColours99;
|
|
|
|
},
|
2021-08-07 23:45:37 +00:00
|
|
|
canvasRef() {
|
|
|
|
return this.$refs[this.canvasName];
|
|
|
|
}
|
2021-08-06 01:51:58 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2021-08-14 06:41:42 +00:00
|
|
|
blockSizeMultiplier() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
getBlocks() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
2021-08-06 04:00:21 +00:00
|
|
|
blocks() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
currentAscii() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
brushSizeHeight() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
brushSizeWidth() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
isTargettingBg() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
isTargettingFg() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
isTargettingChar() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
currentFg() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
currentBg() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
currentChar() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
2021-08-07 02:41:47 +00:00
|
|
|
getBlocksWidth(blocks) {
|
|
|
|
return getBlocksWidth(blocks)
|
|
|
|
},
|
|
|
|
filterNullBlocks(blocks) {
|
|
|
|
return filterNullBlocks(blocks)
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
drawPreview() {
|
2021-08-07 23:45:37 +00:00
|
|
|
this.ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
|
2021-08-06 01:51:58 +00:00
|
|
|
this.ctx.fillStyle = this.mircColours[1];
|
|
|
|
|
|
|
|
// hack font for ascii shout outs 2 beenz
|
|
|
|
this.ctx.font = "13px Hack";
|
|
|
|
|
|
|
|
let y = 0;
|
|
|
|
let x = 0;
|
|
|
|
|
|
|
|
// Get middle block
|
|
|
|
if (this.getBlocks) {
|
2021-08-07 02:41:47 +00:00
|
|
|
let blocksWidth = this.getBlocksWidth(this.getBlocks)
|
2021-08-06 01:51:58 +00:00
|
|
|
for (y = 0; y < this.getBlocks.length; y++) {
|
2021-08-07 02:41:47 +00:00
|
|
|
for (x = 0; x < blocksWidth; x++) {
|
2021-08-06 01:51:58 +00:00
|
|
|
if (this.getBlocks[y] && this.getBlocks[y][x]) {
|
|
|
|
const curBlock = this.getBlocks[y][x];
|
|
|
|
|
2021-08-07 06:05:54 +00:00
|
|
|
if (curBlock.bg !== null) {
|
2021-08-06 05:12:37 +00:00
|
|
|
this.ctx.fillStyle = this.mircColours[curBlock.bg];
|
2021-08-06 01:51:58 +00:00
|
|
|
|
|
|
|
this.ctx.fillRect(
|
2021-08-14 06:41:42 +00:00
|
|
|
x * this.blockWidth,
|
|
|
|
y * this.blockHeight,
|
|
|
|
this.blockWidth,
|
|
|
|
this.blockHeight
|
2021-08-06 01:51:58 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-08-07 06:05:54 +00:00
|
|
|
if (curBlock.fg !== null) {
|
2021-08-06 05:12:37 +00:00
|
|
|
this.ctx.fillStyle = this.mircColours[curBlock.fg];
|
2021-08-06 01:51:58 +00:00
|
|
|
}
|
|
|
|
|
2021-08-07 06:05:54 +00:00
|
|
|
if (curBlock.char !== null) {
|
2021-08-06 05:12:37 +00:00
|
|
|
this.ctx.fillStyle = this.mircColours[curBlock.fg];
|
2021-08-06 01:51:58 +00:00
|
|
|
this.ctx.fillText(
|
2021-08-06 05:12:37 +00:00
|
|
|
curBlock.char,
|
2021-08-14 06:41:42 +00:00
|
|
|
x * this.blockWidth,
|
|
|
|
y * this.blockHeight + this.blockHeight - 3
|
2021-08-06 01:51:58 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
delayRedrawCanvas() {
|
|
|
|
if (this.redraw) {
|
|
|
|
this.redraw = false;
|
|
|
|
|
2021-08-07 22:36:00 +00:00
|
|
|
requestAnimationFrame(() => {
|
2021-08-06 01:51:58 +00:00
|
|
|
this.redraw = true;
|
|
|
|
this.drawPreview();
|
2021-08-07 22:36:00 +00:00
|
|
|
});
|
2021-08-06 01:51:58 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|