Graph#interactionMode

每个交互器实现了一种功能，一组交互器协同工作，构成一种交互模式，比如默认交互模式包含平移交互器，节点拖拽交互器，点选交互器，文本提示交互器等等，我们可以组合不同的交互器，满足交互需求。

默认提供以下几种交互模式：

• Consts.INTERACTION_MODE_DEFAULT - 默认交互模式
• Consts.INTERACTION_MODE_SELECTION - 框选交互模式
• Consts.INTERACTION_MODE_VIEW - 查看模式
• Consts.INTERACTION_MODE_ZOOMIN - 放大交互模式
• Consts.INTERACTION_MODE_ZOOMOUT - 缩小交互模式
• Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE - 创建简单连线交互模式
• Consts.INTERACTION_MODE_CREATE_EDGE - 创建连线交互模式
• Consts.INTERACTION_MODE_CREATE_SHAPE - 创建多边形交互模式
• Consts.INTERACTION_MODE_CREATE_LINE - 创建线条交互模式

切换交互模式

通过#interactionMode属性来切换当前交互模式

示例

切换到框选交互模式

graph.interactionMode = Q.Consts.INTERACTION_MODE_SELECTION;

定制交互模式

也可以完全定制自己的交互模式，需要两步：首先注册一种新的名称的交互模式，比如”VIEW_MODE”，然后将这个名称设置给网络图组件

示例，定义删除交互模式，实现点击删除功能

    //custom interaction mode
    Q.Consts.INTERACTION_MODE_DELETE_NODE = 'interaction.mode.delete';
    Q.Defaults.registerInteractions(Q.Consts.INTERACTION_MODE_DELETE_NODE, [Q.PanInteraction, Q.WheelZoomInteraction, Q.SelectionInteraction, {
        onclick: function(evt, graph){
            graph.removeSelectionByInteraction(evt);
        }
    }])
    var graph = new Q.Graph('canvas');
    var hello = graph.createNode("Hello", -100, -50);
    hello.image = Q.Graphs.server;
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("Hello\nQunee", hello, qunee);
    edge.setStyle(Q.Styles.EDGE_LINE_DASH, [3,4]);
    graph.interactionMode = Q.Consts.INTERACTION_MODE_DELETE_NODE;

其他交互相关的属性和方法

• #enableTooltip :Boolean - 是否显示提示文本
• #enableWheelZoom :Boolean - 是否使用鼠标滚轮缩放
• #enableRectangleSelectionByRightButton :Boolean - 是否启用右键框选功能