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

completed context menus for brushes

This commit is contained in:
Hugh Bord 2021-12-26 11:41:24 +10:00
parent 54568e641a
commit 088f6d3807
6 changed files with 190 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -71,13 +71,10 @@ A most latest production build to use is available at https://asciibird.jewbird.
## Features to Add
* Save to PNG
* Delete blocks with Delete when selecting key needs undo/redo
* Layers undo and redo could be implemented, at the moment there isn't any.
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
* Review encodings check on file import - UTF8 vs Latin something
* More Context Menus (right click menu)
* ASCII right click
## Bugs to fix

13
src/Dashboard.vue
View File

@ -250,6 +250,7 @@ import {
filterNullBlocks,
getBlocksWidth,
emptyBlock,
canvasToPng,
} from "./ascii";
import VueFileToolbarMenu from "vue-file-toolbar-menu";
@ -934,7 +935,17 @@ export default {
click: () => this.startExport("clipboard"),
icon: "copy_all",
},
{ text: "PNG Image", click: () => true, icon: "image" },
{
text: "PNG Image",
hotkey: "ctrl+shift+g",
click: () => {
canvasToPng(
document.getElementById("canvas"),
this.currentAscii.title
);
},
icon: "image",
},
{
text: "HTTP POST",
click: () => this.startExport("post"),

49
src/ascii.js
View File

@ -426,16 +426,26 @@ export const createNewAscii = (forms) => {
// Converts ASCIIBIRD blocks to mIRC colours
export const exportMirc = (blocks = null) => {
const {
currentAscii
} = store.getters;
const {
currentAsciiLayersWidthHeight
} = store.getters;
var isPng = false;
if (blocks === null) {
var {
currentAscii
} = store.getters;
var {
currentAsciiLayersWidthHeight
} = store.getters;
blocks = mergeLayers();
} else {
var currentAscii = {};
currentAscii.title = `brush-${cyrb53(JSON.stringify(blocks))}.png`
isPng = true;
var currentAsciiLayersWidthHeight = {
height: blocks.length,
width: blocks[0].length
}
}
const output = [];
@ -511,9 +521,16 @@ export const exportMirc = (blocks = null) => {
// Download to a txt file
// Check if txt already exists and append it
const filename = currentAscii.title.slice(currentAscii.title.length - 3) === 'txt' ?
currentAscii.title :
`${currentAscii.title}.txt`;
if (isPng) {
var filename = currentAscii.title.slice(currentAscii.title.length - 3) === 'png' ?
currentAscii.title :
`${currentAscii.title}.png`;
} else {
var filename = currentAscii.title.slice(currentAscii.title.length - 3) === 'txt' ?
currentAscii.title :
`${currentAscii.title}.txt`;
}
return {
filename,
@ -535,6 +552,16 @@ export const downloadFile = (content, filename, contentType) => {
URL.revokeObjectURL(a.href);
};
export function canvasToPng(canvas, filename) {
let downloadLink = document.createElement('a');
downloadLink.setAttribute('download', filename);
canvas.toBlob(function (blob) {
let url = URL.createObjectURL(blob);
downloadLink.setAttribute('href', url);
downloadLink.click();
});
}
export const checkForGetRequest = async () => {
const asciiUrlCdn = new URL(location.href).searchParams.get('ascii');
if (asciiUrlCdn) {

79
src/components/parts/BrushCanvas.vue
View File

@ -14,26 +14,20 @@
</div>
<context-menu :ref="`block-menu-${hash}`" class="z-50" >
<ul>
<li
@click="true"
class="ab-context-menu-item"
>
Save as PNG
</li>
<li
@click="true"
class="ab-context-menu-item"
>
Export ASCII to mIRC Clipboard
</li>
<li
@click="true"
class="ab-context-menu-item"
>
Export ASCII to mIRC File
</li>
</ul>
<ul>
<li @click="canvasToPng()" class="ab-context-menu-item">
Save as PNG
</li>
<li @click="startExport('clipboard')" class="ab-context-menu-item">
Export Brush to mIRC Clipboard
</li>
<li @click="startExport('file')" class="ab-context-menu-item">
Export Brush to mIRC File
</li>
<li @click="saveToLibrary()" class="ab-context-menu-item">
Save to Library
</li>
</ul>
</context-menu>
</t-card>
</div>
@ -41,7 +35,10 @@
<script>
import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks } from "../../ascii";
import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks,
canvasToPng,
exportMirc,
downloadFile } from "../../ascii";
import ContextMenu from "./ContextMenu.vue";
export default {
name: "BrushCanvas",
@ -140,7 +137,7 @@ export default {
},
canvasRef() {
return this.$refs[this.canvasName];
}
},
},
watch: {
blockSizeMultiplier() {
@ -181,6 +178,44 @@ export default {
},
},
methods: {
startExport(type) {
let ascii = exportMirc(this.getBlocks);
console.log(ascii);
switch (type) {
case "clipboard":
this.$copyText(ascii.output.join("")).then(
(e) => {
this.$toasted.show("Copied mIRC brush to clipboard!", {
type: "success",
});
},
(e) => {
this.$toasted.show("Error when copying mIRC to clipboard!", {
type: "error",
});
}
);
this.$refs[`block-menu-${this.hash}`].close();
break;
default:
case "file":
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
this.$refs[`block-menu-${this.hash}`].close();
break;
}
},
saveToLibrary() {
this.$store.commit("pushBrushLibrary", this.getBlocks);
this.$toasted.show(`Saved brush to Library`, {
type: "success",
});
this.$refs[`block-menu-${this.hash}`].close();
},
canvasToPng() {
canvasToPng(this.canvasRef, `brush-${this.hash}.png`)
this.$refs[`block-menu-${this.hash}`].close();
},
getBlocksWidth(blocks) {
return getBlocksWidth(blocks)
},

53
src/components/parts/MainBrushCanvas.vue
View File

@ -24,16 +24,16 @@
<context-menu ref="main-brush-menu" class="z-50" @contextmenu.prevent>
<ul>
<li @click="true" class="ab-context-menu-item">
<li @click="canvasToPng()" class="ab-context-menu-item">
Save as PNG
</li>
<li @click="true" class="ab-context-menu-item">
<li @click="startExport('clipboard')" class="ab-context-menu-item">
Export Brush to mIRC Clipboard
</li>
<li @click="true" class="ab-context-menu-item">
<li @click="startExport('file')" class="ab-context-menu-item">
Export Brush to mIRC File
</li>
<li @click="true" class="ab-context-menu-item">
<li @click="saveToLibrary()" class="ab-context-menu-item">
Save to Library
</li>
</ul>
@ -53,6 +53,10 @@ import {
filterNullBlocks,
toolbarIcons,
emptyBlock,
canvasToPng,
cyrb53,
exportMirc,
downloadFile
} from "../../ascii";
export default {
@ -164,6 +168,9 @@ export default {
isErasing() {
return this.currentTool.name === "eraser";
},
hash() {
return cyrb53(JSON.stringify(this.brushBlocks));
}
},
watch: {
brushBlocks() {
@ -214,6 +221,44 @@ export default {
pageY: e.layerY,
});
},
startExport(type) {
let ascii = exportMirc(this.brushBlocks);
console.log(ascii);
switch (type) {
case "clipboard":
this.$copyText(ascii.output.join("")).then(
(e) => {
this.$toasted.show("Copied mIRC brush to clipboard!", {
type: "success",
});
},
(e) => {
this.$toasted.show("Error when copying mIRC to clipboard!", {
type: "error",
});
}
);
this.$refs[`main-brush-menu`].close();
break;
default:
case "file":
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
this.$refs[`main-brush-menu`].close();
break;
}
},
saveToLibrary() {
this.$store.commit("pushBrushLibrary", this.brushBlocks);
this.$toasted.show(`Saved brush to Library`, {
type: "success",
});
this.$refs[`main-brush-menu`].close();
},
canvasToPng() {
canvasToPng(this.canvasRef, `brush-${this.hash}.png`)
this.$refs[`main-brush-menu`].close();
},
processClick(e) {
this.canTool = true;

37
src/views/Editor.vue
View File

@ -7,13 +7,13 @@
>
<context-menu ref="editor-menu" class="z-50">
<ul>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="canvasToPng()" class="ml-1 text-sm hover:bg-gray-400">
Save as PNG
</li>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="startExport('clipboard')" class="ml-1 text-sm hover:bg-gray-400">
Export ASCII to mIRC Clipboard
</li>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="startExport('file')" class="ml-1 text-sm hover:bg-gray-400">
Export ASCII to mIRC File
</li>
</ul>
@ -79,6 +79,9 @@ import {
getBlocksWidth,
checkVisible,
mergeLayers,
canvasToPng,
exportMirc,
downloadFile
} from "../ascii";
export default {
@ -461,6 +464,34 @@ export default {
},
},
methods: {
startExport(type) {
let ascii = exportMirc();
switch (type) {
case "clipboard":
this.$copyText(ascii.output.join("")).then(
(e) => {
this.$toasted.show("Copied mIRC to clipboard!", {
type: "success",
});
},
(e) => {
this.$toasted.show("Error when copying mIRC to clipboard!", {
type: "error",
});
}
);
break;
default:
case "file":
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
break;
}
},
canvasToPng() {
canvasToPng(this.canvasRef, this.currentAscii.title);
},
openContextMenu(e) {
e.preventDefault();
// These are the correct X and Y when inside the floating panel