width bug fix, font on firt load bugfix

README.md

@@ -77,7 +77,6 @@ A most latest production build to use is available at https://asciibird.jewbird.
 
 ## Bugs to fix
 
-* Re add better width detection in ascii import
 * Export to HTTP post shows success even if cancel
 * If you brush off canvas you cannot undo the changed blocks
 * If you apply an empty block from a brush, it will remove the char when it is supposed to leave the block alone.

src/ascii.js

@@ -234,7 +234,7 @@ export const parseMircAscii = async (contents, filename) => {
       label: filename,
       visible: true,
       data: create2DArray(contents.split('\n').length),
-      width: asciiLines[0].replace(mIrcColourRegex, '').length,
+      width: 0, // calculated down bellow
       height: contents.split('\n').length,
     }],
     history: [],
@@ -258,6 +258,15 @@ export const parseMircAscii = async (contents, filename) => {
   const colourCodeRegex = new RegExp(/\u0003/, 'g');
   let isPlainText = !colourCodeRegex.test(contents);
 
+  // Get the max line width, as some lines can be trimmed by spaces
+  // we cannot always rely on the first line for the width
+  for (let i = 0; i < asciiLines.length; i++) {
+    let cleanedWidth = asciiLines[i].replace(mIrcColourRegex, '').length;
+    if (cleanedWidth > finalAscii.layers[0].width) {
+      finalAscii.layers[0].width = cleanedWidth;
+    }
+  }
+
   // https://modern.ircdocs.horse/formatting.html#color
   // In the following list, <CODE> represents the color formatting character (0x03), <COLOR> represents one or two ASCII digits (either 0-9 or 00-99).
 

src/components/parts/BrushCanvas.vue

@@ -50,6 +50,7 @@ export default {
   },
   mounted() {
     this.ctx = this.$refs[this.canvasName].getContext("2d");
+    this.ctx.font = "13px Hack";
     this.delayRedrawCanvas();
   },
   props: {

src/views/Editor.vue

@@ -91,6 +91,7 @@ export default {
   },
   mounted() {
     this.ctx = this.canvasRef.getContext("2d");
+    this.ctx.font = "13px Hack";
     this.toolCtx = this.$refs.canvastools.getContext("2d");
     this.delayRedrawCanvas();
   },