JointJS Links: пользовательская разметка?

jointjs

1001 просмотра

1 ответ

428 Репутация автора

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

<path><rect><path>

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

Автор: David Sarmiento Источник Размещён: 18.07.2016 09:22

Ответы (1)


2 плюса

2097 Репутация автора

Вы можете иметь собственную разметку для ссылок, как и для других элементов. Однако предоставленный Linkкод разметки довольно сложен по сравнению, например, с кодом a 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(''),

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

В моем случае я добавляю подсказку - <title>элемент HTML - к элементам. За собой 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);
}

Это должно дать вам хотя бы начало.

Автор: JonBrave Размещён: 11.07.2017 11:26
Вопросы из категории :
32x32