logo GoJS教程2020 我也要发布文档

流程图控件GoJS教程:事件


GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新试用版

图表事件

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矩形。不要在侦听器中修改图的位置或比例(即视口范围)。
DiagramEvents不一定与鼠标事件或键盘事件或触摸事件相对应。他们也不一定对应更改图表的模型-跟踪这种变化,利用Model.addChangedListenerDiagram.addModelChangedListenerDiagramEvents仅由于用户做了某事(可能是间接地)而发生。

除了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.addChangedListenerDiagram.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);

流程图控件GoJS教程:事件

输入事件

当发生低级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);

流程图控件GoJS教程:事件

单击并选择

此示例演示了“ click”事件和“ selectionChanged”事件:

  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);

流程图控件GoJS教程:事件

尝试按Ctrl-A选择所有内容。请注意GraphObject.click事件属性和Part.selectionChanged事件属性之间的区别。两者都是在节点发生问题时调用的方法。所述GraphObject.click当用户点击的节点,这恰好选择的节点上发生。但是,即使没有单击事件或任何鼠标事件,也会发生Part.selectionChanged,这是由于节点的属性更改所致。


温馨提示:疫情期间返岗上班戴口罩勤洗手、常通风,做好防护措施!

想要购买GoJS正版授权的朋友可以咨询慧都官方客服