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

resource icon upload + save/load

Browse source
This commit is contained in:
Azgaar 2021-06-01 23:10:00 +03:00 • committed by Peter
parent f88d263e68
commit f8bc33ba29
1 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

32
modules/ui/resources-editor.js
View file

@ -680,18 +680,22 @@ function editResources() {
function changeIcon(resource, line, el) { function changeIcon(resource, line, el) {
const standardIcons = Array.from(document.getElementById('resource-icons').querySelectorAll('symbol')).map((el) => el.id); const standardIcons = Array.from(document.getElementById('resource-icons').querySelectorAll('symbol')).map((el) => el.id);
const standardIconsOptions = standardIcons.map((icon) => `<option value=${icon}${resource.icon === icon ? 'selected' : ''}>${icon}</option>`); const standardIconsOptions = standardIcons.map((icon) => `<option value=${icon}>${icon}</option>`);
const customIconsEl = document.getElementById('defs-icons'); const customIconsEl = document.getElementById('defs-icons');
const customIcons = customIconsEl ? Array.from(document.getElementById('defs-icons').querySelectorAll('svg')).map((el) => el.id) : []; const customIcons = customIconsEl ? Array.from(document.getElementById('defs-icons').querySelectorAll('svg')).map((el) => el.id) : [];
const customIconsOptions = customIcons.map((icon) => `<option value=${icon}${resource.icon === icon ? 'selected' : ''}>${icon}</option>`); const customIconsOptions = customIcons.map((icon) => `<option value=${icon}>${icon}</option>`);
const select = document.getElementById('resourceSelectIcon'); const select = document.getElementById('resourceSelectIcon');
select.innerHTML = standardIconsOptions + customIconsOptions; select.innerHTML = standardIconsOptions + customIconsOptions;
select.value = resource.icon;
const preview = document.getElementById('resourceIconPreview'); const preview = document.getElementById('resourceIconPreview');
preview.setAttribute('href', '#' + resource.icon); preview.setAttribute('href', '#' + resource.icon);
const viewBoxSection = document.getElementById('resourceIconEditorViewboxFields');
viewBoxSection.style.display = 'none';
$('#resourceIconEditor').dialog({ $('#resourceIconEditor').dialog({
resizable: false, resizable: false,
title: 'Change Icon', title: 'Change Icon',
@ -702,6 +706,7 @@ function editResources() {
'Change color': () => changeColor(resource, line, el), 'Change color': () => changeColor(resource, line, el),
Apply: function () { Apply: function () {
$(this).dialog('close'); $(this).dialog('close');
resource.icon = select.value; resource.icon = select.value;
line.querySelector('svg.resourceIcon > use').setAttribute('href', '#' + select.value); line.querySelector('svg.resourceIcon > use').setAttribute('href', '#' + select.value);
drawResources(); drawResources();
@ -711,10 +716,29 @@ function editResources() {
}); });
const uploadTo = document.getElementById('defs-icons'); const uploadTo = document.getElementById('defs-icons');
const onUpload = (id) => { const onUpload = (type, id) => {
preview.setAttribute('href', '#' + id); preview.setAttribute('href', '#' + id);
select.innerHTML += `<option value=${id}>${id}</option>`; select.innerHTML += `<option value=${id}>${id}</option>`;
select.value = id; select.value = id;
if (type === 'image') return;
// let user set viewBox for svg image
const el = document.getElementById(id);
viewBoxSection.style.display = 'block';
const viewBoxAttr = el.getAttribute('viewBox');
const initialViewBox = viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, 200, 200];
const inputs = viewBoxSection.querySelectorAll('input');
const changeInput = () => {
const viewBox = Array.from(inputs)
.map((input) => input.value)
.join(' ');
el.setAttribute('viewBox', viewBox);
};
inputs.forEach((input, i) => {
input.value = initialViewBox[i];
input.onchange = changeInput;
});
}; };
// add listeners // add listeners
@ -764,7 +788,7 @@ function editResources() {
icon.setAttribute('height', 200); icon.setAttribute('height', 200);
} }
callback(id); callback(type, id);
}; };
if (type === 'image') reader.readAsDataURL(file); if (type === 'image') reader.readAsDataURL(file);