2020-12-19 01:27:50 +00:00
|
|
|
<template>
|
2020-12-27 02:42:26 +00:00
|
|
|
<div>
|
2021-01-02 01:52:44 +00:00
|
|
|
<h1>
|
|
|
|
{{ currentAsciibirdMeta.title }} ({{ currentAsciibirdMeta.width }} /
|
|
|
|
{{ currentAsciibirdMeta.height }})
|
|
|
|
</h1>
|
2021-01-09 01:57:48 +00:00
|
|
|
<!-- <pre><small>{{ JSON.stringify(currentAsciibirdMeta) }}</small></pre> -->
|
|
|
|
|
2021-01-10 03:06:46 +00:00
|
|
|
<!-- @mousedown="processMouseDown"
|
2021-01-09 01:57:48 +00:00
|
|
|
@mousemove="processMouseMove"
|
|
|
|
@mouseup="processMouseUp" -->
|
2020-12-27 02:42:26 +00:00
|
|
|
|
2021-01-10 03:06:46 +00:00
|
|
|
<div id="canvas-area" style="position: relative">
|
|
|
|
<canvas
|
|
|
|
ref="grid"
|
|
|
|
id="grid"
|
|
|
|
width="5024"
|
|
|
|
height="5024"
|
|
|
|
class="gridCanvas"
|
|
|
|
></canvas>
|
|
|
|
|
2021-01-02 01:52:44 +00:00
|
|
|
<canvas
|
|
|
|
:ref="generateCanvasId"
|
|
|
|
:id="generateCanvasId"
|
2021-01-10 03:06:46 +00:00
|
|
|
:width="canvas.width"
|
|
|
|
:height="canvas.height"
|
|
|
|
class="canvas"
|
2021-01-02 01:52:44 +00:00
|
|
|
></canvas>
|
2021-02-13 01:24:14 +00:00
|
|
|
|
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-01-10 03:06:46 +00:00
|
|
|
.canvas {
|
|
|
|
position: absolute;
|
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
|
border: lightgrey 1px solid;
|
|
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
|
|
|
|
z-index: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.gridCanvas {
|
|
|
|
position: absolute;
|
|
|
|
border: lightgrey 1px solid;
|
|
|
|
border-radius: 5px;
|
|
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
|
|
|
|
z-index: -1;
|
|
|
|
margin-left: -2502px;
|
|
|
|
margin-top: -2493px;
|
|
|
|
width: 5000px;
|
|
|
|
height: 5000px;
|
|
|
|
display: block;
|
2021-01-02 01:52:44 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2020-12-19 01:27:50 +00:00
|
|
|
<script>
|
2021-01-23 02:50:32 +00:00
|
|
|
import VueDraggableResizable from "vue-draggable-resizable";
|
2021-01-10 03:06:46 +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-01-10 03:06:46 +00:00
|
|
|
name: "Editor",
|
2020-12-27 02:42:26 +00:00
|
|
|
components: { Block },
|
2021-01-02 01:52:44 +00:00
|
|
|
mounted() {
|
2020-12-27 02:42:26 +00:00
|
|
|
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[0];
|
|
|
|
},
|
2021-01-10 03:06:46 +00:00
|
|
|
created() {},
|
2020-12-27 02:42:26 +00:00
|
|
|
data: () => ({
|
2021-01-10 03:06:46 +00:00
|
|
|
text: "ASCII",
|
2021-01-23 02:50:32 +00:00
|
|
|
currentAsciibirdMeta: {
|
|
|
|
title: "Loading...",
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
},
|
2021-01-02 01:52:44 +00:00
|
|
|
data: {
|
2021-01-10 03:06:46 +00:00
|
|
|
message: "Hello Vue!",
|
2021-01-02 01:52:44 +00:00
|
|
|
vueCanvas: null,
|
|
|
|
},
|
|
|
|
ctx: null,
|
|
|
|
selectionMode: false,
|
|
|
|
startPosition: {
|
|
|
|
x: null,
|
|
|
|
y: null,
|
|
|
|
},
|
2021-01-09 01:57:48 +00:00
|
|
|
canvas: {
|
2021-01-10 03:06:46 +00:00
|
|
|
width: 2048,
|
|
|
|
height: 2048,
|
2021-01-09 01:57:48 +00:00
|
|
|
},
|
2021-01-10 03:06:46 +00:00
|
|
|
gridCtx: null,
|
2020-12-27 02:42:26 +00:00
|
|
|
}),
|
|
|
|
computed: {
|
|
|
|
getFullPath() {
|
|
|
|
return this.$route.path;
|
|
|
|
},
|
2021-01-02 01:52:44 +00:00
|
|
|
generateCanvasId() {
|
2021-01-10 03:06:46 +00:00
|
|
|
return `canvas`;
|
2021-01-02 01:52:44 +00:00
|
|
|
},
|
2021-01-23 02:50:32 +00:00
|
|
|
watchBlocksChange() {
|
2021-01-30 02:33:11 +00:00
|
|
|
return this.currentAsciibirdMeta;
|
2021-01-23 02:50:32 +00:00
|
|
|
},
|
|
|
|
generateTitle() {
|
2021-01-30 02:33:11 +00:00
|
|
|
return this.currentAsciibirdMeta.title ?? "";
|
|
|
|
},
|
2021-02-06 01:57:35 +00:00
|
|
|
watchColorChange() {
|
2021-02-13 01:51:01 +00:00
|
|
|
return this.$store.getColor
|
2021-02-06 01:57:35 +00:00
|
|
|
},
|
|
|
|
watchToolChange() {
|
2021-02-13 01:51:01 +00:00
|
|
|
return this.$store.getTool
|
2021-02-06 01:57:35 +00:00
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2021-02-06 01:57:35 +00:00
|
|
|
getFullPath(val) {
|
2021-01-23 02:50:32 +00:00
|
|
|
this.onChangeTab(val.split("/").join(""));
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
2021-02-06 01:57:35 +00:00
|
|
|
watchColorChange(val) {
|
|
|
|
console.log(JSON.stringify(val))
|
|
|
|
},
|
|
|
|
watchToolChange(val) {
|
|
|
|
console.log(JSON.stringify(val))
|
|
|
|
}
|
2021-01-30 02:33:11 +00:00
|
|
|
// watchBlocksChange(val, old) {
|
2021-02-06 01:57:35 +00:00
|
|
|
// if (this.$refs[this.generate CanvasId]) {
|
2021-01-30 02:33:11 +00:00
|
|
|
// this.ctx = this.$refs.canvas.getContext("2d");
|
|
|
|
// this.gridCtx = this.$refs.grid.getContext("2d");
|
|
|
|
|
|
|
|
// this.drawGrid();
|
|
|
|
// this.redrawCanvas();
|
|
|
|
|
|
|
|
// this.canvas.width = val.width * val.blockWidth;
|
|
|
|
// this.canvas.height = val.height * val.blockHeight;
|
|
|
|
// }
|
|
|
|
// },
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-01-10 03:06:46 +00:00
|
|
|
onChangeTab(val) {
|
2021-01-09 01:57:48 +00:00
|
|
|
// Get the asciimeta index from the route URL
|
2021-01-10 03:06:46 +00:00
|
|
|
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[val];
|
|
|
|
|
2021-01-07 23:32:19 +00:00
|
|
|
|
2021-01-08 00:47:08 +00:00
|
|
|
// I dono some routs bs or some bs needs -1 to make it all work
|
2021-01-10 03:06:46 +00:00
|
|
|
// Some lame canvas reference bug when changing routes
|
|
|
|
// The newest canvas is not yet available for some reason at this stage, however we can still reference the previous one
|
2021-01-23 02:50:32 +00:00
|
|
|
const currentRefCanvas = "canvas";
|
2021-01-07 23:32:19 +00:00
|
|
|
|
2021-01-08 00:47:08 +00:00
|
|
|
if (this.$refs[currentRefCanvas]) {
|
2021-01-10 03:06:46 +00:00
|
|
|
this.ctx = this.$refs[currentRefCanvas].getContext("2d");
|
2021-01-23 02:50:32 +00:00
|
|
|
this.gridCtx = this.$refs.grid.getContext("2d");
|
2021-01-10 03:06:46 +00:00
|
|
|
|
|
|
|
this.canvas.width =
|
|
|
|
this.currentAsciibirdMeta.width *
|
|
|
|
this.currentAsciibirdMeta.blockWidth;
|
|
|
|
this.canvas.height =
|
|
|
|
this.currentAsciibirdMeta.height *
|
|
|
|
this.currentAsciibirdMeta.blockHeight;
|
2021-01-30 02:33:11 +00:00
|
|
|
|
|
|
|
this.drawGrid();
|
|
|
|
this.redrawCanvas();
|
|
|
|
|
2021-01-07 23:53:28 +00:00
|
|
|
} else {
|
2021-02-06 01:22:16 +00:00
|
|
|
|
2021-01-07 23:32:19 +00:00
|
|
|
}
|
2021-01-02 01:52:44 +00:00
|
|
|
},
|
2021-01-09 01:57:48 +00:00
|
|
|
redrawCanvas() {
|
2021-02-06 01:22:16 +00:00
|
|
|
// console.log("Canvas redraw");
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
// Clears the whole canvas
|
|
|
|
if (this.ctx) {
|
2021-01-30 02:33:11 +00:00
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
if (this.currentAsciibirdMeta.blocks.length) {
|
|
|
|
const blockWidth = this.currentAsciibirdMeta.blockWidth;
|
|
|
|
const blockHeight = this.currentAsciibirdMeta.blockHeight;
|
|
|
|
var finalWidth = 0;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
// Position of the meta array
|
|
|
|
let x = 0;
|
|
|
|
let y = 0;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
// Try get better loop
|
|
|
|
let theX = 0;
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
// Draws the actual rectangle
|
|
|
|
let blockX = 0;
|
|
|
|
let blockY = 0;
|
|
|
|
let curBlock = {};
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
this.ctx.font = "16px Mono";
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
for (y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
|
|
|
|
blockY = this.currentAsciibirdMeta.blockHeight * y;
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
for (x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
|
|
|
|
if (!this.currentAsciibirdMeta.blocks[y][x]) {
|
|
|
|
continue;
|
|
|
|
}
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
// if (this.currentAsciibirdMeta.blocks[y][x] !== undefined) {
|
2021-02-06 01:22:16 +00:00
|
|
|
// console.log({
|
|
|
|
// block: this.currentAsciibirdMeta.blocks[y][x],
|
|
|
|
// x: x,
|
|
|
|
// y: y,
|
|
|
|
// theX,
|
|
|
|
// blockY,
|
|
|
|
// blockX,
|
|
|
|
// blockWidth,
|
|
|
|
// blockHeight,
|
|
|
|
// });
|
2021-01-23 02:50:32 +00:00
|
|
|
|
|
|
|
curBlock = this.currentAsciibirdMeta.blocks[y][x];
|
2021-01-30 02:33:11 +00:00
|
|
|
blockX = blockWidth * theX;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
// Background block
|
2021-02-06 01:22:16 +00:00
|
|
|
this.ctx.fillStyle = curBlock.fg;
|
2021-01-30 02:33:11 +00:00
|
|
|
this.ctx.fillRect(blockX, blockY, this.currentAsciibirdMeta.blockWidth, this.currentAsciibirdMeta.blockHeight);
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
let tempChar = "";
|
|
|
|
|
|
|
|
if (curBlock.char) {
|
|
|
|
tempChar = curBlock.char;
|
|
|
|
this.ctx.fillStyle = curBlock.fg;
|
|
|
|
this.ctx.fillText(tempChar, blockX + 3, blockY -3);
|
|
|
|
} else {
|
2021-02-06 01:22:16 +00:00
|
|
|
// console.log("Yo char doesn't exist, bro.");
|
2021-01-23 02:50:32 +00:00
|
|
|
}
|
2021-01-30 02:33:11 +00:00
|
|
|
// }
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
theX++;
|
|
|
|
// break;
|
2021-01-23 02:50:32 +00:00
|
|
|
}
|
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
if (theX !== 0) {
|
|
|
|
finalWidth = theX;
|
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
theX = 0;
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
// break;
|
|
|
|
}
|
|
|
|
} else {
|
2021-01-09 01:57:48 +00:00
|
|
|
}
|
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
this.currentAsciibirdMeta.width = finalWidth;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
this.ctx.stroke();
|
2021-01-23 02:50:32 +00:00
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
},
|
2021-01-07 23:53:28 +00:00
|
|
|
processMouseDown(e) {
|
2021-01-09 01:57:48 +00:00
|
|
|
// this.canvasClass(e)
|
2021-01-02 01:52:44 +00:00
|
|
|
this.selectionMode = true;
|
|
|
|
this.startPosition.x = e.clientX;
|
|
|
|
this.startPosition.y = e.clientY;
|
|
|
|
},
|
2021-01-07 23:53:28 +00:00
|
|
|
processMouseMove(e) {
|
2021-01-02 01:52:44 +00:00
|
|
|
if (this.selectionMode) {
|
2021-02-06 01:22:16 +00:00
|
|
|
|
2021-01-02 01:52:44 +00:00
|
|
|
}
|
|
|
|
},
|
2021-01-07 23:53:28 +00:00
|
|
|
processMouseUp(e) {
|
2021-01-02 01:52:44 +00:00
|
|
|
this.selectionMode = false;
|
|
|
|
this.startPosition.x = null;
|
|
|
|
this.startPosition.y = null;
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
2021-01-10 03:06:46 +00:00
|
|
|
drawGrid() {
|
2021-01-23 02:50:32 +00:00
|
|
|
const width = 5000;
|
|
|
|
const height = 5000;
|
2021-01-10 03:06:46 +00:00
|
|
|
|
2021-02-06 01:22:16 +00:00
|
|
|
const s = 26;
|
|
|
|
const sW = 16;
|
2021-01-23 02:50:32 +00:00
|
|
|
const pL = s;
|
|
|
|
const pT = s;
|
|
|
|
const pR = s;
|
|
|
|
const pB = s;
|
2021-01-10 03:06:46 +00:00
|
|
|
|
|
|
|
this.gridCtx.clearRect(0, 0, width, height);
|
|
|
|
|
|
|
|
this.gridCtx.strokeStyle = "lightgrey";
|
|
|
|
this.gridCtx.lineWidth = 0.333;
|
|
|
|
this.gridCtx.beginPath();
|
2021-01-23 02:50:32 +00:00
|
|
|
for (let x = pL; x <= width - pR; x += sW) {
|
2021-01-10 03:06:46 +00:00
|
|
|
this.gridCtx.moveTo(x, pT);
|
|
|
|
this.gridCtx.lineTo(x, height - pB);
|
|
|
|
}
|
2021-01-23 02:50:32 +00:00
|
|
|
for (let y = pT; y <= height - pB; y += s) {
|
2021-01-10 03:06:46 +00:00
|
|
|
this.gridCtx.moveTo(pL, y);
|
|
|
|
this.gridCtx.lineTo(width - pR, y);
|
|
|
|
}
|
|
|
|
this.gridCtx.stroke();
|
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
2020-12-19 01:27:50 +00:00
|
|
|
};
|
|
|
|
</script>
|