+ Added text-alignment setting

This commit is contained in:
Sync1211 2022-05-25 09:23:01 +02:00
parent 9adf5392cf
commit 1cb3c795d6
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
5 changed files with 29 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

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