TreeComponent: Better colors (#2)

src/app/shared/components/tree/tree.component.ts

@@ -15,11 +15,47 @@ class HSLColor {
   public s: number;
   public l: number;
 
+  constructor (h: number, s: number, l: number){
+    this.h = h;
+    this.s = s;
+    this.l = l;
+  }
+
   toCSS() : string {
     return `hsl(${this.h}, ${this.s}%, ${this.l}%)`;
   }
 }
 
+function toHSL(hex : string) : HSLColor {
+  hex = hex.toUpperCase();
+  if(!hex.match(/^#[A-F0-9]{6}$/)){
+    return null;
+  }
+  let v = hex.match(/[A-F0-9]{2}/g);
+  let r = parseInt(v[0], 16) / 255;
+  let g = parseInt(v[1], 16) / 255;
+  let b = parseInt(v[2], 16) / 255;
+
+  let min = Math.min(r,g,b);
+  let max = Math.max(r,g,b);
+
+  let l = (max + min) / 2;
+  let s = (l < 0.5 ? (max-min)/(max+min) : (max-min)/(2.0 - max - min));
+  let h = (max == r ? (g-b)/(max-min) : (
+    max == g ? 2.0 + (b-r) / (max-min) :
+    4.0 + (r-g) / (max-min)
+  ));
+
+  h *= 60;
+  if(h < 0){
+    h += 360;
+  }
+
+  let hslColor = new HSLColor(Math.round(h), Math.round(s * 100), Math.round(l * 100));
+
+  return hslColor;
+}
+
 @Component({
   selector: "doctt-tree",
   templateUrl: "./tree.component.html",
@@ -29,40 +65,47 @@ export class TreeComponent implements OnInit {
   treeControl = new NestedTreeControl<DynamicFlatNode>(node => node.children);
   dataSource = new MatTreeNestedDataSource<DynamicFlatNode>();
 
-  private colorSat : number = 60;
-  private colorLum : number = 50;
-  private treeLevelMult : number = 1.0;
+  private colorSat: number = 60;
+  private colorLum: number = 50;
+  private treeLevelMult: number = 1.0;
+  private colors: Array<HSLColor> = [
+    toHSL("#fc5353"),
+    toHSL("#a7fc53"),
+    toHSL("#53fca7"),
+    toHSL("#53c4fc"),
+    toHSL("#5353fc")
+  ];
 
   constructor() {
     this.dataSource.data = null;
   }
 
-  load(tree: TreeContent){
+  load(tree: TreeContent) {
     console.log("Loading tree", tree);
     this.dataSource.data = this.toDataSource(tree.root);
     console.log(this.dataSource.data);
   }
 
-  toDataSource(root : TreeNode) : DynamicFlatNode[] {
-    let nodes : DynamicFlatNode[] = [];
+  toDataSource(root: TreeNode): DynamicFlatNode[] {
+    let nodes: DynamicFlatNode[] = [];
 
     let lastColor = 0;
 
-    if(root.children !== undefined){
+    if (root.children !== undefined) {
       let incr = 360.0 / root.children.length;
 
       this.treeLevelMult = root.children.length;
 
       let element = 0;
-      for (let child of root.children) {
-        let color: HSLColor = new HSLColor();
-        color.h = lastColor;
-        color.s = this.colorSat;
-        color.l = this.colorLum;
 
-        nodes.push(
-          this.getDynamicFlatNode(child, color, 0, element)
-        );
+      let level = 0;
+      if (root.children != null && root.children.length == 1) {
+        level = -1;
+      }
+
+      for (let child of root.children) {
+        let color: HSLColor = this.colors[element];
+        nodes.push(this.getDynamicFlatNode(child, color, level, element));
 
         lastColor += incr;
         element++;
@@ -72,25 +115,33 @@ export class TreeComponent implements OnInit {
     return nodes;
   }
 
-  getDynamicFlatNode(node : TreeNode, color: HSLColor, level: number, element: number) : DynamicFlatNode {
-    let dfn : DynamicFlatNode = {
+  getDynamicFlatNode(
+    node: TreeNode,
+    color: HSLColor,
+    level: number,
+    element: number
+  ): DynamicFlatNode {
+    if (level == 0 || level == -1) {
+      color = this.colors[element];
+    } else {
+      color = this.getColor(color, level, element);
+    }
+    let dfn: DynamicFlatNode = {
       name: node.id,
-      color: this.getColor(color, level, element)
+      color:
+        level == 0 || level == -1
+          ? color
+          : this.getColor(color, level, element + 1)
     };
 
-    console.log("DFN: ", level, dfn.color);
+    console.log(dfn.name, dfn.color);
 
-    if(node.children !== undefined){
+    if (node.children !== undefined) {
       dfn.children = [];
       let element = 0;
       for (const child of node.children) {
         dfn.children.push(
-          this.getDynamicFlatNode(
-            child,
-            color,
-            level + 1,
-            element
-          )
+          this.getDynamicFlatNode(child, color, level + 1, element)
         );
         element++;
       }
@@ -99,21 +150,18 @@ export class TreeComponent implements OnInit {
     return dfn;
   }
 
-  getColor(color: HSLColor, level: number, element: number) : HSLColor {
+  getColor(color: HSLColor, level: number, element: number): HSLColor {
+    let nc = new HSLColor(color.h, color.s, color.l);
 
-    let nc = new HSLColor();
-    nc.h = color.h;
-    nc.l = color.l;
-    nc.s = color.s;
+    nc.h += 3;
+    element += 1;
 
-    if(level != 0){
-      nc.h += 15 * element + 20 * level;
-    } else {
-      nc.h = color.h;
+    if (level != 0 && level != -1) {
+      nc.h += element * 10;
+      nc.l += 1;
+      //nc.h = nc.h % 360;
     }
 
-    console.log(nc.h);
-
     return nc;
   }