mxGraph Model and Cells

最新推荐文章于 2025-09-19 09:42:00 发布

原创

最新推荐文章于 2025-09-19 09:42:00 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

本文深入解析了mxGraph的模型结构与单元格管理，包括mxGraphModel的核心功能、事务处理、单元格类型与属性、样式设定、几何信息、用户对象及分组结构。阐述了如何利用这些组件构建复杂的图形界面，以及模型变更、折叠与层级控制的API使用。

1 mxGraph Model and Cells

1.1 Core mxGraph architecture

1.1.1 The mxGraph Model

mxGraph模型是描述图形结构的核心模型，该类称为mxGraphModel，可以在模型包中找到。图结构的添加、更改和删除通过图模型API进行。该模型还提供了确定图形结构的方法，以及设置可视状态(如可见性、分组和样式)的方法.

然而，尽管模型的事务存储在模型中，但是mxGraph的设计方式是，主要公共API是通过mxGraph类实现的。“将此单元格添加到图中”的概念比“将此单元格添加到图的模型中”更自然地描述了操作。在直观的情况下，模型和单元格上可用的函数在图上复制，而图类上的方法被认为是主要的公共API。

尽管许多主要API调用都是通过mxGraph类进行的，但请记住，mxGraphModel是存储图数据结构的底层对象。

mxGraph使用事务系统对模型进行更改。在HelloWorld的例子中，我们看到了以下代码:

// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
   var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
   var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
   var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
   // Updates the display
   graph.getModel().endUpdate();
}

执行两个顶点和一条边的插入。对于模型的每个更改，您都要调用beginUpdate()，然后调用相应的调用来更改模型，然后调用endpdate()来完成更改并发出更改事件通知。

Key API Methods:

mxGraphModel.beginUpdate() - starts a new transaction or a sub-transaction.
mxGraphModel.endUpdate() - completes a transaction or a sub-transaction.
mxGraph.addVertex() - Adds a new vertex to the specified parent cell.
mxGraph.addEdge() - Adds a new edge to the specified parent cell.

注意：从技术上讲，没不要使用.beginUpdate()和endUpdate()来包围数据代码. 超出此更新范围的更改立即生效，并立即发送通知。事实上，更新范围内的更改会直接对模型执行，更新范围用于控制事件通知的时间和连接。除非更新包装引起代码美学问题，否则应该习惯使用它来避免事件和撤消粒度可能出现的问题。

1.1.2 The Transaction Model

上面蓝色块中的子事务指的是可以嵌套事务的事实。也就是说，模型中有一个计数器，它为每个beginUpdate调用递增，为每个endpdate调用递减。在增加到至少1之后，当这个计数再次达到0时，就认为模型事务已经完成，并触发模型更改的事件通知。
这意味着代码的每个子包含部分都可以(而且应该)被开始/结束组合包围。这提供了在mxGraph中创建用作“库事务”的单独事务的能力，创建复合更改的能力，以及为所有更改触发一组事件而只创建一个撤销的能力。自动布局是一个很好的例子，说明哪里需要功能。

在自动布图中，用户通常通过用户界面对图形进行更改，应用程序根据一些规则自动定位结果。自动定位(layouting)是开始/结束更新调用之间的一个自包含算法，它不知道更改的细节。因为开始/结束更新中的所有更改都是直接对图模型进行的，所以当更改正在进行时，布局可以根据模型的状态进行操作

It is important to distinguish between functionality that acts on the graph model as part of a compound change and functionality that reacts to atomic graph change events. In the first case, such as for automatic layouting, the functionality takes the model as-is and acts upon it. This method should only be used for parts of compound model changes. All other parts of the application should only react to model change events.

当最后一个endpdate调用将计数器减少到0并指示至少发生了一个原子图更改时，将触发模型更改事件。更改事件包含关于更改内容的完整信息(有关详细信息，请参阅稍后的事件部分)。

1.1.2.1 The Model Change Methods

下面是更改图模型的方法列表，这些方法应该直接或间接地放置在更新的范围内

add(parent, child, index)
remove(cell)
setCollapsed(cell, collapsed)
setGeometry(cell, geometry)
setRoot(root)
setStyle(cell, style)
setTerminal(cell, terminal, isSource)
setTerminals(edge,source,target)
setValue(cell, value)
setVisible(cell, visible)

首先，我们只关心添加和删除，以及几何和样式编辑方法。注意，这些不是核心API方法，通常这些方法在适当的地方位于mxGraph类上，并且它们为您执行更新封装

设计背景—有些人对模型所存储的视觉信息的存在感到困惑。这些属性包括单元格定位、可见性和折叠状态。模型存储这些属性的默认状态，提供了一个公共的位置来在每个单元格的基础上设置它们，而视图可以在每个视图的基础上覆盖这些值。模型只是体系结构中第一个可以在全局基础上设置这些属性的常见位置。记住，这是一个图形可视化库，可视化部分是核心功能。

Inserting Cells

在HelloWorld应用程序中创建的三个图形单元格是两个顶点和一条连接顶点的边。如果您不熟悉基本图论及其术语，请参阅wikipedia条目。
您可以使用模型上的add()方法添加顶点和边。但是，出于对这个库的一般使用目的，请了解mxGraph.insertVertex()和mxGraph.insertEdge()是用于添加单元格的核心公共API。模型的函数要求已经创建了要添加的单元格，而mxGraph.insertVertex()为您创建了单元格。

Core API functions: