mxgraph-map-fix
Version:
mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
125 lines (111 loc) • 4.71 kB
HTML
<html>
<head>
<title>Embedded images</title>
<!--%mhtml%-->
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../../javascript/src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../../javascript/src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// True if data URIs are supported. IE8 has a size limit of 32KB for
// data URIs, so this must be used as a global size limit. It's not
// possible to work around this limitation by using MHTML because that
// is not supported in IE8.
var DATA_URL = %dataUrl%;
var graph = new mxGraph();
var bundle = new mxImageBundle(!DATA_URL);
function insert(name, data, fallback)
{
bundle.putImage(name, data, fallback);
var parent = graph.getDefaultParent();
graph.insertVertex(parent, null, '', 100, 20, 130, 80, 'shape=image;image=' + name);
};
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main()
{
%bundle%
graph.addImageBundle(bundle);
graph.init(document.getElementById('graphContainer'));
graph.setConnectable(true);
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
graph.insertVertex(parent, null, '', 20, 20, 30, 30, 'shape=image;image=myImage');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Three scenarios for loading embedded images in IE6/7:
// 1. At load-time: Embed in HTML page (see above and server-side)
// 2. From URL at runtime: Use script to encode and cache response. This is also needed for
// browsers that support HTML5 canvas because it's not possible to base64 encode an image
// from another domain due to security restrictions.
var url = 'http://www.jgraph.com/images/mxgraph.gif';
mxUtils.get(window.location.href + '?url=' + encodeURIComponent(url), function(req)
{
var lines = req.getText().split('\n');
var data = '';
// Scans the response for base64 encoded image data
for (var i = 6; i < lines.length; i++)
{
if (lines[i].length == 0)
{
data = lines[i + 1];
break;
}
}
data = data.substring(0, data.length - 1);
// The fallback can either be the URL or the MHTML URL which turns the image
// into MHTML on the server-side. Both are cached so even if the image changes
// while the diagram is open the image will remain visible. Note that the image
// will be replaced with an embedded image the next time the diagram is opened.
//url = 'mhtml:' + window.location.href + '?url=' + encodeURIComponent(url) + '!image';
insert(url, 'data:image/gif,' + data, url);
});
// 3. From local at runtime: Requires two roundtrips, one to get the base64 encoded
// string to put it into the bundle and another (in IE6/7) for the mhtml href.
// The response of the POST request contains JavaScript which calls the insert
// method above and removes the dynamically generated iframe with the form (below).
var clickHandler = function()
{
if (document.getElementById('embedimageframe') == null)
{
var ifrm = document.createElement('iframe');
ifrm.setAttribute('id', 'embedimageframe');
document.body.appendChild(ifrm);
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow :
(ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('<form method="POST" enctype="multipart/form-data" '+
'action="' + window.location.href + '">');
ifrm.document.write('File: <input type="file" name="upfile">');
ifrm.document.write('<input type="hidden" name="dataurl" value="' + DATA_URL + '">');
ifrm.document.write('<br><input type="submit" value="Insert">');
ifrm.document.write('</form>');
ifrm.document.close();
}
};
document.body.appendChild(mxUtils.button('Insert image', clickHandler));
mxUtils.br(document.body);
};
</script>
</head>
<body onload="main()">
<div id="graphContainer"
style="overflow:hidden;width:320px;height:240px;border:solid black 1px;cursor:default;">
</div>
</body>
</html>