js畫圖開發庫--mxgraph--[ports-所有接口示範.html]
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZzEWO1gzM1M2YjNTLmRmNh1yY5M2MtkDZiJWLmJDNjZWN1E2LcFTMwYzLcBDOwAzLcRnbl1GajFGd0F2LcRWYvxGc19CXt92YuUWelRXauwGZvw1LcpDc0RHaiojIsJye.png)
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>所有接口例子</title>
<!-- 字型大小風格 -->
<style type="text/css" media="screen">
BODY {
font-family: Arial;
}
H1 {
font-size: 18px;
}
H2 {
font-size: 16px;
}
</style>
<!-- 如果本檔案的包與src不是在同一個目錄,就要将basepath設定到src目錄下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支援庫檔案 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代碼 -->
<script type="text/javascript">
// 程式啟動方法
function main(container, outline, toolbar, sidebar, status)
{
// 浏覽器相容檢測
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 定義全局變量,如。用于觸發建立新的連接配接的活動區域的最小尺寸(以像素為機關),該部分(100%)的小區區域被用于觸發新的連接配接,以及一些視窗和“下拉菜菜單選擇
mxConstants.MIN_HOTSPOT_SIZE = 16;
mxConstants.DEFAULT_HOTSPOT = 1;
// 顯示導航線
mxGraphHandler.prototype.guidesEnabled = true;
// Alt 鍵禁用導航線
mxGuide.prototype.isEnabledForEvent = function(evt)
{
return !mxEvent.isAltDown(evt);
};
// 自動導航目标
mxEdgeHandler.prototype.snapToTerminals = true;
// IE浏覽器樣式修複
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(container);
new mxDivResizer(outline);
new mxDivResizer(toolbar);
new mxDivResizer(sidebar);
new mxDivResizer(status);
}
// 建立圖形編輯器
var editor = new mxEditor();
var graph = editor.graph;
var model = graph.getModel();
// 啟用高亮工具欄
graph.setDropEnabled(false);
// 連接配接預覽
graph.connectionHandler.getConnectImage = function(state)
{
return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
};
// 顯示中心端口圖示
graph.connectionHandler.targetConnectImage = true;
// 禁止連接配接線晃動
graph.setAllowDanglingEdges(false);
//設定圖形容器,并配置編輯器
editor.setGraphContainer(container);
var config = mxUtils.load(
'editors/config/keyhandler-commons.xml').
getDocumentElement();
editor.configure(config);
// 設定預設組
// groupBorderSize 設定圖形和它的子元素的邊距。
var group = new mxCell('Group', new mxGeometry(), 'group');
group.setVertex(true);
group.setConnectable(false);
editor.defaultGroup = group;
editor.groupBorderSize = 20;
// 目标是否有效
graph.isValidDropTarget = function(cell, cells, evt)
{
return this.isSwimlane(cell);
};
// 是否根元素
graph.isValidRoot = function(cell)
{
return this.isValidDropTarget(cell);
}
// 是否可以被選中
graph.isCellSelectable = function(cell)
{
return !this.isCellLocked(cell);
};
// 傳回元素
graph.getLabel = function(cell)
{
var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"
if (this.isCellLocked(cell))
{
// 如元素被鎖定 傳回空标簽
return '';
}
else if (this.isCellCollapsed(cell))
{
var index = tmp.indexOf('</h1>');
if (index > 0)
{
tmp = tmp.substring(0, index+5);
}
}
return tmp;
}
// 禁用HTML的泳道标簽,避免沖突
// 判斷是否為泳道标簽
graph.isHtmlLabel = function(cell)
{
return !this.isSwimlane(cell);
}
// To disable the folding icon, use the following code:
/*graph.isCellFoldable = function(cell)
{
return false;
}*/
// 輕按兩下顯示模型視窗
graph.dblClick = function(evt, cell)
{
// 如果不是輕按兩下事件,編輯器會自動處理
if (this.isEnabled() &&
!mxEvent.isConsumed(evt) &&
cell != null &&
this.isCellEditable(cell))
{
if (this.model.isEdge(cell) ||
!this.isHtmlLabel(cell))
{
this.startEditingAtCell(cell);
}
else
{
var content = document.createElement('div');
content.innerHTML = this.convertValueToString(cell);
showModalWindow(this, 'Properties', content, 400, 300);
}
}
// 禁用任何預設輕按兩下行為
mxEvent.consume(evt);
};
// 啟用新連接配接
graph.setConnectable(true);
// 配置樣式
configureStylesheet(graph);
// 添加側邊欄圖示
//
// NOTE: 如果不是HTML樣式,可以通過另外一種方式添加:
// addSidebarIcon(graph, sidebar, 'Website', 'images/icons48/earth.png');
addSidebarIcon(graph, sidebar,
'<h1 style="margin:0px;">Website</h1><br>'+
'<img src="images/icons48/earth.png" width="48" height="48">'+
'<br>'+
'<a href="http://www.jgraph.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank">Browse</a>',
'images/icons48/earth.png');
addSidebarIcon(graph, sidebar,
'<h1 style="margin:0px;">Process</h1><br>'+
'<img src="images/icons48/gear.png" width="48" height="48">'+
'<br><select><option>Value1</option><option>Value2</option></select><br>',
'images/icons48/gear.png');
addSidebarIcon(graph, sidebar,
'<h1 style="margin:0px;">Keys</h1><br>'+
'<img src="images/icons48/keys.png" width="48" height="48">'+
'<br>'+
'<button οnclick="mxUtils.alert(\'generate\');">Generate</button>',
'images/icons48/keys.png');
addSidebarIcon(graph, sidebar,
'<h1 style="margin:0px;">New Mail</h1><br>'+
'<img src="images/icons48/mail_new.png" width="48" height="48">'+
'<br><input type="checkbox"/>CC Archive',
'images/icons48/mail_new.png');
addSidebarIcon(graph, sidebar,
'<h1 style="margin:0px;">Server</h1><br>'+
'<img src="images/icons48/server.png" width="48" height="48">'+
'<br>'+
'<a href="http://www.mxgraph.blogspot.com" target="_blank" rel="external nofollow" target="_blank">Ping</a>',
'images/icons48/server.png');
// 在一個半透明的視窗中顯示提示圖示。
var hints = document.createElement('div');
hints.style.position = 'absolute';
hints.style.overflow = 'hidden';
hints.style.width = '230px';
hints.style.bottom = '56px';
hints.style.height = '76px';
hints.style.right = '20px';
hints.style.background = 'black';
hints.style.color = 'white';
hints.style.fontFamily = 'Arial';
hints.style.fontSize = '10px';
hints.style.padding = '4px';
mxUtils.setOpacity(hints, 50);
mxUtils.writeln(hints, '- Drag an image from the sidebar to the graph');
mxUtils.writeln(hints, '- Doubleclick on a vertex or edge to edit');
mxUtils.writeln(hints, '- Shift- or Rightclick and drag for panning');
mxUtils.writeln(hints, '- Move the mouse over a cell to see a tooltip');
mxUtils.writeln(hints, '- Click and drag a vertex to move and connect');
document.body.appendChild(hints);
// 建立一個新的DIV容器作為一個工具欄,添加工具欄按鈕。
var spacer = document.createElement('div');
spacer.style.display = 'inline';
spacer.style.padding = '8px';
addToolbarButton(editor, toolbar, 'groupOrUngroup', '(Un)group', 'images/group.png');
// Defines a new action for deleting or ungrouping
editor.addAction('groupOrUngroup', function(editor, cell)
{
cell = cell || editor.graph.getSelectionCell();
if (cell != null && editor.graph.isSwimlane(cell))
{
editor.execute('ungroup', cell);
}
else
{
editor.execute('group');
}
});
addToolbarButton(editor, toolbar, 'delete', 'Delete', 'images/delete2.png');
toolbar.appendChild(spacer.cloneNode(true));
addToolbarButton(editor, toolbar, 'cut', 'Cut', 'images/cut.png');
addToolbarButton(editor, toolbar, 'copy', 'Copy', 'images/copy.png');
addToolbarButton(editor, toolbar, 'paste', 'Paste', 'images/paste.png');
toolbar.appendChild(spacer.cloneNode(true));
addToolbarButton(editor, toolbar, 'undo', '', 'images/undo.png');
addToolbarButton(editor, toolbar, 'redo', '', 'images/redo.png');
toolbar.appendChild(spacer.cloneNode(true));
addToolbarButton(editor, toolbar, 'show', 'Show', 'images/camera.png');
addToolbarButton(editor, toolbar, 'print', 'Print', 'images/printer.png');
toolbar.appendChild(spacer.cloneNode(true));
// 定義新的導出事件
editor.addAction('export', function(editor, cell)
{
var textarea = document.createElement('textarea');
textarea.style.width = '400px';
textarea.style.height = '400px';
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
textarea.value = mxUtils.getPrettyXml(node);
showModalWindow(graph, 'XML', textarea, 410, 440);
});
addToolbarButton(editor, toolbar, 'export', 'Export', 'images/export1.png');
// ---
// 在視窗底部的狀态欄中添加工具欄按鈕。
addToolbarButton(editor, status, 'collapseAll', 'Collapse All', 'images/navigate_minus.png', true);
addToolbarButton(editor, status, 'expandAll', 'Expand All', 'images/navigate_plus.png', true);
status.appendChild(spacer.cloneNode(true));
addToolbarButton(editor, status, 'enterGroup', 'Enter', 'images/view_next.png', true);
addToolbarButton(editor, status, 'exitGroup', 'Exit', 'images/view_previous.png', true);
status.appendChild(spacer.cloneNode(true));
addToolbarButton(editor, status, 'zoomIn', '', 'images/zoom_in.png', true);
addToolbarButton(editor, status, 'zoomOut', '', 'images/zoom_out.png', true);
addToolbarButton(editor, status, 'actualSize', '', 'images/view_1_1.png', true);
addToolbarButton(editor, status, 'fit', '', 'images/fit_to_size.png', true);
// 圖形視窗的右上角的周圍建立導航提示。
var outln = new mxOutline(graph, outline);
// 要顯示的圖像的輪廓,去掉下面的代碼
//outln.outline.labelsVisible = true;
//outln.outline.setHtmlLabels(true);
// 淡出了啟動後,螢幕的UI已經被加載
var splash = document.getElementById('splash');
if (splash != null)
{
try
{
mxEvent.release(splash);
mxEffects.fadeOut(splash, 100, true);
}
catch (e)
{
// 工具庫不可用(不加載庫)
splash.parentNode.removeChild(splash);
}
}
}
};
// 添加工具欄按鈕
function addToolbarButton(editor, toolbar, action, label, image, isTransparent)
{
var button = document.createElement('button');
button.style.fontSize = '10';
if (image != null)
{
var img = document.createElement('img');
img.setAttribute('src', image);
img.style.width = '16px';
img.style.height = '16px';
img.style.verticalAlign = 'middle';
img.style.marginRight = '2px';
button.appendChild(img);
}
if (isTransparent)
{
button.style.background = 'transparent';
button.style.color = '#FFFFFF';
button.style.border = 'none';
}
mxEvent.addListener(button, 'click', function(evt)
{
editor.execute(action);
});
mxUtils.write(button, label);
toolbar.appendChild(button);
};
// 顯示靜态視窗
function showModalWindow(graph, title, content, width, height)
{
var background = document.createElement('div');
background.style.position = 'absolute';
background.style.left = '0px';
background.style.top = '0px';
background.style.right = '0px';
background.style.bottom = '0px';
background.style.background = 'black';
mxUtils.setOpacity(background, 50);
document.body.appendChild(background);
if (mxClient.IS_IE)
{
new mxDivResizer(background);
}
var x = Math.max(0, document.body.scrollWidth/2-width/2);
var y = Math.max(10, (document.body.scrollHeight ||
document.documentElement.scrollHeight)/2-height*2/3);
var wnd = new mxWindow(title, content, x, y, width, height, false, true);
wnd.setClosable(true);
// 視窗關閉後淡入背景
wnd.addListener(mxEvent.DESTROY, function(evt)
{
graph.setEnabled(true);
mxEffects.fadeOut(background, 50, true,
10, 30, true);
});
graph.setEnabled(false);
graph.tooltipHandler.hide();
wnd.setVisible(true);
};
// 添加邊欄圖示
function addSidebarIcon(graph, sidebar, label, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell, x, y)
{
var parent = graph.getDefaultParent();
var model = graph.getModel();
var v1 = null;
model.beginUpdate();
try
{
// NOTE: For non-HTML labels the image must be displayed via the style
// rather than the label markup, so use 'image=' + image for the style.
// as follows: v1 = graph.insertVertex(parent, null, label,
// pt.x, pt.y, 120, 120, 'image=' + image);
v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);
v1.setConnectable(false);
// 預置折疊的大小
v1.geometry.alternateBounds = new mxRectangle(0, 0, 120, 40);
// 在不同位置添加對應圖示
var port = graph.insertVertex(v1, null, 'Trigger', 0, 0.25, 16, 16,
'port;image=editors/images/overlays/flash.png;align=right;imageAlign=right;spacingRight=18', true);
port.geometry.offset = new mxPoint(-6, -8);
var port = graph.insertVertex(v1, null, 'Input', 0, 0.75, 16, 16,
'port;image=editors/images/overlays/check.png;align=right;imageAlign=right;spacingRight=18', true);
port.geometry.offset = new mxPoint(-6, -4);
var port = graph.insertVertex(v1, null, 'Error', 1, 0.25, 16, 16,
'port;image=editors/images/overlays/error.png;spacingLeft=18', true);
port.geometry.offset = new mxPoint(-8, -8);
var port = graph.insertVertex(v1, null, 'Result', 1, 0.75, 16, 16,
'port;image=editors/images/overlays/information.png;spacingLeft=18', true);
port.geometry.offset = new mxPoint(-8, -4);
}
finally
{
model.endUpdate();
}
graph.setSelectionCell(v1);
}
// 建立用來拖動的側邊欄圖示
var img = document.createElement('img');
img.setAttribute('src', image);
img.style.width = '48px';
img.style.height = '48px';
img.title = 'Drag this to the diagram to create a new vertex';
sidebar.appendChild(img);
var dragElt = document.createElement('div');
dragElt.style.border = 'dashed black 1px';
dragElt.style.width = '120px';
dragElt.style.height = '120px';
// 建立的圖像,它被用作拖動圖示(預覽)
var ds = mxUtils.makeDraggable(img, graph, funct, dragElt, 0, 0, true, true);
ds.setGuidesEnabled(true);
};
// 配置樣式
function configureStylesheet(graph)
{
var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_OPACITY] = '80';
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_FONTSTYLE] = 0;
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
graph.getStylesheet().putDefaultVertexStyle(style);
// NOTE: 替換HTML标簽上面的樣式。
/*var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_SPACING_TOP] = '56';
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_FONTSTYLE] = '1';
style[mxConstants.STYLE_ROUNDED] = '1';
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
style[mxConstants.STYLE_OPACITY] = '80';
graph.getStylesheet().putDefaultVertexStyle(style);*/
style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_FILLCOLOR] = '#FF9103';
style[mxConstants.STYLE_GRADIENTCOLOR] = '#F8C48B';
style[mxConstants.STYLE_STROKECOLOR] = '#E86A00';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_OPACITY] = '80';
style[mxConstants.STYLE_STARTSIZE] = '30';
style[mxConstants.STYLE_FONTSIZE] = '16';
style[mxConstants.STYLE_FONTSTYLE] = 1;
graph.getStylesheet().putCellStyle('group', style);
style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_FONTCOLOR] = '#774400';
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_PERIMETER_SPACING] = '6';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = '10';
style[mxConstants.STYLE_FONTSTYLE] = 2;
style[mxConstants.STYLE_IMAGE_WIDTH] = '16';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '16';
graph.getStylesheet().putCellStyle('port', style);
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
style[mxConstants.STYLE_STROKEWIDTH] = '2';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
};
</script>
</head>
<!-- 頁面載入時啟動程式 -->
<body οnlοad="main(document.getElementById('graphContainer'),
document.getElementById('outlineContainer'),
document.getElementById('toolbarContainer'),
document.getElementById('sidebarContainer'),
document.getElementById('statusContainer'));" style="margin:0px;">
<!-- 建立容器的啟動畫面 -->
<div id="splash"
style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:white;z-index:1;">
<center id="splash" style="padding-top:230px;">
<img src="editors/images/loading.gif">
</center>
</div>
<!-- 建立容器側邊欄 -->
<div id="toolbarContainer"
style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('images/toolbar_bg.gif');">
</div>
<!-- 建立容器的工具箱 -->
<div id="sidebarContainer"
style="position:absolute;overflow:hidden;top:36px;left:0px;bottom:36px;max-width:52px;width:56px;padding-top:10px;padding-left:4px;background-image:url('images/sidebar_bg.gif');">
</div>
<!-- 建立圖形容器-->
<div id="graphContainer"
style="position:absolute;overflow:hidden;top:36px;left:60px;bottom:36px;right:0px;background-image:url('editors/images/grid.gif');cursor:default;">
</div>
<!-- 建立導航框-->
<div id="outlineContainer"
style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
</div>
<!-- 建立容器狀态欄 -->
<div id="statusContainer"
style="text-align:right;position:absolute;overflow:hidden;bottom:0px;left:0px;max-height:24px;height:36px;right:0px;color:white;padding:6px;background-image:url('images/toolbar_bg.gif');">
<div style="font-size:10pt;float:left;">
Created with <a href="http://www.jgraph.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank">mxGraph</a>
</div>
</div>
</body>
</html>