The border color should be a darker version of the node's background …

…color
kuzudb · Mar 19, 2024 · 04b7646 · 04b7646
1 parent a6f67ed
commit 04b7646
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/src/components/SchemaView/SchemaViewMain.vue b/src/components/SchemaView/SchemaViewMain.vue
@@ -465,7 +465,7 @@ export default {
           },
           comboId: n.rdf ? n.rdf : NULL_PLACEHOLDER_RDF_GRAPH,
         };
-        returnVal.style.stroke = G6Utils.shadeColor(returnVal.style.fill, -20);
+        returnVal.style.stroke = G6Utils.shadeColor(returnVal.style.fill);
         return returnVal;
       });
 

diff --git a/src/store/SettingsStore.js b/src/store/SettingsStore.js
@@ -8,17 +8,18 @@ import {
   GPT_MODELS,
   IRI_PROPERTY_NAME,
 } from "../utils/Constants";
+import G6Utils from "../utils/G6Utils";
 
 const COLOR_PALETTE = [
-  "#76b7b2",  // teal
-  "#9c755f",  // brown
-  "#e58d96",  // pink
-  "#d5b441",  // yellow
-  "#af7aa1",  // purple
-  "#d97f27",  // orange
-  "#e15759",  // red
-  "#59a14f",  // green
-  "#4e79a7",  // blue
+  "#76b7b2", // teal
+  "#9c755f", // brown
+  "#e58d96", // pink
+  "#d5b441", // yellow
+  "#af7aa1", // purple
+  "#d97f27", // orange
+  "#e15759", // red
+  "#59a14f", // green
+  "#4e79a7", // blue
 ];
 
 const NULL_COLOR = "#d9d9d9";
@@ -39,7 +40,7 @@ export const useSettingsStore = defineStore("settings", {
           },
           size: 40,
           style: {
-            lineWidth: 0,
+            lineWidth: 3,
             fill: "#FF0000",
           },
         },
@@ -143,6 +144,7 @@ export const useSettingsStore = defineStore("settings", {
         color = randomcolor({ luminosity: "dark", hue: "random" });
       }
       g6Settings.style.fill = color;
+      g6Settings.style.stroke = G6Utils.shadeColor(color);
       let primaryKey = node.properties.filter((p) => p.isPrimaryKey)[0];
       if (!primaryKey) {
         primaryKey = node.properties[0];
@@ -219,6 +221,12 @@ export const useSettingsStore = defineStore("settings", {
         const nodeSettings =
           storedGraphViz.nodes[node.name] || this.initDefaultNode(node);
         this.graphViz.nodes[node.name] = nodeSettings;
+        // Migrate old settings
+        this.graphViz.nodes[node.name].g6Settings.style.stroke =
+          G6Utils.shadeColor(
+            this.graphViz.nodes[node.name].g6Settings.style.fill
+          );
+        this.graphViz.nodes[node.name].g6Settings.style.lineWidth = 3;
       });
 
       schema.relTables.forEach((rel) => {

diff --git a/src/utils/G6Utils.js b/src/utils/G6Utils.js
@@ -2,6 +2,7 @@ class G6Utils {
   constructor() {
     this.delta = 0.05; // used for zooming, copied from G6
     this.zoomSensitivity = 2; // used for zooming, copied from G6
+    this.colorShadeHash = {}; // cache for shadeColor, this is used to avoid recalculating the same color shade
   }
 
   // Toolbar actions copied from https://github.com/antvis/G6/blob/abca3c0845182c636b43163257f9439aa3d7e738/packages/plugin/src/toolBar/
@@ -78,7 +79,11 @@ class G6Utils {
     return str;
   }
 
-  shadeColor(color, percent) {
+  shadeColor(color, percent=-20) {
+    if (this.colorShadeHash[color] && this.colorShadeHash[color][percent]) {
+      return this.colorShadeHash[color][percent];
+    }
+
     let R = parseInt(color.substring(1, 3), 16);
     let G = parseInt(color.substring(3, 5), 16);
     let B = parseInt(color.substring(5, 7), 16);
@@ -99,6 +104,11 @@ class G6Utils {
     let GG = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16);
     let BB = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16);
 
+    if (!this.colorShadeHash[color]) {
+      this.colorShadeHash[color] = {};
+    }
+    this.colorShadeHash[color][percent] = "#" + RR + GG + BB;
+
     return "#" + RR + GG + BB;
   }
 }