rename layers, hide highlighted text with css

README.md

@@ -24,7 +24,10 @@ A most latest production build to use is available at https://asciibird.jewbird.
 # Current Features
 
 * Tabbed ASCII editing
-* Layers support with visibility and ordering
+* Layers support
+  * Show and hide layers
+  * Change layer order
+  * Double click to rename layer
 * Copy and paste between tabs
 * Remembers state on refresh and when the browser loads, can also export the state to a file and load elsewhere.
   * So you never lose your ascii art!
@@ -55,7 +58,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
   * Clicking updates block
   * Right clicking removes block
   * Hovering outside brush area will save brush to history
-  
+
 ## Noted Bugs to Fix
 
 ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. Refreshing the page seems to fix most strange things.
@@ -77,12 +80,10 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
   * Brushes Canvas right click
   * ASCII right click
 * Image overlay for trace mode
-* Experimental code to only render blocks visible on screen
 * Review encodings check on file import - UTF8 vs Latin something
 
 ## User Feedback Requests
 
-* Rename Layers
 * Move brush with keys and space to paint
 * Improve the character panel, group chars
 
@@ -91,6 +92,8 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 * Cannot manually input brush sizes because keyboard shortcuts is stealing focus
 * If you open a modal and refresh the page it's stuck as opened inside the state, and you cannot open it again
 * Toolbars and panels follow when scrolling down
+* Experimental code to only render blocks visible on screen
+* Rename Layers
 
 # Keyboard Shortcuts
 

src/components/parts/KeyboardShortcuts.vue

@@ -19,11 +19,12 @@ export default {
     window.removeEventListener("keydown", this.keyListener.bind(this));
   },
   created() {
+    window.stopKeyEvents = true
     this.keyListener = function (e) {
       // Stop blocking input when modals are open
       // Whatever this char "'\0'" is it'd occur even without pressing any keys
       // This fixes it
-      if (this.isModalOpen || e.key === "\0" || this.isInputtingBrushSize || this.showingPostUrl) {
+      if (this.isModalOpen || e.key === "\0" || this.isInputtingBrushSize || this.showingPostUrl || window.stopKeyEvents) {
         return;
       }
 

src/components/parts/Layers.vue

@@ -8,7 +8,7 @@
       Add Layer
     </t-button>
 
-    <hr>
+    <hr />
 
     <div class="w-full bg-white rounded-lg shadow">
       <ul class="divide-y-2 divide-gray-100 reverseorder">
@@ -27,8 +27,8 @@
               >
                 <font-awesome-icon
                   :icon="['fas', layer.visible ? 'eye' : 'eye-slash']"
-                />
-              </t-button><br>
+                /> </t-button
+              ><br />
 
               <t-button
                 type="button"
@@ -40,14 +40,11 @@
               </t-button>
             </div>
 
-            <div
-              class="w-full"
-              @click="changeLayer(key)"
-            >
+            <div class="w-full" @click="changeLayer(key)">
               <div class="flex text-right">
                 <div class="w-full">
                   <t-card class="w-full">
-                    {{ layer.label }}
+                    <span @dblclick="showLayerRename(key, layer.label)">{{ layer.label }}</span>
                   </t-card>
                 </div>
 
@@ -60,8 +57,8 @@
                   >
                     <font-awesome-icon
                       :icon="['fas', 'chevron-circle-up']"
-                    />
-                  </t-button><br>
+                    /> </t-button
+                  ><br />
 
                   <t-button
                     type="button"
@@ -136,6 +133,38 @@ export default {
       // Otherwise gray
       return "bg-gray-200";
     },
+    showLayerRename(key, label) {
+      window.stopKeyEvents = true
+      this.$dialog
+        .prompt({
+          title: "Rename Layer",
+          text: "Please input your new layer name",
+          icon: "question",
+          inputValue: label,
+          clickToClose: false,
+        })
+        .then((result) => {
+          if (!result.input.length) {
+            this.$toasted.show("You must enter a layer name!", {
+              type: "error",
+            });
+
+            return;
+          }
+
+          if (result.isOk) {
+            this.updateLayerName(key, result.input);
+          }
+
+          window.stopKeyEvents = false
+        });
+    },
+    updateLayerName(key, label) {
+      this.$store.commit("updateLayerName", {
+        key: key,
+        label: label,
+      });
+    },
     addLayer() {
       this.$store.commit("addLayer");
     },

src/store/index.js

@@ -304,6 +304,17 @@ export default new Vuex.Store({
           tempLayers));
       }
 
+    },
+    updateLayerName(state, payload) {
+      let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
+        .blocks))
+
+      if (tempLayers[payload.key]) {
+        tempLayers[payload.key].label = payload.label;
+        state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(
+          tempLayers));
+      }
+
     },
 
     // ASCII
@@ -314,7 +325,7 @@ export default new Vuex.Store({
     // BLOCKS
     undoBlocks(state) {
       if (state.asciibirdMeta[state.tab].history.length > 1) {
-        
+
         state.asciibirdMeta[state.tab].blocks = state.asciibirdMeta[state.tab].history.pop();
         state.asciibirdMeta[state.tab].redo.push(state.asciibirdMeta[state.tab].blocks);
 

src/style.css

@@ -19,6 +19,12 @@
 
 body {
     background: rgb(58, 58, 58);
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    user-select: none;
 }
 
 .canvas {