jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

grid (WIP), fixed nav/canvas bug sort of, better layout

This commit is contained in:
Hugh Bord 2021-01-10 13:06:46 +10:00
parent f28dbd6b63
commit e73a7be7f1
3 changed files with 137 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -9,6 +9,8 @@ ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
* Fix up the store, put in code and more shit in there
* Store colours, tools and any other shit in here
* I added some grid but it is FUCKED
## HOW TO DRAW BLOCKS
* What we are doing now, the slowest worst way that uses > 4gb of ram for a blank 80x80 ascii lol
@ -78,6 +80,8 @@ If we can import an ASCII -> two dimensional array -> Export
* https://stackoverflow.com/questions/60263401/draw-on-canvas-with-vue
* https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
* https://codereview.stackexchange.com/questions/114702/drawing-a-grid-on-canvas
* https://github.com/ircart/resources
* https://gist.github.com/xon52/fb895e33d64a8d322da165d158fa11b2 / https://xon5.medium.com/flexible-canvas-grid-without-blurred-lines-907fcadf5bfc - Grid canvas draw stuff
## Project setup
```

6
src/Dashboard.vue
View File

@ -88,7 +88,7 @@ export default {
changeTab(key, value) {
// Update the router title
// if (this.$router.params.ascii !== key) {
this.$router.replace({ name: 'editor', params: { ascii: `/${key}` } });
this.$router.push({ name: 'editor', params: { ascii: `/${key}` } });
// }
// Update the tab index in vuex store
@ -101,8 +101,8 @@ export default {
key: this.asciibirdMeta.length,
width: this.forms.createAscii.width,
height: this.forms.createAscii.height,
blockWidth: 8,
blockHeight: 13,
blockWidth: 8 + 0.5,
blockHeight: 13 + 0.5,
blocks: this.create2DArray(this.forms.createAscii.height),
};

217
src/views/Editor.vue
View File

@ -6,67 +6,72 @@
</h1>
<!-- <pre><small>{{ JSON.stringify(currentAsciibirdMeta) }}</small></pre> -->
<!-- @mousedown="processMouseDown"
<!-- @mousedown="processMouseDown"
@mousemove="processMouseMove"
@mouseup="processMouseUp" -->
<div>
<div id="canvas-area" style="position: relative">
<canvas
ref="grid"
id="grid"
width="5024"
height="5024"
class="gridCanvas"
></canvas>
<canvas
:ref="generateCanvasId"
:id="generateCanvasId"
:width=canvas.width
:height=canvas.height
v-bind:class="dataFieldClass"
class="border-gray-500"
style="border-width: 2px;"
:width="canvas.width"
:height="canvas.height"
class="canvas"
></canvas>
<!-- <span v-for="(yValue, y) in currentAsciibirdMeta.blocks" :key="y">
<span v-for="(xValue, x) in currentAsciibirdMeta.blocks" :key="x">
<Block :data="currentAsciibirdMeta.blocks[y][x]" v-if="currentAsciibirdMeta.blocks.length" :blockWidth="currentAsciibirdMeta.blockWidth" :blockHeight="currentAsciibirdMeta.blockHeight" />
</span>
</span> -->
</div>
</div>
</template>
<style>
body {
margin: 2rem;
background: #eee;
}
#canvas {
background: white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
.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;
}
</style>
<script>
import Block from '../components/Block.vue';
import Block from "../components/Block.vue";
export default {
name: 'Editor',
name: "Editor",
components: { Block },
mounted() {
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[0];
},
created() {
},
created() {},
data: () => ({
text: 'ASCII',
text: "ASCII",
currentAsciibirdMeta: null,
data: {
message: 'Hello Vue!',
message: "Hello Vue!",
vueCanvas: null,
},
ctx: null,
@ -76,62 +81,77 @@ export default {
y: null,
},
canvas: {
width: 2048 ,
height: 2048
width: 2048,
height: 2048,
},
gridCtx: null,
}),
computed: {
getFullPath() {
return this.$route.path;
},
generateCanvasId() {
return `canvas${this.currentAsciibirdMeta.key}`;
return `canvas`;
},
},
watch: {
getFullPath() {
// console.log(this);
this.onChangeTab();
getFullPath(val, old) {
this.onChangeTab(val.split("/%2F").join(""));
},
},
methods: {
dataFieldClass(event) {
this.ctx = event.currentTarget.id;
console.log(this.ctx);
},
onChangeTab() {
// dataFieldClass(event) {
// this.ctx = event.currentTarget.id;
// console.log(this.ctx);
// },
onChangeTab(val) {
// Get the asciimeta index from the route URL
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[
this.$route.params.ascii.split('/').join('')
];
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[val];
console.log(this.currentAsciibirdMeta);
// I dono some routs bs or some bs needs -1 to make it all work
let currentRefCanvas =`canvas${this.currentAsciibirdMeta.key-1}`;
// 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
let currentRefCanvas = `canvas`;
// this.canvas.width = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockWidth
// this.canvas.height = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockHeight
this.canvas.width = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockWidth
this.canvas.height = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockHeight
console.log({ generateCanvasId: this.generateCanvasId, all_refs: this.$refs, current_canvas_ref: this.$refs[currentRefCanvas] })
console.log({
generateCanvasId: this.generateCanvasId,
all_refs: this.$refs,
current_canvas_ref: this.$refs[currentRefCanvas],
});
if (this.$refs[currentRefCanvas]) {
this.ctx = this.$refs[currentRefCanvas].getContext("2d")
console.log('current ctx', this.ctx)
this.ctx = this.$refs[currentRefCanvas].getContext("2d");
this.gridCtx = this.$refs["grid"].getContext("2d");
console.log("current ctx", this.ctx);
this.redrawCanvas()
this.drawGrid();
this.redrawCanvas();
this.canvas.width =
this.currentAsciibirdMeta.width *
this.currentAsciibirdMeta.blockWidth;
this.canvas.height =
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
} else {
console.log("Warning: could not find asciibird meta key " + currentRefCanvas)
console.log(
"Warning: could not find asciibird meta key " + currentRefCanvas
);
}
},
redrawCanvas() {
console.log("Canvas redraw")
console.log("Canvas redraw");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.currentAsciibirdMeta.blocks.length) {
let blockWidth = this.currentAsciibirdMeta.blockWidth
let blockHeight = this.currentAsciibirdMeta.blockHeight
let blockWidth = this.currentAsciibirdMeta.blockWidth;
let blockHeight = this.currentAsciibirdMeta.blockHeight;
let h = 0;
let w = 0;
@ -142,65 +162,62 @@ export default {
let curBlock = undefined;
this.ctx.font = "8px Mono";
for(y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
blockY = y * blockHeight
w = blockWidth
for(x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
// console.log({ x, y, meta: JSON.stringify(this.currentAsciibirdMeta.blocks[y][x]) });
for (y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
blockY = y * blockHeight;
w = blockWidth;
curBlock = this.currentAsciibirdMeta.blocks[y][x];
for (x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
// console.log({ x, y, meta: JSON.stringify(this.currentAsciibirdMeta.blocks[y][x]) });
blockX = x * blockWidth
h = blockHeight
curBlock = this.currentAsciibirdMeta.blocks[y][x];
this.ctx.fillStyle = curBlock.bg
this.ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
this.ctx.fillStyle = curBlock.fg
this.ctx.fillText( curBlock.char, blockX + 2 , blockY - 3 );
}
blockX = x * blockWidth;
h = blockHeight;
this.ctx.fillStyle = curBlock.bg;
this.ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
this.ctx.fillStyle = curBlock.fg;
this.ctx.fillText(curBlock.char, blockX + 2, blockY - 3);
}
}
} else {
console.log(JSON.stringify(this.currentAsciibirdMeta))
console.log(JSON.stringify(this.currentAsciibirdMeta));
}
this.ctx.stroke()
this.ctx.stroke();
},
processMouseDown(e) {
console.log("Mouse down")
console.log("Mouse down");
// this.canvasClass(e)
this.selectionMode = true;
this.startPosition.x = e.clientX;
this.startPosition.y = e.clientY;
},
processMouseMove(e) {
console.log("Mouse move")
console.log("Mouse move");
if (this.selectionMode) {
// console.log(this.startPosition);
this.ctx.beginPath();
this.ctx.rect(
this.startPosition.x,
this.startPosition.y,
e.clientX - this.startPosition.x,
e.clientY - this.startPosition.y,
e.clientY - this.startPosition.y
);
this.ctx.closePath();
this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
this.ctx.strokeStyle = '#f00';
this.ctx.strokeStyle = "#f00";
this.ctx.stroke();
}
},
triangleTest(e) {
console.log("Mouse triangleTest")
console.log("Mouse triangleTest");
// this.ctx = e.target;
this.ctx.strokeStyle = 'red';
this.ctx.strokeStyle = "red";
this.ctx.beginPath();
this.ctx.moveTo(100, 100);
this.ctx.lineTo(200, 100);
@ -209,13 +226,39 @@ export default {
this.ctx.stroke();
},
processMouseUp(e) {
console.log("Mouse up")
this.ctx.fillStyle = '#fff';
console.log("Mouse up");
this.ctx.fillStyle = "#fff";
this.selectionMode = false;
this.startPosition.x = null;
this.startPosition.y = null;
},
drawGrid() {
let width = 5000;
let height = 5000;
let s = 13;
let sW = 8;
let pL = s;
let pT = s;
let pR = s;
let pB = s;
this.gridCtx.clearRect(0, 0, width, height);
this.gridCtx.strokeStyle = "lightgrey";
this.gridCtx.lineWidth = 0.333;
this.gridCtx.beginPath();
for (var x = pL; x <= width - pR; x += sW) {
this.gridCtx.moveTo(x, pT);
this.gridCtx.lineTo(x, height - pB);
}
for (var y = pT; y <= height - pB; y += s) {
this.gridCtx.moveTo(pL, y);
this.gridCtx.lineTo(width - pR, y);
}
this.gridCtx.stroke();
},
},
};
</script>