121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
// Copyright Epic Games, Inc. All Rights Reserved.
|
|
|
|
class FlowOptions{
|
|
showOnlyForced = false;
|
|
showFiltered = false;
|
|
showGroups = false;
|
|
hideDisconnected = false;
|
|
}
|
|
|
|
|
|
function setDefault(map, key, def) {
|
|
const val = map.get(key);
|
|
if (val) {
|
|
return val;
|
|
}
|
|
map.set(key, def);
|
|
return def;
|
|
}
|
|
|
|
function renderGraph(src) {
|
|
return Viz.instance().then(function (viz) {
|
|
try {
|
|
return viz.renderSVGElement(src);
|
|
}
|
|
catch (err) {
|
|
console.log(src)
|
|
throw err
|
|
}
|
|
})
|
|
}
|
|
|
|
function parseOptions(search) {
|
|
|
|
let options = new FlowOptions();
|
|
|
|
options.showOnlyForced = !!search.match(/showOnlyForced/i);
|
|
options.showFiltered = !!search.match(/showFiltered/i);
|
|
options.showGroups = !!search.match(/showGroups/i);
|
|
options.hideDisconnected = !!search.match(/hideDisconnected/i);
|
|
|
|
return options;
|
|
|
|
}
|
|
|
|
function makeGraph(data, args) {
|
|
const options = args;
|
|
const singleBotName = args.singleBotName;
|
|
if (singleBotName) {
|
|
return (new Graph(data, options)).singleBot(singleBotName);
|
|
}
|
|
const botNames = args.botNames;
|
|
if (botNames.length > 0) {
|
|
options.botsToShow = botNames.map(s => s.toUpperCase());
|
|
}
|
|
return (new Graph(data, options)).allBots();
|
|
}
|
|
|
|
function getAllBots(data) {
|
|
let allBots = new Set();
|
|
|
|
for (branch of data) {
|
|
allBots.add(branch.bot);
|
|
}
|
|
|
|
return allBots;
|
|
}
|
|
|
|
function savePNG() {
|
|
const svg = document.getElementById("svgSpan").querySelector('svg');
|
|
const svgBoundingRect = svg.getBoundingClientRect();
|
|
|
|
var canvas = document.getElementById("cnvs");
|
|
canvas.width = svgBoundingRect.width*1.02; // 2% wider seems to be needed to actually fit the image on the canvas
|
|
canvas.height = svgBoundingRect.height;
|
|
|
|
const svgData = new XMLSerializer().serializeToString(svg);
|
|
const imgBlob = new Blob([svgData], { type: 'image/svg+xml' });
|
|
var img = new Image();
|
|
img.onload = function () {
|
|
canvas.getContext('2d').drawImage(img, 0, 0);
|
|
var a = document.createElement('a');
|
|
a.href = canvas.toDataURL('image/png').replace('image/png', 'octet/stream');
|
|
a.download = 'botGraph.png'; // TODO: Dynamic Name Generation
|
|
a.click();
|
|
};
|
|
const win = window.URL || window.webkitURL || window;
|
|
img.src = win.createObjectURL(imgBlob);
|
|
}
|
|
|
|
function showFlowGraph(data, args, addlegend) {
|
|
const lines = makeGraph(data, args);
|
|
const graphContainer = $('<div class="clearfix">');
|
|
const flowGraph = $('<div class="flow-graph" style="display:inline-block;">').appendTo(graphContainer);
|
|
flowGraph.append($('<div>').css('text-align', 'center').text("Building graph..."));
|
|
renderGraph(lines.join('\n'))
|
|
.then(svg => {
|
|
|
|
if(addlegend)
|
|
{
|
|
$('#graph-key-template')
|
|
.clone()
|
|
.removeAttr('id')
|
|
.css('display', 'inline-block')
|
|
.appendTo(graphContainer);
|
|
}
|
|
|
|
|
|
$('#graph-loading-text').hide();
|
|
const span = $('<span id="svgSpan">').css('margin', 'auto').html(svg);
|
|
const svgEl = $('svg', span).addClass('branch-graph').removeAttr('width');
|
|
// scale graph to 70% of default size
|
|
const height = Math.round(parseInt(svgEl.attr('height')) * .7);
|
|
svgEl.attr('height', height + 'px').css('vertical-align', 'top');
|
|
flowGraph.empty();
|
|
flowGraph.append($('<img src="/img/save.png" style="position:absolute" onclick="savePNG()" title="Save Graph as PNG" width="16">'));
|
|
flowGraph.append(span);
|
|
flowGraph.append($('<canvas id="cnvs" class="hidden"></canvas>'))
|
|
});
|
|
return graphContainer;
|
|
}
|