export to canvas size

README.md

@@ -19,12 +19,9 @@
 * Odd row width makes brush off by one
 * If you resize an ascii, and then undo and try fill in blocks it will error cuz the blocks don't exist
 * Redo (ctrl y) is a buggy
+* Circle brush (works okay for odd width and height numbers)
 # FOCUSING ON NOW
 
-* EXPORT ascii, trim to canvas size
-
-* Circle brush
-
 * SELECT
  * CLIPBOARD
 
@@ -40,7 +37,7 @@
 
 * LAYERS
 
-# KILLER ASCIIBIRD FEATURES DONE
+# FEATURES DONE
 
 * Tabbed editing for asciis
 * Remembers ASCII states, can export and import ASCIIBIRD state files
@@ -49,11 +46,12 @@
 * Floating pattlets, resizeable and remembers positions
 * .ASB file, compressed asciibird state
 * Export mIRC to clipboard
+* EXPORT ascii, trim to canvas size
 
 * Modals
  * New ascii modal
 
-# KILLER ASCIIBIRD FEATURES TO DO
+# FEATURES TO DO
 
 * Layers / Insert ASCII as layer
 * Overlay image for nance tracing mode
@@ -66,9 +64,6 @@
 # Things To Do Later
 
 * Properly get CSS into the JS stuff ya lazy bird
-* Animated ASCII (key frames like in flash with sound) (Possible with JSON but it will be FKN memory hog maybe)
- * We could do this, but these custom ASCIIs could only be played in our player
-
 # References
 
 * https://jp.itch.io/playscii / http://vectorpoem.com/playscii/

src/components/parts/BrushPreview.vue

@@ -55,8 +55,8 @@
       ref="brushcanvas"
       id="brushcanvas"
       class="brushcanvas"
-      :width="100"
-      :height="100"
+      :width="brushSizeWidthPreview * currentAscii.blockWidth"
+      :height="brushSizeHeightPreview * currentAscii.blockHeight"
     ></canvas>
   </div>
 </template>
@@ -183,11 +183,9 @@ export default {
         char: null,
       };
 
-      let middlePoint = Math.round(brushHeight / 2);
-
-      let startWidth = Math.round(brushWidth / 2);
-
-      // let checkWidth = 
+      let middleY = Math.floor(brushHeight / 2);
+      let middleX = Math.floor(brushWidth / 2);
+      let yModifier = 0;
 
       // Recreate 2d array for preview
       for (y = 0; y < brushHeight; y++) {
@@ -212,28 +210,35 @@ export default {
               }
               break;
 
-            default:
+            // default:
             case "square":
               this.blocks[y][x] = Object.assign({}, block);
               break;
 
-            // case "circle":
+            case "circle":            
 
-            //   // Top half
-            //   if (y < middlePoint) {
+              if (middleY >= y) {
+                // Top half
+                yModifier = y;
+                if ( (x <= middleX+yModifier) && (x >= middleX-yModifier) ) {
+                  this.blocks[y][x] = Object.assign({}, block);
+                } else {
+                  this.blocks[y][x] = Object.assign({}, emptyBlock);
+                }
 
-            //     if (x = brushWidth-1) {
-            //       this.blocks[y][x] = Object.assign({}, block);
-            //     } else {
-            //       this.blocks[y][x] = Object.assign({}, emptyBlock);
-            //     }               
+                
+              } else {
+                // Bottom half
+                yModifier = middleY - (y- middleY);
 
-            //   } else {
-            //     // Bottom half
-            //     this.blocks[y][x] = Object.assign({}, block);
-            //   }
+                if ( (x <= middleX+yModifier) && (x >= middleX-yModifier) ) {
+                  this.blocks[y][x] = Object.assign({}, block);
+                } else {
+                  this.blocks[y][x] = Object.assign({}, emptyBlock);
+                }
+              }
 
-            //   break;
+              break;
           }
         }
       }