JointJS Ссылки: Пользовательская разметка?

Question

Итак, я пытаюсь создать инструмент ERD, используя JointJS и хотел бы создать пользовательскую ссылку с разметкой что-то вроде

<path><rect><path> 

Идея заключается в том, чтобы ромб в середине линии, я знаю, Я могу сделать это с помощью элемента и двух ссылок, но я действительно хочу, чтобы у меня была какая-то специальная разметка в ссылке. Это можно сделать? Если да, то как?

Answer 1

У вас может быть собственная разметка ссылок, как и для других элементов. Однако код с кодом Link довольно сложный, по сравнению с, например, Rect. В joint.js:

joint.dia.Link = joint.dia.Cell.extend({ 

// The default markup for links. 
markup: [ 
    '<path class="connection" stroke="black" d="M 0 0 0 0"/>', 
    '<path class="marker-source" fill="black" stroke="black" d="M 0 0 0 0"/>', 
    '<path class="marker-target" fill="black" stroke="black" d="M 0 0 0 0"/>', 
    '<path class="connection-wrap" d="M 0 0 0 0"/>', 
    '<g class="labels"/>', 
    '<g class="marker-vertices"/>', 
    '<g class="marker-arrowheads"/>', 
    '<g class="link-tools"/>' 
].join(''), 

Как вы можете видеть, в отличие от RectLink на самом деле состоит из нескольких объектов. И это только для Link; есть также разметка для labels, vertices и т. д., и вам, возможно, придется учитывать их в зависимости от ваших требований.

В моем случае, я добавляю всплывающую подсказку --- HTML <title> элемент --- элементам. Для Rect я просто жестко:

markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/><title/></g>' 

Link но с я решил пойти на:

initialize: function() 
{ 
    // called from Backbone constructor 
    // call base initialize() 
    joint.dia.Link.prototype.initialize.apply(this, arguments); 

    // link markup is so complex that we need to fetch its definition 
    var markup = (this.markup || this.get('markup')); 
    // append <title> to markup, so that it covers whole path 
    markup += '<title/>'; 
    this.set('markup', markup); 
} 

Это должно дать вам начать, по крайней мере.