mxGraph为读取出来的mxe或xml图添加cell事件(禁止cell拖拽修改)

JavaCrazyer

浏览: 3009158 次
性别:
来自: 河南

最近访客更多访客>>

beifengbei08

mnisummer

kristy_yy

qijojo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

RIA-mxGraph专栏

XML JavaScript IE HTML

为了模仿mxGraph中javascript里面的例子中的userobject.html展示出来的效果，可费了不少功夫，花费了大半天的时间，先总结如下：

其一：userobject.html中的并没有读取任何mxe或者xml文件，它里面的都是自己造的XML文件，我要做的是先用CS端的Graph画好一张图生成mxe然后进行处理在读出来

其二：userobject.html显示出来的效果图有单击事件，每单击一个cell(vertex或者edge)都会在右边显示出来一个表单用来展现其全部属性内容。它的缺陷就是，看图的人可以随便拖动并修改cell中的内容，所以我要做的是，能单击事件但不要进行拖动

其三：mxGraph的拖动效果与graph.setEnabled(false)这个方法是挂钩的，设置true就表示可拖拽修改，反之就不可以，需要说明的是,我们单击的时候肯定是要获取每个cell的内容的，然而，如果你在设置为false的情况下使用

graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
    {
     selectionChanged(graph);//显示属性面板
    });

这个监听器就获取不到CELL的值，因为我的selectionChanged方法中使用到了cell，之前我在selectionChanged方法里面是通过var cell = graph.getSelectionCell()来获取cell的，这种情况下如果我利用了上面的那个监听器并且设置

graph.setEnabled(false)那么肯定不会触发事件并显示表单，如果在这种情况下设置graph.setEnabled(true)那么一定可以触发得到表单，之后我有试了其他的监听器

    graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     selectionChanged(graph);
     });

前提是graph.setEnabled(false)了也是不行的，后来这样试了双击的都不可以于是我就想这中间肯定是cell获取不对的问题，后来参考了script其他的两个例子如overlays的单击监听器中

graph.addListener(mxEvent.CLICK, function(sender, evt)
{
var cell = evt.getProperty('cell');

。。。

}

大家发现什么了吗？对了可以通过evt来获取到单击时的cell而不必像原来那样graph.getSelectionCell()来获取选中的了，这样修改下
graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     cell= evt.getProperty('cell');
     selectionChanged(graph,cell);
    });
    selectionChanged(graph,cell);

哈哈哈，终于成功了，终于在禁用托债修改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>

6
顶

0
踩

分享到：

ExtJS嵌入网页要解决iframe自动适应窗体大 ... | ExtJS使用技巧小结

2010-04-09 16:53
浏览 8652
评论(11)
分类:Web前端
查看更多

11 楼 donggongai 2012-02-21

直接用graph的setcellslocked不就行吗?

10 楼 xiaotiantian-58 2012-02-11

想请教一下，页面上老是弹出来this.undomanager为空或不是对象是什么原因？
mxEditor.prototype.resetHistory = function() {
    this.lastSnapshot = new Date().getTime();
    this.undoManager.clear();
    this.ignoredChanges = 0;
    this.setModified(false);
};

把这个方法重写注释掉this.undoManager.clear();这句，有影响嚒？

9 楼 JavaCrazyer 2010-04-13

晕倒，我意思是说mxGraph源代码示例中不是有个grapheditor的JAVA程序吗，你将它运行起来然后画张图，之后保存，我上面写的代码就能读取出来了

8 楼 zxh168 2010-04-13

就

JavaCrazyer 写道

你如果用grapheditor那个程序里面画的生成的图形就我的程序就能读取出来

你的程序？你自己写的，还是用mxgraph的。能不能给我一份呢？O(∩_∩)O~

7 楼 JavaCrazyer 2010-04-12

你如果用grapheditor那个程序里面画的生成的图形就我的程序就能读取出来

6 楼 zxh168 2010-04-12

JavaCrazyer 写道

我的主要是读取CS端JGRAPH画出来的图的，你参考下fileio.html或许会有所收获

你是用JGRAPH生成的图呀，我是用自己带的那个editor里面的画的，所以形成的图可能和那个格式不一样吧

5 楼 JavaCrazyer 2010-04-12

我的主要是读取CS端JGRAPH画出来的图的，你参考下fileio.html或许会有所收获

4 楼 zxh168 2010-04-12

<mxCell id="5" customId="5" value="<img src="editors/images/overlays/users3.png"> Groupname Status Info" vertex="1" parent="1">
 <mxGeometry x="0" y="0" width="80" height="70" as="geometry"/>
 </mxCell>

 <mxCell style="symbol;image=images/img/server.jpg" vertex="1" parent="1"> <mxGeometry x="310" y="290" width="32" height="32" as="geometry"/> </mxCell>

3 楼 zxh168 2010-04-12

用的是example里面的workfloweditor.html画的，然后用你说那个方法解析，但是发现两者xml对于图片的值不一样，一个放在style里面，一个是value里面。你是用那个画的图呢？

2 楼 JavaCrazyer 2010-04-11

图片能不出来吗？不会吧，你是用什么画的图啊

1 楼 zxh168 2010-04-10

我也在研究mxgraph，使用了生成的xml解析出来，但是图片却出不来，想向你请教。
能不能把你的破解的给我发一份，谢谢。zhuxiaohong0123@163.com

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论