<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mxTriangle</title>
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="http://www.diagram.ly/client?version=1.9.1.0"></script>
<script type="text/javascript">
function mxTriangle(){};
mxTriangle.prototype = new mxActor();
mxTriangle.prototype.constructor = mxTriangle;
mxTriangle.prototype.redrawPath = function(path,x,y,w,h) {
/*
path.moveTo(x,y+h);
path.lineTo(x+w,y+h);
path.lineTo((2*x+w)/2,y);
*/
path.moveTo(0,h);
path.lineTo(w,h);
path.lineTo((w)/2,0);
path.close();
path.end();
}
mxCellRenderer.prototype.defaultShapes['mxTriangle'] = mxTriangle;
function main(container)
{
if (!mxClient.isBrowserSupported()) {
mxUtils.error('Browser is not supported!', 200, false);
}
else {
root = new mxCell();
var model = new mxGraphModel(root);
var graph = new mxGraph(container,model);
var style = new Object();
style[mxConstants.STYLE_SHAPE] = 'mxTriangle';
// Adds a gradient and shadow to improve the user experience
style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF';
style[mxConstants.STYLE_SHADOW] = true;
graph.getStylesheet().putCellStyle("mxtriangle",style);
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';
var layer0 = root.insert(new mxCell("hello world",mxGeometry(90,20,100,100),"mxtriangle"));
var layer1 = root.insert(new mxCell());
graph.setEnabled(true);
//var vertex = new mxCell(null,new mxGeometry(0, 0, 60, 60), "shape=mxTriangle");
var vertex1 = new mxCell(null,new mxGeometry(90, 20, 60, 60), "mxtriangle");
var vertex2 = new mxCell(null,new mxGeometry(90, 20, 80, 80), "mxtriangle");
vertex1.setVertex(true); //很关键，不然不会显示出来
vertex2.setVertex(true);
//var layer1 = new mxCell("hello world",mxGeometry(90,20,100,100),"shape=mxRectangleShape");
layer0.setVertex(true);
layer0.insert(vertex1,layer0.getChildCount());
layer0.insert(vertex2,layer0.getChildCount());
layer0.setCollapsed(false);
//graph.addCell(layer1);
//var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
v1 = graph.insertVertex(layer1, null, 'Custom', 20, 20, 80, 60,"mxtriangle");
var v2 = graph.insertVertex(layer1, null, 'Shape', 50, 50, 80, 60,"mxtriangle");
var e1 = graph.insertEdge(layer1, null, '', v1, v2);
}
finally {
window.console.log(model.isLayer(layer1));
graph.getModel().endUpdate();
}
}
}
</script>
</head>
<body onload="main(document.getElementById('contain'))">
<div id="contain" style="position:absolute; top:10px; left:10px; width:400px; height:400px; border:1px solid #ddd;"></div>
</body>
</html>
|
