fix for edit ascii size and size of bigger asciis

README.md

@@ -83,7 +83,6 @@ A most latest production build to use is available at https://asciibird.jewbird.
 * Colors / chars panels wont open where toolbar is, if you scroll down a lot then try open them they will be at the top
 * One of the mirror brushes might be bugged sometimes and leave undoable blocks, if the mirror paths cross over it seems to do this
 * The layers and undo sometimes may have bugs, but seems hard to replicate.
-* The width and height of the ascii cannot be changed from edit modal, still to do
 * Improve image overlay modal
 * The current mIRC importer will fail on `C5,` type blocks by discarding the `,` character when it should preserve it. `art.txt` ascii is a good example of this. 98% of txt ascii imported should be fine.
 

src/ascii.js

@@ -400,8 +400,8 @@ export const createNewAscii = (forms) => {
       label: forms.createAscii.title,
       visible: true,
       data: create2DArray(forms.createAscii.height),
-      width: forms.createAscii.width,
-      height: forms.createAscii.height,
+      width: Number.parseInt(forms.createAscii.width),
+      height: Number.parseInt(forms.createAscii.height),
     }],
     imageOverlay: {
       url: null,
@@ -416,14 +416,8 @@ export const createNewAscii = (forms) => {
     selectedLayer: 0,
   };
 
-  // Push all the default ASCII blocks
-  for (let x = 0; x < newAscii.layers[0].width; x++) {
-    for (let y = 0; y < newAscii.layers[0].height; y++) {
-      newAscii.layers[0].data[y].push({
-        ...emptyBlock,
-      });
-    }
-  }
+  newAscii.layers = [...fillNullBlocks(newAscii.layers[0].height, newAscii.layers[0]
+    .width, newAscii.layers)];
 
   newAscii.layers = LZString.compressToUTF16(JSON.stringify(newAscii.layers));
 

src/components/modals/EditAscii.vue

@@ -6,11 +6,11 @@
     :esc-to-close="true"
     @closed="$store.commit('closeModal', 'edit-ascii')"
   >
-    <!-- Width
+    Width
     <t-input type="number" name="width" v-model="layer.width" min="1" />
 
     Height
-    <t-input type="number" name="height" v-model="layer.height" min="1" /> -->
+    <t-input type="number" name="height" v-model="layer.height" min="1" /> 
 
     Title
     <t-input type="text" name="title" v-model="layer.title" max="128" />
@@ -32,6 +32,9 @@
 </template>
 
 <script>
+import {
+  fillNullBlocks,
+} from "../../ascii";
 export default {
   name: "EditAsciiModal",
   created() {},
@@ -84,11 +87,15 @@ export default {
   },
   methods: {
     updateAscii() {
-      this.$store.commit("updateAsciiTitle", this.layer.title);
-      this.$emit("updateAscii", {
-        width: this.layer.width,
-        height: this.layer.height,
+      const canvasBlockHeight = Number.parseInt(this.layer.height);
+      const canvasBlockWidth = Number.parseInt(this.layer.width);
+      let layers = fillNullBlocks(canvasBlockHeight, canvasBlockWidth);
+      this.$store.commit("changeAsciiWidthHeight", {
+        width: canvasBlockWidth,
+        height: canvasBlockHeight,
+        layers: [...layers],
       });
+
       this.close();
     },
     open() {

src/components/modals/NewAscii.vue

@@ -97,6 +97,8 @@ export default {
       this.forms.createAscii.title = "New ASCII";
     },
     initiateNewAscii() {
+      this.forms.createAscii.height = Number.parseInt(this.forms.createAscii.height)
+      this.forms.createAscii.width = Number.parseInt(this.forms.createAscii.width)
       createNewASCII(this.forms);
     },
   },

src/views/Editor.vue

@@ -381,6 +381,12 @@ export default {
     },
   },
   watch: {
+    currentAsciiHeight(val) {
+        this.canvas.height = val * blockHeight;
+    },
+    currentAsciiWidth(val) {
+      this.canvas.width = val * blockWidth;
+    },
     async currentAscii(val, old) {
       if (val !== old) {
         this.canvas.width = this.currentAsciiWidth * blockWidth;
@@ -392,9 +398,9 @@ export default {
       this.resetSelectTool();
     },
     currentSelectedLayer(val, old) {
-      // if (val && val.visible) {
-      //   this.warnInvisibleLayer();
-      // }
+      if (val && val.visible) {
+        this.warnInvisibleLayer();
+      }
     },
     async currentAsciiLayerBlocks() {
       await this.delayRedrawCanvas();