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

layers undo (WIP)

This commit is contained in:
Hugh Bord 2021-12-27 15:17:08 +10:00
parent 10241a5242
commit b50fc25e8c
5 changed files with 206 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Dashboard.vue
View File

@ -567,7 +567,7 @@ export default {
this.selectedBlocks = [];
this.$toasted.show("Copied blocks!", {
type: "success",
icon: "fa-check-circle",
icon: "content_copy",
});
},
icon: "content_copy",
@ -614,7 +614,7 @@ export default {
this.$toasted.show("Cut blocks!", {
type: "success",
icon: "fa-check-circle",
icon: "content_cut",
});
}
},
@ -661,7 +661,7 @@ export default {
this.selectedBlocks = [];
this.$toasted.show("Deleted blocks!", {
type: "success",
icon: "fa-check-circle",
icon: "delete_sweep",
});
}
},
@ -1376,7 +1376,6 @@ export default {
changeTab(key) {
// Update the tab index in vuex store
this.$store.commit("changeTab", key);
this.currentTab = key;
},
closeTab(key) {
this.$dialog

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

@ -171,10 +171,10 @@ export default {
return this.$store.getters.currentAsciiLayers;
},
selectedLayer() {
return this.$store.getters.selectedLayer;
return this.$store.getters.selectedLayer || 0;
},
currentLayer() {
return this.currentAsciiLayers[this.selectedLayer];
return this.currentAsciiLayers[this.selectedLayer] || this.currentAsciiLayers[0];
},
canToggleLayer() {
return this.currentAsciiLayers.length > 1;

4
src/main.js
View File

@ -16,9 +16,9 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable);
Vue.use(VueClipboard);
Vue.use(Toasted, {
position: 'bottom-center',
iconPack: 'fontawesome',
iconPack: 'material',
type: 'info',
duration: 1000,
duration: 1200,
});
new Vue({

244
src/store/index.js
View File

@ -261,6 +261,8 @@ export default new Vuex.Store({
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
let width = tempLayers[0].width;
let height = tempLayers[0].height;
@ -285,11 +287,23 @@ export default new Vuex.Store({
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: tempLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length;
},
mergeAllLayers(state) {
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
let width = tempLayers[0].width;
let height = tempLayers[0].height;
let label = tempLayers[state.asciibirdMeta[state.tab].selectedLayer].label;
@ -307,15 +321,23 @@ export default new Vuex.Store({
mergedLayers));
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
// let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
data.l = 0;
history[i] = LZString.compressToUTF16(JSON.stringify(data));
}
// for (let i in history) {
// let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
// data.l = 0;
// history[i] = LZString.compressToUTF16(JSON.stringify(data));
// }
state.asciibirdMeta[state.tab].historyIndex = history.length;
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: mergedLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length-1;
},
changeLayer(state, payload) {
state.asciibirdMeta[state.tab].selectedLayer = payload
@ -324,43 +346,69 @@ export default new Vuex.Store({
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
tempLayers[payload].visible = !tempLayers[payload].visible
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: tempLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length;
},
removeLayer(state, payload) {
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
if (tempLayers.length > 1) {
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
tempLayers.splice(payload, 1)
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
// let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
// for (let i in history) {
// if (history[i].t !== undefined && history[i].t === 'l') {
// continue;
// }
if (data.l === payload) {
history.splice(i, 1);
}
// let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
}
// if (data.l === payload) {
// history.splice(i, 1);
// }
state.asciibirdMeta[state.tab].historyIndex = history.length - 1;
// }
// Automatically select the next best layer to avoid bugs
if (tempLayers[payload + 1]) {
state.asciibirdMeta[state.tab].selectedLayer = payload + 1
} else if (tempLayers[payload - 1]) {
state.asciibirdMeta[state.tab].selectedLayer = payload - 1
} else if (tempLayers[0]) {
state.asciibirdMeta[state.tab].selectedLayer = 0
}
state.asciibirdMeta[state.tab].selectedLayer = 0
// if (tempLayers[payload + 1]) {
// state.asciibirdMeta[state.tab].selectedLayer = payload + 1
// } else if (tempLayers[payload - 1]) {
// state.asciibirdMeta[state.tab].selectedLayer = payload - 1
// }
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: tempLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length;
}
},
@ -368,10 +416,9 @@ export default new Vuex.Store({
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
if (tempLayers[payload + 1]) {
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
let swap1 = tempLayers[payload + 1];
let swap = tempLayers[payload];
@ -379,22 +426,35 @@ export default new Vuex.Store({
tempLayers[payload] = swap1
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
// let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
// for (let i in history) {
// if (history[i].t !== undefined && history[i].t === 'l') {
// continue;
// }
if (data.l === payload) {
data.l === payload + 1;
history[i] = LZString.compressToUTF16(JSON.stringify(data));
}
}
// let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
state.asciibirdMeta[state.tab].historyIndex = history.length - 1;
// if (data.l === payload) {
// data.l === payload + 1;
// history[i] = LZString.compressToUTF16(JSON.stringify(data));
// }
// }
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: tempLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length;
state.asciibirdMeta[state.tab].selectedLayer = payload + 1
}
@ -404,32 +464,44 @@ export default new Vuex.Store({
.layers))
if (tempLayers[payload - 1]) {
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
let swap1 = tempLayers[payload - 1];
let swap = tempLayers[payload];
tempLayers[payload - 1] = swap
tempLayers[payload] = swap1
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
// let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
// for (let i in history) {
// if (history[i].t !== undefined && history[i].t === 'l') {
// continue;
// }
if (data.l === payload) {
data.l === payload - 1;
history[i] = LZString.compressToUTF16(JSON.stringify(data));
}
}
state.asciibirdMeta[state.tab].historyIndex = history.length - 1;
// let data = JSON.parse(LZString.decompressFromUTF16(history[i]));
// if (data.l === payload) {
// data.l === payload - 1;
// history[i] = LZString.compressToUTF16(JSON.stringify(data));
// }
// }
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: tempLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length;
state.asciibirdMeta[state.tab].selectedLayer = payload - 1
}
@ -439,13 +511,25 @@ export default new Vuex.Store({
.layers))
if (tempLayers[payload.key]) {
// For some reason this is the only way to get this working, despite trying [ ... var ]
let oldLayer = JSON.parse(JSON.stringify(tempLayers));
tempLayers[payload.key].label = payload.label;
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
let newLayers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
}
state.asciibirdMeta[state.tab].layers = newLayers
state.asciibirdMeta[state.tab].history.push({
t: 'l',
d: LZString.compressToUTF16(JSON.stringify({
new: tempLayers,
old: oldLayer
}))
});
state.asciibirdMeta[state.tab].historyIndex = state.asciibirdMeta[state.tab].history
.length;
}
},
// ASCII
@ -470,29 +554,47 @@ export default new Vuex.Store({
// state.asciibirdMeta[state.tab].history.push(layerHistory)
// },
// BLOCKS
undoBlocks(state) {
let historyIndex = state.asciibirdMeta[state.tab].historyIndex;
if (state.asciibirdMeta[state.tab].history[historyIndex - 1]) {
let prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
let prev = state.asciibirdMeta[state.tab].history[historyIndex - 1];
// Process layer chunks
if (state.asciibirdMeta[state.tab].history[historyIndex - 1].t !== undefined && state
.asciibirdMeta[state.tab].history[historyIndex - 1].t === 'l') {
let data = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.history[historyIndex - 1].d));
console.log(data)
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(data
.old));
state.asciibirdMeta[state.tab].historyIndex--;
return;
}
prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.history[
historyIndex - 1]));
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
// Process block chunks
if (prev.old) {
for (let change in prev.old) {
let data = prev.old[change];
tempLayers[prev.l].data[data.y][data.x] = {
...data.b
};
// if (tempLayers[prev.l].data[data.y][data.x]['char'] === undefined) {
// tempLayers[prev.l].data[data.y][data.x]['char'] = " ";
// }
}
}
@ -505,18 +607,42 @@ export default new Vuex.Store({
redoBlocks(state) {
let historyIndex = state.asciibirdMeta[state.tab].historyIndex;
let prev;
if (state.asciibirdMeta[state.tab].history[historyIndex]) {
let prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
prev = state.asciibirdMeta[state.tab].history[historyIndex];
// Process layer chunks
if (state.asciibirdMeta[state.tab].history[historyIndex].t !== undefined && state
.asciibirdMeta[state.tab].history[historyIndex].t === 'l') {
let data = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.history[historyIndex].d));
console.log(data)
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(data
.old));
state.asciibirdMeta[state.tab].historyIndex++;
return;
}
prev = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.history[
historyIndex]));
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.layers))
// Process block chunks
if (prev.new) {
for (let change in prev.new) {
let data = prev.new[change];
tempLayers[prev.l].data[data.y][data.x] = { ... data.b };
tempLayers[prev.l].data[data.y][data.x] = {
...data.b
};
// if (tempLayers[prev.l].data[data.y][data.x]['char'] === undefined) {
// tempLayers[prev.l].data[data.y][data.x]['char'] = " ";

29
src/views/Editor.vue
View File

@ -223,7 +223,7 @@ export default {
return this.currentAscii.selectedLayer || 0;
},
currentSelectedLayer() {
return this.currentAsciiLayers[this.selectedLayerIndex];
return this.currentAsciiLayers[this.selectedLayerIndex] || [];
},
currentAsciiLayerBlocks() {
return this.currentSelectedLayer.data;
@ -387,9 +387,9 @@ export default {
}
},
currentSelectedLayer(val, old) {
if (old && old.visible) {
this.warnInvisibleLayer();
}
// if (val && val.visible) {
// this.warnInvisibleLayer();
// }
},
currentAsciiLayerBlocks() {
this.delayRedrawCanvas();
@ -494,12 +494,9 @@ export default {
}
},
// Layers undo
// currentAsciiLayers(val, old) {
// this.$store.commit("pushLayerHistory", {
// old: old,
// new: val,
// });
// }
currentAsciiLayers(val, old) {
this.delayRedrawCanvas(true);
}
},
methods: {
startExport(type) {
@ -805,10 +802,10 @@ export default {
this.delayRedrawCanvas();
},
warnInvisibleLayer() {
if (!this.currentSelectedLayer && this.currentSelectedLayer.visible) {
if (!this.currentSelectedLayer.visible) {
this.$toasted.show("You are trying to edit an invisible layer!!", {
type: "error",
icon: "fa-check-cross",
icon: "warning_amber",
singleton: true,
});
}
@ -1762,13 +1759,15 @@ export default {
}
this.drawBrushBlocks(brushX, brushY, brushBlock, null);
if (this.canTool) {
this.storeDiffBlocks(arrayX, arrayY, oldBlock, brushBlock);
}
} else if (this.isErasing) {
this.drawBrushBlocks(brushX, brushY, brushBlock, null, true);
}
if (this.canTool) {
this.storeDiffBlocks(arrayX, arrayY, oldBlock, brushBlock);
}
}
}
}