<!DOCTYPE html> <meta charset="utf-8"> <head> <link rel="stylesheet" type="text/css" href="css/dependency.css"> <link rel="stylesheet" type="text/css" href="components/sidr/stylesheets/jquery.sidr.dark.css"> <link rel="stylesheet" type="text/css" href="components/editor/editor.css"> </head> <body> <!-- A lot of Javascript here :) --> <script type="text/javascript" src="components/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="components/underscore/underscore-min.js"></script> <script type="text/javascript" src="components/d3/d3.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> <!-- Add editor logic with button and everything else --> <script type="text/javascript" src="components/sidr/jquery.sidr.js"></script> <script type="text/javascript" src="components/ace/ace.js"></script> <script type="text/javascript" src="components/editor/editor.js"></script> <a id="simple-menu" class="editor-button" href="#sidr">Live editor</a> <div id="chart"> <!-- Here the SVG will be placed--> </div> <script type="text/javascript" src="origin.js"></script> <script src="components/depvis/depvis-graph-actions-select.js"></script> <script src="components/depvis/depvis-parse.js"></script> <script src="components/depvis/depvis-config.js"></script> <script src="components/depvis/depvis-visualizer.js"></script> <script> // =================================================== // =============== CONFIGURABLE PARAMS ============== // =================================================== let config = dvconfig.create(); const dvgraph = objcdv.parse_dependencies_graph(dependencies); const 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 =========== // =================================================== const container = d3.select("#chart").append("svg") .attr("width", x) .attr("height", y) .style("overflow", "hidden"); const svg = container.append('g'); const actions = graph_actions.create(svg, dvgraph); let visualizer = dvvisualizer.create(svg, config, d3graph); visualizer.initialize(); visualizer.setupZoom(container); // =================================================== // =============== NODES SETUP ================== // =================================================== // Handling pressing visualizer.objectNodes .on("click", d => { if (d3.event.defaultPrevented) { return } actions.selectNodesStartingFromNode(d, 1); visualizer.reapply_charge_and_links() }) .on("contextmenu", d => { if (d3.event.defaultPrevented) { return } // Don't actually show context menu d3.event.preventDefault(); actions.selectNodesStartingFromNode(d); visualizer.reapply_charge_and_links() }); /* Window resize update */ w.onresize = () => { 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)); visualizer.updateCenter(x / 2, y / 2); }; </script> <script> // =================================================== // =============== INPUTS HANDLING ============== // =================================================== d3.selectAll("input").on("change", function change() { if (this.name === "circle_size") { config.default_circle_radius = parseInt(this.value); visualizer.updateRadiuses(parseInt(this.value)); } if (this.name === "charge_multiplier") { let chargeMultiplier = parseInt(this.value); visualizer.reapply_charge(chargeMultiplier) } if (this.name === "link_strength") { let linkStrength = parseInt(this.value) / 10; visualizer.reapply_links_strength(linkStrength) } if (this.name === "show_texts_near_circles") { visualizer.updateTextVisibility(this.checked) } }); </script> <script> // =================================================== // =============== LIVE FILTERING ============== // =================================================== function live_filter_graph(regexp, classname, invert) { classname = setDefaultValue(classname, "filtered"); invert = setDefaultValue(invert, false); const re = new RegExp(regexp, "i"); visualizer.allNodes .classed(classname, node => { let filtered = !node.name.match(re); filtered = invert ? !filtered : filtered; node.filtered = filtered; node.neighbours = !filtered; return filtered; }) .transition(); svg.selectAll('.link') .classed(classname, l => { let filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re)); filtered = invert ? !filtered : filtered; return filtered; }) .attr("marker-end", l => { let 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"); } visualizer.reapply_charge_and_links(); }); </script>