transparent block (WIP)

README.md

@@ -71,8 +71,7 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 * Select cannot select entire ASCII, is off by one at the end
   * We could add a special clause for the select tool when mouse leaves canvas to select all blocks
 * z indexing for toolbars and stuff is ANNOYING
-* Messing with deleting layers, if you somehow have a layer that isn't selected, it'll be buggy\
-* If you have three or more layers, transparent blocks wont work from top layer if hidden
+* Messing with deleting layers, if you somehow have a layer that isn't selected, it'll be buggy. This is hard to do.
 ## Focusing on Now / Roadmap
 
 * Modals to add

src/ascii.js

@@ -476,68 +476,52 @@ export const exportMirc = () => {
   const {
     currentAscii
   } = store.getters;
-  const blocks = [...store.getters.currentAsciiLayers];
+
+  const {
+    currentAsciiLayersWidthHeight
+  } = store.getters;
+
+  const blocks = mergeLayers();
   const output = [];
   let curBlock = false;
-  let currentLayer = 0;
+
   let prevBlock = {
     bg: -1,
     fg: -1
   };
 
-  for (let y = 0; y <= blocks[0].data.length - 1; y++) {
-    if (y >= currentAscii.height) {
-      continue;
-    }
 
-    for (let x = 0; x <= blocks[0].data[y].length - 1; x++) {
-      if (x >= currentAscii.width) {
-        continue;
-      }
+  for (let y = 0; y <= currentAsciiLayersWidthHeight.height; y++) {
 
-      for (let i = blocks.length - 1; i >= 0; i--) {
-        if (blocks[i].visible !== true) {
-          continue;
-        }
-        currentLayer = i;
-        if (
-          !blocks[i].data ||
-          !blocks[i].data[y] ||
-          !blocks[i].data[y][x]
-        ) {
-          continue;
-        }
-        if (
-          i > 0 &&
-          JSON.stringify(blocks[i].data[y][x]) ===
-          JSON.stringify(emptyBlock)
-        ) {
-          continue;
-        }
-        curBlock = {
-          ...blocks[i].data[y][x]
-        };
-        break;
-      }
+    for (let x = 0; x <= currentAsciiLayersWidthHeight.width; x++) {
+      curBlock = {
+        ...blocks[y][x]
+      };
 
       // If we have a difference between our previous block
       // we'll put a colour codes and continue as normal
       if (curBlock.bg !== prevBlock.bg || curBlock.fg !== prevBlock.fg) {
         curBlock = {
-          ...blocks[currentLayer].data[y][x]
+          ...blocks[y][x]
         };
         const zeroPad = (num, places) => String(num).padStart(places, '0');
-        output.push(
-          `\u0003${zeroPad(
-                curBlock.fg ?? store.getters.options.defaultFg,
-                2,
-              )},${zeroPad(curBlock.bg ?? store.getters.options.defaultBg, 2)}`,
-        );
+
+        if (curBlock.fg === null && curBlock.bg === null) {
+          output.push(" ");
+        } else {
+          output.push(
+            `\u0003${zeroPad(
+                  curBlock.fg,
+                  2,
+                )},${zeroPad(curBlock.bg, 2)}`,
+          );
+        }
+        
       }
 
       // null .chars will end up as space
       output.push(curBlock.char ?? ' ');
-      prevBlock = blocks[currentLayer].data[y][x];
+      prevBlock = blocks[y][x];
     }
 
     // We can never have a -1 colour code so we'll always
@@ -548,7 +532,7 @@ export const exportMirc = () => {
     };
 
     // New line except for the very last line
-    if (y < blocks[currentLayer].data[y].length - 1) {
+    if (blocks[y] && y < blocks[y].length - 1) {
       output.push('\n');
     }
   }

src/store/index.js

@@ -247,7 +247,7 @@ export default new Vuex.Store({
 
       let width = tempLayers[0].width;
       let height = tempLayers[0].height;
-      let label = tempLayers[0].label;
+      let label = tempLayers[state.asciibirdMeta[state.tab].selectedLayer].label;
 
       let mergedLayers = [{
         visible: true,
@@ -530,6 +530,15 @@ export default new Vuex.Store({
 
       return blocks
     },
+    currentAsciiLayersWidthHeight: (state) => {
+      let blocks = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[
+        state.tab].blocks));
+
+      return {
+        width: blocks[0].width,
+        height: blocks[0].height,
+      }
+    },
     selectedLayer: (state) => state.asciibirdMeta[state.tab].selectedLayer,
     asciibirdMeta: (state) => state.asciibirdMeta,
     nextTabValue: (state) => state.asciibirdMeta.length,

src/views/Editor.vue

@@ -411,8 +411,7 @@ export default {
               this.ctx.strokeStyle = "rgba(0, 0, 0, 1)";
               this.ctx.strokeRect(canvasX, canvasY, blockWidth, blockHeight);
             }
-
-            // Background block
+            
             if (curBlock.bg !== null) {
               this.ctx.fillStyle = this.mircColours[curBlock.bg];
               this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);