Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听

监听事件

addViewListener主要用于监听视图绘制的事件

/**
 *addViewListener主要用于监听视图绘制的事件
 *network.addViewListener(function(e){console.log(e);});
 *
 */
 addViewListener: function (listener, scope, ahead) {
   
        this._viewDispatcher.add(listener, scope, ahead);
 },
 removeViewListener: function (listener, scope) {
   
        this._viewDispatcher.remove(listener, scope);
 },
 fireViewEvent: function (evt) {
   
        this._viewDispatcher.fire(evt);
 },

在创建Network和刷新Network的时候会派发视图事件，可以监听到”invalidate”、”validateStart”、”validateEnd”等。

      //addViewListener主要用于监听视图绘制的事件
        const eFun = e => {
   
            console.log(e, 'ee')
        }
        // network.addViewListener(eFun)
        // 移除监听视图绘制事件
        // network.removeViewListener(eFun)

addInteractionListener主要用于监听视图操作的事件

/**
 *addInteractionListener主要用于监听视图操作的事件
 *network.addInteractionListener(function(e){console.log(e);});
 *
 */
 addInteractionListener: function (listener, scope, ahead) {
   
        this._interactionDispatcher.add(listener, scope, ahead);
 },
 removeInteractionListener: function (listener, scope) {
   
        this._interactionDispatcher.remove(listener, scope);
 },
 fireInteractionEvent: function (evt) {
   
        this._interactionDispatcher.fire(evt);
 },

在Network上执行的操作都可以通过addInteractionListener监听到,TWaver内部常见的派发事件有:

/**
* 添加交互事件监听器，用于监听用户各种操作
* @id twaver.controls.ViewBase.addInteractionListener
* @param {Function} listener 回调函数
* @param {Object} [scope] 可选，回调函数的作用域，默认为null，即全局
* @param {Boolean} [ahead] 可选，是否将此监听放在最前面，默认为false
* @example viewBase.addInteractionListener(function (e) {
* console.log(e.kind, e.element);
* });
* 
* kind可以为下列值：
* createElement 创建网元
* clickElement 单击网元
* doubleClickElement 双击网元 
* clickBackground 单击背景
* doubleClickBackground 双击背景
* removeElement 删除网元
* selectAll 选中所有网元
* upSubNetwork 进入上一层子网
* enterSubNetwork 进入子网
* bundleLink 展开或合并连线捆绑
* expandGroup 展开组
* liveMoveStart 开始实时移动网元
* liveMoveBetween 正在实时移动网元
* liveMoveEnd 结束实时移动网元
* lazyMoveStart 开始延迟移动网元
* lazyMoveBetween 正在延迟移动网元
* lazyMoveEnd 结束延迟移动网元
* liveResizeStart 开始实时改变网元大小
* liveResizeBetween 正在实时改变网元大小
* liveResizeEnd 结束实时改变网元大小
* lazyResizeStart 开始延迟改变网元大小
* lazyResizeBetween 正在延迟改变网元大小
* lazyResizeEnd 结束延迟改变网元大小
* selectStart 开始框选
* selectBetween 正在框选
* selectEnd 结束框选
* liveMovePointStart 开始移动ShapeLink或ShapeNode的点
* liveMovePointBetween 正在移动ShapeLink或ShapeNode的点
* liveMovePointEnd 结束移动ShapeLink或ShapeNode的点
*/
twaver.controls.ViewBase.prototype.addInteractionListener = function (listener, scope, ahead) {
   }
松开鼠标的事件为 liveMoveEnd或lazyMoveEnd，获取网元的坐标可以用
network.getMovableSelectedElements().forEach(e){
   
    console.log(e.getLocation);
};

使用：

network.addInteractionListener(function (e) {
    console.log(e); });

从点击开始拖动到停止拖动

监听鼠标事件

/**
 *network.getView.addEventListener(MouseEvent', function (e) {});
 *监听鼠标事件: mousedown、mousemove、mouseup、keydown等。
 */

使用：

     network.getView().addEventListener('mousedown',(e)=>{
   
            console.log(e,'mousedown')
        })
        network.getView().addEventListener('mouseup',(e)=>{
   
            console.log(e,'mouseup')
        })

获取鼠标下的网元

//获取鼠标下的网元
network.getView().addEventListener('mousemove',function(e){
   
    var element = network.getElementAt(e);
})

使用：

 network.getView().addEventListener('mousedown',(e)=>{
   
            var element = network.getElementAt(e);
            console.log(element.getName(),'name')
            console.log(element.getLocation(),'locatioon')
 })

学习参考：TWaver Documents