Question

我试图禁用链接上的click事件，这会产生一个顶点，但我需要另一个逻辑来处理这个事件。这是我的模特：

var modelConexion = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'modelConexion',
    manhattan: true,
    attrs: {
    },
  }, joint.dia.Link.prototype.defaults),
});

我的自定义LinkView：

var modelConexionView = joint.dia.LinkView.extend({
  pointerdown: function () {
    // LOGIC HERE
  },
});

那么..我怎样才能将modelConexionView与modelConexion联系起来？ modelConexion如何知道使用哪种视图？

Answer 1

来自Google网上论坛的Roman Bruckner解决方案：

如果你将两者都放在同一个命名空间中，那么JointJS会找到它自动。

joint.shapes.andydiaz.modelConexion = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'andydiaz.modelConexion',
    manhattan: true,
    attrs: {},
  }, joint.dia.Link.prototype.defaults),
});

.joint.shapes.andydiaz.modelConexionView = joint.dia.LinkView.extend({
  pointerdown: function () {
    // LOGIC HERE
  },
});

Answer 2

模型在实例化时与视图相关联，因此您可能希望执行以下操作：

var ModelConexion = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'modelConexion',
    manhattan: true,
    attrs: {
    },
  }, joint.dia.Link.prototype.defaults),
});

var ModelConexionView = joint.dia.LinkView.extend({
  pointerdown: function () {
    // LOGIC HERE
  },
});

var modelConexion = new ModelConexion();
var modelConexionView = new ModelConexionView({model: modelConexion});

Answer 3

此外，您可以按照您希望的方式定义视图，然后在论文中定义链接视图，以便在api http://jointjs.com/api#joint.dia.Paper

中指定使用

传递给构造函数的options对象可能包含以下属性：

...
* linkView - object that is responsible for rendering a link model into the paper. Defaults to joint.dia.LinkView
* defaultLink - link that should be created when the user clicks and drags and active magnet (when creating a link from a port via the UI). Defaults to new joint.dia.Link
...

然后，查看https://github.com/DavidDurman/joint/blob/master/src/joint.dia.link.js处的GitHub源代码，查找 pointerdown 。这是我的结果：

  // custom element for link
  // ---------------------------------------------------------------------------
  joint.shapes.customLink = {};
  joint.shapes.customLink.Element = joint.dia.Link.extend({
    defaults: joint.util.deepSupplement({
      type: "customLink.Element",
      attrs: {},
    }, joint.dia.Link.prototype.defaults),
  });
  joint.shapes.customLinkView = joint.dia.LinkView.extend({
    pointerdown: function (evt, x, y) {
      var targetParentEvent = evt.target.parentNode.getAttribute("event");
      if (targetParentEvent && targetParentEvent === "remove") {

        // YOUR STUFF HERE FOR REMOVE

      } else {
        joint.dia.LinkView.prototype.pointerdown.apply(this, arguments);
      }
    },
  });

JointJS - Custom LinkView：如何与我的Custom模型相关联？

3 个答案: