mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Fonts refactoring and Add Font dialog (#660)
* fonts rework - start * fonts rework - continue * fonts rework - fetch google font * fonts rework - issue fixes * fonts rework - add fonts to downloaded image * fonts rework - add methods dialog * fonts rework - add methods description * fonts update - move version to 1.661 * fonts - remove unused file
This commit is contained in:
Azgaar
GitHub
parent
50dc5e3465
commit
fe330ede3a
10 changed files with 394 additions and 415 deletions
175
fonts.css
175
fonts.css
|
|
@ -1,175 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'Amatic SC';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: local('Amatic SC Bold'), local('AmaticSC-Bold'), url(https://fonts.gstatic.com/s/amaticsc/v11/TUZ3zwprpvBS1izr_vOMscGKfrUC.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Architects Daughter';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Architects Daughter Regular'), local('ArchitectsDaughter-Regular'), url(https://fonts.gstatic.com/s/architectsdaughter/v8/RXTgOOQ9AAtaVOHxx0IUBM3t7GjCYufj5TXV5VnA2p8.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Bitter';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Bitter Regular'), local('Bitter-Regular'), url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Caesar Dressing';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Caesar Dressing'), local('CaesarDressing-Regular'), url(https://fonts.gstatic.com/s/caesardressing/v6/yYLx0hLa3vawqtwdswbotmK4vrRHdrz7.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Cinzel';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Comfortaa';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: local('Comfortaa Bold'), local('Comfortaa-Bold'), url(https://fonts.gstatic.com/s/comfortaa/v12/fND5XPYKrF2tQDwwfWZJI-gdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Dancing Script';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: local('Dancing Script Bold'), local('DancingScript-Bold'), url(https://fonts.gstatic.com/s/dancingscript/v9/KGBfwabt0ZRLA5W1ywjowUHdOuSHeh0r6jGTOGdAKHA.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fredericka the Great';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Fredericka the Great'), local('FrederickatheGreat'), url(https://fonts.gstatic.com/s/frederickathegreat/v6/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV--Sjxbc.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Gloria Hallelujah';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(https://fonts.gstatic.com/s/gloriahallelujah/v9/CA1k7SlXcY5kvI81M_R28cNDay8z-hHR7F16xrcXsJw.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Great Vibes';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Great Vibes'), local('GreatVibes-Regular'), url(https://fonts.gstatic.com/s/greatvibes/v5/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'IM Fell English';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('IM FELL English Roman'), local('IM_FELL_English_Roman'), url(https://fonts.gstatic.com/s/imfellenglish/v7/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Kaushan Script';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'MedievalSharp';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('MedievalSharp'), url(https://fonts.gstatic.com/s/medievalsharp/v9/EvOJzAlL3oU5AQl2mP5KdgptMqhwMg.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Metamorphous';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Metamorphous'), url(https://fonts.gstatic.com/s/metamorphous/v7/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Montez';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Montez Regular'), local('Montez-Regular'), url(https://fonts.gstatic.com/s/montez/v8/aq8el3-0osHIcFK6bXAPkw.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Nova Script';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Nova Script Regular'), local('NovaScript-Regular'), url(https://fonts.gstatic.com/s/novascript/v10/7Au7p_IpkSWSTWaFWkumvlQKGFw.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Orbitron';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v9/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Satisfy';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Satisfy Regular'), local('Satisfy-Regular'), url(https://fonts.gstatic.com/s/satisfy/v8/2OzALGYfHwQjkPYWELy-cw.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Shadows Into Light';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Shadows Into Light'), local('ShadowsIntoLight'), url(https://fonts.gstatic.com/s/shadowsintolight/v7/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Uncial Antiqua';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Uncial Antiqua'), local('UncialAntiqua-Regular'), url(https://fonts.gstatic.com/s/uncialantiqua/v5/N0bM2S5WOex4OUbESzoESK-i-MfWQZQ.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Underdog';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Underdog'), local('Underdog-Regular'), url(https://fonts.gstatic.com/s/underdog/v6/CHygV-jCElj7diMroWSlWV8.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Yellowtail';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Yellowtail Regular'), local('Yellowtail-Regular'), url(https://fonts.gstatic.com/s/yellowtail/v8/GcIHC9QEwVkrA19LJU1qlPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
|
||||||
}
|
|
||||||
41
index.css
41
index.css
File diff suppressed because one or more lines are too long
19
index.html
19
index.html
|
|
@ -666,8 +666,7 @@
|
||||||
<td>Font</td>
|
<td>Font</td>
|
||||||
<td>
|
<td>
|
||||||
<select id="styleSelectFont"></select>
|
<select id="styleSelectFont"></select>
|
||||||
<input id="styleInputFont" data-tip="Provide a link to @font-face declaration or type Google font name" type="text" placeholder="link to @font-face">
|
<button id="styleFontAdd" data-tip="Add a font" class="icon-plus styleButton"></button>
|
||||||
<button id="styleFontAdd" data-tip="Add custom font from the web" class="icon-plus styleButton"></button>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -3346,6 +3345,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="addFontDialog" style="display: none" class="dialog">
|
||||||
|
<span>There are 3 ways to add a custom font:</span>
|
||||||
|
<p><strong>Google font</strong>. Open <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>, find a font you like and enter its name to the field below.</p>
|
||||||
|
<p><strong>Local font</strong>. If you have a font <a href="https://faqs.skillcrush.com/article/275-downloading-installing-a-font-on-your-computer" target="_blank">installed on your computer</a>, just provide the font name. Make sure the browser is reloaded after the installation. The font won't work on machines not having it installed. Good source of fonts are <a href="https://fontesk.com" target="_blank">Fontdesk</a> and <a href="https://www.dafont.com" target="_blank">DaFont</a>.</p>
|
||||||
|
<p><strong>Font URL</strong>. Provide font name and link to the font file hosted online. The best free font hostings are <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> and <a target="_blank" href="https://www.cdnfonts.com">CDN Fonts</a>. To get font file open the link to css provided by these services and manually copy the link to <code>woff2</code>.</p>
|
||||||
|
<div style="margin-top: .3em" data-tip="Select font adding method">
|
||||||
|
<select id="addFontMethod">
|
||||||
|
<option value="googleFont" selected>Google font</option>
|
||||||
|
<option value="localFont">Local font</option>
|
||||||
|
<option value="fontURL" selected>Font URL</option>
|
||||||
|
</select>
|
||||||
|
<input id="addFontNameInput" placeholder="font family" style="width:15em">
|
||||||
|
<input id="addFontURLInput" placeholder="font file URL" style="width:22.6em; margin-top:.1em">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="cellInfo" style="display: none" class="dialog stable">
|
<div id="cellInfo" style="display: none" class="dialog stable">
|
||||||
<p><b>Cell:</b> <span id="infoCell"></span> <b>X:</b> <span id="infoX"></span> <b>Y:</b> <span id="infoY"></span></p>
|
<p><b>Cell:</b> <span id="infoCell"></span> <b>X:</b> <span id="infoX"></span> <b>Y:</b> <span id="infoY"></span></p>
|
||||||
<p><b>Latitude:</b> <span id="infoLat"></span></p>
|
<p><b>Latitude:</b> <span id="infoLat"></span></p>
|
||||||
|
|
|
||||||
6
main.js
6
main.js
|
|
@ -2,7 +2,7 @@
|
||||||
// https://github.com/Azgaar/Fantasy-Map-Generator
|
// https://github.com/Azgaar/Fantasy-Map-Generator
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
const version = "1.66"; // generator version1
|
const version = "1.661"; // generator version
|
||||||
document.title += " v" + version;
|
document.title += " v" + version;
|
||||||
|
|
||||||
// Switches to disable/enable logging features
|
// Switches to disable/enable logging features
|
||||||
|
|
@ -122,7 +122,6 @@ let customization = 0; // 0 - no; 1 = heightmap draw; 2 - states draw; 3 - add s
|
||||||
|
|
||||||
let biomesData = applyDefaultBiomesSystem();
|
let biomesData = applyDefaultBiomesSystem();
|
||||||
let nameBases = Names.getNameBases(); // cultures-related data
|
let nameBases = Names.getNameBases(); // cultures-related data
|
||||||
const fonts = ["Almendra+SC", "Georgia", "Arial", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"]; // default fonts
|
|
||||||
|
|
||||||
let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
|
let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
|
||||||
const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
|
const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
|
||||||
|
|
@ -220,7 +219,7 @@ void (function checkLoadParameters() {
|
||||||
})();
|
})();
|
||||||
|
|
||||||
function generateMapOnLoad() {
|
function generateMapOnLoad() {
|
||||||
applyStyleOnLoad(); // apply default of previously selected style
|
applyStyleOnLoad(); // apply default or previously selected style
|
||||||
generate(); // generate map
|
generate(); // generate map
|
||||||
focusOn(); // based on searchParams focus on point, cell or burg from MFCG
|
focusOn(); // based on searchParams focus on point, cell or burg from MFCG
|
||||||
applyPreset(); // apply saved layers preset
|
applyPreset(); // apply saved layers preset
|
||||||
|
|
@ -378,6 +377,7 @@ function showWelcomeMessage() {
|
||||||
alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <b>${version}</b>.
|
alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <b>${version}</b>.
|
||||||
This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
|
This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
|
||||||
<ul>Main changes:
|
<ul>Main changes:
|
||||||
|
<li>Add custom fonts dialog</li>
|
||||||
<li>Save and load <i>.map</i> files to Dropbox</li>
|
<li>Save and load <i>.map</i> files to Dropbox</li>
|
||||||
<li>Ability to add control points on river edit</li>
|
<li>Ability to add control points on river edit</li>
|
||||||
<li>New heightmap template: Taklamakan</li>
|
<li>New heightmap template: Taklamakan</li>
|
||||||
|
|
|
||||||
389
modules/fonts.js
389
modules/fonts.js
|
|
@ -1,142 +1,271 @@
|
||||||
// helper finctions to work with fonts
|
"use strict";
|
||||||
|
|
||||||
async function addFonts(url) {
|
const fonts = [
|
||||||
$("head").append('<link rel="stylesheet" type="text/css" href="' + url + '">');
|
{family: "Arial"},
|
||||||
|
{family: "Times New Roman"},
|
||||||
|
{family: "Georgia"},
|
||||||
|
{family: "Garamond"},
|
||||||
|
{family: "Lucida Sans Unicode"},
|
||||||
|
{family: "Courier New"},
|
||||||
|
{family: "Verdana"},
|
||||||
|
{family: "Impact"},
|
||||||
|
{family: "Comic Sans MS"},
|
||||||
|
{family: "Papyrus"},
|
||||||
|
{
|
||||||
|
family: "Almendra SC",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/almendrasc/v13/Iure6Yx284eebowr7hbyTaZOrLQ.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Amatic SC",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/amaticsc/v11/TUZ3zwprpvBS1izr_vOMscGKfrUC.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Architects Daughter",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/architectsdaughter/v8/RXTgOOQ9AAtaVOHxx0IUBM3t7GjCYufj5TXV5VnA2p8.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Bitter",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Caesar Dressing",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/caesardressing/v6/yYLx0hLa3vawqtwdswbotmK4vrRHdrz7.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Cinzel",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Dancing Script",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/dancingscript/v9/KGBfwabt0ZRLA5W1ywjowUHdOuSHeh0r6jGTOGdAKHA.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Fredericka the Great",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/frederickathegreat/v6/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV--Sjxbc.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Gloria Hallelujah",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/gloriahallelujah/v9/CA1k7SlXcY5kvI81M_R28cNDay8z-hHR7F16xrcXsJw.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Great Vibes",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/greatvibes/v5/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "IM Fell English",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/imfellenglish/v7/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Kaushan Script",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "MedievalSharp",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/medievalsharp/v9/EvOJzAlL3oU5AQl2mP5KdgptMqhwMg.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Metamorphous",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/metamorphous/v7/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Montez",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/montez/v8/aq8el3-0osHIcFK6bXAPkw.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Nova Script",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/novascript/v10/7Au7p_IpkSWSTWaFWkumvlQKGFw.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Orbitron",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/orbitron/v9/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Satisfy",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/satisfy/v8/2OzALGYfHwQjkPYWELy-cw.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Shadows Into Light",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/shadowsintolight/v7/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Uncial Antiqua",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/uncialantiqua/v5/N0bM2S5WOex4OUbESzoESK-i-MfWQZQ.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Underdog",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/underdog/v6/CHygV-jCElj7diMroWSlWV8.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
family: "Yellowtail",
|
||||||
|
src: "url(https://fonts.gstatic.com/s/yellowtail/v8/GcIHC9QEwVkrA19LJU1qlPk_vArhqVIZ0nv9q090hN8.woff2)",
|
||||||
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
declareDefaultFonts(); // execute once on load
|
||||||
|
|
||||||
|
function declareFont(font) {
|
||||||
|
const {family, src, ...rest} = font;
|
||||||
|
if (!src) return;
|
||||||
|
|
||||||
|
const fontFace = new FontFace(family, src, {...rest, display: "block"});
|
||||||
|
document.fonts.add(fontFace);
|
||||||
|
addFontOption(family);
|
||||||
|
}
|
||||||
|
|
||||||
|
function declareDefaultFonts() {
|
||||||
|
fonts.forEach(font => {
|
||||||
|
if (font.src) declareFont(font);
|
||||||
|
else addFontOption(font.family);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUsedFonts(svg) {
|
||||||
|
const usedFontFamilies = new Set();
|
||||||
|
|
||||||
|
const labelGroups = svg.querySelectorAll("#labels g");
|
||||||
|
for (const labelGroup of labelGroups) {
|
||||||
|
const font = labelGroup.getAttribute("font-family");
|
||||||
|
if (font) usedFontFamilies.add(font);
|
||||||
|
}
|
||||||
|
|
||||||
|
const provinceFont = provs.attr("font-family");
|
||||||
|
if (provinceFont) usedFontFamilies.add(provinceFont);
|
||||||
|
|
||||||
|
const legend = svg.querySelector("#legend");
|
||||||
|
const legendFont = legend?.getAttribute("font-family");
|
||||||
|
if (legendFont) usedFontFamilies.add(legendFont);
|
||||||
|
|
||||||
|
const usedFonts = fonts.filter(font => usedFontFamilies.has(font.family));
|
||||||
|
return usedFonts;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addFontOption(family) {
|
||||||
|
const options = document.getElementById("styleSelectFont");
|
||||||
|
// const existingOption = options.querySelector(`[value="${family}"]`);
|
||||||
|
// if (existingOption) return;
|
||||||
|
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = family;
|
||||||
|
option.innerText = family;
|
||||||
|
option.style.fontFamily = family;
|
||||||
|
options.add(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchGoogleFont(family) {
|
||||||
|
const url = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}`;
|
||||||
try {
|
try {
|
||||||
const resp = await fetch(url);
|
const resp = await fetch(url);
|
||||||
const text = await resp.text();
|
const text = await resp.text();
|
||||||
let s = document.createElement("style");
|
|
||||||
s.innerHTML = text;
|
const fontFaceRules = text.match(/font-face\s*{[^}]+}/g);
|
||||||
document.head.appendChild(s);
|
const fonts = fontFaceRules.map(fontFace => {
|
||||||
let styleSheet = Array.prototype.filter.call(document.styleSheets, sS => sS.ownerNode === s)[0];
|
const srcURL = fontFace.match(/url\(['"]?(.+?)['"]?\)/)[1];
|
||||||
let FontRule = rule_1 => {
|
const src = `url(${srcURL})`;
|
||||||
let family = rule_1.style.getPropertyValue("font-family");
|
const unicodeRange = fontFace.match(/unicode-range: (.*?);/)?.[1];
|
||||||
let font = family.replace(/['"]+/g, "").replace(/ /g, "+");
|
const variant = fontFace.match(/font-style: (.*?);/)?.[1];
|
||||||
let weight = rule_1.style.getPropertyValue("font-weight");
|
|
||||||
if (weight && weight !== "400") font += ":" + weight;
|
const font = {family, src};
|
||||||
if (fonts.indexOf(font) == -1) {
|
if (unicodeRange) font.unicodeRange = unicodeRange;
|
||||||
fonts.push(font);
|
if (variant && variant !== "normal") font.variant = variant;
|
||||||
fetched++;
|
return font;
|
||||||
}
|
});
|
||||||
};
|
|
||||||
let fetched = 0;
|
return fonts;
|
||||||
for (let r of styleSheet.cssRules) {
|
|
||||||
FontRule(r);
|
|
||||||
}
|
|
||||||
document.head.removeChild(s);
|
|
||||||
return fetched;
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
return ERROR && console.error(err);
|
ERROR && console.error(err);
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadUsedFonts() {
|
function readBlobAsDataURL(blob) {
|
||||||
const fontsInUse = getFontsList(svg);
|
return new Promise(function (resolve, reject) {
|
||||||
const fontsToLoad = fontsInUse.filter(font => !fonts.includes(font));
|
const reader = new FileReader();
|
||||||
if (fontsToLoad?.length) {
|
reader.onloadend = () => resolve(reader.result);
|
||||||
const url = "https://fonts.googleapis.com/css?family=" + fontsToLoad.join("|");
|
reader.onerror = reject;
|
||||||
addFonts(url);
|
reader.readAsDataURL(blob);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFontsList(svg) {
|
|
||||||
const fontsInUse = [];
|
|
||||||
|
|
||||||
svg.selectAll("#labels > g").each(function () {
|
|
||||||
if (!this.hasChildNodes()) return;
|
|
||||||
const font = this.dataset.font;
|
|
||||||
if (font) fontsInUse.push(font);
|
|
||||||
});
|
|
||||||
if (legend?.node()?.hasChildNodes()) fontsInUse.push(legend.attr("data-font"));
|
|
||||||
|
|
||||||
return [...new Set(fontsInUse)];
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertFontToDataURI(url) {
|
|
||||||
if (!url) return Promise.resolve();
|
|
||||||
return fetch(url)
|
|
||||||
.then(resp => resp.text())
|
|
||||||
.then(text => {
|
|
||||||
const style = document.createElement("style");
|
|
||||||
style.innerHTML = text;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
|
|
||||||
const styleSheet = Array.from(document.styleSheets).find(sheet => sheet.ownerNode === style);
|
|
||||||
|
|
||||||
const FontRule = rule => {
|
|
||||||
const src = rule.style.getPropertyValue("src");
|
|
||||||
const url = src ? src.split("url(")[1].split(")")[0] : "";
|
|
||||||
return {rule, src, url: url.substring(url.length - 1, 1)};
|
|
||||||
};
|
|
||||||
const fontProms = [];
|
|
||||||
|
|
||||||
for (const rule of styleSheet.cssRules) {
|
|
||||||
let fR = FontRule(rule);
|
|
||||||
if (!fR.url) continue;
|
|
||||||
|
|
||||||
fontProms.push(
|
|
||||||
fetch(fR.url)
|
|
||||||
.then(resp => resp.blob())
|
|
||||||
.then(blob => {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
let f = new FileReader();
|
|
||||||
f.onload = e => resolve(f.result);
|
|
||||||
f.readAsDataURL(blob);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.then(dataURL => fR.rule.cssText.replace(fR.url, dataURL))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.head.removeChild(style); // clean up
|
|
||||||
return Promise.all(fontProms); // wait for all this has been done
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// fetch default fonts if not done before
|
|
||||||
function loadDefaultFonts() {
|
|
||||||
if (!$('link[href="fonts.css"]').length) {
|
|
||||||
$("head").append('<link rel="stylesheet" type="text/css" href="fonts.css">');
|
|
||||||
const fontsToAdd = ["Amatic+SC:700", "IM+Fell+English", "Great+Vibes", "MedievalSharp", "Metamorphous", "Nova+Script", "Uncial+Antiqua", "Underdog", "Caesar+Dressing", "Bitter", "Yellowtail", "Montez", "Shadows+Into+Light", "Fredericka+the+Great", "Orbitron", "Dancing+Script:700", "Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"];
|
|
||||||
fontsToAdd.forEach(function (f) {
|
|
||||||
if (fonts.indexOf(f) === -1) fonts.push(f);
|
|
||||||
});
|
|
||||||
updateFontOptions();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchFonts(url) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (url === "") return tip("Use a direct link to any @font-face declaration or just font name to fetch from Google Fonts");
|
|
||||||
|
|
||||||
if (url.indexOf("http") === -1) {
|
|
||||||
url = url.replace(url.charAt(0), url.charAt(0).toUpperCase()).split(" ").join("+");
|
|
||||||
url = "https://fonts.googleapis.com/css?family=" + url;
|
|
||||||
}
|
|
||||||
|
|
||||||
addFonts(url).then(fetched => {
|
|
||||||
if (fetched === undefined) return tip("Cannot fetch font for this value!", false, "error");
|
|
||||||
if (fetched === 0) return tip("Already in the fonts list!", false, "error");
|
|
||||||
|
|
||||||
updateFontOptions();
|
|
||||||
if (fetched === 1) {
|
|
||||||
tip("Font " + fonts[fonts.length - 1] + " is fetched");
|
|
||||||
} else if (fetched > 1) {
|
|
||||||
tip(fetched + " fonts are added to the list");
|
|
||||||
}
|
|
||||||
resolve(fetched);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update font list for Label and Burg Editors
|
async function loadFontsAsDataURI(fonts) {
|
||||||
function updateFontOptions() {
|
const promises = fonts.map(async font => {
|
||||||
styleSelectFont.innerHTML = "";
|
const url = font.src.match(/url\(['"]?(.+?)['"]?\)/)[1];
|
||||||
for (let i = 0; i < fonts.length; i++) {
|
const resp = await fetch(url);
|
||||||
const opt = document.createElement("option");
|
const blob = await resp.blob();
|
||||||
opt.value = i;
|
const dataURL = await readBlobAsDataURL(blob);
|
||||||
const font = fonts[i].split(":")[0].replace(/\+/g, " ");
|
|
||||||
opt.style.fontFamily = opt.innerHTML = font;
|
return {...font, src: `url('${dataURL}')`};
|
||||||
styleSelectFont.add(opt);
|
});
|
||||||
}
|
|
||||||
|
return await Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addGoogleFont(family) {
|
||||||
|
const fontRanges = await fetchGoogleFont(family);
|
||||||
|
if (!fontRanges) return tip("Cannot fetch Google font for this value", true, "error", 4000);
|
||||||
|
tip(`Google font ${family} is loading...`, true, "warn", 4000);
|
||||||
|
|
||||||
|
const promises = fontRanges.map(range => {
|
||||||
|
const {src, unicodeRange, variant} = range;
|
||||||
|
const fontFace = new FontFace(family, src, {unicodeRange, variant, display: "block"});
|
||||||
|
return fontFace.load();
|
||||||
|
});
|
||||||
|
|
||||||
|
Promise.all(promises)
|
||||||
|
.then(fontFaces => {
|
||||||
|
fontFaces.forEach(fontFace => document.fonts.add(fontFace));
|
||||||
|
fonts.push(...fontRanges);
|
||||||
|
tip(`Google font ${family} is added to the list`, true, "success", 4000);
|
||||||
|
addFontOption(family);
|
||||||
|
document.getElementById("styleSelectFont").value = family;
|
||||||
|
changeFont();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
tip(`Failed to load Google font ${family}`, true, "error", 4000);
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addLocalFont(family) {
|
||||||
|
fonts.push({family});
|
||||||
|
|
||||||
|
const fontFace = new FontFace(family, `local(${family})`, {display: "block"});
|
||||||
|
document.fonts.add(fontFace);
|
||||||
|
tip(`Local font ${family} is added to the fonts list`, true, "success", 4000);
|
||||||
|
addFontOption(family);
|
||||||
|
document.getElementById("styleSelectFont").value = family;
|
||||||
|
changeFont();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addWebFont(family, url) {
|
||||||
|
const src = `url('${url}')`;
|
||||||
|
fonts.push({family, src});
|
||||||
|
|
||||||
|
const fontFace = new FontFace(family, src, {display: "block"});
|
||||||
|
document.fonts.add(fontFace);
|
||||||
|
tip(`Font ${family} is added to the list`, true, "success", 4000);
|
||||||
|
addFontOption(family);
|
||||||
|
document.getElementById("styleSelectFont").value = family;
|
||||||
|
changeFont();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -237,6 +237,15 @@ function parseLoadedData(data) {
|
||||||
if (data[2]) mapCoordinates = JSON.parse(data[2]);
|
if (data[2]) mapCoordinates = JSON.parse(data[2]);
|
||||||
if (data[4]) notes = JSON.parse(data[4]);
|
if (data[4]) notes = JSON.parse(data[4]);
|
||||||
if (data[33]) rulers.fromString(data[33]);
|
if (data[33]) rulers.fromString(data[33]);
|
||||||
|
if (data[34]) {
|
||||||
|
const usedFonts = JSON.parse(data[34]);
|
||||||
|
usedFonts.forEach(usedFont => {
|
||||||
|
const {family: usedFamily, unicodeRange: usedRange, variant: usedVariant} = usedFont;
|
||||||
|
const defaultFont = fonts.find(({family, unicodeRange, variant}) => family === usedFamily && unicodeRange === usedRange && variant === usedVariant);
|
||||||
|
if (!defaultFont) fonts.push(usedFont);
|
||||||
|
declareFont(usedFont);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const biomes = data[3].split("|");
|
const biomes = data[3].split("|");
|
||||||
biomesData = applyDefaultBiomesSystem();
|
biomesData = applyDefaultBiomesSystem();
|
||||||
|
|
@ -310,8 +319,6 @@ function parseLoadedData(data) {
|
||||||
burgLabels = labels.select("#burgLabels");
|
burgLabels = labels.select("#burgLabels");
|
||||||
})();
|
})();
|
||||||
|
|
||||||
loadUsedFonts();
|
|
||||||
|
|
||||||
void (function parseGridData() {
|
void (function parseGridData() {
|
||||||
grid = JSON.parse(data[6]);
|
grid = JSON.parse(data[6]);
|
||||||
calculateVoronoi(grid, grid.points);
|
calculateVoronoi(grid, grid.points);
|
||||||
|
|
@ -424,7 +431,7 @@ function parseLoadedData(data) {
|
||||||
|
|
||||||
// 1.0 adds a legend box
|
// 1.0 adds a legend box
|
||||||
legend = svg.append("g").attr("id", "legend");
|
legend = svg.append("g").attr("id", "legend");
|
||||||
legend.attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 13).attr("data-size", 13).attr("data-x", 99).attr("data-y", 93).attr("stroke-width", 2.5).attr("stroke", "#812929").attr("stroke-dasharray", "0 4 10 4").attr("stroke-linecap", "round");
|
legend.attr("font-family", "Almendra SC").attr("font-size", 13).attr("data-size", 13).attr("data-x", 99).attr("data-y", 93).attr("stroke-width", 2.5).attr("stroke", "#812929").attr("stroke-dasharray", "0 4 10 4").attr("stroke-linecap", "round");
|
||||||
|
|
||||||
// 1.0 separated drawBorders fron drawStates()
|
// 1.0 separated drawBorders fron drawStates()
|
||||||
stateBorders = borders.append("g").attr("id", "stateBorders");
|
stateBorders = borders.append("g").attr("id", "stateBorders");
|
||||||
|
|
|
||||||
|
|
@ -275,14 +275,22 @@ async function getMapURL(type, options = {}) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// load non-standard fonts
|
// TODO: add dataURL for all used fonts
|
||||||
const usedFonts = getFontsList(clone);
|
const usedFonts = getUsedFonts(cloneEl);
|
||||||
const webSafe = ["Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"];
|
const fontsToLoad = usedFonts.filter(font => font.src);
|
||||||
const fontsToLoad = usedFonts.filter(font => !webSafe.includes(font));
|
|
||||||
if (fontsToLoad.length) {
|
if (fontsToLoad.length) {
|
||||||
const url = "https://fonts.googleapis.com/css?family=" + fontsToLoad.join("|");
|
const dataURLfonts = await loadFontsAsDataURI(fontsToLoad);
|
||||||
const fontStyle = await convertFontToDataURI(url);
|
|
||||||
if (fontStyle) clone.select("defs").append("style").text(fontStyle.join("\n"));
|
const fontFaces = dataURLfonts
|
||||||
|
.map(({family, src, unicodeRange = "", variant = "normal"}) => {
|
||||||
|
return `@font-face {font-family: "${family}"; src: ${src}; unicode-range: ${unicodeRange}; font-variant: ${variant};}`;
|
||||||
|
})
|
||||||
|
.join("\n");
|
||||||
|
|
||||||
|
const style = document.createElement("style");
|
||||||
|
style.setAttribute("type", "text/css");
|
||||||
|
style.innerHTML = fontFaces;
|
||||||
|
cloneEl.querySelector("defs").appendChild(style);
|
||||||
}
|
}
|
||||||
|
|
||||||
clone.remove();
|
clone.remove();
|
||||||
|
|
@ -378,6 +386,7 @@ function getMapData() {
|
||||||
const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
|
const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
|
||||||
const notesData = JSON.stringify(notes);
|
const notesData = JSON.stringify(notes);
|
||||||
const rulersString = rulers.toString();
|
const rulersString = rulers.toString();
|
||||||
|
const fonts = JSON.stringify(getUsedFonts(svg.node()));
|
||||||
|
|
||||||
// save svg
|
// save svg
|
||||||
const cloneEl = document.getElementById("map").cloneNode(true);
|
const cloneEl = document.getElementById("map").cloneNode(true);
|
||||||
|
|
@ -414,7 +423,7 @@ function getMapData() {
|
||||||
const pop = Array.from(pack.cells.pop).map(p => rn(p, 4));
|
const pop = Array.from(pack.cells.pop).map(p => rn(p, 4));
|
||||||
|
|
||||||
// data format as below
|
// data format as below
|
||||||
const mapData = [params, settings, coords, biomes, notesData, serializedSVG, gridGeneral, grid.cells.h, grid.cells.prec, grid.cells.f, grid.cells.t, grid.cells.temp, packFeatures, cultures, states, burgs, pack.cells.biome, pack.cells.burg, pack.cells.conf, pack.cells.culture, pack.cells.fl, pop, pack.cells.r, pack.cells.road, pack.cells.s, pack.cells.state, pack.cells.religion, pack.cells.province, pack.cells.crossroad, religions, provinces, namesData, rivers, rulersString].join("\r\n");
|
const mapData = [params, settings, coords, biomes, notesData, serializedSVG, gridGeneral, grid.cells.h, grid.cells.prec, grid.cells.f, grid.cells.t, grid.cells.temp, packFeatures, cultures, states, burgs, pack.cells.biome, pack.cells.burg, pack.cells.conf, pack.cells.culture, pack.cells.fl, pop, pack.cells.r, pack.cells.road, pack.cells.s, pack.cells.state, pack.cells.religion, pack.cells.province, pack.cells.crossroad, religions, provinces, namesData, rivers, rulersString, fonts].join("\r\n");
|
||||||
TIME && console.timeEnd("createMapData");
|
TIME && console.timeEnd("createMapData");
|
||||||
return mapData;
|
return mapData;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,15 +32,20 @@ function tip(tip = "Tip is undefined", main, type, time) {
|
||||||
else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)";
|
else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)";
|
||||||
else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
|
else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
|
||||||
|
|
||||||
if (main) tooltip.dataset.main = tip; // set main tip
|
if (main) {
|
||||||
if (time) setTimeout(() => (tooltip.dataset.main = ""), time); // clear main in some time
|
tooltip.dataset.main = tip;
|
||||||
|
tooltip.dataset.color = tooltip.style.background;
|
||||||
|
}
|
||||||
|
if (time) setTimeout(() => clearMainTip(), time);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showMainTip() {
|
function showMainTip() {
|
||||||
|
tooltip.style.background = tooltip.dataset.color;
|
||||||
tooltip.innerHTML = tooltip.dataset.main;
|
tooltip.innerHTML = tooltip.dataset.main;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearMainTip() {
|
function clearMainTip() {
|
||||||
|
tooltip.dataset.color = "";
|
||||||
tooltip.dataset.main = "";
|
tooltip.dataset.main = "";
|
||||||
tooltip.innerHTML = "";
|
tooltip.innerHTML = "";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -475,7 +475,7 @@ function addLabelOnClick() {
|
||||||
const id = getNextId("label");
|
const id = getNextId("label");
|
||||||
|
|
||||||
let group = labels.select("#addedLabels");
|
let group = labels.select("#addedLabels");
|
||||||
if (!group.size()) group = labels.append("g").attr("id", "addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
|
if (!group.size()) group = labels.append("g").attr("id", "addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
|
||||||
|
|
||||||
const example = group.append("text").attr("x", 0).attr("x", 0).text(name);
|
const example = group.append("text").attr("x", 0).attr("x", 0).text(name);
|
||||||
const width = example.node().getBBox().width;
|
const width = example.node().getBBox().width;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue