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

edit ascii fix (made new bug), blocks fill bug fixes

This commit is contained in:
Hugh Bord 2021-12-26 16:31:07 +10:00
parent 5fb166e263
commit 82fab90e7f
8 changed files with 94 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -79,8 +79,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
* If you apply an empty block from a brush, it will remove the char when it is supposed to leave the block alone.
* A bigger circle brush is a good example for this one.
* Can't type in dialogs
* Still cannot change width in edit ascii modal
* 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
## Mobile / Touch Screen support

13
src/Dashboard.vue
View File

@ -6,7 +6,7 @@
<NewAscii />
<Options v-if="asciibirdMeta.length" />
<EditAscii v-if="asciibirdMeta.length" />
<EditAscii v-if="asciibirdMeta.length" @updateAscii="updateAsciiDetails" />
<PasteAscii />
<ImageOverlay v-if="asciibirdMeta.length" />
@ -161,6 +161,7 @@
@selecting="updateSelecting"
:y-offset="scrollOffset"
:brush="drawBrush"
:updateascii="updateAscii"
/>
<Toolbar v-show="toolbarState.visible" :y-offset="scrollOffset" />
@ -324,6 +325,7 @@ export default {
old: [],
new: [],
},
updateAscii: false,
}),
computed: {
isDefault() {
@ -1042,7 +1044,12 @@ export default {
// },
},
methods: {
dispatchBlocks(blocks) {
updateAsciiDetails(widthHeight) {
// From edit ascii modal to editor
this.updateAscii = widthHeight
},
dispatchBlocks() {
this.diffBlocks.old = this.diffBlocks.old.flat();
this.diffBlocks.new = this.diffBlocks.new.flat();
@ -1175,7 +1182,6 @@ export default {
// For ANSI we'll need to add back in the
// type cariable here
this.importType = type;
// console.log(this.importType);
this.$refs.asciiInput.click();
},
importAsciibirdState(fileContents) {
@ -1265,7 +1271,6 @@ export default {
};
fetch(this.lastPostURL, requestOptions)
.then((response) => {
console.log(response);
if (response.status === 200 || response.status === 201) {
this.$toasted.show("POSTed ascii!", {
type: "success",

2
src/ascii.js
View File

@ -673,7 +673,7 @@ export const fillNullBlocks = function (height, width, layerData = null) {
layers[i].height = height
}
return layers
return [ ... layers]
}
// Sometimes if we copy blocks the initial Y values will be null

34
src/components/modals/EditAscii.vue
View File

@ -10,7 +10,7 @@
<t-input
type="number"
name="width"
v-model="currentAsciiWidth"
v-model="layer.width"
min="1"
/>
@ -18,7 +18,7 @@
<t-input
type="number"
name="height"
v-model="currentAsciiHeight"
v-model="layer.height"
min="1"
/>
@ -26,7 +26,7 @@
<t-input
type="text"
name="title"
v-model="forms.editAscii.title"
v-model="layer.title"
max="128"
/>
@ -56,10 +56,11 @@
</template>
<script>
export default {
name: "EditAsciiModal",
created() {
this.forms.editAscii = this.currentAscii;
},
mounted() {
if (this.showEditAsciiModal) {
@ -69,13 +70,7 @@ export default {
}
},
data: () => ({
forms: {
editAscii: {
width: 80,
height: 30,
title: "ascii",
},
},
layer: {},
}),
computed: {
showEditAsciiModal() {
@ -97,10 +92,10 @@ export default {
return this.currentAsciiLayers[this.selectedLayerIndex];
},
currentAsciiWidth() {
return this.currentSelectedLayer.width || 0;
return this.layer.width || 0;
},
currentAsciiHeight() {
return this.currentSelectedLayer.height || 0;
return this.layer.height || 0;
},
},
watch: {
@ -116,15 +111,24 @@ export default {
},
methods: {
updateAscii() {
this.$store.commit("updateAscii", this.forms.editAscii);
this.$store.commit("updateAsciiTitle", this.layer.title);
this.$emit("updateAscii", {
width: this.layer.width,
height: this.layer.height,
});
this.close();
},
open() {
this.forms.editAscii = this.currentAscii;
this.layer = {
width: this.currentSelectedLayer.width,
height: this.currentSelectedLayer.height,
title: this.currentAscii.title
}
this.$modal.show("edit-ascii-modal");
},
close() {
this.$modal.hide("edit-ascii-modal");
this.layer = {}
},
},
};

1
src/components/parts/BrushCanvas.vue
View File

@ -181,7 +181,6 @@ export default {
methods: {
startExport(type) {
let ascii = exportMirc(this.getBlocks);
console.log(ascii);
switch (type) {
case "clipboard":
this.$copyText(ascii.output.join("")).then(

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

@ -223,7 +223,6 @@ export default {
},
startExport(type) {
let ascii = exportMirc(this.brushBlocks);
console.log(ascii);
switch (type) {
case "clipboard":
this.$copyText(ascii.output.join("")).then(

17
src/store/index.js
View File

@ -10,7 +10,8 @@ import {
create2DArray,
emptyBlock,
mergeLayers,
exportMirc
exportMirc,
fillNullBlocks
} from "../ascii";
Vue.use(Vuex);
@ -439,8 +440,8 @@ export default new Vuex.Store({
},
// ASCII
updateAscii(state, payload) {
state.asciibirdMeta[state.tab] = payload;
updateAsciiTitle(state, payload) {
state.asciibirdMeta[state.tab].title = payload;
},
// BLOCKS
@ -461,6 +462,10 @@ export default new Vuex.Store({
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'] = " ";
}
}
}
@ -484,7 +489,11 @@ export default new Vuex.Store({
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'] = " ";
}
}
}

90
src/views/Editor.vue
View File

@ -195,7 +195,7 @@ export default {
isUsingKeyboard: false,
}),
props: ["updateCanvas", "yOffset", "canvasxy", "brush"],
props: ["updateCanvas", "yOffset", "canvasxy", "brush", "updateascii"],
computed: {
canvasRef() {
return this.$refs.canvas;
@ -411,12 +411,13 @@ export default {
}
},
isMouseOnCanvas(val, old) {
if (!this.isSelecting) {
this.clearToolCanvas();
this.canTool = false;
// if (!this.isBrushing) {
this.dispatchBlocks()
// }
if (val !== old) {
if (!this.isSelecting) {
this.clearToolCanvas();
this.dispatchBlocks(true);
this.canTool = false;
this.delayRedrawCanvas();
}
}
},
gridView(val, old) {
@ -466,6 +467,28 @@ export default {
this.diffBlocks.l = val;
}
},
updateascii(val, old) {
if ( (val.width !== old.width) || (val.height !== old.height) ) {
let layers = fillNullBlocks(val.height, val.width);
this.canvas.width = val.width * blockWidth;
this.canvas.height = val.height * blockHeight;
this.$store.commit("changeAsciiWidthHeight", {
width: val.width,
height: val.height,
layers: [...layers],
});
this.$refs.canvasdrag.width = val.width * blockWidth;
this.$refs.canvasdrag.height = val.height * blockHeight;
this.clearToolCanvas();
this.delayRedrawCanvas();
}
}
},
methods: {
startExport(type) {
@ -502,8 +525,6 @@ export default {
this.$refs["editor-menu"].open(e);
},
canvasKeyDown(char) {
// if (this.isTextEditing) {
// console.log(char);
if (
this.currentAsciiLayerBlocks[this.textEditing.startY] &&
this.currentAsciiLayerBlocks[this.textEditing.startY][
@ -1029,7 +1050,7 @@ export default {
case "eraser":
this.canTool = false;
this.dispatchBlocks();
this.dispatchBlocks(true);
break;
@ -1730,6 +1751,14 @@ export default {
const arrayY = brushY / blockHeight;
const arrayX = brushX / blockWidth;
if (this.currentAsciiLayerBlocks[arrayY] === undefined) {
continue;
}
if (this.currentAsciiLayerBlocks[arrayY][arrayX] === undefined) {
continue;
}
let targetBlock = this.currentAsciiLayerBlocks[arrayY][arrayX];
let oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][arrayX] };
@ -1826,28 +1855,18 @@ export default {
},
// Fill tool
fill(eraser = false) {
const newColor = {};
const current = {};
const newColor = {
fg: this.currentFg,
bg: this.currentBg,
char: this.currentChar
};
if (this.canBg) {
newColor.bg = this.currentBg;
current.bg = this.asciiBlockAtXy.bg;
const current = { ... this.asciiBlockAtXy };
if (newColor.bg === undefined) {
delete current['bg'];
}
if (!this.canBg) {
delete newColor['bg'];
}
//
if (this.canFg) {
newColor.fg = this.currentFg;
current.fg = this.asciiBlockAtXy.fg;
if (newColor.fg === undefined) {
delete current['fg'];
}
}
// If the newColor is same as the existing
// Then return the original image.
if (JSON.stringify(current) === JSON.stringify(newColor) && !eraser) {
@ -1861,10 +1880,6 @@ export default {
current,
eraser
);
if (eraser) {
this.delayRedrawCanvas();
}
},
fillTool(currentLayerBlocks, y, x, current, eraser) {
if (y >= Math.floor(this.canvas.height / blockHeight)) {
@ -1881,15 +1896,12 @@ export default {
let targetBlock = currentLayerBlocks[y][x];
// if (this.canFg && currentLayerBlocks[y][x].fg !== current.fg) {
// return;
// }
if (this.canBg && targetBlock.bg !== current.bg) {
return;
}
// We can eraser or fill
let oldBlock = { ... targetBlock };
if (!eraser) {
if (this.canBg) {
targetBlock.bg = this.currentBg;
@ -1903,6 +1915,7 @@ export default {
targetBlock.char = this.currentChar;
}
} else {
// If we are fill erasing
if (this.canBg) {
delete targetBlock["bg"];
}
@ -1914,10 +1927,9 @@ export default {
if (this.canText) {
delete targetBlock["char"];
}
}
};
// console.log({e:eraser, o: current, n: targetBlock });
this.storeDiffBlocks(x, y, current, targetBlock);
this.storeDiffBlocks(x, y, oldBlock, targetBlock);
// Fill in all four directions
// Fill Prev row