ch0ic3/cutter
1
0
Fork 0
mirror of https://github.com/rizinorg/cutter.git synced 2025-01-31 00:35:05 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #157 from hteso/minimap

Browse Source 
Add minimap to graph view
This commit is contained in:
Alvaro 2017-04-29 00:29:31 +02:00 committed by GitHub
commit 34ae84123e
6 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/html/graph/index.html
View File

@ -3,6 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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" /> <meta name="language" content="en" />
<title>radare2</title> <title>radare2</title>

8
src/html/graph/lib/css/graph.css
View File

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

9
src/html/graph/lib/css/graph_dark.css
View File

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

8
src/html/graph/lib/css/graph_light.css
View File

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

88
src/html/graph/lib/js/disasm.js
View File

@ -178,7 +178,17 @@ BBGraph.prototype.render = function() {
$("#minimap").css("left", $("#main_panel").width() - minimap_width); $("#minimap").css("left", $("#main_panel").width() - minimap_width);
$("#minimap").css("top", $("#center_panel").position().top - 40); $("#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) { paper.on( "cell:pointerup", function( cellview, evt, x, y) {
var model = cellview.model; var model = cellview.model;
@ -199,29 +209,29 @@ BBGraph.prototype.render = function() {
} }
}); });
// if (r2ui.graph_panel.minimap) { if (r2ui.graph_panel.minimap) {
// update_minimap(); update_minimap();
// $("#minimap_area").draggable({ // $("#minimap_area").draggable({
// containment: "parent", // containment: "parent",
// stop: function( event, ui ) { // stop: function( event, ui ) {
// var delta_x = ui.position.left/scale; // var delta_x = ui.position.left/scale;
// var delta_y = ui.position.top/scale; // var delta_y = ui.position.top/scale;
// if (delta_x < 0) delta_x = 0; // if (delta_x < 0) delta_x = 0;
// if (delta_y < 0) delta_y = 0; // if (delta_y < 0) delta_y = 0;
// if ($("#radareApp_mp").length) { // if ($("#radareApp_mp").length) {
// //$("#main_panel").scrollTo({ top:delta_y, left:delta_x - delta/scale } ); // //$("#main_panel").scrollTo({ top:delta_y, left:delta_x - delta/scale } );
// console.log(1); // console.log(1);
// } else { // } else {
// //$('#center_panel').scrollTo({ top:delta_y, left:delta_x - delta/scale } ); // //$('#center_panel').scrollTo({ top:delta_y, left:delta_x - delta/scale } );
// console.log('debug:'); // console.log('debug:');
// console.log(delta_y, delta_x, scale); // console.log(delta_y, delta_x, scale);
// console.log($('#center_panel')); // console.log($('#center_panel'));
// } // }
// } // }
// }); // });
// } else { } else {
// $("#minimap").hide(); $("#minimap").hide();
// } }
}; };
@ -250,21 +260,24 @@ function update_minimap() {
var scale = 1/Math.max(ws, hs); var scale = 1/Math.max(ws, hs);
var delta = 0; var delta = 0;
if (hs > ws) delta = (minimap_width/2) - svg_width*scale/2; 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'); el = $('#center_panel');
if (el.scrollTop() < svg_height) { $("#minimap").css("left", el.scrollLeft() + el.width() - minimap_width);
$("#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("top", el.scrollTop()); $("#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')); obj = JSON.parse(x.replace(/\\l/g,'\\n'));
} catch (e) { } catch (e) {
console.log("Cannot parse JSON data"); console.log("Cannot parse JSON data");
return false
} }
if (obj[0] === undefined) return false; if (obj[0] === undefined) return false;
if (obj[0].blocks === undefined) return false; if (obj[0].blocks === undefined) return false;

6
src/html/graph/lib/js/graph_panel.js
View File

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