Implemented Color Generation #453

orientechnologies · Feb 21, 2017 · 07fd394 · 07fd394
1 parent 8fcf1a2
commit 07fd394
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 9 deletions.
diff --git a/src/app/core/services/schema.service.ts b/src/app/core/services/schema.service.ts
@@ -4,14 +4,15 @@ import {FormatArrayPipe} from '../pipes';
 import {Injectable} from "@angular/core";
 
 
-declare var angular : any;
+declare var angular: any;
+declare var d3: any;
 
 @Injectable()
 class SchemaService {
 
   private systems;
 
-  constructor(private commandService : CommandService,private  arrayPipe: FormatArrayPipe) {
+  constructor(private commandService: CommandService, private  arrayPipe: FormatArrayPipe) {
     this.arrayPipe = arrayPipe;
 
     this.systems = ["OUser",
@@ -246,9 +247,36 @@ class SchemaService {
     }
     return sup == 'E';
   }
+
+
+  colors(classes) {
+    let val = classes.map((c) => hashCode(c.name));
+    val.sort((a, b) => {
+      return a - b;
+    });
+    let color = d3.scale.category20()
+      .domain([val[0], val[val.length - 1]])
+    return color;
+  }
+
+
+  hash(cls) {
+    return hashCode(cls);
+  }
 }
 
 
+function hashCode(str) {
+  var hash = 0;
+  if (str.length == 0) return hash;
+  for (let i = 0; i < str.length; i++) {
+    let char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash;
+}
+
 angular.module('schema.services', []).factory(`SchemaService`, downgradeInjectable(SchemaService));
 
 export {SchemaService};
diff --git a/src/controllers/schema-controller.js b/src/controllers/schema-controller.js
@@ -68,7 +68,9 @@ schemaModule.controller("SchemaController", ['$scope', '$routeParams', '$locatio
   $scope.numberOfPage = new Array(Math.ceil($scope.listClassesTotal.length / $scope.countPage));
   $scope.listClasses = $scope.listClassesTotal.slice(0, $scope.countPage);
 
-  $scope.colors = d3.scale.category20();
+  // $scope.colors = d3.scale.category20();
+
+  $scope.colors = SchemaService.colors($scope.listClassesTotal);
 
   $scope.tab = 'user';
 
@@ -88,8 +90,8 @@ schemaModule.controller("SchemaController", ['$scope', '$routeParams', '$locatio
     $scope.listClassesTotal.forEach(function (c) {
       if (!$scope.config.config.classes[c.name]) {
         $scope.config.config.classes[c.name] = {}
-        $scope.config.config.classes[c.name].fill = d3.rgb($scope.colors(c.name.toString(2))).toString();
-        $scope.config.config.classes[c.name].stroke = d3.rgb($scope.colors(c.name.toString(2))).darker().toString();
+        $scope.config.config.classes[c.name].fill = d3.rgb($scope.colors(SchemaService.hash(c.name))).toString();
+        $scope.config.config.classes[c.name].stroke = d3.rgb($scope.colors(SchemaService.hash(c.name))).darker().toString();
       }
     })
   })

diff --git a/src/widgets/orientdb-graphviz.js b/src/widgets/orientdb-graphviz.js
@@ -30,7 +30,10 @@ let OrientGraph = (function () {
     this.nodes = [];
     this.classesLegends = [];
     this.force = d3.layout.force();
-    this.colors = d3.scale.category20();
+
+
+    this.colors = createColors(this.metadata.classes);
+    // this.colors = d3.scale.category20();
     var self = this;
     this.selected = null;
     this.dragNode = null;
@@ -56,6 +59,34 @@ let OrientGraph = (function () {
       return ctoc;
     }
 
+    function createColors(classes) {
+      let val = classes.map((c) => hashCode(c.name));
+      val.sort((a, b) => {
+        return a - b;
+      });
+      let color = d3.scale.category20()
+        .domain([val[0], val[val.length - 1]])
+      classes.forEach((c) => {
+        color(hash(c.name));
+      })
+      return color;
+    }
+
+    function hashCode(str) {
+      var hash = 0;
+      if (str.length == 0) return hash;
+      for (let i = 0; i < str.length; i++) {
+        let char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash; // Convert to 32bit integer
+      }
+      return hash;
+    }
+
+    function hash(cls) {
+      return hashCode(cls);
+    }
+
     function discoverVertex(clazz) {
       var sup = clazz;
       var iterator = clazz;
@@ -1059,7 +1090,7 @@ let OrientGraph = (function () {
       var clsName = getClazzName(d);
       var fill = self.getClazzConfigVal(clsName, "fill");
       if (!fill) {
-        fill = d3.rgb(self.colors(clsName.toString(2))).toString();
+        fill = d3.rgb(self.colors(hash(clsName))).toString();
         self.changeClazzConfig(clsName, "fill", fill);
       }
       return fill;
@@ -1069,7 +1100,9 @@ let OrientGraph = (function () {
       var clsName = getClazzName(d);
       var stroke = self.getClazzConfigVal(clsName, "stroke");
       if (!stroke) {
-        stroke = d3.rgb(self.colors(clsName.toString(2))).darker().toString();
+
+        stroke = d3.rgb(self.colors(hash(clsName))).darker().toString();
+
         self.changeClazzConfig(clsName, "stroke", stroke);
       }
       return stroke;
@@ -1175,7 +1208,6 @@ let OrientGraph = (function () {
         var realPos = calculateRelPos(d);
 
 
-        console.log(realPos);
 
         if (realPos == 0) {
           var paddingSource = 5;