javascript - 联合 JS - 如何在 shapes.devs 上应用事件

Question

我是 jointjs 的新手，我尝试将带有端口的矩形约束为一条线。

我试图重现 tutorial ，适用于 basic.Circle，适用于 basic.Rect 但不适用于 devs.Model

有人可以解释为什么以及如何解决这个问题吗？ 非常感谢!

这是我的代码:

var width=400, height=1000;

var ConstraintElementView = joint.dia.ElementView.extend({    
pointermove: function(evt, x, y) {
    joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
}
});

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#myholder'), width: width, height: height, gridSize: 1, model: graph, elementView: ConstraintElementView});

var m1 = new joint.shapes.devs.Model({
position: { x: 20, y: 20 },
size: { width: 90, height: 90 },
inPorts: [''],
outPorts: [''],
attrs: {
    '.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
    rect: { fill: '#2ECC71' },
    '.inPorts circle': { fill: '#16A085' },
    '.outPorts circle': { fill: '#E74C3C' }
}
});

var m2=m1.clone();
m2.translate(0,300);

var earth = new joint.shapes.basic.Circle({
position: { x: 100, y: 20 },
size: { width: 20, height: 20 },
attrs: { text: { text: 'earth' }, circle: { fill: '#2ECC71' } },
name: 'earth'
});

graph.addCell([m1, m2, earth]);

Answer 1

为什么不起作用？

• devs.Model 不是通过 ContraintElementView 渲染到纸上的。

• devs.Model 使用 devs.ModelView 进行渲染，basic.Circle 和 basic.Rect 使用 ContraintElementView。

• JointJS dia.Paper 首先搜索在与模型相同的命名空间中定义的 View 。如果找到，它会使用它。否则，它使用论文 elementView 选项中的一个。即 joint.shapes.devs.ModelView 找到了 devs.Model 但没有找到 basic.Circle 的 View (没有 joint.shapes .basic.RectView定义)

如何让它发挥作用？

• 将 elementView 纸张选项定义为一个函数。在这种情况下，论文不会搜索命名空间并首先使用函数的结果。
• 请注意，为了呈现端口，devs.ModelView 仍然是必需的。

即

var paper = new joint.dia.Paper({
  elementView: function(model) {
    if (model instanceof joint.shapes.devs.Model) {
      // extend the ModelView with the constraining method.
      return joint.shapes.devs.ModelView.extend({
        pointermove: function(evt, x, y) {
          joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
        }
      });
    }
    return ConstraintElementView;
  }
});

http://jsfiddle.net/kumilingus/0bjqg4ow/

推荐的方法是什么？

• JointJS v0.9.7+
• 不使用限制元素移动的自定义 View
• 改为使用 restrictTranslate 纸张选项。

即

var paper = new joint.dia.Paper({  
  restrictTranslate: function(elementView) {
     // returns an area the elementView can move around.
     return { x: 100, y: 0, width: 0, height: 1000 }
  };
});

http://jsfiddle.net/kumilingus/atbcujxr/