Add minimap to graph view

This commit is contained in:
Alvaro Muñoz 2017-04-29 00:27:41 +02:00
parent fd80443b7e
commit 512f6134aa
6 changed files with 74 additions and 46 deletions

View File

@ -3,6 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="language" content="en" />
<title>radare2</title>

View File

@ -91,12 +91,10 @@ input:focus {outline: none; }
}
#minimap {
border: 1px solid black;
position:absolute;
width:200px;
height:200px;
z-index: -10;
background: #EAF9FF;
z-index: +10;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
@ -122,10 +120,6 @@ input:focus {outline: none; }
filter: alpha(opacity=20); /* For IE8 and earlier */
}
#radareApp_mp_panels_pageDisassembler {
padding: 0px;
}
#main_panel {
overflow: auto;
}

View File

@ -40,3 +40,12 @@
.autohighlight { background-color: #8AFF77 !important; }
.autohighlighti { background-color: #8AFF77; }
#minimap {
background: #E9EAEA;
border: 1px solid black;
}
#minimap_area {
border: 1px solid black;
background: black;
}

View File

@ -40,3 +40,11 @@
.autohighlight { background-color: #8AFF77 !important; }
.autohighlighti { background-color: #8AFF77; }
#minimap {
background: #A4C5D2;
}
#minimap_area {
border: 1px solid black;
background: black;
}

View File

@ -178,7 +178,17 @@ BBGraph.prototype.render = function() {
$("#minimap").css("left", $("#main_panel").width() - minimap_width);
$("#minimap").css("top", $("#center_panel").position().top - 40);
//$("#center_panel").bind('scroll', update_minimap);
// $("#center_panel").bind('scroll', update_minimap);
// $("#main_panel").bind('scroll', update_minimap);
// $("#disasm_tab").bind('scroll', update_minimap);
// $("#minimap").bind('scroll', update_minimap);
// $("#canvas").bind('scroll', update_minimap);
document.addEventListener('scroll', function (event) {
//if (event.target.id === 'idOfUl') { // or any other filtering condition
console.log('scrolling', event.target);
update_minimap();
//}
}, true /*Capture event*/);
paper.on( "cell:pointerup", function( cellview, evt, x, y) {
var model = cellview.model;
@ -199,29 +209,29 @@ BBGraph.prototype.render = function() {
}
});
// if (r2ui.graph_panel.minimap) {
// update_minimap();
// $("#minimap_area").draggable({
// containment: "parent",
// stop: function( event, ui ) {
// var delta_x = ui.position.left/scale;
// var delta_y = ui.position.top/scale;
// if (delta_x < 0) delta_x = 0;
// if (delta_y < 0) delta_y = 0;
// if ($("#radareApp_mp").length) {
// //$("#main_panel").scrollTo({ top:delta_y, left:delta_x - delta/scale } );
// console.log(1);
// } else {
// //$('#center_panel').scrollTo({ top:delta_y, left:delta_x - delta/scale } );
// console.log('debug:');
// console.log(delta_y, delta_x, scale);
// console.log($('#center_panel'));
// }
// }
// });
// } else {
// $("#minimap").hide();
// }
if (r2ui.graph_panel.minimap) {
update_minimap();
// $("#minimap_area").draggable({
// containment: "parent",
// stop: function( event, ui ) {
// var delta_x = ui.position.left/scale;
// var delta_y = ui.position.top/scale;
// if (delta_x < 0) delta_x = 0;
// if (delta_y < 0) delta_y = 0;
// if ($("#radareApp_mp").length) {
// //$("#main_panel").scrollTo({ top:delta_y, left:delta_x - delta/scale } );
// console.log(1);
// } else {
// //$('#center_panel').scrollTo({ top:delta_y, left:delta_x - delta/scale } );
// console.log('debug:');
// console.log(delta_y, delta_x, scale);
// console.log($('#center_panel'));
// }
// }
// });
} else {
$("#minimap").hide();
}
};
@ -250,21 +260,24 @@ function update_minimap() {
var scale = 1/Math.max(ws, hs);
var delta = 0;
if (hs > ws) delta = (minimap_width/2) - svg_width*scale/2;
var el = null;
// panel layout
// Update MiniMap area position
var el = $('#main_panel');
var mma_width = el.width()*scale;
var mma_height = el.height()*scale - delta;
var top_offset = el.scrollTop()*scale
var left_offset = el.scrollLeft()*scale + delta;
if (mma_width > minimap_width - left_offset) mma_width = minimap_width - left_offset;
if (mma_height > minimap_height - top_offset) mma_height = minimap_height - top_offset;
$("#minimap_area").width(mma_width);
$("#minimap_area").height(mma_height);
$("#minimap_area").css("top", top_offset);
$("#minimap_area").css("left", left_offset);
// Update MiniMap position
el = $('#center_panel');
if (el.scrollTop() < svg_height) {
$("#minimap_area").width(el.width()*scale);
$("#minimap_area").height(el.height()*scale);
if (el.scrollTop()*scale <= minimap_height - el.height()*scale)
$("#minimap_area").css("top", el.scrollTop()*scale);
$("#minimap_area").css("left", delta + el.scrollLeft()*scale);
}
el = $('#center_panel');
$("#minimap").css("left", el.scrollLeft() + $("#main_panel").width() - minimap_width);
$("#minimap").css("left", el.scrollLeft() + el.width() - minimap_width);
$("#minimap").css("top", el.scrollTop());
$("#minimap").css("border", "1px solid " + r2ui.colors['.ec_gui_background']);
$("#minimap_area").css("background", r2ui.colors['.ec_gui_background']);
}
}
@ -297,6 +310,7 @@ function render_graph(x) {
obj = JSON.parse(x.replace(/\\l/g,'\\n'));
} catch (e) {
console.log("Cannot parse JSON data");
return false
}
if (obj[0] === undefined) return false;
if (obj[0].blocks === undefined) return false;

View File

@ -27,7 +27,7 @@ GraphPanel.prototype.init_handlers = function() {
// Bind custom functions to mouse and key events
//$("#center_panel").scroll(on_scroll);
$(document).keypress(handleKeypress);
//$(document).keypress(handleKeypress);
$(document).click(handleClick);
$(document).dblclick(handleDoubleClick);
};
@ -177,7 +177,7 @@ GraphPanel.prototype.render = function(theme) {
// Show graph and seek to entrypoint
$("#main_panel").removeClass("ec_gui_background");
$("#main_panel").addClass("ec_gui_alt_background");
if ($('#minimap').length) $('#minimap')[0].innerHTML = "";
//if ($('#minimap').length) $('#minimap')[0].innerHTML = "";
var addr = null;
if (this.selected_offset !== null) {
@ -344,6 +344,7 @@ function handleDoubleClick (inEvent) {
}
// key handler
/*
function handleKeypress(inEvent) {
console.log("KEYPRESS!")
var keynum = inEvent.keyCode || inEvent.charCode || inEvent.which || 0;
@ -553,3 +554,4 @@ function do_define(element) {
//scroll_to_address(address);
}
}
*/