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

color picker behavior update

Browse source
This commit is contained in:
Azgaar 2021-05-05 01:36:23 +03:00 • committed by Peter
parent 295344b56d
commit 000d9ca2a2
3 changed files with 27 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ui/editors.js
View file

@ -469,7 +469,8 @@ function clearLegend() {
}
// draw color (fill) picker
function createPicker() {
function createPicker(hatching) {
const COLORS_IN_ROW = 14;
const pos = () => tip("Drag to change the picker position");
const cl = () => tip("Click to close the picker");
const closePicker = () => container.style("display", "none");
@ -672,10 +673,8 @@ function updatePickerColors() {
});
}
function openPicker(fill, callback) {
const picker = d3.select("#picker");
if (!picker.size()) createPicker();
d3.select("#pickerContainer").style("display", "block");
function openPicker(fill, callback, options = {allowHatching: true}) {
createPicker(options.allowHatching);
if (fill[0] === "#") {
const hsl = d3.hsl(fill);

6
modules/ui/layers.js
View file

@ -1942,10 +1942,12 @@ function drawResources() {
let resourcesHTML = "";
for (const i of pack.cells.i) {
if (!pack.cells.resource[i]) continue;
const resource = pack.resources.find(resource => resource.i === pack.cells.resource[i]);
const resource = Resources.get(pack.cells.resource[i]);
const [x, y] = pack.cells.p[i];
const stroke = Resources.getStroke(resource.color);
resourcesHTML += `<g>
<circle data-i="${resource.i}" cx=${x} cy=${y} r="3" fill="${resource.color}" stroke="${resource.stroke}" />
<circle data-i="${resource.i}" cx=${x} cy=${y} r="3" fill="${resource.color}" stroke="${stroke}" />
<use href="#${resource.icon}" x="${x-3}" y="${y-3}" width="6" height="6"/>
</g>`;
}

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

@ -17,7 +17,6 @@ function editResources() {
// add listeners
document.getElementById("resourcesEditorRefresh").addEventListener("click", resourcesEditorAddLines);
document.getElementById("resourcesEditStyle").addEventListener("click", () => editStyle("goods"));
document.getElementById("resourcesLegend").addEventListener("click", toggleLegend);
document.getElementById("resourcesPercentage").addEventListener("click", togglePercentageMode);
document.getElementById("resourcesExport").addEventListener("click", downloadResourcesData);
@ -28,9 +27,10 @@ function editResources() {
// // {i: 33, name: "Saltpeter", icon: "resource-saltpeter", color: "#e6e3e3", value: 8, chance: 2, model: "habitability", bonus: {artillery: 3}}
for (const r of pack.resources) {
const stroke = Resources.getStroke(r.color);
lines += `<div class="states resources" data-id=${r.i} data-name="${r.name}" data-color="${r.color}" data-chance="${r.chance}" data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}">
<svg data-tip="Resource icon. Click to change" width="2em" height="2em" class="icon">
<circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${r.stroke}"/>
<circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${stroke}"/>
<use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/>
</svg>
<input data-tip="Resource name. Click and type to change" class="resourceName" value="${r.name}" autocorrect="off" spellcheck="false">
@ -53,13 +53,29 @@ function editResources() {
// body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseenter", ev => resourceHighlightOn(ev)));
// body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseleave", ev => resourceHighlightOff(ev)));
// body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectResourceOnLineClick));
// body.querySelectorAll("rect.fillRect").forEach(el => el.addEventListener("click", resourceChangeColor));
body.querySelectorAll("svg.icon").forEach(el => el.addEventListener("click", resourceChangeColor));
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();}
applySorting(resourcesHeader);
$("#resourcesEditor").dialog({width: fitContent()});
}
function resourceChangeColor() {
const circle = this.querySelector("circle");
const resource = Resources.get(+this.parentNode.dataset.id);
const callback = function(fill) {
const stroke = Resources.getStroke(fill);
circle.setAttribute("fill", fill);
circle.setAttribute("stroke", stroke);
resource.color = fill;
resource.stroke = stroke;
goods.selectAll(`circle[data-i='${resource.i}']`).attr("fill", fill).attr("stroke", stroke);
}
openPicker(resource.color, callback, {allowHatching: false});
}
function toggleLegend() {
if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend
const data = pack.resources.filter(r => r.i && r.cells).sort((a, b) => b.cells - a.cells).map(r => [r.i, r.color, r.name]);