backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-02-05 01:51:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added the option to set letter-spacing size to individual labels.

Browse source
This commit is contained in:
Oriolowsky 2024-08-31 23:39:10 +02:00
parent e77202a08a
commit 0ec5c5638f
2 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -2678,6 +2678,19 @@
/>
</div>
<button id="labelLetterSpacingShow" data-tip="Show the letter spacing section" class="icon-text-width"></button>
<div id="labelLetterSpacingSection" style="display: none">
<button id="labelLetterSpacingHide" data-tip="Hide the letter spacing section" class="icon-text-width"></button>
<input
id="labelLetterSpacingSize"
data-tip="Set the letter spacing size for the particular label"
type="range"
min="0"
max="80"
style="width: 8em"
/>
</div>
<button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
<button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
<button

22
modules/ui/labels-editor.js
View file

@ -45,6 +45,10 @@ function editLabel() {
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
document.getElementById("labelLetterSpacingShow").addEventListener("click", showLetterSpacingSection);
document.getElementById("labelLetterSpacingHide").addEventListener("click", hideLetterSpacingSection);
document.getElementById("labelLetterSpacingSize").addEventListener("input", changeLetterSpacingSize);
document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
@ -83,6 +87,8 @@ function editLabel() {
.join("|");
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
let letterSpacingSize = (textPath.getAttribute("letter-spacing")) ? textPath.getAttribute("letter-spacing") : 0;
document.getElementById("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
}
function drawControlPointsAndLine() {
@ -342,6 +348,16 @@ function editLabel() {
document.getElementById("labelSizeSection").style.display = "none";
}
function showLetterSpacingSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelLetterSpacingSection").style.display = "inline-block";
}
function hideLetterSpacingSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelLetterSpacingSection").style.display = "none";
}
function changeStartOffset() {
elSelected.select("textPath").attr("startOffset", this.value + "%");
tip("Label offset: " + this.value + "%");
@ -353,6 +369,12 @@ function editLabel() {
changeText();
}
function changeLetterSpacingSize() {
elSelected.select("textPath").attr("letter-spacing", this.value + "px");
tip("Label letter-spacing size: " + this.value + "px");
changeText();
}
function editLabelAlign() {
const bbox = elSelected.node().getBBox();
const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];