mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
refactor(es modules): continue migration
This commit is contained in:
Azgaar
parent
4a04a8622d
commit
922c6e2431
39 changed files with 551 additions and 589 deletions
|
|
@ -2,35 +2,8 @@ import {restoreDefaultEvents} from "/src/scripts/events";
|
|||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {byId} from "/src/utils/shorthands";
|
||||
|
||||
// on viewbox click event - run function based on target
|
||||
function clicked() {
|
||||
const el = d3.event.target;
|
||||
if (!el || !el.parentElement || !el.parentElement.parentElement) return;
|
||||
const parent = el.parentElement;
|
||||
const grand = parent.parentElement;
|
||||
const great = grand.parentElement;
|
||||
const p = d3.mouse(this);
|
||||
const i = findCell(p[0], p[1]);
|
||||
|
||||
if (grand.id === "emblems") editEmblem();
|
||||
else if (parent.id === "rivers") editRiver(el.id);
|
||||
else if (grand.id === "routes") editRoute();
|
||||
else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
|
||||
else if (grand.id === "burgLabels") editBurg();
|
||||
else if (grand.id === "burgIcons") editBurg();
|
||||
else if (parent.id === "ice") editIce();
|
||||
else if (parent.id === "terrain") editReliefIcon();
|
||||
else if (grand.id === "markers" || great.id === "markers") editMarker();
|
||||
else if (grand.id === "coastline") editCoastline();
|
||||
else if (great.id === "armies") editRegiment();
|
||||
else if (pack.cells.t[i] === 1) {
|
||||
const node = byId("island_" + pack.cells.f[i]);
|
||||
editCoastline(node);
|
||||
} else if (grand.id === "lakes") editLake();
|
||||
}
|
||||
|
||||
// clear elSelected variable
|
||||
function unselect() {
|
||||
export function unselect() {
|
||||
restoreDefaultEvents();
|
||||
if (!elSelected) return;
|
||||
elSelected.call(d3.drag().on("drag", null)).attr("class", null);
|
||||
|
|
@ -40,7 +13,7 @@ function unselect() {
|
|||
}
|
||||
|
||||
// close all dialogs except stated
|
||||
function closeDialogs(except = "#except") {
|
||||
export function closeDialogs(except = "#except") {
|
||||
try {
|
||||
$(".dialog:visible")
|
||||
.not(except)
|
||||
|
|
@ -51,7 +24,7 @@ function closeDialogs(except = "#except") {
|
|||
}
|
||||
|
||||
// move brush radius circle
|
||||
function moveCircle(x, y, r = 20) {
|
||||
export function moveCircle(x, y, r = 20) {
|
||||
let circle = byId("brushCircle");
|
||||
if (!circle) {
|
||||
const html = /* html */ `<circle id="brushCircle" cx=${x} cy=${y} r=${r}></circle>`;
|
||||
|
|
@ -63,15 +36,10 @@ function moveCircle(x, y, r = 20) {
|
|||
}
|
||||
}
|
||||
|
||||
function removeCircle() {
|
||||
export function removeCircle() {
|
||||
if (byId("brushCircle")) byId("brushCircle").remove();
|
||||
}
|
||||
|
||||
// get browser-defined fit-content
|
||||
function fitContent() {
|
||||
return !window.chrome ? "-moz-max-content" : "fit-content";
|
||||
}
|
||||
|
||||
// apply sorting behaviour for lines on Editor header click
|
||||
document.querySelectorAll(".sortable").forEach(function (event) {
|
||||
event.on("click", function () {
|
||||
|
|
@ -348,118 +316,6 @@ function getMFCGlink(burg) {
|
|||
return url.toString();
|
||||
}
|
||||
|
||||
// draw legend box
|
||||
function drawLegend(name, data) {
|
||||
legend.selectAll("*").remove(); // fully redraw every time
|
||||
legend.attr("data", data.join("|")); // store data
|
||||
|
||||
const itemsInCol = +styleLegendColItems.value;
|
||||
const fontSize = +legend.attr("font-size");
|
||||
const backClr = styleLegendBack.value;
|
||||
const opacity = +styleLegendOpacity.value;
|
||||
|
||||
const lineHeight = Math.round(fontSize * 1.7);
|
||||
const colorBoxSize = Math.round(fontSize / 1.7);
|
||||
const colOffset = fontSize;
|
||||
const vOffset = fontSize / 2;
|
||||
|
||||
// append items
|
||||
const boxes = legend.append("g").attr("stroke-width", 0.5).attr("stroke", "#111111").attr("stroke-dasharray", "none");
|
||||
const labels = legend.append("g").attr("fill", "#000000").attr("stroke", "none");
|
||||
|
||||
const columns = Math.ceil(data.length / itemsInCol);
|
||||
for (let column = 0, i = 0; column < columns; column++) {
|
||||
const linesInColumn = Math.ceil(data.length / columns);
|
||||
const offset = column ? colOffset * 2 + legend.node().getBBox().width : colOffset;
|
||||
|
||||
for (let l = 0; l < linesInColumn && data[i]; l++, i++) {
|
||||
boxes
|
||||
.append("rect")
|
||||
.attr("fill", data[i][1])
|
||||
.attr("x", offset)
|
||||
.attr("y", lineHeight + l * lineHeight + vOffset)
|
||||
.attr("width", colorBoxSize)
|
||||
.attr("height", colorBoxSize);
|
||||
|
||||
labels
|
||||
.append("text")
|
||||
.text(data[i][2])
|
||||
.attr("x", offset + colorBoxSize * 1.6)
|
||||
.attr("y", fontSize / 1.6 + lineHeight + l * lineHeight + vOffset);
|
||||
}
|
||||
}
|
||||
|
||||
// append label
|
||||
const offset = colOffset + legend.node().getBBox().width / 2;
|
||||
labels
|
||||
.append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("font-size", "1.2em")
|
||||
.attr("id", "legendLabel")
|
||||
.text(name)
|
||||
.attr("x", offset)
|
||||
.attr("y", fontSize * 1.1 + vOffset / 2);
|
||||
|
||||
// append box
|
||||
const bbox = legend.node().getBBox();
|
||||
const width = bbox.width + colOffset * 2;
|
||||
const height = bbox.height + colOffset / 2 + vOffset;
|
||||
|
||||
legend
|
||||
.insert("rect", ":first-child")
|
||||
.attr("id", "legendBox")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("fill", backClr)
|
||||
.attr("fill-opacity", opacity);
|
||||
|
||||
fitLegendBox();
|
||||
}
|
||||
|
||||
// fit Legend box to canvas size
|
||||
function fitLegendBox() {
|
||||
if (!legend.selectAll("*").size()) return;
|
||||
const px = isNaN(+legend.attr("data-x")) ? 99 : legend.attr("data-x") / 100;
|
||||
const py = isNaN(+legend.attr("data-y")) ? 93 : legend.attr("data-y") / 100;
|
||||
const bbox = legend.node().getBBox();
|
||||
const x = rn(svgWidth * px - bbox.width),
|
||||
y = rn(svgHeight * py - bbox.height);
|
||||
legend.attr("transform", `translate(${x},${y})`);
|
||||
}
|
||||
|
||||
// draw legend with the same data, but using different settings
|
||||
function redrawLegend() {
|
||||
if (!legend.select("rect").size()) return;
|
||||
const name = legend.select("#legendLabel").text();
|
||||
const data = legend
|
||||
.attr("data")
|
||||
.split("|")
|
||||
.map(l => l.split(","));
|
||||
drawLegend(name, data);
|
||||
}
|
||||
|
||||
function dragLegendBox() {
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x = +tr[0] - d3.event.x,
|
||||
y = +tr[1] - d3.event.y;
|
||||
const bbox = legend.node().getBBox();
|
||||
|
||||
d3.event.on("drag", function () {
|
||||
const px = rn(((x + d3.event.x + bbox.width) / svgWidth) * 100, 2);
|
||||
const py = rn(((y + d3.event.y + bbox.height) / svgHeight) * 100, 2);
|
||||
const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
|
||||
legend.attr("transform", transform).attr("data-x", px).attr("data-y", py);
|
||||
});
|
||||
}
|
||||
|
||||
function clearLegend() {
|
||||
legend.selectAll("*").remove();
|
||||
legend.attr("data", null);
|
||||
}
|
||||
|
||||
// draw color (fill) picker
|
||||
function createPicker() {
|
||||
const pos = () => tip("Drag to change the picker position");
|
||||
|
|
@ -1097,7 +953,7 @@ function selectIcon(initial, callback) {
|
|||
};
|
||||
|
||||
$("#iconSelector").dialog({
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
title: "Select Icon",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue