cleaned code, updated help and readme
This commit is contained in:
parent
8c251228f9
commit
30498d7087
|
|
@ -18,7 +18,7 @@
|
|||
ASCIIBIRD is an IRC ascii art editor to create or edit mIRC art, it is most times worked on during live stream. It's 100% client side and created in vue2 and may be migrated to vue3 in the future.
|
||||
|
||||
You can view and load ASCII art from https://irc.watch/ascii into asciibird.
|
||||
|
||||
1
|
||||
A most latest production build to use is available at https://asciibird.jewbird.live/
|
||||
|
||||
# Big Shout outs to Patrons
|
||||
|
|
@ -80,9 +80,12 @@ A most latest production build to use is available at https://asciibird.jewbird.
|
|||
|
||||
### v1 is released, thanks pals!
|
||||
|
||||
* Fix up help modal
|
||||
|
||||
### v 1.2
|
||||
|
||||
* Unit testing
|
||||
* More tooltips on other parts, at the moment only Toolbar has tooltips, option to disable tooltips
|
||||
* Fix brush tool for seamless lines when drawing fast
|
||||
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
|
||||
* Review encodings check on file import - UTF8 vs Latin something
|
||||
|
|
|
|||
258
src/ascii.js
258
src/ascii.js
|
|
@ -211,10 +211,6 @@ export const tabLimit = 20;
|
|||
|
||||
export const parseMircAscii = async (contents, filename) => {
|
||||
// The current state of the Colours
|
||||
let curBlock = {
|
||||
...emptyBlock,
|
||||
};
|
||||
|
||||
contents = contents
|
||||
.split('\u0003\u0003')
|
||||
.join('\u0003')
|
||||
|
|
@ -255,8 +251,6 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
selectedLayer: 0,
|
||||
};
|
||||
|
||||
// let isPlainText = !colourCodeRegex.test(contents);
|
||||
|
||||
// https://modern.ircdocs.horse/formatting.html#color
|
||||
// In the following list, <CODE> represents the color formatting character (0x03), <COLOR> represents one or two ASCII digits (either 0-9 or 00-99).
|
||||
|
||||
|
|
@ -267,26 +261,9 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
// <CODE><COLOR> - Set the foreground color.
|
||||
// <CODE><COLOR>, - Set the foreground color and display the , character as text.
|
||||
// <CODE><COLOR>,<COLOR> - Set the foreground and background color.
|
||||
|
||||
|
||||
// const mIrcSingleColourRegex = new RegExp(/(\u0003\d{0,2}[,])/, 'gu');
|
||||
const asciiblasterRegex = /(^[\d]{1,2})?(?:,([\d]{1,2}))?/;
|
||||
const mIrcColourRegex = new RegExp(/\u0003(\d{0,2})?[,]?(\d{0,2})?/, 'gu');
|
||||
// let isPlainText = !colourCodeRegex.test(contents);
|
||||
let cleanedWidth = 0;
|
||||
|
||||
// Get the max line width, as some lines can be trimmed by spaces
|
||||
// we cannot always rely on the first line for the width
|
||||
for (let i = 0; i < asciiLines.length; i++) {
|
||||
let cleanedWidth = asciiLines[i].replace(mIrcColourRegex, '').length;
|
||||
if (cleanedWidth > finalAscii.layers[0].width) {
|
||||
finalAscii.layers[0].width = cleanedWidth;
|
||||
}
|
||||
|
||||
// Save some time on large asciis?
|
||||
// if (i > 50) break;
|
||||
}
|
||||
|
||||
// The foreground color is the first <COLOR>, and the background color is the second <COLOR> (if sent).
|
||||
for (let y in asciiLines) {
|
||||
let line = asciiLines[y];
|
||||
let len = line.length - 1;
|
||||
|
|
@ -298,8 +275,9 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
while (pos < len) {
|
||||
pos++;
|
||||
char = line[pos];
|
||||
|
||||
// next char is a color styling char, with possible color nums after
|
||||
|
||||
// This code and regex had come from asciiblaster and was changed to
|
||||
// work with asciibird.
|
||||
if (char === '\x03') {
|
||||
var matches = line.substr(pos + 1, 5).match(asciiblasterRegex);
|
||||
|
||||
|
|
@ -328,6 +306,10 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
};
|
||||
|
||||
actualPos++;
|
||||
|
||||
if (actualPos > cleanedWidth) {
|
||||
cleanedWidth = actualPos;
|
||||
}
|
||||
}
|
||||
|
||||
pos = -1;
|
||||
|
|
@ -335,6 +317,8 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
block = {};
|
||||
}
|
||||
|
||||
finalAscii.layers[0].width = cleanedWidth;
|
||||
|
||||
// First layer data generation
|
||||
finalAscii.layers = [...fillNullBlocks(finalAscii.layers[0].height, finalAscii.layers[0]
|
||||
.width, finalAscii.layers)];
|
||||
|
|
@ -350,228 +334,6 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
return true;
|
||||
}
|
||||
|
||||
|
||||
export const parseMircAsciiOld = async (contents, filename) => {
|
||||
|
||||
|
||||
// The current state of the Colours
|
||||
let curBlock = {
|
||||
...emptyBlock,
|
||||
};
|
||||
|
||||
contents = contents
|
||||
.split('\u0003\u0003')
|
||||
.join('\u0003')
|
||||
.split('\u000F').join('')
|
||||
.split('\u0003\n').join('\n')
|
||||
.split('\u0002\u0003').join('\u0003')
|
||||
.split('\u0002').join('') // bold
|
||||
.split('\u001D').join(''); // bg highlight
|
||||
|
||||
let asciiLines = contents.split("\n");
|
||||
|
||||
const finalAscii = {
|
||||
title: filename,
|
||||
layers: [{
|
||||
label: filename,
|
||||
visible: true,
|
||||
data: create2DArray(contents.split('\n').length),
|
||||
width: 0, // calculated down bellow
|
||||
height: contents.split('\n').length,
|
||||
}],
|
||||
history: [],
|
||||
historyIndex: 0,
|
||||
imageOverlay: {
|
||||
url: null,
|
||||
opacity: 95,
|
||||
asciiOpacity: 100,
|
||||
left: 0,
|
||||
top: 0,
|
||||
position: 'centered',
|
||||
size: 100,
|
||||
repeatx: true,
|
||||
repeaty: true,
|
||||
visible: false,
|
||||
stretched: false,
|
||||
},
|
||||
x: blockWidth * 35, // the dragable ascii canvas x
|
||||
y: blockHeight * 2, // the dragable ascii canvas y
|
||||
selectedLayer: 0,
|
||||
};
|
||||
|
||||
// Determine if we have a plain text ascii
|
||||
const colourCodeRegex = new RegExp(/\u0003/, 'g');
|
||||
let isPlainText = !colourCodeRegex.test(contents);
|
||||
|
||||
// https://modern.ircdocs.horse/formatting.html#color
|
||||
// In the following list, <CODE> represents the color formatting character (0x03), <COLOR> represents one or two ASCII digits (either 0-9 or 00-99).
|
||||
|
||||
// The use of this code can take on the following forms:
|
||||
|
||||
// <CODE> - Reset foreground and background colors.
|
||||
// <CODE>, - Reset foreground and background colors and display the , character as text.
|
||||
// <CODE><COLOR> - Set the foreground color.
|
||||
// <CODE><COLOR>, - Set the foreground color and display the , character as text.
|
||||
// <CODE><COLOR>,<COLOR> - Set the foreground and background color.
|
||||
|
||||
|
||||
// const mIrcSingleColourRegex = new RegExp(/(\u0003\d{0,2}[,])/, 'gu');
|
||||
const mIrcColourRegex = new RegExp(/\u0003(\d{0,2})?[,]?(\d{0,2})?/, 'gu');
|
||||
const asciiblasterRegex = /(^[\d]{1,2})?(?:,([\d]{1,2}))?/;
|
||||
|
||||
// Get the max line width, as some lines can be trimmed by spaces
|
||||
// we cannot always rely on the first line for the width
|
||||
for (let i = 0; i < asciiLines.length; i++) {
|
||||
let cleanedWidth = asciiLines[i].replace(mIrcColourRegex, '').length;
|
||||
if (cleanedWidth > finalAscii.layers[0].width) {
|
||||
finalAscii.layers[0].width = cleanedWidth;
|
||||
}
|
||||
|
||||
// Save some time on large asciis?
|
||||
// if (i > 50) break;
|
||||
}
|
||||
|
||||
// The foreground color is the first <COLOR>, and the background color is the second <COLOR> (if sent).
|
||||
for (let y in asciiLines) {
|
||||
let line = asciiLines[y];
|
||||
|
||||
// Check C5, or C, first then
|
||||
// let cleanLinesSingle = line.replace(mIrcSingleColourRegex, '');
|
||||
|
||||
// Do this
|
||||
// let cleanLinesSingle = line.replace(mIrcSingleColourRegex, '');
|
||||
let cleanLines = line.replace(mIrcColourRegex, '');
|
||||
// cleanLines = cleanLines.replace(mIrcColourRegex, '');
|
||||
|
||||
// Somehow merge the arrays
|
||||
// let parsedLineSingle = [...line.matchAll(mIrcSingleColourRegex)];
|
||||
let parsedLine = [...line.matchAll(mIrcColourRegex)];
|
||||
|
||||
let colourData = [];
|
||||
|
||||
// parsedLine = [...parsedLine, ...parsedLineSingle];
|
||||
|
||||
curBlock = {
|
||||
...emptyBlock,
|
||||
};
|
||||
|
||||
let newData = [];
|
||||
|
||||
if (!isPlainText) {
|
||||
for (let x in parsedLine) {
|
||||
let codeData = parsedLine[x];
|
||||
let colourArray = codeData[0].split("\u0003").join("").split(",");
|
||||
|
||||
// If we have C3,
|
||||
let endsWithComma = /,$/;
|
||||
if (endsWithComma.test(colourArray[0])) {
|
||||
cleanLines[codeData.index] = ',';
|
||||
}
|
||||
|
||||
if (colourArray.length === 2) {
|
||||
if (colourArray[0] > -1) {
|
||||
curBlock.fg = Number.parseInt(colourArray[0]);
|
||||
}
|
||||
|
||||
if (colourArray[1] !== "" && colourArray[1] > -1) {
|
||||
curBlock.bg = Number.parseInt(colourArray[1]);
|
||||
}
|
||||
} else if (colourArray.length === 1) {
|
||||
if (colourArray[0] == "") {
|
||||
delete curBlock['bg'];
|
||||
delete curBlock['fg'];
|
||||
delete curBlock['char'];
|
||||
}
|
||||
|
||||
if (colourArray[0] > 0) {
|
||||
curBlock.fg = Number.parseInt(colourArray[0]);
|
||||
delete curBlock['bg'];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
colourData.push({
|
||||
code: codeData,
|
||||
b: {
|
||||
...curBlock
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Readjust the indexes
|
||||
let indexAdjustment = 0;
|
||||
|
||||
for (let index in colourData) {
|
||||
if (index === 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
colourData[index].code.index = colourData[index].code.index - indexAdjustment;
|
||||
indexAdjustment = indexAdjustment + colourData[index].code[0].length;
|
||||
newData[colourData[index].code.index] = colourData[index].b;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Construct the ascii blocks
|
||||
for (let i in cleanLines) {
|
||||
let char = cleanLines[i];
|
||||
|
||||
// If there is a colour change present at this index
|
||||
// we will keep track of it
|
||||
if (!isPlainText && newData[i]) {
|
||||
if (newData[i].bg !== undefined) {
|
||||
curBlock.bg = newData[i].bg;
|
||||
}
|
||||
|
||||
if (newData[i].fg !== undefined) {
|
||||
curBlock.fg = newData[i].fg;
|
||||
}
|
||||
|
||||
if (newData[i].fg === undefined && newData[i].bg === undefined) {
|
||||
curBlock = {
|
||||
...emptyBlock
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
curBlock.char = char;
|
||||
|
||||
if (curBlock.bg === null) {
|
||||
delete curBlock['bg']
|
||||
}
|
||||
|
||||
if (curBlock.fg === null) {
|
||||
delete curBlock['fg']
|
||||
}
|
||||
|
||||
if (curBlock.char === null) {
|
||||
delete curBlock['char']
|
||||
}
|
||||
|
||||
finalAscii.layers[0].data[y][i] = {
|
||||
...curBlock
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
// First layer data generation
|
||||
finalAscii.layers = [...fillNullBlocks(finalAscii.layers[0].height, finalAscii.layers[0]
|
||||
.width, finalAscii.layers)];
|
||||
|
||||
// Store the ASCII and ensure we have no null blocks
|
||||
finalAscii.layers = LZString.compressToUTF16(
|
||||
JSON.stringify(finalAscii.layers),
|
||||
);
|
||||
|
||||
// Save ASCII to storage
|
||||
store.commit('newAsciibirdMeta', finalAscii);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// Creates new blank ASCII
|
||||
export const createNewAscii = (forms) => {
|
||||
const newAscii = {
|
||||
|
|
|
|||
|
|
@ -6,156 +6,305 @@
|
|||
@closed="$store.commit('closeModal', 'help')"
|
||||
>
|
||||
<template v-slot:default>
|
||||
<div class="mt-6 lg:mt-0 rounded shadow bg-white text-center ">
|
||||
<h1>Help</h1>
|
||||
<div class="mt-6 rounded shadow bg-white">
|
||||
<h1 class="help-h1">Current Features</h1>
|
||||
|
||||
# Current Features<br>
|
||||
<br>
|
||||
* Tabbed ASCII editing<br>
|
||||
* Layers support<br>
|
||||
* Show and hide layers<br>
|
||||
* Change layer order<br>
|
||||
* Double click to rename layer<br>
|
||||
* Context menu for layers<br>
|
||||
* Copy and paste ASCII blocks between tabs with the select tool<br>
|
||||
* Remembers state on refresh and when the browser loads, can also export the state to a file and load elsewhere.<br>
|
||||
* So you never lose your ascii art!<br>
|
||||
* Saves layers, brushes data also to same file<br>
|
||||
* Can import from clipboard, load from irc.watch/ascii, load from file<br>
|
||||
* Can export mirc ascii to clipboard, file or HTTP POST<br>
|
||||
* 99 Colour support<br>
|
||||
* Swap fg and bg colours with button click or Alt + r<br>
|
||||
* Mirror X and Y<br>
|
||||
* Grid mode with Alt + g<br>
|
||||
* Undo and redo with Ctrl + z and Ctrl + y, undos are set to a limit of 200 at the moment.<br>
|
||||
* Fg, Bg and Char boxes to filter when using certain tools<br>
|
||||
* For example filling with Char unchecked will ignore characters when filling<br>
|
||||
* If you want to remove the background but keep the text, uncheck FG and Char and eraser the bg only.<br>
|
||||
* Image overlay to trace images<br>
|
||||
* Accepts URLs only at the moment<br>
|
||||
* Can adjust the size and properties<br>
|
||||
* Toolbar containing<br>
|
||||
* Select, to copy, paste and save blocks as brushes<br>
|
||||
* Text mode, with arrow key support<br>
|
||||
* Fill background blocks<br>
|
||||
* Brush mode, can be controlled with keyboard and mouse<br>
|
||||
* Block picker (grab fg, bg and char of a block)<br>
|
||||
* Eraser - remove blocks, can be controlled with keyboard and mouse<br>
|
||||
* Fill Eraser - Fill remove blocks by bg, fg or char<br>
|
||||
* Brush Library and History<br>
|
||||
* Make circle, square, cross and other brushes by sizes<br>
|
||||
* Brush history, can save or re-use old brushes<br>
|
||||
* Library - Save most used brushes to library<br>
|
||||
* Brush history is set to a limit of 50<br>
|
||||
* Brush Preview<br>
|
||||
* Editable brush preview<br>
|
||||
* Can use the brush tool inside the brush preview<br>
|
||||
* Can use the eraser tool inside the brush preview<br>
|
||||
* Hovering outside brush area will save brush to history<br>
|
||||
* Context menu available on all brushes preview areas<br>
|
||||
* Export any brush to PNG, mIRC clipboard or file by right clicking the brush preview<br>
|
||||
<br>
|
||||
<br>
|
||||
## ASCII Editing<br>
|
||||
<br>
|
||||
* Ctrl + Z - Undo<br>
|
||||
* Ctrl + Y - Redo<br>
|
||||
<br>
|
||||
* F1 - Toggle Help<br>
|
||||
* Shift + F1 - About ASCIIBIRD and shout outs<br>
|
||||
<br>
|
||||
* Escape - Return to default mode, stop using any tool and close fg, bg and char panels.<br>
|
||||
<br>
|
||||
* Alt 1 to 8 - Will toggle the corresponding toolbar icon<br>
|
||||
<br>
|
||||
* Ctrl 1 to 0 - Change ASCII tab if possible<br>
|
||||
<br>
|
||||
* Alt + c - Opens character Panel (You can then press on the keyboard your desired character or select from <br>
|
||||
the list)<br>
|
||||
* Alt + f - Opens foreground panel (can then press 0 to 9 for the colour)<br>
|
||||
* Alt + b - Opens background panel (can then press 0 to 9 for the colour)<br>
|
||||
<br>
|
||||
* Alt + g - Toggle grid mode<br>
|
||||
<br>
|
||||
* Alt + x - Toggle Mirror X<br>
|
||||
* Alt + y - Toggle Mirror Y<br>
|
||||
* Alt + u - Toggle Update Brush (change brush preview if fg, bg or char changes)<br>
|
||||
* Alt + r - Flip FG and BG colours<br>
|
||||
<br>
|
||||
* Ctrl + e - Edit ASCII<br>
|
||||
* Ctrl + r - Close ASCII<br>
|
||||
* Ctrl + m - New ASCII (can't use ctrl + n)<br>
|
||||
* Ctrl + o - Toggle Asciibird Options<br>
|
||||
<br>
|
||||
### Importing<br>
|
||||
<br>
|
||||
* Ctrl + Shift + o - Open mIRC TXT File as new Ascii<br>
|
||||
* Ctrl + Shift + v - Paste New Ascii<br>
|
||||
<br>
|
||||
### Exporting<br>
|
||||
<br>
|
||||
* Ctrl + Shift + C - Copy to clipboard<br>
|
||||
* Ctrl + Shift + F - Save to TXT file<br>
|
||||
* Ctrl + Shift + G - Save to PNG file<br>
|
||||
* Ctrl + Shift + H - Save to HTTP Post<br>
|
||||
<br>
|
||||
## Showing / Hiding menus, tabs and panels<br>
|
||||
<br>
|
||||
* Ctrl + Alt + t - Hide / Show Tabs<br>
|
||||
* Ctrl + Alt + m - Hide / Show Menu<br>
|
||||
* Ctrl + Alt + d - Hide / Show Debug Panel<br>
|
||||
* Ctrl + Alt + b - Hide / Show Brush Library<br>
|
||||
* Ctrl + Alt + l - Hide / Show Layers<br>
|
||||
* Ctrl + Alt + n - Hide / Show Toolbar<br>
|
||||
* Ctrl + Alt + e - Hide / Show Brush Preview<br>
|
||||
## Select Mode<br>
|
||||
<br>
|
||||
* Ctrl + c - Copy blocks to clipboard<br>
|
||||
* Ctrl + x - Cut blocks to clipboard<br>
|
||||
* Ctrl + v - Paste blocks as brush<br>
|
||||
* Ctrl + b - Save Selection to Library<br>
|
||||
* Delete - Delete selected blocks<br>
|
||||
<br>
|
||||
## Eraser Mode<br>
|
||||
<br>
|
||||
* Four arrow keys control eraser cursor<br>
|
||||
* Space - apply eraser<br>
|
||||
<br>
|
||||
## Brush Mode<br>
|
||||
<br>
|
||||
* Four arrow keys control text cursor<br>
|
||||
* Space - apply brush<br>
|
||||
* Ctrl + ] - Increase both brush sizes by 1<br>
|
||||
* Ctrl + [ - Decrease both brush sizes by 1<br>
|
||||
* e - rotate brush<br>
|
||||
* q - flip brush<br>
|
||||
<br>
|
||||
## Text mode<br>
|
||||
<br>
|
||||
* Four arrow keys control text cursor<br>
|
||||
* Delete - Remove text from highlighted block<br>
|
||||
* Backspace - Remove current character and move to previous block<br>
|
||||
* Enter - Go to next line and reset X position to 0<br>
|
||||
<br>
|
||||
### Layers Related<br>
|
||||
<br>
|
||||
* Ctrl + Shift + t - Show / Hide Layer<br>
|
||||
* Ctrl + Shift + r - Rename Layer <br>
|
||||
* Ctrl + Shift + a - Add Layer <br>
|
||||
* Ctrl + Shift + d - Delete Layer <br>
|
||||
* Ctrl + Shift + s - Move Layer Down <br>
|
||||
* Ctrl + Shift + w - Move Layer Up <br>
|
||||
* Ctrl + Shift + m - Merge All Layers <br>
|
||||
<br>
|
||||
# Context Menus (right click menus)<br>
|
||||
<br>
|
||||
* Right clicking on any brush preview in the main area or library will allow you to export to PNG, txt or <br>
|
||||
clipboard just the brush itself.<br>
|
||||
* The main ascii has a few export options if you right click on the ascii<br>
|
||||
* The dashboard area (outside the ascii) was actually the very first menu in asciibird! and has some basic<br>
|
||||
shortcuts<br>
|
||||
* Layers can also be right clicked to preview their functions<br>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Tabbed ASCII editing</li>
|
||||
<li class="help-li">Layers support</li>
|
||||
<li class="help-li-space">- Show and hide layers</li>
|
||||
<li class="help-li-space">- Change layer order</li>
|
||||
<li class="help-li-space">- Double click to rename layer</li>
|
||||
<li class="help-li-space">- Context menu for layers</li>
|
||||
<li class="help-li">
|
||||
Copy and paste ASCII blocks between tabs with the select tool
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Remembers state on refresh and when the browser loads, can also
|
||||
export the state to a file and load elsewhere.
|
||||
</li>
|
||||
<li class="help-li-space">- So you never lose your ascii art!</li>
|
||||
<li class="help-li-space">
|
||||
- Saves layers, brushes data also to same file
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Can import from clipboard, load from irc.watch/ascii, load from file
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Can export mirc ascii to clipboard, file or HTTP POST
|
||||
</li>
|
||||
<li class="help-li">99 Colour support</li>
|
||||
<li class="help-li">
|
||||
Swap fg and bg colours with button click or Alt + r
|
||||
</li>
|
||||
<li class="help-li">Mirror X and Y</li>
|
||||
<li class="help-li">Grid mode with Alt + g</li>
|
||||
<li class="help-li">
|
||||
Undo and redo with Ctrl + z and Ctrl + y, undos are set to a limit
|
||||
of 200 at the moment.
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Fg, Bg and Char boxes to filter when using certain tools
|
||||
</li>
|
||||
<li class="help-li">
|
||||
- For example filling with Char unchecked will ignore characters
|
||||
when filling
|
||||
</li>
|
||||
<li class="help-li">
|
||||
- If you want to remove the background but keep the text, uncheck FG
|
||||
and Char and eraser the bg only.
|
||||
</li>
|
||||
<li class="help-li">Image overlay to trace images</li>
|
||||
<li class="help-li-space">- Accepts URLs only at the moment</li>
|
||||
<li class="help-li-space">- Can adjust the size and properties</li>
|
||||
<li class="help-li">Toolbar containing</li>
|
||||
<li class="help-li-space">
|
||||
- Select, to copy, paste and save blocks as brushes
|
||||
</li>
|
||||
<li class="help-li-space">- Text mode, with arrow key support</li>
|
||||
<li class="help-li-space">- Fill background blocks</li>
|
||||
<li class="help-li-space">
|
||||
- Brush mode, can be controlled with keyboard and mouse
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Block picker (grab fg, bg and char of a block)
|
||||
</li>
|
||||
<li class="help-li">
|
||||
- Eraser - remove blocks, can be controlled with keyboard and mouse
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Fill Eraser - Fill remove blocks by bg, fg or char
|
||||
</li>
|
||||
<li class="help-li">Brush Library and History</li>
|
||||
<li class="help-li-space">
|
||||
- Make circle, square, cross and other brushes by sizes
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Brush history, can save or re-use old brushes
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Library - Save most used brushes to library
|
||||
</li>
|
||||
<li class="help-li-space">- Brush history is set to a limit of 50</li>
|
||||
<li class="help-li">Brush Preview</li>
|
||||
<li class="help-li-space">- Editable brush preview</li>
|
||||
<li class="help-li-space">
|
||||
- Can use the brush tool inside the brush preview
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Can use the eraser tool inside the brush preview
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Hovering outside brush area will save brush to history
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Context menu available on all brushes preview areas
|
||||
</li>
|
||||
<li class="help-li">
|
||||
- Export any brush to PNG, mIRC clipboard or file by right clicking
|
||||
the brush preview
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1 class="help-h1">Roadmap and Bug To Fixes</h1>
|
||||
|
||||
<h3 class="help-h3">v1 is released, thanks pals!</h3>
|
||||
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Fix up help modal</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="help-h3">v 1.2</h3>
|
||||
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Unit testing</li>
|
||||
<li class="help-li">
|
||||
More tooltips on other parts, at the moment only Toolbar has
|
||||
tooltips, option to disable tooltips
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Fix brush tool for seamless lines when drawing fast
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Warning on mirc export if ascii exceeds IRCs 512 per chat line
|
||||
limit.
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Review encodings check on file import - UTF8 vs Latin something
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Fill tool is limited by the recursion limit on the browser. Each
|
||||
browser has a different limit. Filling an empty 80x196 ascii will
|
||||
throw a recursion error on firefox, but not on Safari for
|
||||
</li>
|
||||
this reason. We can review the fill feature in a future version of
|
||||
ASCII bird.
|
||||
<li class="help-li">More fill tool options?</li>
|
||||
<li class="help-li">
|
||||
Brush blocks larger than 1x1 can leave undoable blocks
|
||||
</li>
|
||||
<li class="help-li">Half block editing mode</li>
|
||||
<li class="help-li">
|
||||
This one time this ascii exported with a 1 more width and height
|
||||
</li>
|
||||
<li class="help-li">Dark / light modes, different themes</li>
|
||||
<li class="help-li">
|
||||
Context menus inside the panels can be way off sometimes
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Main toolbar can sometimes get stuck and unmovable
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Expand the brush manager, brush categories, download brushes,
|
||||
import/export brushes
|
||||
</li>
|
||||
<li class="help-li">ASCIIBIRD API ?!</li>
|
||||
|
||||
<h2 class="help-h2">Mobile / Touch Screen support</h2>
|
||||
|
||||
<p>
|
||||
Doesn't exist at the moment. While the underlying functions and code
|
||||
is compatible with mobile browsers from *babel*, the touch canvas
|
||||
events and text will need to be reviewed to work better with touch
|
||||
screens. For example while you can brush once, you cannot move the
|
||||
brush around.
|
||||
</p>
|
||||
|
||||
<h1 class="help-h1">Keyboard Shortcuts</h1>
|
||||
|
||||
<h2 class="help-h2">ASCII Editing</h2>
|
||||
|
||||
<li class="help-li">Ctrl + Z - Undo</li>
|
||||
<li class="help-li">Ctrl + Y - Redo</li>
|
||||
|
||||
<li class="help-li">F1 - Toggle Help</li>
|
||||
<li class="help-li">Shift + F1 - About ASCIIBIRD and shout outs</li>
|
||||
|
||||
<li class="help-li">
|
||||
Escape - Return to default mode, stop using any tool and close fg,
|
||||
bg and char panels.
|
||||
</li>
|
||||
|
||||
<li class="help-li">
|
||||
Alt 1 to 8 - Will toggle the corresponding toolbar icon
|
||||
</li>
|
||||
|
||||
<li class="help-li">Ctrl 1 to 0 - Change ASCII tab if possible</li>
|
||||
|
||||
<li class="help-li">
|
||||
Alt + c - Opens character Panel (You can then press on the keyboard
|
||||
your desired character or select from the list)
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Alt + f - Opens foreground panel (can then press 0 to 9 for the
|
||||
colour)
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Alt + b - Opens background panel (can then press 0 to 9 for the
|
||||
colour)
|
||||
</li>
|
||||
|
||||
<li class="help-li">Alt + g - Toggle grid mode</li>
|
||||
|
||||
<li class="help-li">Alt + x - Toggle Mirror X</li>
|
||||
<li class="help-li">Alt + y - Toggle Mirror Y</li>
|
||||
<li class="help-li">
|
||||
Alt + u - Toggle Update Brush (change brush preview if fg, bg or
|
||||
char changes)
|
||||
</li>
|
||||
<li class="help-li">Alt + r - Flip FG and BG colours</li>
|
||||
|
||||
<li class="help-li">Ctrl + e - Edit ASCII</li>
|
||||
<li class="help-li">Ctrl + r - Close ASCII</li>
|
||||
<li class="help-li">Ctrl + m - New ASCII (can't use ctrl + n)</li>
|
||||
<li class="help-li">Ctrl + o - Toggle Asciibird Options</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="help-h3">Importing</h3>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + o - Open mIRC TXT File as new Ascii
|
||||
</li>
|
||||
<li class="help-li">Ctrl + Shift + v - Paste New Ascii</li>
|
||||
</ul>
|
||||
<h3 class="help-h3">Exporting</h3>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + Shift + C - Copy to clipboard</li>
|
||||
<li class="help-li">Ctrl + Shift + F - Save to TXT file</li>
|
||||
<li class="help-li">Ctrl + Shift + G - Save to PNG file</li>
|
||||
<li class="help-li">Ctrl + Shift + H - Save to HTTP Post</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Showing / Hiding menus, tabs and panels</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + Alt + t - Hide / Show Tabs</li>
|
||||
<li class="help-li">Ctrl + Alt + m - Hide / Show Menu</li>
|
||||
<li class="help-li">Ctrl + Alt + d - Hide / Show Debug Panel</li>
|
||||
<li class="help-li">Ctrl + Alt + b - Hide / Show Brush Library</li>
|
||||
<li class="help-li">Ctrl + Alt + l - Hide / Show Layers</li>
|
||||
<li class="help-li">Ctrl + Alt + n - Hide / Show Toolbar</li>
|
||||
<li class="help-li">Ctrl + Alt + e - Hide / Show Brush Preview</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Select Mode</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + c - Copy blocks to clipboard</li>
|
||||
<li class="help-li">Ctrl + x - Cut blocks to clipboard</li>
|
||||
<li class="help-li">Ctrl + v - Paste blocks as brush</li>
|
||||
<li class="help-li">Ctrl + b - Save Selection to Library</li>
|
||||
<li class="help-li">Delete - Delete selected blocks</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Eraser Mode</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Four arrow keys control eraser cursor</li>
|
||||
<li class="help-li">Space - apply eraser</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Brush Mode</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Four arrow keys control text cursor</li>
|
||||
<li class="help-li">Space - apply brush</li>
|
||||
<li class="help-li">Ctrl + ] - Increase both brush sizes by 1</li>
|
||||
<li class="help-li">Ctrl + [ - Decrease both brush sizes by 1</li>
|
||||
<li class="help-li">e - rotate brush</li>
|
||||
<li class="help-li">q - flip brush</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Text mode</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Four arrow keys control text cursor</li>
|
||||
<li class="help-li">Delete - Remove text from highlighted block</li>
|
||||
<li class="help-li">
|
||||
Backspace - Remove current character and move to previous block
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Enter - Go to next line and reset X position to 0
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="help-h3">Layers Related</h3>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + Shift + t - Show / Hide Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + r - Rename Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + a - Add Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + d - Delete Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + s - Move Layer Down</li>
|
||||
<li class="help-li">Ctrl + Shift + w - Move Layer Up</li>
|
||||
<li class="help-li">Ctrl + Shift + m - Merge All Layers</li>
|
||||
</ul>
|
||||
<h1 class="help-h1">Context Menus (right click menus)</h1>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">
|
||||
Right clicking on any brush preview in the main area or library will
|
||||
allow you to export to PNG, txt or clipboard just the brush itself.
|
||||
</li>
|
||||
<li class="help-li">
|
||||
The main ascii has a few export options if you right click on the
|
||||
ascii
|
||||
</li>
|
||||
<li class="help-li">
|
||||
The dashboard area (outside the ascii) was actually the very first
|
||||
menu in asciibird! and has some basic shortcuts
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Layers can also be right clicked to preview their functions
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -170,14 +319,47 @@
|
|||
</t-modal>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.help-h1 {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
.help-h2 {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
.help-h3 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
.help-li {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.help-list {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.help-li-space {
|
||||
font-size: 12px;
|
||||
margin-left: 5%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import LZString from 'lz-string';
|
||||
// import BrushCanvas from "./../../components/parts/BrushCanvas.vue";
|
||||
import LZString from "lz-string";
|
||||
|
||||
export default {
|
||||
name: "Help",
|
||||
// components: {
|
||||
// BrushCanvas,
|
||||
// },
|
||||
created() {},
|
||||
mounted() {
|
||||
if (this.showOptionsModal) {
|
||||
|
|
@ -192,8 +374,12 @@ export default {
|
|||
return this.$store.getters.modalState.help;
|
||||
},
|
||||
helpAscii() {
|
||||
return JSON.parse(LZString.decompressFromEncodedURIComponent("NrDeF8BpQIgMwOYwFwAZIwMYAsCGAnFGAQRilkRXSz0ORgGUzp4k0McCiBhZit6pzowAkn1ZUOtImPIT2NLvQBC4ygqEy1AqUpgAlbZMXCAIn3KXolgLqQwViC3WDp9AG5GNbmAEYL1oFOwY6hdg5BjvKuegAKXjHChnIuusIAoglpRABqWSZaKToF9JlFxpr0AOoBIdbhwTAARmy+GKklMAAE4i0obdHZ9D1yfcgDHZXdva3txVMjkUHNs4Odi7BjE-M+Gyv9cxW7MwdrCyfjh956G7b2m6uTx6OPOze1L6dP75+XZ88sLZXRJEPZA-4-QGvI6QuqNcHfYRg6HXJEWBr7P6I0EfJYPL5vNG-bYwol40LkhoUuHU2mU+7lVFEAB6+XOjJB9AALmyfNheXoAJYC4QAZxFOI5QxgwqlnXFcvZzkJRFwCTCDPJytJRCaEvosu1TPohEVPgAJriaZEqVrrfa6RAbDYgA"));
|
||||
}
|
||||
return JSON.parse(
|
||||
LZString.decompressFromEncodedURIComponent(
|
||||
"NrDeF8BpQIgMwOYwFwAZIwMYAsCGAnFGAQRilkRXSz0ORgGUzp4k0McCiBhZit6pzowAkn1ZUOtImPIT2NLvQBC4ygqEy1AqUpgAlbZMXCAIn3KXolgLqQwViC3WDp9AG5GNbmAEYL1oFOwY6hdg5BjvKuegAKXjHChnIuusIAoglpRABqWSZaKToF9JlFxpr0AOoBIdbhwTAARmy+GKklMAAE4i0obdHZ9D1yfcgDHZXdva3txVMjkUHNs4Odi7BjE-M+Gyv9cxW7MwdrCyfjh956G7b2m6uTx6OPOze1L6dP75+XZ88sLZXRJEPZA-4-QGvI6QuqNcHfYRg6HXJEWBr7P6I0EfJYPL5vNG-bYwol40LkhoUuHU2mU+7lVFEAB6+XOjJB9AALmyfNheXoAJYC4QAZxFOI5QxgwqlnXFcvZzkJRFwCTCDPJytJRCaEvosu1TPohEVPgAJriaZEqVrrfa6RAbDYgA"
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showOptionsModal(val) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ module.exports = {
|
|||
keyframes: {
|
||||
tooltip_show: {
|
||||
'0%' : { visibility: 'hidden', opacity: '0'},
|
||||
'75%' : { visibility: 'hidden', opacity: '0'},
|
||||
'30%' : { visibility: 'visible', opacity: '100'},
|
||||
'100%' : { visibility: 'visible', opacity: '100'},
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue