From 50faa40bad26189481e9d45c3c243527c25ec8f1 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Tue, 20 Dec 2022 20:41:51 +0100
Subject: [PATCH] apply color label also on note map, #3443

---
 src/public/app/widgets/note_map.js | 21 ++++++++++++++++-----
 src/routes/api/note_map.js         |  6 ++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/public/app/widgets/note_map.js b/src/public/app/widgets/note_map.js
index 62fb14a77..78af3ba75 100644
--- a/src/public/app/widgets/note_map.js
+++ b/src/public/app/widgets/note_map.js
@@ -94,8 +94,8 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
             .onZoom(zoom => this.setZoomLevel(zoom.k))
             .d3AlphaDecay(0.01)
             .d3VelocityDecay(0.08)
-            .nodeCanvasObject((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
-            .nodePointerAreaPaint((node, ctx) => this.paintNode(node, this.stringToColor(node.type), ctx))
+            .nodeCanvasObject((node, ctx) => this.paintNode(node, this.getColorForNode(node), ctx))
+            .nodePointerAreaPaint((node, ctx) => this.paintNode(node, this.getColorForNode(node), ctx))
             .nodePointerAreaPaint((node, color, ctx) => {
                 ctx.fillStyle = color;
                 ctx.beginPath();
@@ -151,7 +151,17 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         return mapRootNoteId;
     }
 
-    stringToColor(str) {
+    getColorForNode(node) {
+        if (node.color) {
+            return node.color;
+        } else if (this.widgetMode === 'ribbon' && node.id === this.noteId) {
+            return 'red'; // subtree root mark as red
+        } else {
+            return this.generateColorFromString(node.type);
+        }
+    }
+
+    generateColorFromString(str) {
         if (this.themeStyle === "dark") {
             str = "0" + str; // magic lightening modifier
         }
@@ -185,7 +195,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         const {x, y} = node;
         const size = this.noteIdToSizeMap[node.id];
 
-        ctx.fillStyle = (this.widgetMode === 'ribbon' && node.id === this.noteId) ? 'red' : color;
+        ctx.fillStyle = color;
         ctx.beginPath();
         ctx.arc(x, y, size, 0, 2 * Math.PI, false);
         ctx.fill();
@@ -253,10 +263,11 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
 
         const links = this.getGroupedLinks(resp.links);
 
-        this.nodes = resp.notes.map(([noteId, title, type]) => ({
+        this.nodes = resp.notes.map(([noteId, title, type, color]) => ({
             id: noteId,
             name: title,
             type: type,
+            color: color
         }));
 
         return {
diff --git a/src/routes/api/note_map.js b/src/routes/api/note_map.js
index 4485130a0..027900958 100644
--- a/src/routes/api/note_map.js
+++ b/src/routes/api/note_map.js
@@ -116,7 +116,8 @@ function getLinkMap(req) {
         return [
             note.noteId,
             note.getTitleOrProtected(),
-            note.type
+            note.type,
+            note.getLabelValue('color')
         ];
     });
 
@@ -175,7 +176,8 @@ function getTreeMap(req) {
         .map(note => [
             note.noteId,
             note.getTitleOrProtected(),
-            note.type
+            note.type,
+            note.getLabelValue('color')
         ]);
 
     const noteIds = new Set();