fix(#944): uploaded svg emblems can conflict with fmg ids

This commit is contained in:
Azgaar 2023-05-21 15:15:03 +04:00
parent 41bd157165
commit aad1300338
4 changed files with 26 additions and 29 deletions

View file

@ -1731,7 +1731,7 @@ div.states > div.biomeArea {
#emblemUploadControl, #emblemUploadControl,
#emblemDownloadControl { #emblemDownloadControl {
margin-top: 0.3em; margin-top: 0.3em;
text-align: center; width: 100%;
} }
div.editorLine { div.editorLine {

View file

@ -128,7 +128,7 @@
} }
</style> </style>
<link rel="preload" href="index.css?v=1.89.19" as="style" onload="this.onload=null; this.rel='stylesheet'" /> <link rel="preload" href="index.css?v=1.89.21" as="style" onload="this.onload=null; this.rel='stylesheet'" />
<link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" /> <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
<link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" /> <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
</head> </head>
@ -4902,7 +4902,10 @@
> >
Any image Any image
</button> </button>
<button id="emblemsUploadSVG" data-tip="Upload prepared SVG image, e.g. SVG from Armoria"> <button
id="emblemsUploadSVG"
data-tip="Upload prepared SVG image (SVG from Armoria or SVG processed with 'Optimize vector' tool)"
>
Prepared SVG Prepared SVG
</button> </button>
<a <a
@ -7896,7 +7899,7 @@
<script defer src="modules/ui/markers-overview.js?v=1.89.20"></script> <script defer src="modules/ui/markers-overview.js?v=1.89.20"></script>
<script defer src="modules/ui/regiment-editor.js"></script> <script defer src="modules/ui/regiment-editor.js"></script>
<script defer src="modules/ui/battle-screen.js"></script> <script defer src="modules/ui/battle-screen.js"></script>
<script defer src="modules/ui/emblems-editor.js"></script> <script defer src="modules/ui/emblems-editor.js?v=1.89.21"></script>
<script defer src="modules/ui/markers-editor.js"></script> <script defer src="modules/ui/markers-editor.js"></script>
<script defer src="modules/ui/3d.js"></script> <script defer src="modules/ui/3d.js"></script>
<script defer src="modules/ui/submap.js"></script> <script defer src="modules/ui/submap.js"></script>

View file

@ -239,12 +239,9 @@ function editEmblem(type, id, el) {
input.value = ""; input.value = "";
if (file.size > 500000) { if (file.size > 500000) {
tip( const message =
`File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB`, "File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB";
true, tip(message, true, "error", 5000);
"error",
5000
);
return; return;
} }
@ -253,40 +250,37 @@ function editEmblem(type, id, el) {
reader.onload = function (readerEvent) { reader.onload = function (readerEvent) {
const result = readerEvent.target.result; const result = readerEvent.target.result;
const defs = document.getElementById("defs-emblems"); const defs = document.getElementById("defs-emblems");
const coa = document.getElementById(id); // old emblem const oldEmblem = document.getElementById(id);
if (type === "image") { let href = result; // raster images
const svg = `<svg id="${id}" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><image x="0" y="0" width="200" height="200" href="${result}"/></svg>`; if (type === "svg") {
defs.insertAdjacentHTML("beforeend", svg);
} else {
const el = document.createElement("html"); const el = document.createElement("html");
el.innerHTML = result; el.innerHTML = result;
// remove sodipodi and inkscape attributes
el.querySelectorAll("*").forEach(el => { el.querySelectorAll("*").forEach(el => {
const attributes = el.getAttributeNames(); if (el.id === "adobe_illustrator_pgf") el.remove(); // remove Adobe Illustrator inner data
attributes.forEach(attr => {
el.getAttributeNames().forEach(attr => {
// remove sodipodi and inkscape attributes
if (attr.includes("inkscape") || attr.includes("sodipodi")) el.removeAttribute(attr); if (attr.includes("inkscape") || attr.includes("sodipodi")) el.removeAttribute(attr);
}); });
}); });
const svg = el.querySelector("svg"); const svg = el.querySelector("svg");
if (!svg) { if (!svg) {
tip( const message = "The file is not a valid SVG. Please use Armoria or other relevant tools";
"The file should be prepated for load to FMG. Please use Armoria or other relevant tools", tip(message, false, "error");
false,
"error"
);
return; return;
} }
const newEmblem = defs.appendChild(svg); const serialized = new XMLSerializer().serializeToString(svg);
newEmblem.id = id; href = "data:image/svg+xml;base64," + window.btoa(serialized);
newEmblem.setAttribute("width", 200);
newEmblem.setAttribute("height", 200);
} }
if (coa) coa.remove(); // remove old emblem const svg = `<svg id="${id}" viewBox="0 0 200 200"><image width="200" height="200" href="${href}"/></svg>`;
defs.insertAdjacentHTML("beforeend", svg);
if (oldEmblem) oldEmblem.remove();
el.coa = "custom"; el.coa = "custom";
emblemShapeSelector.disabled = true; emblemShapeSelector.disabled = true;
}; };

View file

@ -1,7 +1,7 @@
"use strict"; "use strict";
// version and caching control // version and caching control
const version = "1.89.20"; // generator version, update each time const version = "1.89.21"; // generator version, update each time
{ {
document.title += " v" + version; document.title += " v" + version;