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

markers rework - editor start, dragging

Browse source
This commit is contained in:
Azgaar 2021-09-19 16:02:22 +03:00
parent 1023bb0676
commit def32b7f74
6 changed files with 116 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -2063,10 +2063,6 @@
<input id="markerSize" data-tip="Change marker size" type="range" min=.01 max=10 step=.1 value=1 style="width:12em"> <input id="markerSize" data-tip="Change marker size" type="range" min=.01 max=10 step=.1 value=1 style="width:12em">
<input id="markerBaseStroke" data-tip="Change pin stroke color" type="color" value="#ffffff"> <input id="markerBaseStroke" data-tip="Change pin stroke color" type="color" value="#ffffff">
<input id="markerBaseFill" data-tip="Change pin fill color" type="color" alue="#000000"> <input id="markerBaseFill" data-tip="Change pin fill color" type="color" alue="#000000">
<br><i data-tip="Change marker icon style" class="icon-star"></i>
<input id="markerIconStrokeWidth" data-tip="Change icon stroke width" type="range" min=0 max=1 step=.02 value=0 style="width:12em">
<input id="markerIconStroke" data-tip="Change icon stroke color. Ensure icon stroke width is non-zero" type="color" value="#3200ff">
<input id="markerIconFill" data-tip="Change icon fill color" type="color" value="#000000">
</div> </div>
<button id="markerToggleBubble" data-tip="Toggle pin (bubble) display" class="icon-info-circled"></button> <button id="markerToggleBubble" data-tip="Toggle pin (bubble) display" class="icon-info-circled"></button>

1
modules/load.js
View file

@ -815,6 +815,7 @@ function parseLoadedData(data) {
const riverPoints = []; const riverPoints = [];
const length = node.getTotalLength() / 2; const length = node.getTotalLength() / 2;
if (!length) continue;
const segments = Math.ceil(length / 6); const segments = Math.ceil(length / 6);
const increment = length / segments; const increment = length / segments;

45
modules/markers-generator.js
View file

@ -493,50 +493,5 @@ window.Markers = (function () {
return "marker" + i; return "marker" + i;
} }
function addMarkerGroup(id, icon, x, y, size) {
// TODO: remove and replace with individual markers rendering
const markers = svg.select("#defs-markers");
if (markers.select("#marker_" + id).size()) return;
const symbol = markers
.append("symbol")
.attr("id", "marker_" + id)
.attr("viewBox", "0 0 30 30");
symbol.append("path").attr("d", "M6,19 l9,10 L24,19").attr("fill", "#000000").attr("stroke", "none");
symbol.append("circle").attr("cx", 15).attr("cy", 15).attr("r", 10).attr("fill", "#ffffff").attr("stroke", "#000000").attr("stroke-width", 1);
symbol
.append("text")
.attr("x", x + "%")
.attr("y", y + "%")
.attr("fill", "#000000")
.attr("stroke", "#3200ff")
.attr("stroke-width", 0)
.attr("font-size", size + "px")
.attr("dominant-baseline", "central")
.text(icon);
}
function drawMarker(cell, type) {
const [x, y] = getMarkerCoordinates(cell);
const id = getNextId("marker");
const name = "#marker_" + type;
markers
.append("use")
.attr("id", id)
.attr("xlink:href", name)
.attr("data-id", name)
.attr("data-x", x)
.attr("data-y", y)
.attr("x", x - 15)
.attr("y", y - 30)
.attr("data-size", 1)
.attr("width", 30)
.attr("height", 30);
return id;
}
return {generate}; return {generate};
})(); })();

8
modules/ui/editors.js
View file

@ -29,7 +29,7 @@ function clicked() {
else if (grand.id === "burgIcons") editBurg(); else if (grand.id === "burgIcons") editBurg();
else if (parent.id === "ice") editIce(); else if (parent.id === "ice") editIce();
else if (parent.id === "terrain") editReliefIcon(); else if (parent.id === "terrain") editReliefIcon();
else if (parent.id === "markers") editMarker(); else if (grand.id === "markers") editMarker();
else if (grand.id === "coastline") editCoastline(); else if (grand.id === "coastline") editCoastline();
else if (great.id === "armies") editRegiment(); else if (great.id === "armies") editRegiment();
else if (pack.cells.t[i] === 1) { else if (pack.cells.t[i] === 1) {
@ -948,6 +948,12 @@ function selectIcon(initial, callback) {
}); });
} }
// add and register event listeners to clean up on editor closure
function listen(element, event, handler) {
element.addEventListener(event, handler);
return () => element.removeEventListener(event, handler);
}
// Calls the refresh functionality on all editors currently open. // Calls the refresh functionality on all editors currently open.
function refreshAllEditors() { function refreshAllEditors() {
TIME && console.time("refreshAllEditors"); TIME && console.time("refreshAllEditors");

6
modules/ui/layers.js
View file

@ -965,7 +965,9 @@ function drawStates() {
const bodyString = bodyData.map(d => `<path id="state${d[1]}" d="${d[0]}" fill="${d[2]}" stroke="none"/>`).join(""); const bodyString = bodyData.map(d => `<path id="state${d[1]}" d="${d[0]}" fill="${d[2]}" stroke="none"/>`).join("");
const gapString = gapData.map(d => `<path id="state-gap${d[1]}" d="${d[0]}" fill="none" stroke="${d[2]}"/>`).join(""); const gapString = gapData.map(d => `<path id="state-gap${d[1]}" d="${d[0]}" fill="none" stroke="${d[2]}"/>`).join("");
const clipString = bodyData.map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`).join(""); const clipString = bodyData.map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`).join("");
const haloString = haloData.map(d => `<path id="state-border${d[1]}" d="${d[0]}" clip-path="url(#state-clip${d[1]})" stroke="${d3.color(d[2]) ? d3.color(d[2]).darker().hex() : "#666666"}"/>`).join(""); const haloString = haloData
.map(d => `<path id="state-border${d[1]}" d="${d[0]}" clip-path="url(#state-clip${d[1]})" stroke="${d3.color(d[2]) ? d3.color(d[2]).darker().hex() : "#666666"}"/>`)
.join("");
statesBody.html(bodyString + gapString); statesBody.html(bodyString + gapString);
defs.select("#statePaths").html(clipString); defs.select("#statePaths").html(clipString);
@ -1522,7 +1524,7 @@ function drawMarkers() {
markers.html(html.join("")); markers.html(html.join(""));
} }
const getPin = (shape = "no", fill = "#fff", stroke = "#000") => { const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
if (shape === "bubble") return `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`; if (shape === "bubble") return `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`;
if (shape === "pin") return `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`; if (shape === "pin") return `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`;
if (shape === "square") return `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`; if (shape === "square") return `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`;

234
modules/ui/markers-editor.js
View file

@ -1,168 +1,113 @@
"use strict"; "use strict";
function editMarker() { function editMarker() {
if (customization) return; if (customization) return;
closeDialogs("#markerEditor, .stable"); closeDialogs(".stable");
$("#markerEditor").dialog();
const element = d3.event.target.parentElement;
elSelected = d3.select(element).call(d3.drag().on("start", dragMarker)).classed("draggable", true);
const marker = pack.markers.find(({i}) => Number(elSelected.attr("id").slice(6)) === i);
if (!marker) return;
// dom elements
const markerSelectGroup = document.getElementById("markerSelectGroup");
const markerIconSize = document.getElementById("markerIconSize");
const markerIconShiftX = document.getElementById("markerIconShiftX");
const markerIconShiftY = document.getElementById("markerIconShiftY");
const markerSize = document.getElementById("markerSize");
const markerBaseStroke = document.getElementById("markerBaseStroke");
const markerBaseFill = document.getElementById("markerBaseFill");
const markerToggleBubble = document.getElementById("markerToggleBubble");
const markerIconSelect = document.getElementById("markerIconSelect");
elSelected = d3.select(d3.event.target).call(d3.drag().on("start", dragMarker)).classed("draggable", true);
updateInputs(); updateInputs();
if (modules.editMarker) return;
modules.editMarker = true;
$("#markerEditor").dialog({ $("#markerEditor").dialog({
title: "Edit Marker", resizable: false, title: "Edit Marker",
position: {my: "center top+30", at: "bottom", of: d3.event, collision: "fit"}, resizable: false,
position: {my: "center top+30", at: "bottom", of: element, collision: "fit"},
close: closeMarkerEditor close: closeMarkerEditor
}); });
// add listeners const listeners = [
document.getElementById("markerGroup").addEventListener("click", toggleGroupSection); listen(markerSelectGroup, "change", changeGroup),
document.getElementById("markerAddGroup").addEventListener("click", toggleGroupInput); listen(document.getElementById("markerIcon"), "click", toggleIconSection),
document.getElementById("markerSelectGroup").addEventListener("change", changeGroup); listen(markerIconSize, "input", changeIconSize),
document.getElementById("markerInputGroup").addEventListener("change", createGroup); listen(markerIconShiftX, "input", changeIconShiftX),
document.getElementById("markerRemoveGroup").addEventListener("click", removeGroup); listen(markerIconShiftY, "input", changeIconShiftY),
listen(document.getElementById("markerIconSelect"), "click", selectMarkerIcon),
document.getElementById("markerIcon").addEventListener("click", toggleIconSection); listen(document.getElementById("markerStyle"), "click", toggleStyleSection),
document.getElementById("markerIconSize").addEventListener("input", changeIconSize); listen(markerSize, "input", changeMarkerSize),
document.getElementById("markerIconShiftX").addEventListener("input", changeIconShiftX); listen(markerBaseStroke, "input", changePinStroke),
document.getElementById("markerIconShiftY").addEventListener("input", changeIconShiftY); listen(markerBaseFill, "input", changePinFill),
document.getElementById("markerIconSelect").addEventListener("click", selectMarkerIcon); listen(markerToggleBubble, "click", togglePinVisibility),
listen(document.getElementById("markerLegendButton"), "click", editMarkerLegend),
document.getElementById("markerStyle").addEventListener("click", toggleStyleSection); listen(document.getElementById("markerAdd"), "click", toggleAddMarker),
document.getElementById("markerSize").addEventListener("input", changeMarkerSize); listen(document.getElementById("markerRemove"), "click", removeMarker)
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() { function dragMarker() {
const tr = parseTransform(this.getAttribute("transform")); const dx = +this.getAttribute("x") - d3.event.x;
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y; const dy = +this.getAttribute("y") - d3.event.y;
d3.event.on("drag", function () { d3.event.on("drag", function () {
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`; const {x, y} = d3.event;
this.setAttribute("transform", transform); this.setAttribute("x", dx + x);
this.setAttribute("y", dy + y);
});
d3.event.on("end", function () {
const {x, y} = d3.event;
this.setAttribute("x", rn(dx + x, 2));
this.setAttribute("y", rn(dy + y, 2));
const size = marker.size || 30;
const zoomSize = Math.max(rn(size / 5 + 24 / scale, 2), 1);
marker.x = rn(x + dx + zoomSize / 2, 1);
marker.y = rn(y + dy + zoomSize, 1);
}); });
} }
function updateInputs() { function updateInputs() {
const id = elSelected.attr("data-id"); const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000", fill = "#fff", pin = "bubble"} = marker;
const symbol = d3.select("#defs-markers").select(id);
const icon = symbol.select("text");
markerSelectGroup.value = id.slice(1); markerSelectGroup.value = type;
markerIconSize.value = parseFloat(icon.attr("font-size")); markerIconSize.value = px;
markerIconShiftX.value = parseFloat(icon.attr("x")); markerIconShiftX.value = dx;
markerIconShiftY.value = parseFloat(icon.attr("y")); markerIconShiftY.value = dy;
markerSize.value = elSelected.attr("data-size"); markerSize.value = size;
markerBaseStroke.value = symbol.select("path").attr("fill"); markerBaseStroke.value = stroke;
markerBaseFill.value = symbol.select("circle").attr("fill"); markerBaseFill.value = fill;
markerIconStrokeWidth.value = icon.attr("stroke-width"); markerToggleBubble.className = pin;
markerIconStroke.value = icon.attr("stroke"); markerIconSelect.innerHTML = icon;
markerIconFill.value = icon.attr("fill");
markerToggleBubble.className = symbol.select("circle").attr("opacity") === "0" ? "icon-info" : "icon-info-circled";
markerIconSelect.innerHTML = icon.text();
} }
function toggleGroupSection() { function toggleGroupSection() {
if (markerGroupSection.style.display === "inline-block") { if (markerGroupSection.style.display === "inline-block") {
markerEditor.querySelectorAll("button:not(#markerGroup)").forEach(b => b.style.display = "inline-block"); markerEditor.querySelectorAll("button:not(#markerGroup)").forEach(b => (b.style.display = "inline-block"));
markerGroupSection.style.display = "none"; markerGroupSection.style.display = "none";
} else { } else {
markerEditor.querySelectorAll("button:not(#markerGroup)").forEach(b => b.style.display = "none"); markerEditor.querySelectorAll("button:not(#markerGroup)").forEach(b => (b.style.display = "none"));
markerGroupSection.style.display = "inline-block"; 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() { function changeGroup() {
elSelected.attr("xlink:href", "#" + this.value); elSelected.attr("xlink:href", "#" + this.value);
elSelected.attr("data-id", "#" + 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";
alertMessage.innerHTML = "Are you sure you want to remove all markers of that type (" + count + ")?";
$("#alert").dialog({resizable: false, title: "Remove marker type",
buttons: {
Remove: function() {
$(this).dialog("close");
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");
},
Cancel: function() {$(this).dialog("close");}
}
});
}
function toggleIconSection() { function toggleIconSection() {
console.log(marker);
if (markerIconSection.style.display === "inline-block") { if (markerIconSection.style.display === "inline-block") {
markerEditor.querySelectorAll("button:not(#markerIcon)").forEach(b => b.style.display = "inline-block"); markerEditor.querySelectorAll("button:not(#markerIcon)").forEach(b => (b.style.display = "inline-block"));
markerIconSection.style.display = "none"; markerIconSection.style.display = "none";
markerIconSelect.style.display = "none"; markerIconSelect.style.display = "none";
} else { } else {
markerEditor.querySelectorAll("button:not(#markerIcon)").forEach(b => b.style.display = "none"); markerEditor.querySelectorAll("button:not(#markerIcon)").forEach(b => (b.style.display = "none"));
markerIconSection.style.display = "inline-block"; markerIconSection.style.display = "inline-block";
markerIconSelect.style.display = "inline-block"; markerIconSelect.style.display = "inline-block";
} }
@ -178,25 +123,34 @@ function editMarker() {
function changeIconSize() { function changeIconSize() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
d3.select("#defs-markers").select(id).select("text").attr("font-size", this.value + "px"); d3.select("#defs-markers")
.select(id)
.select("text")
.attr("font-size", this.value + "px");
} }
function changeIconShiftX() { function changeIconShiftX() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
d3.select("#defs-markers").select(id).select("text").attr("x", this.value + "%"); d3.select("#defs-markers")
.select(id)
.select("text")
.attr("x", this.value + "%");
} }
function changeIconShiftY() { function changeIconShiftY() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
d3.select("#defs-markers").select(id).select("text").attr("y", this.value + "%"); d3.select("#defs-markers")
.select(id)
.select("text")
.attr("y", this.value + "%");
} }
function toggleStyleSection() { function toggleStyleSection() {
if (markerStyleSection.style.display === "inline-block") { if (markerStyleSection.style.display === "inline-block") {
markerEditor.querySelectorAll("button:not(#markerStyle)").forEach(b => b.style.display = "inline-block"); markerEditor.querySelectorAll("button:not(#markerStyle)").forEach(b => (b.style.display = "inline-block"));
markerStyleSection.style.display = "none"; markerStyleSection.style.display = "none";
} else { } else {
markerEditor.querySelectorAll("button:not(#markerStyle)").forEach(b => b.style.display = "none"); markerEditor.querySelectorAll("button:not(#markerStyle)").forEach(b => (b.style.display = "none"));
markerStyleSection.style.display = "inline-block"; markerStyleSection.style.display = "inline-block";
} }
} }
@ -204,8 +158,9 @@ function editMarker() {
function changeMarkerSize() { function changeMarkerSize() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
document.querySelectorAll("use[data-id='" + id + "']").forEach(e => { document.querySelectorAll("use[data-id='" + id + "']").forEach(e => {
const x = +e.dataset.x, y = +e.dataset.y; const x = +e.dataset.x,
const desired = e.dataset.size = +markerSize.value; y = +e.dataset.y;
const desired = (e.dataset.size = +markerSize.value);
const size = Math.max(desired * 5 + 25 / scale, 1); const size = Math.max(desired * 5 + 25 / scale, 1);
e.setAttribute("x", x - size / 2); e.setAttribute("x", x - size / 2);
@ -245,8 +200,10 @@ function editMarker() {
function togglePinVisibility() { function togglePinVisibility() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
let show = 1; let show = 1;
if (this.className === "icon-info-circled") {this.className = "icon-info"; show = 0; } if (this.className === "icon-info-circled") {
else 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("circle").attr("opacity", show);
d3.select(id).select("path").attr("opacity", show); d3.select(id).select("path").attr("opacity", show);
} }
@ -262,7 +219,9 @@ function editMarker() {
function removeMarker() { function removeMarker() {
alertMessage.innerHTML = "Are you sure you want to remove the marker?"; alertMessage.innerHTML = "Are you sure you want to remove the marker?";
$("#alert").dialog({resizable: false, title: "Remove marker", $("#alert").dialog({
resizable: false,
title: "Remove marker",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -271,12 +230,16 @@ function editMarker() {
elSelected.remove(); elSelected.remove();
$("#markerEditor").dialog("close"); $("#markerEditor").dialog("close");
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function closeMarkerEditor() { function closeMarkerEditor() {
listeners.forEach(removeListener => removeListener());
unselect(); unselect();
if (addMarker.classList.contains("pressed")) addMarker.classList.remove("pressed"); if (addMarker.classList.contains("pressed")) addMarker.classList.remove("pressed");
if (markerAdd.classList.contains("pressed")) markerAdd.classList.remove("pressed"); if (markerAdd.classList.contains("pressed")) markerAdd.classList.remove("pressed");
@ -284,4 +247,3 @@ function editMarker() {
clearMainTip(); clearMainTip();
} }
} }