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

toolbar font draw, toaster notifications, fill eraser tool, some refactoring

This commit is contained in:
Hugh Bord 2021-08-12 09:47:36 +10:00
parent 99f8678bc0
commit 8f074fd948
8 changed files with 104 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -56,6 +56,11 @@
* Ctrl + ] - Increase brush size
* Ctrl + [ - Decrease brush size
### When in Brush Mode Only
* E - rotate brush
* Q - flip brush
# FEATURES DONE
* Tabbed editing for asciis

1
package.json
View File

@ -24,6 +24,7 @@
"vue-clipboard2": "^0.3.1",
"vue-draggable-resizable": "^2.3.0",
"vue-tailwind": "^2.0.0",
"vue-toasted": "^1.1.28",
"vuex": "^3.4.0",
"vuex-persist": "^3.1.3"
},

7
src/ascii.js
View File

@ -173,6 +173,11 @@ export const toolbarIcons = [{
icon: 'eraser',
fa: 'fas',
},
{
name: 'fill-eraser',
icon: 'fill',
fa: 'fas',
},
];
export const emptyBlock = {
@ -196,7 +201,7 @@ export const create2DArray = (rows) => {
export const blockWidth = 8;
export const blockHeight = 15;
export const parseMircAscii = (content, title) => {
export const parseMircAscii = async (content, title) => {
const MIRC_MAX_COLOURS = mircColours99.length;
// The current state of the Colours

5
src/fontAwesome.js
View File

@ -10,11 +10,12 @@ import {
faEraser,
faSync,
faSave,
faTrash
faTrash,
faFill
} from '@fortawesome/free-solid-svg-icons';
import {
faSquare,
} from '@fortawesome/free-regular-svg-icons';
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser,
faSync, faSave, faTrash);
faSync, faSave, faTrash, faFill);

7
src/main.js
View File

@ -7,6 +7,7 @@ import { tailwindCss } from './tailwindSettings';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import store from './store';
import Dashboard from './Dashboard.vue';
import Toasted from 'vue-toasted';
Vue.config.productionTip = false;
@ -19,6 +20,12 @@ Vue.use(VueTailwind, tailwindCss);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('vue-draggable-resizable', VueDraggableResizable);
Vue.use(VueClipboard);
Vue.use(Toasted, {
position: 'bottom-center',
iconPack: 'fontawesome',
type: 'info',
duration: 1000,
});
new Vue({
store,

2
src/style.css
View File

@ -14,3 +14,5 @@
font-style: normal;
font-display: swap;
}
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

113
src/views/Editor.vue
View File

@ -49,6 +49,7 @@ body {
.canvastools {
position: absolute;
font-family: "Hack";
z-index: 100;
opacity: 0.6;
cursor: crosshair;
@ -56,10 +57,16 @@ body {
.canvas {
position: absolute;
font-family: "Hack";
background: rgba(0, 0, 0, 0.8);
border: lightgrey 1px solid;
z-index: 0;
}
.fatoolbar {
font-family: "Font Awesome 5 Free";
font-weight: 600;
}
</style>
<script>
@ -85,6 +92,7 @@ export default {
this.canvas.height = this.currentAscii.height * blockHeight;
this.delayRedrawCanvas();
this.$store.commit("changeTool", 0);
const thisIs = this;
@ -122,6 +130,12 @@ export default {
"selectBlocks",
this.filterNullBlocks(this.selectedBlocks)
);
this.$toasted.show("Copied blocks!", {
type: "success",
icon: "fa-check-circle",
});
this.selectedBlocks = [];
}
}
@ -174,10 +188,14 @@ export default {
let ascii = exportMirc();
this.$copyText(ascii.output.join("")).then(
(e) => {
alert("Copied");
this.$toasted.show("Copied mIRC to clipboard!", {
type: "success",
});
},
(e) => {
alert("Can not copy");
this.$toasted.show("Error when copying mIRC to clipboard!", {
type: "error",
});
}
);
}
@ -315,6 +333,9 @@ export default {
isSelecting() {
return this.currentTool.name === "select";
},
isDefault() {
return this.currentTool.name === "default";
},
isBrushing() {
return this.currentTool.name === "brush";
},
@ -365,6 +386,12 @@ export default {
gridView() {
return this.$store.getters.gridView;
},
asciiBlockAtXy() {
return this.currentAsciiBlocks[this.y] &&
this.currentAsciiBlocks[this.y][this.x]
? this.currentAsciiBlocks[this.y][this.x]
: false;
},
},
watch: {
currentAscii(val, old) {
@ -416,7 +443,9 @@ export default {
},
brushBlocks() {
this.clearToolCanvas();
if (this.isMouseOnCanvas) {
// This was supposed to update the brush preview real time
if (this.isMouseOnCanvas && this.isBrushing) {
this.drawBrush();
}
},
@ -479,6 +508,8 @@ export default {
canvasX = BLOCK_WIDTH * x;
this.ctx.font = "13px Hack";
// Background block
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
@ -653,7 +684,7 @@ export default {
},
// Mouse Up, Down and Move
canvasMouseUp() {
if (this.currentTool.name === "default") return;
if (this.isDefault) return;
switch (this.currentTool.name) {
case "brush":
@ -669,6 +700,7 @@ export default {
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
break;
case "fill-eraser":
case "fill":
this.canTool = false;
break;
@ -687,19 +719,12 @@ export default {
this.delayRedrawCanvas();
},
canvasMouseDown() {
if (this.currentTool.name === "default") return;
if (this.isDefault) return;
if (
this.currentAsciiBlocks[this.y] &&
this.currentAsciiBlocks[this.y][this.x] &&
this.currentTool
) {
const targetBlock = this.currentAsciiBlocks[this.y][this.x];
if (this.asciiBlockAtXy && this.currentTool) {
const targetBlock = this.asciiBlockAtXy;
switch (this.currentTool.name) {
case "default":
break;
case "select":
this.selecting.startX = this.canvasX;
this.selecting.startY = this.canvasY;
@ -713,6 +738,12 @@ export default {
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
break;
case "fill-eraser":
this.fill(true);
this.canTool = false;
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
break;
case "brush":
this.canTool = true;
this.drawBrush();
@ -742,7 +773,7 @@ export default {
}
},
canvasMouseMove(e) {
if (this.currentTool.name === "default") return;
if (this.isDefault) return;
let lastX = this.x;
let lastY = this.y;
@ -763,10 +794,7 @@ export default {
}
this.$emit("coordsupdate", { x: this.x, y: this.y });
if (
this.currentAsciiBlocks[this.y] &&
this.currentAsciiBlocks[this.y][this.x]
) {
if (this.asciiBlockAtXy) {
switch (this.currentTool.name) {
case "brush":
if (this.isMouseOnCanvas) {
@ -806,6 +834,7 @@ export default {
break;
case "fill":
case "fill-eraser":
this.drawIndicator();
break;
}
@ -891,7 +920,7 @@ export default {
drawIndicator() {
this.clearToolCanvas();
const targetBlock = this.currentAsciiBlocks[this.y][this.x];
const targetBlock = this.asciiBlockAtXy;
let indicatorColour = targetBlock.bg === 0 ? 1 : 0;
@ -910,6 +939,16 @@ export default {
BLOCK_HEIGHT
);
if (this.isTextEditing) {
this.toolCtx.font = '600 22px "Font Awesome 5 Free"';
this.toolCtx.fillText(
"\uf031",
this.x * BLOCK_WIDTH,
this.y * BLOCK_HEIGHT + BLOCK_HEIGHT * 2
);
this.toolCtx.font = "13px Hack";
}
if (this.isTextEditing) {
if (this.mirrorX) {
this.toolCtx.fillRect(
@ -1001,7 +1040,7 @@ export default {
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
let targetBlock = this.asciiBlockAtXy;
let brushDiffX = 0;
let xLength = 0;
@ -1312,7 +1351,7 @@ export default {
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
let targetBlock = this.asciiBlockAtXy;
const brushDiffX =
Math.floor(this.brushBlocks[0].length / 2) * BLOCK_WIDTH;
@ -1328,10 +1367,7 @@ export default {
const arrayY = brushY / BLOCK_HEIGHT;
const arrayX = brushX / BLOCK_WIDTH;
if (
this.currentAsciiBlocks[arrayY] &&
this.currentAsciiBlocks[arrayY][arrayX]
) {
if (this.asciiBlockAtXy) {
targetBlock = this.currentAsciiBlocks[arrayY][arrayX];
if (this.canFg) {
@ -1429,19 +1465,19 @@ export default {
}
},
// Fill tool
fill() {
fill(eraser = false) {
const newColor = this.currentBg;
const current = this.currentAsciiBlocks[this.y][this.x].bg;
const current = this.asciiBlockAtXy.bg;
// If the newColor is same as the existing
// Then return the original image.
if (current === newColor) {
if (current === newColor && !eraser) {
return this.currentAsciiBlocks;
}
this.fillTool(this.currentAsciiBlocks, this.y, this.x, current);
this.fillTool(this.currentAsciiBlocks, this.y, this.x, current, eraser);
},
fillTool(fillBlocks, y, x, current) {
fillTool(fillBlocks, y, x, current, eraser) {
// If row is less than 0
if (x < 0) {
return;
@ -1471,30 +1507,31 @@ export default {
return;
}
// We can eraser or fill
if (this.canBg) {
fillBlocks[y][x].bg = this.currentBg;
fillBlocks[y][x].bg = eraser ? null : this.currentBg;
}
if (this.canFg) {
fillBlocks[y][x].fg = this.currentFg;
fillBlocks[y][x].fg = eraser ? null : this.currentFg;
}
if (this.canText) {
fillBlocks[y][x].char = this.currentChar;
fillBlocks[y][x].char = eraser ? null : this.currentChar;
}
// Fill in all four directions
// Fill Prev row
this.fillTool(fillBlocks, y, x - 1, current);
this.fillTool(fillBlocks, y, x - 1, current, eraser);
// Fill Next row
this.fillTool(fillBlocks, y, x + 1, current);
this.fillTool(fillBlocks, y, x + 1, current, eraser);
// Fill Prev col
this.fillTool(fillBlocks, y - 1, x, current);
this.fillTool(fillBlocks, y - 1, x, current, eraser);
// Fill next col
this.fillTool(fillBlocks, y + 1, x, current);
this.fillTool(fillBlocks, y + 1, x, current, eraser);
},
},
};

5
yarn.lock
View File

@ -9492,6 +9492,11 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue-toasted@^1.1.28:
version "1.1.28"
resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
vue@^2.6.11:
version "2.6.14"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"