layers in their own area, keyboard fixes

README.md

@@ -67,6 +67,7 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment.
 * 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
 ## Focusing on Now
 
 * Modals to add

src/Dashboard.vue

@@ -4,7 +4,11 @@
     <EditAscii />
     <PasteAscii />
 
-    <KeyboardShortcuts :selected-blocks="selectedBlocks" :text-editing="textEditing" @updatecanvas="updatecanvas" />
+    <KeyboardShortcuts
+      :selected-blocks="selectedBlocks"
+      :text-editing="textEditing"
+      @updatecanvas="updatecanvas"
+    />
 
     <context-menu
       :display="showContextMenu"
@@ -116,7 +120,12 @@
         :canvas-y="canvasY"
         v-if="debugPanelState.visible"
       />
-      <Editor @coordsupdate="updateCoords" @selectedblocks="selectedblocks" @textediting="textediting" :update-canvas="updateCanvas" />
+      <Editor
+        @coordsupdate="updateCoords"
+        @selectedblocks="selectedblocks"
+        @textediting="textediting"
+        :update-canvas="updateCanvas"
+      />
 
       <CharPicker v-if="toolbarState.isChoosingChar" />
       <ColourPicker
@@ -125,6 +134,7 @@
 
       <BrushLibrary v-if="brushLibraryState.visible" />
       <BrushPreview />
+      <LayersLibrary />
     </template>
     <template v-else>
       <div
@@ -155,6 +165,7 @@ import LZString from "lz-string";
 import Toolbar from "./components/Toolbar.vue";
 import DebugPanel from "./components/DebugPanel.vue";
 import BrushLibrary from "./components/BrushLibrary.vue";
+import LayersLibrary from "./components/LayersLibrary.vue";
 import Editor from "./views/Editor.vue";
 
 import CharPicker from "./components/parts/CharPicker.vue";
@@ -196,7 +207,8 @@ export default {
     BrushLibrary,
     BrushCanvas,
     BrushPreview,
-    KeyboardShortcuts
+    KeyboardShortcuts,
+    LayersLibrary
   },
   name: "Dashboard",
   data: () => ({

src/components/BrushLibrary.vue

@@ -6,14 +6,17 @@
       :grid="[blockWidth, blockHeight]"
       :min-width="blockWidth * 35"
       :max-width="blockWidth * 50"
-      :min-height="blockHeight * 50"
+      :min-height="blockHeight * 15"
       :max-height="blockHeight * 100"
       :w="brushLibraryState.w"
       :h="brushLibraryState.h"
       :x="brushLibraryState.x"
       :y="brushLibraryState.y"
     >
-      <t-card class="h-full overflow-y-scroll">
+      <t-card
+        class="h-full overflow-y-scroll"
+        header="Brushes Manager"
+      >
         <t-button
           type="button"
           :class="`block w-full ${
@@ -38,18 +41,6 @@
           History
         </t-button>
 
-        <t-button
-          type="button"
-          :class="`block w-full ${
-            panel.tab === 2
-              ? 'border-gray-900 bg-blue-500'
-              : 'border-gray-200 bg-gray-500'
-          }`"
-          @click="changeTab(2)"
-        >
-          Layers
-        </t-button>
-
         <div class="flex">
           <div v-if="panel.tab === 0">
             <div
@@ -129,13 +120,6 @@
               </t-card>
             </div>
           </div>
-
-          <div
-            v-if="panel.tab === 2"
-            class="w-full bg-white rounded-lg shadow-lg"
-          >
-            <Layers />
-          </div>
         </div>
       </t-card>
     </vue-draggable-resizable>
@@ -155,7 +139,6 @@
 <script>
 import { mircColours99, blockWidth, blockHeight } from "../ascii";
 import BrushCanvas from "./parts/BrushCanvas.vue";
-import Layers from "./parts/Layers.vue";
 import LZString from "lz-string";
 
 export default {
@@ -180,7 +163,6 @@ export default {
   }),
   components: {
     BrushCanvas,
-    Layers,
   },
   computed: {
     blockWidth() {

src/components/LayersLibrary.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <vue-draggable-resizable
+      @dragstop="onDragStop"
+      @resizestop="onResize"
+      :grid="[blockWidth, blockHeight]"
+      :min-width="blockWidth * 30"
+      :max-width="blockWidth * 50"
+      :min-height="blockHeight * 10"
+      :max-height="blockHeight * 100"
+      :w="layersLibraryState.w"
+      :h="layersLibraryState.h"
+      :x="layersLibraryState.x"
+      :y="layersLibraryState.y"
+    >
+      <t-card
+        class="h-full overflow-y-scroll"
+        header="Layers"
+      >
+        <Layers />
+      </t-card>
+    </vue-draggable-resizable>
+  </div>
+</template>
+
+<script>
+import { blockWidth, blockHeight } from "../ascii";
+import Layers from "./parts/Layers.vue";
+
+export default {
+  name: "LayersLibrary",
+  components: {
+    Layers,
+  },
+  created() {
+    this.panel.x = this.layersLibraryState.x;
+    this.panel.y = this.layersLibraryState.y;
+    this.panel.w = this.layersLibraryState.w;
+    this.panel.h = this.layersLibraryState.h;
+  },
+  data: () => ({
+    panel: {
+      w: 0,
+      h: 0,
+      x: 100,
+      y: 100,
+      visible: true,
+      tab: 1,
+      dragging: false,
+    },
+  }),
+  components: {
+    Layers,
+  },
+  computed: {
+    blockWidth() {
+      return blockWidth * this.blockSizeMultiplier;
+    },
+    blockHeight() {
+      return blockHeight * this.blockSizeMultiplier;
+    },
+    blockSizeMultiplier() {
+      return this.$store.getters.blockSizeMultiplier;
+    },
+    layersLibraryState() {
+      return this.$store.getters.layersLibraryState;
+    },
+  },
+  methods: {
+    onResize(x, y, w, h) {
+      this.panel.x = x;
+      this.panel.y = y;
+      this.panel.w = w;
+      this.panel.h = h;
+      this.$store.commit("changeLayersLibraryState", this.panel);
+    },
+    onDragStop(x, y) {
+      this.panel.x = x;
+      this.panel.y = y;
+
+      this.$store.commit("changeLayersLibraryState", this.panel);
+    },
+  },
+};
+</script>

src/components/parts/BrushCanvas.vue

@@ -23,7 +23,7 @@
 </style>
 
 <script>
-import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks, checkVisible  } from "../../ascii";
+import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks  } from "../../ascii";
 
 export default {
   name: "BrushCanvas",

src/components/parts/KeyboardShortcuts.vue

@@ -29,7 +29,7 @@ export default {
 
       // When press escape go back to default took
       if (e.key === "Escape" && !this.isDefault && this.haveOpenTabs) {
-        this.clearToolCanvas();
+        this.$emit("updatecanvas");
         this.$store.commit("changeTool", 0);
         return;
       }
@@ -90,7 +90,7 @@ export default {
         
       ) {
         this.$store.commit("changeTool", Number.parseInt(e.key - 1));
-        this.clearToolCanvas();
+        this.$emit("updatecanvas");
         return;
       }
 
@@ -179,7 +179,7 @@ export default {
 
           // Reset and hide the select after successful copy
           this.$store.commit("updateAsciiBlocks", this.currentAsciiLayerBlocks);
-          this.delayRedrawCanvas();
+          this.$emit("updatecanvas");
 
           this.$toasted.show("Deleted blocks!", {
             type: "success",
@@ -211,7 +211,7 @@ export default {
           // Reset and hide the select after successful copy
 
           this.$store.commit("updateAsciiBlocks", this.currentAsciiLayerBlocks);
-          // this.delayRedrawCanvas()
+          this.$emit("updatecanvas");
 
           this.$toasted.show("Cut blocks!", {
             type: "success",

src/components/parts/Layers.vue

@@ -1,83 +1,82 @@
 <template>
   <div>
-    <t-card class="h-full">
-      <t-button
-        type="button"
-        class="block w-full border-gray-200 bg-gray-500 p-2 m-2"
-        @click="addLayer()"
-      >
-        Add Layer
-      </t-button>
+    <t-button
+      type="button"
+      class="block w-full border-gray-200 bg-gray-500 p-2 m-2"
+      @click="addLayer()"
+    >
+      Add Layer
+    </t-button>
 
-      <hr />
+    <hr>
 
-      <div class="w-full bg-white rounded-lg shadow">
-        <ul class="divide-y-2 divide-gray-100 reverseorder">
-          <li
-            :class="`p-1 ${selectedLayerClass(key)}`"
-            v-for="(layer, key) in currentAsciiLayers"
-            :key="key"
-          >
-            <div class="flex">
-              <div class="w-12">
-                <t-button
-                  type="button"
-                  class="rounded-xl"
-                  @click="toggleLayer(key)"
-                >
-                  <font-awesome-icon
-                    :icon="['fas', layer.visible ? 'eye' : 'eye-slash']"
-                  /> </t-button
-                ><br />
+    <div class="w-full bg-white rounded-lg shadow">
+      <ul class="divide-y-2 divide-gray-100 reverseorder">
+        <li
+          :class="`p-1 ${selectedLayerClass(key)}`"
+          v-for="(layer, key) in currentAsciiLayers"
+          :key="key"
+        >
+          <div class="flex">
+            <div class="w-12">
+              <t-button
+                type="button"
+                class="rounded-xl"
+                @click="toggleLayer(key)"
+              >
+                <font-awesome-icon
+                  :icon="['fas', layer.visible ? 'eye' : 'eye-slash']"
+                />
+              </t-button><br>
 
-                <t-button
-                  type="button"
-                  class="rounded-xl"
-                  @click="removeLayer(key)"
-                  :disabled="!canToggleLayer"
-                >
-                  <font-awesome-icon :icon="['fas', 'trash']" />
-                </t-button>
-              </div>
+              <t-button
+                type="button"
+                class="rounded-xl"
+                @click="removeLayer(key)"
+                :disabled="!canToggleLayer"
+              >
+                <font-awesome-icon :icon="['fas', 'trash']" />
+              </t-button>
+            </div>
 
-              <div class="w-full" @click="changeLayer(key)">
-                <div class="flex text-right">
-                  <div class="w-full">
-                    <t-card class="w-full">
-                      {{ layer.label }}
-                    </t-card>
-                  </div>
+            <div
+              class="w-full"
+              @click="changeLayer(key)"
+            >
+              <div class="flex text-right">
+                <div class="w-full">
+                  <t-card class="w-full">
+                    {{ layer.label }}
+                  </t-card>
+                </div>
 
-                  <div class="w-5">
-                    <t-button
-                      type="button"
-                      class="rounded-xl"
-                      @click="downLayer(key)"
-                      :disabled="!canToggleLayer"
-                    >
-                      <font-awesome-icon
-                        :icon="['fas', 'chevron-circle-up']"
-                      /> </t-button
-                    ><br />
+                <div class="w-5">
+                  <t-button
+                    type="button"
+                    class="rounded-xl"
+                    @click="downLayer(key)"
+                    :disabled="!canToggleLayer"
+                  >
+                    <font-awesome-icon
+                      :icon="['fas', 'chevron-circle-up']"
+                    />
+                  </t-button><br>
 
-                    <t-button
-                      type="button"
-                      class="rounded-xl"
-                      @click="upLayer(key)"
-                      :disabled="!canToggleLayer"
-                    >
-                      <font-awesome-icon
-                        :icon="['fas', 'chevron-circle-down']"
-                      />
-                    </t-button>
-                  </div>
+                  <t-button
+                    type="button"
+                    class="rounded-xl"
+                    @click="upLayer(key)"
+                    :disabled="!canToggleLayer"
+                  >
+                    <font-awesome-icon :icon="['fas', 'chevron-circle-down']" />
+                  </t-button>
                 </div>
               </div>
             </div>
-          </li>
-        </ul>
-      </div>
-    </t-card>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -111,8 +110,8 @@ export default {
   },
   watch: {
     currentAsciiLayers() {
-      this.selectBestLayer()
-    }
+      this.selectBestLayer();
+    },
   },
   methods: {
     selectBestLayer() {
@@ -120,14 +119,14 @@ export default {
       this.currentAsciiLayers.map((item, key) => {
         if (item.visible) {
           this.changeLayer(key);
-          found = true
+          found = true;
           return;
         }
       });
 
       // If there's no visible layers we'll target the first one always
       if (!found) {
-        this.changeLayer(0)
+        this.changeLayer(0);
       }
     },
     selectedLayerClass(key) {

src/store/index.js

@@ -76,8 +76,8 @@ export default new Vuex.Store({
     brushLibrary: [],
     brushLibraryState: {
       x: blockWidth * 130,
-      y: blockHeight * 2,
-      h: blockHeight * 50,
+      y: blockHeight * 23,
+      h: blockHeight * 25,
       w: blockWidth * 35,
       visible: true,
       tab: 0,
@@ -89,6 +89,13 @@ export default new Vuex.Store({
       w: blockWidth * 25,
       visible: true,
     },
+    layersLibraryState: {
+      x: blockWidth * 130,
+      y: blockHeight * 2,
+      h: blockHeight * 19,
+      w: blockWidth * 35,
+      visible: true,
+    },
   },
   mutations: {
     changeState(state, payload) {
@@ -122,10 +129,10 @@ export default new Vuex.Store({
     changeToolBarDraggable(state, payload) {
       state.toolbarState.draggable = payload;
     },
+    changeLayersLibraryState(state, payload) {
+      state.layersLibraryState = payload;
+    },
     changeAsciiWidthHeight(state, payload) {
-      // state.asciibirdMeta[state.tab].width = payload.width;
-      // state.asciibirdMeta[state.tab].height = payload.height;
-
       state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(
         payload.layers));
     },
@@ -479,6 +486,7 @@ export default new Vuex.Store({
     brushLibrary: (state) => state.brushLibrary,
     brushLibraryState: (state) => state.brushLibraryState,
     brushPreviewState: (state) => state.brushPreviewState,
+    layersLibraryState: (state) => state.layersLibraryState,
     brushBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.brushBlocks)) || [],
     selectBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.selectBlocks)) || [],
     isModalOpen: (state) => {

src/views/Editor.vue

@@ -178,7 +178,7 @@ export default {
       return this.currentTool.name === "select";
     },
     isDefault() {
-      return this.currentTool.name === "default";
+      return this.currentTool.name === "default" || false;
     },
     isBrushing() {
       return this.currentTool.name === "brush";