【mxGraph】源码学习：（5）mxGraph

由于mxGraph源文件有一万多行，且涉及很多其它源文件，所以重点在于了解mxGraph的作用、结构以及定义了哪些方法

1. 概览

1.1 作用

mxGraph继承自mxEventSource以实现基于Web的图形组件的功能性方面。要激活平移和连接，使用setPanning和setConnectable，对于框线选择，必须创建一个新的mxRubberband实例。默认情况下，以下监听器添加到mouseListeners：

1. tooltipHandler：显示工具提示的mxTooltipHandler
2. panningHandler：用于平移和弹出菜单的mxPanningHandler
3. connectionHandler：用于创建连接的mxConnectionHandler
4. graphHandler：用于移动和克隆cell的mxGraphHandler

如果启用了这些监听器，则将按上述顺序调用它们。

1.2 背景图片

要显示背景图像，使用setBackgroundImage设置图像URL和宽高。更改上述值之一后，应调用视图的mxGraphView.validate。

1.3 cell图像

要在cell中使用图像，必须在默认vertex样式（或任何命名样式）中指定形状。可能的形状是mxConstants.SHAPE_IMAGE和mxConstants.SHAPE_LABEL。更改默认vertex样式中使用的形状的代码，如下所示：

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;

对于默认vertex样式，可以使用mxConstants.STYLE_IMAGE键和图像URL作为值在cell样式中指定要显示的图像，例如：

image=http://www.example.com/image.gif

对于命名样式，stylename必须是cell样式的第一个元素：

stylename;image=http://www.example.com/image.gif

cell样式可以添加任意数量的键值对，用分号隔开，如下所示：

[stylename;|key=value;]

1.4 标签

cell标签由getLabel定义，如果labelsVisible为true ，则使用convertValueToString。如果必须将标签呈现为HTML标记，则isHtmlLabel应对相应的cell格返回true。如果所有标签都包含HTML标记，则htmlLabels可以设置为true。注意：启用HTML标签可能存在安全风险（请参阅手册中的安全性部分）。

如果标签需要包装，那么isHtmlLabel和isWrapping必须为其标签应该被包装的cell格返回true。请参阅isWrapping示例。

如果需要剪切以将HTML标签的显示保持在其vertex的边界内，则isClipping应对相应的cell格返回true。

默认情况下，edge标签是可移动的，vertex标签是固定的。这可以通过设置edgeLabelsMovable和vertexLabelsMovable，或通过覆盖isLabelMovable来更改。

1.5 就地编辑

通过双击或键入F2启动就地编辑。以编程方式，edit用于检查cell是否可编辑（isCellEditable）并调用startEditingAtCell，它调用mxCellEditor.startEditing。编辑器使用getEditingValue返回的值作为编辑值。

就地编辑后，labelChanged被调用，调用mxGraphModel.setValue，进而调用mxGraphModel.valueForCellChanged通过mxValueChange。

触发就地编辑的事件将传递给cellEditor，后者可能会根据事件类型或鼠标位置采取特殊操作，也会传递给getEditingValue。然后将事件传递回事件处理函数，该函数可以基于触发事件执行特定动作。

1.6 提示

工具提示由getTooltip实现，如果cell位于鼠标指针下，则调用getTooltipForCell。默认实现检查cell是否具有getTooltip函数，如果存在则调用它。因此，为了提供自定义工具提示，cell必须提供getTooltip函数，或者必须覆盖上述两个函数之一。

通常对于自定义cell工具提示，后一个函数被覆盖如下：

graph.getTooltipForCell = function(cell) {
   
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

使用配置文件时，使用以下项在mxGraph部分中覆盖该函数：

<add as="getTooltipForCell"><![CDATA[
  function(cell) {
   
    var label = this.convertValueToString(cell);
    return 'Tooltip for '+label;
  }
]]></add>

this是指实现中的graph，例如为了检查cell是否是edge，使用this.getModel().isEdge(cell)。

要替换getTooltipForCell的默认实现（而不是替换特定实例上的函数），在加载js文件之后，但在使用mxGraph创建新的mxGraph实例之前，使用以下代码：

mxGraph.prototype.getTooltipForCell = function(cell) {
   
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

1.7 形状和样式

在示例中演示了新形状的实现。假设已经实现了一个名为BoxShape的自定义形状，想要用它来绘制vertex。要使用此形状，必须首先在cell渲染器中注册，如下所示：

mxCellRenderer.registerShape('box', BoxShape);

该代码在graph的cell渲染器中的名称框下注册BoxShape构造函数。现在可以使用样式定义中的shape-key来引用形状。（cell渲染器包含一组其他形状，即每个常量一个，在mxConstants中具有SHAPE前​​缀）

样式是键值对的集合，样式表是命名样式的集合。名称由cellstyle引用，它以mxCell.style存储，格式如[stylename;|key=value;]。该字符串被解析为键值对的集合，其中键被字符串中的值覆盖。

引入新形状时，必须在样式表中使用注册形状的名称。有三种方法可以做到这一点：

1. 通过更改默认样式，使所有vertex都使用新形状
2. 通过定义新样式，只有具有相应cell样式的vertex才会使用新形状
3. 通过在cellstyle的可选键值对列表中使用shape=box覆盖

在第一种情况下，获取和修改vertex的默认样式的代码如下：

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';

该代码采用默认的vertex样式，该样式用于没有特定cell样式的所有vertex，并在原位修改shape-key的值以使用新的BoxShape绘制vertex。这是通过在第二行中指定框值来完成的，该值是指cell渲染器中BoxShape的名称。

在第二种情况下，创建一组键值对，然后以新名称添加到样式表中。为了区分shapename和stylename，我们将使用boxstyle作为stylename：

var style = new Object();
style[mxConstants.STYLE_SHAPE] = 'box';
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
graph.getStylesheet().putCellStyle('boxstyle', style);

该代码将一个名为boxstyle的新样式添加到样式表中。要将此样式与cell一起使用，必须从cellstyle引用它，如下所示：

var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80