diff --git a/README b/README
index 902d5a45aefd206fdb1a3d95369f8b7d6811b275..37983765fdff749ca08a13825a7fc79d7327139f 100644
--- a/README
+++ b/README
@@ -1,6 +1,6 @@
Thank you for using CATview - the Colored & Aligned Texts view.
-This is version 2.6.5
+This is version 2.7
For information about the features and usage of CATview, please visit:
https://catview.uzi.uni-halle.de
diff --git a/catview.js b/catview.js
index 711b6aae26c673756bed13044b7c71f79a76163c..0d36300044bf10334eea5ec1eace10428287a24d 100644
--- a/catview.js
+++ b/catview.js
@@ -22,7 +22,7 @@
SOFTWARE.
*/
-// CATview - the Colored & Aligned Texts view - version 2.6.5
+// CATview - the Colored & Aligned Texts view - version 2.7
const CATview = new function() {
this.debug = false;
@@ -31,7 +31,7 @@ const CATview = new function() {
if(CATview.debug)
console.log('CATview.initialize');
- CATview.version = '2.6.5';
+ CATview.version = '2.7';
// id of the parent container that will include CATview
CATview.parent_id = 'CATview';
@@ -146,6 +146,10 @@ const CATview = new function() {
CATview.drag_mode = 'insert'; // 'insert' || 'swap'
this.zebra_enabled = true;
+
+ CATview.draw_fadeouts = true; // fade out borders when zooming in
+ CATview.fadeout_real_rect_space = null; // including spacing to other rect
+
};
// method to set margins and content width/height according to the current orientation of CATview and its axis
@@ -1061,7 +1065,94 @@ const CATview = new function() {
return transform;
})
.attr('font-size', CATview.font_size_x);
- }
+
+
+ // define gradients
+ d3.select("defs#"+CATview.parent_id+"_gradient_definition").remove();
+ let rect_outline_width = Number(d3.select("div#"+CATview.parent_id).select("rect.rect-segment").style("stroke-width").split("px")[0]);
+
+ CATview.content.select(".alignment")
+ .append("defs")
+ .attr("id", CATview.parent_id+"_gradient_definition")
+ .append("linearGradient")
+ .attr("id", CATview.parent_id+"_gradient_left")
+ .attr("x1", "0" ) //x1="0" x2="0" y1="0" y2="1"
+ .attr("x2", CATview.vertical === true ? "0" : "1")
+ .attr("y1", "0")
+ .attr("y2", CATview.vertical === true ? "1" : "0")
+ .append("stop")
+ .attr("offset", "20%")
+ .attr("stop-color", "rgba(248,248,248,1)") // "rgba(0,0,248,1)"
+ CATview.content.select(".alignment").select("defs").select("linearGradient#"+CATview.parent_id+"_gradient_left")
+ .append("stop")
+ .attr("offset", "80%")
+ .attr("stop-color", "rgba(248,248,248,0)"); // hier 0 statt 1 für Transparenz
+
+ // right gradient
+ CATview.content.select(".alignment").select("defs#"+CATview.parent_id+"_gradient_definition")
+ .append("linearGradient")
+ .attr("id", CATview.parent_id+"_gradient_right")
+ .attr("x1", "0") //x1="0" x2="0" y1="0" y2="1"
+ .attr("x2", CATview.vertical === true ? "0" : "1")
+ .attr("y1", "0")
+ .attr("y2", CATview.vertical === true ? "1" : "0")
+ .append("stop")
+ .attr("offset", "20%")
+ .attr("stop-color", "rgba(248,248,248,0)")
+ CATview.content.select(".alignment").select("defs").select("linearGradient#"+CATview.parent_id+"_gradient_right")
+ .append("stop")
+ .attr("offset", "80%")
+ .attr("stop-color", "rgba(248,248,248,1)") // "rgba(0,0,248,1)" (blue) , "rgba(248,248,248,1)" (transparent)
+ ;
+
+ // size of gradient compared to content size
+ let grad_fraction = 0.5;
+
+ // fadeout left / top
+ d3.select("#"+CATview.parent_id+"_fadeout_left").remove();
+
+ if(CATview.draw_fadeouts) {
+
+ if (CATview.from > 1) {
+ // je kleiner der Anteil von 0 bis from, desto kleiner soll auch
+ // der fade out in der Breite sein.
+ let zoom_from_fraction = (CATview.from/CATview.edges.length);
+
+ CATview.content.select(".alignment")
+ .append("rect")
+ .attr("id", CATview.parent_id+"_fadeout_left")
+ .attr("height", CATview.vertical === true ? Math.floor((CATview.height_content*grad_fraction)*zoom_from_fraction) : CATview.height_content-2 )
+ .attr("width", CATview.vertical === true ? CATview.width_content-2 : Math.floor((CATview.width_content*grad_fraction)*zoom_from_fraction))
+ .attr("transform", "translate"+
+ (CATview.vertical === true ? "(1,0)" : "(0,1)"))
+ .style("fill", "url(#"+CATview.parent_id+"_gradient_left)")
+ .style("pointer-events", "none");
+
+ }
+ // fadeout right / bottom
+ d3.select("#"+CATview.parent_id+"_fadeout_right").remove();
+
+ if (CATview.to < CATview.edges.length) {
+
+ let alignment_height = d3.select("g.alignment").node().getBoundingClientRect().height+2*rect_outline_width;
+ let alignment_width = d3.select("g.alignment").node().getBoundingClientRect().width+2*rect_outline_width;
+
+ let zoom_to_fraction = ((CATview.edges.length-CATview.to)/CATview.edges.length);
+ CATview.content.select(".alignment")
+ .append("rect")
+ .attr("id", CATview.parent_id+"_fadeout_right")
+ .attr("height", CATview.vertical === true ? Math.floor(CATview.height_content*grad_fraction*zoom_to_fraction) : CATview.height_content-2 )
+ .attr("width", CATview.vertical === true ? CATview.width_content-2 : Math.floor(CATview.width_content*grad_fraction*zoom_to_fraction))
+ .attr("transform", "translate("+
+ (CATview.vertical === true ? ("1, " + Math.floor(CATview.height_content-CATview.height_content*grad_fraction*zoom_to_fraction)) :
+ (Math.ceil(CATview.width_content-CATview.width_content*grad_fraction*zoom_to_fraction) +", 1")
+ )+")")
+ .style("fill", "url(#"+CATview.parent_id+"_gradient_right)")
+ .style("pointer-events", "none");
+
+ }
+ } // if draw_fadeouts
+ } // if content
else
return false;
};
@@ -1550,8 +1641,8 @@ const CATview = new function() {
// simulate central mouse position in case of zoom button clicks
if (CATview.zoom_button_clicked){
- var art_mouse_x = CATview.width_content/2;
- var art_mouse_y = CATview.height_content/2;
+ let art_mouse_x = CATview.width_content/2;
+ let art_mouse_y = CATview.height_content/2;
scale_from = delta_size * ((CATview.vertical === true ? art_mouse_y : art_mouse_x) / current_size);
CATview.zoom_button_clicked = false;
}