From 62fc080524e97d89d3e3ee170d640b017c5ffd75 Mon Sep 17 00:00:00 2001
From: Marcus Poeckelmann <marcus.poeckelmann@informatik.uni-halle.de>
Date: Mon, 13 Mar 2023 16:23:48 +0100
Subject: [PATCH] v2.5: added linking of rectangles; update Demos
---
README | 2 +-
catview.css | 4 ++
catview.js | 93 +++++++++++++++++++++++++++----
demo/demo_bottom.html | 126 ++++++++++++++++++++++++++---------------
demo/demo_left.html | 127 +++++++++++++++++++++++++++---------------
demo/demo_right.html | 126 ++++++++++++++++++++++++++---------------
demo/demo_top.html | 126 ++++++++++++++++++++++++++---------------
7 files changed, 408 insertions(+), 196 deletions(-)
diff --git a/README b/README
index 02fb1ce..0176752 100644
--- a/README
+++ b/README
@@ -1,6 +1,6 @@
Thank you for using CATview - the Colored & Aligned Texts view.
-This is version 2.4.
+This is version 2.5.
For information about the features and usage of CATview, please visit:
https://catview.uzi.uni-halle.de
diff --git a/catview.css b/catview.css
index 3cac177..c6c2c16 100644
--- a/catview.css
+++ b/catview.css
@@ -47,6 +47,10 @@
stroke-width: 1px;
}
+#CATview .rect_linked {
+ fill: #e69a61 !important;
+}
+
#CATview .remaining{
stroke-width: 2;
stroke: orange;
diff --git a/catview.js b/catview.js
index 7abbf6f..ca7bb63 100644
--- a/catview.js
+++ b/catview.js
@@ -22,8 +22,7 @@
SOFTWARE.
*/
-// CATview - the Colored & Aligned Texts view
-// version 2.4
+// CATview - the Colored & Aligned Texts view - version 2.5
const CATview = new function() {
this.debug = false;
@@ -32,7 +31,7 @@ const CATview = new function() {
if(CATview.debug)
console.log('CATview.initialize');
- CATview.version = '2.4';
+ CATview.version = '2.5';
// id of the parent container that will include CATview
CATview.parent_id = 'CATview';
@@ -125,6 +124,12 @@ const CATview = new function() {
CATview.rect_scaling_mode = 'default'; // defines the placement after scaling: 'default' (on bottom) | 'middle' (centered) | 'inverted' (on top)
CATview.rect_scaling = null; // same structure as edges - defines the size of rectangles
+ // linking of rectangles - highlights linked rectangles on mouse hover by color
+ CATview.rect_linking_enabled = false;
+ CATview.rect_linking_data = null; // an array with groups of linked rectangles identyfied by their data-segment-index attribute, e.g.
+ // [ ['19_0', '16_0'], ['25_1', '26_1', '27_1'] ]
+ // (link two segments for the first witness; and three segments for the second)
+
CATview.drag_enabled = false; // is drag'n'drop allowed
CATview.drag_callback = null; // called after a successful name swap
CATview.drag_names_order = null;
@@ -777,7 +782,6 @@ const CATview = new function() {
CATview.drag_callback = drag_callback;
return true;
};
-
this.toggle_drag_mode = function(){
if(CATview.debug)
console.log('CATview.toggle_drag_mode');
@@ -949,18 +953,20 @@ const CATview = new function() {
.data(function(d) { return d[0].map(function(d2, j) {return [j, (d[1] - 1), d2];}).filter( function(d2) { return d2[2] != "-1"; } ); })
.enter().append("rect")
.attr("class", "rect-segment")
- .attr("data-segment-index", function(d) { return d[1] + "_" + d[0];})
- .on("click", function(d){
- CATview.click_on_edge_callback(d[0], d[1]);
- })
.attr('cursor', 'pointer')
.attr("width", function(d){ return CATview.scaled_rect_width(d[1], d[0]); })
.attr("height", function(d){ return CATview.scaled_rect_height(d[1], d[0]); })
//.attr("ry", rect_corner) // rounded Corners
- .attr(CATview.vertical == true ? "x" : "y", function(d) { return CATview.scaled_position(d[1], d[0]); })
+ .attr(CATview.vertical == true ? "x" : "y", function(d) { return CATview.scaled_position(d[1], d[0]); })
.attr("style", function(d) {
return CATview.rect_stroke + CATview.rect_border + "fill: " +
(parseFloat(d[2]) == 0.0 && CATview.use_equality_color ? CATview.equality_color : CATview.scale_color(parseFloat(d[2])));
+ })
+ .attr("data-segment-index", function(d) { return d[1] + "_" + d[0];})
+ .on("mouseenter", function(d){ CATview.show_rect_linking(d[1]+"_"+d[0]); })
+ .on("mouseleave", function(d){ CATview.hide_rect_linking(); })
+ .on("click", function(d){
+ CATview.click_on_edge_callback(d[0], d[1]);
});
// update the edges-axis
@@ -1156,7 +1162,6 @@ const CATview = new function() {
let row = rows.filter(function (d, i) { return (i + CATview.from) === segment[0] + 1 });
row.append('rect')
.attr("class", "rect-segment extra")
- .on("click", function(d){CATview.click_on_edge_callback(segment[1], segment[0]);} )
.attr('cursor', 'pointer')
.attr("width", function(d){ return CATview.scaled_rect_width(segment[0], segment[1]) - 1;})
.attr("height", function(d){ return CATview.scaled_rect_height(segment[0], segment[1]) - 2;})
@@ -1167,7 +1172,10 @@ const CATview = new function() {
return 'fill:transparent; stroke-width:2; stroke-dasharray:3,1; stroke:' +
(parseFloat(segment[2]) === 0.0 && CATview.use_equality_color ? CATview.equality_color : CATview.scale_color(parseFloat(segment[2])));
})
- .attr("data-segment-index",segment[0] + "_" + segment[1]);
+ .attr("data-segment-index",segment[0] + "_" + segment[1])
+ .on("mouseenter", function(d){ CATview.show_rect_linking(segment[0]+"_"+segment[1]); })
+ .on("mouseleave", function(d){ CATview.hide_rect_linking(); })
+ .on("click", function(d){CATview.click_on_edge_callback(segment[1], segment[0]);} );
});
}
}
@@ -1334,6 +1342,69 @@ const CATview = new function() {
}
}
+
+ // public methods for rectangle linking
+ this.set_rect_linking_data = function(_data){
+ if(CATview.debug)
+ console.log('CATview.set_rect_linking_data');
+ // TODO validation
+ this.rect_linking_data = _data;
+ return true;
+ }
+ this.enable_rect_linking = function(){
+ if(CATview.debug)
+ console.log('CATview.enable_rect_linking');
+
+ CATview.rect_linking_enabled = true;
+
+ return true;
+ }
+ this.disable_rect_linking = function(){
+ if(CATview.debug)
+ console.log('CATview.disable_rect_linking');
+
+ CATview.rect_linking_enabled = false;
+ CATview.hide_rect_linking();
+ return true;
+ }
+ this.toggle_rect_linking = function(){
+ if(CATview.debug)
+ console.log('CATview.toggle_rect_linking');
+
+ if(CATview.rect_linking_enabled)
+ return CATview.disable_rect_linking();
+ else
+ return CATview.enable_rect_linking();
+ }
+ // internal methods for rectangle linking
+ this.show_rect_linking = function(_idx) {
+ if(CATview.debug)
+ console.log('CATview.show_rect_linking: ' + _idx);
+
+ if(!CATview.rect_linking_enabled)
+ return false;
+
+ CATview.rect_linking_data.forEach( function (group){
+ if(group.indexOf(_idx) != -1){
+ group.forEach( function (group_member) {
+ // add the 'rect_linked' class to highlight all segments in the group, including the one hovered
+ let seg = document.querySelector('[data-segment-index="' + group_member + '"]');
+ if(seg !== null) seg.classList.add("rect_linked");
+ });
+ }
+ });
+ }
+ this.hide_rect_linking = function(){
+ if(CATview.debug)
+ console.log('CATview.hide_rect_linking');
+
+ // remove all 'rect_linked' classes
+ let segments = document.querySelectorAll('.rect_linked');
+ for (let i = 0; i < segments.length; i++) {
+ segments[i].classList.remove('rect_linked');
+ }
+ }
+
// callback to switch the order of edges
this.invert_edges_axis = function(){
if(CATview.debug)
diff --git a/demo/demo_bottom.html b/demo/demo_bottom.html
index 7ea9250..6e8b117 100644
--- a/demo/demo_bottom.html
+++ b/demo/demo_bottom.html
@@ -51,10 +51,10 @@
</body>
<script>
- // basic initialization of CATview with demo data and some pre-build tools
- CATview.initialize('bottom');
- CATview.set_names(["W1", "W2", "W3"]);
- CATview.set_edges([
+ // basic initialization of CATview for the demo data
+ CATview.initialize("bottom");
+ CATview.set_names(["W1", "W2", "W3"]); // names of witnesses
+ CATview.set_edges([ // rectangles in respect to the alignment of text segments
[0, 0, 0], [0, 0, 0], [0, 0.36, 0.36], [0, 0.19, 0.32], [0, 0, 0.24],
[0.41, 0.41, 0.41], [-1, -1, 0], [-1, 0, 0.3], [-1, -1, 0], [0, 0, 0.38],
[0.18, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0], [-1, 0, 0],
@@ -65,49 +65,16 @@
[0, 0, 0], [-1, 0, 0], [0, 0.5, 0.5], [0, 0.29, 0.29], [0, 0.25, 0.4],
[-1, -1, 0], [-1, 0, 0.48], [0, 0, 0], [0, 0, 0.25], [-1, 0, 0],
[-1, 0, -1], [-1, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ]);
- CATview.set_extra_segments([
- [16, 2, 0], [19, 0, 0], [19, 1, 0],
- [17, 2, 0], [20, 0, 0], [20, 1, 0],
- [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
- [40, 1, 0], [45, 2, 0] ]);
- CATview.set_edge_names([
- "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
- "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
- "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
- "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
- "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
- "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
- "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
- "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
- "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
- "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
- let max = 32;
- CATview.set_rect_scaling([
- [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
- [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
- [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
- [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
- [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
- [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
- [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
- [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
- [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
- [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
- CATview.enable_drag('insert');
- CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
- CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
- CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool
- CATview.add_tool_toggle_search_mode(); // switch-highlight-mode-of-search-results tool
- CATview.add_tool_toggle_brush(); // enable/disable-brush tool
- CATview.draw_svg();
+ CATview.draw_svg(); // and draw CATview
- // insert a demo synopsis (located in catview/demo/data.js) as table to demonstrate the navigation features
+ // insert a demo synopsis to the HTML page (located in catview/demo/data.js) as table to demonstrate the navigation features
document.getElementById('synopsis').insertAdjacentHTML('beforeend', example);
-
// add a padding with the height of CATview below the synopsis
document.getElementById('synopsis').style.paddingBottom = document.querySelector('.fixed').offsetHeight.toString() + "px";
- // add a scroll spy to the synopsis and register it in CATview
+
+ // enable some more features of CATview:
+ // • add a scroll spy to the synopsis and register it in CATview
let scroll_pos = 0;
let last_offset_top = 0;
window.onscroll = function(){
@@ -139,17 +106,61 @@
return true;
};
- // add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
+ // • add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
CATview.set_click_on_edge_callback(function(wit, edge){
let position = document.querySelectorAll('.edge')[edge].offsetTop - document.querySelectorAll('.edge')[edge].offsetHeight;
window.scrollTo(0, position)
});
- // generate demo search hits (for the keyword "elementum") and draw them
+ // • generate demo search hits (for the keyword "elementum") and draw them
CATview.search_results = [[1,[0, 1, 2]], [4,[2]], [28,[2]], [40,[2]], [45,[1]] ];
CATview.draw_search_results();
- // add a brush-callback to reduce the displayed text by the brushing tool
+ // • add some additional rectangles that represent copies of text segments and draw them
+ CATview.set_extra_segments([
+ [16, 2, 0], [19, 0, 0], [19, 1, 0],
+ [17, 2, 0], [20, 0, 0], [20, 1, 0],
+ [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
+ [40, 1, 0], [45, 2, 0] ]);
+ CATview.draw_extra_segments();
+
+ // • enable linked rectangles, i.e.
+ // hovering one rectangle will highlight the linked ones by color (used here to indicate copied segments)
+ CATview.set_rect_linking_data([
+ ['19_0', '16_0'], ['20_0', '17_0'], ['26_0', '23_0'],
+ ['19_1', '16_1'], ['20_1', '17_1'], ['23_1', '26_1'], ['40_1', '45_1'],
+ ['16_2', '19_2'], ['17_2', '20_2'], ['23_2', '26_2'], ['45_2', '40_2']]);
+ CATview.enable_rect_linking();
+
+ // • add some identifiers for aligned segments that will be displayed on hovering the corresponding rectangles in CATview
+ CATview.set_edge_names([
+ "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
+ "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
+ "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
+ "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
+ "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
+ "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
+ "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
+ "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
+ "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
+ "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
+
+ // • set data for the scaling of rectangles in respect to the text amount of segments
+ let max = 32;
+ CATview.set_rect_scaling([
+ [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
+ [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
+ [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
+ [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
+ [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
+ [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
+ [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
+ [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
+ CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
+
+ // • add a brush-callback to reduce the displayed text by the brushing tool
CATview.set_brush_callback(function(from, to, from_name, to_name){
let edges = document.querySelectorAll('.edge');
// catch possible overflows
@@ -171,10 +182,33 @@
// refresh CATviews scrollspy
CATview.draw_scroll_spy(from);
});
-
// reacts as soon as the size of the selection box (brush) is fixed
CATview.set_brush_end_callback(function(from, to){
CATview.brush_callback(from, to);
});
+
+ // • allow the reordering of witnesses in CATview
+ CATview.enable_drag('insert');
+ // a callback to reorder the HTML-view of the text witnesses as well
+ CATview.set_drag_callback(function(old_pos, new_pos){
+ let rows = document.querySelectorAll("tr");
+ if(old_pos > new_pos){
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos]);
+ }
+ }
+ else{
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos].nextSibling);
+ }
+ }
+ });
+
+ // • add some predefined tool icons
+ CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
+ CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool → flip the writing direction
+ CATview.add_tool_toggle_search_mode(); // alter the representation of search results
+ CATview.add_tool_toggle_brush(); // enable/disable-brush tool → allows selecting rectangles/segments
+ CATview.draw_tool_icons();
</script>
</html>
diff --git a/demo/demo_left.html b/demo/demo_left.html
index 1dca725..f072e0b 100644
--- a/demo/demo_left.html
+++ b/demo/demo_left.html
@@ -52,10 +52,10 @@
</body>
<script>
- // basic initialization of CATview with demo data and some pre-build tools
- CATview.initialize('left');
- CATview.set_names(["W1", "W2", "W3"]);
- CATview.set_edges([
+ // basic initialization of CATview for the demo data
+ CATview.initialize("left");
+ CATview.set_names(["W1", "W2", "W3"]); // names of witnesses
+ CATview.set_edges([ // rectangles in respect to the alignment of text segments
[0, 0, 0], [0, 0, 0], [0, 0.36, 0.36], [0, 0.19, 0.32], [0, 0, 0.24],
[0.41, 0.41, 0.41], [-1, -1, 0], [-1, 0, 0.3], [-1, -1, 0], [0, 0, 0.38],
[0.18, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0], [-1, 0, 0],
@@ -66,46 +66,14 @@
[0, 0, 0], [-1, 0, 0], [0, 0.5, 0.5], [0, 0.29, 0.29], [0, 0.25, 0.4],
[-1, -1, 0], [-1, 0, 0.48], [0, 0, 0], [0, 0, 0.25], [-1, 0, 0],
[-1, 0, -1], [-1, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ]);
- CATview.set_extra_segments([
- [16, 2, 0], [19, 0, 0], [19, 1, 0],
- [17, 2, 0], [20, 0, 0], [20, 1, 0],
- [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
- [40, 1, 0], [45, 2, 0] ]);
- CATview.set_edge_names([
- "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
- "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
- "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
- "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
- "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
- "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
- "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
- "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
- "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
- "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
- let max = 32;
- CATview.set_rect_scaling([
- [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
- [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
- [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
- [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
- [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
- [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
- [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
- [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
- [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
- [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
- CATview.enable_drag('insert');
- CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
- CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
- CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool
- CATview.add_tool_toggle_search_mode(); // switch-highlight-mode-of-search-results tool
- CATview.add_tool_toggle_brush(); // enable/disable-brush tool
- CATview.draw_svg();
+ CATview.draw_svg(); // and draw CATview
- // insert a demo synopsis (located in catview/demo/data.js) as table to demonstrate the navigation features
+ // insert a demo synopsis to the HTML page (located in catview/demo/data.js) as table to demonstrate the navigation features
document.getElementById('synopsis').insertAdjacentHTML('beforeend', example);
- // add a scroll spy to the synopsis and register it in CATview
+
+ // enable some more features of CATview:
+ // • add a scroll spy to the synopsis and register it in CATview
let scroll_pos = 0;
let last_offset_top = 0;
window.onscroll = function(){
@@ -137,17 +105,61 @@
return true;
};
- // add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
+ // • add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
CATview.set_click_on_edge_callback(function(wit, edge){
- let position = document.querySelectorAll('.edge')[edge].offsetTop;
+ let position = document.querySelectorAll('.edge')[edge].offsetTop - document.querySelectorAll('.edge')[edge].offsetHeight;
window.scrollTo(0, position)
});
- // generate demo search hits (for the keyword "elementum") and draw them
+ // • generate demo search hits (for the keyword "elementum") and draw them
CATview.search_results = [[1,[0, 1, 2]], [4,[2]], [28,[2]], [40,[2]], [45,[1]] ];
CATview.draw_search_results();
- // add a brush-callback to reduce the displayed text by the brushing tool
+ // • add some additional rectangles that represent copies of text segments and draw them
+ CATview.set_extra_segments([
+ [16, 2, 0], [19, 0, 0], [19, 1, 0],
+ [17, 2, 0], [20, 0, 0], [20, 1, 0],
+ [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
+ [40, 1, 0], [45, 2, 0] ]);
+ CATview.draw_extra_segments();
+
+ // • enable linked rectangles, i.e.
+ // hovering one rectangle will highlight the linked ones by color (used here to indicate copied segments)
+ CATview.set_rect_linking_data([
+ ['19_0', '16_0'], ['20_0', '17_0'], ['26_0', '23_0'],
+ ['19_1', '16_1'], ['20_1', '17_1'], ['23_1', '26_1'], ['40_1', '45_1'],
+ ['16_2', '19_2'], ['17_2', '20_2'], ['23_2', '26_2'], ['45_2', '40_2']]);
+ CATview.enable_rect_linking();
+
+ // • add some identifiers for aligned segments that will be displayed on hovering the corresponding rectangles in CATview
+ CATview.set_edge_names([
+ "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
+ "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
+ "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
+ "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
+ "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
+ "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
+ "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
+ "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
+ "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
+ "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
+
+ // • set data for the scaling of rectangles in respect to the text amount of segments
+ let max = 32;
+ CATview.set_rect_scaling([
+ [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
+ [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
+ [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
+ [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
+ [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
+ [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
+ [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
+ [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
+ CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
+
+ // • add a brush-callback to reduce the displayed text by the brushing tool
CATview.set_brush_callback(function(from, to, from_name, to_name){
let edges = document.querySelectorAll('.edge');
// catch possible overflows
@@ -169,10 +181,33 @@
// refresh CATviews scrollspy
CATview.draw_scroll_spy(from);
});
-
// reacts as soon as the size of the selection box (brush) is fixed
CATview.set_brush_end_callback(function(from, to){
CATview.brush_callback(from, to);
});
+
+ // • allow the reordering of witnesses in CATview
+ CATview.enable_drag('insert');
+ // a callback to reorder the HTML-view of the text witnesses as well
+ CATview.set_drag_callback(function(old_pos, new_pos){
+ let rows = document.querySelectorAll("tr");
+ if(old_pos > new_pos){
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos]);
+ }
+ }
+ else{
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos].nextSibling);
+ }
+ }
+ });
+
+ // • add some predefined tool icons
+ CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
+ CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool → flip the writing direction
+ CATview.add_tool_toggle_search_mode(); // alter the representation of search results
+ CATview.add_tool_toggle_brush(); // enable/disable-brush tool → allows selecting rectangles/segments
+ CATview.draw_tool_icons();
</script>
</html>
diff --git a/demo/demo_right.html b/demo/demo_right.html
index 87f4b29..47a9f43 100644
--- a/demo/demo_right.html
+++ b/demo/demo_right.html
@@ -52,10 +52,10 @@
</body>
<script>
- // basic initialization of CATview with demo data and some pre-build tools
- CATview.initialize('right');
- CATview.set_names(["W1", "W2", "W3"]);
- CATview.set_edges([
+ // basic initialization of CATview for the demo data
+ CATview.initialize("right");
+ CATview.set_names(["W1", "W2", "W3"]); // names of witnesses
+ CATview.set_edges([ // rectangles in respect to the alignment of text segments
[0, 0, 0], [0, 0, 0], [0, 0.36, 0.36], [0, 0.19, 0.32], [0, 0, 0.24],
[0.41, 0.41, 0.41], [-1, -1, 0], [-1, 0, 0.3], [-1, -1, 0], [0, 0, 0.38],
[0.18, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0], [-1, 0, 0],
@@ -66,46 +66,13 @@
[0, 0, 0], [-1, 0, 0], [0, 0.5, 0.5], [0, 0.29, 0.29], [0, 0.25, 0.4],
[-1, -1, 0], [-1, 0, 0.48], [0, 0, 0], [0, 0, 0.25], [-1, 0, 0],
[-1, 0, -1], [-1, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ]);
- CATview.set_extra_segments([
- [16, 2, 0], [19, 0, 0], [19, 1, 0],
- [17, 2, 0], [20, 0, 0], [20, 1, 0],
- [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
- [40, 1, 0], [45, 2, 0] ]);
- CATview.set_edge_names([
- "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
- "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
- "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
- "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
- "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
- "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
- "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
- "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
- "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
- "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
- let max = 32;
- CATview.set_rect_scaling([
- [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
- [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
- [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
- [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
- [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
- [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
- [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
- [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
- [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
- [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
- CATview.enable_drag('insert');
- CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
- CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
- CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool
- CATview.add_tool_toggle_search_mode(); // switch-highlight-mode-of-search-results tool
- CATview.add_tool_toggle_brush(); // enable/disable-brush tool
- CATview.draw_svg();
+ CATview.draw_svg(); // and draw CATview
- // insert a demo synopsis (located in catview/demo/data.js) as table to demonstrate the navigation features
+ // insert a demo synopsis to the HTML page (located in catview/demo/data.js) as table to demonstrate the navigation features
document.getElementById('synopsis').insertAdjacentHTML('beforeend', example);
- // add a scroll spy to the synopsis and register it in CATview
+ // enable some more features of CATview:
+ // • add a scroll spy to the synopsis and register it in CATview
let scroll_pos = 0;
let last_offset_top = 0;
window.onscroll = function(){
@@ -137,17 +104,61 @@
return true;
};
- // add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
+ // • add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
CATview.set_click_on_edge_callback(function(wit, edge){
- let position = document.querySelectorAll('.edge')[edge].offsetTop;
+ let position = document.querySelectorAll('.edge')[edge].offsetTop - document.querySelectorAll('.edge')[edge].offsetHeight;
window.scrollTo(0, position)
});
- // generate demo search hits (for the keyword "elementum") and draw them
+ // • generate demo search hits (for the keyword "elementum") and draw them
CATview.search_results = [[1,[0, 1, 2]], [4,[2]], [28,[2]], [40,[2]], [45,[1]] ];
CATview.draw_search_results();
- // add a brush-callback to reduce the displayed text by the brushing tool
+ // • add some additional rectangles that represent copies of text segments and draw them
+ CATview.set_extra_segments([
+ [16, 2, 0], [19, 0, 0], [19, 1, 0],
+ [17, 2, 0], [20, 0, 0], [20, 1, 0],
+ [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
+ [40, 1, 0], [45, 2, 0] ]);
+ CATview.draw_extra_segments();
+
+ // • enable linked rectangles, i.e.
+ // hovering one rectangle will highlight the linked ones by color (used here to indicate copied segments)
+ CATview.set_rect_linking_data([
+ ['19_0', '16_0'], ['20_0', '17_0'], ['26_0', '23_0'],
+ ['19_1', '16_1'], ['20_1', '17_1'], ['23_1', '26_1'], ['40_1', '45_1'],
+ ['16_2', '19_2'], ['17_2', '20_2'], ['23_2', '26_2'], ['45_2', '40_2']]);
+ CATview.enable_rect_linking();
+
+ // • add some identifiers for aligned segments that will be displayed on hovering the corresponding rectangles in CATview
+ CATview.set_edge_names([
+ "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
+ "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
+ "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
+ "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
+ "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
+ "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
+ "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
+ "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
+ "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
+ "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
+
+ // • set data for the scaling of rectangles in respect to the text amount of segments
+ let max = 32;
+ CATview.set_rect_scaling([
+ [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
+ [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
+ [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
+ [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
+ [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
+ [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
+ [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
+ [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
+ CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
+
+ // • add a brush-callback to reduce the displayed text by the brushing tool
CATview.set_brush_callback(function(from, to, from_name, to_name){
let edges = document.querySelectorAll('.edge');
// catch possible overflows
@@ -169,10 +180,33 @@
// refresh CATviews scrollspy
CATview.draw_scroll_spy(from);
});
-
// reacts as soon as the size of the selection box (brush) is fixed
CATview.set_brush_end_callback(function(from, to){
CATview.brush_callback(from, to);
});
+
+ // • allow the reordering of witnesses in CATview
+ CATview.enable_drag('insert');
+ // a callback to reorder the HTML-view of the text witnesses as well
+ CATview.set_drag_callback(function(old_pos, new_pos){
+ let rows = document.querySelectorAll("tr");
+ if(old_pos > new_pos){
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos]);
+ }
+ }
+ else{
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos].nextSibling);
+ }
+ }
+ });
+
+ // • add some predefined tool icons
+ CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
+ CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool → flip the writing direction
+ CATview.add_tool_toggle_search_mode(); // alter the representation of search results
+ CATview.add_tool_toggle_brush(); // enable/disable-brush tool → allows selecting rectangles/segments
+ CATview.draw_tool_icons();
</script>
</html>
diff --git a/demo/demo_top.html b/demo/demo_top.html
index cef85f3..2093fe0 100644
--- a/demo/demo_top.html
+++ b/demo/demo_top.html
@@ -52,10 +52,10 @@
</body>
<script>
- // basic initialization of CATview with demo data and some pre-build tools
+ // basic initialization of CATview for the demo data
CATview.initialize();
- CATview.set_names(["W1", "W2", "W3"]);
- CATview.set_edges([
+ CATview.set_names(["W1", "W2", "W3"]); // names of witnesses
+ CATview.set_edges([ // rectangles in respect to the alignment of text segments
[0, 0, 0], [0, 0, 0], [0, 0.36, 0.36], [0, 0.19, 0.32], [0, 0, 0.24],
[0.41, 0.41, 0.41], [-1, -1, 0], [-1, 0, 0.3], [-1, -1, 0], [0, 0, 0.38],
[0.18, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0], [-1, 0, 0],
@@ -66,49 +66,16 @@
[0, 0, 0], [-1, 0, 0], [0, 0.5, 0.5], [0, 0.29, 0.29], [0, 0.25, 0.4],
[-1, -1, 0], [-1, 0, 0.48], [0, 0, 0], [0, 0, 0.25], [-1, 0, 0],
[-1, 0, -1], [-1, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0] ]);
- CATview.set_extra_segments([
- [16, 2, 0], [19, 0, 0], [19, 1, 0],
- [17, 2, 0], [20, 0, 0], [20, 1, 0],
- [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
- [40, 1, 0], [45, 2, 0] ]);
- CATview.set_edge_names([
- "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
- "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
- "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
- "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
- "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
- "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
- "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
- "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
- "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
- "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
- let max = 32;
- CATview.set_rect_scaling([
- [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
- [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
- [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
- [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
- [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
- [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
- [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
- [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
- [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
- [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
- CATview.enable_drag('insert');
- CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
- CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
- CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool
- CATview.add_tool_toggle_search_mode(); // switch-highlight-mode-of-search-results tool
- CATview.add_tool_toggle_brush(); // enable/disable-brush tool
- CATview.draw_svg();
+ CATview.draw_svg(); // and draw CATview
- // insert a demo synopsis (located in catview/demo/data.js) as table to demonstrate the navigation features
+ // insert a demo synopsis to the HTML page (located in catview/demo/data.js) as table to demonstrate the navigation features
document.getElementById('synopsis').insertAdjacentHTML('beforeend', example);
-
- // add a padding with the height of CATview above the synopsis
+ // and add some padding with the height of CATview above the synopsis
document.getElementById('synopsis').style.paddingTop = document.querySelector('.fixed').offsetHeight.toString() + "px";
- // add a scroll spy to the synopsis and register it in CATview
+
+ // enable some more features of CATview:
+ // • add a scroll spy to the synopsis and register it in CATview
let scroll_pos = 0;
let last_offset_top = 0;
window.onscroll = function(){
@@ -140,17 +107,61 @@
return true;
};
- // add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
+ // • add on-click-callbacks on CATviews rectangles to use them as links that jump to the corresponding position in the synopsis
CATview.set_click_on_edge_callback(function(wit, edge){
let position = document.querySelectorAll('.edge')[edge].offsetTop - document.querySelectorAll('.edge')[edge].offsetHeight;
window.scrollTo(0, position)
});
- // generate demo search hits (for the keyword "elementum") and draw them
+ // • generate demo search hits (for the keyword "elementum") and draw them
CATview.search_results = [[1,[0, 1, 2]], [4,[2]], [28,[2]], [40,[2]], [45,[1]] ];
CATview.draw_search_results();
- // add a brush-callback to reduce the displayed text by the brushing tool
+ // • add some additional rectangles that represent copies of text segments and draw them
+ CATview.set_extra_segments([
+ [16, 2, 0], [19, 0, 0], [19, 1, 0],
+ [17, 2, 0], [20, 0, 0], [20, 1, 0],
+ [23, 1, 0], [23, 2, 0.52], [26, 0, 0],
+ [40, 1, 0], [45, 2, 0] ]);
+ CATview.draw_extra_segments();
+
+ // • enable linked rectangles, i.e.
+ // hovering one rectangle will highlight the linked ones by color (used here to indicate copied segments)
+ CATview.set_rect_linking_data([
+ ['19_0', '16_0'], ['20_0', '17_0'], ['26_0', '23_0'],
+ ['19_1', '16_1'], ['20_1', '17_1'], ['23_1', '26_1'], ['40_1', '45_1'],
+ ['16_2', '19_2'], ['17_2', '20_2'], ['23_2', '26_2'], ['45_2', '40_2']]);
+ CATview.enable_rect_linking();
+
+ // • add some identifiers for aligned segments that will be displayed on hovering the corresponding rectangles in CATview
+ CATview.set_edge_names([
+ "Lorem ipsum…", "Quisque convallis…", "In egestas…", "Duis interdum…", "Ut id…",
+ "Pellentesque habitant…", "Sed et…", "Sed dignissim…", "Sed sollicitudin…", "Morbi diam…",
+ "Porttitor vel…", "Aliquam maximus…", "Morbi justo…", "Vivamus sit…", "Aliquam dapibus…",
+ "Vivamus a…", "Maecenas varius…", "Integer vel…", "Interdum et…", "Maecenas varius…",
+ "Integer vel…", "Mauris magna…", "Aenean tincidunt…", "Duis justo…", "Morbi imperdiet…",
+ "Nulla in…", "Duis justo…", "Sed sit…", "Sed id…", "Ut interdum…",
+ "Vivamus dolor…", "Curabitur id…", "Phasellus vel…", "Ut luctus…", "Vestibulum in…",
+ "Duis at…", "Ut varius…", "Quisque tincidunt…", "Curabitur ac…", "Vivamus vulputate…",
+ "Aliquam sagittis…", "Nunc ut…", "Curabitur placerat…", "Aenean molestie…", "Donec quis…",
+ "Aliquam sagittis…", "Duis nunc…", "Pellentesque habitant…", "Tincidunt dignissim…", "Nullam non…" ]);
+
+ // • set data for the scaling of rectangles in respect to the text amount of segments
+ let max = 32;
+ CATview.set_rect_scaling([
+ [8/max, 8/max, 8/max], [26/max, 26/max, 26/max], [7/max, 11/max, 11/max], [17/max, 21/max, 25/max], [16/max, 16/max, 21/max],
+ [22/max, 22/max, 22/max], [-1, -1, 16/max], [-1, 16/max, 23/max], [-1, -1, 12/max], [20/max, 20/max, 32/max],
+ [17/max, 14/max, 14/max], [21/max, 21/max, 21/max], [19/max, 19/max, 19/max], [19/max, 19/max, 19/max], [-1, 10/max, 10/max],
+ [13/max, 13/max, 13/max], [8/max, 8/max, 8/max], [7/max, 7/max, 7/max], [24/max, 24/max, 24/max], [8/max, 8/max, 8/max],
+ [7/max, 7/max, 7/max], [10/max, 10/max, 10/max], [22/max, 22/max, 22/max], [10/max, 10/max, 21/max], [13/max, 19/max, 19/max],
+ [-1, 7/max, 10/max], [10/max, 10/max, 21/max], [-1, 18/max, 18/max], [16/max, 16/max, 21/max], [14/max, 14/max, 14/max],
+ [20/max, 20/max, 20/max], [7/max, 7/max, 7/max], [20/max, 20/max, 20/max], [14/max, 14/max, 14/max], [4/max, 10/max, 10/max],
+ [20/max, 20/max, 20/max], [-1, 28/max, 28/max], [7/max, 14/max, 14/max], [11/max, 15/max, 15/max], [12/max, 16/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 11/max, 21/max], [17/max, 17/max, 17/max], [13/max, 13/max, 17/max], [-1, 20/max, 20/max],
+ [-1, 14/max, 14/max], [-1, 14/max, 14/max], [17/max, 17/max, 17/max], [8/max, 8/max, 8/max], [4/max, 4/max, 4/max]]);
+ CATview.rect_scaling_mode = 'middle'; // place scaled rectangles in the middle
+
+ // • add a brush-callback to reduce the displayed text by the brushing tool
CATview.set_brush_callback(function(from, to, from_name, to_name){
let edges = document.querySelectorAll('.edge');
// catch possible overflows
@@ -172,10 +183,33 @@
// refresh CATviews scrollspy
CATview.draw_scroll_spy(from);
});
-
// reacts as soon as the size of the selection box (brush) is fixed
CATview.set_brush_end_callback(function(from, to){
CATview.brush_callback(from, to);
});
+
+ // • allow the reordering of witnesses in CATview
+ CATview.enable_drag('insert');
+ // a callback to reorder the HTML-view of the text witnesses as well
+ CATview.set_drag_callback(function(old_pos, new_pos){
+ let rows = document.querySelectorAll("tr");
+ if(old_pos > new_pos){
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos]);
+ }
+ }
+ else{
+ for(let row of rows){
+ row.insertBefore(row.children[old_pos], row.children[new_pos].nextSibling);
+ }
+ }
+ });
+
+ // • add some predefined tool icons
+ CATview.add_tool_toggle_rect_scaling(); // toggle individual scaling of rectangles
+ CATview.add_tool_invert_edges_axis(); // invert-edges-axis tool → flip the writing direction
+ CATview.add_tool_toggle_search_mode(); // alter the representation of search results
+ CATview.add_tool_toggle_brush(); // enable/disable-brush tool → allows selecting rectangles/segments
+ CATview.draw_tool_icons();
</script>
</html>
--
GitLab