This JavaScript library is divided into 8 packages. The top-level mxClient class includes (or dynamically imports) everything else. The current version is stored in mxClient.VERSION.

The editor package provides the classes required to implement a diagram editor. The main class in this package is mxEditor.

The view and model packages implement the graph component, represented by mxGraph. It refers to a mxGraphModel which contains mxCells and caches the state of the cells in a mxGraphView. The cells are painted using a mxCellRenderer based on the appearance defined in mxStylesheet. Undo history is implemented in mxUndoManager. To display an icon on the graph, mxCellOverlay may be used. Validation rules are defined with mxMultiplicity.

The handler, layout and shape packages contain event listeners, layout algorithms and shapes, respectively. The graph event listeners include mxRubberband for rubberband selection, mxTooltipHandler for tooltips and mxGraphHandler for basic cell modifications. mxCompactTreeLayout implements a tree layout algorithm, and the shape package provides various shapes, which are subclasses of mxShape.

The util package provides utility classes including mxClipboard for copy-paste, <mxDatatransfer> for drag-and-drop, mxConstants for keys and values of stylesheets, mxEvent and mxUtils for cross-browser event-handling and general purpose functions, mxResourcesfor internationalization and mxLog for console output.

The io package implements a generic mxObjectCodec for turning JavaScript objects into XML. The main class is mxCodec. mxCodecRegistry is the global registry for custom codecs.

Events

There are three different types of events, namely native DOM events, mxEventObjects which are fired in an mxEventSource, and mxMouseEvents which are fired in mxGraph.

Some helper methods for handling native events are provided in mxEvent. It also takes care of resolving cycles between DOM nodes and JavaScript event handlers, which can lead to memory leaks in IE6.

Most custom events in mxGraph are implemented using mxEventSource. Its listeners are functions that take a sender and mxEventObject. Additionally, the mxGraph class fires special mxMouseEvents which are handled using mouse listeners, which are objects that provide a mousedown, mousemove and mouseup method.

Events in mxEventSource are fired using mxEventSource.fireEvent. Listeners are added and removed using mxEventSource.addListener and mxEventSource.removeListener. mxMouseEvents in mxGraph are fired using mxGraph.fireMouseEvent. Listeners are added and removed using mxGraph.addMouseListener and mxGraph.removeMouseListener, respectively.

Key bindings

The following key bindings are defined for mouse events in the client across all browsers and platforms:

Control-Drag: Duplicates (clones) selected cells
Shift-Rightlick: Shows the context menu
Alt-Click: Forces rubberband (aka. marquee)
Control-Select: Toggles the selection state
Shift-Drag: Constrains the offset to one direction
Shift-Control-Drag: Panning (also Shift-Rightdrag)

Configuration

The following global variables may be defined before the client is loaded to specify its language or base path, respectively.

mxBasePath: Specifies the path in mxClient.basePath.
mxImageBasePath: Specifies the path in mxClient.imageBasePath.
mxLanguage: Specifies the language for resources in mxClient.language.
mxDefaultLanguage: Specifies the default language in mxClient.defaultLanguage.
mxLoadResources: Specifies if any resources should be loaded. Default is true.
mxLoadStylesheets: Specifies if any stylesheets should be loaded. Default is true.

Reserved Words

The mx prefix is used for all classes and objects in mxGraph. The mx prefix can be seen as the global namespace for all JavaScript code in mxGraph. The following fieldnames should not be used in objects.

mxObjectId: If the object is used with mxObjectIdentity
as: If the object is a field of another object
id: If the object is an idref in a codec
mxListenerList: Added to DOM nodes when used with mxEvent
window._mxDynamicCode: Temporarily used to load code in Safari and Chrome (see mxClient.include).
_mxJavaScriptExpression: Global variable that is temporarily used to evaluate code in Safari, Opera, Firefox 3 and IE (see mxUtils.eval).

Files

The library contains these relative filenames. All filenames are relative to mxClient.basePath.

Built-in Images

All images are loaded from the mxClient.imageBasePath, which you can change to reflect your environment. The image variables can also be changed individually.

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

The basename of the warning image (images/warning without extension) used in mxGraph.setCellWarning is defined in mxGraph.warningImage.

Resources

The mxEditor and mxGraph classes add the following resources to mxResources at class loading time:

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

By default, the library ships with English and German resource files.

Images

Recommendations for using images. Use GIF images (256 color palette) in HTML elements (such as the toolbar and context menu), and PNG images (24 bit) for all images which appear inside the graph component.

For PNG images inside HTML elements, Internet Explorer will ignore any transparency information.
For GIF images inside the graph, Firefox on the Mac will display strange colors. Furthermore, only the first image for animated GIFs is displayed on the Mac.

For faster image rendering during application runtime, images can be prefetched using the following code:

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

Deployment

The client is added to the page using the following script tag inside the head of a document:

<script type="text/javascript" src="js/mxClient.js"></script>

The deployment version of the mxClient.js file contains all required code in a single file. For deployment, the complete javascript/src directory is required.

Source Code

If you are a source code customer and you wish to develop using the full source code, the commented source code is shipped in the javascript/devel/source.zip file. It contains one file for each class in mxGraph. To use the source code the source.zip file must be uncompressed and the mxClient.js URL in the HTML page must be changed to reference the uncompressed mxClient.js from the source.zip file.

Compression

When using Apache2 with mod_deflate, you can use the following directive in src/js/.htaccess to speedup the loading of the JavaScript sources:

SetOutputFilter DEFLATE

Classes

There are two types of “classes” in mxGraph: classes and singletons (where only one instance exists). Singletons are mapped to global objects where the variable name equals the classname. For example mxConstants is an object with all the constants defined as object fields. Normal classes are mapped to a constructor function and a prototype which defines the instance fields and methods. For example, mxEditor is a function and mxEditor.prototype is the prototype for the object that the mxEditor function creates. The mx prefix is a convention that is used for all classes in the mxGraph package to avoid conflicts with other objects in the global namespace.

Subclassing

For subclassing, the superclass must provide a constructor that is either parameterless or handles an invocation with no arguments. Furthermore, the special constructor field must be redefined after extending the prototype. For example, the superclass of mxEditor is mxEventSource. This is represented in JavaScript by first “inheriting” all fields and methods from the superclass by assigning the prototype to an instance of the superclass, eg. mxEditor.prototype = new mxEventSource() and redefining the constructor field using mxEditor.prototype.constructor = mxEditor. The latter rule is applied so that the type of an object can be retrieved via the name of its constructor using mxUtils.getFunctionName(obj.constructor).

Constructor

For subclassing in mxGraph, the same scheme should be applied. For example, for subclassing the mxGraph class, first a constructor must be defined for the new class. The constructor calls the super constructor with any arguments that it may have using the call function on the mxGraph function object, passing along explitely each argument:

function MyGraph(container)
{
  mxGraph.call(this, container);
}

The prototype of MyGraph inherits from mxGraph as follows. As usual, the constructor is redefined after extending the superclass:

MyGraph.prototype = new mxGraph();
MyGraph.prototype.constructor = MyGraph;

You may want to define the codec associated for the class after the above code. This code will be executed at class loading time and makes sure the same codec is used to encode instances of mxGraph and MyGraph.

var codec = mxCodecRegistry.getCodec(mxGraph);
codec.template = new MyGraph();
mxCodecRegistry.register(codec);

Functions

In the prototype for MyGraph, functions of mxGraph can then be extended as follows.

MyGraph.prototype.isCellSelectable = function(cell)
{
  var selectable = mxGraph.prototype.isSelectable.apply(this, arguments);

  var geo = this.model.getGeometry(cell);
  return selectable && (geo == null || !geo.relative);
}

The supercall in the first line is optional. It is done using the apply function on the isSelectable function object of the mxGraph prototype, using the special this and arguments variables as parameters. Calls to the superclass function are only possible if the function is not replaced in the superclass as follows, which is another way of subclassing in JavaScript.

mxGraph.prototype.isCellSelectable = function(cell)
{
  var geo = this.model.getGeometry(cell);
  return selectable &&
      (geo == null ||
      !geo.relative);
}

The above scheme is useful if a function definition needs to be replaced completely.

In order to add new functions and fields to the subclass, the following code is used. The example below adds a new function to return the XML representation of the graph model:

MyGraph.prototype.getXml = function()
{
  var enc = new mxCodec();
  return enc.encode(this.getModel());
}

Variables

Likewise, a new field is declared and defined as follows.

MyGraph.prototype.myField = 'Hello, World!';

Note that the value assigned to myField is created only once, that is, all instances of MyGraph share the same value. If you require instance-specific values, then the field must be defined in the constructor instead.

function MyGraph(container)
{
  mxGraph.call(this, container);

  this.myField = new Array();
}

Finally, a new instance of MyGraph is created using the following code, where container is a DOM node that acts as a container for the graph view:

var graph = new MyGraph(container);

翻译：

概述

这个JavaScript库分为8个包。顶级mxClient类包括(或动态导入)所有其他内容。当前版本存储在mxClient.VERSION中。

编辑器包提供了实现图表编辑器所需的类。这个包中的主类是mxEditor。

视图和模型包实现由mxGraph表示的图形组件。它引用一个包含mxgraphcell的mxGraphModel，并在mxGraphView中缓存单元格的状态。单元格是使用mxCellRenderer根据mxStylesheet中定义的外观绘制的。撤销历史记录是在mxUndoManager中实现的。要在图形上显示图标，可以使用mxCellOverlay。验证规则是用mxMultiplicity定义的。

处理程序、布局和形状包分别包含事件监听器、布局算法和形状。图形事件监听器包括用于rubberband选择的mxRubberband、用于工具提示的mxTooltipHandler和用于基本单元格修改的mxGraphHandler。mxCompactTreeLayout实现了一个树布局算法，shape包提供了各种形状，它们是mxShape的子类。

util包提供了实用工具类，包括用于复制粘贴的mxClipboard、用于拖放的、用于样式表的键和值的mxConstants、用于跨浏览器事件处理和通用功能的mxEvent和mxUtils、用于国际化的mxResources和用于控制台输出的mxLog。

io包实现了一个通用的mxObjectCodec，用于将JavaScript对象转换为XML。主要的类是mxCodec。mxCodecRegistry是用于自定义编解码器的全局注册表。

事件

有三种不同类型的事件，即原生DOM事件、在mxEventSource中触发的mxEventObjects和在mxGraph中触发的mxMouseEvents。

mxEvent中提供了一些用于处理本机事件的辅助方法。它还负责解析DOM节点和JavaScript事件处理程序之间的循环，这可能导致IE6中的内存泄漏。

mxGraph中的大多数自定义事件都是使用mxEventSource实现的。它的监听器是接收sender和mxEventObject的函数。另外，mxGraph类触发特殊的mxMouseEvents，这些事件使用鼠标监听器来处理，这些监听器是提供mousedown、mousemove和mouseup方法的对象。

使用mxEventSource. fireevent触发mxEventSource中的事件。使用mxEventSource添加和删除侦听器。addListener mxEventSource.removeListener。mxGraph中的mxmouseevent是使用mxGraph. firemouseevent触发的。使用mxGraph添加和删除侦听器。addMouseListener mxGraph。分别removeMouseListener。

键绑定

以下键绑定是为跨所有浏览器和平台的客户端鼠标事件定义的:

control -拖动:复制(克隆)选定的单元格
Shift-Rightlick:显示上下文菜单
Alt-Click:力量橡胶带(又名。选框)
Control-Select:切换选择状态
shift -拖动:限制一个方向的偏移量
shift - control -拖动:平移(也可以是Shift-Rightdrag)

配置

在加载客户端之前，可以分别定义以下全局变量来指定其语言或基本路径。

mxBasePath:指定mxClient.basePath中的路径。
mxImageBasePath:指定mxClient.imageBasePath中的路径。
mxLanguage:指定mxClient.language中的资源的语言。
mxDefaultLanguage:指定mxClient.defaultLanguage中的默认语言。
mxLoadResources:指定是否加载任何资源。默认是正确的。
mxloadstylesheet:指定是否加载任何样式表。默认是正确的。

保留字

mx前缀用于mxGraph中的所有类和对象。mx前缀可以看作是mxGraph中所有JavaScript代码的全局名称空间。下列字段名不应在对象中使用。

mxObjectId:如果对象与mxObjectIdentity一起使用
as:如果对象是另一个对象的字段
id:如果对象是编解码器中的idref
mxListenerList:与mxEvent一起使用时添加到DOM节点
window._mxDynamicCode:临时用于在Safari和Chrome中加载代码(参见mxClient.include)。
_mxJavaScriptExpression:全局变量，用于临时计算Safari、Opera、Firefox 3和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

默认情况下，库附带英语和德语资源文件。

图片

使用图像的建议。在HTML元素(如工具栏和上下文菜单)中使用GIF图像(256色调色板)，对于图形组件中出现的所有图像使用PNG图像(24位)。

对于HTML元素中的PNG图像，Internet Explorer将忽略任何透明信息。
对于图形内部的GIF图像，Mac上的Firefox将显示奇怪的颜色。此外，Mac上只显示第一个动态gif图像。

为了在应用程序运行时更快的图像渲染，可以使用以下代码预取图像:

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

部署

客户端被添加到页面使用以下脚本标签内的一个文件的头部:

<script type="text/javascript" src="js/mxClient.js"></script>

js文件的部署版本在一个文件中包含了所有需要的代码。对于部署，需要完整的javascript/src目录。

源代码

如果您是源代码客户，并且希望使用完整的源代码进行开发，那么所注释的源代码将包含在javascript/devel/source.zip文件中。它为mxGraph中的每个类包含一个文件。要使用源代码，必须解压source.zip文件，并且必须更改HTML页面中的mxClient.js URL，以从source.zip文件引用未压缩的mxClient.js。

压缩

在mod_deflate中使用Apache2时，可以在src/js/中使用以下指令。htaccess加速加载JavaScript源代码:

SetOutputFilter DEFLATE

类

在mxGraph中有两种类型的“类”:类和单例(其中只有一个实例存在)。单例对象被映射到全局对象，其中变量名等于类名。例如，mxConstants是一个对象，所有的常量都定义为对象字段。普通类映射到构造函数和定义实例字段和方法的原型。例如，mxEditor是一个函数和mxEditor。prototype是mxEditor函数创建的对象的原型。mx前缀是一种约定，用于mxGraph包中的所有类，以避免与全局名称空间中的其他对象发生冲突。

子类化

对于子类化，超类必须提供无参数或处理无参数调用的构造函数。此外，特殊构造函数字段必须在扩展原型之后重新定义。例如，mxEditor的超类是mxEventSource。这在JavaScript中表示为，首先通过将原型分配给超类的一个实例来“继承”来自超类的所有字段和方法，例如。mxEditor。prototype = new mxEventSource()，并使用mxedit .prototype重新定义构造函数字段。构造函数= mxEditor。后者应用规则,这样类型的一个对象可以通过它的名字检索的年代构造函数使用mxUtils.getFunctionName (obj.constructor)。

构造函数

对于mxGraph中的子类化，应该采用相同的方案。例如，为了子类化mxGraph类，首先必须为新类定义一个构造函数。构造函数使用mxGraph函数对象上的调用函数调用具有任何参数的超级构造函数，并明确地传递每个参数:

function MyGraph(container)
{
  mxGraph.call(this, container);
}

MyGraph的原型从mxGraph继承如下。通常，构造函数在扩展超类后被重新定义:

MyGraph.prototype = new mxGraph();
MyGraph.prototype.constructor = MyGraph;

您可能希望在上述代码之后定义与类相关的编解码器。此代码将在类装入时执行，并确保使用相同的编解码器对mxGraph和MyGraph的实例进行编码。

var codec = mxCodecRegistry.getCodec(mxGraph);
codec.template = new MyGraph();
mxCodecRegistry.register(codec);

功能

在MyGraph的原型中，mxGraph的功能可以扩展如下。

MyGraph.prototype.isCellSelectable = function(cell)
{
  var selectable = mxGraph.prototype.isSelectable.apply(this, arguments);

  var geo = this.model.getGeometry(cell);
  return selectable && (geo == null || !geo.relative);
}

第一行中的超调用是可选的。它是使用mxGraph原型的isSelectable函数对象上的apply函数完成的，使用特殊的this和arguments变量作为参数。调用超类函数是唯一可能的,如果不是取代超类如下,这是另一种子类化JavaScript。

mxGraph.prototype.isCellSelectable = function(cell)
{
  var geo = this.model.getGeometry(cell);
  return selectable &&
      (geo == null ||
      !geo.relative);
}

如果需要完全替换一个函数定义，那么上面的方案是有用的。

为了向子类添加新函数和字段，使用了以下代码。下面的示例添加了一个新函数来返回图模型的XML表示:

MyGraph.prototype.getXml = function()
{
  var enc = new mxCodec();
  return enc.encode(this.getModel());
}

变量

同样，新字段的声明和定义如下。

MyGraph.prototype.myField = 'Hello, World!';

注意，分配给myField的值只创建一次，也就是说，MyGraph的所有实例共享相同的值。如果需要实例特定的值，则必须在构造函数中定义字段。

function MyGraph(container)
{
  mxGraph.call(this, container);

  this.myField = new Array();
}

最后，使用以下代码创建一个新的MyGraph实例，其中container是一个充当graph视图容器的DOM节点:

var graph = new MyGraph(container);