DoubleLinkTools with new linkTools API

[ialokim]

I want to achieve a similar result to what has been possible before by setting

options: joint.util.defaults({
    doubleLinkTools: true,
}, joint.dia.LinkView.prototype.options)

on a custom linkView type using the new linkTools API.

I thought of different solutions how to handle the additional buttons for longer links, but I'm not sure if they are possible and what would be considered best practice:

• hide and show a single linkTool using linkTool.hide/.show() depending on the link's length inside an UPDATE cycle
• add or remove a single linkTool, e.g. Remove button, after setting the toolsView for the link by manipulation the toolsView's tools array
• for each mouseover, create a completely new toolsView containing new (?) tools depending on how long the link is currently (this is how it was done in the link demo)

Also another related question: Is it also possible to change some options, e.g. the distance of a Button, after tool creation s.th. it would be possible to move them depending on the link's length?

[ialokim]

Just for reference, I ended up overwriting the default Button show() and update() functions as follows:

joint.linkTools.Button.prototype.update = function() {
    if (this.relatedView.isShortLink())
        this.options.distance = this.options.distanceShort || this.options.distance;
    else
        this.options.distance = this.options.distanceLong || this.options.distance;
    this.position();
    return this;
};
joint.linkTools.Button.prototype.show = function() {
    if (this.options.secondary && this.relatedView.isShortLink()) return;
    this.el.style.display = '';
    this._visible = true;
};

The used LinkView needs then to have the corresponding .isShortLink() defined and using the options distanceLong, distanceShort and secondary at button creation enables showing additional buttons and repositioning them for long links.

[kumilingus]

You may also extend the Button class instead.

const MyButton = joint.linkTools.Button.extend({
  update: function() {
    if (this.relatedView.isShortLink())
        this.options.distance = this.options.distanceShort || this.options.distance;
    else
        this.options.distance = this.options.distanceLong || this.options.distance;
    this.position();
    return this;
  },
  show: function() {
    if (this.options.secondary && this.relatedView.isShortLink()) return;
    this.el.style.display = '';
    this._visible = true;
  }
});

Anyway, we could make distance option a callback (or add a new option - not sure at this point). So we could do stuff like this:

new joint.linkToolsButton({
  distance: function(linkView) {
    return (linkView.getConnectionLength() > 50) ? 20 : 10;
  }
});