mxGraph API

简介

         这个js类库被分成了8个包。 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。

        editor包提供了图表编辑器相关的类实现。入口函数式mxEditor。

        view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoManager实现了撤销历史功能。如果要在graph中显示一个图标，可以使用mxCellOverlay。mxUtilplicity定义了校验规则。

        handler，layout和shape包分别包含了事件处理，布局运算，以及形状。graph的事件监听包括mxRubberhand（rubberhand选定）、工具提示mxTooltipHandler和基本cell修改处理mxGraphHandler。mxCompactTreeLayout实现了树布局运算、shape包提供了大量的形状，他们都是mxShape的子类。

       util包提供了很多有用的类，包括：实现复制粘贴的mxClipboard，拖拽的mxDatatransfer，键值对的样式表mxConstants，mxEvent和mxUtils实现了跨浏览器的事件处理和生成目标函数，mxResources实现了国际化（语言），mxLog实现了控制台打印输出。

       io包实现了一个通用的mxObjctCodec 将js对象转换成MXL。入口函数是mxCodec。mxCodecRegistry是一个客户代码的全局注册表。

事件

      有三类不同类型的事件，也即是本地DOM事件，mxEventObjects在mxEventSource中触发;mxMouseEvents在mxGraph中触发。

      mxEvent提供了一些有用的方法来处理本地事件。他负责解决Dom节点和js事件处理循环引用的问题，这样的问题会导致IE6内存泄露。

     在mxGraph中绝大多数定制事件都是用mxEventSource来实现的。他的监听是一个发送函数和mxEventObject。此外，maGraph类通过触发特别的mxMouseEvents来处理鼠标事件。监听通过mxEventSource.addListener和mxEventSource.removeListener来添加和移除监听。mxMouseEvents在mxGraph中通过使用mxGraph.firemouseEvent来触发。监听分别用mxGraph.addmouseListener和mxGraph.removeMouseListener来添加和移除。

按键绑定 

     下面的鼠标绑定事件是为跨浏览器和平台定义的：

•  Control-Drag：复制选定的cells
• 右键：显示右键菜单
• 左键：实现选定框
• 选择：选定和取消选定的状态
• Shift-Drag：约束偏移量
• Shift-Control-Drag：同上
  

配置

      下面的全局变量可能会在客户端加载前定义。包括语言或者基础路径。

• mxBasePath: 指定 mxClient.basePath 的路径。
• mxImageBasePath: 指定图片路径 mxClient.imageBasePath.
• mxLanguage: 指定语言文件路径 mxClient.language.
• mxDefaultLanguage: 指定默认语言 mxClient.defaultLanguage.
• mxLoadResources: 指定应该被加载的资源.  默认是true.
• mxLoadStylesheets: 指定应该被加载的样式表.  默认 true.

    保留字

        在mxGraph中mx前缀被用在所有的和对象上。mx前缀可以看做是一个所有js代码的全局命名空间。下面的名字不能用作对象。

• mxObjectId: 用作唯一标示一个对象。

• as: 如果一个对象有含有其他对象的引用

• id: 当做主键

• mxListenerList: 当使用mxEvent的时候会添加到DOM节点上。

• window._mxDynamicCode: 在 Safari and Chrome 浏览器东临时用来加载代码 (参考 mxClient.include).

• _mxJavaScriptExpression: 全局变量，用来临时执行代码在Safari, Opera, Firefox 3 and IE (参考 mxUtils.eval).

   文件

            这个类库包括三个相关的文件名。所有的文件名都相对于mxClient.basePath

     图片引用

           所有的图片都从mxClient.imageBasePath中加载，你也可以根据环境需要进行修改。图片变量也可以单独修改。

• mxGraph.prototype.collapsedImage
• mxGraph.prototype.expandedImage
• mxGraph.prototype.warningImage
• mxWindow.prototype.closeImage
• mxWindow.prototype.minimizeImage
• mxWindow.prototype.normalizeImage
• mxWindow.prototype.maximizeImage
• mxWindow.prototype.resizeImage
• mxPopupMenu.prototype.submenuImage
• mxUtils.errorImage
• mxConstraintHandler.prototype.pointImage

         警告图片mxGraph.setCellWarning 被定义在 mxGraph.warningImage中。

   资源

       mxEditor和mxGraph类在加载时会把线面的资源添加到mxResources上:

      resources/editor*.properties
      resources/graph*.properties

      英语和德语的资源文件。

 

   图片

      推荐使用图片。使用256色GIF在HTML组件中（例如工具栏和菜单），24bit的PNG图片用在图像组件的内部。

     注意：PNG图片在HTML对象中，IE下会忽略透明；GIF图片在graph内部，在苹果系统的火狐浏览器上会出现奇怪的颜色。更有甚者，只有第一个图片的GIF动画会显示在苹果系统上。

     在应用运行期间为了更快的渲染图片，可以采用预读取的方式，如下：

     var image = new Image();
     image.src = url_to_image;

   开发

     开发时页面通过使用下面标签来引用mxGraph：

    

  

   源码

      花钱买了，才会给你source.zip。如果想修改或者使用源码调试就把引用地址指向源码包。

   类

    有两种，一种是单例的（只创建一个）。单例会映射到全局对象上，变量名字和类名相同。例如mxConstants是一个存放常量的。普通类会映射到构造函数以及原型上包括属性和方法。例如mxEditor是一个函数，maEditor.protype是这个对象创建的原型。mx前缀被用在所有类的前缀上，避免和其他全局变量冲突。

   子类

   

    所有的子类必须提供构造函数，或者没有参数，或者处理没有参数的引用。进一步说，指定构造函数必须定义在扩展原型对象上。例如mxEditor的子类mxEventSource。首先在js中子类会继承父类的所有属性和方法，通过原型类指定父类。mxEditor.prototype=new mxEventSource()渲染构造函数使用mxEditor.prototype.contructor=mxEditor。可以使用名字来检索一个对象，通过mxUtils.getFunctionName(obj.constructor)。

   类