feat: letter-spacing - update style files

This commit is contained in:
Azgaar 2024-09-01 14:07:18 +02:00
parent dbe6ef1854
commit 2fea87344b
15 changed files with 81 additions and 15 deletions

View file

@ -1182,10 +1182,10 @@
</tbody> </tbody>
<tbody id="styleLetterSpacing"> <tbody id="styleLetterSpacing">
<tr data-tip="Set letter spacing size"> <tr data-tip="Set letter spacing">
<td>Letter spacing</td> <td>Letter spacing</td>
<td> <td>
<slider-input id="styleLetterSpacingInput" min="0" max="80"></slider-input> <slider-input id="styleLetterSpacingInput" min="0" max="20" step=".01"></slider-input>
</td> </td>
</tr> </tr>
</tbody> </tbody>

View file

@ -271,7 +271,15 @@ function addStylePreset() {
"data-columns" "data-columns"
], ],
"#legendBox": ["fill", "fill-opacity"], "#legendBox": ["fill", "fill-opacity"],
"#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], "#burgLabels > #cities": [
"opacity",
"fill",
"text-shadow",
"letter-spacing",
"data-size",
"font-size",
"font-family"
],
"#burgIcons > #cities": [ "#burgIcons > #cities": [
"opacity", "opacity",
"fill", "fill",
@ -283,7 +291,15 @@ function addStylePreset() {
"stroke-linecap" "stroke-linecap"
], ],
"#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"], "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"],
"#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"], "#burgLabels > #towns": [
"opacity",
"fill",
"text-shadow",
"letter-spacing",
"data-size",
"font-size",
"font-family"
],
"#burgIcons > #towns": [ "#burgIcons > #towns": [
"opacity", "opacity",
"fill", "fill",
@ -301,6 +317,7 @@ function addStylePreset() {
"stroke", "stroke",
"stroke-width", "stroke-width",
"text-shadow", "text-shadow",
"letter-spacing",
"data-size", "data-size",
"font-size", "font-size",
"font-family", "font-family",
@ -312,6 +329,7 @@ function addStylePreset() {
"stroke", "stroke",
"stroke-width", "stroke-width",
"text-shadow", "text-shadow",
"letter-spacing",
"data-size", "data-size",
"font-size", "font-size",
"font-family", "font-family",

View file

@ -247,7 +247,7 @@ function selectStyleElement() {
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b"; styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
styleStrokeWidthInput.value = el.attr("stroke-width") || 0; styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
styleLetterSpacingInput.value = el.attr("letter-spacing")+"px" || "0px"; styleLetterSpacingInput.value = el.attr("letter-spacing") || 0;
styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px"; styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
styleFont.style.display = "block"; styleFont.style.display = "block";
@ -436,7 +436,6 @@ styleStrokeWidthInput.addEventListener("input", e => {
styleLetterSpacingInput.addEventListener("input", e => { styleLetterSpacingInput.addEventListener("input", e => {
getEl().attr("letter-spacing", e.target.value); getEl().attr("letter-spacing", e.target.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
}); });
styleStrokeDasharrayInput.addEventListener("input", function () { styleStrokeDasharrayInput.addEventListener("input", function () {

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 12, "data-size": 12,
"font-size": 12, "font-size": 12,
"font-family": "Great Vibes" "font-family": "Great Vibes"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Great Vibes" "font-family": "Great Vibes"
@ -384,6 +386,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 22, "data-size": 22,
"font-size": 22, "font-size": 22,
"font-family": "Great Vibes", "font-family": "Great Vibes",
@ -395,6 +398,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Times New Roman", "font-family": "Times New Roman",

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Amarante" "font-family": "Amarante"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Amarante" "font-family": "Amarante"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 21, "data-size": 21,
"font-size": 21, "font-size": 21,
"font-family": "Amarante", "font-family": "Amarante",
@ -395,6 +398,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Amarante", "font-family": "Amarante",

View file

@ -319,22 +319,22 @@
"mask": "url(#land)" "mask": "url(#land)"
}, },
"#legend": { "#legend": {
"data-size": 12.74, "data-size": 12,
"font-size": 12.74, "font-size": 12,
"font-family": "Arial", "font-family": "Arial",
"stroke": "#909090", "stroke": "#909090",
"stroke-width": 1.13, "stroke-width": 1,
"stroke-dasharray": 0, "stroke-dasharray": 0,
"stroke-linecap": "round", "stroke-linecap": "round",
"data-x": 98.39, "data-x": 99,
"data-y": 12.67, "data-y": 93,
"data-columns": null "data-columns": 8
}, },
"#legendBox": {},
"#burgLabels > #cities": { "#burgLabels > #cities": {
"opacity": 1, "opacity": 1,
"fill": "#414141", "fill": "#414141",
"text-shadow": "white 0 0 4px", "text-shadow": "white 0 0 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Arial" "font-family": "Arial"
@ -359,6 +359,8 @@
"#burgLabels > #towns": { "#burgLabels > #towns": {
"opacity": 1, "opacity": 1,
"fill": "#414141", "fill": "#414141",
"text-shadow": "none",
"letter-spacing": 0,
"data-size": 3, "data-size": 3,
"font-size": 3, "font-size": 3,
"font-family": "Arial" "font-family": "Arial"
@ -386,6 +388,7 @@
"stroke": "#303030", "stroke": "#303030",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 2px", "text-shadow": "white 0 0 2px",
"letter-spacing": 0,
"data-size": 10, "data-size": 10,
"font-size": 10, "font-size": 10,
"font-family": "Arial", "font-family": "Arial",
@ -397,6 +400,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 4px", "text-shadow": "white 0 0 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Arial", "font-family": "Arial",

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#ffffff", "fill": "#ffffff",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "Orbitron" "font-family": "Orbitron"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#ffffff", "fill": "#ffffff",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 3, "data-size": 3,
"font-size": 3, "font-size": 3,
"font-family": "Orbitron" "font-family": "Orbitron"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Orbitron", "font-family": "Orbitron",
@ -395,6 +398,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Almendra SC", "font-family": "Almendra SC",

View file

@ -321,6 +321,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Lugrasimo" "font-family": "Lugrasimo"
@ -345,6 +346,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Lugrasimo" "font-family": "Lugrasimo"
@ -371,6 +373,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 21, "data-size": 21,
"font-size": 21, "font-size": 21,
"font-family": "Eagle Lake", "font-family": "Eagle Lake",
@ -382,6 +385,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Eagle Lake", "font-family": "Eagle Lake",

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Almendra SC" "font-family": "Almendra SC"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Almendra SC" "font-family": "Almendra SC"
@ -384,6 +386,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 22, "data-size": 22,
"font-size": 22, "font-size": 22,
"font-family": "Almendra SC", "font-family": "Almendra SC",
@ -395,6 +398,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Almendra SC", "font-family": "Almendra SC",

View file

@ -335,6 +335,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0 0 2px", "text-shadow": "white 0 0 2px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "Underdog" "font-family": "Underdog"
@ -359,6 +360,8 @@
"#burgLabels > #towns": { "#burgLabels > #towns": {
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "none",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Underdog" "font-family": "Underdog"
@ -386,6 +389,7 @@
"stroke": "#b5b5b5", "stroke": "#b5b5b5",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 2px", "text-shadow": "white 0 0 2px",
"letter-spacing": 0,
"data-size": 20, "data-size": 20,
"font-size": 20, "font-size": 20,
"font-family": "Underdog", "font-family": "Underdog",
@ -397,6 +401,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 4px", "text-shadow": "white 0 0 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Underdog", "font-family": "Underdog",

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3a3a3a", "fill": "#3a3a3a",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "IM Fell English" "font-family": "IM Fell English"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "IM Fell English" "font-family": "IM Fell English"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0.3, "stroke-width": 0.3,
"text-shadow": "white 0px 0px 6px", "text-shadow": "white 0px 0px 6px",
"letter-spacing": 0,
"data-size": 14, "data-size": 14,
"font-size": 14, "font-size": 14,
"font-family": "IM Fell English", "font-family": "IM Fell English",
@ -395,6 +398,7 @@
"stroke": "#701b05", "stroke": "#701b05",
"stroke-width": 0.1, "stroke-width": 0.1,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 6, "data-size": 6,
"font-size": 6, "font-size": 6,
"font-family": "IM Fell English", "font-family": "IM Fell English",

View file

@ -328,6 +328,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Courier New" "font-family": "Courier New"
@ -353,6 +354,7 @@
"opacity": 1, "opacity": 1,
"fill": "#000000", "fill": "#000000",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Courier New" "font-family": "Courier New"
@ -380,6 +382,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Courier New", "font-family": "Courier New",
@ -390,7 +393,8 @@
"fill": "#3e3e4b", "fill": "#3e3e4b",
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0 0 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Courier New", "font-family": "Courier New",

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#dbdbe1", "fill": "#dbdbe1",
"text-shadow": "black 0px 0px 4px", "text-shadow": "black 0px 0px 4px",
"letter-spacing": 0,
"data-size": 8, "data-size": 8,
"font-size": 8, "font-size": 8,
"font-family": "Courier New" "font-family": "Courier New"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#ffffff", "fill": "#ffffff",
"text-shadow": "black 0px 0px 4px", "text-shadow": "black 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4.28, "data-size": 4.28,
"font-size": 4.28, "font-size": 4.28,
"font-family": "Courier New" "font-family": "Courier New"
@ -384,6 +386,7 @@
"stroke": "#7a83ae", "stroke": "#7a83ae",
"stroke-width": 0.3, "stroke-width": 0.3,
"text-shadow": "black 0px 0px 0.1px", "text-shadow": "black 0px 0px 0.1px",
"letter-spacing": 0,
"data-size": 14, "data-size": 14,
"font-size": 14, "font-size": 14,
"font-family": "Courier New", "font-family": "Courier New",
@ -394,7 +397,8 @@
"fill": "#3e3e4b", "fill": "#3e3e4b",
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "black 0px 0px 4px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Almendra SC", "font-family": "Almendra SC",

View file

@ -332,6 +332,7 @@
"opacity": 0.8, "opacity": 0.8,
"fill": "#3a3a3a", "fill": "#3a3a3a",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 7, "data-size": 7,
"font-size": 7, "font-size": 7,
"font-family": "Arima Madurai" "font-family": "Arima Madurai"
@ -357,6 +358,7 @@
"opacity": 0.8, "opacity": 0.8,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 4, "data-size": 4,
"font-size": 4, "font-size": 4,
"font-family": "Arima Madurai" "font-family": "Arima Madurai"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 6px", "text-shadow": "white 0px 0px 6px",
"letter-spacing": 0,
"data-size": 14, "data-size": 14,
"font-size": 14, "font-size": 14,
"font-family": "Arima Madurai", "font-family": "Arima Madurai",
@ -395,6 +398,7 @@
"stroke": "#701b05", "stroke": "#701b05",
"stroke-width": 0.1, "stroke-width": 0.1,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 6, "data-size": 6,
"font-size": 6, "font-size": 6,
"font-family": "Arima Madurai", "font-family": "Arima Madurai",

View file

@ -332,6 +332,7 @@
"opacity": 1, "opacity": 1,
"fill": "#043449", "fill": "#043449",
"text-shadow": "white 0px 0px 2px", "text-shadow": "white 0px 0px 2px",
"letter-spacing": 0,
"data-size": 5, "data-size": 5,
"font-size": 5, "font-size": 5,
"font-family": "Comfortaa" "font-family": "Comfortaa"
@ -357,6 +358,7 @@
"opacity": 1, "opacity": 1,
"fill": "#3e3e4b", "fill": "#3e3e4b",
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 3, "data-size": 3,
"font-size": 3, "font-size": 3,
"font-family": "Comfortaa" "font-family": "Comfortaa"
@ -384,6 +386,7 @@
"stroke": "#000000", "stroke": "#000000",
"stroke-width": 0.15, "stroke-width": 0.15,
"text-shadow": "black 1px 1px 3px", "text-shadow": "black 1px 1px 3px",
"letter-spacing": 0,
"data-size": 18, "data-size": 18,
"font-size": 18, "font-size": 18,
"font-family": "Gloria Hallelujah", "font-family": "Gloria Hallelujah",
@ -395,6 +398,7 @@
"stroke": "#3a3a3a", "stroke": "#3a3a3a",
"stroke-width": 0, "stroke-width": 0,
"text-shadow": "white 0px 0px 4px", "text-shadow": "white 0px 0px 4px",
"letter-spacing": 0,
"data-size": 16, "data-size": 16,
"font-size": 16, "font-size": 16,
"font-family": "Comfortaa", "font-family": "Comfortaa",