0

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

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
  },
});

那么.. 我如何将 modelConexionView 与 modelConexion 相关联？modelConexion 如何知道视图使用什么？

4

3 回答 3

1

来自 Google Groups 的 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
  },
});
于 2014-07-16T14:14:41.107 回答
0

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

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});
于 2014-07-10T18:08:35.887 回答
0

您也可以按照您想要的方式定义视图，然后在论文中定义要使用的链接视图，如 api http://jointjs.com/api#joint.dia.Paper

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

...
* 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);
      }
    },
  });
于 2014-08-23T22:30:14.577 回答