2020-12-19 01:27:50 +00:00
|
|
|
<template>
|
2020-12-27 02:42:26 +00:00
|
|
|
<div>
|
2021-05-22 02:49:19 +00:00
|
|
|
<div
|
|
|
|
id="canvas-area"
|
|
|
|
@mouseleave="isMouseOnCanvas = false"
|
|
|
|
@mouseenter="isMouseOnCanvas = true"
|
|
|
|
>
|
2021-03-20 03:45:10 +00:00
|
|
|
<vue-draggable-resizable
|
2021-05-01 02:17:49 +00:00
|
|
|
style="z-index: 5"
|
2021-04-24 00:20:11 +00:00
|
|
|
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
|
|
|
:w="canvas.width"
|
|
|
|
:h="canvas.height"
|
2021-04-02 02:07:49 +00:00
|
|
|
:draggable="$store.getters.getCurrentTool === 0"
|
2021-04-03 03:13:03 +00:00
|
|
|
@resizestop="onCanvasResize"
|
2021-04-01 23:01:36 +00:00
|
|
|
@dragstop="onCavasDragStop"
|
2021-04-03 03:13:03 +00:00
|
|
|
:x="currentAscii.x"
|
|
|
|
:y="currentAscii.y"
|
2021-03-20 03:45:10 +00:00
|
|
|
>
|
2021-04-03 03:13:03 +00:00
|
|
|
<canvas
|
2021-03-31 23:29:55 +00:00
|
|
|
ref="canvastools"
|
|
|
|
id="canvastools"
|
2021-05-01 02:17:49 +00:00
|
|
|
class="canvastools"
|
2021-03-31 23:29:55 +00:00
|
|
|
:width="canvas.width"
|
|
|
|
:height="canvas.height"
|
|
|
|
@mousemove="canvasMouseMove"
|
|
|
|
@mousedown="canvasMouseDown"
|
|
|
|
@mouseup="canvasMouseUp"
|
2021-04-03 03:13:03 +00:00
|
|
|
></canvas>
|
2021-03-31 23:29:55 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
<canvas
|
|
|
|
ref="canvas"
|
|
|
|
id="canvas"
|
|
|
|
class="canvas"
|
2021-03-26 11:36:37 +00:00
|
|
|
:width="canvas.width"
|
|
|
|
:height="canvas.height"
|
2021-03-27 02:07:33 +00:00
|
|
|
@mousemove="canvasMouseMove"
|
|
|
|
@mousedown="canvasMouseDown"
|
|
|
|
@mouseup="canvasMouseUp"
|
2021-03-20 03:45:10 +00:00
|
|
|
></canvas>
|
|
|
|
</vue-draggable-resizable>
|
2020-12-27 02:42:26 +00:00
|
|
|
</div>
|
2020-12-19 01:27:50 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2021-01-02 01:52:44 +00:00
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
background: #eee;
|
|
|
|
}
|
|
|
|
|
2021-05-01 02:17:49 +00:00
|
|
|
.canvastools {
|
2021-04-03 03:13:03 +00:00
|
|
|
position: absolute;
|
|
|
|
z-index: 100;
|
2021-05-22 02:49:19 +00:00
|
|
|
opacity: 0.5;
|
2021-05-29 01:09:09 +00:00
|
|
|
cursor: crosshair;
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
|
2021-01-10 03:06:46 +00:00
|
|
|
.canvas {
|
|
|
|
position: absolute;
|
2021-03-29 00:39:42 +00:00
|
|
|
background: rgba(0, 0, 0, 0.8);
|
2021-01-10 03:06:46 +00:00
|
|
|
border: lightgrey 1px solid;
|
|
|
|
z-index: 0;
|
|
|
|
}
|
2021-01-02 01:52:44 +00:00
|
|
|
</style>
|
|
|
|
|
2020-12-19 01:27:50 +00:00
|
|
|
<script>
|
2021-04-17 00:12:02 +00:00
|
|
|
import Block from "../components/Block.vue";
|
2020-12-27 02:42:26 +00:00
|
|
|
|
2020-12-19 01:27:50 +00:00
|
|
|
export default {
|
2021-04-17 00:12:02 +00:00
|
|
|
name: "Editor",
|
2020-12-27 02:42:26 +00:00
|
|
|
components: { Block },
|
2021-01-02 01:52:44 +00:00
|
|
|
mounted() {
|
2021-05-16 00:30:18 +00:00
|
|
|
if (this.currentAsciiBlocks) {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.ctx = this.$refs.canvas.getContext("2d");
|
2021-05-01 02:17:49 +00:00
|
|
|
this.toolCtx = this.$refs.canvastools.getContext("2d");
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
this.canvas.width =
|
|
|
|
this.$store.getters.currentAscii.width *
|
|
|
|
this.$store.getters.currentAscii.blockWidth;
|
|
|
|
this.canvas.height =
|
|
|
|
this.$store.getters.currentAscii.height *
|
|
|
|
this.$store.getters.currentAscii.blockHeight;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-03-27 02:07:33 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeTool", 0);
|
2021-04-03 03:13:03 +00:00
|
|
|
|
|
|
|
const _this = this;
|
|
|
|
this._keyListener = function (e) {
|
2021-05-15 01:52:20 +00:00
|
|
|
if (this.currentToolIsText) {
|
2021-05-22 02:49:19 +00:00
|
|
|
e.preventDefault();
|
2021-05-15 01:52:20 +00:00
|
|
|
_this.canvasKeyDown(e.key);
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-05-15 01:52:20 +00:00
|
|
|
// Ctrl Z here
|
2021-06-05 01:25:23 +00:00
|
|
|
// skg - thanks for mac key suggestion, bro
|
|
|
|
if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
|
2021-05-15 01:52:20 +00:00
|
|
|
e.preventDefault();
|
2021-05-22 02:49:19 +00:00
|
|
|
this.undo();
|
2021-05-15 01:52:20 +00:00
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-05-15 01:52:20 +00:00
|
|
|
// Ctrl Y here
|
2021-06-05 01:25:23 +00:00
|
|
|
if (e.key === "y" && (e.ctrlKey || e.metaKey)) {
|
2021-05-22 02:49:19 +00:00
|
|
|
console.log("ctrl y");
|
|
|
|
e.preventDefault();
|
2021-06-29 01:49:39 +00:00
|
|
|
// Fk it works :\
|
2021-07-10 01:41:17 +00:00
|
|
|
this.redo();
|
|
|
|
this.redo();
|
2021-05-15 01:52:20 +00:00
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
// Ctrl C - copy blocks
|
|
|
|
if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (this.isSelecting && this.isSelected && this.selectBlocks.length) {
|
|
|
|
this.$store.commit("selectBlocks", this.selectBlocks);
|
2021-06-29 01:49:39 +00:00
|
|
|
|
|
|
|
// this.$store.commit("brushBlocks", this.selectBlocks);
|
|
|
|
// this.canTool = true;
|
|
|
|
// this.drawBrush();
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
console.log("ctrl c", this.selectBlocks);
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Ctrl V - paste blocks
|
|
|
|
// Not working
|
|
|
|
if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (this.isSelecting && this.isSelected && this.selectBlocks.length) {
|
2021-07-10 01:41:17 +00:00
|
|
|
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
|
|
|
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
|
|
|
let x = 0;
|
|
|
|
let y = 0;
|
2021-06-05 01:25:23 +00:00
|
|
|
|
2021-07-10 01:41:17 +00:00
|
|
|
for (y = 0; y <= this.selectBlocks.height; y++) {
|
|
|
|
canvasY = BLOCK_HEIGHT * y;
|
2021-06-05 01:25:23 +00:00
|
|
|
|
2021-07-10 01:41:17 +00:00
|
|
|
for (x = 0; x <= this.selectBlocks.width; x++) {
|
|
|
|
if (
|
|
|
|
this.currentAsciiBlocks[y] &&
|
|
|
|
this.currentAsciiBlocks[y][x]
|
|
|
|
) {
|
|
|
|
if (this.selectBlocks[y] && this.selectBlocks[y][x]) {
|
|
|
|
this.currentAsciiBlocks[y][x] = {
|
|
|
|
...this.selectBlocks[y][x],
|
|
|
|
};
|
2021-06-05 01:25:23 +00:00
|
|
|
}
|
|
|
|
}
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
console.log("ctrl v", this.selectBlocks);
|
|
|
|
|
|
|
|
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
|
|
|
this.delayRedrawCanvas();
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
}
|
2021-04-03 03:13:03 +00:00
|
|
|
};
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
document.addEventListener("keydown", this._keyListener.bind(this));
|
2021-03-13 05:27:07 +00:00
|
|
|
}
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
data: () => ({
|
2021-01-02 01:52:44 +00:00
|
|
|
ctx: null,
|
2021-04-03 03:13:03 +00:00
|
|
|
toolCtx: null,
|
2021-01-09 01:57:48 +00:00
|
|
|
canvas: {
|
2021-03-26 11:36:37 +00:00
|
|
|
width: 512,
|
|
|
|
height: 512,
|
2021-01-09 01:57:48 +00:00
|
|
|
},
|
2021-03-29 00:39:42 +00:00
|
|
|
x: 0, // Ascii X and Y
|
|
|
|
y: 0, // Ascii X and Y
|
|
|
|
redraw: true, // Used to limit canvas redraw
|
2021-03-27 04:16:15 +00:00
|
|
|
canTool: false,
|
2021-04-01 23:01:36 +00:00
|
|
|
throttle: true,
|
2021-04-03 03:13:03 +00:00
|
|
|
textEditing: {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
},
|
|
|
|
selecting: {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
endX: null,
|
|
|
|
endY: null,
|
|
|
|
canSelect: false,
|
|
|
|
},
|
2021-05-22 02:49:19 +00:00
|
|
|
isMouseOnCanvas: false,
|
2021-06-05 01:25:23 +00:00
|
|
|
selectBlocks: [],
|
2020-12-27 02:42:26 +00:00
|
|
|
}),
|
|
|
|
computed: {
|
2021-04-03 03:13:03 +00:00
|
|
|
currentAscii() {
|
2021-03-13 05:27:07 +00:00
|
|
|
return this.$store.getters.currentAscii;
|
2021-02-06 01:57:35 +00:00
|
|
|
},
|
2021-05-16 00:30:18 +00:00
|
|
|
currentAsciiBlocks() {
|
|
|
|
return this.$store.getters.currentAsciiBlocks;
|
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
currentTool() {
|
2021-04-17 00:12:02 +00:00
|
|
|
return this.$store.getters.getToolbarIcons[
|
|
|
|
this.$store.getters.getCurrentTool
|
|
|
|
];
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
2021-05-15 01:52:20 +00:00
|
|
|
currentToolIsText() {
|
2021-05-22 02:49:19 +00:00
|
|
|
return (
|
|
|
|
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
|
|
|
.name === "text"
|
|
|
|
);
|
2021-05-15 01:52:20 +00:00
|
|
|
},
|
2021-05-08 01:51:30 +00:00
|
|
|
canFg() {
|
2021-05-22 02:49:19 +00:00
|
|
|
return this.$store.getters.getTargetingFg;
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
|
|
|
canBg() {
|
2021-05-22 02:49:19 +00:00
|
|
|
return this.$store.getters.getTargetingBg;
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
|
|
|
canText() {
|
2021-05-22 02:49:19 +00:00
|
|
|
return this.$store.getters.getTargetingChar;
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
isTextEditing() {
|
2021-04-17 00:12:02 +00:00
|
|
|
return (
|
|
|
|
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
|
|
|
.name === "text"
|
|
|
|
);
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
|
|
|
isSelecting() {
|
2021-04-17 00:12:02 +00:00
|
|
|
return (
|
|
|
|
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
|
|
|
.name === "select"
|
|
|
|
);
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
2021-04-24 00:20:11 +00:00
|
|
|
dragboxStyle() {
|
2021-05-01 02:17:49 +00:00
|
|
|
return `z-index: 5;width:${this.canvas.width + 4};height:${
|
|
|
|
this.canvas.height + 4
|
|
|
|
};`;
|
|
|
|
},
|
2021-06-05 01:25:23 +00:00
|
|
|
isSelected() {
|
|
|
|
return (
|
|
|
|
this.selecting.startX &&
|
|
|
|
this.selecting.startY &&
|
|
|
|
this.selecting.endX &&
|
|
|
|
this.selecting.endY
|
|
|
|
);
|
|
|
|
},
|
2021-06-29 01:49:39 +00:00
|
|
|
brushBlocks() {
|
|
|
|
return this.$store.getters.brushBlocks;
|
2021-07-10 01:41:17 +00:00
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2021-04-03 03:13:03 +00:00
|
|
|
currentAscii(val, old) {
|
2021-07-10 01:41:17 +00:00
|
|
|
console.log("changed");
|
|
|
|
if (val !== old) {
|
|
|
|
this.onCanvasResize(100,100,
|
|
|
|
this.currentAscii.width * this.currentAscii.blockWidth,
|
|
|
|
this.currentAscii.height * this.currentAscii.blockHeight
|
|
|
|
);
|
2021-03-29 00:39:42 +00:00
|
|
|
|
2021-07-10 01:41:17 +00:00
|
|
|
this.canvas.width =
|
|
|
|
this.currentAscii.width * this.currentAscii.blockWidth;
|
|
|
|
this.canvas.height =
|
|
|
|
this.currentAscii.height * this.currentAscii.blockHeight;
|
|
|
|
|
|
|
|
this.delayRedrawCanvas();
|
2021-03-27 04:16:15 +00:00
|
|
|
|
2021-07-10 01:41:17 +00:00
|
|
|
document.title = `asciibird - ${this.currentAscii.title}`;
|
|
|
|
}
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
|
|
|
currentTool() {
|
2021-04-17 00:12:02 +00:00
|
|
|
switch (
|
|
|
|
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
|
|
|
.name
|
|
|
|
) {
|
|
|
|
case "default":
|
2021-04-03 03:13:03 +00:00
|
|
|
Object.assign(this.textEditing, {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
});
|
|
|
|
|
|
|
|
Object.assign(this.selecting, {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
endX: null,
|
|
|
|
endY: null,
|
|
|
|
canSelect: false,
|
|
|
|
});
|
|
|
|
break;
|
|
|
|
}
|
2021-03-27 02:07:33 +00:00
|
|
|
},
|
2021-05-22 02:49:19 +00:00
|
|
|
isMouseOnCanvas() {
|
|
|
|
this.clearToolCanvas();
|
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-05-15 01:52:20 +00:00
|
|
|
undo() {
|
2021-05-22 02:49:19 +00:00
|
|
|
this.$store.commit("undoBlocks");
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
redo() {
|
|
|
|
this.$store.commit("redoBlocks");
|
|
|
|
this.delayRedrawCanvas();
|
2021-05-15 01:52:20 +00:00
|
|
|
},
|
2021-06-05 01:25:23 +00:00
|
|
|
redrawSelect() {
|
2021-05-16 00:30:18 +00:00
|
|
|
if (this.currentAsciiBlocks.length) {
|
2021-06-05 01:25:23 +00:00
|
|
|
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
|
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
this.clearToolCanvas();
|
2021-06-05 01:25:23 +00:00
|
|
|
this.toolCtx.fillStyle = this.$store.getters.mircColours[0];
|
2021-04-03 03:13:03 +00:00
|
|
|
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
|
|
|
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
|
|
|
|
2021-05-01 02:17:49 +00:00
|
|
|
this.toolCtx.fillRect(
|
2021-06-05 01:25:23 +00:00
|
|
|
this.selecting.startX * BLOCK_WIDTH,
|
|
|
|
this.selecting.startY * BLOCK_HEIGHT,
|
|
|
|
this.selecting.endX * BLOCK_WIDTH,
|
|
|
|
this.selecting.endY * BLOCK_HEIGHT
|
2021-04-17 00:12:02 +00:00
|
|
|
);
|
2021-06-05 01:25:23 +00:00
|
|
|
|
2021-05-01 02:17:49 +00:00
|
|
|
this.toolCtx.stroke();
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
},
|
2021-01-09 01:57:48 +00:00
|
|
|
redrawCanvas() {
|
2021-03-29 00:39:42 +00:00
|
|
|
// Clears the whole canvas, we can maybe get a better way to check how far
|
|
|
|
// we need to clear the canvas
|
2021-03-26 11:36:37 +00:00
|
|
|
this.ctx.clearRect(0, 0, 10000, 10000);
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-05-16 00:30:18 +00:00
|
|
|
if (this.currentAsciiBlocks.length) {
|
2021-04-03 03:13:03 +00:00
|
|
|
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
|
|
|
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
// Position of the meta array
|
|
|
|
let x = 0;
|
|
|
|
let y = 0;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
// Draws the actual rectangle
|
|
|
|
let canvasX = 0;
|
|
|
|
let canvasY = 0;
|
|
|
|
let curBlock = {};
|
2021-03-06 02:03:22 +00:00
|
|
|
|
2021-03-29 00:39:42 +00:00
|
|
|
// hack font for ascii shout outs 2 beenz
|
2021-04-17 00:12:02 +00:00
|
|
|
this.ctx.font = "12.5px Hack";
|
2021-03-06 02:03:22 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
for (y = 0; y < this.currentAscii.height + 1; y++) {
|
2021-03-20 03:45:10 +00:00
|
|
|
canvasY = BLOCK_HEIGHT * y;
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
for (x = 0; x < this.currentAscii.width + 1; x++) {
|
2021-05-16 00:30:18 +00:00
|
|
|
if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
|
2021-05-22 02:49:19 +00:00
|
|
|
curBlock = Object.assign(curBlock, this.currentAsciiBlocks[y][x]);
|
2021-03-27 02:07:33 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
canvasX = BLOCK_WIDTH * x;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
// Background block
|
|
|
|
if (curBlock.bg !== null) {
|
2021-07-10 01:41:17 +00:00
|
|
|
this.ctx.fillStyle =
|
|
|
|
this.$store.getters.mircColours[curBlock.bg];
|
2021-03-20 03:45:10 +00:00
|
|
|
this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
|
|
|
|
} else {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
|
2021-03-20 03:45:10 +00:00
|
|
|
}
|
2021-03-13 05:27:07 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
if (curBlock.char) {
|
|
|
|
if (curBlock.fg !== null) {
|
2021-07-10 01:41:17 +00:00
|
|
|
this.ctx.fillStyle =
|
|
|
|
this.$store.getters.mircColours[curBlock.fg];
|
2021-03-20 03:45:10 +00:00
|
|
|
} else {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.ctx.fillStyle = "#000000";
|
2021-03-13 05:27:07 +00:00
|
|
|
}
|
2021-03-20 03:45:10 +00:00
|
|
|
|
|
|
|
this.ctx.fillText(
|
|
|
|
curBlock.char,
|
2021-07-10 01:41:17 +00:00
|
|
|
canvasX + 0.5,
|
2021-04-17 00:12:02 +00:00
|
|
|
canvasY + BLOCK_HEIGHT - 3
|
2021-03-20 03:45:10 +00:00
|
|
|
);
|
2021-03-06 02:03:22 +00:00
|
|
|
}
|
2021-01-23 02:50:32 +00:00
|
|
|
}
|
2021-01-30 02:33:11 +00:00
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
}
|
2021-03-20 03:45:10 +00:00
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
this.ctx.stroke();
|
2021-03-27 04:16:15 +00:00
|
|
|
},
|
|
|
|
onCanvasResize(left, top, width, height) {
|
2021-04-03 03:13:03 +00:00
|
|
|
const emptyBlock = {
|
|
|
|
bg: null,
|
|
|
|
fg: null,
|
|
|
|
char: null,
|
|
|
|
};
|
|
|
|
|
|
|
|
const blocks = this.$store.getters.currentAsciiBlocks;
|
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
const oldWidth = blocks[0].length;
|
|
|
|
const oldHeight = blocks.length;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
const canvasBlockHeight = Math.floor(
|
|
|
|
height / this.currentAscii.blockHeight
|
|
|
|
);
|
2021-04-03 03:13:03 +00:00
|
|
|
const canvasBlockWidth = Math.floor(width / this.currentAscii.blockWidth);
|
|
|
|
|
2021-05-15 01:57:44 +00:00
|
|
|
if (canvasBlockHeight > oldHeight || canvasBlockWidth > oldWidth) {
|
2021-07-10 01:41:17 +00:00
|
|
|
// console.log({ canvasBlockHeight, oldHeight });
|
2021-04-03 03:13:03 +00:00
|
|
|
|
|
|
|
for (let y = 0; y < canvasBlockHeight; y++) {
|
|
|
|
// New row
|
|
|
|
if (!blocks[y]) {
|
|
|
|
blocks[y] = [];
|
|
|
|
for (let x = 0; x < canvasBlockWidth; x++) {
|
2021-04-17 00:12:02 +00:00
|
|
|
blocks[y][x] = Object.assign({}, emptyBlock);
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// blocks[y]
|
|
|
|
// no new rows but new cols
|
|
|
|
for (let x = 0; x < canvasBlockWidth; x++) {
|
|
|
|
if (blocks[y] && !blocks[y][x]) {
|
2021-04-17 00:12:02 +00:00
|
|
|
blocks[y][x] = Object.assign({}, emptyBlock);
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (canvasBlockWidth > oldWidth) {
|
2021-07-10 01:41:17 +00:00
|
|
|
// console.log({ canvasBlockWidth, oldWidth });
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canvas.width = width;
|
|
|
|
this.canvas.height = height;
|
2021-04-01 23:01:36 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeAsciiWidthHeight", {
|
2021-04-03 03:13:03 +00:00
|
|
|
width: canvasBlockWidth,
|
|
|
|
height: canvasBlockHeight,
|
|
|
|
});
|
2021-04-01 23:01:36 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("updateAsciiBlocks", blocks);
|
2021-04-03 03:13:03 +00:00
|
|
|
// Restructure blocks code here
|
2021-03-27 04:16:15 +00:00
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
2021-04-01 23:01:36 +00:00
|
|
|
onCavasDragStop(x, y) {
|
2021-03-27 04:16:15 +00:00
|
|
|
// Update left and top in panel
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeAsciiCanvasState", { x, y });
|
2021-03-27 04:16:15 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
canvasKeyDown(char) {
|
2021-04-17 00:12:02 +00:00
|
|
|
if (this.isTextEditing) {
|
|
|
|
if (
|
2021-05-16 00:30:18 +00:00
|
|
|
this.currentAsciiBlocks[this.textEditing.startY] &&
|
|
|
|
this.currentAsciiBlocks[this.textEditing.startY][
|
2021-04-17 00:12:02 +00:00
|
|
|
this.textEditing.startX
|
|
|
|
]
|
|
|
|
) {
|
2021-07-10 01:41:17 +00:00
|
|
|
const targetBlock =
|
|
|
|
this.currentAsciiBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX
|
|
|
|
];
|
2021-03-27 04:16:15 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
switch (char) {
|
|
|
|
case "Backspace":
|
2021-05-01 02:17:49 +00:00
|
|
|
if (
|
2021-05-16 00:30:18 +00:00
|
|
|
this.currentAsciiBlocks[this.textEditing.startY][
|
2021-05-01 02:17:49 +00:00
|
|
|
this.textEditing.startX - 1
|
|
|
|
]
|
|
|
|
) {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.textEditing.startX--;
|
|
|
|
targetBlock.char = null;
|
|
|
|
}
|
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
default:
|
|
|
|
if (char.length === 1) {
|
|
|
|
if (this.$store.getters.getTargetingFg) {
|
|
|
|
targetBlock.fg = this.$store.getters.getFgColour;
|
|
|
|
}
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
targetBlock.char = char;
|
|
|
|
|
|
|
|
if (
|
2021-05-16 00:30:18 +00:00
|
|
|
this.currentAsciiBlocks[this.textEditing.startY][
|
2021-04-17 00:12:02 +00:00
|
|
|
this.textEditing.startX + 1
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.textEditing.startX++;
|
|
|
|
} else {
|
|
|
|
this.textEditing.startX = 0;
|
|
|
|
|
|
|
|
if (this.textEditing.startY < this.currentAscii.height) {
|
|
|
|
this.textEditing.startY++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
|
|
|
|
this.drawTextIndicator();
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
}
|
|
|
|
},
|
2021-03-27 04:16:15 +00:00
|
|
|
// Mouse Up, Down and Move
|
|
|
|
canvasMouseUp() {
|
2021-06-05 01:25:23 +00:00
|
|
|
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
|
|
|
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
switch (this.currentTool.name) {
|
|
|
|
case "brush":
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canTool = false;
|
2021-05-15 01:52:20 +00:00
|
|
|
|
2021-05-16 00:30:18 +00:00
|
|
|
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-03-27 04:16:15 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "eraser":
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canTool = false;
|
2021-05-15 01:52:20 +00:00
|
|
|
|
2021-05-16 00:30:18 +00:00
|
|
|
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
2021-03-27 04:16:15 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "fill":
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canTool = false;
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
2021-03-27 04:16:15 +00:00
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "select":
|
2021-04-03 03:13:03 +00:00
|
|
|
this.selecting.canSelect = false;
|
|
|
|
this.clearToolCanvas();
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
//
|
2021-06-29 01:49:39 +00:00
|
|
|
let x = 0;
|
|
|
|
let y = 0;
|
|
|
|
|
|
|
|
let arrayX = 0;
|
|
|
|
let arrayY = 0;
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
let canvasY = 0;
|
|
|
|
let canvasX = 0;
|
|
|
|
let curBlock = {};
|
|
|
|
this.selectBlocks = [];
|
|
|
|
|
2021-06-29 01:49:39 +00:00
|
|
|
for (y = 0; y < this.currentAscii.height; y++) {
|
2021-06-05 01:25:23 +00:00
|
|
|
canvasY = BLOCK_HEIGHT * y;
|
|
|
|
|
|
|
|
if (y >= this.selecting.startY && y <= this.selecting.endY) {
|
|
|
|
if (!this.selectBlocks[y]) {
|
|
|
|
this.selectBlocks[y] = [];
|
|
|
|
}
|
|
|
|
|
2021-06-29 01:49:39 +00:00
|
|
|
for (x = 0; x < this.currentAscii.width; x++) {
|
2021-06-05 01:25:23 +00:00
|
|
|
if (x >= this.selecting.startX && x <= this.selecting.endX) {
|
|
|
|
if (
|
|
|
|
this.currentAsciiBlocks[y] &&
|
|
|
|
this.currentAsciiBlocks[y][x]
|
|
|
|
) {
|
|
|
|
curBlock = Object.assign(
|
|
|
|
curBlock,
|
|
|
|
this.currentAsciiBlocks[y][x]
|
|
|
|
);
|
|
|
|
|
|
|
|
if (!this.selectBlocks[y][x]) {
|
|
|
|
this.selectBlocks[y][x] = { ...curBlock };
|
|
|
|
}
|
|
|
|
|
|
|
|
canvasX = BLOCK_WIDTH * x;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.redrawSelect();
|
2021-04-03 03:13:03 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "text":
|
2021-05-22 02:49:19 +00:00
|
|
|
// if (
|
|
|
|
// this.textEditing.startX === null ||
|
|
|
|
// this.textEditing.startY === null
|
|
|
|
// ) {
|
|
|
|
this.textEditing.startX = this.x;
|
|
|
|
this.textEditing.startY = this.y;
|
|
|
|
// }
|
2021-04-03 03:13:03 +00:00
|
|
|
break;
|
2021-03-27 04:16:15 +00:00
|
|
|
}
|
2021-03-31 23:29:55 +00:00
|
|
|
|
|
|
|
this.delayRedrawCanvas();
|
2021-03-27 04:16:15 +00:00
|
|
|
},
|
|
|
|
canvasMouseDown() {
|
2021-05-01 02:17:49 +00:00
|
|
|
this.toolCtx.clearRect(0, 0, 10000, 10000);
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-02 04:43:11 +00:00
|
|
|
if (
|
2021-05-16 00:30:18 +00:00
|
|
|
this.currentAsciiBlocks[this.y] &&
|
|
|
|
this.currentAsciiBlocks[this.y][this.x] &&
|
2021-04-17 00:12:02 +00:00
|
|
|
this.currentTool
|
2021-04-02 04:43:11 +00:00
|
|
|
) {
|
2021-05-16 00:30:18 +00:00
|
|
|
const targetBlock = this.currentAsciiBlocks[this.y][this.x];
|
2021-04-02 04:43:11 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
switch (this.currentTool.name) {
|
|
|
|
case "default":
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "select":
|
|
|
|
if (
|
|
|
|
this.selecting.startX === null ||
|
2021-06-05 01:25:23 +00:00
|
|
|
(this.selecting.startY === null &&
|
|
|
|
this.selecting.canSelect === false)
|
2021-04-17 00:12:02 +00:00
|
|
|
) {
|
2021-04-03 03:13:03 +00:00
|
|
|
this.selecting.startX = this.x;
|
|
|
|
this.selecting.startY = this.y;
|
|
|
|
this.selecting.canSelect = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "fill":
|
2021-04-02 04:43:11 +00:00
|
|
|
this.fill();
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "brush":
|
2021-03-29 00:39:42 +00:00
|
|
|
this.canTool = true;
|
2021-05-22 02:49:19 +00:00
|
|
|
this.drawBrush();
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "eraser":
|
2021-03-29 00:39:42 +00:00
|
|
|
this.canTool = true;
|
2021-05-22 02:49:19 +00:00
|
|
|
this.eraser();
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "dropper":
|
2021-03-29 00:39:42 +00:00
|
|
|
if (this.$store.getters.getTargetingFg) {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeColourFg", targetBlock.fg);
|
2021-03-29 00:39:42 +00:00
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
|
2021-03-29 00:39:42 +00:00
|
|
|
if (this.$store.getters.getTargetingBg) {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeColourBg", targetBlock.bg);
|
2021-03-29 00:39:42 +00:00
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
|
2021-03-29 08:21:23 +00:00
|
|
|
if (this.$store.getters.getTargetingChar) {
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeChar", targetBlock.char);
|
2021-03-29 08:21:23 +00:00
|
|
|
}
|
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$store.commit("changeTool", 0);
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
},
|
2021-03-27 02:07:33 +00:00
|
|
|
canvasMouseMove(e) {
|
2021-03-13 03:30:58 +00:00
|
|
|
if (e.offsetX >= 0) {
|
|
|
|
this.x = e.offsetX;
|
|
|
|
}
|
2021-03-13 05:27:07 +00:00
|
|
|
|
2021-03-13 03:30:58 +00:00
|
|
|
if (e.offsetY >= 0) {
|
|
|
|
this.y = e.offsetY;
|
|
|
|
}
|
|
|
|
|
2021-05-29 01:09:09 +00:00
|
|
|
this.x = Math.floor(this.x / this.currentAscii.blockWidth);
|
|
|
|
this.y = Math.floor(this.y / this.currentAscii.blockHeight);
|
2021-03-29 00:39:42 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
this.$emit("coordsupdate", { x: this.x, y: this.y });
|
2021-03-29 05:10:31 +00:00
|
|
|
|
2021-03-29 00:39:42 +00:00
|
|
|
if (
|
2021-05-16 00:30:18 +00:00
|
|
|
this.currentAsciiBlocks[this.y] &&
|
|
|
|
this.currentAsciiBlocks[this.y][this.x]
|
2021-03-29 00:39:42 +00:00
|
|
|
) {
|
2021-05-16 00:30:18 +00:00
|
|
|
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
|
2021-04-02 04:43:11 +00:00
|
|
|
|
|
|
|
switch (
|
|
|
|
this.$store.getters.getToolbarIcons[
|
|
|
|
this.$store.getters.getCurrentTool
|
|
|
|
].name
|
|
|
|
) {
|
2021-04-17 00:12:02 +00:00
|
|
|
case "brush":
|
2021-05-22 02:49:19 +00:00
|
|
|
if (this.isMouseOnCanvas) {
|
|
|
|
this.drawBrush();
|
|
|
|
}
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
2021-03-27 02:07:33 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "eraser":
|
2021-05-22 02:49:19 +00:00
|
|
|
if (this.isMouseOnCanvas) {
|
|
|
|
this.drawBrush(true);
|
2021-03-27 02:07:33 +00:00
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
this.eraser();
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
case "select":
|
2021-04-03 03:13:03 +00:00
|
|
|
if (this.selecting.canSelect) {
|
|
|
|
this.selecting.endX = this.x;
|
|
|
|
this.selecting.endY = this.y;
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
this.redrawSelect();
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
if (!this.isSelected) {
|
|
|
|
this.redrawSelect();
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-04-03 03:13:03 +00:00
|
|
|
|
|
|
|
break;
|
2021-05-22 02:49:19 +00:00
|
|
|
|
|
|
|
case "text":
|
|
|
|
this.drawIndicator();
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "dropper":
|
|
|
|
this.drawIndicator();
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "fill":
|
|
|
|
this.drawIndicator();
|
|
|
|
break;
|
2021-03-29 00:39:42 +00:00
|
|
|
}
|
2021-03-27 02:07:33 +00:00
|
|
|
}
|
|
|
|
|
2021-03-29 00:39:42 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-03-13 03:30:58 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
clearToolCanvas() {
|
2021-05-01 02:17:49 +00:00
|
|
|
if (this.toolCtx) {
|
|
|
|
this.toolCtx.clearRect(0, 0, 10000, 10000);
|
|
|
|
this.toolCtx.stroke();
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
},
|
2021-03-27 02:07:33 +00:00
|
|
|
delayRedrawCanvas() {
|
|
|
|
if (this.redraw) {
|
|
|
|
this.redraw = false;
|
2021-03-29 00:39:42 +00:00
|
|
|
|
2021-03-27 02:07:33 +00:00
|
|
|
setTimeout(() => {
|
2021-03-29 00:39:42 +00:00
|
|
|
this.redraw = true;
|
2021-03-27 02:07:33 +00:00
|
|
|
this.redrawCanvas();
|
2021-03-31 23:29:55 +00:00
|
|
|
}, this.$store.state.options.canvasRedrawSpeed);
|
2021-03-27 02:07:33 +00:00
|
|
|
}
|
2021-03-26 11:36:37 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
//
|
|
|
|
// TOOLS
|
|
|
|
//
|
2021-05-22 02:49:19 +00:00
|
|
|
drawIndicator() {
|
|
|
|
this.clearToolCanvas();
|
2021-05-29 00:45:16 +00:00
|
|
|
|
|
|
|
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
let indicatorColour = targetBlock.bg === 0 ? 1 : 0;
|
2021-05-29 00:45:16 +00:00
|
|
|
|
|
|
|
if (targetBlock.bg === 8) {
|
|
|
|
indicatorColour = 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.toolCtx.fillStyle = this.$store.getters.mircColours[indicatorColour];
|
2021-05-22 02:49:19 +00:00
|
|
|
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
|
|
|
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
2021-06-05 01:25:23 +00:00
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
this.toolCtx.fillRect(
|
|
|
|
this.x * BLOCK_WIDTH,
|
|
|
|
this.y * BLOCK_HEIGHT,
|
|
|
|
BLOCK_WIDTH,
|
|
|
|
BLOCK_HEIGHT
|
|
|
|
);
|
|
|
|
|
|
|
|
this.toolCtx.stroke();
|
|
|
|
},
|
|
|
|
drawTextIndicator() {
|
|
|
|
this.clearToolCanvas();
|
2021-05-29 01:09:09 +00:00
|
|
|
|
2021-07-10 01:41:17 +00:00
|
|
|
let targetBlock =
|
|
|
|
this.currentAsciiBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX
|
|
|
|
];
|
2021-05-29 01:09:09 +00:00
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
let indicatorColour = targetBlock.bg === 0 ? 1 : 0;
|
2021-05-29 01:09:09 +00:00
|
|
|
|
|
|
|
if (targetBlock.bg === 8) {
|
|
|
|
indicatorColour = 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.toolCtx.fillStyle = this.$store.getters.mircColours[indicatorColour];
|
2021-05-22 02:49:19 +00:00
|
|
|
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
|
|
|
|
);
|
|
|
|
|
|
|
|
this.toolCtx.stroke();
|
|
|
|
},
|
|
|
|
drawBrush(plain = false) {
|
|
|
|
this.clearToolCanvas();
|
|
|
|
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
|
|
|
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
|
|
|
|
|
|
|
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
|
2021-05-08 01:51:30 +00:00
|
|
|
|
2021-07-10 01:41:17 +00:00
|
|
|
let brushDiffX = Math.floor(this.brushBlocks[0].length / 2) * BLOCK_WIDTH;
|
|
|
|
let brushDiffY = Math.floor(this.brushBlocks.length / 2) * BLOCK_HEIGHT;
|
2021-05-29 00:28:30 +00:00
|
|
|
|
2021-06-29 01:49:39 +00:00
|
|
|
for (let y = 0; y < this.brushBlocks.length; y++) {
|
|
|
|
for (let x = 0; x < this.brushBlocks[0].length; x++) {
|
|
|
|
let brushBlock = this.brushBlocks[y][x];
|
2021-05-08 01:51:30 +00:00
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
let brushX = this.x * BLOCK_WIDTH + x * BLOCK_WIDTH - brushDiffX;
|
|
|
|
let brushY = this.y * BLOCK_HEIGHT + y * BLOCK_HEIGHT - brushDiffY;
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
let brushYHeight = brushY / BLOCK_HEIGHT;
|
|
|
|
let brushXWidth = brushX / BLOCK_WIDTH;
|
2021-05-29 01:09:09 +00:00
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
if (
|
2021-05-29 01:09:09 +00:00
|
|
|
this.currentAsciiBlocks[brushYHeight] &&
|
2021-06-05 01:25:23 +00:00
|
|
|
this.currentAsciiBlocks[brushYHeight][brushXWidth]
|
2021-05-22 02:49:19 +00:00
|
|
|
) {
|
2021-05-29 01:09:09 +00:00
|
|
|
targetBlock = this.currentAsciiBlocks[brushYHeight][brushXWidth];
|
2021-05-22 02:49:19 +00:00
|
|
|
|
|
|
|
if (!plain) {
|
2021-06-05 01:25:23 +00:00
|
|
|
if (this.canBg) {
|
|
|
|
if (brushBlock.bg !== null) {
|
2021-07-10 01:41:17 +00:00
|
|
|
this.toolCtx.fillStyle =
|
|
|
|
this.$store.getters.mircColours[brushBlock.bg];
|
2021-06-05 01:25:23 +00:00
|
|
|
} else {
|
|
|
|
this.toolCtx.fillStyle = "#FFFFFF";
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
this.toolCtx.fillRect(
|
|
|
|
brushX,
|
|
|
|
brushY,
|
|
|
|
BLOCK_WIDTH,
|
|
|
|
BLOCK_HEIGHT
|
|
|
|
);
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-06-19 01:34:31 +00:00
|
|
|
if (this.canTool && brushBlock.bg !== null) {
|
2021-05-22 02:49:19 +00:00
|
|
|
targetBlock.bg = this.$store.getters.getBgColour;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
if (this.canFg) {
|
|
|
|
if (brushBlock.fg !== null) {
|
2021-07-10 01:41:17 +00:00
|
|
|
this.toolCtx.fillStyle =
|
|
|
|
this.$store.getters.mircColours[brushBlock.fg];
|
2021-06-05 01:25:23 +00:00
|
|
|
} else {
|
|
|
|
this.toolCtx.fillStyle = "#000000";
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-06-19 01:34:31 +00:00
|
|
|
if (this.canTool && brushBlock.fg !== null) {
|
2021-05-22 02:49:19 +00:00
|
|
|
targetBlock.fg = this.$store.getters.getFgColour;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
if (this.canText && brushBlock.char !== null) {
|
2021-07-10 01:41:17 +00:00
|
|
|
this.toolCtx.fillStyle =
|
|
|
|
this.$store.getters.mircColours[brushBlock.fg];
|
2021-05-29 00:28:30 +00:00
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
this.toolCtx.fillText(
|
|
|
|
brushBlock.char,
|
|
|
|
brushX - 1,
|
|
|
|
brushY + BLOCK_HEIGHT - 3
|
|
|
|
);
|
|
|
|
|
2021-06-19 01:34:31 +00:00
|
|
|
if (this.canTool && brushBlock.char !== null) {
|
2021-05-22 02:49:19 +00:00
|
|
|
targetBlock.char = this.$store.getters.getSelectedChar;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
2021-06-05 01:25:23 +00:00
|
|
|
this.toolCtx.fillStyle = this.$store.getters.mircColours[0];
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
this.toolCtx.fillRect(brushX, brushY, BLOCK_WIDTH, BLOCK_HEIGHT);
|
2021-05-22 02:49:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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];
|
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
let brushDiffX =
|
|
|
|
Math.floor(this.$store.getters.brushBlocks[0].length / 2) *
|
|
|
|
BLOCK_WIDTH;
|
|
|
|
let brushDiffY =
|
|
|
|
Math.floor(this.$store.getters.brushBlocks.length / 2) * BLOCK_HEIGHT;
|
2021-05-29 01:09:09 +00:00
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
|
|
|
|
for (let x = 0; x < this.$store.getters.brushBlocks[0].length; x++) {
|
2021-06-05 01:25:23 +00:00
|
|
|
let brushX = this.x * BLOCK_WIDTH + x * BLOCK_WIDTH - brushDiffX;
|
|
|
|
let brushY = this.y * BLOCK_HEIGHT + y * BLOCK_HEIGHT - brushDiffY;
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-06-05 01:25:23 +00:00
|
|
|
if (
|
|
|
|
this.currentAsciiBlocks[brushY / BLOCK_HEIGHT] &&
|
|
|
|
this.currentAsciiBlocks[brushY / BLOCK_HEIGHT][
|
|
|
|
brushX / BLOCK_WIDTH
|
|
|
|
]
|
|
|
|
) {
|
2021-07-10 01:41:17 +00:00
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiBlocks[brushY / BLOCK_HEIGHT][
|
|
|
|
brushX / BLOCK_WIDTH
|
|
|
|
];
|
2021-05-22 02:49:19 +00:00
|
|
|
|
|
|
|
if (this.$store.getters.getTargetingFg) {
|
|
|
|
targetBlock.fg = null;
|
2021-05-08 01:51:30 +00:00
|
|
|
}
|
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
if (this.$store.getters.getTargetingBg) {
|
|
|
|
targetBlock.bg = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.$store.getters.getTargetingChar) {
|
|
|
|
targetBlock.char = null;
|
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
2021-05-22 02:49:19 +00:00
|
|
|
// Fill tool
|
2021-04-02 04:43:11 +00:00
|
|
|
fill() {
|
2021-04-03 03:13:03 +00:00
|
|
|
const { x } = this;
|
|
|
|
const { y } = this;
|
2021-04-02 04:43:11 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
const newColor = this.$store.getters.getBgColour;
|
2021-04-02 04:43:11 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Get the input which needs to be replaced.
|
2021-05-16 00:30:18 +00:00
|
|
|
const current = this.currentAsciiBlocks[y][x].bg;
|
2021-04-02 04:43:11 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// If the newColor is same as the existing
|
|
|
|
// Then return the original image.
|
2021-04-02 04:43:11 +00:00
|
|
|
if (current === newColor) {
|
2021-05-16 00:30:18 +00:00
|
|
|
return this.currentAsciiBlocks;
|
2021-04-02 04:43:11 +00:00
|
|
|
}
|
2021-03-27 04:24:05 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Other wise call the fill function which will fill in the existing image.
|
2021-05-16 00:30:18 +00:00
|
|
|
this.fillTool(this.currentAsciiBlocks, y, x, newColor, current);
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-05-16 00:30:18 +00:00
|
|
|
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
2021-04-02 04:43:11 +00:00
|
|
|
},
|
|
|
|
fillTool(fillBlocks, y, x, newColor, current) {
|
2021-04-03 03:13:03 +00:00
|
|
|
// If row is less than 0
|
2021-04-02 04:43:11 +00:00
|
|
|
if (x < 0) {
|
|
|
|
return;
|
|
|
|
}
|
2021-04-02 00:19:33 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// If column is less than 0
|
2021-04-02 04:43:11 +00:00
|
|
|
if (y < 0) {
|
|
|
|
return;
|
|
|
|
}
|
2021-04-02 00:19:33 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// If row is greater than image length
|
2021-05-01 02:17:49 +00:00
|
|
|
if (x >= this.currentAscii.width) {
|
2021-04-02 04:43:11 +00:00
|
|
|
return;
|
|
|
|
}
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// If column is greater than image length
|
2021-05-01 02:17:49 +00:00
|
|
|
if (y >= this.currentAscii.height) {
|
2021-04-02 04:43:11 +00:00
|
|
|
return;
|
|
|
|
}
|
2021-04-02 03:36:00 +00:00
|
|
|
|
2021-04-02 04:43:11 +00:00
|
|
|
if (!fillBlocks[y] && !fillBlocks[y][x]) {
|
|
|
|
return;
|
|
|
|
}
|
2021-04-02 00:19:33 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// If the current pixel is not which needs to be replaced
|
2021-04-02 04:43:11 +00:00
|
|
|
if (fillBlocks[y][x].bg !== current) {
|
|
|
|
return;
|
|
|
|
}
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-02 04:43:11 +00:00
|
|
|
fillBlocks[y][x].bg = newColor;
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill in all four directions
|
|
|
|
// Fill Prev row
|
2021-04-02 04:43:11 +00:00
|
|
|
this.fillTool(fillBlocks, y, x - 1, newColor, current);
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill Next row
|
2021-04-02 04:43:11 +00:00
|
|
|
this.fillTool(fillBlocks, y, x + 1, newColor, current);
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill Prev col
|
|
|
|
this.fillTool(fillBlocks, y - 1, x, newColor, current);
|
2021-04-02 03:36:00 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill next col
|
|
|
|
this.fillTool(fillBlocks, y + 1, x, newColor, current);
|
2021-01-10 03:06:46 +00:00
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
2020-12-19 01:27:50 +00:00
|
|
|
};
|
|
|
|
</script>
|