panels follow scroll, better ascii optimis for blocks

README.md

@@ -30,7 +30,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
   * So you never lose your ascii art!
   * Saves layers, brushes data also to same file
 * Can import from clipboard, load from irc.watch/ascii, load from file
-* Can export to mirc ascii to clipboard or file
+* Can export mirc ascii to clipboard, file or HTTP POST
 * 99 Colour support, flip colours
 * Mirror X and Y
 * Grid mode with alt + g
@@ -55,12 +55,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
-
-# Fixes
-
-* 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
-
+  
 ## 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.
@@ -87,9 +82,15 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 
 ## User Feedback Requests
 
-* Toolbars and panels follow when scrolling down
 * Rename Layers
 * Move brush with keys and space to paint
+* Improve the character panel, group chars
+
+# Fixed / Finished
+
+* 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
 
 # Keyboard Shortcuts
 

src/Dashboard.vue

@@ -87,7 +87,7 @@
     />
 
     <template v-if="asciibirdMeta.length">
-      <div class="bg-gray-500 z-50">
+      <div class="bg-gray-500 z-50 relative" ref="tabbar" :style="toolbarString">
         <t-button class="p-1 rounded-xl" @click="openContextMenu">
           :::
         </t-button>
@@ -109,12 +109,13 @@
         </span>
       </div>
 
-      <Toolbar :canvas-x="canvasX" :canvas-y="canvasY" class="z-10" />
+      <Toolbar class="z-10" :y-offset="scrollOffset" />
       <DebugPanel
         :canvas-x="canvasX"
         :canvas-y="canvasY"
         v-if="debugPanelState.visible"
         class="z-10"
+        :y-offset="scrollOffset"
       />
 
       <Editor
@@ -123,18 +124,20 @@
         @textediting="textediting"
         :update-canvas="updateCanvas"
         @selecting="updateSelecting"
+        :y-offset="scrollOffset"
         class="z-10"
       />
 
-      <CharPicker v-if="toolbarState.isChoosingChar" class="z-10" />
+      <CharPicker v-if="toolbarState.isChoosingChar" class="z-10" :y-offset="scrollOffset" />
       <ColourPicker
         v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg"
         class="z-10"
+        :y-offset="scrollOffset"
       />
 
-      <BrushLibrary v-if="brushLibraryState.visible" class="z-10" />
-      <BrushPreview class="z-10" @inputtingbrush="inputtingbrush" />
-      <LayersLibrary class="z-10" />
+      <BrushLibrary v-if="brushLibraryState.visible" class="z-10" :y-offset="scrollOffset" />
+      <BrushPreview class="z-10" @inputtingbrush="inputtingbrush" :y-offset="scrollOffset" />
+      <LayersLibrary class="z-10" :y-offset="scrollOffset" />
     </template>
     <template v-else>
       <div
@@ -191,6 +194,15 @@ export default {
   async created() {
     // Load from irc watch if present in the URL bar
     checkForGetRequest();
+    var isThis = this;
+    window.addEventListener("scroll", function (event) {
+      isThis.scrollOffset = this.scrollY;
+    });
+  },
+  destroyed() {
+    window.removeEventListener("scroll", function (event) {
+      isThis.scrollOffset = this.scrollY;
+    });
   },
   components: {
     Toolbar,
@@ -222,6 +234,8 @@ export default {
     selecting: null,
     isInputtingBrushSize: false,
     showingPostUrl: false,
+    scrollOffset: 0,
+    toolbarString: 'top: 0px;'
   }),
   computed: {
     splashAscii() {
@@ -276,6 +290,12 @@ export default {
       return this.$store.getters.currentTab;
     },
   },
+  watch: {
+    scrollOffset(val) {
+      this.$refs.tabbar.style.top = val
+      this.toolbarString = `top: ${val}px`
+    }
+  },
   methods: {
     inputtingbrush(val) {
       this.isInputtingBrushSize = val;

src/components/BrushLibrary.vue

@@ -12,6 +12,7 @@
       :h="brushLibraryState.h"
       :x="brushLibraryState.x"
       :y="brushLibraryState.y"
+      ref="brushlibrarypanel"
     >
       <t-card class="h-full overflow-y-auto overflow-x-auto">
         <t-button
@@ -155,6 +156,7 @@ export default {
   components: {
     BrushCanvas,
   },
+  props: ['yOffset'],
   computed: {
     blockWidth() {
       return blockWidth * this.blockSizeMultiplier;
@@ -184,7 +186,11 @@ export default {
       return this.$store.getters.brushLibraryState;
     },
   },
-  watch: {},
+  watch: {
+    yOffset(val) {
+      this.$refs.brushlibrarypanel.top = Number.parseInt(this.brushLibraryState.y+val)
+    }
+  },
   methods: {
     changeTab(tab) {
       this.panel.tab = tab;

src/components/LayersLibrary.vue

@@ -12,6 +12,7 @@
       :h="layersLibraryState.h"
       :x="layersLibraryState.x"
       :y="layersLibraryState.y"
+      ref="layerspanel"
     >
       <t-card
         class="h-full overflow-y-auto overflow-x-hidden"
@@ -51,6 +52,7 @@ export default {
   components: {
     Layers,
   },
+  props: ['yOffset'],
   computed: {
     blockWidth() {
       return blockWidth * this.blockSizeMultiplier;
@@ -65,6 +67,11 @@ export default {
       return this.$store.getters.layersLibraryState;
     },
   },
+  watch: {
+    yOffset(val) {
+      this.$refs.layerspanel.top = Number.parseInt(this.layersLibraryState.y+val)
+    }
+  },
   methods: {
     onResize(x, y, w, h) {
       this.panel.x = x;

src/components/Toolbar.vue

@@ -12,6 +12,7 @@
       :x="toolbarState.x"
       :y="toolbarState.y"
       :draggable="draggable"
+      ref="toolbardrag"
     >
       <t-card class="h-full">
         <div class="flex mb-2">
@@ -93,7 +94,7 @@
           </label>
         </div>
 
-        <hr class="m-3">
+        <hr class="m-3" />
 
         <t-button
           type="button"
@@ -106,10 +107,7 @@
           }`"
           @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>
@@ -132,7 +130,7 @@ export default {
   },
   name: "Toolbar",
   components: { Colours },
-
+  props: ["yOffset"],
   data: () => ({
     toolbar: {
       w: 0,
@@ -195,7 +193,11 @@ export default {
       return this.toolbarState.updateBrush;
     },
   },
-  watch: {},
+  watch: {
+    yOffset(val) {
+      this.$refs.toolbardrag.top =  Number.parseInt(this.toolbarState.y + val);
+    },
+  },
   methods: {
     updateMirror() {
       this.$store.commit("updateMirror", this.mirror);

src/components/parts/BrushPreview.vue

@@ -12,7 +12,8 @@
       :h="brushPreviewState.h"
       :x="brushPreviewState.x"
       :y="brushPreviewState.y"
-      :draggable="canDrag"
+      :draggable="canDrag && !isInputtingBrushSize"
+      ref="previewpaneldrag"
     >
       <t-card class="h-full">
         <div class="flex w-full">
@@ -22,9 +23,9 @@
               name="width"
               v-model="brushSizeWidthInput"
               min="1"
-              :max="maxBrushSize"
-              @mouseenter="isInputtingBrushSize = true"
-              @mouseleave="isInputtingBrushSize = false"
+              :max="maxBrushSize"             
+              @focus="isInputtingBrushSize = true"
+              @blur="isInputtingBrushSize = false"
             />
           </div>
 
@@ -34,9 +35,9 @@
               name="height"
               v-model="brushSizeHeightInput"
               min="1"
-              :max="maxBrushSize"
-              @mouseenter="isInputtingBrushSize = true"
-              @mouseleave="isInputtingBrushSize = false"
+              :max="maxBrushSize"              
+              @focus="isInputtingBrushSize = true"
+              @blur="isInputtingBrushSize = false"
             />
           </div>
         </div>
@@ -104,6 +105,7 @@ export default {
     this.panel.w = this.brushPreviewState.w;
     this.panel.h = this.brushPreviewState.h;
   },
+  props: ['yOffset'],
   data: () => ({
     canDrag: true,
     blocks: [],
@@ -239,7 +241,9 @@ export default {
     brushBlocks() {
       this.$store.commit("pushBrushHistory", this.brushBlocks);
     },
-    
+    yOffset(val) {
+     this.$refs.previewpaneldrag.top = Number.parseInt(this.brushPreviewState.y+val)
+    }
   },
   methods: {
     updateBrushSize() {

src/views/Editor.vue

@@ -100,7 +100,7 @@ export default {
     isMouseOnCanvas: false,
     selectedBlocks: [],
   }),
-  props: ["updateCanvas"],
+  props: ["updateCanvas", "yOffset"],
   computed: {
     canvasRef() {
       return this.$refs.canvas;
@@ -313,6 +313,9 @@ export default {
     selecting(val) {
       this.$emit("selecting", val);
     },
+    yOffset() {
+      this.delayRedrawCanvas()
+    }
   },
   methods: {
     warnInvisibleLayer() {
@@ -388,7 +391,7 @@ export default {
           canvasY = blockHeight * y;
 
           // Experimental code to not rows blocks off screen
-          if (this.top !== false && !this.checkVisible(this.top + canvasY)) {
+          if (this.top !== false && !this.checkVisible(this.top + canvasY - this.yOffset)) {
             continue;
           }