lint, bug fixes, some style updates

2021-08-17 10:24:41 +10:00 · 2021-08-17 10:24:41 +10:00 · 6b08b7249a
--- a/README.md
+++ b/README.md
@ -68,6 +68,9 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment.
 * 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
+* If you open a modal and refresh the page it's stuck as opened inside the state, and you cannot open it again
 ## Focusing on Now

 * Modals to add
--- a/src/Dashboard.vue
+++ b/src/Dashboard.vue
@ -1,18 +1,20 @@
 <template>
  <div id="app">
    <NewAscii />
-    <EditAscii />
+    <EditAscii v-if="asciibirdMeta.length" />
    <PasteAscii />

    <KeyboardShortcuts
      :selected-blocks="selectedBlocks"
      :text-editing="textEditing"
+      :selecting="selecting"
      @updatecanvas="updatecanvas"
    />

    <context-menu
      :display="showContextMenu"
      ref="menu"
+      class="z-50"
    >
      <ul>
        <li
@ -23,20 +25,28 @@
          New ASCII
        </li>
        <li
-          @click="clearCache()"
+          @click="$store.commit('openModal', 'edit-ascii')"
          class="ml-1"
+          v-if="asciibirdMeta.length"
        >
-          Clear and Refresh
+          Edit Ascii
        </li>
+        <li
+          @click="closeTab(currentTab)"
+          class="ml-1 border-b"
+          v-if="asciibirdMeta.length"
+        >
+          Close Ascii
+        </li> 
        <li
          @click="startImport('mirc')"
          class="ml-1"
        >
-          Import mIRC
+          Import mIRC from File
        </li>
        <li
          @click="startExport('file')"
-          class="ml-1"
+          class="ml-1 border-b"
          v-if="asciibirdMeta.length"
        >
          Export mIRC to File
@ -48,7 +58,7 @@
          Import mIRC from Clipboard
        </li>
        <li
-          class="ml-1"
+          class="ml-1 border-b"
          @click="startExport('clipboard')"
          v-if="asciibirdMeta.length"
        >
@ -68,19 +78,11 @@
          Load Asciibird State
        </li>
        <li
-          @click="$store.commit('openModal', 'edit-ascii')"
+          @click="clearCache()"
          class="ml-1"
-          v-if="asciibirdMeta.length"
        >
-          Edit Ascii
+          Reset State
        </li>
-        <li
-          @click="closeTab(currentTab)"
-          class="ml-1"
-          v-if="asciibirdMeta.length"
-        >
-          Close Ascii
-        </li>        
      </ul>
    </context-menu>

@ -98,61 +100,73 @@
    >

    <template v-if="asciibirdMeta.length">
-      <div class="bg-gray-500" >
+      <div class="bg-gray-500 z-50">
        <t-button
          class="p-1 rounded-xl"
          @click="openContextMenu"
        >
          :::
-          </t-button>
-
-
-      <span
-        v-for="(value, key) in asciibirdMeta"
-        :key="key"
-        class="mr-2"
-      >
-        <t-button
-          class="p-1"
-          :class="buttonStyle(key)"
-          @click="changeTab(key, value)"
-        >
-          {{ value.title }}
-
-          <t-button
-            
-            @click="closeTab(key)"
-          >
-            X
-          </t-button>
        </t-button>
-      </span>
+
+
+        <span
+          v-for="(value, key) in asciibirdMeta"
+          :key="key"
+          class="mr-2 z-50"
+        >
+          <t-button
+            class="p-1 z-50"
+            :class="buttonStyle(key)"
+            @click="changeTab(key, value)"
+          >
+            {{ value.title }}
+
+            <t-button
+              class="z-50"
+              @click="closeTab(key)"
+            >
+              X
+            </t-button>
+          </t-button>
+        </span>
      </div>

      <Toolbar
        :canvas-x="canvasX"
        :canvas-y="canvasY"
+        class="z-10"
      />
      <DebugPanel
        :canvas-x="canvasX"
        :canvas-y="canvasY"
        v-if="debugPanelState.visible"
+        class="z-10"
      />
+
      <Editor
        @coordsupdate="updateCoords"
        @selectedblocks="selectedblocks"
        @textediting="textediting"
        :update-canvas="updateCanvas"
+        @selecting="updateSelecting"
+        class="z-10"
      />

-      <CharPicker v-if="toolbarState.isChoosingChar" />
+      <CharPicker
+        v-if="toolbarState.isChoosingChar"
+        class="z-10"
+      />
      <ColourPicker
        v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg"
+        class="z-10"
      />

-      <BrushLibrary v-if="brushLibraryState.visible" />
-      <BrushPreview />
-      <LayersLibrary />
+      <BrushLibrary
+        v-if="brushLibraryState.visible"
+        class="z-10"
+      />
+      <BrushPreview class="z-10" />
+      <LayersLibrary class="z-10" />
    </template>
    <template v-else>
      <div
@ -239,6 +253,7 @@ export default {
    selectedBlocks: null,
    textEditing: null,
    updateCanvas: false,
+    selecting: null,
  }),
  computed: {
    splashAscii() {
@ -310,6 +325,9 @@ export default {
    selectedblocks(value) {
      this.selectedBlocks = value
    },
+    updateSelecting(value) {
+      this.selecting = value
+    },
    textediting(value) {
      this.textEditing = value
    },
--- a/src/components/DebugPanel.vue
+++ b/src/components/DebugPanel.vue
@ -7,7 +7,6 @@
      :max-width="blockWidth * 40"
      :min-height="blockHeight * 20"
      :max-height="blockHeight * 20"
-      style="z-index: 5;"
      :w="debugPanelState.w"
      :h="debugPanelState.h"
      :x="debugPanelState.x"
@ -47,7 +46,9 @@
        <span
          class="ml-5"
          v-html="`mirrorY: ${mirrorY}`"
-        /> <br>
+        />
+        
+        <br>

        <span class="ml-5"> Size: {{ asciiStats.sizeCompressed }} ({{ asciiStats.sizeUncompressed }} / {{ asciiStats.sizePercentage }}%) </span> <br>

@ -155,12 +156,6 @@ export default {
    brushBlocks() {
      return this.$store.getters.brushBlocks;
    },
-    // canvasX() {
-    //   return this.x * this.blockWidth;
-    // },
-    // canvasY() {
-    //   return this.y * this.blockHeight;
-    // },
    toolbarState() {
      return this.$store.getters.toolbarState;
    },
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@ -3,7 +3,6 @@
    <vue-draggable-resizable
      @dragstop="onDragStop"
      :grid="[blockWidth, blockHeight]"
-      style="z-index: 5"
      :min-width="blockWidth * 25"
      :max-width="blockWidth * 40"
      :max-height="blockHeight * 20"
@ -94,7 +93,7 @@
          </label>
        </div>

-        <hr class="m-3" />
+        <hr class="m-3">

        <t-button
          type="button"
@ -107,7 +106,10 @@
          }`"
          @click="$store.commit('changeTool', keyToolbar)"
        >
-          <font-awesome-icon :icon="[value.fa, value.icon]" size="lg" />
+          <font-awesome-icon
+            :icon="[value.fa, value.icon]"
+            size="lg"
+          />
        </t-button>
      </t-card>
    </vue-draggable-resizable>
--- a/src/components/modals/EditAscii.vue
+++ b/src/components/modals/EditAscii.vue
@ -37,12 +37,16 @@
        class="flex justify-between"
        @click="$store.commit('closeModal', 'edit-ascii')"
      >
-        <t-button type="button">
+        <t-button
+          type="button"
+          class="p-2"
+        >
          Cancel
        </t-button>
        <t-button
          type="button"
          @click="updateAscii()"
+          class="p-2"
        >
          Update
        </t-button>
@ -73,7 +77,9 @@ export default {
    currentAscii() {
      return this.$store.getters.currentAscii;
    },
-
+    selectedLayerIndex() {
+      return this.currentAscii.selectedLayer
+    },
    currentAsciiEditingTitle() {
      return `Editing ASCII ${this.currentAscii.title}`;
    },
@ -81,13 +87,13 @@ export default {
      return this.$store.getters.currentAsciiLayers;
    },
    currentSelectedLayer() {
-      return this.currentAsciiLayers[this.currentAscii.selectedLayer];
+      return this.currentAsciiLayers[this.selectedLayerIndex];
    },
    currentAsciiWidth() {
-      return this.currentSelectedLayer.width;
+      return this.currentSelectedLayer.width || 0;
    },
    currentAsciiHeight() {
-      return this.currentSelectedLayer.height;
+      return this.currentSelectedLayer.height || 0;
    },
  },
  watch: {
--- a/src/components/modals/NewAscii.vue
+++ b/src/components/modals/NewAscii.vue
@ -35,11 +35,15 @@
        class="flex justify-between"
        @click="$store.commit('closeModal', 'new-ascii')"
      >
-        <t-button type="button">
+        <t-button
+          type="button"
+          class="p-2"
+        >
          Cancel
        </t-button>
        <t-button
          type="button"
+          class="p-2"
          @click="initiateNewAscii()"
        >
          Ok
--- a/src/components/parts/CharPicker.vue
+++ b/src/components/parts/CharPicker.vue
@ -1,6 +1,5 @@
 <template>
  <vue-draggable-resizable
-    style="z-index: 5;"
    :x="100"
    :y="100"
    :w="1000"
--- a/src/components/parts/ColourPicker.vue
+++ b/src/components/parts/ColourPicker.vue
@ -1,6 +1,5 @@
 <template>
  <vue-draggable-resizable
-    style="z-index: 5"
    :x="100"
    :y="100"
    :w="400"
--- a/src/components/parts/KeyboardShortcuts.vue
+++ b/src/components/parts/KeyboardShortcuts.vue
@ -15,6 +15,9 @@ import {

 export default {
  name: "KeyboardShortcuts",
+  destroyed() {
+    window.removeEventListener("keydown", this.keyListener.bind(this));
+  },
  created() {
    const thisIs = this;
    this.keyListener = function (e) {
@ -35,7 +38,11 @@ export default {
      }

      // Change char when car picker is open
-      if (this.toolbarState.isChoosingChar && e.key.length === 1  && this.haveOpenTabs) {
+      if (
+        this.toolbarState.isChoosingChar &&
+        e.key.length === 1 &&
+        this.haveOpenTabs
+      ) {
        this.$store.commit("changeChar", e.key);
        return;
      }
@ -56,26 +63,29 @@ export default {
      const altKey = e.altKey;

      // Used for text typing
-      if (this.isTextEditing  && this.haveOpenTabs) {
+      if (this.isTextEditing && this.haveOpenTabs) {
        thisIs.canvasKeyDown(e.key);
        return;
      }

      // Show / hide grid view
      if (e.key === "g" && altKey) {
-        this.$store.commit("toggleGridView", !this.gridView  && this.haveOpenTabs);
+        this.$store.commit(
+          "toggleGridView",
+          !this.gridView && this.haveOpenTabs
+        );
        return;
      }

      // Ctrl Z here
      // skg - thanks for mac key suggestion, bro
-      if (e.key === "z" && ctrlKey  && this.haveOpenTabs) {
+      if (e.key === "z" && ctrlKey && this.haveOpenTabs) {
        this.undo();
        return;
      }

      // Ctrl Y here
-      if (e.key === "y" && ctrlKey  && this.haveOpenTabs) {
+      if (e.key === "y" && ctrlKey && this.haveOpenTabs) {
        this.redo();
        return;
      }
@ -86,8 +96,8 @@ export default {
        Number.parseInt(e.key) <= 8 &&
        !this.toolbarState.isChoosingFg &&
        !this.toolbarState.isChoosingBg &&
-        altKey  && this.haveOpenTabs
-        
+        altKey &&
+        this.haveOpenTabs
      ) {
        this.$store.commit("changeTool", Number.parseInt(e.key - 1));
        this.$emit("updatecanvas");
@ -95,7 +105,7 @@ export default {
      }

      // Swap colours
-      if (e.key === "r" && altKey  && this.haveOpenTabs) {
+      if (e.key === "r" && altKey && this.haveOpenTabs) {
        let bg = this.currentBg;
        let fg = this.currentFg;

@ -105,7 +115,7 @@ export default {
      }

      // Show FG
-      if (e.key === "f" && altKey && !ctrlKey  && this.haveOpenTabs) {
+      if (e.key === "f" && altKey && !ctrlKey && this.haveOpenTabs) {
        this.$store.commit(
          "changeIsUpdatingFg",
          !this.toolbarState.isChoosingFg
@ -114,7 +124,7 @@ export default {
      }

      // Show BG
-      if (e.key === "b" && altKey && !ctrlKey  && this.haveOpenTabs) {
+      if (e.key === "b" && altKey && !ctrlKey && this.haveOpenTabs) {
        this.$store.commit(
          "changeIsUpdatingBg",
          !this.toolbarState.isChoosingBg
@ -123,7 +133,7 @@ export default {
      }

      // Show Character select
-      if (e.key === "c" && altKey && !ctrlKey  && this.haveOpenTabs) {
+      if (e.key === "c" && altKey && !ctrlKey && this.haveOpenTabs) {
        this.$store.commit(
          "changeIsUpdatingChar",
          !this.toolbarState.isChoosingChar
@ -135,7 +145,8 @@ export default {
      if (
        Number.parseInt(e.key) >= 0 &&
        Number.parseInt(e.key) <= 9 &&
-        (this.toolbarState.isChoosingFg || this.toolbarState.isChoosingBg)  && this.haveOpenTabs
+        (this.toolbarState.isChoosingFg || this.toolbarState.isChoosingBg) &&
+        this.haveOpenTabs
      ) {
        if (this.toolbarState.isChoosingFg) {
          this.$store.commit("changeColourFg", Number.parseInt(e.key));
@ -149,7 +160,14 @@ export default {
      }

      // Ctrl C - copy blocks
-      if (e.key === "c" && ctrlKey && !shiftKey  && this.haveOpenTabs) {
+      if (
+        e.key === "c" &&
+        ctrlKey &&
+        !shiftKey &&
+        this.haveOpenTabs &&
+        this.isSelected &&
+        this.isSelecting
+      ) {
        if (this.selectedBlocks.length) {
          this.$store.commit(
            "selectBlocks",
@ -166,7 +184,12 @@ export default {
      }

      // Delte blocks but do not save them when pressing Delete when selected
-      if (e.key === "Delete"  && this.haveOpenTabs) {
+      if (
+        e.key === "Delete" &&
+        this.haveOpenTabs &&
+        this.isSelected &&
+        this.isSelecting
+      ) {
        console.log(getBlocksWidth(this.selectedBlocks));
        if (this.selectedBlocks.length) {
          for (let y = 0; y < this.selectedBlocks.length + 1; y++) {
@ -191,7 +214,14 @@ export default {
      }

      // Ctrl X - cut blocks
-      if (e.key === "x" && ctrlKey && !shiftKey && this.haveOpenTabs) {
+      if (
+        e.key === "x" &&
+        ctrlKey &&
+        !shiftKey &&
+        this.haveOpenTabs &&
+        this.isSelected &&
+        this.isSelecting
+      ) {
        if (this.selectedBlocks.length) {
          for (let y = 0; y < this.selectedBlocks.length + 1; y++) {
            for (let x = 0; x < getBlocksWidth(this.selectedBlocks) + 1; x++) {
@ -259,7 +289,12 @@ export default {
      }

      // Edit ASCII
-      if (e.key === "e" && this.isDefault && !this.isTextEditing && this.haveOpenTabs) {
+      if (
+        e.key === "e" &&
+        this.isDefault &&
+        !this.isTextEditing &&
+        this.haveOpenTabs
+      ) {
        this.$store.commit("openModal", "edit-ascii");

        return;
@ -305,7 +340,8 @@ export default {
        this.brushSizeHeight < maxBrushSize &&
        this.brushSizeHeight >= 1 &&
        this.brushSizeWidth < maxBrushSize &&
-        this.brushSizeWidth >= 1 && this.haveOpenTabs
+        this.brushSizeWidth >= 1 &&
+        this.haveOpenTabs
      ) {
        this.$store.commit("updateBrushSize", {
          brushSizeHeight: parseInt(this.brushSizeHeight) + 1,
@ -322,7 +358,8 @@ export default {
        this.brushSizeHeight <= maxBrushSize &&
        this.brushSizeHeight > 1 &&
        this.brushSizeWidth <= maxBrushSize &&
-        this.brushSizeWidth > 1 && this.haveOpenTabs
+        this.brushSizeWidth > 1 &&
+        this.haveOpenTabs
      ) {
        this.$store.commit("updateBrushSize", {
          brushSizeHeight: parseInt(this.brushSizeHeight) - 1,
@ -353,7 +390,7 @@ export default {

    document.addEventListener("keydown", this.keyListener.bind(this));
  },
-  props: ["selectedBlocks", "textEditing"],
+  props: ["selectedBlocks", "textEditing", "selecting"],
  computed: {
    isModalOpen() {
      return this.$store.getters.isModalOpen;
@ -370,9 +407,6 @@ export default {
    currentAscii() {
      return this.$store.getters.currentAscii;
    },
-    currentAsciiBlocks() {
-      return this.$store.getters.currentAsciiBlocks;
-    },
    currentTool() {
      return toolbarIcons[this.$store.getters.currentTool];
    },
@ -454,13 +488,10 @@ export default {
      return this.currentSelectedLayer.height;
    },
    haveOpenTabs() {
-      return this.$store.getters.currentAscii !== false
-    }
+      return this.currentAscii !== false;
+    },
  },
  methods: {
-    filterNullBlocks(val) {
-      return filterNullBlocks(val);
-    },
    undo() {
      this.$store.commit("undoBlocks");
    },
--- a/src/components/parts/Layers.vue
+++ b/src/components/parts/Layers.vue
@ -23,6 +23,7 @@
                type="button"
                class="rounded-xl"
                @click="toggleLayer(key)"
+                :disabled="!canToggleLayer"
              >
                <font-awesome-icon
                  :icon="['fas', layer.visible ? 'eye' : 'eye-slash']"
@ -102,23 +103,22 @@ export default {
    },
  },
  watch: {
-    currentAsciiLayers() {
+    selectedLayer() {
      this.selectBestLayer();
    },
  },
  methods: {
    selectBestLayer() {
      let found = false;
-      this.currentAsciiLayers.map((item, key) => {
-        if (item.visible) {
-          this.changeLayer(key);
+      this.currentAsciiLayers.map((item) => {
+        if (item && item.visible) {
          found = true;
-          return;
        }
      });

      // If there's no visible layers we'll target the first one always
      if (!found) {
+        this.$store.commit("toggleLayer", 0);
        this.changeLayer(0);
      }
    },
--- a/src/store/index.js
+++ b/src/store/index.js
@ -252,6 +252,16 @@ export default new Vuex.Store({

      if (tempLayers.length > 1) {
        tempLayers.splice(payload, 1)
+
+        // Automatically select the next best layer to avoid bugs
+        if (tempLayers[payload + 1]) {
+          state.asciibirdMeta[state.tab].selectedLayer = payload + 1
+        } else if (tempLayers[payload - 1]) {
+          state.asciibirdMeta[state.tab].selectedLayer = payload - 1
+        } else if (tempLayers[0]) {
+          state.asciibirdMeta[state.tab].selectedLayer = 0
+        }
+
        state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(
          tempLayers));
      }
@ -465,9 +475,9 @@ export default new Vuex.Store({
    currentAscii: (state) => state.asciibirdMeta[state.tab] ?? false,
    currentAsciiBlocks: (state) => {
      let blocks = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[
-        state.tab].blocks));
+        state.tab].blocks)) || [];

-      return blocks[state.asciibirdMeta[state.tab].selectedLayer].data
+      return blocks[state.asciibirdMeta[state.tab].selectedLayer].data || []
    },
    currentAsciiLayers: (state) => {
      let blocks = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[
--- a/src/style.css
+++ b/src/style.css
@ -15,7 +15,7 @@
    font-display: swap;
 }

-@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
+/* @import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css'); */

 body {
    background: rgb(58, 58, 58);
@ -24,7 +24,7 @@ body {
 .canvas {
    position: absolute;
    font-family: "Hack";
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(167, 167, 167, 0.308);
    border: lightgrey 1px solid;
    z-index: 0;
 }
@ -38,7 +38,6 @@ body {
 .context-menu {
    position: fixed;
    background: white;
-    z-index: 999;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
@ -58,7 +57,7 @@ body {
 .canvastools {
    position: absolute;
    font-family: "Hack";
-    z-index: 10;
+    z-index: 0;
    opacity: 0.7;
    cursor: crosshair;
 }
--- a/src/tailwindSettings.js
+++ b/src/tailwindSettings.js
@ -95,10 +95,10 @@ export const tailwindCss = {
      fixedClasses: {
        overlay: 'z-40  overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
        wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
-        modal: 'overflow-visible relative  rounded',
-        body: 'p-1',
-        header: 'border-b p-1 rounded-t',
-        footer: ' p-1 rounded-b',
+        modal: 'overflow-visible relative rounded',
+        body: 'p-3',
+        header: 'border-b p-3 rounded-t font-bold',
+        footer: 'p-1 rounded-b',
        close: 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50'
      },
      classes: {
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@ -6,7 +6,6 @@
      @mouseenter="isMouseOnCanvas = true"
    >
      <vue-draggable-resizable
-        style="z-index: 5"
        ref="canvasdrag"
        :grid="[blockWidth, blockHeight]"
        :w="currentAsciiWidth * blockWidth"
@ -121,8 +120,11 @@ export default {
    currentAsciiLayers() {
      return this.$store.getters.currentAsciiLayers;
    },
+    selectedLayerIndex() {
+      return this.currentAscii.selectedLayer || 0
+    },
    currentSelectedLayer() {
-      return this.currentAsciiLayers[this.currentAscii.selectedLayer];
+      return this.currentAsciiLayers[this.selectedLayerIndex];
    },
    currentAsciiLayerBlocks() {
      return this.currentSelectedLayer.data;
@ -308,6 +310,9 @@ export default {
        this.delayRedrawCanvas();
      }
    },
+    selecting(val) {
+      this.$emit("selecting", val);
+    },
  },
  methods: {
    warnInvisibleLayer() {
@ -340,6 +345,7 @@ export default {
        endY: null,
        canSelect: false,
      };
+      this.$emit("selecting", this.selecting);
    },
    redrawSelect() {
      if (this.currentAsciiLayerBlocks.length) {
@ -389,6 +395,14 @@ export default {
          }

          for (x = 0; x < this.currentAsciiWidth + 1; x++) {
+            canvasX = blockWidth * x;
+
+            if (this.gridView) {
+              this.ctx.setLineDash([1]);
+              this.ctx.strokeStyle = "rgba(0, 0, 0, 1)";
+              this.ctx.strokeRect(canvasX, canvasY, blockWidth, blockHeight);
+            }
+
            // Loop layers
            for (i = this.currentAsciiLayers.length - 1; i >= 0; i--) {
              // for (i = 0; i >= this.currentAsciiLayers.length - 1; i++) {
@ -417,19 +431,6 @@ export default {
                  // break;
                }

-                canvasX = blockWidth * x;
-
-                if (this.gridView) {
-                  this.ctx.setLineDash([1]);
-                  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];
@ -739,6 +740,7 @@ export default {
      }

      this.$emit("selectedblocks", this.selectedBlocks);
+      this.$emit("selecting", this.selecting);
    },
    drawRectangleBlock(x, y) {
      let indicatorColour = this.asciiBlockAtXy.bg === 0 ? 1 : 0;