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

readme update, better select, bug fixes

This commit is contained in:
Hugh Bord 2021-12-29 14:03:42 +10:00
parent 797914c754
commit 0af0d6ea57
4 changed files with 79 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@ -48,8 +48,8 @@ A most latest production build to use is available at https://asciibird.jewbird.
* For example filling with Char unchecked will ignore characters when filling
* If you want to remove the background but keep the text, uncheck FG and Char and eraser the bg only.
* Image overlay to trace images
* Accepts URLs only at the moment
* Can adjust the size and properties
* Accepts URLs only at the moment
* Can adjust the size and properties
* Toolbar containing
* Select, to copy and paste blocks as brushes
* Text mode, with arrow key support
@ -69,27 +69,28 @@ A most latest production build to use is available at https://asciibird.jewbird.
* Right clicking removes block
* Hovering outside brush area will save brush to history
* Context menu available on all brushes preview areas
* Export any brush to PNG, mIRC clipboard or file by right clicking the brush preview
* Export any brush to PNG, mIRC clipboard or file by right clicking the brush preview
# Roadmap and Bug To Fixes
## Features to Add
* While select works fine, it could be improved.
* Add about asciibird modal
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
* Review encodings check on file import - UTF8 vs Latin something
## Bugs to fix
* Can't move toolbar, maybe related to after dialog or modal is open
* Brush edit if scroll out wont register mouse down and keep applying brush on scroll over without clicking
* Colors / chars panels wont open where toolbar is, if you scroll down a lot then try open them they will be at the top
* Fill tool has too much recursion sometimes
* One of the mirror brushes might be bugged sometimes and leave undoable blocks
* Fill tool has too much recursion sometimes, mostly it is okay
* One of the mirror brushes might be bugged sometimes and leave undoable blocks, if the mirror paths cross over it seems to do this
* Strange sort of bug with remove layer and selecting layer after, scroll up and down to redraw the canvas if it goes blank
* Redo will cause errors on layers sometimes
* Redo will cause errors on layers sometimes, mostly okay
* The edit dialog, even when code to save new data is commented out, will slow down everything if you open and save the modal a few times
* The current mIRC importer will fail on C5, type blocks by discarding the `,` character when it should preserve it. `art.txt` ascii is a good example of this. 98% of txt ascii imported should be fine.
* The current mIRC importer will fail on `C5,` type blocks by discarding the `,` character when it should preserve it. `art.txt` ascii is a good example of this. 98% of txt ascii imported should be fine.
## Mobile / Touch Screen support
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.

43
src/Dashboard.vue
View File

@ -160,6 +160,7 @@
:y-offset="scrollOffset"
:brush="drawBrush"
:updateascii="updateAscii"
:reset-select="resetSelect"
/>
<Toolbar v-show="toolbarState.visible" :y-offset="scrollOffset" />
@ -311,6 +312,7 @@ export default {
isShowingDialog: false,
drawBrush: false,
happy: false,
resetSelect: false,
mirror: {
x: false,
y: false,
@ -383,6 +385,9 @@ export default {
return menu.reverse();
},
isKeyboardDisabled() {
return this.$store.getters.isKeyboardDisabled;
},
selectedLayer() {
return this.$store.getters.selectedLayer;
},
@ -501,7 +506,6 @@ export default {
text: "New ASCII",
click: () => this.$store.commit("openModal", "new-ascii"),
icon: "fiber_new",
disabled: !this.isDefault,
hotkey: "ctrl+m",
},
],
@ -558,6 +562,7 @@ export default {
"selectBlocks",
filterNullBlocks(this.selectedBlocks)
);
this.resetSelect = !this.resetSelect;
this.selectedBlocks = [];
this.$toasted.show("Copied blocks!", {
type: "success",
@ -565,10 +570,7 @@ export default {
});
},
icon: "content_copy",
disabled:
!this.selectedBlocks.length &&
!this.isSelected &&
!this.isSelecting,
disabled: !this.isSelecting || !this.selectedBlocks.length,
hotkey: "ctrl+c",
},
{
@ -594,16 +596,11 @@ export default {
filterNullBlocks(this.selectedBlocks)
);
this.resetSelect = !this.resetSelect;
this.selectedBlocks = [];
// Reset and hide the select after successful copy
this.dispatchBlocks();
// this.$store.commit(
// "updateAsciiBlocks",
// this.currentAsciiLayerBlocks
// );
this.$emit("updatecanvas");
this.$toasted.show("Cut blocks!", {
@ -613,10 +610,7 @@ export default {
}
},
icon: "content_cut",
disabled:
!this.selectedBlocks.length &&
!this.isSelected &&
!this.isSelecting,
disabled: !this.isSelecting || !this.selectedBlocks.length,
hotkey: "ctrl+x",
},
{
@ -625,9 +619,13 @@ export default {
this.$store.commit("pushBrushHistory", this.brushBlocks);
this.$store.commit("brushBlocks", this.selectBlocks);
this.$store.commit("changeTool", 4);
this.resetSelect = !this.resetSelect;
this.selectedBlocks = [];
this.$store.commit("selectBlocks", []);
},
icon: "content_paste",
disabled: !this.selectedBlocks.length,
disabled: !this.selectBlocks.length,
hotkey: "ctrl+v",
},
{
@ -652,7 +650,9 @@ export default {
this.dispatchBlocks();
this.$emit("updatecanvas");
this.resetSelect = !this.resetSelect;
this.selectedBlocks = [];
this.$store.commit("selectBlocks", []);
this.$toasted.show("Deleted blocks!", {
type: "success",
icon: "delete_sweep",
@ -660,10 +660,7 @@ export default {
}
},
icon: "delete_sweep",
disabled:
!this.selectedBlocks.length &&
!this.isSelected &&
!this.isSelecting,
disabled: !this.isSelected && !this.selectedBlocks.length,
hotkey: "Delete",
},
],
@ -1311,6 +1308,9 @@ export default {
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
break;
case "post":
console.log(hotkeys.getScope());
// hotkeys.deleteScope("all");
this.$store.commit("toggleDisableKeyboard", true);
this.isShowingDialog = true;
this.$dialog
@ -1327,8 +1327,10 @@ export default {
type: "error",
});
this.$store.commit("toggleDisableKeyboard", false);
// hotkeys.setScope("all");
return;
}
if (result.isOk) {
let ascii = exportMirc();
@ -1361,6 +1363,7 @@ export default {
}
this.$store.commit("toggleDisableKeyboard", false);
// hotkeys.setScope("all");
this.isShowingDialog = false;
});

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

@ -14,7 +14,7 @@
class="brushcanvas"
@mousemove="canvasMouseMove"
@mousedown.left="processClick"
@mouseup.left="canTool = false"
@mouseup="canTool = false"
:width="blocksWidthHeight.w"
:height="blocksWidthHeight.h"
@mouseenter="disableToolbarMoving"
@ -262,8 +262,6 @@ export default {
this.$refs[`main-brush-menu`].close();
},
processClick(e) {
this.canTool = true;
if (e.offsetX >= 0) {
this.x = e.offsetX;
}
@ -276,13 +274,17 @@ export default {
this.y = Math.floor(this.y / blockHeight);
if (this.isErasing) {
this.canTool = true;
this.hasChanged = true;
this.eraseBlock();
// this.canTool = false;
}
if (this.isBrushing) {
this.canTool = true;
this.hasChanged = true;
this.addBlock();
// this.canTool = false;
}
},
getBlocksWidth(blocks) {
@ -410,26 +412,29 @@ export default {
this.delayRedrawCanvas();
},
eraseBlock() {
if (this.canBg) {
if (this.canBg && this.brushBlocks[this.y][this.x]["bg"] !== undefined) {
delete this.brushBlocks[this.y][this.x]["bg"];
}
if (this.canFg) {
if (this.canFg && this.brushBlocks[this.y][this.x]["fg"] !== undefined) {
delete this.brushBlocks[this.y][this.x]["fg"];
}
if (this.canText) {
if (this.canText && this.brushBlocks[this.y][this.x]["char"] !== undefined) {
delete this.brushBlocks[this.y][this.x]["char"];
}
this.delayRedrawCanvas();
},
disableToolbarMoving() {
this.canTool = false;
this.$store.commit("changeToolBarDraggable", false);
},
enableToolbarMoving() {
// Save the blocks when the mouse leaves the canvas area
// To avoid one block history changes
this.canTool = false;
if ((this.isErasing || this.isBrushing) && this.hasChanged) {
this.$store.commit("brushBlocks", this.brushBlocks);
this.$store.commit("changeToolBarDraggable", true);

39
src/views/Editor.vue
View File

@ -198,7 +198,7 @@ export default {
isUsingKeyboard: false,
canvasHash: null,
}),
props: ["updateCanvas", "yOffset", "canvasxy", "brush", "updateascii"],
props: ["updateCanvas", "yOffset", "canvasxy", "brush", "updateascii", "resetSelect"],
computed: {
canvasRef() {
return this.$refs.canvas;
@ -385,6 +385,10 @@ export default {
this.delayRedrawCanvas();
}
},
resetSelect(val, old) {
console.log(val)
this.resetSelectTool();
},
currentSelectedLayer(val, old) {
// if (val && val.visible) {
// this.warnInvisibleLayer();
@ -404,7 +408,7 @@ export default {
startY: null,
};
this.resetSelect();
this.resetSelectTool();
this.clearToolCanvas();
break;
@ -818,7 +822,7 @@ export default {
redo() {
this.$store.commit("redoBlocks");
},
resetSelect() {
resetSelectTool() {
this.selecting = {
startX: null,
startY: null,
@ -826,10 +830,14 @@ export default {
endY: null,
canSelect: false,
};
this.selectedBlocks = [];
this.clearToolCanvas();
this.delayRedrawCanvas();
this.$emit("selecting", this.selecting);
},
redrawSelect() {
if (this.currentAsciiLayerBlocks.length) {
if (this.currentAsciiLayerBlocks.length && this.isSelected) {
this.clearToolCanvas();
this.toolCtx.fillStyle = this.mircColours[0];
@ -1930,6 +1938,14 @@ export default {
delete newColor["bg"];
}
if (!this.canFg) {
delete newColor["fg"];
}
if (!this.canText) {
delete newColor["char"];
}
// If the newColor is same as the existing
// Then return the original image.
if (JSON.stringify(current) === JSON.stringify(newColor) && !eraser) {
@ -1960,12 +1976,27 @@ export default {
return;
}
if (
this.diffBlocks[y] !== undefined &&
this.diffBlocks[y][x] !== undefined
) {
return;
}
let targetBlock = currentLayerBlocks[y][x];
if (this.canBg && targetBlock.bg !== current.bg) {
return;
}
if (this.canFg && targetBlock.fg !== current.fg) {
return;
}
if (this.canText && targetBlock.char !== current.char) {
return;
}
// We can eraser or fill
let oldBlock = { ...targetBlock };
if (!eraser) {