linkItem

объект с настройками для ссылок

object linkItem;

Example

webix.ui({
  view: "diagram",
  linkItem: {
    mode: "direct",
    arrow: "triangle"
  }
});

Related samples

Details

Possible properties of the linkItem object are listed below:

  • mode (string) - определяет режим ссылок. Возможные значения:
    • "edges" - по умолчанию. Угловые коннекторы, которые идут от центра блока к центру верхней/боковой грани другого блока
    • "direct" - прямая линия, идущая из центра одного блока к центру другого
    • "child" - линия, соединяющая родительский элемент с дочерним. Используется в блочных списках.
    • "sibling" - линия, соединяющая элементы одного иерархического уровня (например, потомки одного родительского элемента). Используется в блочных списках.
    • from (string) - определяет, с какой стороны блока будет начинатся ссылка. Возможные значения:
    • "center"
    • "top"
    • "right"
    • "bottom"
    • "left".
  • to (string) - определяет сторону блока, к которой будет вести ссылка
  • line (array) - массив координат, по которым рисуются ссылки. Каждый сегмент ссылки определяется как [[x, y], ...] или ["x, y", ...]
  • $css (string, function) - имя CSS класса или функция-темплейт, которая возвращает имя класса для линии ссылки
  • lineWidth (number) - определяет ширину линии ссылки. 1 по умолчанию. Свойство применяется к линии ссылки (не применяется к стрелке)
  • lineColor (string) - определяет цвет линии ссылки (название цвета или HEX код). #ccd7e6 по умолчанию. Свойство применяется к линии ссылки и контуру стрелки
  • lineStyle (string, number) - stroke-dasharray для линии ссылки (не применяется к стрелке). Возможные значения:
    • "dotted"
    • "dashed"
    • числовое значение. Чем выше значение, тем больше пространства между штрихами пунктира.

А также набор свойств, применяемых к стрелке ссылки:

  • arrow (boolean, string, array) - определяет, отрисовывать ли ведущую стрелку ссылки. Возможные значения:
    • булево значение, чтобы добавить (по умолчанию) или убрать стрелку
    • "triangle" чтобы отрисовать треугольник
    • массив координат, по которым рисуется стрелка. Каждый сегмент ссыстрелкилки определяется как [[x, y], ...] или ["x, y", ...]
  • $arrowCss (string, function) - имя CSS класса или функция-темплейт, которая возвращает имя класса для стрелки
  • arrowSize (string, number) - определяет размер стрелки. 6px по умолчанию
  • backgroundColor (string) - определяет цвет стрелки (название цвета или HEX код)
  • fillOpacity (string, number) - прозрачность внутреннего цвета стрелки. Диапазон от 0.0 до 1 или в процентах от "0%" до "100%".

На что обратить внимание при указании пути ссылки

Чтобы избежать конфликтов при указании пути ссылок, изучите следующую информацию:

  • если поле line указано, Diagram отрисует ссылки в соответствии со значениями массива
  • если указаны поля from и to, а поле line не указано, Diagram отрисует ссылки в соответствии с заданными значениями
  • если указан mode, а from, to, и line - нет, Diagram отрисует ссылки в соответствии с указанным режимом. В этом случае ссылка будет соединять центры блоков
  • если указано поле line, но from или to - нет, ссылка не будет следовать за своим исходным/целевым блоком при drag-n-drop
  • при вызове метода autoPlace(), ссылки отрисуются в соответствии с их режимом или режимом, заданным в linkItem (поля from, to, и line будут удалены). В этом случае ссылка будет соединять центры блоков.
See also
Наверх