linkItem

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

Example

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

Related samples

Possible properties of the linkItem object are listed below:

• mode (string) - определяет режим ссылок. Возможные значения:
  • "edges" - по умолчанию. Угловые коннекторы, которые идут от центра блока к центру верхней/боковой грани другого блока
  • "direct" - прямая линия, идущая из центра одного блока к центру другого
  • "curve" - изогнутая линия, идущая из центра одного блока к центру другого
  • "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 будут удалены). В этом случае ссылка будет соединять центры блоков.

Наверх