relation path colors

griadooss · Jul 26, 2019 · a0d757f · a0d757f
1 parent 38c7400
commit a0d757f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/js/relation.js b/js/relation.js
@@ -4,6 +4,7 @@ SQL.Relation = function(owner, row1, row2) {
 	this.owner = owner;
 	this.row1 = row1;
 	this.row2 = row2;
+	this.colorIndex = 0;
 	this.color = "#000";
 	this.hidden = false;
 	SQL.Visual.apply(this);
@@ -12,10 +13,11 @@ SQL.Relation = function(owner, row1, row2) {
 	var all = row1.relations.concat(row2.relations);
 	if (all.length) { /* inherit */
 		this.color = all[0].getColor();
+		this.colorIndex = all[0].getColorIndex();
 	} else if (CONFIG.RELATION_COLORS) { /* pick next */
 		SQL.Relation._counter++;
-		var colorIndex = SQL.Relation._counter - 1;
-		this.color = CONFIG.RELATION_COLORS[colorIndex % CONFIG.RELATION_COLORS.length];
+		this.colorIndex = (SQL.Relation._counter - 1) % CONFIG.RELATION_COLORS.length;
+		this.color = CONFIG.RELATION_COLORS[this.colorIndex];
 	}
 
 	this.row1.addRelation(this);
@@ -25,6 +27,7 @@ SQL.Relation = function(owner, row1, row2) {
 	if (this.owner.vector) {
 		var path = document.createElementNS(this.owner.svgNS, "path");
 		path.setAttribute("stroke", this.color);
+		path.setAttribute("class", "relation_" + this.colorIndex);
 		path.setAttribute("stroke-width", CONFIG.RELATION_THICKNESS);
 		path.setAttribute("fill", "none");
 		this.owner.dom.svg.appendChild(path);
@@ -51,6 +54,10 @@ SQL.Relation.prototype.getColor = function() {
 	return this.color;
 }
 
+SQL.Relation.prototype.getColorIndex = function() {
+	return this.colorIndex;
+}
+
 SQL.Relation.prototype.show = function() {
 	this.hidden = false;
 	for (var i=0;i<this.dom.length;i++) {

diff --git a/styles/material-inspired.css b/styles/material-inspired.css
@@ -283,7 +283,7 @@ select optgroup {
 }
 
 #bar input:hover {
-	background-color: #e9115d;
+	background-color: #de2665;
 	color: #fff;
 }
 
@@ -318,7 +318,7 @@ select optgroup {
 }
 
 #toggle:hover {
-	background-color: #e9115d;
+	background-color: #de2665;
 }
 
 #toggle.on:hover {
@@ -523,7 +523,7 @@ select optgroup {
 }
 
 #io input[type=button]:active {
-	background-color: #f2f2f2; 
+	background-color: #f2f2f2;
 	transition: all .2s ease-out;
 }
 
@@ -580,4 +580,32 @@ select optgroup {
 	background: rgba(255, 64, 129, 0.5);
 	opacity: 0.5;
 	visibility: hidden;
+}
+
+.relation_0 {
+	stroke: #673AB7;
+}
+
+.relation_1 {
+	stroke: #F44336;
+}
+
+.relation_2 {
+	stroke: #8BC34A;
+}
+
+.relation_3 {
+	stroke: #00BCD4;
+}
+
+.relation_4 {
+	stroke: #4CAF50;
+}
+
+.relation_5 {
+	stroke: #FF5722;
+}
+
+.relation_6 {
+	stroke: #FFC107;
 }