364 lines
9.9 KiB
HTML
364 lines
9.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
<script>
|
||
|
|
var isLocalStorage = false;
|
||
|
|
var mxLoadStylesheets = false;
|
||
|
|
</script>
|
||
|
|
<script src="js/app.min.js"></script>
|
||
|
|
<script>
|
||
|
|
// NOTE: SVG Output fixes missing symbols in AsciiMath
|
||
|
|
// but produces larger output with clipping problems
|
||
|
|
Editor.initMath();
|
||
|
|
|
||
|
|
function render(data)
|
||
|
|
{
|
||
|
|
var graph = new Graph(document.getElementById('graph'));
|
||
|
|
data.border = parseInt(data.border) || 0;
|
||
|
|
data.w = parseInt(data.w) || 0;
|
||
|
|
data.h = parseInt(data.h) || 0;
|
||
|
|
|
||
|
|
// Parses XML
|
||
|
|
var xmlDoc = mxUtils.parseXml(data.xml);
|
||
|
|
var diagrams = null;
|
||
|
|
|
||
|
|
// Handles mxfile
|
||
|
|
if (xmlDoc.documentElement.nodeName == 'mxfile')
|
||
|
|
{
|
||
|
|
diagrams = xmlDoc.documentElement.getElementsByTagName('diagram');
|
||
|
|
|
||
|
|
if (diagrams.length > 0)
|
||
|
|
{
|
||
|
|
var diagramNode = diagrams[data.from || 0];
|
||
|
|
|
||
|
|
if (diagramNode != null)
|
||
|
|
{
|
||
|
|
// TODO: Migrate to pako
|
||
|
|
xmlDoc = mxUtils.parseXml(graph.decompress(mxUtils.getTextContent(diagramNode)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Enables math typesetting
|
||
|
|
var math = xmlDoc.documentElement.getAttribute('math') == '1';
|
||
|
|
|
||
|
|
if (math)
|
||
|
|
{
|
||
|
|
mxClient.NO_FO = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Createa graph instance
|
||
|
|
graph.foldingEnabled = false;
|
||
|
|
graph.setEnabled(false);
|
||
|
|
|
||
|
|
if (diagrams != null && diagrams.length > 0)
|
||
|
|
{
|
||
|
|
/**
|
||
|
|
* Adds placeholder for %page% and %pagenumber%
|
||
|
|
*/
|
||
|
|
var graphGetGlobalVariable = graph.getGlobalVariable;
|
||
|
|
|
||
|
|
graph.getGlobalVariable = function(name)
|
||
|
|
{
|
||
|
|
if (name == 'page')
|
||
|
|
{
|
||
|
|
return diagrams[0].getAttribute('name') || 'Page-1';
|
||
|
|
}
|
||
|
|
else if (name == 'pagenumber')
|
||
|
|
{
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
return graphGetGlobalVariable.apply(this, arguments);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Sets background image
|
||
|
|
var bgImg = xmlDoc.documentElement.getAttribute('backgroundImage');
|
||
|
|
|
||
|
|
if (bgImg != null)
|
||
|
|
{
|
||
|
|
bgImg = JSON.parse(bgImg);
|
||
|
|
graph.setBackgroundImage(new mxImage(bgImg.src, bgImg.width, bgImg.height));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Parses XML into graph
|
||
|
|
var codec = new mxCodec(xmlDoc);
|
||
|
|
codec.decode(xmlDoc.documentElement, graph.getModel());
|
||
|
|
|
||
|
|
// Loads background color
|
||
|
|
var bg = (data.bg != null && data.bg.length > 0) ? data.bg : xmlDoc.documentElement.getAttribute('background');
|
||
|
|
|
||
|
|
// Normalizes values for transparent backgrounds
|
||
|
|
if (bg == 'none' || bg == '')
|
||
|
|
{
|
||
|
|
bg = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Checks if export format supports transparent backgrounds
|
||
|
|
if (bg == null && data.format != 'gif' && data.format != 'png')
|
||
|
|
{
|
||
|
|
bg = '#ffffff';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Sets background color on page
|
||
|
|
if (bg != null)
|
||
|
|
{
|
||
|
|
document.body.style.backgroundColor = bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Sets initial value for PDF page background
|
||
|
|
graph.pdfPageVisible = false;
|
||
|
|
|
||
|
|
// Handles PDF output where the output should match the page format if the page is visible
|
||
|
|
if (data.format == 'pdf' && xmlDoc.documentElement.getAttribute('page') == '1' && data.w == 0 && data.h == 0)
|
||
|
|
{
|
||
|
|
var pw = xmlDoc.documentElement.getAttribute('pageWidth');
|
||
|
|
var ph = xmlDoc.documentElement.getAttribute('pageHeight');
|
||
|
|
graph.pdfPageVisible = true;
|
||
|
|
|
||
|
|
if (pw != null && ph != null)
|
||
|
|
{
|
||
|
|
graph.pageFormat = new mxRectangle(0, 0, parseFloat(pw), parseFloat(ph));
|
||
|
|
}
|
||
|
|
|
||
|
|
var ps = xmlDoc.documentElement.getAttribute('pageScale');
|
||
|
|
|
||
|
|
if (ps != null)
|
||
|
|
{
|
||
|
|
graph.pageScale = ps;
|
||
|
|
}
|
||
|
|
|
||
|
|
graph.getPageSize = function()
|
||
|
|
{
|
||
|
|
return new mxRectangle(0, 0, this.pageFormat.width * this.pageScale,
|
||
|
|
this.pageFormat.height * this.pageScale);
|
||
|
|
};
|
||
|
|
|
||
|
|
graph.getPageLayout = function()
|
||
|
|
{
|
||
|
|
var size = this.getPageSize();
|
||
|
|
var bounds = this.getGraphBounds();
|
||
|
|
|
||
|
|
if (bounds.width == 0 || bounds.height == 0)
|
||
|
|
{
|
||
|
|
return new mxRectangle(0, 0, 1, 1);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
// Computes untransformed graph bounds
|
||
|
|
var x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
|
||
|
|
var y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
|
||
|
|
var w = Math.floor(bounds.width / this.view.scale);
|
||
|
|
var h = Math.floor(bounds.height / this.view.scale);
|
||
|
|
|
||
|
|
var x0 = Math.floor(x / size.width);
|
||
|
|
var y0 = Math.floor(y / size.height);
|
||
|
|
var w0 = Math.ceil((x + w) / size.width) - x0;
|
||
|
|
var h0 = Math.ceil((y + h) / size.height) - y0;
|
||
|
|
|
||
|
|
return new mxRectangle(x0, y0, w0, h0);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Fits the number of background pages to the graph
|
||
|
|
graph.view.getBackgroundPageBounds = function()
|
||
|
|
{
|
||
|
|
var layout = this.graph.getPageLayout();
|
||
|
|
var page = this.graph.getPageSize();
|
||
|
|
|
||
|
|
return new mxRectangle(this.scale * (this.translate.x + layout.x * page.width),
|
||
|
|
this.scale * (this.translate.y + layout.y * page.height),
|
||
|
|
this.scale * layout.width * page.width,
|
||
|
|
this.scale * layout.height * page.height);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!graph.pdfPageVisible)
|
||
|
|
{
|
||
|
|
var b = graph.getGraphBounds();
|
||
|
|
|
||
|
|
// Floor is needed to keep rendering crisp
|
||
|
|
if (data.w > 0 && data.h > 0)
|
||
|
|
{
|
||
|
|
graph.view.scaleAndTranslate(Math.min(data.w / b.width, data.h / b.height),
|
||
|
|
Math.floor(-b.x + data.border), Math.floor(-b.y + data.border));
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
graph.view.setTranslate(Math.floor(-b.x + data.border), Math.floor(-b.y + data.border));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
// Disables border for PDF page export
|
||
|
|
data.border = 0;
|
||
|
|
|
||
|
|
// Moves to first page in page layout
|
||
|
|
var layout = graph.getPageLayout();
|
||
|
|
var page = graph.getPageSize();
|
||
|
|
var dx = layout.x * page.width;
|
||
|
|
var dy = layout.y * page.height;
|
||
|
|
|
||
|
|
if (dx != 0 || dy != 0)
|
||
|
|
{
|
||
|
|
graph.view.setTranslate(Math.floor(-dx), Math.floor(-dy));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Gets the diagram bounds and sets the document size
|
||
|
|
var bounds = (graph.pdfPageVisible) ? graph.view.getBackgroundPageBounds() : graph.getGraphBounds();
|
||
|
|
bounds.width += data.border;
|
||
|
|
bounds.height += data.border;
|
||
|
|
|
||
|
|
// Waits for all images to finish loading
|
||
|
|
var cache = new Object();
|
||
|
|
var waitCounter = 1;
|
||
|
|
|
||
|
|
// Decrements waitCounter and invokes callback when finished
|
||
|
|
function decrementWaitCounter()
|
||
|
|
{
|
||
|
|
if (--waitCounter < 1)
|
||
|
|
{
|
||
|
|
if (typeof window.callPhantom === 'function')
|
||
|
|
{
|
||
|
|
window.callPhantom(bounds);
|
||
|
|
}
|
||
|
|
else if (window.console != null)
|
||
|
|
{
|
||
|
|
console.log('loading complete');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function waitForImages(tagName, attributeName)
|
||
|
|
{
|
||
|
|
var imgs = document.body.getElementsByTagName(tagName);
|
||
|
|
waitCounter += imgs.length;
|
||
|
|
|
||
|
|
for (var i = 0; i < imgs.length; i++)
|
||
|
|
{
|
||
|
|
// No load events for image elements in Phantom using indirection instead
|
||
|
|
var src = imgs[i].getAttribute(attributeName);
|
||
|
|
|
||
|
|
if (typeof window.callPhantom !== 'function' && window.console != null)
|
||
|
|
{
|
||
|
|
console.log((cache[src] == null) ? 'loading' : 'cached', src);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (cache[src] == null)
|
||
|
|
{
|
||
|
|
cache[src] = new Image();
|
||
|
|
cache[src].onload = decrementWaitCounter;
|
||
|
|
cache[src].onerror = decrementWaitCounter;
|
||
|
|
cache[src].src = src;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
decrementWaitCounter();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Includes images in SVG and HTML labels
|
||
|
|
waitForImages('image', 'xlink:href');
|
||
|
|
waitForImages('img', 'src');
|
||
|
|
|
||
|
|
// Waits for MathJax to finish rendering
|
||
|
|
function renderMath(elt)
|
||
|
|
{
|
||
|
|
if (math && window.MathJax != null && window.MathJax.Hub != null)
|
||
|
|
{
|
||
|
|
waitCounter++;
|
||
|
|
Editor.MathJaxRender(elt);
|
||
|
|
|
||
|
|
// Asynchronous callback when MathJax has finished
|
||
|
|
window.MathJax.Hub.Queue(function ()
|
||
|
|
{
|
||
|
|
decrementWaitCounter();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Converts the graph to a vertical sequence of pages for PDF export
|
||
|
|
if (graph.pdfPageVisible)
|
||
|
|
{
|
||
|
|
// Workaround to match available paper size
|
||
|
|
var printScale = 0.72;
|
||
|
|
|
||
|
|
var pf = graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT;
|
||
|
|
var scale = 1 / graph.pageScale;
|
||
|
|
|
||
|
|
// Negative coordinates are cropped or shifted if page visible
|
||
|
|
var gb = graph.getGraphBounds();
|
||
|
|
var autoOrigin = false;
|
||
|
|
var border = 0;
|
||
|
|
var x0 = 0;
|
||
|
|
var y0 = 0;
|
||
|
|
|
||
|
|
// Computes unscaled, untranslated graph bounds
|
||
|
|
var x = (gb.width > 0) ? Math.ceil(gb.x / graph.view.scale - graph.view.translate.x) : 0;
|
||
|
|
var y = (gb.height > 0) ? Math.ceil(gb.y / graph.view.scale - graph.view.translate.y) : 0;
|
||
|
|
|
||
|
|
if (x < 0 || y < 0)
|
||
|
|
{
|
||
|
|
autoOrigin = true;
|
||
|
|
|
||
|
|
var ps = graph.pageScale;
|
||
|
|
var pw = pf.width * ps;
|
||
|
|
var ph = pf.height * ps;
|
||
|
|
|
||
|
|
// FIXME: Offset for page layout with x/y != 0
|
||
|
|
x0 = (x > 0) ? x : pf.width * -Math.floor(Math.min(0, x) / pw) + Math.min(0, x) / graph.pageScale;
|
||
|
|
y0 = (y > 0) ? y : pf.height * -Math.floor(Math.min(0, y) / ph) + Math.min(0, y) / graph.pageScale;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Applies print scale
|
||
|
|
pf = mxRectangle.fromRectangle(pf);
|
||
|
|
pf.width = Math.round(pf.width * printScale);
|
||
|
|
pf.height = Math.round(pf.height * printScale);
|
||
|
|
scale *= printScale;
|
||
|
|
|
||
|
|
// Starts at first visible page
|
||
|
|
if (graph.pageVisible)
|
||
|
|
{
|
||
|
|
var layout = graph.getPageLayout();
|
||
|
|
|
||
|
|
x0 -= Math.max(layout.x, 0) * pf.width;
|
||
|
|
y0 -= Math.max(layout.y, 0) * pf.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
var preview = new mxPrintPreview(graph, scale, pf, border, x0, y0);
|
||
|
|
preview.printBackgroundImage = true;
|
||
|
|
preview.autoOrigin = autoOrigin;
|
||
|
|
preview.backgroundColor = bg;
|
||
|
|
|
||
|
|
// Renders print output into this document and removes the graph container
|
||
|
|
preview.open(null, window);
|
||
|
|
graph.container.parentNode.removeChild(graph.container);
|
||
|
|
|
||
|
|
bounds = new mxRectangle(0, 0, pf.width, pf.height);
|
||
|
|
renderMath(graph.container.parentNode);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
renderMath(graph.container);
|
||
|
|
|
||
|
|
if (data.format != 'pdf')
|
||
|
|
{
|
||
|
|
document.body.style.width = Math.ceil(bounds.x + bounds.width) + 'px';
|
||
|
|
document.body.style.height = (Math.ceil(bounds.y + bounds.height) + 1) + 'px';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Immediate return if not waiting for any content
|
||
|
|
decrementWaitCounter();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body style="margin:0px;">
|
||
|
|
<div id="graph" style="width:100%;height:100%;"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|