color and char open when scrolled down, mirror x y brush block undoable fix

README.md

@@ -80,8 +80,6 @@ A most latest production build to use is available at https://asciibird.jewbird.
 
 * Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
 * Review encodings check on file import - UTF8 vs Latin something
-* 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.
 * 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/components/parts/CharPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-draggable-resizable :x="100" :y="100" :w="1100" :h="350">
+  <vue-draggable-resizable :x="100" :y="100+yOffset" :w="1100" :h="350">
     <t-card class="w-full h-full">
       <t-button
         type="button"
@@ -20,7 +20,7 @@ import { charCodes } from "../../ascii";
 export default {
   name: "CharPicker",
   created() {},
-  props: ["canvasX", "canvasY"],
+  props: ["canvasX", "canvasY", "yOffset"],
   computed: {
     charCodes() {
       return charCodes;

src/components/parts/ColourPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-draggable-resizable :x="100" :y="100" :w="400" :h="278">
+  <vue-draggable-resizable :x="100" :y="100+yOffset" :w="400" :h="278">
     <t-card class="w-full h-full">
       <span v-for="(value, keyColours) in mircColours" :key="keyColours">
         <hr v-if="keyColours === 16" />
@@ -21,6 +21,7 @@ import { mircColours99 } from "../../ascii";
 export default {
   name: "ColourPicker",
   created() {},
+  props: ["yOffset"],
   computed: {
     mircColours() {
       return mircColours99;

src/store/index.js

@@ -603,10 +603,11 @@ export default new Vuex.Store({
         if (prev.old) {
           for (let change in prev.old) {
             let data = prev.old[change];
-
-            tempLayers[prev.l].data[data.y][data.x] = {
-              ...data.b
-            };
+            if (tempLayers[prev.l] !== undefined) {
+              tempLayers[prev.l].data[data.y][data.x] = {
+                ...data.b
+              };
+            }
           }
         }
 
@@ -650,14 +651,12 @@ export default new Vuex.Store({
         // Process block chunks
         if (prev.new && prev.l !== undefined) {
           for (let change in prev.new) {
-            let data = prev.new[change];
-            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'] = " ";
-            // }
+            if (tempLayers[prev.l] !== undefined) {
+              let data = prev.new[change];
+              tempLayers[prev.l].data[data.y][data.x] = {
+                ...data.b
+              };
+            }
           }
         }
 

src/views/Editor.vue

@@ -1052,8 +1052,8 @@ export default {
       this.top = y;
     },
     async dispatchBlocks(clearDiff = false) {
-      this.diffBlocks.old = this.diffBlocks.old.flat().reverse();
-      this.diffBlocks.new = this.diffBlocks.new.flat().reverse();
+      this.diffBlocks.old = this.diffBlocks.old.flat();
+      this.diffBlocks.new = this.diffBlocks.new.flat();
 
       await this.$store.dispatch("updateAsciiBlocksAsync", {
         blocks: this.currentAsciiLayerBlocks,
@@ -1619,7 +1619,6 @@ export default {
       // Apply the actual brush block to the ascii block
       if (this.canTool && brushBlock[target] !== undefined) {
         targetBlock[target] = brushBlock[target];
-        // targetBlock['char'] = brushBlock['char'];
 
         let theX = asciiWidth - arrayX;
         let theY = asciiHeight - arrayY;
@@ -1628,37 +1627,40 @@ export default {
         if (
           this.mirrorX &&
           this.currentAsciiLayerBlocks[arrayY] &&
-          this.currentAsciiLayerBlocks[arrayY][theX]
+          this.currentAsciiLayerBlocks[arrayY][theX] &&
+          (this.x !== theX || this.y !== arrayY)
         ) {
           oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][theX] };
           this.currentAsciiLayerBlocks[arrayY][theX][target] =
             brushBlock[target];
 
-          this.storeDiffBlocks(theX, arrayY, oldBlock, brushBlock);
+          await this.storeDiffBlocks(theX, arrayY, oldBlock, brushBlock);
         }
 
         if (
           this.mirrorY &&
           this.currentAsciiLayerBlocks[theY] &&
-          this.currentAsciiLayerBlocks[theY][arrayX]
+          this.currentAsciiLayerBlocks[theY][arrayX] &&
+          (this.x !== arrayX || this.y !== theY)
         ) {
           oldBlock = { ...this.currentAsciiLayerBlocks[theY][arrayX] };
           this.currentAsciiLayerBlocks[theY][arrayX][target] =
             brushBlock[target];
 
-          this.storeDiffBlocks(arrayX, theY, oldBlock, brushBlock);
+          await this.storeDiffBlocks(arrayX, theY, oldBlock, brushBlock);
         }
 
         if (
           this.mirrorY &&
           this.mirrorX &&
           this.currentAsciiLayerBlocks[theY] &&
-          this.currentAsciiLayerBlocks[theY][theX]
+          this.currentAsciiLayerBlocks[theY][theX] &&
+          (this.x !== theX || this.y !== theY)
         ) {
           oldBlock = { ...this.currentAsciiLayerBlocks[theY][theX] };
           this.currentAsciiLayerBlocks[theY][theX][target] = brushBlock[target];
 
-          this.storeDiffBlocks(theX, theY, oldBlock, brushBlock);
+          await this.storeDiffBlocks(theX, theY, oldBlock, brushBlock);
         }
       }