bdcontract-web-ide/js/onlineide/staticAnalysis.js

var showAnalysis = function() {
    //console.log("showAnalysis test")
    var isAnalysis = document.getElementById("analysis").style.display;
    var isResize = document.getElementById("resize").style.display;
    //console.log(isAnalysis);
    var top = document.getElementById("contractCode");
    var down = document.getElementById("analysis");
    var box = document.getElementById("box");

    if (isAnalysis == "none") {
        document.getElementById("analysis").style.display = "block";
        document.getElementById("resize").style.display = "block";
        var moveLen=300;
        top.style.height = moveLen + "px";
        $("#contractCode .CodeMirror").css("height",moveLen + "px");
        down.style.height = (box.clientHeight - moveLen - 10) + "px";
        staticAnalysis();
    } else {
        document.getElementById("analysis").style.display = "none";
        document.getElementById("resize").style.display = "none";
        top.style.height="100%";
        $("#contractCode .CodeMirror").css("height","100%");
    }
    //document.getElementById("analysis").style.display = "";
};

var staticAnalysis = function() {
	var req = {};
	req.action = "getControlFlowByFileName";
	req.isPrivate = global.currentFile.isPrivate;
	var path = global.currentFile.path;
    if (path.startsWith("/"))
        path = path.substr(1);
    path = path.replace(/\/.*$/g,"");
	req.projectName = path;
    array = $("#form").serializeArray();
    req.formData=JSON.stringify(array);
    global.wssocket.send(JSON.stringify(req));
};

window.onload = function(){
    var resize = document.getElementById("resize");
    var top = document.getElementById("contractCode");
    var down = document.getElementById("analysis");
    var box = document.getElementById("box");
    resize.onmousedown = function(e){
        var startY = e.clientY;
        resize.top = resize.offsetTop;

        document.onmousemove = function(e){
            var endY = e.clientY;
            var moveLen = resize.top  + (endY - startY);
            var maxT = box.clientHeight - resize.offsetHeight;
            if(moveLen<150) moveLen = 150;
            if(moveLen>maxT-150) moveLen = maxT-150;
            resize.style.top = moveLen;
            top.style.height = moveLen + "px";
             $("#contractCode .CodeMirror").css("height",top.style.height);
            down.style.height = (box.clientHeight - moveLen - 5) + "px";
        }
        document.onmouseup = function(evt){
            document.onmousemove = null;
            document.onmouseup = null;
            resize.releaseCapture && resize.releaseCapture();
        }
        resize.setCapture && resize.setCapture();
        return false;
    }
}


var onGetControlFlow = function(obj) {
	var data = {};
	data.name = data.path = "/tmp/result_" + (new Date().getTime() % 1000)
			+ ".txt";
	obj = JSON.parse(obj.result);
	global.analysisResult = obj;
	$("#analysisFunction").html("<option value=''>选择方法</option>");
    for (var key in obj){
        $("#analysisFunction").append("<option value='"+key+"'>"+key+"</option>");
    };



	data.val = JSON.stringify(obj, null, 4);
	mainVue.openedFiles.push(data);
	setTimeout(function() {
		clickTab(data.path);
	}, 100);
}
var showAnalysisResult = function(){
    var functionName = $("#analysisFunction")[0].value;
    if (global.analysisResult[functionName]!=undefined){
        drawMethod(global.analysisResult[functionName]);
    }
};

var drawMethod = function(method) {
	var states = {};
	for (var i = 0; i < method.blocks.length; i++) {
		var block = method.blocks[i];
		var desp = {};
		desp.description = "字节码指令："+"<br/>"+ stmt2Str(block.stmts);
		desp.description += "<br/><br/>" + "后续分析结果：" +"<br/>" + block.result;
		desp.description += "<br/><br/>" + "源码："+"<br/>"+ block.original;
		desp.description += "<br/><br/>" + "数据依赖："+"<br/>"+ block.blockDep;
		if (block.type != "Continuous")
			desp.fill = "#f77";
		states[block.name] = desp;
	}
	drawCFGraph(states, method.edges);
	var retDesp = "数据值传递依赖：";
	//retDesp += method.ret;
	var tmp1 = method.ret;
	retDesp += tmp1.split(":")[tmp1.split(',').length];
	retDesp += "\n";
	retDesp += "数据控制依赖：";
	var tmp2= method.blocks[method.blocks.length-1].blockDep;
	//retDesp += tmp.split(":")[tmp.split(',').length];
	retDesp += tmp2;
	retDesp += "\n";
	retDesp += method.finalRet;
	document.getElementById("ret").value = retDesp;
};

var stmt2Str = function(l) {
	var str = "";
	for (var i = 0; i < l.length; i++)
		str += "<span style='text-overflow:ellipsis'>"
				+ l[i].replace(/\//g, ".") + "</span>" + "<br/>";
	return str;
}

var drawCFGraph = function(states, edges) {
	var g = new dagreD3.graphlib.Graph().setGraph({});
	// Add states to the graph, set labels, and style
	Object.keys(states).forEach(function(state) {
		var value = states[state];
		value.label = state;
		value.rx = value.ry = 5;
		value.style = "fill:white;stroke:"+primaryColor;
		g.setNode(state, value);
	});
	for (var i = 0; i < edges.length; i++){
	    edges[i].label.style= "fill:#fff;stroke:"+primaryColor+";stroke-width:2px";
	    if (edges[i].label.label=='e')
	        edges[i].label.label = "";
	    g.setEdge(edges[i].from, edges[i].to,edges[i].label);
	}
	// Set up the edges

	// Create the renderer
	var render = new dagreD3.render();
	$("svg").html("");
	// Set up an SVG group so that we can translate the final graph.
	var svg = d3.select("svg"), inner = svg.append("g");

	// Set up zoom support
	var zoom = d3.zoom().on("zoom", function() {
		inner.attr("transform", d3.event.transform);
	});
	svg.call(zoom);

	// Simple function to style the tooltip for the given node.
	var styleTooltip = function(name, description) {
		return "<p class='name'>" + name + "</p><p class='description'>"
				+ description + "</p>";
	};

	// Run the renderer. This is what draws the final graph.
	render(inner, g);

	inner.selectAll("g.node").attr("title", function(v) {
		return styleTooltip(v, g.node(v).description)
	}).each(function(v) {
		$(this).tipsy({
			gravity : "w",
			opacity : 1,
			html : true
		});
	});

	// Center the graph
	var initialScale = 0.75;
	var width  =$("#svgCanvas").css("width").replace("px","")/1;
	svg.call(zoom.transform, d3.zoomIdentity.translate(
			(width - g.graph().width * initialScale) / 2, 20)
			.scale(initialScale));
	svg.attr('height', g.graph().height * initialScale + 40);
}


var downloadAnalysis = function() {
	var pdf = new jsPDF('p', 'pt', 'a4');
	//page1
	/*
	pdf.addFont('NotoSansCJKtc-Regular.ttf', 'NotoSansCJKtc', 'normal');
    pdf.setFont('NotoSansCJKtc');
    */
	pdf.text('Analysis Report', 10, 20);
	var res = document.getElementById("ret").value;
	pdf.text(res, 10, 20);
	//page2
	pdf.addPage();
	//method1：add text
	//get svg
	var svg = $("#svgCanvas")[0].outerHTML;
	if (svg)
		    svg = svg.replace(/\r?\n|\r/g, '').trim();
	//change svg to canvas
	var canvas = document.createElement('canvas');
	ctx = canvas.getContext('2d');
	var v = canvg.Canvg.fromString(ctx, svg);

	//create image
	var imgData = canvas.toDataURL('image/png');
	pdf.addImage(imgData, 'PNG', 0, 0, 595.28, 841.89);

	/*
	//method2：add text to image
	var canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    var svg = document.getElementById('svg-container').innerHTML;
    var v = canvg.Canvg.fromString(ctx, svg);
    v.start();
    ctx.font="20px Georgia";
    ctx.fillText(res, 10, 20);
    var imgData = canvas.toDataURL('image/png');
	pdf.addImage(imgData, 'PNG', 0, 0, 595.28, 841.89);
	*/
	pdf.save('report.pdf');
}