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] + 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.