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

sorta got undo

This commit is contained in:
Hugh Bord 2021-05-15 11:52:20 +10:00
parent 9ebf6950f7
commit 547729e702
5 changed files with 102 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -1,9 +1,32 @@
# ASCIIBIRD
ASCIIBIRD DEVELOPMENT - TAKING FLIGHT
```
┏ ┰╛ ╔═━┉┈┉╼━━╌┈╍┅┉╌┄┉┉━═╾─┈═──┄┈╼╍═┈┄╍═╍╼━┈─┈╼┉╍┅╌╮
╘███╏████╒█ ┕█ http://jewbird.live/ ╏
█┻█ █┦█ █╕ http://yt.jewbird.live/ ┇
╔╼█ ████ ████╚━ http://patreon.jewbird.live/ ┃
╕ █ █ █┉╍█ ┌█═ http://streamlabs.jewbird.live/ ╽
━█████ █ ██ █ ╯█ ASCIIBIRD TAKING FLIGHT ╎
┸╮ ╛ ╘╼┈┅┅──━┈┉┅┈╍┄┈┄┈╍┉╾╾╼╍═━╾╾┄╼╾═─┈═┉═╼┅─┈━╌╾╾┅╯
[BTC] 1L2u8mQs5pe7k11ozn2BgX388e3fGMD7qo
[XMR] 832owKc3ZuGCnmjHXHeZeeJzGAxyKx5uWU9WxoaXg6BhQ7aWSnZ6EhxFK8Mzw137nSgGAfMM8FgHjM6rpq5s1EofD7UT2yp
[STREAMLABS] http://streamlabs.jewbird.live [PATREON] http://patreon.jewbird.live
[YT] http://yt.jewbird.live [TWITCH] http://twitch.jewbird.live [GITHUB] http://git.jewbird.live
```
# BUGS
* Resize to the left and wont make blocks, diagonal resize works
* Need to click circle then click square again to update the brush preview properly
* Context menu / right click / browsers context menu issue
* Brush Y changing wont update when making smaller
# FOCUSING ON NOW
* UNDO
* Can we compress and decompress a string?
* vuex mutation undo vs array
* Toolbar stuff / Brush Size
* Need to make brush center on the mouse x and y

1
src/Dashboard.vue
View File

@ -302,6 +302,7 @@ export default {
blockWidth: 8 * this.$store.getters.blockSizeMultiplier,
blockHeight: 13 * this.$store.getters.blockSizeMultiplier,
blocks: this.create2DArray(asciiImport.split("\n").length),
history: [],
x: 8 * 35, // the dragable ascii canvas x
y: 13 * 2, // the dragable ascii canvas y
};

1
src/components/modals/NewAscii.vue
View File

@ -78,6 +78,7 @@ export default {
height: this.forms.createAscii.height,
blockWidth: 8,
blockHeight: 13,
history: [],
x: 247, // the dragable ascii canvas x
y: 24, // the dragable ascii canvas y
blocks: this.create2DArray(this.forms.createAscii.height),

42
src/store/index.js
View File

@ -1,5 +1,5 @@
import Vue from 'vue';
import Vuex from 'vuex';
import Vuex, { Store } from 'vuex';
import VuexPersistence from 'vuex-persist';
Vue.use(Vuex);
@ -204,9 +204,44 @@ export default new Vuex.Store({
updateToolBarState(state, payload) {
state.toolbarState = payload;
},
updateAsciiBlocks(state, payload) {
updateAsciiBlocks(state, payload, skipUndo = false) {
// before - state.asciibirdMeta[state.tab].blocks
// current - payload
if (!skipUndo) {
state.asciibirdMeta[state.tab].history.push(JSON.stringify(state.asciibirdMeta[state.tab].blocks))
}
Object.assign(state.asciibirdMeta[state.tab].blocks, payload);
},
undoBlocks(state) {
// let blocksHistory = state.asciibirdMeta[state.tab].history[store.getters.undoIndex]
// Object.assign(state.asciibirdMeta[state.tab].history, );
if (this.getters.undoIndex === 0) {
Object.assign(state.asciibirdMeta[state.tab].blocks, JSON.parse(state.asciibirdMeta[state.tab].history[this.getters.undoIndex]));
state.asciibirdMeta[state.tab].history.pop()
}
if (state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]) {
Object.assign(state.asciibirdMeta[state.tab].blocks, JSON.parse(state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]));
state.asciibirdMeta[state.tab].history.pop()
}
// if (blocksHistory[blocksHistory.length - 1]) {
// let prevBlockHistory = blocksHistory[store.getters.undoIndex];
// state.asciibirdMeta[state.tab].history.pop()
// }
},
// redoBlocks(state) {
// let blocksHistory = state.asciibirdMeta[state.tab].history
// if (blocksHistory[blocksHistory.length + 1]) {
// let prevBlockHistory = blocksHistory[blocksHistory.length + 1];
// Object.assign(state.asciibirdMeta[state.tab].blocks, prevBlockHistory);
// }
// },
updateBrushSize(state, payload) {
state.toolbarState.brushSizeHeight = payload.brushSizeHeight;
state.toolbarState.brushSizeWidth = payload.brushSizeWidth;
@ -222,6 +257,8 @@ export default new Vuex.Store({
break;
}
}
},
@ -251,6 +288,7 @@ export default new Vuex.Store({
brushSizeType: (state) => state.toolbarState.brushSizeType,
blockSizeMultiplier: (state) => state.blockSizeMultiplier,
brushBlocks: (state) => state.brushBlocks,
undoIndex: (state) => state.asciibirdMeta[state.tab].history.length-1
},
actions: {},
modules: {},

42
src/views/Editor.vue
View File

@ -79,17 +79,30 @@ export default {
const _this = this;
this._keyListener = function (e) {
// if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
e.preventDefault(); // present "Save Page" from getting triggered.
_this.canvasKeyDown(e.key);
// }
if (this.currentToolIsText) {
e.preventDefault();
_this.canvasKeyDown(e.key);
}
// Ctrl Z here
if (e.key === "z" && (e.ctrlKey)) {
console.log("undo " + "z");
e.preventDefault();
this.undo()
}
// Ctrl Y here
if (e.key === "y" && (e.ctrlKey)) {
// console.log("undo " + "y");
// e.preventDefault();
// this.$store.commit("redoBlocks");
// this.delayRedrawCanvas()
}
};
document.addEventListener("keydown", this._keyListener.bind(this));
}
},
created() {},
data: () => ({
ctx: null,
toolCtx: null,
@ -118,6 +131,9 @@ export default {
canvasStyle() {
return `width:${this.canvas.width};height:${this.canvas.height};`;
},
undoIndex() {
return this.$store.getters.undoIndex ?? -1
},
generateTitle() {
return this.$store.getters.currentAscii.title ?? "";
},
@ -129,6 +145,11 @@ export default {
this.$store.getters.getCurrentTool
];
},
currentToolIsText() {
return this.$store.getters.getToolbarIcons[
this.$store.getters.getCurrentTool
] === 'text';
},
canFg() {
return this.$store.getters.getTargetingFg
},
@ -192,6 +213,10 @@ export default {
},
},
methods: {
undo() {
this.$store.commit("undoBlocks");
this.delayRedrawCanvas()
},
redrawToolCanvas() {
if (this.currentAscii.blocks.length) {
this.clearToolCanvas();
@ -390,10 +415,15 @@ export default {
switch (this.currentTool.name) {
case "brush":
this.canTool = false;
this.$store.commit("updateAsciiBlocks", this.currentAscii.blocks);
break;
case "eraser":
this.canTool = false;
this.$store.commit("updateAsciiBlocks", this.currentAscii.blocks);
break;
case "fill":