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] * 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')
             );