From fedc3ea5a3495821f897e542647861ed373cd844 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 5 May 2021 01:36:23 +0300 Subject: [PATCH] color picker behavior update --- index.html | 1 - modules/resources-generator.js | 18 ++++++++-------- modules/ui/editors.js | 39 +++++++++++++++------------------- modules/ui/layers.js | 6 ++++-- modules/ui/resources-editor.js | 22 ++++++++++++++++--- modules/ui/style.js | 2 +- 6 files changed, 50 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 592dd2b7..a6477cab 100644 --- a/index.html +++ b/index.html @@ -3018,7 +3018,6 @@
- diff --git a/modules/resources-generator.js b/modules/resources-generator.js index 89505fb6..38384d7f 100644 --- a/modules/resources-generator.js +++ b/modules/resources-generator.js @@ -102,17 +102,14 @@ cells = pack.cells; cells.resource = new Uint8Array(cells.i.length); // resources array [0, 255] const resourceMaxCells = Math.ceil(200 * cells.i.length / 5000); - - pack.resources = getDefault().map(resource => { - resource.cells = 0; - resource.stroke = d3.color(resource.color).darker(2).hex(); - return resource; - }); - + pack.resources = getDefault(); + pack.resources.forEach(r => r.cells = 0); + + const skipGlaciers = biomesData.habitability[11] === 0; const shuffledCells = d3.shuffle(cells.i.slice()); for (const i of shuffledCells) { if (!(i%10)) d3.shuffle(pack.resources); - if (cells.biome[i] === 11) continue; // ignore glaciers + if (skipGlaciers && cells.biome[i] === 11) continue; const rnd = Math.random() * 100; for (const resource of pack.resources) { @@ -131,6 +128,9 @@ console.table(pack.resources); } -return {generate, getDefault}; + const getStroke = color => d3.color(color).darker(2).hex(); + const get = i => pack.resources.find(resource => resource.i === i); + +return {generate, getDefault, getStroke, get}; }))); diff --git a/modules/ui/editors.js b/modules/ui/editors.js index cac16d4c..815efaf8 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -324,15 +324,14 @@ 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 = () => contaiter.style("display", "none"); + const closePicker = () => container.remove(); - const contaiter = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%"); - contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", .2) - .on("mousemove", cl).on("click", closePicker); - const picker = contaiter.append("g").attr("id", "picker").call(d3.drag().filter(() => event.target.tagName !== "INPUT").on("start", dragPicker)); + const container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%"); + const picker = container.append("g").attr("id", "picker").call(d3.drag().filter(() => event.target.tagName !== "INPUT").on("start", dragPicker)); const controls = picker.append("g").attr("id", "pickerControls"); const h = controls.append("g"); @@ -375,23 +374,21 @@ function createPicker() { spaces.selectAll("input").on("change", changePickerSpace); const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333"); - const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333"); - const hatching = d3.selectAll("g#hatching > pattern"); - const number = hatching.size(); - - const clr = d3.range(number).map(i => d3.hsl(i/number*360, .7, .7).hex()); + const clr = d3.range(COLORS_IN_ROW).map(i => d3.hsl(i/COLORS_IN_ROW*360, .7, .7).hex()); clr.forEach(function(d, i) { colors.append("rect").attr("id", "picker_" + d).attr("fill", d).attr("class", i?"":"selected") .attr("x", i*22+4).attr("y", 40).attr("width", 16).attr("height", 16); }); - - hatching.each(function(d, i) { - hatches.append("rect").attr("id", "picker_" + this.id).attr("fill", "url(#" + this.id + ")") - .attr("x", i*22+4).attr("y", 61).attr("width", 16).attr("height", 16); - }); - colors.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the color")); - hatches.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the hatching")); + + if (hatching) { + const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333"); + d3.selectAll("g#hatching > pattern").each(function(d, i) { + hatches.append("rect").attr("id", "picker_" + this.id).attr("fill", "url(#" + this.id + ")") + .attr("x", i*22+4).attr("y", 61).attr("width", 16).attr("height", 16); + }); + hatches.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the hatching")); + } // append box const bbox = picker.node().getBBox(); @@ -445,10 +442,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); diff --git a/modules/ui/layers.js b/modules/ui/layers.js index a373c0fd..b158b778 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1330,10 +1330,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 += ` - + `; } diff --git a/modules/ui/resources-editor.js b/modules/ui/resources-editor.js index 2de21aa7..a9ddaf84 100644 --- a/modules/ui/resources-editor.js +++ b/modules/ui/resources-editor.js @@ -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 += `
- + @@ -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]); diff --git a/modules/ui/style.js b/modules/ui/style.js index be11202c..9386efe4 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -62,7 +62,7 @@ function selectStyleElement() { } // stroke color and width - if (["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay", "goods"].includes(sel)) { + if (["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay"].includes(sel)) { styleStroke.style.display = "block"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke"); styleStrokeWidth.style.display = "block";