reeeeeeeeee

src/Dashboard.vue

@@ -74,7 +74,7 @@
 
       <div class="border-gray-600">
         <!-- <router-view /> -->
-        <Editor v-if="asciibirdMeta.length" />
+        <Editor :tab="currentTab" :refresh="refresh" v-if="asciibirdMeta.length" />
       </div>
     </div>
   </div>
@@ -109,7 +109,7 @@ export default {
     asciibirdMeta: [],
     mircColors: null,
     charCodes: null,
-
+    refresh: false,
     asciiImport: "",
     finalAscii: null,
     asciiArray: [],
@@ -209,13 +209,15 @@ export default {
               for (let k = charPos; k <= k + 3; k++) {
                 
                 if (firstColor && asciiStringArray[k] === ",") {
+                  // No fg set
+                  
                   firstColor = false;
                 } else if (firstColor) {
                   if (curBlock.fg === null) {
-                    curBlock.fg = asciiStringArray[k];
+                    curBlock.fg = parseInt(asciiStringArray[k]);
                   } else {
                     curBlock.fg =
-                      "" + curBlock.fg + asciiStringArray[k];
+                      parseInt("" + curBlock.fg + asciiStringArray[k]);
                   }
                 }
 
@@ -228,12 +230,12 @@ export default {
                       MIRC_MAX_COLORS
                   ) {
                     // Is valid number
-                    curBlock.bg = `${asciiStringArray[k]}${
+                    curBlock.bg = parseInt(`${asciiStringArray[k]}${
                       asciiStringArray[k + 1]
-                    }`;
+                    }`);
                   } else {
                     //
-                    curBlock.bg = `${asciiStringArray[k]}`;
+                    curBlock.bg = parseInt(`${asciiStringArray[k]}`);
                   }
 
                   // curBlock.char = `${asciiStringArray[k + 1]}`;
@@ -297,6 +299,8 @@ export default {
     },
     changeTab(key, value) {
       // Update the tab index in vuex store
+      this.currentTab = key
+      this.refresh = !this.refresh
       this.$store.commit("changeTab", key);
     },
     clearCache() {
@@ -331,6 +335,7 @@ export default {
 
       this.$store.commit("newAsciibirdMeta", payload);
       this.$modal.hide("create-ascii-modal");
+      this.refresh = !this.refresh
     },
     closeNewASCII({ params, cancel }) {
       this.forms.createAscii.width = 5;

src/components/DebugPanel.vue

@@ -2,11 +2,13 @@
   <div>
     <vue-draggable-resizable 
     @dragging="onDrag" 
-    style="z-index:100;min-height:300px;"
+    style="z-index:5;min-height:300px;"
     :min-width=200
     :max-width=500
     :min-height=300
     :max-height=700
+    :x=800
+    :y=300
     >
     <div style="height:100%;min-height:300px;max-height:400px;">
       <t-card header="Debug Info" style="height:100%;">

src/components/Toolbar.vue

@@ -2,11 +2,12 @@
   <div>
     <vue-draggable-resizable 
     @dragging="onDrag" 
-    style="z-index:100;min-height:500px;"
+    style="z-index:5;min-height:500px;"
     :min-width=200
     :max-width=500
     :min-height=500
     :max-height=700
+    :x=800
     >
     <div style="height:100%;min-height:500px;max-height:700px;">
       <t-card header="Tools and Stuff" style="height:100%;">
@@ -47,6 +48,7 @@ export default {
     this.toolbarState = this.$store.state.toolbarState;
   },
   name: "Toolbar",
+  
   data: () => ({
     mircColors: null,
     charCodes: null,

src/views/Editor.vue

@@ -63,6 +63,7 @@ import Block from "../components/Block.vue";
 
 export default {
   name: "Editor",
+  props: ['tab','refresh'],
   components: { Block },
   mounted() {
     this.currentAsciibirdMeta = this.$store.getters.currentAscii;
@@ -95,7 +96,10 @@ export default {
   }),
   computed: {
     getCurrentTab() {
-      return this.$store.getters.currentTab;
+      return this.tab;
+    },
+    shouldRefresh() {
+      return this.refresh;
     },
     generateCanvasId() {
       return `canvas`;
@@ -116,6 +120,9 @@ export default {
   watch: {
     getCurrentTab(val, old) {
       this.onChangeTab( val );
+    },
+    shouldRefresh(val,old) {
+      
     },
     watchColorChange(val) {
       console.log(JSON.stringify(val))        
@@ -177,6 +184,7 @@ export default {
       // Clears the whole canvas
       if (this.ctx) {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.stroke();
 
         if (this.currentAsciibirdMeta.blocks.length) {
           const BLOCK_WIDTH = this.currentAsciibirdMeta.blockWidth;
@@ -194,11 +202,11 @@ export default {
           this.ctx.font = "16px Mono";
 
           for (y = 0; y < this.currentAsciibirdMeta.height; y++) {
-            canvasY = BLOCK_HEIGHT * y;
+            canvasY = BLOCK_HEIGHT * y+1;
 
             for (x = 0; x < this.currentAsciibirdMeta.width; x++) {
               curBlock = JSON.parse(JSON.stringify(this.currentAsciibirdMeta.blocks[y][x]));
-              canvasX = BLOCK_WIDTH * x;
+              canvasX = BLOCK_WIDTH * x+1;
 
               if (curBlock.char) {
                 this.ctx.fillStyle = this.mircColors[curBlock.fg];