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

* Moved getElementById and querySelector calls from insertText into the constructor

Browse Source 
* 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
This commit is contained in:
Sync1211 2022-05-18 18:44:54 +02:00
parent 17d4678f75
commit 049aa74e40
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
3 changed files with 42 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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",
@ -105,5 +103,8 @@
"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"
}

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

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

66
www/main.js
View File

@ -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() {
insertText(text) {
if (text == null) { return; }
const textSize = parseInt(document.getElementById("text-size").value);
const textFont = document.getElementById("text-font").value;
const yStep = textSize;
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();