流程图控件GoJS教程：事件
GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。
图表事件
DiagramEvent表示用户对图进行的常规更改。您可以通过调用Diagram.addDiagramListener来注册一个或多个图表事件处理程序。您还可以在调用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 ”，该图失去了键盘焦点（“模糊”）。
- Diagram.isModified属性 “ Modified ” 已设置为新值-用于将窗口标记为自上次保存以来已被修改；不要在事件侦听器中修改逻辑示意图或其模型。
- “ 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矩形。不要在侦听器中修改图的位置或比例（即视口范围）。
除了DiagramEvent侦听器之外，在某些情况下，检测到此类更改很常见，足以保证具有作为事件处理程序的属性。因为这些事件不一定与任何特定的输入或图表事件相对应，所以这些事件处理程序具有特定于情况的自定义参数。
GraphObject.click 是一个非常常见的事件属性，如果非null，则它是一个在用户单击该对象时调用的函数。这最常用于指定“按钮”的行为，但是它以及其他“单击”事件属性“ doubleClick”和“ contextClick”在任何GraphObject上都可以使用。
另一个常见事件属性是Part.selectionChanged，只要Part.isSelected发生更改，就会调用该属性（如果为非null）。在这种情况下，事件处理函数将传递给单个参数Part。不需要其他参数，因为该函数可以检查Part.isSelected的当前值来确定要执行的操作。
与依赖DiagramEvent相比， Model ChangedEvent更加完整和可靠。例如，当代码向图中添加链接时，不会引发“ LinkDrawn” DiagramEvent。仅当用户使用LinkingTool绘制新链接时，才会引发DiagramEvent 。此外，链接尚未路由，因此将不会计算Link.points。实际上，创建新链接可能会使Layout无效，因此所有节点都可能在不久的将来被移动。
有时您想在用户更改图时更新数据库。通常你会想实现一个型号 ChangedEvent监听器，通过调用Model.addChangedListener或Diagram.addModelChangedListener，即注意到了更改模型，并决定如何在数据库中记录。
本示例演示如何处理几个图事件：“ ObjectSingleClicked”， “ BackgroundDoubleClicked”和“ ClipboardPasted”。
function showMessage(s) {
document.getElementById("diagramEventsMsg").textContent = s;
}
diagram.addDiagramListener("ObjectSingleClicked",
function(e) {
var part = e.subject.part;
if (!(part instanceof go.Link)) showMessage("Clicked on " + part.data.key);
});
diagram.addDiagramListener("BackgroundDoubleClicked",
function(e) { showMessage("Double-clicked at " + e.diagram.lastInput.documentPoint); });
diagram.addDiagramListener("ClipboardPasted",
function(e) { showMessage("Pasted " + e.diagram.selection.count + " parts"); });
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta", group: "Omega" },
{ key: "Gamma", group: "Omega" },
{ key: "Omega", isGroup: true },
{ key: "Delta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // from outside the Group to inside it
{ from: "Beta", to: "Gamma" }, // this link is a member of the Group
{ from: "Omega", to: "Delta" } // from the Group to a Node
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
输入事件
当发生低级HTML DOM事件时，GoJS会将键盘/鼠标/触摸事件信息规范化为新的InputEvent，该InputEvent可以传递给各种事件处理方法并保存以供以后检查。
InputEvent保留InputEvent.key用于键盘事件，InputEvent.button用于鼠标事件，InputEvent.viewPoint用于鼠标和触摸事件，以及InputEvent.modifiers用于键盘和鼠标事件。
该图的事件处理程序也记录InputEvent.documentPoint，这是InputEvent.viewPoint在鼠标事件发生时在文件坐标，InputEvent.timestamp，记录了事件发生的时间（毫秒）。
InputEvent类还为特定类型的事件提供了许多方便的属性。示例包括InputEvent.control（如果已按下控制键）和InputEvent.left（如果已按下 鼠标左/主按钮）。
一些工具在鼠标指针处找到“当前” GraphObject。这被记住为InputEvent.targetObject。
高层输入事件
一些工具会检测一系列输入事件，以组成更为抽象的用户事件。示例包括“点击”（鼠标上下相互非常靠近）和“悬停”（一段时间不动鼠标）。这些工具将在鼠标指向当前GraphObject的事件处理程序（如果有的话）。事件处理程序被保留为对象上属性的值。然后，它还会在GraphObject.panel的链上“冒泡”事件，直到事件以Part结尾。这允许在面板上声明“单击”事件处理程序，并使该处理程序应用，即使单击实际上发生在面板深处的元素上也是如此。如果鼠标指针上没有任何对象，则该事件将在图中发生。
类似于单击的事件属性包括GraphObject.click，GraphObject.doubleClick和GraphObject.contextClick。当没有GraphObject时，它们也会发生-事件发生在图的背景中： Diagram.click，Diagram.doubleClick和Diagram.contextClick。这些都是可以设置为事件处理程序的函数的属性。这些事件是由鼠标事件和触摸事件引起的。
类似鼠标悬停的事件属性包括GraphObject.mouseEnter，GraphObject.mouseOver和GraphObject.mouseLeave。但是只有Diagram.mouseOver适用于该图。
类似悬停的事件属性包括GraphObject.mouseHover和GraphObject.mouseHold。等效的图属性是Diagram.mouseHover和Diagram.mouseHold。
还有一些用于拖动操作的事件属性：GraphObject.mouseDragEnter，GraphObject.mouseDragLeave和GraphObject.mouseDrop。这些适用于固定对象，而不适用于被拖动的对象。而且，它们在通过触摸事件（而不仅仅是鼠标事件）拖动时也会发生。
此示例演示如何处理三个更高级别的输入事件：单击节点并输入/离开组。
function showMessage(s) {
document.getElementById("inputEventsMsg").textContent = s;
}
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Ellipse", { fill: "white" }),
$(go.TextBlock,
new go.Binding("text", "key")),
{ click: function(e, obj) { showMessage("Clicked on " + obj.part.data.key); } }
);
diagram.groupTemplate =
$(go.Group, "Vertical",
$(go.TextBlock,
{ alignment: go.Spot.Left, font: "Bold 12pt Sans-Serif" },
new go.Binding("text", "key")),
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle",
{ name: "SHAPE",
parameter1: 14,
fill: "rgba(128,128,128,0.33)" }),
$(go.Placeholder, { padding: 5 })
),
{ mouseEnter: function(e, obj, prev) { // change group's background brush
var shape = obj.part.findObject("SHAPE");
if (shape) shape.fill = "red";
},
mouseLeave: function(e, obj, next) { // restore to original brush
var shape = obj.part.findObject("SHAPE");
if (shape) shape.fill = "rgba(128,128,128,0.33)";
} });
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta", group: "Omega" },
{ key: "Gamma", group: "Omega" },
{ key: "Omega", isGroup: true },
{ key: "Delta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // from outside the Group to inside it
{ from: "Beta", to: "Gamma" }, // this link is a member of the Group
{ from: "Omega", to: "Delta" } // from the Group to a Node
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
单击并选择
此示例演示了“ click”事件和“ selectionChanged”事件：
尝试按Ctrl-A选择所有内容。请注意GraphObject.click事件属性和Part.selectionChanged事件属性之间的区别。两者都是在节点发生问题时调用的方法。所述GraphObject.click当用户点击的节点，这恰好选择的节点上发生。但是，即使没有单击事件或任何鼠标事件，也会发生Part.selectionChanged，这是由于节点的属性更改所致。
想要购买GoJS正版授权的朋友可以
function showMessage(s) {
document.getElementById("changeMethodsMsg").textContent = s;
}
diagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdorned: false },
$(go.Shape, "Ellipse", { fill: "white" }),
$(go.TextBlock,
new go.Binding("text", "key")),
{
click: function(e, obj) { showMessage("Clicked on " + obj.part.data.key); },
selectionChanged: function(part) {
var shape = part.elt(0);
shape.fill = part.isSelected ? "red" : "white";
}
}
);
var nodeDataArray = [
{ key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Gamma" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
温馨提示：疫情期间返岗上班需戴口罩、勤洗手、常通风，做好防护措施！
QQ交谈
在线咨询
渝公网安备
50010702500608号
客服热线