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

brush tool working sorta

This commit is contained in:
Hugh Bord 2021-05-08 11:51:30 +10:00
parent 6724cb5240
commit 9ebf6950f7
4 changed files with 117 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -5,6 +5,7 @@ ASCIIBIRD DEVELOPMENT - TAKING FLIGHT
# FOCUSING ON NOW
* Toolbar stuff / Brush Size
* Need to make brush center on the mouse x and y
* Modals
* Edit current ascii

21
src/components/modals/NewAscii.vue
View File

@ -49,8 +49,8 @@ export default {
data: () => ({
forms: {
createAscii: {
width: 5,
height: 5,
width: 80,
height: 30,
title: "ascii",
},
},
@ -67,7 +67,7 @@ export default {
},
methods: {
createClick() {
this.forms.createAscii.title = `New ASCII ${this.$store.getters.asciibirdMeta.length}`;
this.forms.createAscii.title = `New ASCII ${this.$store.getters.asciibirdMeta.length+1}`;
this.$modal.show("create-ascii-modal");
},
createNewASCII() {
@ -97,11 +97,22 @@ export default {
this.$store.commit("newAsciibirdMeta", payload);
this.$store.commit('openModal', 'new-ascii')
this.$modal.hide("create-ascii-modal");
// To show the ASCII after importing we get the last key
// from the asciiBirdMeta array
const keys = this.$store.getters.asciibirdMeta
.map((v, k) => k)
.filter((i) => i !== undefined);
// Set the current tab and pop the array for the last value
this.currentTab = keys.pop();
this.$store.commit("changeTab", this.currentTab);
this.show = false;
},
closeNewASCII({ params, cancel }) {
this.forms.createAscii.width = 5;
this.forms.createAscii.height = 5;
this.forms.createAscii.width = 80;
this.forms.createAscii.height = 30;
this.forms.createAscii.title = "New ASCII";
},
create2DArray(rows) {

34
src/components/parts/BrushPreview.vue
View File

@ -78,6 +78,7 @@ export default {
brushSizeHeight: 1,
brushSizeWidth: 1,
brushSizeType: "square",
blocks: [],
}),
computed: {
currentAscii() {
@ -86,14 +87,15 @@ export default {
toolbarState() {
return this.$store.getters.getToolbarState;
},
watchBrushSizeWidth() {
return this.brushSizeWidth;
},
watch: {
brushSizeWidth() {
this.delayRedrawCanvas()
},
watchBrushSizeHeight() {
return this.brushSizeHeight;
brushSizeHeight() {
this.delayRedrawCanvas()
},
},
watch: {},
methods: {
updateBrushSize() {
this.$store.commit("updateBrushSize", {
@ -102,13 +104,15 @@ export default {
brushSizeType: this.brushSizeType,
});
this.ctx.clearRect(0, 0, 1000, 1000);
this.delayRedrawCanvas();
this.$store.commit("brushBlocks", this.blocks)
},
drawPreview() {
let brushHeight = this.toolbarState.brushSizeHeight;
let brushWidth = this.toolbarState.brushSizeWidth;
this.ctx.clearRect(0, 0, 1000, 1000);
this.ctx.fillStyle = this.$store.getters.mircColours[1];
const BLOCK_WIDTH = this.currentAscii.blockWidth;
@ -126,8 +130,6 @@ export default {
char: null,
};
let blocks = [];
let minY = 5 - brushHeight;
let maxY = 5 + brushHeight;
@ -142,18 +144,16 @@ export default {
// Recreate 2d array for preview
for (y = 0; y < brushHeight; y++) {
blocks[y] = [];
this.blocks[y] = [];
for (x = 0; x < brushWidth; x++) {
blocks[y][x] = Object.assign({}, block);
this.blocks[y][x] = Object.assign({}, block);
}
}
this.$store.commit("brushBlocks", blocks)
}
// Get middle block
for (y = 0; y < blocks.length; y++) {
for (x = 0; x < blocks[0].length; x++) {
let curBlock = blocks[y][x];
for (y = 0; y < this.blocks.length; y++) {
for (x = 0; x < this.blocks[0].length; x++) {
let curBlock = this.blocks[y][x];
if (curBlock.bg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
@ -190,7 +190,7 @@ export default {
setTimeout(() => {
this.redraw = true;
this.drawPreview();
}, 100);
}, 2);
}
},
},

149
src/views/Editor.vue
View File

@ -129,6 +129,15 @@ export default {
this.$store.getters.getCurrentTool
];
},
canFg() {
return this.$store.getters.getTargetingFg
},
canBg() {
return this.$store.getters.getTargetingBg
},
canText() {
return this.$store.getters.getTargetingChar
},
isTextEditing() {
return (
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
@ -442,6 +451,7 @@ export default {
case "brush":
this.canTool = true;
this.drawBrush()
break;
case "eraser":
@ -484,7 +494,7 @@ export default {
this.currentAscii.blocks[this.y] &&
this.currentAscii.blocks[this.y][this.x]
) {
const targetBlock = this.currentAscii.blocks[this.y][this.x];
let targetBlock = this.currentAscii.blocks[this.y][this.x];
switch (
this.$store.getters.getToolbarIcons[
@ -492,70 +502,7 @@ export default {
].name
) {
case "brush":
if (!this.canTool && this.currentTool.name === 'brush') {
this.clearToolCanvas();
//
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
for (
let x = 0;
x < this.$store.getters.brushBlocks[0].length;
x++
) {
let curBlock = this.$store.getters.brushBlocks[y][x];
if (curBlock.bg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
curBlock.bg
];
this.toolCtx.fillRect(
this.x * BLOCK_WIDTH,
this.y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (curBlock.fg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
curBlock.fg
];
}
if (curBlock.char) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[
curBlock.fg
];
this.toolCtx.fillText(
curBlock.char,
x + this.x * BLOCK_WIDTH - 1,
y + this.y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
}
this.toolCtx.stroke();
}
} else if (this.canTool && this.currentTool.name === 'brush') {
// 1x1 brush by default
if (this.$store.getters.getTargetingFg) {
targetBlock.fg = this.$store.getters.getFgColour;
}
if (this.$store.getters.getTargetingBg) {
targetBlock.bg = this.$store.getters.getBgColour;
}
if (this.$store.getters.getTargetingChar) {
targetBlock.char = this.$store.getters.getSelectedChar;
}
}
this.drawBrush()
break;
case "eraser":
@ -599,7 +546,6 @@ export default {
setTimeout(() => {
this.redraw = true;
this.redrawCanvas();
this.redrawToolCanvas();
}, this.$store.state.options.canvasRedrawSpeed);
}
},
@ -607,6 +553,77 @@ export default {
// TOOLS
//
// Fill tool
drawBrush() {
this.clearToolCanvas();
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
let targetBlock = this.currentAscii.blocks[this.y][this.x];
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
for (let x = 0;x < this.$store.getters.brushBlocks[0].length;x++) {
let curBlock = this.$store.getters.brushBlocks[y][x];
let arrayX = this.x + x;
let arrayY = this.y + y;
let diffX = Math.ceil(arrayX / 2)
let diffY = Math.ceil(arrayY / 2)
let brushDiffX = arrayX - diffX;
let brushDiffY = arrayY - diffY;
let brushX = (this.x * BLOCK_WIDTH) + (x * BLOCK_WIDTH);
let brushY = (this.y * BLOCK_HEIGHT) + (y * BLOCK_HEIGHT);
if (this.currentAscii.blocks[arrayY] && this.currentAscii.blocks[arrayY][arrayX]) {
targetBlock = this.currentAscii.blocks[arrayY][arrayX];
if (this.canBg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
this.toolCtx.fillRect(
brushX,
brushY,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
if (this.canTool) {
targetBlock.bg = this.$store.getters.getBgColour;
}
}
if (this.canFg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
if (this.canTool) {
targetBlock.fg = this.$store.getters.getFgColour;
}
}
if (this.canText) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.toolCtx.fillText(
curBlock.char,
brushX - 1,
brushY + BLOCK_HEIGHT - 3
);
if (this.canTool) {
targetBlock.char = this.$store.getters.getSelectedChar;
}
}
}
}
}
this.toolCtx.stroke();
},
fill() {
const fillBlocks = {
...this.currentAscii.blocks,