brush and history limits, bug fix on keyboard shortcuts

README.md

@@ -34,7 +34,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
 * 99 Colour support, flip colours
 * Mirror X and Y
 * Grid mode with alt + g
-* Undo and redo with ctrl + z and ctrl + y
+* Undo and redo with ctrl + z and ctrl + y, undos are set to a limit of 50 at the moment.
 * Fg, Bg and Char boxes to filter when using certain tools
   * For example filling with Char unchecked will ignore characters when filling
 * Toolbar containing
@@ -49,6 +49,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
   * Make circle, square and cross brushes by sizes
   * Brush history, can save or re-use old brushes
   * Library - Save most used brushes to library
+  * Brush history is set to a limit of 50
 * Brush Preview
   * Editable brush preview
   * Clicking updates block
@@ -59,16 +60,14 @@ 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.
 
-* Redo (ctrl y) is a buggy
+* 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
-* Grid slows things down (from chzz)
 * If you open a modal and refresh the page it's stuck as opened inside the state, and you cannot open it again
-* Cannot select very first row or column for copy and paste, has error
 * 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
@@ -83,6 +82,11 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment.
 * Image overlay for trace mode
 * Experimental code to only render blocks visible on screen
 * Review encodings check on file import - UTF8 vs Latin something
+
+## User Feedback Requests
+
+* Toolbars and panels follow when scrolling down
+
 # Keyboard Shortcuts
 
 ## ASCII Editing

src/ascii.js

@@ -204,6 +204,10 @@ export const create2DArray = (rows) => {
 export const blockWidth = 8;
 export const blockHeight = 15;
 
+// Limits for undo and brush histories
+export const maxBrushHistory = 50;
+export const maxUndoHistory = 50;
+
 export const parseMircAscii = async (content, title) => {
   const MIRC_MAX_COLOURS = mircColours99.length;
 

src/components/BrushLibrary.vue

@@ -13,9 +13,7 @@
       :x="brushLibraryState.x"
       :y="brushLibraryState.y"
     >
-      <t-card
-        class="h-full overflow-y-auto overflow-x-auto"
-      >
+      <t-card class="h-full overflow-y-auto overflow-x-auto">
         <t-button
           type="button"
           :class="`block w-full ${
@@ -42,10 +40,7 @@
 
         <div class="flex">
           <div v-if="panel.tab === 0">
-            <div
-              v-for="(brush, key) in brushHistory"
-              :key="key"
-            >
+            <div v-for="(brush, key) in brushHistory" :key="key">
               <t-card
                 class="hover:border-blue-900 border-gray-300 bg-gray-200 mt-2"
               >
@@ -87,10 +82,7 @@
           </div>
 
           <div v-if="panel.tab === 1">
-            <div
-              v-for="(brush, key) in brushLibrary"
-              :key="key"
-            >
+            <div v-for="(brush, key) in brushLibrary" :key="key">
               <t-card
                 :class="`hover:border-blue-900 border-gray-300 bg-gray-200 mt-2`"
               >
@@ -177,7 +169,7 @@ export default {
       return this.$store.getters.currentAscii;
     },
     brushHistory() {
-      return this.$store.getters.brushHistory.slice(0, 100);
+      return this.$store.getters.brushHistory;
     },
     brushLibrary() {
       return this.$store.getters.brushLibrary;

src/components/parts/KeyboardShortcuts.vue

@@ -19,7 +19,6 @@ export default {
     window.removeEventListener("keydown", this.keyListener.bind(this));
   },
   created() {
-    const thisIs = this;
     this.keyListener = function (e) {
       // Stop blocking input when modals are open
       // Whatever this char "'\0'" is it'd occur even without pressing any keys
@@ -64,16 +63,13 @@ export default {
 
       // Used for text typing
       if (this.isTextEditing && this.haveOpenTabs) {
-        thisIs.canvasKeyDown(e.key);
+        this.canvasKeyDown(e.key);
         return;
       }
 
       // Show / hide grid view
-      if (e.key === "g" && altKey) {
-        this.$store.commit(
-          "toggleGridView",
-          !this.gridView && this.haveOpenTabs
-        );
+      if (e.key === "g" && altKey && this.haveOpenTabs) {
+        this.$store.commit("toggleGridView", !this.gridView);
         return;
       }
 
@@ -389,7 +385,14 @@ export default {
     };
 
     document.addEventListener("keydown", this.keyListener.bind(this));
+
+    document.body.addEventListener("keyup", function (e) {
+      this.isPressed = false;
+    });
   },
+  data: () => ({
+    isPressed: false,
+  }),
   props: ["selectedBlocks", "textEditing", "selecting"],
   computed: {
     isModalOpen() {
@@ -442,10 +445,10 @@ export default {
     },
     isSelected() {
       return (
-        this.selecting.startX &&
-        this.selecting.startY &&
-        this.selecting.endX &&
-        this.selecting.endY
+        this.selecting.startX >= 0 &&
+        this.selecting.startY >= 0 &&
+        this.selecting.endX >= 0 &&
+        this.selecting.endY >= 0
       );
     },
     brushBlocks() {

src/store/index.js

@@ -8,7 +8,9 @@ import {
   cyrb53,
   getBlocksWidth,
   create2DArray,
-  emptyBlock
+  emptyBlock,
+  maxBrushHistory,
+  maxUndoHistory
 } from "../ascii";
 
 Vue.use(Vuex);
@@ -189,6 +191,10 @@ export default new Vuex.Store({
       state.toolbarState.mirrorY = payload.y;
     },
     updateAsciiBlocks(state, payload, skipUndo = false) {
+      if (state.asciibirdMeta[state.tab].history.length >= maxUndoHistory) {
+        state.asciibirdMeta[state.tab].history.pop()
+      }
+
       if (!skipUndo) {
         state.asciibirdMeta[state.tab].history.push(state.asciibirdMeta[state.tab].blocks);
       }
@@ -310,6 +316,7 @@ export default new Vuex.Store({
       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();
+
       }
     },
     redoBlocks(state) {
@@ -377,7 +384,12 @@ export default new Vuex.Store({
 
     // Brush Library
     pushBrushHistory(state, payload) {
-      // Check and remove duplicate brushes based on hash value
+      // Check and remove duplicate brushes based on hash value  
+      console.log(state.brushHistory.length, maxBrushHistory)
+      if (state.brushHistory.length >= maxBrushHistory) {
+        state.brushHistory.pop();
+      }
+
       let hashValue = cyrb53(JSON.stringify(payload))
       state.brushHistory = state.brushHistory.filter(obj => obj.hash !== hashValue);