前端流程图之JointJS（五）

今天是本系列的最后一篇，基本功能都已经实现了。

今天完成的功能包括：

1. 移动画布/缩放画布
2. 完成和require.js的集成
3. 按照Backbone风格进行了代码重构
4. 解决了鼠标事件坐标位置的转化，使得弹出菜单能够在正确的位置显示

效果图和昨天类似，今天就不再重复了，下面就按功能点进行具体解释吧。

移动/缩放画布

鼠标在画布空白位置按下-移动，带动画布一起运动，然后松开鼠标，结束移动。
主要涉及的事件为blank:pointerdown、blank:pointermove和blank:pointerup，函数则是paper.translate，获取画布原来的原点位置paper.options.origin。

'blank:pointerdown': function(evt, x, y){
    self.startX = x;
    self.startY = y;
    self.origin = self.paper.options.origin;
    self.startMove = true;
},
'blank:pointermove': function(evt, x, y) {
    if (self.startMove) {
        var diffX = x - self.startX + self.origin.x;
        var diffY = y - self.startY + self.origin.y;
        self.paper.translate(diffX, diffY);
    }
},
'blank:pointerup': function(evt, x, y) {
    self.startMove = false;
},

鼠标在画布空白位置通过滚轮对画布进行缩放，此时需要同时按下Ctrl键。
主要涉及事件为blank:mousewheel，函数为paper.scale，这个函数无参数是为get方法，有参数就变成了set方法。

'blank:mousewheel': function(evt, x, y, delta) {
    if (evt.ctrlKey) {
        evt.preventDefault();
        var scaleDelta = (delta > 0) ? 1.1 : 0.9;
        var sx = self.paper.scale().sx * scaleDelta;
        var sy = self.paper.scale().sy * scaleDelta;
        self.paper.scale(sx, sy);
    }
},

与Require.js的集成
集成中最主要的困难就是joint依赖lodash和backbone，而backbone又依赖underscore，而且我还引入了部分rappid的代码，这部分代码是老代码，也依赖underscore，这就给引入带来了困难。
最后我的解决方案是使用lodash，然后在map中设置underscore对应到lodash，并修改了rappid代码，转换到了lodash风格。

map: {
  '*': {
      'underscore': 'lodash'
  }
},

引入rappid

define(['joint'], function(a) {
    a.ui.Inspector = a.mvc.View.extend({
        className: "inspector",
        ....
    });
    ...
});

代码重构
原则上和graph相关的放到model中，和paper相关的放到view中，界面事件触发的回调函数定义中view中，需要操作graph的则调用this.model.fn。

鼠标事件位置转换
其实这个只需要调用paper的localToPagePoint函数就可以实现了。

showContextMenu: function(menu, x, y) {
    var point = this.paper.localToPagePoint(x, y);
    this.context.show(menu, point.x, point.y);
},