backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 03:51:23 +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 df1ee1b5a3
commit d0500f19d6
3 changed files with 24 additions and 7 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>`;
}

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

@ -451,6 +451,22 @@ function editResources() {
confirmationDialog({title: 'Restore default resources', message, confirm: 'Restore', onConfirm});
}
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();