|
|
|
var socket = io.connect()
|
|
|
|
var docker = new Docker(socket, error, sigstack)
|
|
|
|
var parameters = docker.graphics.parameters
|
|
|
|
|
|
|
|
function error(e) {
|
|
|
|
$('#status').removeClass().addClass('error')
|
|
|
|
$('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+e.msg+'</p><pre>'+e.data+'</pre>').show()
|
|
|
|
}
|
|
|
|
|
|
|
|
function sigstack() {
|
|
|
|
$('#error').hide()
|
|
|
|
$('#clock').text((new Date()).toLocaleString())
|
|
|
|
$('#status').removeClass().addClass('wait')
|
|
|
|
var dot = docker.graphics.stack(parameters)
|
|
|
|
$('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
|
|
|
|
.attr('target', '_blank')
|
|
|
|
.attr('download', window.location.hostname+'.dot')
|
|
|
|
try {
|
|
|
|
$('#clock').text((new Date()).toLocaleString())
|
|
|
|
var svg = docker.graphics.viz(dot)
|
|
|
|
$('#stacks').html(svg)
|
|
|
|
$('#status').removeClass().addClass('success')
|
|
|
|
$('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
|
|
|
|
.attr('target', '_blank')
|
|
|
|
.attr('download', window.location.hostname+'.svg')
|
|
|
|
} catch (e) {
|
|
|
|
error(e)
|
|
|
|
}
|
|
|
|
$('#clock').text((new Date()).toLocaleString())
|
|
|
|
}
|
|
|
|
|
|
|
|
function setParameters() {
|
|
|
|
localStorage.rankdir = (++localStorage.rankdir)%setParameters.rankdirs.length
|
|
|
|
parameters.rankdir = setParameters.rankdirs[localStorage.rankdir]
|
|
|
|
$('#orientation').removeClass().addClass(parameters.rankdir.toLowerCase())
|
|
|
|
}
|
|
|
|
setParameters.rankdirs = ['LR', 'TB', 'RL', 'BT']
|
|
|
|
if (!localStorage.rankdir)
|
|
|
|
localStorage.rankdir = -1
|
|
|
|
else
|
|
|
|
--localStorage.rankdir
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
setParameters()
|
|
|
|
$('#orientation').on('click', () => {
|
|
|
|
setParameters()
|
|
|
|
sigstack()
|
|
|
|
})
|
|
|
|
if (localStorage.position)
|
|
|
|
$('body').removeClass().addClass(localStorage.position)
|
|
|
|
$('header').attr('draggable', 'true')
|
|
|
|
.on('dragstart', (event) => {
|
|
|
|
event.originalEvent.dataTransfer.setData("text", "");
|
|
|
|
})
|
|
|
|
$('*').on('dragover', (event) => {
|
|
|
|
event.preventDefault()
|
|
|
|
var e = event.originalEvent
|
|
|
|
var obj = $('body')
|
|
|
|
var w = window.innerWidth
|
|
|
|
var h = window.innerHeight
|
|
|
|
if (e.clientY < h*.1) {
|
|
|
|
obj.removeClass().addClass('top')
|
|
|
|
if (localStorage) localStorage.position = 'top';
|
|
|
|
} else if (e.clientY > h*.9) {
|
|
|
|
obj.removeClass().addClass('bottom')
|
|
|
|
if (localStorage) localStorage.position = 'bottom';
|
|
|
|
} else if (e.clientX < w*.1) {
|
|
|
|
obj.removeClass().addClass('left')
|
|
|
|
if (localStorage) localStorage.position = 'left';
|
|
|
|
} else if (e.clientX > w*.9) {
|
|
|
|
obj.removeClass().addClass('right')
|
|
|
|
if (localStorage) localStorage.position = 'right';
|
|
|
|
}
|
|
|
|
}).on('drop', (event) => {
|
|
|
|
event.preventDefault()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
$(init)
|