addcts inverse ascii bug fix, undo/redo around layers (WIP)

This commit is contained in:
Hugh Bord 2021-12-18 11:35:58 +10:00
szülő 5e0d3ae2ea
commit 29f1426930
4 fájl változott, egészen pontosan 72 új sor hozzáadva és 14 régi sor törölve

Fájl megtekintése

@ -64,7 +64,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. Refreshing the page seems to fix most strange things.
* That inverted black / white bug when exporting, happens if fg or bg is null (this maybe fixed with the recent work)
* Layers manipulation and undo / redo is buggy
## Focusing on Now

Fájl megtekintése

@ -216,7 +216,7 @@ export default {
if (this.brushBlocks[y] && this.brushBlocks[y][x]) {
const curBlock = this.brushBlocks[y][x];
if (curBlock.bg !== undefined && this.isTargettingBg) {
if ((curBlock.bg !== undefined || curBlock.bg !== null) && this.isTargettingBg) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(

Fájl megtekintése

@ -286,6 +286,17 @@ export default new Vuex.Store({
state.asciibirdMeta[state.tab].selectedLayer = 0;
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
mergedLayers));
// Remove our undos here for the layer
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));
}
state.asciibirdMeta[state.tab].historyIndex = history.length - 1;
},
changeLayer(state, payload) {
state.asciibirdMeta[state.tab].selectedLayer = payload
@ -306,6 +317,20 @@ export default new Vuex.Store({
if (tempLayers.length > 1) {
tempLayers.splice(payload, 1)
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
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
@ -331,8 +356,23 @@ export default new Vuex.Store({
tempLayers[payload + 1] = swap
tempLayers[payload] = swap1
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
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].historyIndex = history.length - 1;
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
}
},
@ -347,6 +387,22 @@ export default new Vuex.Store({
tempLayers[payload - 1] = swap
tempLayers[payload] = swap1
// Remove our undos here for the layer
let history = state.asciibirdMeta[state.tab].history;
for (let i in history) {
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].historyIndex = history.length - 1;
state.asciibirdMeta[state.tab].layers = LZString.compressToUTF16(JSON.stringify(
tempLayers));
}
@ -383,7 +439,7 @@ export default new Vuex.Store({
if (prev.old) {
for(let change in prev.old) {
let data = prev.old[change];
tempLayers[data.l].data[data.d.y][data.d.x] = data.d.b;
tempLayers[prev.l].data[data.y][data.x] = data.b;
}
}
@ -406,7 +462,7 @@ export default new Vuex.Store({
if (prev.new) {
for (let change in prev.new) {
let data = prev.new[change];
tempLayers[data.l].data[data.d.y][data.d.x] = data.d.b;
tempLayers[prev.l].data[data.y][data.x] = data.b;
}
}

Fájl megtekintése

@ -158,7 +158,9 @@ export default {
isMouseOnCanvas: false,
selectedBlocks: [],
// Used to store the difference when editing blocks then commits them
diffBlocks: {
l: 0,
old: [],
new: [],
},
@ -420,6 +422,11 @@ export default {
yOffset() {
this.delayRedrawCanvas();
},
selectedLayerIndex(val, old) {
if (val !== old) {
this.diffBlocks.l = val;
}
}
},
methods: {
canvasKeyDown(char) {
@ -807,16 +814,16 @@ export default {
curBlock = { ...mergeLayers[y][x] };
if (curBlock.bg !== undefined) {
if (curBlock.bg !== undefined && curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);
}
if (curBlock.char !== undefined) {
if (curBlock.fg !== undefined) {
if (curBlock.char !== undefined && curBlock.char !== null) {
if (curBlock.fg !== undefined && curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.fg];
} else {
this.ctx.fillStyle = "#000000";
this.ctx.fillStyle = "#FFFFFF";
}
this.ctx.fillText(
@ -871,6 +878,7 @@ export default {
});
this.diffBlocks = {
l: this.selectedLayerIndex,
new: [],
old: [],
};
@ -1551,12 +1559,9 @@ export default {
if (!this.diffBlocks.old[y][x]) {
this.diffBlocks.old[y][x] = {
l: this.selectedLayerIndex,
d: {
x: x,
y: y,
b: { ...oldBlock },
},
};
}
@ -1566,12 +1571,9 @@ export default {
if (!this.diffBlocks.new[y][x]) {
this.diffBlocks.new[y][x] = {
l: this.selectedLayerIndex,
d: {
x: x,
y: y,
b: { ...newBlock },
},
};
}
},