mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
295 lines
11 KiB
JavaScript
295 lines
11 KiB
JavaScript
'use strict';
|
|
function editMarker() {
|
|
if (customization) return;
|
|
closeDialogs('#markerEditor, .stable');
|
|
$('#markerEditor').dialog();
|
|
|
|
elSelected = d3.select(d3.event.target).call(d3.drag().on('start', dragMarker)).classed('draggable', true);
|
|
updateInputs();
|
|
|
|
if (modules.editMarker) return;
|
|
modules.editMarker = true;
|
|
|
|
$('#markerEditor').dialog({
|
|
title: 'Edit Marker',
|
|
resizable: false,
|
|
position: {my: 'center top+30', at: 'bottom', of: d3.event, collision: 'fit'},
|
|
close: closeMarkerEditor
|
|
});
|
|
|
|
// add listeners
|
|
document.getElementById('markerGroup').addEventListener('click', toggleGroupSection);
|
|
document.getElementById('markerAddGroup').addEventListener('click', toggleGroupInput);
|
|
document.getElementById('markerSelectGroup').addEventListener('change', changeGroup);
|
|
document.getElementById('markerInputGroup').addEventListener('change', createGroup);
|
|
document.getElementById('markerRemoveGroup').addEventListener('click', removeGroup);
|
|
|
|
document.getElementById('markerIcon').addEventListener('click', toggleIconSection);
|
|
document.getElementById('markerIconSize').addEventListener('input', changeIconSize);
|
|
document.getElementById('markerIconShiftX').addEventListener('input', changeIconShiftX);
|
|
document.getElementById('markerIconShiftY').addEventListener('input', changeIconShiftY);
|
|
document.getElementById('markerIconSelect').addEventListener('click', selectMarkerIcon);
|
|
|
|
document.getElementById('markerStyle').addEventListener('click', toggleStyleSection);
|
|
document.getElementById('markerSize').addEventListener('input', changeMarkerSize);
|
|
document.getElementById('markerBaseStroke').addEventListener('input', changePinStroke);
|
|
document.getElementById('markerBaseFill').addEventListener('input', changePinFill);
|
|
document.getElementById('markerIconStrokeWidth').addEventListener('input', changeIconStrokeWidth);
|
|
document.getElementById('markerIconStroke').addEventListener('input', changeIconStroke);
|
|
document.getElementById('markerIconFill').addEventListener('input', changeIconFill);
|
|
|
|
document.getElementById('markerToggleBubble').addEventListener('click', togglePinVisibility);
|
|
document.getElementById('markerLegendButton').addEventListener('click', editMarkerLegend);
|
|
document.getElementById('markerAdd').addEventListener('click', toggleAddMarker);
|
|
document.getElementById('markerRemove').addEventListener('click', removeMarker);
|
|
|
|
updateGroupOptions();
|
|
|
|
function dragMarker() {
|
|
const tr = parseTransform(this.getAttribute('transform'));
|
|
const x = +tr[0] - d3.event.x,
|
|
y = +tr[1] - d3.event.y;
|
|
|
|
d3.event.on('drag', function () {
|
|
const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
|
|
this.setAttribute('transform', transform);
|
|
});
|
|
}
|
|
|
|
function updateInputs() {
|
|
const id = elSelected.attr('data-id');
|
|
const symbol = d3.select('#defs-markers').select(id);
|
|
const icon = symbol.select('text');
|
|
|
|
markerSelectGroup.value = id.slice(1);
|
|
markerIconSize.value = parseFloat(icon.attr('font-size'));
|
|
markerIconShiftX.value = parseFloat(icon.attr('x'));
|
|
markerIconShiftY.value = parseFloat(icon.attr('y'));
|
|
|
|
markerSize.value = elSelected.attr('data-size');
|
|
markerBaseStroke.value = symbol.select('path').attr('fill');
|
|
markerBaseFill.value = symbol.select('circle').attr('fill');
|
|
|
|
markerIconStrokeWidth.value = icon.attr('stroke-width');
|
|
markerIconStroke.value = icon.attr('stroke');
|
|
markerIconFill.value = icon.attr('fill');
|
|
|
|
markerToggleBubble.className = symbol.select('circle').attr('opacity') === '0' ? 'icon-info' : 'icon-info-circled';
|
|
markerIconSelect.innerHTML = icon.text();
|
|
}
|
|
|
|
function toggleGroupSection() {
|
|
if (markerGroupSection.style.display === 'inline-block') {
|
|
markerEditor.querySelectorAll('button:not(#markerGroup)').forEach((b) => (b.style.display = 'inline-block'));
|
|
markerGroupSection.style.display = 'none';
|
|
} else {
|
|
markerEditor.querySelectorAll('button:not(#markerGroup)').forEach((b) => (b.style.display = 'none'));
|
|
markerGroupSection.style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
function updateGroupOptions() {
|
|
markerSelectGroup.innerHTML = '';
|
|
d3.select('#defs-markers')
|
|
.selectAll('symbol')
|
|
.each(function () {
|
|
markerSelectGroup.options.add(new Option(this.id, this.id));
|
|
});
|
|
markerSelectGroup.value = elSelected.attr('data-id').slice(1);
|
|
}
|
|
|
|
function toggleGroupInput() {
|
|
if (markerInputGroup.style.display === 'inline-block') {
|
|
markerSelectGroup.style.display = 'inline-block';
|
|
markerInputGroup.style.display = 'none';
|
|
} else {
|
|
markerSelectGroup.style.display = 'none';
|
|
markerInputGroup.style.display = 'inline-block';
|
|
markerInputGroup.focus();
|
|
}
|
|
}
|
|
|
|
function changeGroup() {
|
|
elSelected.attr('xlink:href', '#' + this.value);
|
|
elSelected.attr('data-id', '#' + this.value);
|
|
}
|
|
|
|
function createGroup() {
|
|
let newGroup = this.value
|
|
.toLowerCase()
|
|
.replace(/ /g, '_')
|
|
.replace(/[^\w\s]/gi, '');
|
|
if (Number.isFinite(+newGroup.charAt(0))) newGroup = 'm' + newGroup;
|
|
if (document.getElementById(newGroup)) {
|
|
tip('Element with this id already exists. Please provide a unique name', false, 'error');
|
|
return;
|
|
}
|
|
|
|
markerInputGroup.value = '';
|
|
// clone old group assigning new id
|
|
const id = elSelected.attr('data-id');
|
|
const clone = d3.select('#defs-markers').select(id).node().cloneNode(true);
|
|
clone.id = newGroup;
|
|
document.getElementById('defs-markers').insertBefore(clone, null);
|
|
elSelected.attr('xlink:href', '#' + newGroup).attr('data-id', '#' + newGroup);
|
|
|
|
// select new group
|
|
markerSelectGroup.options.add(new Option(newGroup, newGroup, false, true));
|
|
toggleGroupInput();
|
|
}
|
|
|
|
function removeGroup() {
|
|
const id = elSelected.attr('data-id');
|
|
const used = document.querySelectorAll("use[data-id='" + id + "']");
|
|
|
|
const count = used.length === 1 ? '1 element' : used.length + ' elements';
|
|
const message = `Are you sure you want to remove all markers of that type (${count})? <br>This action cannot be reverted`;
|
|
const onConfirm = () => {
|
|
if (id !== '#marker0') d3.select('#defs-markers').select(id).remove();
|
|
used.forEach((e) => {
|
|
const index = notes.findIndex((n) => n.id === e.id);
|
|
if (index != -1) notes.splice(index, 1);
|
|
e.remove();
|
|
});
|
|
updateGroupOptions();
|
|
updateGroupOptions();
|
|
$('#markerEditor').dialog('close');
|
|
};
|
|
confirmationDialog({title: 'Remove marker type', message, confirm: 'Remove', onConfirm});
|
|
}
|
|
|
|
function toggleIconSection() {
|
|
if (markerIconSection.style.display === 'inline-block') {
|
|
markerEditor.querySelectorAll('button:not(#markerIcon)').forEach((b) => (b.style.display = 'inline-block'));
|
|
markerIconSection.style.display = 'none';
|
|
markerIconSelect.style.display = 'none';
|
|
} else {
|
|
markerEditor.querySelectorAll('button:not(#markerIcon)').forEach((b) => (b.style.display = 'none'));
|
|
markerIconSection.style.display = 'inline-block';
|
|
markerIconSelect.style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
function selectMarkerIcon() {
|
|
selectIcon(this.innerHTML, (v) => {
|
|
this.innerHTML = v;
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers').select(id).select('text').text(v);
|
|
});
|
|
}
|
|
|
|
function changeIconSize() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers')
|
|
.select(id)
|
|
.select('text')
|
|
.attr('font-size', this.value + 'px');
|
|
}
|
|
|
|
function changeIconShiftX() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers')
|
|
.select(id)
|
|
.select('text')
|
|
.attr('x', this.value + '%');
|
|
}
|
|
|
|
function changeIconShiftY() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers')
|
|
.select(id)
|
|
.select('text')
|
|
.attr('y', this.value + '%');
|
|
}
|
|
|
|
function toggleStyleSection() {
|
|
if (markerStyleSection.style.display === 'inline-block') {
|
|
markerEditor.querySelectorAll('button:not(#markerStyle)').forEach((b) => (b.style.display = 'inline-block'));
|
|
markerStyleSection.style.display = 'none';
|
|
} else {
|
|
markerEditor.querySelectorAll('button:not(#markerStyle)').forEach((b) => (b.style.display = 'none'));
|
|
markerStyleSection.style.display = 'inline-block';
|
|
}
|
|
}
|
|
|
|
function changeMarkerSize() {
|
|
const id = elSelected.attr('data-id');
|
|
document.querySelectorAll("use[data-id='" + id + "']").forEach((e) => {
|
|
const x = +e.dataset.x,
|
|
y = +e.dataset.y;
|
|
const desired = (e.dataset.size = +markerSize.value);
|
|
const size = Math.max(desired * 5 + 25 / scale, 1);
|
|
|
|
e.setAttribute('x', x - size / 2);
|
|
e.setAttribute('y', y - size / 2);
|
|
e.setAttribute('width', size);
|
|
e.setAttribute('height', size);
|
|
});
|
|
invokeActiveZooming();
|
|
}
|
|
|
|
function changePinStroke() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select(id).select('path').attr('fill', this.value);
|
|
d3.select(id).select('circle').attr('stroke', this.value);
|
|
}
|
|
|
|
function changePinFill() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select(id).select('circle').attr('fill', this.value);
|
|
}
|
|
|
|
function changeIconStrokeWidth() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers').select(id).select('text').attr('stroke-width', this.value);
|
|
}
|
|
|
|
function changeIconStroke() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers').select(id).select('text').attr('stroke', this.value);
|
|
}
|
|
|
|
function changeIconFill() {
|
|
const id = elSelected.attr('data-id');
|
|
d3.select('#defs-markers').select(id).select('text').attr('fill', this.value);
|
|
}
|
|
|
|
function togglePinVisibility() {
|
|
const id = elSelected.attr('data-id');
|
|
let show = 1;
|
|
if (this.className === 'icon-info-circled') {
|
|
this.className = 'icon-info';
|
|
show = 0;
|
|
} else this.className = 'icon-info-circled';
|
|
d3.select(id).select('circle').attr('opacity', show);
|
|
d3.select(id).select('path').attr('opacity', show);
|
|
}
|
|
|
|
function editMarkerLegend() {
|
|
const id = elSelected.attr('id');
|
|
editNotes(id, id);
|
|
}
|
|
|
|
function toggleAddMarker() {
|
|
document.getElementById('addMarker').click();
|
|
}
|
|
|
|
function removeMarker() {
|
|
const message = 'Are you sure you want to remove the marker? <br>This action cannot be reverted';
|
|
const onConfirm = () => {
|
|
const index = notes.findIndex((n) => n.id === elSelected.attr('id'));
|
|
if (index != -1) notes.splice(index, 1);
|
|
elSelected.remove();
|
|
$('#markerEditor').dialog('close');
|
|
};
|
|
confirmationDialog({title: 'Remove marker', message, confirm: 'Remove', onConfirm});
|
|
}
|
|
|
|
function closeMarkerEditor() {
|
|
unselect();
|
|
if (addMarker.classList.contains('pressed')) addMarker.classList.remove('pressed');
|
|
if (markerAdd.classList.contains('pressed')) markerAdd.classList.remove('pressed');
|
|
restoreDefaultEvents();
|
|
clearMainTip();
|
|
}
|
|
}
|