联合 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

我认为这可以帮助你： http://jointjs.com/demos/devs

Answer 2

为什么不起作用？

devs.Model 不会通过 ContraintElementView 渲染到纸上。
devs.Model 使用 devs.ModelView 渲染，basic.Circle 和 basic.Rect 使用 ContraintElementView.
JointJS dia.Paper 首先搜索在与模型相同的命名空间中定义的视图。如果找到，它会使用它。否则它使用论文 elementView 选项中的一个。即 joint.shapes.devs.ModelView 找到了 devs.Model 但没有找到 basic.Circle 的视图（没有定义 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+
不使用限制元素移动的自定义视图
改为使用 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/

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

Joint JS - How apply an event on shapes.devs

javascript

constraints

jointjs