From d0500f19d6962fb68300900cdd5cc9b0861848ab Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 5 May 2021 01:36:23 +0300
Subject: [PATCH] color picker behavior update

---
 modules/ui/editors.js          |  9 ++++-----
 modules/ui/layers.js           |  6 ++++--
 modules/ui/resources-editor.js | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index df7291f1..ed0a29aa 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -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);
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 2c5d40b3..239a31c4 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -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>`;
   }
diff --git a/modules/ui/resources-editor.js b/modules/ui/resources-editor.js
index 759a83e7..be8cc542 100644
--- a/modules/ui/resources-editor.js
+++ b/modules/ui/resources-editor.js
@@ -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();