【初学者笔记】前端图表库 GoJs 入门

---

前言

什么是 GoJs

GoJs 是一个 JavaScript 和 typescript 库，用于构建交互式图表，可以轻易的实现日常开发中所需要的各种示意图、结构图、组织图、流程图、状态图、思维导图、树状图等。

它用自定义模板和布局组件简化了节点、链接和分组等复杂的 JS 图表，给用户交互提供了许多先进的功能，如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

无需切换服务器和插件，GoJS 就能实现用户互动并在浏览器中完全运行，呈现 HTML5 Canvas 元素或 SVG，也不用服务器端请求。

安装

代码语言：javascript复制

npm i gojs -S

去水印

GoJs 是一个商业软件，所以我们通过 NPM 安装的模块，如果没有支付费用的话，默认会带有水印。

方法仅供学习，请支持正版软件。

我们可以通过修改源码的方式去除水印。

• 首先找到这个文件 node_modulesgojsreleasego.js
• 然后在文件中搜索 7eba17a4ca3b1a8346
• 找到类似于 a.kv=d[w.Jg(“7eba17a4ca3b1a8346”) **][w.Jg(“78a118b7”)]****(d,w.um,4,4) 这样的一句代码
• 将此条语句替换成 a.xx=function(){return true}; 保存即可，xx 的位置以前是什么就写什么，不然会卡死。

最终如果呈现以下效果，则说明去除水印成功。

使用

GoJS 不依赖于任何 JS 库或框架（例如 bootstrap、jquery 等），可与任何 HTML 或 JS 框架配合工作。本文基于 vue2.x 作为基础前端框架。

初始化

GoJs 需要提供一个节点作为容器，并且图形的容器 div 需要明确指定大小（支持固定值以及百分比），否则无法显示，容器支持部分 CSS 样式，比如背景颜色，边框等，这个容器可以理解为画布。

代码语言：javascript复制

<template>
  <!-- 图形的容器 div 需要明确指定大小，否则无法显示 -->
  <div id="diagram" style="width:50%; height:50%; background-color: #DAE4E4;"></div>
</template>

因为全局都会用到 go.GraphObject.make 这个方法，所以我们在导入以后直接声明一个全局变量，这个变量可以理解为画笔。

代码语言：javascript复制

import go from 'gojs'
// 获取 gojs 的方法
const $ = go.GraphObject.make;

接下来进行 GoJs 的初始化部分。这个是官网的例子，先不用知道每一行代码的作用，我们先把程序跑起来，页面画出来。

代码语言：javascript复制

// 初始化gojs
initGoJs() {
  // 将 gojs 挂载到 div 上 ,canvas 的大小由 div 的宽高决定
  this.diagram =
    $(go.Diagram, "diagram",
      {
        "undoManager.isEnabled": true
      });

  const myModel = $(go.Model);
  myModel.nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  this.diagram.model = myModel;
}

以上简单的代码呈现出下面的结果。

其可以实现的功能如下

• 点击空白并按住鼠标左键，可以通过平移整个图表
• 点击节点可以选中某个节点，选中的节点高亮显示
• 使用 Ctrl A 可以选中所有元素
• 按住 ctrl 键，点击鼠标左键可以选择多个元素
• 选中节点并按住鼠标左键，可以移动特定节点
• 点击空白并按住鼠标左键，点击后等 1s 再滑动鼠标，可以画出一个选择框，选中多个节点
• 选中节点后，使用 ctrl c，ctrl v 的方式可以复制节点
• 选中节点后，使用 delete 按钮可以删除节点
• 按住 ctrl 键，滑动鼠标滚轮（或者 - 号）可以进行整个图表的缩放，ctrl 0 恢复初始大小
• 使用 ctrl z，ctrl y 可以进行撤回和重做操作（由代码中的 "undoManager.isEnabled": true 控制）

可以看到，当前代码量只有几行，在一个代码量比较少的情况可以完成这么多功能，可以看出 GoJs 本身已经将大部分交互的动作内置到框架本身，只需要通过设置相应的属性即可完成。

go.GraphObject.make

首先获取 go.GraphObject.make方法， 该方法用于创建图形和图形中的元素，同时定义元素的属性，可以理解为一个画笔，是 GoJS 中一个最基础的 API 。

为了方便代码的编写与阅读，这里先将 go.GraphObject.make 简化定义为 ，但这不是必须的，也可以使用任何你喜欢的简化方式。之后我们就可以通过 符号来调用它自身的一些属性、方法等。

代码语言：javascript复制

import go from 'gojs'
// 获取 gojs 的方法
const $ = go.GraphObject.make;

go.GraphObject.make 的第一个参数是需要创建元素的类型，通常是 GraphObject 的子类，后续的参数可以有多个，可以是以下类型：

• 包含键/值对的简单 JS 对象，用来描述被创建元素的属性，比如{ figure:"RoundedRectangle" }。
• 一个枚举类型的参数，一般该参数用于设定构建对象在 Diagram 中的排列方式，比如平铺排列、垂直排列等，以及嵌套元素的自适应方法。
• 也可以是一个 GraphObject 类型，添加到被创建元素中的子元素，比如，下面的代码中在 Node 元素中增加 Shape 子元素和 TextBlock 子元素。
• 一个字符串，这个参数一般作为第二个参数，用于设置某个 GraphObject 子类型的第一属性，比如设置 TextBlock 的 text、Shape 的 figure、Picture 的 source、Panel 的 type 等。
• 针对创建元素的不同，也可以是其它可能的 Js 对象或数组。

代码语言：javascript复制

  const $ = go.GraphObject.make;
  const diagram = $(go.Diagram, "diagram",{});
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "你好!", { margin: 5 })
    ));

go.GraphObject.make 的返回值通常也是一个 GraphObject ，所以可以嵌套调用。

图表（Diagram）

有了画笔，还需要画布，通过 go.GraphObject.make 来挂载一个图表到 div 容器上。

代码语言：javascript复制

  const $ = go.GraphObject.make;
  const diagram = $(go.Diagram, "diagram",{});

• 参数一： go.Diagram ，固定写法，可以理解为我们需要的画布
• 参数二： 要挂载的 div 容器的 id
• 参数三： 画布的配置对象
• 返回值： 画布实例对象

为了更好理解，接下来本文中的 画布 指的就是这个 diagram 对象，图表 指的也是这个 diagram 对象。

常用的画布初始化配置属性如下：

描述	属性	默认值	备注
画布初始位置	initialContentAlignment	go.Spot.Center	居中
画布位置	contentAlignment		go.Spot.Center
初始坐标	initialPosition	new go.Point(0, 0)
禁止移动节点	allowMove	false
禁止复制	allowCopy	false
禁止删除	allowDelete	false
禁止选中	allowSelect	false
禁止缩放	allowZoom	false
禁止撤销和重做	"undoManager.isEnabled"	false
禁止水平拖动画布，禁止水平滚动条	allowHorizontalScroll	false
禁止垂直拖动画布，禁止垂直滚动条	allowVerticalScroll	false
只读	isReadOnly	true
画布初始化动画时间	"animationManager.duration":	600
禁止画布初始化动画	"animationManager.isEnabled":	false
画布比例	scale	1.5
画布比例自适应	autoScale	go.Diagram.None //默认值不自适应	go.Diagram.UniformToFill；go.Diagram.Uniform //自适应
画布最小比例	minScale	1.2,
画布最大比例	maxScale	2.0,
显示网格	"grid.visible"	true
画布边距	padding	80	或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
禁止鼠标拖动区域选中dragSelectingTool	"dragSelectingTool.isEnabled"	false	或者在画布对象myDiagram 创建后再调用 myDiagram.toolManager.dragSelectingTool.isEnabled = false
画布节点连线定义	validCycle	未知	go.Diagram.CycleDestinationTree 只允许有一个父节点
画布节点连线定义	validCycle	未知	go.Diagram.CycleNotUndirected 节点的有效链接不会在图中产生无向循环
画布节点连线定义	validCycle	未知	go.Diagram.CycleNotDirected 节点的有效链接不会在图中产生有向循环
画布节点连线定义	validCycle	未知	go.Diagram.CycleSourceTree 一个节点只允许有一个子节点并且没有定向循环

GraphObject

有了画布，接下来就要有内容，也就是画布中的元素，一个元素通常是一个 GraphObject 类型的对象。

GraphObject 是所有图形对象的抽象类，万物皆 GraphObject。这个类的子类包括 Panel、Shape、TextBlock、Picture 和 Placeholder。

GraphObject 和其子类的关系如下图。

GraphObject 是抽象类，不能直接创建，需要利用 $ 也就是 go.GraphObject.make 去创建子类的实例。

面板（Panel）

面板是将其他图形对象作为元素的图形对象。面板负责确定其所有元件的尺寸和位置。每个面板建立自己的坐标系，按顺序绘制面板的元素。

Panel 有不同的类型，每个类型表示一种布局，通过不同的坐标系统排列。

注意，GoJS 中的 x 轴水平向右，y 轴垂直向下。

Panel 的值包括以下类型：

• Panel.Position： 建立坐标系，通过指定坐标对绝对位置排序。
• Panel.Vertical： 定义垂直方向的线性排列。
• Panel.Horizontal： 定义水平方向的线性排列。
• Panel.Auto： 调整主元素的大小以适应 Panel 中的其他元素。
• Panel.Spot： 通过 GraphObject.alignment 属性指定其他元素相对于主元素的位置。
• Panel.Table： 以表格的方式排列元素，通过指定 row 和 col 以及相关信息指定元素位置。
• Panel.TableRow： 只能在 Panel.Table 中使用，以将元素集合组织为表格中的行。
• Panel.TableColumn： 只能在 Panel.Table 中使用，以将元素集合组织为表格中的列。
• Panel.Viewbox： 用于自动调整单个元素的大小以适合面板的可用区域。
• Panel.Grid： 仅用于绘制常规的线条图案，元素必须是用于描述重复行的形状。
• Panel.Link： 仅供 Link 部件和 Link Adornments 使用。
• Panel.Graduated： 用于沿主 Shape 元素绘制常规刻度线和文本。

零部件（Part）

所有零部件都是面板，因为零部件类继承自面板类。

我们只能向 画布 中添加 零部件，所以 Part 是顶级元素。Node 和 Link 继承自 Part 。 所以我们可以向 画布 中添加 节点 或 线 。

而 Shape 、TextBlock 、Picture 则只能作为 Part 的子元素，不能直接添加到 画布 中。

节点（Node）

节点可以是通过线连接到其他节点的零部件，也可以是组的成员。Node 可以被 Link 连接起来。每一个 Node 都有一个 key，用来唯一标识该 Node。

连线（Link）

link 有 from 和 to 属性，用来表示该 Link 的 出发点 和 结束点。

组（Group）

组继承自节点,允许节点在逻辑上包含其他节点和线。

形状（Shape）

表示一个几何图形。可以使用 GoJS 中定义好的一些图形，如 “Rectangle” 也可以自定义图形的形状。通过 fill 和 stroke 等属性决定图形的显示。

文本（TextBlock）

文本属性和 CSS 相同 font-style、 font-variant、 font-weight 、font-size、 font-family。也可以定义 stroke 等属性。

构建图形

GoJs 绘制的图表（Diagram）具有两个最基本的元素，就是点和线（Node和Link），并且他们可以自由组合组成一个组（Group）。所有的元素都处在图层（Layer）上，并且可以对它们进行布局（Layout）。

通过常规方式

一个图形可以看做由节点和连线组成，在 GoJs 中，图形元素是 GraphObject，我们可以使用常规方式创建节点：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/gojs/release/go.js"></script>
</head>
<body>
    <div id="diagram" style="border: solid 1px blue; width:400px; height:400px"></div>
    <script>
      // 创建画布
      const diagram = new go.Diagram("diagram");
      // 创建节点 节点中元素的排列方式是 Panel.Auto
      const node = new go.Node(go.Panel.Auto);
      // 创建一个图形
      const shape = new go.Shape();
      // 定义图形的属性
      shape.figure = "RoundedRectangle";
      shape.fill = "lightblue";
      // 将图形加到节点
      node.add(shape);
      // 创建一个文本
      const textblock = new go.TextBlock();
      // 定义文本的属性
      textblock.text = "Hello!";
      textblock.margin = 5;
      // 将文本加到节点
      node.add(textblock);
      // 将节点加到图
      diagram.add(node);
    </script>
</body>
</html>

通过 go.GraphObject.make

常规的编程方法虽然容易理解，但是需要定义大量的中间变量，如果需要创建的元素很多，就会感觉有些冗余，上面的代码可以通过 go.GraphObject.make 简化成如下

代码语言：javascript复制

const diagram = new go.Diagram("diagram");
const $ = go.GraphObject.make;
diagram.add(
    $(go.Node, go.Panel.Auto,
        $(go.Shape,
            { figure: "RoundedRectangle", fill: "lightblue" }),
        $(go.TextBlock,
            { text: "Hello!", margin: 5 })
    ));

这样会让代码量大幅减少，并且如果给元素赋值了错误的属性，make 函数内部会报出错误。

例如，将 text 写错为 test，会在控制台看到报错：

Uncaught Error: Trying to set undefined property "test" on object: TextBlock("")

模型和模板

每个 Diagram 都是通过数据模型（Model）来填充和确定 Node 的信息和 Link 的所属关系的。并且我们只需要创建好 Node 和 Link 的模板（Template）以及数据模型（Model），其他的是事情都交给 GoJs 去处理，它会自动加载模型并构建元素。

模板（Template）

虽然 go.GraphObject.make 创建图形的方式简单了许多，但是如果要创建很多的 Node，而不同的 Node 之间结构相同，通过上面的方式，扔需要书写大量的重复代码。

如果能定义一个 Node 的模板，然后通过指定参数来定义节点，就会方便很多。

GoJS 中为我们提供了这种模板语法，后面会讲。

模型（Model）

GoJS 是一个 model-view 架构的库，画布里的点和连线是数据的可视化展示，它由模型 Model 进行管理。

GoJS 中 模型 控制着 数据，数据是一个 数组，数组中的每一个元素是一个 JavaScript 对象。

把 nodeDataArray 作为构造函数的参数，通过 new go.Model() 创建模型对象的实例，然后再把模型实例赋值给 diagram.model 属性就完成了对 Model 的管理。我们日常中的开发基本上就是在维护 nodeDataArray 这个数组。

语法：

代码语言：javascript复制

const myModel = new go.Model(nodeDataArray);

节点模板（nodeTemplate）

当我们没有手动指定节点模板的时候，其实 GoJS 是有默认模板的，也就是我们最开始的例子，一个节点（Node）加一个文本（TextBlock）。

默认的节点模板：

我们可以自定义节点的样式

代码语言：javascript复制

  // 创建画布
  this.diagram = $(go.Diagram, "diagram",{"undoManager.isEnabled": true});
  // 定义模板
  this.diagram.nodeTemplate =  
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle", fill: "white" },
      ),
      $(go.TextBlock,
        { text: "hello!", margin: 20 })
    );
  // 定义数据
  const nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  // 创建模型实例
  const myModel = new go.Model(nodeDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myModel;

自定义的节点模板：

连线模板（linkTemplate）

如果想让图表中的节点之间有一些有向或者无向的连线，仅仅靠普通的 Model 是无法做到的。此时应该使用 TreeModel 或者 GraphLinksModel。

TreeModel

TreeModel 适用于比较简单的场景。

创建一个 nodeDataArray 数组，用来保存节点数据，每个元素需要增加一个 key 作为唯一标识。

TreeModel 只用 nodeDataArray 一个数组就可以，不需要用一个额外的数组定义连线，只需在定义节点的时候指定父节点即可。

在定义节点同时指定当前节点的父节点，用属性 parent 表示，属性值是节点的 key 值。

特点：只能处理比较简单的连线情况，如果比较复杂就无能为力，比如，一个节点有多个父节点，或者一对节点之间有多条连线的情况。

语法：

代码语言：javascript复制

const myTreeModel = new go.TreeModel(nodeDataArray);

演示代码:

代码语言：javascript复制

  // 创建画布
  this.diagram = $(go.Diagram, "diagram", { "undoManager.isEnabled": true });
  // 定义数据
  const nodeDataArray = [
    { key: "Head" },
    { key: "Alpha", parent: "Head" },
    { key: "Beta", parent: "Head" },
    { key: "A", parent: "Alpha" },
    { key: "B", parent: "Alpha" },
    { key: "C", parent: "Beta" },
    { key: "D", parent: "Beta" },
    { key: "E", parent: "Beta" },
  ];
  // 创建 TreeModel 模型实例
  const myTreeModel = new go.TreeModel(nodeDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myTreeModel;

结果如下:

发现连线重合，布局混乱，这时可以使用 TreeLayout 解决。

代码语言：javascript复制

  // 创建画布
  this.diagram = $(go.Diagram, "diagram", {
    "undoManager.isEnabled": true,
    layout: $(go.TreeLayout, { angle: 90, layerSpacing: 35 })
  });
  // 定义数据
  const nodeDataArray = [
    { key: "Head" },
    { key: "Alpha", parent: "Head" },
    { key: "Beta", parent: "Head" },
    { key: "A", parent: "Alpha" },
    { key: "B", parent: "Alpha" },
    { key: "C", parent: "Beta" },
    { key: "D", parent: "Beta" },
    { key: "E", parent: "Beta" },
  ];
  // 创建 TreeModel 模型实例
  const myTreeModel = new go.TreeModel(nodeDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myTreeModel;

这下就比较正常了。

GraphLinksModel

GraphLinksModel 适用于比较复杂的情况。

创建一个 nodeDataArray 数组，用来保存节点数据，每个元素需要增加一个 key 作为唯一标识。

创建一个 linkDataArray 数组，利用 from 和 to 属性表示连线的指向，它俩的属性值就是节点的 key 值。

语法：

代码语言：javascript复制

const myGraphLinksModel = new go.GraphLinksModel(nodeDataArray, linkDataArray);

演示代码:

代码语言：javascript复制

  // 创建画布
  this.diagram = $(go.Diagram, "diagram", { "undoManager.isEnabled": true });
  // 定义节点数据
  const nodeDataArray = [
    { key: "Head" },
    { key: "Alpha", parent: "Head" },
    { key: "Beta", parent: "Head" },
    { key: "A", parent: "Alpha" },
    { key: "B", parent: "Alpha" },
    { key: "C", parent: "Beta" },
    { key: "D", parent: "Beta" },
    { key: "E", parent: "Beta" },
  ];
  // 定义连线数据
  const linkDataArray = [
    { from: "Alpha", to: "Head" },
    { from: "Beta", to: "Alpha" },
    { from: "A", to: "Alpha" },
    { from: "B", to: "Alpha" },
    { from: "C", to: "Alpha" },
    { from: "D", to: "C" },
    { from: "E", to: "D" },
  ]
  // 创建模型实例
  const myGraphLinksModel = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myGraphLinksModel;

结果如下:

linkTemplate

和节点模板相同的是，我们也可以自定义连线模板。

代码语言：javascript复制

  // 定义连线模板
  this.diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5 },
      $(go.Shape, { strokeWidth: 3, stroke: "#555" })
    )

最后变成了这样：

图表事件（DiagramEvent）

DiagramEvent 表示一般用户发起的对图表的改变。可以通过调用 Diagram.addDiagramListener 注册图表事件处理程序，各个图表事件以名字区分，也可以在图表初始化时调用 go.GraphObject.make 注册图事件处理程序。

常用的的图表事件名称包括：

事件名称	事件含义
InitialAnimationStarting	初始默认动画即将开始；不要在事件侦听器中修改图或其模型。这对于修改AnimationManager.defaultAnimation以制作自定义初始动画很有用。
AnimationStarting	一个默认动画（AnimationManager.defaultAnimation）将要开始；不要在事件侦听器中修改图或其模型。
AnimationFinished	刚刚完成的默认动画（AnimationManager.defaultAnimation）；不要在事件侦听器中修改图或其模型。
BackgroundSingleClicked	当鼠标左键单击发生在图的背景中而不是零件上时；如果进行任何更改，请启动并提交自己的事务。
BackgroundDoubleClicked	当鼠标左键双击发生在图表的背景中而不是零件上时；如果进行任何更改，请启动并提交自己的事务。
BackgroundContextClicked	当在图的背景中而不是在零件的背景中发生鼠标右键单击时；如果进行任何更改，请启动并提交自己的事务。
ChangeingSelection	一个操作即将更改Diagram.selection集合，该集合也是DiagramEvent.subject的值；不要在事件侦听器中对选择或图表或模型进行任何更改；请注意，仅设置Part.isSelected不会引发此事件，但是工具和命令将引发此事件。
ChangedSelection	一个操作刚刚更改了Diagram.selection集合，该集合也是DiagramEvent.subject的值；不要在事件侦听器中对选择或图表或模型进行任何更改；请注意，仅设置Part.isSelected不会引发此事件，但是工具和命令将引发此事件。
ClipboardChanged	零件已通过CommandHandler.copySelection复制到剪贴板; 所述DiagramEvent.subject是零件的集合; 如果进行任何更改，请启动并提交自己的事务。
ClipboardPasted	CommandHandler.pasteSelection已将零件从剪贴板复制到图表中; 该DiagramEvent.subject是Diagram.selection，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
DocumentBoundsChanged	图的部件的区域Diagram.documentBounds已更改；该DiagramEvent.parameter是旧的矩形。
ExternalObjectsDropped	通过从图的外部拖放将零件复制到图中；该DiagramEvent.subject是一套零件被丢弃的（这也是Diagram.selection），该DiagramEvent.parameter是源图，这是一个事务中调用，这样你就不必从头开始，并提交您的自己的交易。
GainedFocus	该图已获得键盘焦点，诸如一个呼叫后Diagram.focus。
InitialLayoutCompleted	自从对图进行重大更改（例如替换模型）以来，整个图布局首次更新。如果进行任何更改，则无需执行交易。
LayoutCompleted	整个图的布局刚刚更新；如果进行任何更改，则无需执行交易。
LinkDrawn	用户刚刚使用LinkingTool创建了一个新的Link ；该DiagramEvent.subject是新的链接，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务..
LinkRelinked	用户刚刚重新连接使用现有链路RelinkingTool或DraggingTool ; 该DiagramEvent.subject是修改后的链接，该DiagramEvent.parameter是GraphObject端口的链接从断开连接，这就是所谓的事务中，这样你就不必从头开始，并提交自己的事务..
LinkReshaped	用户刚刚使用LinkReshapingTool重新路由了现有的Link ；该DiagramEvent.subject是修改后的链接，该DiagramEvent.parameter是链接的原始路线点的列表，这就是所谓的事务中，这样你就不必从头开始，并提交自己的事务..
LostFocus	该图失去了键盘焦点（“模糊”）。
Modified	Diagram.isModified 属性已设置为新值-用于将窗口标记为自上次保存以来已被修改；不要在事件侦听器中修改逻辑示意图或其模型。
ObjectSingleClicked	发生在GraphObject上的点击；该DiagramEvent.subject是GraphObject; 如果进行任何更改，请启动并提交自己的事务。
ObjectDoubleClicked	发生在GraphObject上的双击；该DiagramEvent.subject是GraphObject; 如果进行任何更改，请启动并提交自己的事务。
ObjectContextClicked	发生在GraphObject上的上下文单击；该DiagramEvent.subject是GraphObject; 如果进行任何更改，请启动并提交自己的事务。
PartCreated	用户通过ClickCreatingTool插入了一个新的Part ；该DiagramEvent.subject是新的部分，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
PartResized	用户已通过ResizingTool更改了GraphObject的大小；该DiagramEvent.subject是GraphObject，该DiagramEvent.parameter是原来的大小，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
PartRotated	用户通过RotatingTool改变了GraphObject的角度; 该DiagramEvent.subject是GraphObject，该DiagramEvent.parameter是度原来的角度，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
SelectionMoved	用户已通过DraggingTool移动了选定的零件；该DiagramEvent.subject是一套移动零件，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
SelectionCopied	用户已通过DraggingTool复制了选定的零件；该DiagramEvent.subject是新复制件的设置，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
SelectionDeleting	用户将通过CommandHandler.deleteSelection删除选定的部件；该DiagramEvent.subject是Diagram.selection零件的集合被删除，这就是所谓的事务中，这样你就不必从头开始，并提交自己的事务。
SelectionDeleted	用户已通过CommandHandler.deleteSelection删除了选定的部件；该DiagramEvent.subject是被删除的零件的集合，这就是所谓的事务中，这样你就不必从头开始，并提交自己的事务。
SelectionGrouped	用户已通过CommandHandler.groupSelection从选定的零件中创建了一个新的组；该DiagramEvent.subject是新的集团，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
SelectionUngrouped	用户已删除选定的组，但通过CommandHandler.ungroupSelection保留了其成员；该DiagramEvent.subject是被取消组合组的集合，该DiagramEvent.parameter是被取消组合的前成员零件的集合，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
SubGraphCollapsed	用户已通过CommandHandler.collapseSubGraph折叠了选定的组；该DiagramEvent.subject是被压塌的是群体的集合，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
SubGraphExpanded	用户已通过CommandHandler.expandSubGraph扩展了选定的组；该DiagramEvent.subject是被扩展组的集合，这就是所谓的事务中，这样你就不必从头开始，并提交自己的事务。
TextEdited	用户已通过TextEditingTool更改了TextBlock的字符串值；该DiagramEvent.subject是编辑的TextBlock时，DiagramEvent.parameter是原始的字符串，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
TreeCollapsed	用户已通过CommandHandler.collapseTree折叠了带有子树的选定节点；该DiagramEvent.subject是被压塌的是节点的集合，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
TreeExpanded	用户已通过CommandHandler.expandTree用子树扩展了选定的Nodes 。该DiagramEvent.subject是被扩展节点的集合，这是一个事务中调用，这样你就不必从头开始，并提交自己的事务。
ViewportBoundsChanged	图的可见区域Diagram.viewportBounds已更改；所述DiagramEvent.subject是一个对象，其“规模”属性是旧Diagram.scale值，其“位置”属性是旧Diagram.position值，其“范围”属性是旧Diagram.viewportBounds值; 该DiagramEvent.parameter也是老viewportBounds矩形。不要在侦听器中修改图的位置或比例（即视口范围）

node.js

0 人点赞