maxGraph/docs/js-api/files/util/mxImageBundle-js.html

83 lines
27 KiB
HTML
Raw Normal View History

2012-05-21 20:32:26 +00:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><title>mxImageBundle</title><link rel="stylesheet" type="text/css" href="../../styles/main.css"><script language=JavaScript src="../../javascript/main.js"></script><script language=JavaScript src="../../javascript/prettify.js"></script><script language=JavaScript src="../../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();prettyPrint();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>
<!-- Generated by Natural Docs, version 1.5 -->
<!-- http://www.naturaldocs.org -->
<!-- saved from url=(0026)http://www.naturaldocs.org -->
<div id=Content><div class="CClass"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="mxImageBundle"></a>mxImageBundle</h1><div class=CBody><p>Maps from keys to base64 encoded images or file locations.&nbsp; All values must be URLs or use the format data:image/format followed by a comma and the base64 encoded image data, eg.&nbsp; &ldquo;data:image/gif,XYZ&rdquo;, where XYZ is the base64 encoded image data.</p><h4 class=CHeading>To add a new image bundle to an existing graph, the following code is used</h4><blockquote><pre class="prettyprint">var bundle = new mxImageBundle(alt);
bundle.putImage('myImage', 'data:image/gif,R0lGODlhEAAQAMIGAAAAAICAAICAgP' +
'//AOzp2O3r2////////yH+FUNyZWF0ZWQgd2l0aCBUaGUgR0lNUAAh+QQBCgAHACwAAAAA' +
'EAAQAAADTXi63AowynnAMDfjPUDlnAAJhmeBFxAEloliKltWmiYCQvfVr6lBPB1ggxN1hi' +
'laSSASFQpIV5HJBDyHpqK2ejVRm2AAgZCdmCGO9CIBADs=', fallback);
2013-05-03 13:17:05 +00:00
bundle.putImage('mySvgImage', 'data:image/svg+xml,' + encodeURIComponent(
'&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;' +
'&lt;linearGradient id=&quot;gradient&quot;&gt;&lt;stop offset=&quot;10%&quot; stop-color=&quot;#F00&quot;/&gt;' +
'&lt;stop offset=&quot;90%&quot; stop-color=&quot;#fcc&quot;/&gt;&lt;/linearGradient&gt;' +
'&lt;rect fill=&quot;url(#gradient)&quot; width=&quot;100%&quot; height=&quot;100%&quot;/&gt;&lt;/svg&gt;'), fallback);
2012-05-21 20:32:26 +00:00
graph.addImageBundle(bundle);
(end);
Alt is an optional boolean (default is false) that specifies if the value
or the fallback should be returned in &lt;getImage&gt;.
The image can then be referenced in any cell style using image=myImage.
If you are using mxOutline, you should use the same image bundles in the
graph that renders the outline.
The keys for images are resolved in &lt;mxGraph.postProcessCellStyle&gt; and
turned into a data URI if the returned value has a short data URI format
as specified above.
A typical value for the fallback is a MTHML link as defined in RFC 2557.
Note that this format requires a file to be dynamically created on the
server-side, or the page that contains the graph to be modified to contain
the resources, this can be done by adding a comment that contains the
resource in the HEAD section of the page after the title tag.
This type of fallback mechanism should be used in IE6 and IE7. IE8 does
support data URIs, but the maximum size is limited to 32 KB, which means
all data URIs should be limited to 32 KB.</pre></blockquote><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#mxImageBundle" >mxImageBundle</a></td><td class=SDescription>Maps from keys to base64 encoded images or file locations. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxImageBundle.Variables" >Variables</a></td><td class=SDescription></td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxImageBundle.images" id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">images</a></td><td class=SDescription>Maps from keys to images.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxImageBundle.alt" >alt</a></td><td class=SDescription>Specifies if the fallback representation should be returned.</td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxImageBundle.Functions" >Functions</a></td><td class=SDescription></td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxImageBundle.putImage" id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">putImage</a></td><td class=SDescription>Adds the specified entry to the map. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxImageBundle.getImage" id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">getImage</a></td><td class=SDescription>Returns the value for the given key. </td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>
<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxImageBundle.Variables"></a>Variables</h3></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxImageBundle.images"></a>images</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxImageBundle.prototype.images</td></tr></table></blockquote><p>Maps from keys to images.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxImageBundle.alt"></a>alt</h3><div class=CBody><p>Specifies if the fallback representation should be returned.</p></div></div></div>
<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxImageBundle.Functions"></a>Functions</h3></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxImageBundle.putImage"></a>putImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxImageBundle.prototype.putImage = function(</td><td class=PParameter nowrap>key,</td></tr><tr><td></td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>fallback</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Adds the specified entry to the map.&nbsp; The entry is an object with a value and fallback property as specified in the arguments.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxImageBundle.getImage"></a>getImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxImageBundle.prototype.getImage = function(</td><td class=PParameter nowrap>key</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the value for the given key.&nbsp; This returns the value or fallback, depending on <a href="#mxImageBundle.alt" class=LVariable id=link4 onMouseOver="ShowTip(event, 'tt4', 'link4')" onMouseOut="HideTip('tt4')">alt</a>.&nbsp; The fallback is returned if <a href="#mxImageBundle.alt" class=LVariable id=link5 onMouseOver="ShowTip(event, 'tt4', 'link5')" onMouseOut="HideTip('tt4')">alt</a> is true, the value is returned otherwise.</p></div></div></div>
</div><!--Content-->
<div id=Footer><a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
2014-07-25 06:48:01 +00:00
<div id=Menu><div class=MEntry><div class=MFile><a href="../index-txt.html">API Specification</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Editor</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="../editor/mxDefaultKeyHandler-js.html">mxDefaultKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultPopupMenu-js.html">mxDefaultPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultToolbar-js.html">mxDefaultToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxEditor-js.html">mxEditor</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Handler</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="../handler/mxCellHighlight-js.html">mxCellHighlight</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxCellMarker-js.html">mxCellMarker</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxCellTracker-js.html">mxCellTracker</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxConnectionHandler-js.html">mxConnectionHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxConstraintHandler-js.html">mxConstraintHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxEdgeHandler-js.html">mxEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxEdgeSegmentHandler-js.html">mxEdgeSegmentHandler.js</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxElbowEdgeHandler-js.html">mxElbowEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxGraphHandler-js.html">mxGraphHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxKeyHandler-js.html">mxKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxPanningHandler-js.html">mxPanningHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxPopupMenuHandler-js.html">mxPopupMenuHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxRubberband-js.html">mxRubberband</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxSelectionCellsHandler-js.html">mxSelectionCellsHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxTooltipHandler-js.html">mxTooltipHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxVertexHandler-js.html">mxVertexHandler</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Io</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="../io/mxCellCodec-js.html">mxCellCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxChildChangeCodec-js.html">mxChildChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodec-js.html">mxCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodecRegistry-js.html">mxCodecRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultKeyHandlerCodec-js.html">mxDefaultKeyHandlerCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultPopupMenuCodec-js.html">mxDefaultPopupMenuCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultToolbarCodec-js.html">mxDefaultToolbarCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxEditorCodec-js.html">mxEditorCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGenericChangeCodec-js.html">mxGenericChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphCodec-js.html">mxGraphCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphViewCodec-js.html">mxGraphViewCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxModelCodec-js.html">mxModelCodec</a><
2012-05-21 20:32:26 +00:00
var searchPanel = new SearchPanel("searchPanel", "HTML", "../../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Cookies">Cookies</option><option value="Events">Events</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Variables">Variables</option></select></div><script language=JavaScript><!--
HideAllBut([10], 13);// --></script></div><!--Menu-->
<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxImageBundle.prototype.images</td></tr></table></blockquote>Maps from keys to images.</div></div><div class=CToolTip id="tt2"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxImageBundle.prototype.putImage = function(</td><td class=PParameter nowrap>key,</td></tr><tr><td></td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>fallback</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Adds the specified entry to the map. </div></div><div class=CToolTip id="tt3"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxImageBundle.prototype.getImage = function(</td><td class=PParameter nowrap>key</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the value for the given key. </div></div><div class=CToolTip id="tt4"><div class=CVariable>Specifies if the fallback representation should be returned.</div></div><!--END_ND_TOOLTIPS-->
<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>
<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>