Merge pull request ondras#291 from Rad0van/master

Highlight foreign key relations on click
griadooss · Jan 13, 2020 · 68df5ac · 68df5ac
2 parents 3176b18 + ca243d0
commit 68df5ac
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/js/config.js b/js/config.js
@@ -11,6 +11,9 @@ var CONFIG = {
 	RELATION_THICKNESS: 2,
 	RELATION_SPACING: 15,
 	RELATION_COLORS: ["#000", "#800", "#080", "#008", "#088", "#808", "#088"],
+
+	RELATION_HIGHLIGHTED_COLOR: "#FF0000",
+	RELATION_HIGHLIGHTED_THICKNESS: 5,
 
 	STYLES: ["material-inspired", "original"],
 	MATERIAL_RELATION_COLORS: ["#323232", "#F44336", "#E91E63", "#9C27B0", "#3F51B5", "#673AB7", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFC107", "#FF5722", "#795548", "#607D8B"],

diff --git a/js/relation.js b/js/relation.js
@@ -7,6 +7,7 @@ SQL.Relation = function(owner, row1, row2) {
 	this.color = "#000";
 	this.hidden = false;
 	this.relationColors = CONFIG.RELATION_COLORS;
+	this.highlighted = null;
 	SQL.Visual.apply(this);
 
 	this.style = SQL.Designer.getOption("style");
@@ -62,6 +63,22 @@ SQL.Relation.prototype.getColor = function() {
 	return this.color;
 }
 
+SQL.Relation.prototype.highlight = function() {
+	if (this.highlighted) { return; }
+	this.highlighted = true;
+	this.dom[0].setAttribute("stroke", CONFIG.RELATION_HIGHLIGHTED_COLOR);
+	this.dom[0].setAttribute("stroke-width", CONFIG.RELATION_HIGHLIGHTED_THICKNESS);
+	this.redraw();
+}
+
+SQL.Relation.prototype.dehighlight = function() {
+	if (!this.highlighted) { return; }
+	this.highlighted = false;
+	this.dom[0].setAttribute("stroke", this.color);
+	this.dom[0].setAttribute("stroke-width", CONFIG.RELATION_THICKNESS);
+	this.redraw();
+}
+
 SQL.Relation.prototype.show = function() {
 	this.hidden = false;
 	for (var i=0;i<this.dom.length;i++) {

diff --git a/js/row.js b/js/row.js
@@ -46,12 +46,14 @@ SQL.Row.prototype._build = function() {
 SQL.Row.prototype.select = function() {
 	if (this.selected) { return; }
 	this.selected = true;
+	for (var i = 0; i < this.relations.length; i++) { this.relations[i].highlight(); }
 	this.redraw();
 }
 
 SQL.Row.prototype.deselect = function() {
 	if (!this.selected) { return; }
 	this.selected = false;
+	for (var i = 0; i < this.relations.length; i++) { this.relations[i].dehighlight(); }
 	this.redraw();
 	this.collapse();
 }