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

toolbar menu updates

This commit is contained in:
Hugh Bord 2021-12-04 13:47:31 +10:00
parent 12389d1c5e
commit 790664a053
6 changed files with 121 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -85,6 +85,11 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
* ASCII right click
* Review encodings check on file import - UTF8 vs Latin something
## AFTER the above stuff is done
* Warning to the user for width and clipping
* Optimise the export code to use less chars
# Keyboard Shortcuts
## ASCII Editing

114
src/Dashboard.vue
View File

@ -331,7 +331,37 @@ export default {
currentTab() {
return this.$store.getters.currentTab;
},
currentAsciiLayers() {
return this.$store.getters.currentAsciiLayers;
},
selectedLayer() {
return this.$store.getters.selectedLayer;
},
canToggleLayer() {
return this.currentAsciiLayers.length !== 1;
// We want to avoid hiding all the layers, so if there's only one
// visible left, we have to disable the buttons
},
imageOverlay() {
return this.$store.getters.imageOverlay || false;
},
imageOverlayUrl() {
return this.imageOverlay.url
? this.imageOverlay.url.split("/").pop()
: "";
},
asciiLayersMenu() {
let menu = [];
for (let i in [ ... this.currentAsciiLayers]) {
menu.push({
text: this.currentAsciiLayers[i].label,
click: () => this.$store.commit("changeLayer", this.currentAsciiLayers.length - i)
});
}
return menu.reverse();
},
myMenu() {
let menu = [];
@ -381,21 +411,43 @@ export default {
});
if (this.asciibirdMeta.length) {
menu.push({
text: "Export",
menu: [
{ text: "mIRC File", click: () => this.startExport("file") },
{
text: "mIRC Clipboard",
click: () => this.startExport("clipboard"),
},
{ text: "HTTP POST", click: () => this.startExport("post") },
{
text: "ASCIIBIRD State",
click: () => this.exportAsciibirdState(),
},
],
});
menu.push(
{
text: "Export",
menu: [
{ text: "mIRC File", click: () => this.startExport("file") },
{
text: "mIRC Clipboard",
click: () => this.startExport("clipboard"),
},
{ text: "HTTP POST", click: () => this.startExport("post") },
{
text: "ASCIIBIRD State",
click: () => this.exportAsciibirdState(),
},
],
},
{
text: "Layers",
menu: [
// {
// text: "Change Layers",
// menu: this.asciiLayersMenu,
// },
{
text: "Show/Hide Layer",
click: () => this.$store.commit("toggleLayer", this.selectedLayer),
},
{ text: "Rename Layer", click: () => this.showLayerRename(this.selectedLayer, this.currentAsciiLayers[this.selectedLayer].label) },
{ text: "Add Layer", click: () => this.$store.commit("addLayer") },
{ text: "Delete Layer", click: () => this.$store.commit("removeLayer", this.selectedLayer) },
{ text: "Move Layer Down", click: () => this.$store.commit("upLayer", this.selectedLayer) },
{ text: "Move Layer Up", click: () => this.$store.commit("downLayer", this.selectedLayer) },
{ text: "Merge All Layers", click: () => this.$store.commit("mergeAllLayers") },
],
}
);
}
return menu;
@ -408,6 +460,38 @@ export default {
// },
},
methods: {
showLayerRename(key, label) {
this.$store.commit("toggleDisableKeyboard", true);
this.$dialog
.prompt({
title: "Rename Layer",
text: "Please input your new layer name",
icon: "question",
inputValue: label,
clickToClose: false,
})
.then((result) => {
if (!result.input.length) {
this.$toasted.show("You must enter a layer name!", {
type: "error",
});
this.$store.commit("toggleDisableKeyboard", false);
return;
}
if (result.isOk) {
this.updateLayerName(key, result.input);
}
this.$store.commit("toggleDisableKeyboard", false);
});
},
updateLayerName(key, label) {
this.$store.commit("updateLayerName", {
key: key,
label: label,
});
},
triggerbrush() {
this.drawBrush = !this.drawBrush;
},

2
src/ascii.js
View File

@ -138,7 +138,7 @@ export const charCodes = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*'
'°', '¨', '·', '¯', '´', '≡', '±', '‗', '¶', '§', '÷',
'⁰', '¹', '³', '²', '⁴', '⁵', '⁶', '⁷', '⁸', '⁹', '⁺', '⁻', '⁼', '⁽', '⁾',
'₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉', '₊', '₋', '₌', '₍', '₎',
'¼', '½', '¾', '⅓', '⅔', '⅕', '⅖', '⅗', '⅘', '⅙', '⅚', '⅛', '⅜', '⅝', '⅞',
'¼', '½', '¾', '⅓', '⅔', '⅕', '⅖', '⅗', '⅘', '⅙', '⅚', '⅛', '⅜', '⅝', '⅞', '⅟', '⅒', '⅑', '⁄',
'└', '┐', '┘', '┌', '│', '┤', '├', '┴', '┬', '─', '┼',
'╚', '╗', '╝', '╔', '║', '╣', '╠', '╩', '╦', '═', '╬',
'╰', '╮', '╯', '╭', '╱', '╲', '╳',

1
src/components/parts/Layers.vue
View File

@ -243,7 +243,6 @@ export default {
this.$store.commit("removeLayer", key);
},
showOverlayModal() {
console.log("Test")
this.$store.commit('openModal', 'overlay');
},
// Image overlay

22
src/style.css
View File

@ -68,12 +68,18 @@ body {
cursor: crosshair;
}
/* Toolbar menu */
.bar {
background-color: rgba(107, 114, 128) !important;
}
.bar-button:hover {
color: var(--bar-button-open-color, rgb(65, 184, 131));
background: var(--bar-button-open-bkg, rgb(234, 247, 244));
}
@layer base {
.bar {
@apply bg-gray-500;
}
.bar-button {
@apply text-white;
}
.bar-button:hover {
@apply bg-gray-800;
}
}

4
src/views/Editor.vue
View File

@ -290,7 +290,7 @@ export default {
this.delayRedrawCanvas();
},
currentSelectedLayer(val, old) {
if (old.visible) {
if (old && old.visible) {
this.warnInvisibleLayer();
}
},
@ -401,7 +401,7 @@ export default {
},
methods: {
warnInvisibleLayer() {
if (!this.currentSelectedLayer.visible) {
if (!this.currentSelectedLayer && this.currentSelectedLayer.visible) {
this.$toasted.show("You are trying to edit an invisible layer!!", {
type: "error",
icon: "fa-check-cross",