better image overlay

README.md

@@ -40,6 +40,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
 * Undo and redo with ctrl + z and ctrl + y, undos are set to a limit of 50 at the moment.
 * Fg, Bg and Char boxes to filter when using certain tools
   * For example filling with Char unchecked will ignore characters when filling
+* Image overlay to trace images  
 * Toolbar containing
   * Select
   * Text mode
@@ -81,7 +82,6 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 * More Context Menus (right click menu)
   * Brushes Canvas right click
   * ASCII right click
-* Image overlay for trace mode
 * Review encodings check on file import - UTF8 vs Latin something
 * Revise the blocks system to only store what's changed
 
@@ -92,6 +92,7 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 
 # Fixed / Finished
 
+* Image overlay for trace mode
 * 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

src/ascii.js

@@ -259,6 +259,7 @@ export const parseMircAscii = async (content, title) => {
       repeatx: true,
       repeaty: true,
       visible: false,
+      stretched: false,
     },
     x: blockWidth * 35, // the dragable ascii canvas x
     y: blockHeight * 2, // the dragable ascii canvas y
@@ -468,6 +469,7 @@ export const createNewAscii = (forms) => {
       repeatx: true,
       repeaty: true,
       visible: false,
+      stretched: false,
     },
     selectedLayer: 0,
   };

src/components/modals/ImageOverlay.vue

@@ -7,9 +7,9 @@
     @closed="$store.commit('closeModal', 'overlay')"
   >
     <template v-slot:default>
-    <div class="flex">
-
-        <span class="text-sm">URL</span>
+    <div >
+        <span class="text-sm">URL <br><small>Note: ASCIIBIRD only supports URL images</small></span>
+        
         <t-input
             type="text"
             name="url"
@@ -19,6 +19,44 @@
     </div>
       
       
+      <div class="flex">
+        <label class="ml-1 w-1/3">
+          <t-checkbox
+            class="form-checkbox m-1"
+            name="visible"
+            v-model="imageOverlay.visible"
+          />
+          <span class="text-sm">Visible</span>
+        </label>
+
+        <label class="ml-1 w-1/3">
+          <span class="text-sm">Transparency</span>
+          <t-input
+            type="number"
+            name="width"
+            v-model="imageOverlay.opacity"
+            min="1"
+            max="100"
+            class="m-1"
+          />
+          </label>
+
+
+          <div class="flex">
+            <label class="flex items-center">
+              <t-radio name="options" :value="true" v-model="imageOverlay.stretched"  />
+              <span class="ml-2 text-sm">Fit to ASCII</span>
+            </label>
+            <label class="flex items-center ml-2">
+              <t-radio name="options" :value="false" v-model="imageOverlay.stretched" />
+              <span class="ml-2 text-sm">Original Size</span>
+            </label>
+          </div>
+
+          
+        
+      </div>
+
       <div class="flex">
         <label class="ml-1 w-1/3">
           <t-checkbox
@@ -38,28 +76,7 @@
           <span class="text-sm">Repeat Y</span>
         </label>
 
-        <label class="ml-1 w-1/3">
-          <t-checkbox
-            class="form-checkbox m-1"
-            name="visible"
-            v-model="imageOverlay.visible"
-          />
-          <span class="text-sm">Visible</span>
-        </label>
 
-        <label class="ml-1 w-1/3">
-            <span class="text-sm">Transparency</span>
-          <t-input
-            type="number"
-            name="width"
-            v-model="imageOverlay.opacity"
-            min="1"
-            max="100"
-            class="m-1"
-          />
-
-          
-        </label>
       </div>
     </template>
 

src/components/parts/Layers.vue

@@ -33,10 +33,10 @@
                   :icon="['fas', imageOverlay.visible ? 'eye' : 'eye-slash']"
                 /> </t-button
               >
-                <div class="w-full" @dblclick="showOverlayModal">
+                <div class="w-full p-1" @click="showOverlayModal">
                   <div class="flex text-right" >
                     <div class="w-full">
-                      <t-card class="w-full pl-2">
+                      <t-card class="w-full pl-2 hover:bg-gray-300 cursor-pointer">
                         <span>{{
                           imageOverlayUrl ||  'Image Overlay'
                           
@@ -91,8 +91,8 @@
             <div class="w-full" @click="changeLayer(key)">
               <div class="flex text-right">
                 <div class="w-full">
-                  <t-card class="w-full">
-                    <span @dblclick="showLayerRename(key, layer.label)">{{
+                  <t-card class="w-full hover:bg-gray-300 cursor-pointer">
+                    <span @click="showLayerRename(key, layer.label)">{{
                       layer.label
                     }}</span>
                   </t-card>

src/views/Editor.vue

@@ -247,7 +247,28 @@ export default {
       return this.$store.getters.imageOverlay;
     },
     imageOverlayStyle() {
-      return this.imageOverlay.visible ? `background-image: url('${this.imageOverlay.url}'); background-position: center; background-size: 100%; opacity: ${this.imageOverlay.opacity/100}; z-index: -1; position: absolute;` : 'position: absolute;'
+      let repeat = 'background-repeat: no-repeat;'
+      let stretched = 'background-size: 100%;'
+
+      if (this.imageOverlay.repeatx && this.imageOverlay.repeaty) {
+        repeat = 'background-repeat: repeat;'
+      }
+
+      if (this.imageOverlay.repeatx && !this.imageOverlay.repeaty) {
+        repeat = 'background-repeat: repeat-x;'
+      }
+
+      if (!this.imageOverlay.repeatx && this.imageOverlay.repeaty) {
+        repeat = 'background-repeat: repeat-y;'
+      }
+
+      if (this.imageOverlay.stretched) {
+        stretched = 'background-size: 100%;';
+      } else {
+        stretched = ''
+      }
+
+      return this.imageOverlay.visible ? `background-image: url('${this.imageOverlay.url}'); ${stretched} ${repeat} opacity: ${this.imageOverlay.opacity/100}; z-index: -1; position: absolute;` : 'position: absolute;'
     },
     canvasTransparent() {
       return this.imageOverlay.visible ? 'opacity: 0.6;' : 'opacity: 1;'

vue.config.js

@@ -5,5 +5,5 @@ module.exports = {
     extract: false
   },
 
-  publicPath: '/~jewbird/'
+  publicPath: ''
 };