bug fixes

README.md

@@ -56,18 +56,20 @@ A most latest production build to use is available at https://asciibird.jewbird.
   * Right clicking removes block
   * Hovering outside brush area will save brush to history
 
+# Fixes
+
+* Cannot manually input brush sizes because keyboard shortcuts is stealing focus
+* If you open a modal and refresh the page it's stuck as opened inside the state, and you cannot open it again
+
 ## Noted Bugs to Fix
 
-ASCIIBIRD is mostly usable. There are some bugs however to note at the moment.
+ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. Refreshing the page seems to fix most strange things.
 
 * Keyboard shortcuts can be pressed at the same time which makes bugs for undo and redo if you aren't careful!
 * Circle brush (works okay for odd width and height numbers)
 * Importer could be re-written with regex
 * Exporter will default transparent bg to black by default, which wont for some asciis
 * Having more than a few layers depending on ascii size will slow things down, until the `fillNullBlocks` is refactored.
-* Refreshing the page seems to fix most strange things
-* Cannot manually input brush sizes because keyboard shortcuts is stealing focus
-* If you open a modal and refresh the page it's stuck as opened inside the state, and you cannot open it again
 * The code that hides blocks off screen wont work if you scroll down, however it will work if you drag the canvas upward
 * Some work around layers and transparent blocks, skip drawing transparent bg block on top layers. Or get bg from lowest layer if bg is null on higher layers.
 * Select cannot select entire ASCII, is off by one at the end
@@ -161,6 +163,8 @@ The toolbar keyboard shorts are used with the ALT key.
 * https://www.mirc.com/colors.html
 * https://github.com/polygonplanet/encoding.js/
 
+
+
 ## Project setup
 ```
 yarn

src/Dashboard.vue

@@ -9,6 +9,7 @@
       :text-editing="textEditing"
       :selecting="selecting"
       @updatecanvas="updatecanvas"
+      :is-inputting-brush-size="this.isInputtingBrushSize"
     />
 
     <context-menu
@@ -165,7 +166,7 @@
         v-if="brushLibraryState.visible"
         class="z-10"
       />
-      <BrushPreview class="z-10" />
+      <BrushPreview class="z-10" @inputtingbrush="inputtingbrush" />
       <LayersLibrary class="z-10" />
     </template>
     <template v-else>
@@ -254,6 +255,7 @@ export default {
     textEditing: null,
     updateCanvas: false,
     selecting: null,
+    isInputtingBrushSize: false,
   }),
   computed: {
     splashAscii() {
@@ -309,6 +311,9 @@ export default {
     },
   },
   methods: {
+    inputtingbrush(val) {
+      this.isInputtingBrushSize = val
+    },
     buttonStyle(key) {
       return (this.currentTab === key)
         ? `text-sm pl-1 p-1 h-10 text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-900`

src/components/modals/EditAscii.vue

@@ -61,6 +61,13 @@ export default {
   created() {
     this.forms.editAscii = this.currentAscii;
   },
+  mounted() {
+    if (this.showEditAsciiModal) {
+      this.open()
+    } else {
+      this.close()
+    }
+  },
   data: () => ({
     forms: {
       editAscii: {

src/components/modals/NewAscii.vue

@@ -59,6 +59,13 @@ import createNewASCII from "../../ascii";
 export default {
   name: "NewAsciiModal",
   created() {},
+  mounted() {
+    if (this.showNewAsciiModal) {
+      this.open()
+    } else {
+      this.close()
+    }
+  },  
   data: () => ({
     forms: {
       createAscii: {

src/components/modals/PasteAscii.vue

@@ -47,6 +47,13 @@ import { parseMircAscii } from "../../ascii";
 export default {
   name: "PasteAsciiModal",
   created() {},
+  mounted() {
+    if (this.showPasteAscii) {
+      this.open()
+    } else {
+      this.close()
+    }
+  },  
   data: () => ({
     pasteContent: "",
     title: "clipboard.txt",

src/components/parts/BrushPreview.vue

@@ -23,6 +23,8 @@
               v-model="brushSizeWidthInput"
               min="1"
               :max="maxBrushSize"
+              @mouseenter="isInputtingBrushSize = true"
+              @mouseleave="isInputtingBrushSize = false"
             />
           </div>
 
@@ -33,6 +35,8 @@
               v-model="brushSizeHeightInput"
               min="1"
               :max="maxBrushSize"
+              @mouseenter="isInputtingBrushSize = true"
+              @mouseleave="isInputtingBrushSize = false"
             />
           </div>
         </div>
@@ -113,6 +117,7 @@ export default {
       y: 100,
       visible: true,
     },
+    isInputtingBrushSize: false,
   }),
   computed: {
     blockWidth() {
@@ -174,6 +179,9 @@ export default {
     },    
   },
   watch: {
+    isInputtingBrushSize(val) {
+      this.$emit("inputtingbrush", val)
+    },
     brushSizeWidth() {
       this.brushSizeWidthInput = this.brushSizeWidth;
     },

src/components/parts/KeyboardShortcuts.vue

@@ -23,7 +23,7 @@ export default {
       // Stop blocking input when modals are open
       // Whatever this char "'\0'" is it'd occur even without pressing any keys
       // This fixes it
-      if (this.isModalOpen || e.key === "\0") {
+      if (this.isModalOpen || e.key === "\0" || this.isInputtingBrushSize) {
         return;
       }
 
@@ -393,7 +393,7 @@ export default {
   data: () => ({
     isPressed: false,
   }),
-  props: ["selectedBlocks", "textEditing", "selecting"],
+  props: ["selectedBlocks", "textEditing", "selecting", "isInputtingBrushSize"],
   computed: {
     isModalOpen() {
       return this.$store.getters.isModalOpen;
@@ -493,6 +493,9 @@ export default {
     haveOpenTabs() {
       return this.currentAscii !== false;
     },
+    gridView() {
+      return this.toolbarState.gridView;
+    }
   },
   methods: {
     undo() {

src/store/index.js

@@ -192,7 +192,7 @@ export default new Vuex.Store({
     },
     updateAsciiBlocks(state, payload, skipUndo = false) {
       if (state.asciibirdMeta[state.tab].history.length >= maxUndoHistory) {
-        state.asciibirdMeta[state.tab].history.pop()
+        state.asciibirdMeta[state.tab].history.shift()
       }
 
       if (!skipUndo) {
@@ -314,8 +314,9 @@ export default new Vuex.Store({
     // BLOCKS
     undoBlocks(state) {
       if (state.asciibirdMeta[state.tab].history.length > 1) {
-        state.asciibirdMeta[state.tab].redo.push(state.asciibirdMeta[state.tab].blocks);
+        
         state.asciibirdMeta[state.tab].blocks = state.asciibirdMeta[state.tab].history.pop();
+        state.asciibirdMeta[state.tab].redo.push(state.asciibirdMeta[state.tab].blocks);
 
       }
     },

src/views/Editor.vue

@@ -1099,7 +1099,7 @@ export default {
           const arrayY = brushY / blockHeight;
           const arrayX = brushX / blockWidth;
 
-          if (this.currentAsciiLayerBlocks[arrayY][arrayX]) {
+          if (this.currentAsciiLayerBlocks[arrayY] && this.currentAsciiLayerBlocks[arrayY][arrayX]) {
             if (!plain) {
               if (this.canBg) {
                 this.drawBrushBlocks(brushX, brushY, brushBlock, "bg");