v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-19 08:40:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

+ Added a text area to the "insert text" dialog

Browse Source 
* Moved the text settings into the "insert text" dialog
This commit is contained in:
Sync1211 2022-05-19 23:07:24 +02:00
parent 8cdaa048ee
commit de2e4e518b
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
4 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
www/index.html
View File

@ -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">

2
www/lang/de-DE.json
View File

@ -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"
}

2
www/lang/en-US.json
View File

@ -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"
}

16
www/main.js
View File

@ -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.