You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
414 lines
14 KiB
414 lines
14 KiB
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<head> |
|
<link rel="stylesheet" type="text/css" href="dependency.css"> |
|
<link rel="stylesheet" href="Scripts/sidr/stylesheets/jquery.sidr.dark.css"> |
|
<style type="text/css" media="screen"> |
|
body { |
|
overflow: hidden; |
|
} |
|
|
|
#editor { |
|
margin: 0; |
|
position: absolute; |
|
top: 0; |
|
width: 700px; |
|
left: 0; |
|
height: 100%; |
|
} |
|
|
|
#sidr { |
|
width: 700px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script type="text/javascript" src="Scripts/jquery/jquery-2.1.4.min.js"></script> |
|
<script type="text/javascript" src="Scripts/sidr/jquery.sidr.js"></script> |
|
<script type="text/javascript" src="Scripts/underscore/underscore-min.js"></script> |
|
<script type="text/javascript" src="Scripts/d3/d3.v3.js"></script> |
|
|
|
<script type="text/javascript" src="origin.js"></script> |
|
|
|
<!-- ================================================= --> |
|
<!-- ===========ACTUAL HTML ================ --> |
|
<!-- ================================================= --> |
|
|
|
<form id="form"> |
|
<label><input type="range" name="circle_size" min="1" max="50" value="15"/> Circle size</label><br> |
|
<label><input type="range" name="charge_multiplier" min="1" max="500" value="100"/> Charge multiplier</label><br> |
|
<label><input type="range" name="link_strength" min="0.1" max="100" value="7"/> Link strength</label><br> |
|
<label><input type="checkbox" name="show_texts_near_circles"/> Show names</label><br> |
|
<input id="search_input" placeholder="Type regexp to filter nodes" style="width:100%;"><br> |
|
|
|
</form> |
|
|
|
<a id="simple-menu" class="editor-button" href="#sidr">Live editor</a> |
|
|
|
<div id="chart"> |
|
<!-- Here the SVG will be placed--> |
|
</div> |
|
|
|
<div id="sidr"> |
|
<pre id="editor"> |
|
// This one is used by default |
|
// Groups are set based on the Prefixes |
|
function default_coloring(d) { |
|
return color(d.group); |
|
} |
|
|
|
// This function will group nodes based on the |
|
// Rgular expressions you've provided |
|
function regex_based_coloring(d) { |
|
var className = d.name |
|
|
|
var rules = ["Magical", "Mapp", "^NS", "^UI", "^NI", "AF", ""]; |
|
// var rules = ["ViewController", "View"] |
|
|
|
for (var i = 0; i < rules.length; i++) { |
|
var re = new RegExp(rules[i], ""); |
|
if (className.match(re)) { |
|
return color(i + 1) |
|
} |
|
} |
|
return "black"; |
|
} |
|
|
|
// Filling out with default coloring |
|
node.style("fill", default_coloring) |
|
// node.style("fill", regex_based_coloring) |
|
|
|
force.start() |
|
</pre> |
|
</div> |
|
|
|
<script src="Scripts/ace/ace.js" type="text/javascript" charset="utf-8"></script> |
|
<script> |
|
var editor = ace.edit("editor"); |
|
editor.setTheme("ace/theme/twilight"); |
|
editor.getSession().setMode("ace/mode/javascript"); |
|
|
|
editor.getSession().on('change', function (e) { |
|
try { |
|
eval(editor.getSession().getValue()) |
|
} catch (err) { |
|
console.log(err) |
|
} |
|
}); |
|
</script> |
|
|
|
<script> |
|
$(document).ready(function () { |
|
$('#simple-menu').sidr( |
|
{ |
|
displace: false, |
|
onOpen: function () { |
|
editor.resize() |
|
} |
|
} |
|
); |
|
$("#chart").css("overflow", "hidden"); |
|
|
|
}); |
|
</script> |
|
|
|
<script src="Scripts/graph-actions-select-compiled.js"></script> |
|
<script src="Scripts/parse-compiled.js"></script> |
|
<script> |
|
|
|
// =================================================== |
|
// =============== CONFIGURABLE PARAMS ============== |
|
// =================================================== |
|
|
|
var default_link_distance = 10; |
|
|
|
// How far can we change default_link_distance? |
|
// 0 - I don't care |
|
// 0.5 - Change it as you want, but it's preferrable to have default_link_distance |
|
// 1 - One does not change default_link_distance |
|
var default_link_strength = 0.7; |
|
|
|
// Should I comment this? |
|
var default_circle_radius = 15; |
|
|
|
// you can set it to true, but this will not help to understanf what's going on |
|
var show_texts_near_circles = false; |
|
var default_max_texts_length = 100; |
|
|
|
var charge_multiplier = 200; |
|
|
|
var dvgraph = objcdv.parse_dependencies_graph(dependencies); |
|
var d3graph = dvgraph.d3jsGraph(); |
|
|
|
var w = window, |
|
d = document, |
|
e = d.documentElement, |
|
g = d.getElementsByTagName('body')[0], |
|
x = w.innerWidth || e.clientWidth || g.clientWidth, |
|
y = w.innerHeight || e.clientHeight || g.clientHeight; |
|
|
|
// =================================================== |
|
// =============== http://d3js.org/ Magic =========== |
|
// =================================================== |
|
|
|
// https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors |
|
var color = d3.scale.category10(); |
|
|
|
var container = d3.select("#chart").append("svg") |
|
.attr("width", x) |
|
.attr("height", y) |
|
.style("overflow", "hidden"); |
|
|
|
// =================================================== |
|
// =============== ZOOM LOGIC ======================== |
|
// =================================================== |
|
|
|
container.append("rect") |
|
.attr("width", x) |
|
.attr("height", y) |
|
.style("fill", "none") |
|
.style("pointer-events", "all") |
|
.call(d3.behavior.zoom().on("zoom", function () { |
|
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); |
|
})); |
|
|
|
|
|
// =================================================== |
|
// =============== FORCE LAYOUT ====================== |
|
// =================================================== |
|
|
|
var force = d3.layout.force() |
|
.charge(function (d) { |
|
return d.filtered ? 0 : -d.weight * charge_multiplier |
|
}) |
|
.linkDistance(function (l) { |
|
return l.source.filtered || l.target.filtered ? 500 : radius(l.source) + radius(l.target) + default_link_distance |
|
}) |
|
.size([x, y]) |
|
.nodes(d3.values(d3graph.nodes)) |
|
.links(d3graph.links) |
|
.linkStrength(function (l) { |
|
return l.source.filtered || l.target.filtered ? 0 : default_link_strength |
|
}) |
|
.start(); |
|
|
|
var svg = container.append('g'); |
|
var actions = graph_actions.create(svg, dvgraph); |
|
|
|
// =================================================== |
|
// =============== MARKERS SETUP ================== |
|
// =================================================== |
|
|
|
svg.append("defs").selectAll("marker") |
|
.data(["default", "dependency", "dependants"]) |
|
.enter().append("marker") |
|
.attr("id", function (d) { |
|
return d; |
|
}) |
|
.attr("viewBox", "0 -5 10 10") |
|
.attr("refX", 10) |
|
.attr("refY", 0) |
|
.attr("markerWidth", 10) |
|
.attr("markerHeight", 10) |
|
.attr("orient", "auto") |
|
.attr("class", "marker") |
|
.append("path") |
|
.attr("d", "M0,-5L10,0L0,5"); |
|
|
|
|
|
// =================================================== |
|
// =============== LINKS SETUP ================== |
|
// =================================================== |
|
|
|
var link = svg.append("g").selectAll("path") |
|
.data(d3graph.links) |
|
.enter().append("path") |
|
.attr("class", "link") |
|
.attr("marker-end", "url(#default)") |
|
.style("stroke-width", function (d) { |
|
return 1; |
|
}); |
|
|
|
// =================================================== |
|
// =============== NODES SETUP ================== |
|
// =================================================== |
|
|
|
var node = svg.append("g").selectAll("circle.node") |
|
.data(d3graph.nodes) |
|
.enter().append("circle") |
|
.attr("r", radius) |
|
.style("fill", function (d) { |
|
return color(d.group) |
|
}) |
|
.attr("class", "node") |
|
.attr("source", function (d) { |
|
return d.source |
|
}) |
|
.attr("dest", function (d) { |
|
return d.dest |
|
}) |
|
.call(force.drag) |
|
.on("click", function (d) { |
|
if (d3.event.defaultPrevented) { |
|
return |
|
} |
|
actions.selectNodesStartingFromNode(d, 1); |
|
force.start(); |
|
}) |
|
.on("contextmenu", function (d) { |
|
if (d3.event.defaultPrevented) { |
|
return |
|
} |
|
// Don't actually show context menu |
|
d3.event.preventDefault(); |
|
|
|
actions.selectNodesStartingFromNode(d); |
|
force.start(); |
|
}); |
|
|
|
// =================================================== |
|
// =============== TEXT NODES SETUP ============= |
|
// =================================================== |
|
|
|
var text = svg.append("g").selectAll("text") |
|
.data(force.nodes()) |
|
.enter().append("text") |
|
.attr("visibility", "hidden") |
|
.text(function (d) { |
|
return d.name.substring(0, default_max_texts_length) |
|
}); |
|
|
|
// =================================================== |
|
// =============== FORCE UPDATE ============= |
|
// =================================================== |
|
|
|
force.on("tick", function (e) { |
|
svg.selectAll(".node").attr("r", radius); |
|
link.attr("d", link_line); |
|
node.attr("transform", transform); |
|
if (show_texts_near_circles) { |
|
text.attr("transform", transform); |
|
} |
|
}); |
|
|
|
// =================================================== |
|
// =============== HELPER FUNCTIONS ============= |
|
// =================================================== |
|
function link_line(d) { |
|
var dx = d.target.x - d.source.x, |
|
dy = d.target.y - d.source.y, |
|
dr = Math.sqrt(dx * dx + dy * dy); |
|
|
|
var rsource = radius(d.sourceNode) / dr; |
|
var rdest = radius(d.targetNode) / dr; |
|
var startX = d.source.x + dx * rsource; |
|
var startY = d.source.y + dy * rsource; |
|
|
|
var endX = d.target.x - dx * rdest; |
|
var endY = d.target.y - dy * rdest; |
|
return "M" + startX + "," + startY + "L" + endX + "," + endY; |
|
} |
|
|
|
function transform(d) { |
|
return "translate(" + d.x + "," + d.y + ")"; |
|
} |
|
|
|
function radius(d) { |
|
return default_circle_radius + default_circle_radius * d.source / 10; |
|
} |
|
|
|
/* |
|
Window resize update |
|
*/ |
|
w.onresize = function () { |
|
x = w.innerWidth || e.clientWidth || g.clientWidth; |
|
y = w.innerHeight || e.clientHeight || g.clientHeight; |
|
|
|
container.attr("width", Math.ceil(x)).attr("height", Math.ceil(y)); |
|
force.size([Math.ceil(x), Math.ceil(y)]).start(); |
|
}; |
|
|
|
|
|
</script> |
|
|
|
<script> |
|
// =================================================== |
|
// =============== INPUTS HANDLING ============== |
|
// =================================================== |
|
d3.selectAll("input").on("change", function change() { |
|
|
|
if (this.name == "circle_size") { |
|
default_circle_radius = parseInt(this.value); |
|
force.linkDistance(function (l) { |
|
return radius(l.source) + radius(l.target) + default_link_distance; |
|
}); |
|
force.start(); |
|
} |
|
|
|
if (this.name == "charge_multiplier") { |
|
charge_multiplier = parseInt(this.value); |
|
force.start(); |
|
} |
|
|
|
if (this.name == "link_strength") { |
|
default_link_strength = parseInt(this.value) / 10; |
|
force.linkStrength(default_link_strength); |
|
force.start(); |
|
} |
|
|
|
if (this.name == "show_texts_near_circles") { |
|
text.attr("visibility", this.checked ? "visible" : "hidden"); |
|
show_texts_near_circles = this.checked; |
|
force.start(); |
|
} |
|
|
|
}); |
|
</script> |
|
|
|
|
|
<script> |
|
// =================================================== |
|
// =============== LIVE FILTERING ============== |
|
// =================================================== |
|
|
|
function live_filter_graph(regexp, classname, invert) { |
|
classname = typeof classname !== 'undefined' ? classname : "filtered"; |
|
invert = typeof invert !== 'undefined' ? invert : false; |
|
|
|
var re = new RegExp(regexp, "i"); |
|
svg.selectAll('circle, text') |
|
.classed(classname, function (node) { |
|
var filtered = !node.name.match(re); |
|
filtered = invert ? !filtered : filtered; |
|
node.filtered = filtered; |
|
node.neighbours = !filtered; |
|
return filtered; |
|
}) |
|
.transition(); |
|
|
|
svg.selectAll('.link') |
|
.classed(classname, function (l) { |
|
var filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re)); |
|
filtered = invert ? !filtered : filtered; |
|
return filtered; |
|
}) |
|
.attr("marker-end", function (l) { |
|
var filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re)); |
|
filtered = invert ? !filtered : filtered; |
|
return filtered ? "" : "url(#default)" |
|
}) |
|
.transition() |
|
} |
|
|
|
|
|
d3.select("#search_input").on("input", function () { |
|
// Filter all items |
|
console.log("Input changed to" + this.value); |
|
actions.deselect_selected_node(); |
|
|
|
if (this.value && this.value.length) { |
|
live_filter_graph(this.value, "filtered"); |
|
force.start(); |
|
} |
|
}); |
|
</script>
|
|
|