5-events

Builtin Paper Events
Builtin Graph Events
Subelement Event Attribute
Custom View Events
Custom View Event Propagation
element的事件
link的事件
总结

JointJS offers several different ways to enable user interaction. Events are triggered on your paper, on individual element/link views.
JointJS提供了几种不同的方式来实现用户交互。事件会在您的paper、单个元素/链接视图上触发。

Builtin Paper Events

Paper automatically triggers several builtin events upon user interaction. These include pointerdown, double click and right click events, as well as link connection or cell highlighting events. You can find the full list in Paper documentation. Reacting on any of these events is as simple as adding a listener on your paper; this is the easiest way to detect one type of interaction on all instances of a component.
paper在用户交互时自动触发多个内置事件。这些事件包括pointerdown、double click和right click事件，以及链接连接或单元格突出显示事件。您可以在Paper documentation中找到完整的列表。对这些事件的任何反应就像在文件中添加侦听器一样简单；这是在组件的所有实例中检测一种交互的最简单方法。
所有的事件：http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.events
Paper的事件：

• 事件中包含：cell，link，element，blank各个元素的事件：

双击：pointerdblclick
单机：pointerclick
右击：contextmmenu
按下：pointerdown =>link的时候，label按下无效！
按下并滑动：pointermove
按上：pointerup =>按下释放的时候
hover：mouseover
out：mouseout =>移动到rect里面的文字上时，也会触发mouseout事件！
mouseenter
mouseleave =>没有mouseout的问题！！！
mousewheel

• 其他事件：

magnet：element:magnet:pointerclick，element:magnet:pointerdblclick，element:magnet:contextmenu
cell:highlight：
cell:unhighlight：
link:connect：
link:disconnect：
rendered:done：
[custom]：

magnet
英 [ˈmæɡnət] 美 [ˈmæɡnət]
n.磁铁;磁石;吸铁石;有吸引力的人(或地方、事物);磁体;磁性物体

For example, the event ‘link:pointerdblclick’ is triggered when a double click is detected on any link in the diagram. A corresponding event for elements (‘element:pointerdblclick’), cells in general (‘cell:pointerdblclick’), and for blank areas on the paper (‘blank:pointerdblclick’) is provided as well, Here, the cell event listener unhides an element with a message whenever an Element or Link is clicked. The more specific element and link event listeners change the color of their model’s stroke. Finally, the blank event listener hides the message element and changes the color of the Paper background:
例如，当在图表中的任何link上检测到双击时，将触发事件“link:pointerdblclick”。为元素（“element:pointerdblclick”）、常规单元格（“cell:pointerdblclick”）和paper上的空白区域（“blank:pointerdblclick”）提供了相应的事件，在这里，每当单击元素或链接时，单元格事件侦听器都会取消对带有消息的元素的隐藏。更具体的元素和链接事件监听器会更改其模型笔画的颜色。最后，空白事件侦听器隐藏消息元素并更改纸张背景的颜色：

elements的双击事件：

paper.on('element:pointerdblclick', function (elementView) {
    resetAll(this);
    var currentElement = elementView.model;
    currentElement.attr('body/stroke', 'orange');
})

links的双击事件：

paper.on('link:pointerdblclick', function (linkView) {
    resetAll(this);
    var currentLink = linkView.model;
    currentLink.attr('line/stroke', 'orange');
    currentLink.label(0, {
        attrs: {
            body: {
                stroke: 'orange',
            }
        }
    })
})

单元格的双击事件：包括element和links：

paper.on('cell:pointerdblclick', function(cellView) {
    console.log('cell......');
    var isElement = cellView.model.isElement();
    var message = (isElement ? 'Element' : 'Link') + ' clicked';
    info.attr('label/text', message);
    info.attr('body/visibility', 'visible');
    info.attr('label/visibility', 'visible');
});

blank地方的双击事件：

paper.on('blank:pointerdblclick', function () {
    resetAll(this);
    info.attr('body/visibility', 'hidden');
    info.attr('label/visibility', 'hidden');
    console.log(this);
    console.log(this === paper); // true
    // paper.model.getElements(); // 获取所有元素，还有其他的方法：eg：getCells();getFirstCell();getLastCell();
    // paper.model.getLinks();
    
    // paper没有attr属性的，有方法：eg：paper.drawBackground();
    // 还有其他的方法：eg：drawGrid();
    /* paper.attr({
         background:{
             color:'red',
         }
     })*/
     
    paper.drawBackground({
        color: 'orange'
    })
})

The event listener callback functions have the signature callback([cellView,] eventObject, eventX, eventY) (cellView is not provided for ‘blank:…’ events, for obvious reasons). Inside the listeners, the paper itself is available as this. The eventObject can be used to, for example, stopPropagation(). The x and y coordinates can be useful when placing markers at sites of user interaction. We have not used these three parameters in the above example, but you will encounter them frequently in JointJS event listeners.
事件侦听器回调函数具有签名回调（[CellView，]EventObject，EventX，Eventy）（由于明显的原因，没有为“blank:…”事件提供CellView）。在监听器内部，paper本身就this是可用的。eventObject可用于，例如stopPropagation()。当在用户交互的地点放置标记时，X和Y坐标可能是有用的。在上面的示例中，我们没有使用这三个参数，但是您将经常在JointJS事件侦听器中遇到它们。

paper.on('blank:pointerdblclick', function(e,x,y) {
    console.log("this:",this,this===paper); // true
    resetAll(this);
    info.attr('body/visibility', 'hidden');
    info.attr('label/visibility', 'hidden');
    this.drawBackground({
        color: 'orange'
    })
});

Note that all of these events are also triggered on the individual cellView (element or link view) the user interacted with. Therefore, you could achieve the same functionality as above by adding a listener on every elementView and linkView separately. While this approach has its uses, we recommend using paper listeners; having a single listener cover all interaction options is better practice in JavaScript than having dozens of listeners for individual views.
请注意，所有这些事件也会在用户交互的单个CellView（元素或链接视图）上触发。因此，您可以通过在每个elementView和linkView上分别添加一个监听器来实现与上面相同的功能。虽然这种方法有其用途，但我们建议使用paper的监听器；在JavaScript中，让单个监听器覆盖所有交互选项比让几十个监听器用于单个视图更好。

Builtin Graph Events

The Graph model comes with several builtin events as well. These events react to changes in the cell model’s properties, including position, size, attributes, and status of JointJS transitions. JointJS documentation contains a generic list of Graph events you can react on, alongside more specific lists for Element events and Link events. To react on these events, add a listener on your Graph model.

图模型还附带了几个内置事件。这些事件对单元模型属性的变化做出反应，包括位置、大小、属性和jointjs转换的状态。JointJS文档包含可以对其做出反应的图形事件的通用列表，以及元素事件和链接事件的更具体的列表。要对这些事件做出反应，请在图形模型上添加一个侦听器。
graph的事件：http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Graph.events
change：为graph中的任何更改触发的一般事件
add：当新单元格添加到graph中时触发
remove：从graph中删除单元格时触发
冒泡：Moreover, all the events that are triggered on elements or links are propagated to the graph as well.
此外，在元素或链接上触发的所有事件也会传播到图形中。

In the following example, the event 'change:position' is triggered on the element when it is moved; we determine the new position of the element’s center and write it into its text label. The event ‘change:target’ is triggered on the link when its target is moved; we use that event to write the new target position into the link label.
在下面的示例中，元素移动时会触发事件“change:position”；我们确定元素中心的新位置并将其写入其文本标签。“ 'change:target' ”事件在其目标移动时在链接上触发；我们使用该事件将新目标位置写入链接标签。

graph.on('change:position', function(cell,newValue) {
   console.log("newValue:",newValue,this===graph); // {x: 94, y: 31}  true
    console.log("position-cell:",cell,cell.getBBox()); //cell.getBBox():g.Rect {x: 99, y: 30, width: 100, height
    var center = cell.getBBox().center(); // g.Point {x: 149, y: 49}
    var label = center.toString();
    console.log(center,label); //  "149@49"
    cell.attr('label/text', label);
});

graph.on('change:target', function(cell,newValue) {
    console.log("target-cell",cell,cell.target()); // cell.target():{x:456,y:45}
    var target = new g.Point(cell.target()); // 转成g点
    var label = target.toString(); // 转成@形式
    console.log("target:",target); // g.Point{x:456,y:45}
    console.log("label:",label); // 456@45
    cell.label(0, {
        attrs: {
            label: {
                text: label
            }
        }
    });
});

The callback functions of the cell graph change events have the signature callback(cell, newValue). Inside the listeners, the graph itself is available as this. In our example, we were able to assume that the received cell model is of the type Element and Link, respectively, because Link objects do not trigger ‘change:position’ events, and Element objects do not trigger ‘change:target’. Keep in mind that some Graph events can be triggered on both data types, however (e.g. ‘change:attrs’); depending on what you are trying to do, you might need to check the actual cell data type first.
单元图更改事件的回调函数具有签名callback(cell, newValue)。在监听器内部，图形本身this是可用的。在我们的示例中，我们能够分别假定接收的单元模型是element和link类型，因为link对象不会触发’change:position’事件，而element对象不会触发’change:target’。请记住，两种数据类型都可以触发某些图形事件（例如“change:attrs”）；根据您尝试执行的操作，您可能需要首先检查实际的单元格数据类型。

Other graph event listeners are provided with different parameters. The generic ‘graph:change’ event listeners receive only the changed cell but not the new value (callback(cell)). The ‘graph:add’ event listeners receive the added cell and the updated cells array (callback(cell, newCells)), whereas the ‘graph:remove’ event listeners receive the removed cell and the original cells array (callback(cell, oldCells)).

其他图形事件侦听器提供了不同的参数。一般的“graph:change”事件侦听器只接收已更改的单元格，而不接收新值（callback(cell)）。“graph:add”事件侦听器接收添加的单元格和更新的单元格数组（callback(cell, newCells)），而“graph:remove”事件侦听器接收删除的单元格和原始单元格数组（callback(cell, oldCells)）。

Similarly to builtin paper events, these events are also triggered on the individual cell (element or link model) the user interacted with. Therefore, you could achieve the same functionality as above by adding a listener on every element and link separately. While this approach has its uses, we recommend using graph listeners; having a single listener cover all interaction options is better practice in JavaScript than having dozens of listeners for individual models.
与内置paper事件类似，这些事件也会在用户交互的单个单元（元素或链接模型）上触发。因此，您可以通过在每个元素和链接上分别添加一个监听器来实现与上面相同的功能。虽然这种方法有其用途，但我们建议使用图形监听器；让一个监听器覆盖所有交互选项在JavaScript中比让几十个监听器用于单个模型更好。

The graph can also react on changes in its own properties. For example, calling graph.set(‘property’, true) would trigger ‘change:property’ on the graph). Event listeners for graph attribute changes receive a reference to the graph and the new value as their parameters (callback(graph, newValue)).
graph还可以对其自身属性的变化做出反应。例如，调用graph.set（“property”，true）将触发graph上的“change:property”）。图形属性更改的事件侦听器接收对图形的引用，并将新值作为其参数（回调（graph，new value））。

Beware that due to backwards-compatibility considerations, this can lead to confusion if we are careless in choosing custom graph property names! If we named our custom graph property position instead of property, the triggered event would be identified as ‘change:position’, and would thus be captured by the event listener in our example - but the callback would have to contend with an unexpected set of arguments. To avoid such name collisions, we strongly recommend adopting a naming convention for custom graph properties - e.g. starting their variable names with the word “graph” (i.e. graphProperty and graphPosition). If that is not an option, and you need to support custom graph attributes, you can make yourself safe by asserting that the cell parameter is not actually a Graph:
请注意，由于向后兼容性的考虑，如果我们在选择自定义图形属性名称时不小心，这可能会导致混淆！如果我们将自定义图形属性位置命名为而不是属性，则触发的事件将被标识为“change:position”，因此将被示例中的事件侦听器捕获-但回调必须与一组意外的参数进行竞争。为了避免此类名称冲突，我们强烈建议对自定义图形属性采用命名约定-例如，以单词“graph”（即graphProperty 和graphPosition）开始变量名称。如果这不是一个选项，并且您需要支持自定义图形属性，那么您可以通过断言单元格参数实际上不是一个图形来确保自己的安全：

graph.on('change:position', function(cell) {
    if (cell instanceof joint.dia.Graph) return;
    var center = cell.getBBox().center();
    var label = center.toString();
    cell.attr('label/text', label);
});

Subelement Event Attribute

The easiest way to add a custom event to an individual component on your diagram is to use the event special attribute.
向图中的单个组件添加自定义事件的最简单方法是使用事件特殊属性。

• event - adds an event of the specified name to the subelement’s model; to be triggered when JointJS detects a pointerdown event (mousedown/touchstart DOM event) on the subelement.

1. event - 将指定名称的事件添加到子元素的模型；当jointjs检测到子元素上的pointerdown事件（mousedown/touchstart dom事件）时触发。

This special attribute is useful for creating elements with custom tool subelements (e.g. a minimize button). Then, you can simply attach a listener on your paper that gets called when your custom event is detected.
此特殊属性对于使用自定义工具子元素（例如最小化按钮）创建元素很有用。然后，您可以简单地在纸上附加一个监听器，当检测到自定义事件时，该监听器会被调用。

In the following example, we define a custom element type with a button subelement. We attach a custom event ‘element:button:pointerdown’ to the button and listen for it. When button is pressed, the element’s body and label are hidden (“minimized”), and the symbol in the button is changed to indicate that the element can be now be unminimized:
在下面的示例中，我们用按钮子元素定义了一个自定义元素类型。我们将一个自定义事件“element:button:pointerdown”附加到该按钮并监听它。当按下按钮时，元素的主体和标签被隐藏（“最小化”），按钮中的符号被更改以指示元素现在可以取消最小化：

// 自定义元素
var CustomElement= joint.dia.Element.define('examples.CustomElement',
    {
       attrs:{
           body:{
               refWidth:'100%',
               refHeight:'100%',
               strokeWidth:2,
               stroke:'black',
               fill:'white',
           },
           label:{
               textAnchor:'middle',
               textVerticalAnchor:'middle',
               fill:'black',
               fontSize:14,
               refX:'50%',
               refY:'50%',
           },
           button:{
               cursor:'pointer',
               ref:'buttonLabel',
               refWidth:'150%',
               refHeight:'150%',
               refX:'-25%',
               refY:'-25%',
           },
           buttonLabel:{
                pointerEvents:'none',
               refX:'100%',
               refY:0,
               textAnchor:'middle',
               textVerticalAnchor:'middle',
           }
       }
    },
    {
        markup:[
            {tagName:'rect',selector:'body'},
            {tagName:'text',selector:'label'},
            {tagName:'rect',selector:'button'},
            {tagName:'text',selector:'buttonLabel'},
        ]
    }
)

// 创建元素，并需改属性
var element= new CustomElement();
element.position(250,30);
element.resize(100,40);
element.attr({
    body:{
        cursor:'default',
        visibility:'visible',
    },
    label:{
        text:'element',
        visibility:'visible',
        pointerEvents:'none',
    },
    button:{
        fill:'orange',
        stroke:'black',
        strokeWidth:2,
        event:'a:b:c',
    },
    buttonLabel:{
        text:'＿',
        fill:'black',
        fontSize:8,
        fontWeight:'bold',
    }
})
element.addTo(graph);


// 事件   'element:button:pointerdown'   ==>我用的a:b:c，随便的事件名称？
paper.on('a:b:c',function(elementView,evt){
    evt.stopPropagation();
    console.log(elementView);
    console.log(evt);
    var model = elementView.model;
    if(model.attr('body/visibility')==='visible'){
        model.attr('body/visibility','hidden');
        model.attr('label/visibility','hidden');
        model.attr('buttonLabel/text','＋')
    }else{
        model.attr('body/visibility','visible');
        model.attr('label/visibility','visible');
        model.attr('buttonLabel/text','＿')
    }
})

Custom View Events

For more advanced event customization, we need to delve into custom views. That is an advanced topic with many powerful options; here we will concentrate on extending our View objects with custom events.
对于更高级的事件定制，我们需要深入研究定制视图。这是一个高级主题，有许多强大的选项；在这里，我们将集中精力使用自定义事件扩展View objects。
The Paper object has two options that determine the views used to render diagram components:
Paper对象有两个选项，用于确定用于呈现图表组件的视图：

• elementView - sets the ElementView to use to render Element models on this paper. Defaults to joint.dia.ElementView.设置用于呈现本文中的元素模型的元素视图。默认为joint.dia.elementview。
• linkView - sets the LinkView to use to render Link models. Defaults to joint.dia.LinkView.设置用于渲染链接模型的链接视图。默认为joint.dia.linkview。

We will use these two options to provide extended versions of the default ElementView and LinkView. The example removes double-clicked components:
我们将使用这两个选项来提供默认元素视图和链接视图的扩展版本。该示例删除双击的组件：

new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 100,
    gridSize: 1,
    background: {
        color: 'white'
    },
    interactive: false,
    elementView: joint.dia.ElementView.extend({
        pointerdblclick: function(evt, x, y) {
            this.model.remove();
        }
    }),
    linkView: joint.dia.LinkView.extend({
        pointerdblclick: function(evt, x, y) {
            this.model.remove();
        }
    })
});

Custom View Event Propagation

You can maintain recognition of the event by the builtin paper mechanism if you notify the CellView and Paper about the event. For example, in our custom ElementView pointerdblclick handler, we would include this:
如果将事件通知CellView和Paper，则可以通过内置的Paper机制保持对事件的识别。例如，在我们的自定义元素视图pointerdblclick处理程序中，我们将包括以下内容：

joint.dia.CellView.prototype.pointerdblclick.apply(this, arguments);
this.notify('element:pointerdblclick', evt, x, y);

=>事件可以传递到paper上了，要不然，remove以后，不会传递到paper的！

This can be useful if you need to maintain default event handling behavior. The following example integrates showing a message element on Cell click from the paper events demo with removing the components from the previous example:
如果需要维护默认的事件处理行为，这将非常有用。以下示例集成了从Paper Events演示中单击单元格时显示消息元素和从上一个示例中删除组件：

maintain
英 [meɪnˈteɪn] 美 [meɪnˈteɪn]
v.维持;保持;维修;保养;坚持(意见);固执己见
recognition
英 [ˌrekəɡˈnɪʃn] 美 [ˌrekəɡˈnɪʃn]
n.认出;认识;识别;承认;认可;赞誉;赏识;奖赏
mechanism
英 [ˈmekənɪzəm] 美 [ˈmekənɪzəm]
n.机械装置;机件;方法;机制;(生物体内的)机制，构造

element的事件

http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Element.events

• change - generic event triggered for any change on the element - fn(element, opt)，
  为元素上的任何更改触发的一般事件----fn(element，opt)
• change:position - triggered when the element changes its position - fn(element, newPosition, opt)
• change:angle - triggered when the element gets rotated - fn(element, newAngle, opt)
• change:size - triggered when the element gets resized - fn(element, newSize, opt)
• change:attrs - triggered when the element changes its attributes - fn(element, newAttrs, opt)
• change:embeds - triggered when other cells were embedded into the element - fn(element, newEmbeds, opt)
• change:parent - triggered when the element got embedded into another element - fn(element, newParent, opt)
• change:z - triggered when the element is moved in the z-level (toFront and toBack) - fn(element, newZ, opt)
• transition:start - triggered when a transition starts. - fn(element, pathToAttribute)
• transition:end - triggered when a transiton ends. - fn(element, pathToAttribute)

var element=new joint.shapes.standard.Rectangle()
element.position(100,30);
element.resize(100,40);
element.addTo(graph);

setTimeout(function(){
   element.resize(50,30)
},2000)

element.on('change',function(){
    console.log("change事件执行le");
})
element.on('change:size',function(){
    console.log("size事件执行le");
})
graph.on('change',function(){
    console.log('graph的change事件会被冒泡执行的');
})

link的事件

http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Link.events

• change - generic event triggered for any change on the link，为link上的任何更改触发的一般事件
• change:source - triggered when the link changes its source
• change:target - triggered when the link changes its target
• change:attrs - triggered when the link changes its attributes
• change:smooth - triggered when the link toggled interpolation
• change:manhattan - triggered when the link toggled orthogonal routing
• change:vertices - triggered when the link changes its vertices array
• change:z - triggered when the link is moved in the z-level (toFront and toBack)
• transition:start - triggered when a transition starts.
• transition:end - triggered when a transition ends.

eg：

link.on('change:source', function() {
	 alert('source of the link changed')
 })

var link=new joint.shapes.standard.Link();
link.source(new g.Point(100,100));
link.target(new g.Point(200,200));
link.addTo(graph);

setTimeout(function(){
    link.source(new g.Point(0,0));
    link.target(new g.Point(300,300));
    link.attr({
        line:{
            stroke:'red'
        }
    })
},2000)

link.on('change:target',function(){
    console.log("target改变了");
})
link.on('change:source',function(){
    console.log("source改变了2");
})
link.on('change:attrs',function(){
    console.log("attr改变了ye");
})

总结

paper：

paper.on('element:pointerdblclick', function(elementView) {

});

graph：

graph.on('change:position', function(cell) {
  
});