mxGraphは読み取ったmxeまたはxml図にセルイベントを追加します(セルのドラッグ・修正禁止)
6452 ワード
mxGraphのjavascriptの中の例のuserobjectを模仿するために、多くの工夫をしました.長い時間がかかりました.まず次のようにまとめます.
その1:userobject.htmlの中のはべつにmxeあるいはxmlファイルを読み取っていないで、その中のはすべて自分で作ったXMLファイルで、私のしたいのは先にCS端のGraphで1枚の図をかいてmxeを生成してから処理して読みます.
その2:userobject.が示している効果図にはクリックイベントがあります.クリックするごとに一つのエクセル(vertexまたはedge)が右側に表示されます.その欠点は、図を見ている人が勝手にセルの内容をドラッグして修正することができるので、私がしたいのは、イベントをクリックしてもドラッグしないでください.
その3:mxGraphのドラッグ効果とgraph.set Enbaled(false)という方法はリンクされています.trueを設定するとドラッグして修正できるということです.逆はできません.クリックすると必ず各cellの内容を取得します.しかし、falseに設定した場合に使用します.
graphh.get Selection Model().addListener(mxEvent.CHANGE,function(sender,evt) { セレクションChenged;属性パネルを表示する });
このモニターはCELLの値が取れません.私のセレクション・チェーンの方法でセルを使っていました.以前はセレクト・チェーンの方法で、var cell=grapph.gets Selection Cell()を通じてcellを取得しました.この場合、上記のモニターを利用してセッティングしました.
graphh.set Enbaled(false)はイベントをトリガしてフォームを表示しないはずです.この場合にgraphh.set Enbaledを設定すれば、フォームを取得するために必ずトリガされます.その後、他のモニターを試してみました.
graphh.addListener(mxEvent.CC,function(sender,evt) { セレクション });
前提はgraphh.set Enbaledです.その後、このようにダブルクリックしてもだめです.この中間はきっとcellで間違いないと思います.その後、scriptの他の二つの例を参考にしました.overlaysのクリックモニターの中で.
graphh.addListener(mxEvent.CC,function(sender,evt) { var cell=evt.get Property('cell')
...
}
何か見つけましたか?はい、evtでクリック時のセルを取得できます.元のようにgraphh.getsSelectCellではなく、選択したものを獲得することができます.このように修正します. graphh.addListener(mxEvent.CC,function(sender,evt) { セル=evt.get Property('cell') セレクション・チェーン. }); セレクション・チェーン.
ははははは、ついに成功しました.ついにクレジットカードの修正を無効にした場合、イベントをトリガし、フォームの詳細を表示しました.現在の貢献コードは下記の通りです.
<html>
<head>
<title> CELL </title>
<script type="text/javascript">mxBasePath = 'src';</script>
<script type="text/javascript" src="mxclient.js"></script>
<script type="text/javascript">
function main(container)
{
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
var graph = new mxGraph(container);
graph.setCellsResizable(false);
graph.setEnabled(false);// , CELL 。
graph.setPanning(true);//
// (edge)
graph.isCellEditable = function(cell)
{
return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);
};
new mxCellTracker(graph);
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_STROKECOLOR] = 'gray';
style[mxConstants.STYLE_SHADOW] = true;
style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_SPACING] = 4;
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
// 。 。
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FONTSIZE] = '10';
graph.gridSize = 20;
graph.setResizeContainer(true);
graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);
graph.setBorder(60);
graph.getModel().beginUpdate();
try
{
read(graph, '345Formatted.xml');
}
finally
{
graph.getModel().endUpdate();
}
//new mxDivResizer(container);
var cell;
graph.addListener(mxEvent.CLICK, function(sender, evt)
{
cell= evt.getProperty('cell');
selectionChanged(graph,cell);
});
selectionChanged(graph,cell);
}
};
// Parses the mxGraph XML file format
function read(graph, filename)
{
var req = mxUtils.load(filename);
var root = req.getDocumentElement();
var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.getModel());
};
/**
* Updates the properties panel //
*/
function selectionChanged(graph,cell)
{
var div = document.getElementById('properties');//
// Forces focusout in IE //IE
graph.container.focus()
// Clears the DIV the non-DOM way
div.innerHTML = ''; // DIV DOM
// Gets the selection cell
if (cell == null)
{
mxUtils.writeln(div, ' '); // CELL ，
}
else
{
var attrs = cell.value.attributes;
var center = document.createElement('center');
mxUtils.writeln(center, attrs[0].nodeValue);
div.appendChild(center);// DIV
mxUtils.br(div);
var form = new mxForm(); // USER FORM
for (var i = 0; i < attrs.length; i++)
{
form.addText(attrs[i].nodeName + ':', attrs[i].nodeValue); //
}
div.appendChild(form.getTable()); // DIV vav
mxUtils.br(div);
}
}
</script>
</head>
<!-- Page passes the container for the graph to the grogram -->
<body onload="main(document.getElementById('graphContainer'))">
<table>
<tr>
<td>
<div id="graphContainer"
style="border: solid 1px black;overflow:hidden;width:321px;height:241px;">
</div>
</td>
<td valign="top"><!-- , -->
<div id="properties"
style="border: solid 1px black; padding: 10px;">
</div>
</td>
</tr>
</table>
</body>
</html>