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

compression in localStorage WORKING, ctrl z undo working much better

This commit is contained in:
Hugh Bord 2021-05-16 10:30:18 +10:00
parent a7686175c5
commit 9e71bdb4de
4 changed files with 55 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Dashboard.vue
View File

@ -165,7 +165,7 @@ export default {
this.canvasX = value.x;
this.canvasY = value.y;
},
onImport() {
async onImport() {
const { files } = this.$refs.asciiInput;
const filename = files[0].name;
const fileReader = new FileReader();
@ -451,6 +451,8 @@ export default {
} // End loop charPos
// Store the ASCII
finalAscii.blocks = LZString.compressToUTF16(JSON.stringify(finalAscii.blocks))
finalAscii.history.push( finalAscii.blocks )
this.$store.commit("newAsciibirdMeta", finalAscii);
// To show the ASCII after importing we get the last key
@ -471,7 +473,6 @@ export default {
this.$store.commit("changeState", { ... contents });
},
exportAsciibirdState() {
// Download to a gzipped json file
let output;
try {
@ -497,18 +498,19 @@ export default {
},
exportMirc(type) {
const { currentAscii } = this.$store.getters;
let blocks = this.$store.getters.currentAsciiBlocks
const output = [];
let curBlock = null;
let prevBlock = { bg: -1, fg: -1 };
for (let y = 0; y <= currentAscii.blocks.length - 1; y++) {
for (let x = 0; x <= currentAscii.blocks[y].length - 1; x++) {
curBlock = currentAscii.blocks[y][x];
for (let y = 0; y <= blocks.length - 1; y++) {
for (let x = 0; x <= blocks[y].length - 1; x++) {
curBlock = blocks[y][x];
// If we have a difference between our previous block
// we'll put a colour codes and continue as normal
if (curBlock.bg !== prevBlock.bg || curBlock.fg !== prevBlock.fg) {
Object.assign(curBlock, currentAscii.blocks[y][x]);
Object.assign(curBlock, blocks[y][x]);
const zeroPad = (num, places) => String(num).padStart(places, "0");
output.push(
`\u0003${zeroPad(
@ -523,7 +525,7 @@ export default {
// null .chars will end up as space
output.push(curBlock.char ?? " ");
prevBlock = currentAscii.blocks[y][x];
prevBlock = blocks[y][x];
}
// We can never have a -1 colour code so we'll always
@ -531,7 +533,7 @@ export default {
prevBlock = { bg: -1, fg: -1 };
// New line except for the very last line
if (y < currentAscii.blocks.length - 1) {
if (y < blocks.length - 1) {
output.push("\n");
}
}

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

@ -43,6 +43,8 @@
</template>
<script>
import LZString from 'lz-string';
export default {
name: "NewAsciiModal",
created() {},
@ -71,7 +73,7 @@ export default {
this.$modal.show("create-ascii-modal");
},
createNewASCII() {
const payload = {
let newAscii = {
title: this.forms.createAscii.title,
key: this.$store.getters.asciibirdMeta.length,
width: this.forms.createAscii.width,
@ -85,9 +87,9 @@ export default {
};
// Push all the default ASCII blocks
for (let x = 0; x < payload.width; x++) {
for (let y = 0; y < payload.height; y++) {
payload.blocks[y].push({
for (let x = 0; x < newAscii.width; x++) {
for (let y = 0; y < newAscii.height; y++) {
newAscii.blocks[y].push({
bg: null,
fg: null,
char: null,
@ -95,7 +97,9 @@ export default {
}
}
this.$store.commit("newAsciibirdMeta", payload);
newAscii.blocks = LZString.compressToUTF16(JSON.stringify(newAscii.blocks))
newAscii.history.push( ... newAscii.blocks)
this.$store.commit("newAsciibirdMeta", newAscii);
this.$store.commit('openModal', 'new-ascii')
this.$modal.hide("create-ascii-modal");

22
src/store/index.js
View File

@ -210,22 +210,14 @@ export default new Vuex.Store({
// current - payload
if (!skipUndo) {
state.asciibirdMeta[state.tab].history.push(LZString.compressToUTF16(JSON.stringify(state.asciibirdMeta[state.tab].blocks)))
state.asciibirdMeta[state.tab].history.push(state.asciibirdMeta[state.tab].blocks)
}
Object.assign(state.asciibirdMeta[state.tab].blocks, payload);
state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(payload));
},
undoBlocks(state) {
if (state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]) {
// {decompressed: 45465, compressed: 2029} huge saving!
// console.log({
// decompressed: LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1]).length,
// compressed: state.asciibirdMeta[state.tab].history[this.getters.undoIndex - 1].length
// })
Object.assign(state.asciibirdMeta[state.tab].blocks, JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].history[this.getters.undoIndex-1])));
state.asciibirdMeta[state.tab].history.pop()
if (state.asciibirdMeta[state.tab].history.length > 1) {
state.asciibirdMeta[state.tab].blocks = state.asciibirdMeta[state.tab].history.pop();
}
},
// redoBlocks(state) {
@ -273,8 +265,10 @@ export default new Vuex.Store({
currentTab: (state) => state.tab,
charCodes: (state) => state.charCodes,
mircColours: (state) => state.mircColours,
currentAscii: (state) => state.asciibirdMeta[state.tab] ?? false,
currentAsciiBlocks: (state) => state.asciibirdMeta[state.tab].blocks ?? false,
currentAscii: state => state.asciibirdMeta[state.tab] ?? false,
currentAsciiBlocks: state => {
return JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].blocks))
},
asciibirdMeta: (state) => state.asciibirdMeta,
nextTabValue: (state) => state.asciibirdMeta.length,
brushSizeHeight: (state) => state.toolbarState.brushSizeHeight,

63
src/views/Editor.vue
View File

@ -63,7 +63,7 @@ export default {
name: "Editor",
components: { Block },
mounted() {
if (this.$store.getters.currentAscii.blocks) {
if (this.currentAsciiBlocks) {
this.ctx = this.$refs.canvas.getContext("2d");
this.toolCtx = this.$refs.canvastools.getContext("2d");
@ -140,6 +140,9 @@ export default {
currentAscii() {
return this.$store.getters.currentAscii;
},
currentAsciiBlocks() {
return this.$store.getters.currentAsciiBlocks;
},
currentTool() {
return this.$store.getters.getToolbarIcons[
this.$store.getters.getCurrentTool
@ -218,7 +221,7 @@ export default {
this.delayRedrawCanvas()
},
redrawToolCanvas() {
if (this.currentAscii.blocks.length) {
if (this.currentAsciiBlocks.length) {
this.clearToolCanvas();
this.toolCtx.fillStyle = "rgba(255, 255, 255, 0.4)";
const BLOCK_WIDTH = this.currentAscii.blockWidth;
@ -238,7 +241,7 @@ export default {
// we need to clear the canvas
this.ctx.clearRect(0, 0, 10000, 10000);
if (this.currentAscii.blocks.length) {
if (this.currentAsciiBlocks.length) {
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
@ -258,10 +261,10 @@ export default {
canvasY = BLOCK_HEIGHT * y;
for (x = 0; x < this.currentAscii.width + 1; x++) {
if (this.currentAscii.blocks[y] && this.currentAscii.blocks[y][x]) {
if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
curBlock = Object.assign(
curBlock,
this.currentAscii.blocks[y][x]
this.currentAsciiBlocks[y][x]
);
canvasX = BLOCK_WIDTH * x;
@ -360,19 +363,19 @@ export default {
canvasKeyDown(char) {
if (this.isTextEditing) {
if (
this.currentAscii.blocks[this.textEditing.startY] &&
this.currentAscii.blocks[this.textEditing.startY][
this.currentAsciiBlocks[this.textEditing.startY] &&
this.currentAsciiBlocks[this.textEditing.startY][
this.textEditing.startX
]
) {
const targetBlock = this.currentAscii.blocks[this.textEditing.startY][
const targetBlock = this.currentAsciiBlocks[this.textEditing.startY][
this.textEditing.startX
];
switch (char) {
case "Backspace":
if (
this.currentAscii.blocks[this.textEditing.startY][
this.currentAsciiBlocks[this.textEditing.startY][
this.textEditing.startX - 1
]
) {
@ -390,7 +393,7 @@ export default {
targetBlock.char = char;
if (
this.currentAscii.blocks[this.textEditing.startY][
this.currentAsciiBlocks[this.textEditing.startY][
this.textEditing.startX + 1
]
) {
@ -416,14 +419,14 @@ export default {
case "brush":
this.canTool = false;
this.$store.commit("updateAsciiBlocks", this.currentAscii.blocks);
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
break;
case "eraser":
this.canTool = false;
this.$store.commit("updateAsciiBlocks", this.currentAscii.blocks);
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
break;
case "fill":
@ -453,11 +456,11 @@ export default {
this.toolCtx.clearRect(0, 0, 10000, 10000);
if (
this.currentAscii.blocks[this.y] &&
this.currentAscii.blocks[this.y][this.x] &&
this.currentAsciiBlocks[this.y] &&
this.currentAsciiBlocks[this.y][this.x] &&
this.currentTool
) {
const targetBlock = this.currentAscii.blocks[this.y][this.x];
const targetBlock = this.currentAsciiBlocks[this.y][this.x];
switch (this.currentTool.name) {
case "default":
@ -521,10 +524,10 @@ export default {
this.$emit("coordsupdate", { x: this.x, y: this.y });
if (
this.currentAscii.blocks[this.y] &&
this.currentAscii.blocks[this.y][this.x]
this.currentAsciiBlocks[this.y] &&
this.currentAsciiBlocks[this.y][this.x]
) {
let targetBlock = this.currentAscii.blocks[this.y][this.x];
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
switch (
this.$store.getters.getToolbarIcons[
@ -588,7 +591,7 @@ export default {
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
let targetBlock = this.currentAscii.blocks[this.y][this.x];
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
for (let y = 0; y < this.$store.getters.brushBlocks.length; y++) {
for (let x = 0;x < this.$store.getters.brushBlocks[0].length;x++) {
@ -606,8 +609,8 @@ export default {
let brushX = (this.x * BLOCK_WIDTH) + (x * BLOCK_WIDTH);
let brushY = (this.y * BLOCK_HEIGHT) + (y * BLOCK_HEIGHT);
if (this.currentAscii.blocks[arrayY] && this.currentAscii.blocks[arrayY][arrayX]) {
targetBlock = this.currentAscii.blocks[arrayY][arrayX];
if (this.currentAsciiBlocks[arrayY] && this.currentAsciiBlocks[arrayY][arrayX]) {
targetBlock = this.currentAsciiBlocks[arrayY][arrayX];
if (this.canBg) {
this.toolCtx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
@ -655,28 +658,24 @@ export default {
this.toolCtx.stroke();
},
fill() {
const fillBlocks = {
...this.currentAscii.blocks,
};
const { x } = this;
const { y } = this;
const newColor = this.$store.getters.getBgColour;
// Get the input which needs to be replaced.
const current = fillBlocks[y][x].bg;
const current = this.currentAsciiBlocks[y][x].bg;
// If the newColor is same as the existing
// Then return the original image.
if (current === newColor) {
return fillBlocks;
return this.currentAsciiBlocks;
}
// Other wise call the fill function which will fill in the existing image.
this.fillTool(fillBlocks, y, x, newColor, current);
this.fillTool(this.currentAsciiBlocks, y, x, newColor, current);
this.$store.commit("updateAsciiBlocks", fillBlocks);
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
},
fillTool(fillBlocks, y, x, newColor, current) {
// If row is less than 0
@ -704,16 +703,10 @@ export default {
}
// If the current pixel is not which needs to be replaced
// Bug with null bg stuff
// if (fillBlocks[y] && fillBlocks[y][x] && fillBlocks[y][x].bg !== null) {
if (fillBlocks[y][x].bg !== current) {
return;
}
// Update the new color
// }
fillBlocks[y][x].bg = newColor;
// Fill in all four directions