From 949ab15857c14bfb34debd3ea84c9432ab73d945 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 09:44:46 +0200
Subject: [PATCH 01/24] + Added text printing option to HTML interface

---
 www/index.html      |  1 +
 www/lang/de-DE.json |  1 +
 www/lang/en-US.json |  1 +
 www/main.js         | 43 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+)

diff --git a/www/index.html b/www/index.html
index a587d0d..ce6d81c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -120,6 +120,7 @@
             <div id="control-overlay">
                 <div>
                     <button id="insert-picture" data-i18n="insert-picture" data-key="Enter">Insert Picture</button>
+                    <button id="insert-text" data-i18n="insert-text" data-key="">Insert Text</button>
                     <p data-i18n="or-drag-file-to-below" class="hide-on-android">Or drag file to below</p>
                 </div>
             </div>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index a0dba02..b7f14eb 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -9,6 +9,7 @@
     "canvas": "Leinwand",
     "document": "Dokument",
     "insert-picture": "Bild einfügen",
+    "insert-text": "Text einfügen",
     "help": "Hilfe",
     "javascript-license-information": "Informationen zur JavaScript-Lizenz",
     "settings": "Einstellungen",
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 65bb520..88cac2a 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -8,6 +8,7 @@
     "canvas": "Canvas",
     "document": "Document",
     "insert-picture": "Insert Picture",
+    "insert-text": "Insert Text",
     "help": "Help",
     "javascript-license-information": "JavaScript License Information",
     "settings": "Settings",
diff --git a/www/main.js b/www/main.js
index 06a6707..bdff35b 100644
--- a/www/main.js
+++ b/www/main.js
@@ -317,6 +317,7 @@ class CanvasController {
 
         putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
         putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
+        putEvent('#insert-text'   , 'click', () => this.insertText(), this);
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);
@@ -437,6 +438,48 @@ class CanvasController {
             input.click();
         }
     }
+    insertText() {
+        let text = prompt("Enter text");
+        let lines = [];
+
+        // Use Word Wrap to split the text over multiple lines
+        const wrapText = (text, maxLength) => {
+            let splitPos = maxLength - 1;
+            while (text[splitPos] != " " && splitPos > 0) {
+                splitPos--;
+            }
+            if (splitPos == 0) { splitPos = maxLength; }
+            return [text.slice(0, splitPos), text.slice(splitPos, text.length)];
+        }
+
+        const maxLength = 33;
+        while (text.length > maxLength) {
+            let line;
+            [line, text] = wrapText(text, maxLength);
+            lines.push(line);
+        }
+        lines.push(text)
+
+        let ctx = this.canvas.getContext("2d");
+        ctx.font = "20px Sans-Serif";
+
+        const yStep = 20;
+        let yPos = yStep;
+        for (let line of lines) {
+            ctx.fillText(line, 0, yPos); 
+            yPos += yStep;
+        }
+        this.crop();
+        
+        this.imageUrl = this.canvas.toDataURL();
+        this.activatePreview();
+        
+        this.controls.classList.add('hidden');
+        this.preview.hidden = true;
+        
+        hint('#button-print');
+        return true;
+    }
     reset() {
         let canvas = this.canvas;
         canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

From 8f402eb80f5929e32cb654c466ae789cdbe06096 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 12:02:30 +0200
Subject: [PATCH 02/24] + Added font and text size to settings panel

---
 www/index.html | 13 +++++++++++++
 www/main.js    | 33 ++++++++++++++++++++++++---------
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/www/index.html b/www/index.html
index ce6d81c..ad0fb2e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -91,6 +91,19 @@
                         <input type="checkbox" name="dump" data-key />
                         <span data-i18n="dump-traffic">Dump Traffic</span>
                     </label> -->
+                    <label data-i18n="text-font">Text font</label>
+                    <select id="text-font">
+                        <option value="Serif">Serif</option>
+                        <option value="Sans-serif" selected>Sans-serif</option>
+                        <option value="monospace">Monospace</option>
+                        <option value="cursive">Cursive</option>
+                    </select>
+                    <br>
+                    <label>
+                        <span data-i18n="text-size-">Text size:</span>
+                        <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
+                        <span>px</span>
+                    </label>
                     <button id="set-accessibility" data-key>
                         <span>🌎</span>
                         <span data-i18n="accessibility">Accessibility</span>
diff --git a/www/main.js b/www/main.js
index bdff35b..c589b96 100644
--- a/www/main.js
+++ b/www/main.js
@@ -439,31 +439,46 @@ class CanvasController {
         }
     }
     insertText() {
-        let text = prompt("Enter text");
-        let lines = [];
+        
+        const textSize = parseInt(document.getElementById("text-size").value);
+        const textFont = document.getElementById("text-font").value;
+        const yStep = textSize;
+        
+        const ctx = this.canvas.getContext("2d");
+        ctx.font = textSize + "px " + textFont;
+        // const textWidth = ctx.measureText(textSize);
+        const maxWidth = this.canvas.width - 10;
 
+        
+        let text = prompt("Enter text");
+        if (text == null) { return; }
+        
         // Use Word Wrap to split the text over multiple lines
+        let lines = [];
+        const getMaxCharsPerLine = (text, ctx) => {
+            let textWidth = ctx.measureText(text).width;
+            let textIndex = maxWidth / textWidth;
+
+            if (textIndex > 1) { return text.length}
+            return Math.floor(textIndex * text.length); 
+        }
         const wrapText = (text, maxLength) => {
             let splitPos = maxLength - 1;
             while (text[splitPos] != " " && splitPos > 0) {
                 splitPos--;
             }
             if (splitPos == 0) { splitPos = maxLength; }
-            return [text.slice(0, splitPos), text.slice(splitPos, text.length)];
+            return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
         }
 
-        const maxLength = 33;
-        while (text.length > maxLength) {
+        while (ctx.measureText(text).width > maxWidth) {
             let line;
-            [line, text] = wrapText(text, maxLength);
+            [line, text] = wrapText(text, getMaxCharsPerLine(text, ctx));
             lines.push(line);
         }
         lines.push(text)
 
-        let ctx = this.canvas.getContext("2d");
-        ctx.font = "20px Sans-Serif";
 
-        const yStep = 20;
         let yPos = yStep;
         for (let line of lines) {
             ctx.fillText(line, 0, yPos); 

From 7afe68c151dc4d4680e006c7d9c4a8d2e0b9b696 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 12:12:11 +0200
Subject: [PATCH 03/24] + Added comments to getMaxCharsPerLine and wrapText +
 Added German and English strings for text-size and text-font

---
 www/lang/de-DE.json | 2 ++
 www/lang/en-US.json | 2 ++
 www/main.js         | 9 ++++++---
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index b7f14eb..2e9862d 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -43,6 +43,8 @@
     "coming-soon": "Demnächst verfügbar…",
     "dry-run": "Testlauf",
     "dry-run-test-print-process-only": "Testlauf: nur Probedruckvorgang",
+    "text-font": "Schriftart",
+    "text-size": "Textgröße",
     "you-can-close-this-page-manually": "Sie können diese Seite manuell schließen",
     "please-enable-bluetooth": "Bitte aktivieren Sie Bluetooth",
     "error-happened-please-check-error-message": "Fehler aufgetreten, bitte Fehlermeldung einsehen",
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 88cac2a..2d50641 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -42,6 +42,8 @@
     "coming-soon": "Coming Soon…",
     "dry-run": "Dry Run",
     "dry-run-test-print-process-only": "Dry Run: test print process only",
+    "text-font": "Font",
+    "text-size": "Text size",
     "you-can-close-this-page-manually": "You can close this page manually",
     "please-enable-bluetooth": "Please enable Bluetooth",
     "error-happened-please-check-error-message": "Error happened, please check error message",
diff --git a/www/main.js b/www/main.js
index c589b96..c6c41e3 100644
--- a/www/main.js
+++ b/www/main.js
@@ -455,13 +455,17 @@ class CanvasController {
         
         // Use Word Wrap to split the text over multiple lines
         let lines = [];
-        const getMaxCharsPerLine = (text, ctx) => {
+        // Calculate the aproximate maximum length of a string
+        // taking font and text size in account
+        const getMaxCharsPerLine = (text, ctx) => { 
             let textWidth = ctx.measureText(text).width;
             let textIndex = maxWidth / textWidth;
 
             if (textIndex > 1) { return text.length}
             return Math.floor(textIndex * text.length); 
         }
+
+        // Wrap the text if it does not fit on a single line
         const wrapText = (text, maxLength) => {
             let splitPos = maxLength - 1;
             while (text[splitPos] != " " && splitPos > 0) {
@@ -470,7 +474,7 @@ class CanvasController {
             if (splitPos == 0) { splitPos = maxLength; }
             return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
         }
-
+        
         while (ctx.measureText(text).width > maxWidth) {
             let line;
             [line, text] = wrapText(text, getMaxCharsPerLine(text, ctx));
@@ -478,7 +482,6 @@ class CanvasController {
         }
         lines.push(text)
 
-
         let yPos = yStep;
         for (let line of lines) {
             ctx.fillText(line, 0, yPos); 

From bb4223f44acb1fda9180415336135c407fac38ea Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 12:34:02 +0200
Subject: [PATCH 04/24] + Adjust canvas size to the size of the entered text +
 Set algorithm to "Text" after entering text

---
 www/main.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/www/main.js b/www/main.js
index c6c41e3..f8cc6f2 100644
--- a/www/main.js
+++ b/www/main.js
@@ -445,10 +445,10 @@ class CanvasController {
         const yStep = textSize;
         
         const ctx = this.canvas.getContext("2d");
-        ctx.font = textSize + "px " + textFont;
+        let canvasFont = textSize + "px " + textFont;
         // const textWidth = ctx.measureText(textSize);
         const maxWidth = this.canvas.width - 10;
-
+        
         
         let text = prompt("Enter text");
         if (text == null) { return; }
@@ -460,11 +460,11 @@ class CanvasController {
         const getMaxCharsPerLine = (text, ctx) => { 
             let textWidth = ctx.measureText(text).width;
             let textIndex = maxWidth / textWidth;
-
+            
             if (textIndex > 1) { return text.length}
             return Math.floor(textIndex * text.length); 
         }
-
+        
         // Wrap the text if it does not fit on a single line
         const wrapText = (text, maxLength) => {
             let splitPos = maxLength - 1;
@@ -475,26 +475,32 @@ class CanvasController {
             return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
         }
         
+        ctx.font = canvasFont;
         while (ctx.measureText(text).width > maxWidth) {
             let line;
             [line, text] = wrapText(text, getMaxCharsPerLine(text, ctx));
             lines.push(line);
         }
-        lines.push(text)
+        lines.push(text);
+        this.height = (lines.length * yStep) + (yStep / 2);
+        ctx.font = canvasFont; // Setting this.height resets the font.
 
         let yPos = yStep;
         for (let line of lines) {
             ctx.fillText(line, 0, yPos); 
             yPos += yStep;
         }
+
         this.crop();
+
+        this.useAlgorithm("algo-direct");
+        document.getElementsByName("algo")[0].checked = true;
         
         this.imageUrl = this.canvas.toDataURL();
         this.activatePreview();
         
         this.controls.classList.add('hidden');
-        this.preview.hidden = true;
-        
+
         hint('#button-print');
         return true;
     }

From ccef4062fd6d43c828d002ce774ddcb040bcb7fb Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 12:45:51 +0200
Subject: [PATCH 05/24] * Replaced getElementsByName call with querySelector

---
 www/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/www/main.js b/www/main.js
index f8cc6f2..54cc91e 100644
--- a/www/main.js
+++ b/www/main.js
@@ -494,7 +494,8 @@ class CanvasController {
         this.crop();
 
         this.useAlgorithm("algo-direct");
-        document.getElementsByName("algo")[0].checked = true;
+        let textAlgo = document.querySelector('input[name="algo"][value="algo-direct"]');
+        textAlgo.checked = true;
         
         this.imageUrl = this.canvas.toDataURL();
         this.activatePreview();

From 17d4678f758de40dfeda60d5a626e08fbc07a265 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 13:10:21 +0200
Subject: [PATCH 06/24] * Fix: hang when inserting text with characters which
 do not fit into the canvas

---
 www/main.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/www/main.js b/www/main.js
index 54cc91e..7ca2151 100644
--- a/www/main.js
+++ b/www/main.js
@@ -478,7 +478,13 @@ class CanvasController {
         ctx.font = canvasFont;
         while (ctx.measureText(text).width > maxWidth) {
             let line;
-            [line, text] = wrapText(text, getMaxCharsPerLine(text, ctx));
+            let maxChars = getMaxCharsPerLine(text, ctx);
+            if (maxChars == 0) { 
+                lines.push(text.slice(0, 1));
+                text = text.slice(1, text.length);
+                continue;
+            }
+            [line, text] = wrapText(text, maxChars);
             lines.push(line);
         }
         lines.push(text);

From 049aa74e404677eb9d3b6bcb8136f46f5ada0048 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 18:44:54 +0200
Subject: [PATCH 07/24] * Moved getElementById and querySelector calls from
 insertText into the constructor * Replaced prompt with Dialog.prompt *
 Replaced loop in wrapText with string.lastIndexOf * Renamed wrapText to
 wrap_by_space * Renamed variables in insertText to match the snake_case
 convention * Moved new strings to the end of localization files

---
 www/lang/de-DE.json |  9 +++---
 www/lang/en-US.json |  9 +++---
 www/main.js         | 68 +++++++++++++++++++++------------------------
 3 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index 2e9862d..fc857b4 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -43,8 +43,6 @@
     "coming-soon": "Demnächst verfügbar…",
     "dry-run": "Testlauf",
     "dry-run-test-print-process-only": "Testlauf: nur Probedruckvorgang",
-    "text-font": "Schriftart",
-    "text-size": "Textgröße",
     "you-can-close-this-page-manually": "Sie können diese Seite manuell schließen",
     "please-enable-bluetooth": "Bitte aktivieren Sie Bluetooth",
     "error-happened-please-check-error-message": "Fehler aufgetreten, bitte Fehlermeldung einsehen",
@@ -100,10 +98,13 @@
     "everyone-is-awesome": "Jeder ist super",
     "license": "Lizenz",
     "exiting": "Exiting…",
-
+    
     "dark-theme": "Dark Theme",
     "high-contrast": "High Contrast",
     "copyright-and-license": "Copyright and License",
     "welcome": "Welcome!",
-    "some-rights-reserved": "Einige Rechte sind vorbehalten."
+    "some-rights-reserved": "Einige Rechte sind vorbehalten.",
+    "text-font": "Schriftart",
+    "text-size": "Textgröße",
+    "enter-text": "Text eingeben"
 }
\ No newline at end of file
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 2d50641..9a962a2 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -42,8 +42,6 @@
     "coming-soon": "Coming Soon…",
     "dry-run": "Dry Run",
     "dry-run-test-print-process-only": "Dry Run: test print process only",
-    "text-font": "Font",
-    "text-size": "Text size",
     "you-can-close-this-page-manually": "You can close this page manually",
     "please-enable-bluetooth": "Please enable Bluetooth",
     "error-happened-please-check-error-message": "Error happened, please check error message",
@@ -97,7 +95,7 @@
     "everyone-is-awesome": "Everyone is awesome!",
     "license": "License",
     "exiting": "Exiting…",
-
+    
     "dark-theme": "Dark Theme",
     "high-contrast": "High Contrast",
     "welcome": "Welcome!",
@@ -130,5 +128,8 @@
     "cat-face-toward": "Cat Face Toward",
     "quality-": "Quality:",
     "print-quality": "Print quality",
-    "show-more-options": "Show More Options"
+    "show-more-options": "Show More Options",
+    "text-font": "Font",
+    "text-size": "Text size",
+    "enter-text": "Enter text"
 }
\ No newline at end of file
diff --git a/www/main.js b/www/main.js
index 7ca2151..72c14f1 100644
--- a/www/main.js
+++ b/www/main.js
@@ -298,6 +298,9 @@ class CanvasController {
         this.preview = document.getElementById('preview');
         this.canvas = document.getElementById('canvas');
         this.controls = document.getElementById('control-overlay');
+        this.textSize = document.getElementById("text-size");
+        this.textFont = document.getElementById("text-font");
+        this.textAlgorithm = document.querySelector('input[name="algo"][value="algo-direct"]');
         this.height = CanvasController.defaultHeight;
         this._thresholdRange = document.querySelector('[name="threshold"]');
         this._energyRange = document.querySelector('[name="energy"]');
@@ -317,7 +320,7 @@ class CanvasController {
 
         putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
         putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
-        putEvent('#insert-text'   , 'click', () => this.insertText(), this);
+        putEvent('#insert-text'   , 'click', () => Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this);
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);
@@ -438,70 +441,63 @@ class CanvasController {
             input.click();
         }
     }
-    insertText() {
-        
-        const textSize = parseInt(document.getElementById("text-size").value);
-        const textFont = document.getElementById("text-font").value;
-        const yStep = textSize;
+    insertText(text) {
+        if (text == null) { return; }
+
+        const text_size = parseInt(this.textSize.value);
+        const text_font = this.textFont.value;
+        const y_step = text_size;
         
         const ctx = this.canvas.getContext("2d");
-        let canvasFont = textSize + "px " + textFont;
-        // const textWidth = ctx.measureText(textSize);
-        const maxWidth = this.canvas.width - 10;
-        
-        
-        let text = prompt("Enter text");
-        if (text == null) { return; }
+        let canvas_font = text_size + "px " + text_font;
+        const max_width = this.canvas.width - 10;
         
         // Use Word Wrap to split the text over multiple lines
         let lines = [];
         // Calculate the aproximate maximum length of a string
         // taking font and text size in account
-        const getMaxCharsPerLine = (text, ctx) => { 
-            let textWidth = ctx.measureText(text).width;
-            let textIndex = maxWidth / textWidth;
+        const get_max_chars_per_line = (text, ctx) => { 
+            let text_width = ctx.measureText(text).width;
+            let textIndex = max_width / text_width;
             
             if (textIndex > 1) { return text.length}
             return Math.floor(textIndex * text.length); 
         }
         
         // Wrap the text if it does not fit on a single line
-        const wrapText = (text, maxLength) => {
-            let splitPos = maxLength - 1;
-            while (text[splitPos] != " " && splitPos > 0) {
-                splitPos--;
-            }
-            if (splitPos == 0) { splitPos = maxLength; }
-            return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
+        const wrap_by_space = (text, max_length) => {
+            let split_pos = text.lastIndexOf(" ", max_length);
+
+            if (split_pos == 0) { split_pos = max_length; }
+            return [text.slice(0, split_pos).trim(), text.slice(split_pos, text.length).trim()];
         }
         
-        ctx.font = canvasFont;
-        while (ctx.measureText(text).width > maxWidth) {
+        ctx.font = canvas_font;
+        while (ctx.measureText(text).width > max_width) {
             let line;
-            let maxChars = getMaxCharsPerLine(text, ctx);
-            if (maxChars == 0) { 
+            let max_chars = get_max_chars_per_line(text, ctx);
+            if (max_chars == 0) { 
                 lines.push(text.slice(0, 1));
                 text = text.slice(1, text.length);
                 continue;
             }
-            [line, text] = wrapText(text, maxChars);
+            [line, text] = wrap_by_space(text, max_chars);
             lines.push(line);
         }
         lines.push(text);
-        this.height = (lines.length * yStep) + (yStep / 2);
-        ctx.font = canvasFont; // Setting this.height resets the font.
+        this.height = (lines.length * y_step) + (y_step / 2);
+        ctx.font = canvas_font; // Setting this.height resets the font.
 
-        let yPos = yStep;
+        let y_pos = y_step;
         for (let line of lines) {
-            ctx.fillText(line, 0, yPos); 
-            yPos += yStep;
+            ctx.fillText(line, 0, y_pos); 
+            y_pos += y_step;
         }
 
         this.crop();
 
-        this.useAlgorithm("algo-direct");
-        let textAlgo = document.querySelector('input[name="algo"][value="algo-direct"]');
-        textAlgo.checked = true;
+        this.textAlgorithm.checked = true;
+        this.textAlgorithm.dispatchEvent(new Event("change"));
         
         this.imageUrl = this.canvas.toDataURL();
         this.activatePreview();

From 47d3d2ecea3178f081789be4941eae34266e01ac Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 18 May 2022 20:31:03 +0200
Subject: [PATCH 08/24] * Fixed wrap_by_space not working correctly when given
 a word that is too long for the canvas

---
 www/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/main.js b/www/main.js
index 72c14f1..cd0d344 100644
--- a/www/main.js
+++ b/www/main.js
@@ -468,7 +468,7 @@ class CanvasController {
         const wrap_by_space = (text, max_length) => {
             let split_pos = text.lastIndexOf(" ", max_length);
 
-            if (split_pos == 0) { split_pos = max_length; }
+            if (split_pos <= 0) { split_pos = max_length; }
             return [text.slice(0, split_pos).trim(), text.slice(split_pos, text.length).trim()];
         }
         

From 8cdaa048ee729f59a812114c804432621095f57b Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Thu, 19 May 2022 21:40:35 +0200
Subject: [PATCH 09/24] * Moved text settings into the "print" tab + Added
 setting to enable or disable word wrap by space

---
 www/index.html      | 30 +++++++++++++++++-------------
 www/lang/de-DE.json |  3 ++-
 www/lang/en-US.json |  3 ++-
 www/main.js         | 11 +++++++++--
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/www/index.html b/www/index.html
index ad0fb2e..0270b02 100644
--- a/www/index.html
+++ b/www/index.html
@@ -55,6 +55,23 @@
                     <label class="label-input-span" data-hide-as="print">
                         <input type="checkbox" name="transparent-as-white" data-key checked />
                         <span data-i18n="transparent-as-white">Transparent as White</span>
+                        <br>
+                        <label data-i18n="text-font">Text font</label>
+                        <select id="text-font">
+                            <option value="Serif">Serif</option>
+                            <option value="Sans-serif" selected>Sans-serif</option>
+                            <option value="monospace">Monospace</option>
+                            <option value="cursive">Cursive</option>
+                        </select>
+                        <br>
+                        <label>
+                            <span data-i18n="text-size-">Text size:</span>
+                            <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
+                            <span>px</span>
+                        </label>
+                        <br>
+                        <input type="checkbox" name="wrap-by-space" data-key checked />
+                        <span data-i18n="wrap-by-space">Wrap text</span>
                     </label>
                     <div class="center">
                         <button data-i18n="show-more-options" data-show="print" data-once data-key>Show More Options</button>
@@ -91,19 +108,6 @@
                         <input type="checkbox" name="dump" data-key />
                         <span data-i18n="dump-traffic">Dump Traffic</span>
                     </label> -->
-                    <label data-i18n="text-font">Text font</label>
-                    <select id="text-font">
-                        <option value="Serif">Serif</option>
-                        <option value="Sans-serif" selected>Sans-serif</option>
-                        <option value="monospace">Monospace</option>
-                        <option value="cursive">Cursive</option>
-                    </select>
-                    <br>
-                    <label>
-                        <span data-i18n="text-size-">Text size:</span>
-                        <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
-                        <span>px</span>
-                    </label>
                     <button id="set-accessibility" data-key>
                         <span>🌎</span>
                         <span data-i18n="accessibility">Accessibility</span>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index fc857b4..cf04cd4 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -106,5 +106,6 @@
     "some-rights-reserved": "Einige Rechte sind vorbehalten.",
     "text-font": "Schriftart",
     "text-size": "Textgröße",
-    "enter-text": "Text eingeben"
+    "enter-text": "Text eingeben",
+    "wrap-by-space": "autom. Zeilenumbruch"
 }
\ No newline at end of file
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 9a962a2..34a737c 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -131,5 +131,6 @@
     "show-more-options": "Show More Options",
     "text-font": "Font",
     "text-size": "Text size",
-    "enter-text": "Enter text"
+    "enter-text": "Enter text",
+    "wrap-by-space": "Wrap words by spaces"
 }
\ No newline at end of file
diff --git a/www/main.js b/www/main.js
index cd0d344..9e54dcc 100644
--- a/www/main.js
+++ b/www/main.js
@@ -300,6 +300,7 @@ class CanvasController {
         this.controls = document.getElementById('control-overlay');
         this.textSize = document.getElementById("text-size");
         this.textFont = document.getElementById("text-font");
+        this.wrapBySpace = document.querySelector('input[name="wrap-by-space"]');
         this.textAlgorithm = document.querySelector('input[name="algo"][value="algo-direct"]');
         this.height = CanvasController.defaultHeight;
         this._thresholdRange = document.querySelector('[name="threshold"]');
@@ -466,9 +467,13 @@ class CanvasController {
         
         // Wrap the text if it does not fit on a single line
         const wrap_by_space = (text, max_length) => {
-            let split_pos = text.lastIndexOf(" ", max_length);
+            let split_pos = max_length;
+
+            if (this.wrapBySpace.checked) {
+                split_pos = text.lastIndexOf(" ", max_length);
+                if (split_pos <= 0) { split_pos = max_length; }
+            }
 
-            if (split_pos <= 0) { split_pos = max_length; }
             return [text.slice(0, split_pos).trim(), text.slice(split_pos, text.length).trim()];
         }
         
@@ -484,6 +489,7 @@ class CanvasController {
             [line, text] = wrap_by_space(text, max_chars);
             lines.push(line);
         }
+        
         lines.push(text);
         this.height = (lines.length * y_step) + (y_step / 2);
         ctx.font = canvas_font; // Setting this.height resets the font.
@@ -653,6 +659,7 @@ class Main {
                 (value) => this.settings['text_mode'] = (value === 'algo-direct')
             );
             this.attachSetter('[name="transparent-as-white"]', 'change', 'transparent_as_white');
+            this.attachSetter('[name="wrap-by-space"]', 'change', 'wrap_by_space');
             this.attachSetter('[name="dry-run"]', 'change', 'dry_run',
                 (checked) => checked && Notice.note('dry-run-test-print-process-only')
             );

From de2e4e518b7df93f38853f649ec04df3d0a57fd2 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Thu, 19 May 2022 23:07:24 +0200
Subject: [PATCH 10/24] + Added a text area to the "insert text" dialog * Moved
 the text settings into the "insert text" dialog

---
 www/index.html      | 46 +++++++++++++++++++++++++++------------------
 www/lang/de-DE.json |  2 +-
 www/lang/en-US.json |  2 +-
 www/main.js         | 16 ++++++++++++----
 4 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/www/index.html b/www/index.html
index 0270b02..02edf9a 100644
--- a/www/index.html
+++ b/www/index.html
@@ -55,24 +55,6 @@
                     <label class="label-input-span" data-hide-as="print">
                         <input type="checkbox" name="transparent-as-white" data-key checked />
                         <span data-i18n="transparent-as-white">Transparent as White</span>
-                        <br>
-                        <label data-i18n="text-font">Text font</label>
-                        <select id="text-font">
-                            <option value="Serif">Serif</option>
-                            <option value="Sans-serif" selected>Sans-serif</option>
-                            <option value="monospace">Monospace</option>
-                            <option value="cursive">Cursive</option>
-                        </select>
-                        <br>
-                        <label>
-                            <span data-i18n="text-size-">Text size:</span>
-                            <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
-                            <span>px</span>
-                        </label>
-                        <br>
-                        <input type="checkbox" name="wrap-by-space" data-key checked />
-                        <span data-i18n="wrap-by-space">Wrap text</span>
-                    </label>
                     <div class="center">
                         <button data-i18n="show-more-options" data-show="print" data-once data-key>Show More Options</button>
                     </div>
@@ -194,6 +176,34 @@
                 </label>
             </div>
         </div>
+        <div id="text-input">
+            <h1 data-i18n="insert-text">Insert Text</h1>
+            <span>
+                <div style="display: inline-grid;position: relative;margin: auto 0;">
+                    <textarea id="insert-text-area" style="white-space: pre; height: 50vh;"></textarea>
+                </div>
+                
+                <div style="display: inline-block;vertical-align: top;margin: auto;position: absolute; padding: 0px 0px 0px 10px;">
+                    <label data-i18n="text-font">Font</label>
+                        <select id="text-font">
+                            <option value="Serif">Serif</option>
+                            <option value="Sans-serif" selected>Sans-serif</option>
+                            <option value="monospace">Monospace</option>
+                            <option value="cursive">Cursive</option>
+                        </select>
+                        <br>
+                        <label>
+                            <span data-i18n="text-size-">Size:</span>
+                            <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
+                            <span>px</span>
+                        </label>
+                        <br>
+                        <input type="checkbox" name="wrap-by-space" data-key checked />
+                        <span data-i18n="wrap-by-space">Wrap text</span>
+                    </label>
+                </div>
+            </span>
+        </div>
         <iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe>
     </div>
     <div id="dialog" class="hidden">
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index cf04cd4..e4f772e 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -105,7 +105,7 @@
     "welcome": "Welcome!",
     "some-rights-reserved": "Einige Rechte sind vorbehalten.",
     "text-font": "Schriftart",
-    "text-size": "Textgröße",
+    "text-size": "Größe",
     "enter-text": "Text eingeben",
     "wrap-by-space": "autom. Zeilenumbruch"
 }
\ No newline at end of file
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 34a737c..8c39e0f 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -130,7 +130,7 @@
     "print-quality": "Print quality",
     "show-more-options": "Show More Options",
     "text-font": "Font",
-    "text-size": "Text size",
+    "text-size": "Size",
     "enter-text": "Enter text",
     "wrap-by-space": "Wrap words by spaces"
 }
\ No newline at end of file
diff --git a/www/main.js b/www/main.js
index 9e54dcc..b838e32 100644
--- a/www/main.js
+++ b/www/main.js
@@ -300,6 +300,7 @@ class CanvasController {
         this.controls = document.getElementById('control-overlay');
         this.textSize = document.getElementById("text-size");
         this.textFont = document.getElementById("text-font");
+        this.textArea = document.getElementById("insert-text-area");
         this.wrapBySpace = document.querySelector('input[name="wrap-by-space"]');
         this.textAlgorithm = document.querySelector('input[name="algo"][value="algo-direct"]');
         this.height = CanvasController.defaultHeight;
@@ -321,7 +322,7 @@ class CanvasController {
 
         putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
         putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
-        putEvent('#insert-text'   , 'click', () => Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this);
+        putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value))); //Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this);
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);
@@ -466,8 +467,12 @@ class CanvasController {
         }
         
         // Wrap the text if it does not fit on a single line
-        const wrap_by_space = (text, max_length) => {
+        const wrap_text = (text, max_length) => {
             let split_pos = max_length;
+            let newline_index = text.indexOf("\n");
+            if (newline_index > 0 && newline_index < max_length) {
+                return [text.slice(0, newline_index).trim(), text.slice(newline_index, text.length).trim()];
+            }
 
             if (this.wrapBySpace.checked) {
                 split_pos = text.lastIndexOf(" ", max_length);
@@ -486,11 +491,14 @@ class CanvasController {
                 text = text.slice(1, text.length);
                 continue;
             }
-            [line, text] = wrap_by_space(text, max_chars);
+            [line, text] = wrap_text(text, max_chars);
             lines.push(line);
         }
         
-        lines.push(text);
+        for (let split of text.split("\n")) {
+            lines.push(split);
+        }
+
         this.height = (lines.length * y_step) + (y_step / 2);
         ctx.font = canvas_font; // Setting this.height resets the font.
 

From e163c5739fa5bdb53253c864e7b38a2ec9ce2e1c Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Thu, 19 May 2022 23:19:16 +0200
Subject: [PATCH 11/24] * Moved style to CSS

---
 www/index.html | 6 +++---
 www/main.css   | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/www/index.html b/www/index.html
index 02edf9a..4c9d634 100644
--- a/www/index.html
+++ b/www/index.html
@@ -179,11 +179,11 @@
         <div id="text-input">
             <h1 data-i18n="insert-text">Insert Text</h1>
             <span>
-                <div style="display: inline-grid;position: relative;margin: auto 0;">
-                    <textarea id="insert-text-area" style="white-space: pre; height: 50vh;"></textarea>
+                <div id="text-textarea">
+                    <textarea id="insert-text-area"></textarea>
                 </div>
                 
-                <div style="display: inline-block;vertical-align: top;margin: auto;position: absolute; padding: 0px 0px 0px 10px;">
+                <div id="text-settings">
                     <label data-i18n="text-font">Font</label>
                         <select id="text-font">
                             <option value="Serif">Serif</option>
diff --git a/www/main.css b/www/main.css
index 2aa857a..d58e6cb 100644
--- a/www/main.css
+++ b/www/main.css
@@ -660,3 +660,12 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     font-family: 'Unifont';
     src: local('Unifont') url('unifont.ttf') url('unifont.otf');
 }
+#insert-text-area { white-space: pre; height: 50vh; }
+#text-textarea { display: inline-grid;position: relative;margin: auto 0; }
+#text-settings {
+    display: inline-block;
+    vertical-align: top;
+    margin: auto;
+    position: absolute; 
+    padding: 0px 0px 0px 10px;
+}
\ No newline at end of file

From 0608d87cf6ab8855e786cb283d490ba6c92d6e2a Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Tue, 24 May 2022 08:24:36 +0200
Subject: [PATCH 12/24] + Implemented preview of text style within the "insert
 text" dialog

---
 www/index.html      | 35 +++++++++++++----------------------
 www/lang/de-DE.json |  4 ++--
 www/main.css        | 10 +---------
 www/main.js         |  9 ++++++++-
 4 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/www/index.html b/www/index.html
index 4c9d634..c91f465 100644
--- a/www/index.html
+++ b/www/index.html
@@ -178,31 +178,22 @@
         </div>
         <div id="text-input">
             <h1 data-i18n="insert-text">Insert Text</h1>
-            <span>
+            <div style="display:flex; flex-direction: column;">
+                
+                <div id="text-settings">
+                    <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
+                        <option value="Serif">Serif</option>
+                        <option value="Sans-serif" selected>Sans-serif</option>
+                        <option value="monospace">Monospace</option>
+                        <option value="cursive">Cursive</option>
+                    </select>
+                    <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
+                    <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
+                </div>
                 <div id="text-textarea">
                     <textarea id="insert-text-area"></textarea>
                 </div>
-                
-                <div id="text-settings">
-                    <label data-i18n="text-font">Font</label>
-                        <select id="text-font">
-                            <option value="Serif">Serif</option>
-                            <option value="Sans-serif" selected>Sans-serif</option>
-                            <option value="monospace">Monospace</option>
-                            <option value="cursive">Cursive</option>
-                        </select>
-                        <br>
-                        <label>
-                            <span data-i18n="text-size-">Size:</span>
-                            <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
-                            <span>px</span>
-                        </label>
-                        <br>
-                        <input type="checkbox" name="wrap-by-space" data-key checked />
-                        <span data-i18n="wrap-by-space">Wrap text</span>
-                    </label>
-                </div>
-            </span>
+            </div>
         </div>
         <iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe>
     </div>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index e4f772e..adbebc6 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -105,7 +105,7 @@
     "welcome": "Welcome!",
     "some-rights-reserved": "Einige Rechte sind vorbehalten.",
     "text-font": "Schriftart",
-    "text-size": "Größe",
+    "text-size": "Textgröße",
     "enter-text": "Text eingeben",
-    "wrap-by-space": "autom. Zeilenumbruch"
+    "wrap-by-space": "Autom. Zeilenumbruch"
 }
\ No newline at end of file
diff --git a/www/main.css b/www/main.css
index d58e6cb..e7b8d80 100644
--- a/www/main.css
+++ b/www/main.css
@@ -660,12 +660,4 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     font-family: 'Unifont';
     src: local('Unifont') url('unifont.ttf') url('unifont.otf');
 }
-#insert-text-area { white-space: pre; height: 50vh; }
-#text-textarea { display: inline-grid;position: relative;margin: auto 0; }
-#text-settings {
-    display: inline-block;
-    vertical-align: top;
-    margin: auto;
-    position: absolute; 
-    padding: 0px 0px 0px 10px;
-}
\ No newline at end of file
+#insert-text-area { white-space: pre; height: 50vh; width: var(--paper-width); overflow: hidden auto; white-space: pre-line;}
diff --git a/www/main.js b/www/main.js
index b838e32..2dc546a 100644
--- a/www/main.js
+++ b/www/main.js
@@ -320,9 +320,16 @@ class CanvasController {
             return prevent_default(event);
         });
 
+        this.textArea.style["font-size"] = this.textSize.value + "px";
+        this.textArea.style["font-family"] = this.textFont.value;
+        this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all";
+
         putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
         putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
-        putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value))); //Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this);
+        putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
+        putEvent('#text-size'   , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px"); 
+        putEvent('#text-font'   , 'change', () => this.textArea.style["font-family"] = this.textFont.value); 
+        putEvent('input[name="wrap-by-space"]'   , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all"); //TODO: refresh on startup
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);

From 0a652350656483d17986f5ccc13a768fd6fa9e34 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Tue, 24 May 2022 08:40:46 +0200
Subject: [PATCH 13/24] * Implemented text align in canvas

---
 www/main.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/www/main.js b/www/main.js
index 2dc546a..afa6bbd 100644
--- a/www/main.js
+++ b/www/main.js
@@ -307,6 +307,7 @@ class CanvasController {
         this._thresholdRange = document.querySelector('[name="threshold"]');
         this._energyRange = document.querySelector('[name="energy"]');
         this.imageUrl = null;
+        this.textAlign = 0; // 0: Left, 1: Center, 2: Right
 
         const prevent_default = (event) => {
             event.preventDefault();
@@ -329,7 +330,7 @@ class CanvasController {
         putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
         putEvent('#text-size'   , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px"); 
         putEvent('#text-font'   , 'change', () => this.textArea.style["font-family"] = this.textFont.value); 
-        putEvent('input[name="wrap-by-space"]'   , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all"); //TODO: refresh on startup
+        putEvent('input[name="wrap-by-space"]'   , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all");
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);
@@ -511,7 +512,14 @@ class CanvasController {
 
         let y_pos = y_step;
         for (let line of lines) {
-            ctx.fillText(line, 0, y_pos); 
+            let x_pos = 0;
+            if (this.textAlign == 2) {
+                x_pos = Math.max(max_width - ctx.measureText(line).width, 0)
+            } else if (this.textAlign == 1) {
+                x_pos = Math.max(max_width - ctx.measureText(line).width, 0) / 2;
+            }
+            
+            ctx.fillText(line, x_pos, y_pos); 
             y_pos += y_step;
         }
 

From 9adf5392cf553e025ec765c8906ee0ad8f0b71f1 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 25 May 2022 09:08:41 +0200
Subject: [PATCH 14/24] * Fixed "Show more options" button missing from "Print"
 panel

---
 www/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/www/index.html b/www/index.html
index c91f465..041ce95 100644
--- a/www/index.html
+++ b/www/index.html
@@ -55,6 +55,7 @@
                     <label class="label-input-span" data-hide-as="print">
                         <input type="checkbox" name="transparent-as-white" data-key checked />
                         <span data-i18n="transparent-as-white">Transparent as White</span>
+                    </label>
                     <div class="center">
                         <button data-i18n="show-more-options" data-show="print" data-once data-key>Show More Options</button>
                     </div>

From 1cb3c795d64ccb68c182783ed1d7f92d5e70ab48 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 25 May 2022 09:23:01 +0200
Subject: [PATCH 15/24] + Added text-alignment setting

---
 www/index.html      | 6 ++++++
 www/lang/de-DE.json | 6 +++++-
 www/lang/en-US.json | 6 +++++-
 www/main.css        | 9 ++++++++-
 www/main.js         | 8 +++++---
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/www/index.html b/www/index.html
index 041ce95..c43e312 100644
--- a/www/index.html
+++ b/www/index.html
@@ -190,6 +190,12 @@
                     </select>
                     <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
                     <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
+                    <label data-i18n="text-align">Align text</label>
+                    <select id="text-align" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
+                        <option value="left" data-i18n="align-left">Left</option>
+                        <option value="center" data-i18n="align-mid">Middle</option>
+                        <option value="right" data-i18n="align-right">Right</option>
+                    </select>
                 </div>
                 <div id="text-textarea">
                     <textarea id="insert-text-area"></textarea>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index adbebc6..1ade635 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -107,5 +107,9 @@
     "text-font": "Schriftart",
     "text-size": "Textgröße",
     "enter-text": "Text eingeben",
-    "wrap-by-space": "Autom. Zeilenumbruch"
+    "wrap-by-space": "Autom. Zeilenumbruch",
+    "text-align": "Textausrichtung",
+    "align-left": "Linksbündig",
+    "align-mid": "Zentriert",
+    "align-right": "Rechtsbündig"
 }
\ No newline at end of file
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 8c39e0f..80ba3ce 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -132,5 +132,9 @@
     "text-font": "Font",
     "text-size": "Size",
     "enter-text": "Enter text",
-    "wrap-by-space": "Wrap words by spaces"
+    "wrap-by-space": "Wrap words by spaces",
+    "text-align": "Align text",
+    "align-left": "Left",
+    "align-mid": "Center",
+    "align-right": "Right"
 }
\ No newline at end of file
diff --git a/www/main.css b/www/main.css
index e7b8d80..100c7f7 100644
--- a/www/main.css
+++ b/www/main.css
@@ -660,4 +660,11 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     font-family: 'Unifont';
     src: local('Unifont') url('unifont.ttf') url('unifont.otf');
 }
-#insert-text-area { white-space: pre; height: 50vh; width: var(--paper-width); overflow: hidden auto; white-space: pre-line;}
+#insert-text-area { 
+    white-space: pre; 
+    height: 50vh; 
+    width: var(--paper-width); 
+    overflow: hidden auto; 
+    white-space: pre-line;
+    resize:none;
+}
diff --git a/www/main.js b/www/main.js
index afa6bbd..d44c459 100644
--- a/www/main.js
+++ b/www/main.js
@@ -307,7 +307,7 @@ class CanvasController {
         this._thresholdRange = document.querySelector('[name="threshold"]');
         this._energyRange = document.querySelector('[name="energy"]');
         this.imageUrl = null;
-        this.textAlign = 0; // 0: Left, 1: Center, 2: Right
+        this.textAlign = document.getElementById("text-align");
 
         const prevent_default = (event) => {
             event.preventDefault();
@@ -330,6 +330,7 @@ class CanvasController {
         putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
         putEvent('#text-size'   , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px"); 
         putEvent('#text-font'   , 'change', () => this.textArea.style["font-family"] = this.textFont.value); 
+        putEvent('#text-align'   , 'change', () => this.textArea.style["text-align"] = this.textAlign.value); 
         putEvent('input[name="wrap-by-space"]'   , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all");
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
@@ -513,9 +514,10 @@ class CanvasController {
         let y_pos = y_step;
         for (let line of lines) {
             let x_pos = 0;
-            if (this.textAlign == 2) {
+             // Text-alignment
+            if (this.textAlign.value == "right") {
                 x_pos = Math.max(max_width - ctx.measureText(line).width, 0)
-            } else if (this.textAlign == 1) {
+            } else if (this.textAlign.value == "center") {
                 x_pos = Math.max(max_width - ctx.measureText(line).width, 0) / 2;
             }
             

From 0685603832767a567407c55138bab0a426c243d8 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 25 May 2022 11:32:19 +0200
Subject: [PATCH 16/24] + Added drag & drop for text files * Fixed spaces not
 being allowed in text area

---
 www/main.css |  2 +-
 www/main.js  | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/www/main.css b/www/main.css
index 100c7f7..7116736 100644
--- a/www/main.css
+++ b/www/main.css
@@ -665,6 +665,6 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     height: 50vh; 
     width: var(--paper-width); 
     overflow: hidden auto; 
-    white-space: pre-line;
+    white-space: break-spaces;
     resize:none;
 }
diff --git a/www/main.js b/www/main.js
index d44c459..42f8fbb 100644
--- a/www/main.js
+++ b/www/main.js
@@ -317,7 +317,16 @@ class CanvasController {
         this.canvas.addEventListener('dragover', prevent_default);
         this.canvas.addEventListener('dragenter', prevent_default);
         this.canvas.addEventListener('drop', (event) => {
-            this.insertPicture(event.dataTransfer.files);
+            if (event.dataTransfer?.files[0]?.type.split("/")[0] == "text") {
+                let file_reader = new FileReader();
+                file_reader.onload = () => {
+                    this.textArea.value = file_reader.result; 
+                    Dialog.alert("#text-input", () => this.insertText(this.textArea.value));
+                };
+                file_reader.readAsText(event.dataTransfer.files[0]);
+            } else {
+                this.insertPicture(event.dataTransfer.files);
+            }
             return prevent_default(event);
         });
 
@@ -480,7 +489,7 @@ class CanvasController {
             let split_pos = max_length;
             let newline_index = text.indexOf("\n");
             if (newline_index > 0 && newline_index < max_length) {
-                return [text.slice(0, newline_index).trim(), text.slice(newline_index, text.length).trim()];
+                return [text.slice(0, newline_index), text.slice(newline_index, text.length)];
             }
 
             if (this.wrapBySpace.checked) {
@@ -488,7 +497,7 @@ class CanvasController {
                 if (split_pos <= 0) { split_pos = max_length; }
             }
 
-            return [text.slice(0, split_pos).trim(), text.slice(split_pos, text.length).trim()];
+            return [text.slice(0, split_pos), text.slice(split_pos, text.length)];
         }
         
         ctx.font = canvas_font;

From 9a4a81c78bd595ac1eb87b2200a899fe18f67efe Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 25 May 2022 11:56:37 +0200
Subject: [PATCH 17/24] + Added websafe fonts to font selection

---
 www/index.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/www/index.html b/www/index.html
index c43e312..1bf9d0d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -183,14 +183,21 @@
                 
                 <div id="text-settings">
                     <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
-                        <option value="Serif">Serif</option>
-                        <option value="Sans-serif" selected>Sans-serif</option>
-                        <option value="monospace">Monospace</option>
-                        <option value="cursive">Cursive</option>
+                        <option value="Arial">Arial (sans-serif)</option>
+                        <option value="Brush Script MT">Brush Script MT (cursive)</option>
+                        <option value="Courier New">Courier New (monospace)</option>
+                        <option value="Garamond">Garamond (serif)</option>
+                        <option value="Georgia">Georgia (serif)</option>
+                        <option value="Helvetica" selected>Helvetica (sans-serif)</option>
+                        <option value="Tahoma">Tahoma (sans-serif)</option>
+                        <option value="Times New Roman">Times New Roman (serif)</option>
+                        <option value="Trebuchet MS">Trebuchet MS (sans-serif)</option>
+                        <option value="Verdana">Verdana (sans-serif)</option>
                     </select>
                     <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
                     <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
                     <label data-i18n="text-align">Align text</label>
+                    <br>
                     <select id="text-align" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
                         <option value="left" data-i18n="align-left">Left</option>
                         <option value="center" data-i18n="align-mid">Middle</option>

From 4732469b6435b25cf041fe3885546325ab8b49b9 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 25 May 2022 12:03:22 +0200
Subject: [PATCH 18/24] - Reset hinted buttons on reset

---
 www/main.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/www/main.js b/www/main.js
index 42f8fbb..bfcdb99 100644
--- a/www/main.js
+++ b/www/main.js
@@ -554,6 +554,11 @@ class CanvasController {
         this.activatePreview();
         this.imageUrl = null;
         this.controls.classList.remove('hidden');
+        
+        // Reset hinted button
+        for (let elem of document.getElementsByClassName("hint")) {
+            elem.classList.remove("hint");
+        }
     }
     makePbm() {
         let blob = mono2pbm(this.previewData, this.preview.width, this.preview.height);

From 179aada4539df32a3d3d45e5afbff2a99dabf897 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 25 May 2022 13:26:54 +0200
Subject: [PATCH 19/24] * Replaced text alignment selector with radio buttons

---
 www/icons/text-center.svg |  3 +++
 www/icons/text-left.svg   |  3 +++
 www/icons/text-right.svg  |  3 +++
 www/index.html            | 20 +++++++++++++-------
 www/main.css              | 32 ++++++++++++++++++++++++++++++++
 www/main.js               | 11 +++++++++--
 6 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 www/icons/text-center.svg
 create mode 100644 www/icons/text-left.svg
 create mode 100644 www/icons/text-right.svg

diff --git a/www/icons/text-center.svg b/www/icons/text-center.svg
new file mode 100644
index 0000000..3aca1d3
--- /dev/null
+++ b/www/icons/text-center.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="62px" height="51px" viewBox="-0.5 -0.5 62 51"><defs/><g><rect x="0" y="0" width="60" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="10" y="20" width="40" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="20" y="40" width="20" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g></svg>
\ No newline at end of file
diff --git a/www/icons/text-left.svg b/www/icons/text-left.svg
new file mode 100644
index 0000000..6f084bc
--- /dev/null
+++ b/www/icons/text-left.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="62px" height="51px" viewBox="-0.5 -0.5 62 51"><defs/><g><rect x="0" y="0" width="60" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="0" y="20" width="40" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="0" y="40" width="20" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g></svg>
\ No newline at end of file
diff --git a/www/icons/text-right.svg b/www/icons/text-right.svg
new file mode 100644
index 0000000..fe3a704
--- /dev/null
+++ b/www/icons/text-right.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="62px" height="51px" viewBox="-0.5 -0.5 62 51"><defs/><g><rect x="0" y="0" width="60" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="20" y="20" width="40" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="40" y="40" width="20" height="10" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g></svg>
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 1bf9d0d..6f2b266 100644
--- a/www/index.html
+++ b/www/index.html
@@ -195,14 +195,20 @@
                         <option value="Verdana">Verdana (sans-serif)</option>
                     </select>
                     <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
-                    <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
-                    <label data-i18n="text-align">Align text</label>
                     <br>
-                    <select id="text-align" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
-                        <option value="left" data-i18n="align-left">Left</option>
-                        <option value="center" data-i18n="align-mid">Middle</option>
-                        <option value="right" data-i18n="align-right">Right</option>
-                    </select>
+                    <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
+                    <span class="text-align-container">
+                        <input type="radio" name="text-align" value="left"/>
+                        <span class="text-align-checkmark text-align-left"></span>
+                    </span>
+                    <span class="text-align-container">
+                        <input type="radio" name="text-align" value="center"/>
+                        <span class="text-align-checkmark text-align-center"></span>
+                    </span>
+                    <span class="text-align-container">
+                        <input type="radio" name="text-align" value="right"/>
+                        <span class="text-align-checkmark text-align-center"></span>
+                    </span>
                 </div>
                 <div id="text-textarea">
                     <textarea id="insert-text-area"></textarea>
diff --git a/www/main.css b/www/main.css
index 7116736..d14b498 100644
--- a/www/main.css
+++ b/www/main.css
@@ -668,3 +668,35 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     white-space: break-spaces;
     resize:none;
 }
+
+.text-align-container span {
+    padding: 0px;
+    margin: 0;
+    display: inline-block;
+}
+.text-align-container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 25px;
+    width: 25px;
+}
+
+.text-align-checkmark {
+    /* position: absolute; */
+    background-repeat: no-repeat;
+    background-image: url("icons/text-left.svg)");
+    background-position: center;
+    background-size: 90%;
+    width: 25px;
+    height: 25px;
+    min-width: 25px;
+    border: var(--border) solid var(--fore-color);
+    padding: var(--span-half) var(--span);
+}
+.text-align-container input:checked ~ .text-align-checkmark {
+    background-color: whitesmoke;
+  }
+.text-align-left { background-image: url("icons/text-left.svg")}
+.text-align-center { background-image: url("icons/text-center.svg")}
+.text-align-right { background-image: url("icons/text-right.svg")}
\ No newline at end of file
diff --git a/www/main.js b/www/main.js
index bfcdb99..fb6bb8c 100644
--- a/www/main.js
+++ b/www/main.js
@@ -307,7 +307,11 @@ class CanvasController {
         this._thresholdRange = document.querySelector('[name="threshold"]');
         this._energyRange = document.querySelector('[name="energy"]');
         this.imageUrl = null;
-        this.textAlign = document.getElementById("text-align");
+        this.textAlign = "left"; 
+        
+        for (let elem of document.querySelectorAll("input[name=text-align]")){
+            if (elem.checked) { this.textAlign = elem.value; }
+        }
 
         const prevent_default = (event) => {
             event.preventDefault();
@@ -339,7 +343,10 @@ class CanvasController {
         putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
         putEvent('#text-size'   , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px"); 
         putEvent('#text-font'   , 'change', () => this.textArea.style["font-family"] = this.textFont.value); 
-        putEvent('#text-align'   , 'change', () => this.textArea.style["text-align"] = this.textAlign.value); 
+        putEvent('input[name="text-align"]', 'change', (event) => {
+            this.textAlign = event.currentTarget.value
+            this.textArea.style["text-align"] = this.textAlign;
+        }, this);
         putEvent('input[name="wrap-by-space"]'   , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all");
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);

From 44df87011c80f5c7718ea3900bba0156b8e689f8 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Sat, 28 May 2022 13:22:57 +0200
Subject: [PATCH 20/24] * Improved element alignment in "Insert Text" dialog

---
 www/index.html      | 60 ++++++++++++++++++++++++---------------------
 www/lang/de-DE.json |  6 +----
 www/lang/en-US.json |  6 +----
 www/main.css        | 17 ++++++++++++-
 4 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/www/index.html b/www/index.html
index 6f2b266..ad23430 100644
--- a/www/index.html
+++ b/www/index.html
@@ -179,36 +179,40 @@
         </div>
         <div id="text-input">
             <h1 data-i18n="insert-text">Insert Text</h1>
-            <div style="display:flex; flex-direction: column;">
+            <div>
                 
                 <div id="text-settings">
-                    <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
-                        <option value="Arial">Arial (sans-serif)</option>
-                        <option value="Brush Script MT">Brush Script MT (cursive)</option>
-                        <option value="Courier New">Courier New (monospace)</option>
-                        <option value="Garamond">Garamond (serif)</option>
-                        <option value="Georgia">Georgia (serif)</option>
-                        <option value="Helvetica" selected>Helvetica (sans-serif)</option>
-                        <option value="Tahoma">Tahoma (sans-serif)</option>
-                        <option value="Times New Roman">Times New Roman (serif)</option>
-                        <option value="Trebuchet MS">Trebuchet MS (sans-serif)</option>
-                        <option value="Verdana">Verdana (sans-serif)</option>
-                    </select>
-                    <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
-                    <br>
-                    <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
-                    <span class="text-align-container">
-                        <input type="radio" name="text-align" value="left"/>
-                        <span class="text-align-checkmark text-align-left"></span>
-                    </span>
-                    <span class="text-align-container">
-                        <input type="radio" name="text-align" value="center"/>
-                        <span class="text-align-checkmark text-align-center"></span>
-                    </span>
-                    <span class="text-align-container">
-                        <input type="radio" name="text-align" value="right"/>
-                        <span class="text-align-checkmark text-align-center"></span>
-                    </span>
+                    <div name="font-and-size" class="text-settings-group">
+
+                        <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
+                            <option value="Arial">Arial (sans-serif)</option>
+                            <option value="Brush Script MT">Brush Script MT (cursive)</option>
+                            <option value="Courier New">Courier New (monospace)</option>
+                            <option value="Garamond">Garamond (serif)</option>
+                            <option value="Georgia">Georgia (serif)</option>
+                            <option value="Helvetica" selected>Helvetica (sans-serif)</option>
+                            <option value="Tahoma">Tahoma (sans-serif)</option>
+                            <option value="Times New Roman">Times New Roman (serif)</option>
+                            <option value="Trebuchet MS">Trebuchet MS (sans-serif)</option>
+                            <option value="Verdana">Verdana (sans-serif)</option>
+                        </select>
+                        <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
+                    </div>
+                    <div name="wrap-and-align" class="text-settings-group">
+                        <label data-i18n="wrap-by-space" name="wrap-by-space-label"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
+                        <span class="text-align-container">
+                            <input type="radio" name="text-align" value="left"/>
+                            <span class="text-align-checkmark text-align-left"></span>
+                        </span>
+                        <span class="text-align-container">
+                            <input type="radio" name="text-align" value="center"/>
+                            <span class="text-align-checkmark text-align-center"></span>
+                        </span>
+                        <span class="text-align-container">
+                            <input type="radio" name="text-align" value="right"/>
+                            <span class="text-align-checkmark text-align-center"></span>
+                        </span>
+                    </div>
                 </div>
                 <div id="text-textarea">
                     <textarea id="insert-text-area"></textarea>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index 1ade635..adbebc6 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -107,9 +107,5 @@
     "text-font": "Schriftart",
     "text-size": "Textgröße",
     "enter-text": "Text eingeben",
-    "wrap-by-space": "Autom. Zeilenumbruch",
-    "text-align": "Textausrichtung",
-    "align-left": "Linksbündig",
-    "align-mid": "Zentriert",
-    "align-right": "Rechtsbündig"
+    "wrap-by-space": "Autom. Zeilenumbruch"
 }
\ No newline at end of file
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 80ba3ce..8c39e0f 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -132,9 +132,5 @@
     "text-font": "Font",
     "text-size": "Size",
     "enter-text": "Enter text",
-    "wrap-by-space": "Wrap words by spaces",
-    "text-align": "Align text",
-    "align-left": "Left",
-    "align-mid": "Center",
-    "align-right": "Right"
+    "wrap-by-space": "Wrap words by spaces"
 }
\ No newline at end of file
diff --git a/www/main.css b/www/main.css
index d14b498..1c3843d 100644
--- a/www/main.css
+++ b/www/main.css
@@ -699,4 +699,19 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
   }
 .text-align-left { background-image: url("icons/text-left.svg")}
 .text-align-center { background-image: url("icons/text-center.svg")}
-.text-align-right { background-image: url("icons/text-right.svg")}
\ No newline at end of file
+.text-align-right { background-image: url("icons/text-right.svg")}
+
+input[name="wrap-by-space"] { margin-right: 5px; }
+#text-settings {
+    display: flex;
+    flex-direction: column;
+}
+.text-settings-group {
+    margin-top: 1rem;
+}
+.text-settings-group[name="wrap-and-align"] {
+    display: flex;
+    justify-content: center;
+}
+label[name="wrap-by-space-label"] { padding-right: 2%; }
+#text-font { height: 100%; }
\ No newline at end of file

From c72658e241853aa1e352cf6694836f87e04fca9c Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Sat, 28 May 2022 13:35:19 +0200
Subject: [PATCH 21/24] * Fixed text clipping out of the text box when
 increasing the font size * Centered "text-font" and "text-size" inputs *
 Fixed missing "checked" attribute for the default text alignment option

---
 www/index.html | 4 ++--
 www/main.css   | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/www/index.html b/www/index.html
index ad23430..e9dec27 100644
--- a/www/index.html
+++ b/www/index.html
@@ -184,7 +184,7 @@
                 <div id="text-settings">
                     <div name="font-and-size" class="text-settings-group">
 
-                        <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
+                        <select id="text-font">
                             <option value="Arial">Arial (sans-serif)</option>
                             <option value="Brush Script MT">Brush Script MT (cursive)</option>
                             <option value="Courier New">Courier New (monospace)</option>
@@ -201,7 +201,7 @@
                     <div name="wrap-and-align" class="text-settings-group">
                         <label data-i18n="wrap-by-space" name="wrap-by-space-label"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
                         <span class="text-align-container">
-                            <input type="radio" name="text-align" value="left"/>
+                            <input type="radio" name="text-align" value="left" checked/>
                             <span class="text-align-checkmark text-align-left"></span>
                         </span>
                         <span class="text-align-container">
diff --git a/www/main.css b/www/main.css
index 1c3843d..2614b8c 100644
--- a/www/main.css
+++ b/www/main.css
@@ -667,6 +667,7 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     overflow: hidden auto; 
     white-space: break-spaces;
     resize:none;
+    padding-top: .65ex;
 }
 
 .text-align-container span {
@@ -714,4 +715,4 @@ input[name="wrap-by-space"] { margin-right: 5px; }
     justify-content: center;
 }
 label[name="wrap-by-space-label"] { padding-right: 2%; }
-#text-font { height: 100%; }
\ No newline at end of file
+#text-font { height: 100%; margin: 0px; }
\ No newline at end of file

From 4cf1376858876b83214bbba906f0391401544dc8 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 1 Jun 2022 11:37:17 +0200
Subject: [PATCH 22/24] * Fixed incorrect icon for aligning text to the right

---
 www/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/index.html b/www/index.html
index e9dec27..684a30d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -210,7 +210,7 @@
                         </span>
                         <span class="text-align-container">
                             <input type="radio" name="text-align" value="right"/>
-                            <span class="text-align-checkmark text-align-center"></span>
+                            <span class="text-align-checkmark text-align-right"></span>
                         </span>
                     </div>
                 </div>

From 5f883908535115008cdc4ac516faa4f263439a38 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 1 Jun 2022 12:34:15 +0200
Subject: [PATCH 23/24] * Adjusted line-height of textarea to better reflect
 the look of the end result

---
 www/main.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/www/main.css b/www/main.css
index 2614b8c..2cc5583 100644
--- a/www/main.css
+++ b/www/main.css
@@ -668,6 +668,7 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     white-space: break-spaces;
     resize:none;
     padding-top: .65ex;
+    line-height: 1.25;
 }
 
 .text-align-container span {

From 47ace549c6dfbab980a873a342d0f99bffec7695 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Wed, 1 Jun 2022 12:38:35 +0200
Subject: [PATCH 24/24] * Do not insert text if textarea is empty

---
 www/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/main.js b/www/main.js
index fb6bb8c..9e87b1e 100644
--- a/www/main.js
+++ b/www/main.js
@@ -469,7 +469,7 @@ class CanvasController {
         }
     }
     insertText(text) {
-        if (text == null) { return; }
+        if (text == null || text.trim() == "") { return; }
 
         const text_size = parseInt(this.textSize.value);
         const text_font = this.textFont.value;