backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 17:51:24 +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
parent 709f45e03e
commit 98ef47708c
4 changed files with 59 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -307,18 +307,22 @@ function editResources() {
function changeIcon(resource, line, el) {
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 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');
select.innerHTML = standardIconsOptions + customIconsOptions;
select.value = resource.icon;
const preview = document.getElementById('resourceIconPreview');
preview.setAttribute('href', '#' + resource.icon);
const viewBoxSection = document.getElementById('resourceIconEditorViewboxFields');
viewBoxSection.style.display = 'none';
$('#resourceIconEditor').dialog({
resizable: false,
title: 'Change Icon',
@ -329,6 +333,7 @@ function editResources() {
'Change color': () => changeColor(resource, line, el),
Apply: function () {
$(this).dialog('close');
resource.icon = select.value;
line.querySelector('svg.resourceIcon > use').setAttribute('href', '#' + select.value);
drawResources();
@ -338,10 +343,29 @@ function editResources() {
});
const uploadTo = document.getElementById('defs-icons');
const onUpload = (id) => {
const onUpload = (type, id) => {
preview.setAttribute('href', '#' + id);
select.innerHTML += `<option value=${id}>${id}</option>`;
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
@ -391,7 +415,7 @@ function editResources() {
icon.setAttribute('height', 200);
}
callback(id);
callback(type, id);
};
if (type === 'image') reader.readAsDataURL(file);
@ -538,6 +562,8 @@ function editResources() {
}
function resourceAdd() {
if (pack.resources.length >= 256) return tip('Maximum number of resources is reached', false, 'error');
let i = last(pack.resources).i;
while (Resources.get(i)) {
i++;