linkItem

an object that specifies links presentation

Example

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

Related samples

Possible properties of the linkItem object are listed below:

• mode (string) - defines mode of the link. The possible values are:
  • "edges" - default. Elbow-like connector going from and to the center of top/side edge of the block
  • "direct" - a straight line going from the center of one block directly to the center of another
  • "curve" - a curved line from the center of one block to the center of another
  • "child" - a line that connects parent with a child element. Used in block list structures
  • "sibling" - a line that connects sibling elements (e.g. children of the same parent). Used in block list structures.
  • from (string) - defines the edge of the block the link is headed from. Possible values are:
  • "center"
  • "top"
  • "right"
  • "bottom"
  • "left".
• to (string) - defines the edge of the block the link is headed to. Possible values are the same as in the from field described above.
• line (array) - an array of coordinates according to which the link is drawn. Each segment of the link is defined as [[x, y], ...] or ["x, y", ...]
• $css (string, function) - CSS class name or a template function to apply a class name to the link line
• lineWidth (number) - defines the width for the link line. 1 by default. The property is applied to the line of the link (not arrow)
• lineColor (string) - defines color for the link line (color name or HEX code). #ccd7e6 by default. The property is applied to the line of the link and arrow stroke
• lineStyle (string, number) - stroke-dasharray for the link line (not its arrow). Possible values are:
  • "dotted"
  • "dashed"
  • numeric value. The higher value is, the more space in between dashes of the link line.

And a set of parameters that are applicable to a link arrow:

• arrow (boolean, string, array) - defines whether to paint an arrowhead for the link. Can take the following values:
  • boolean to enable (default) or disable an arrowhead for link
  • "triangle" to draw a triangle instead of the arrow
  • an array of custom coordinates according to which the arrow is drawn. Each segment of the arrow is defined as [[x, y], ...] or ["x, y", ...]
• $arrowCss (string, function) - CSS class name or a template function to apply a class name to the link arrow
• arrowSize (string, number) - defines the size of the link arrow. It is 6px by default
• backgroundColor (string) - defines color for the link arrow (color name or HEX code)
• fillOpacity (string, number) - opacity of the arrow fill. Ranges from 0.0 to 1 or percentage from "0%" to "100%".

Nuances when building a link path

To avoid conflicts when defining link path via the dedicated fields, investigate the following:

• if the line field is provided, Diagram will draw a link according to the array values
• if from and to are provided and line is not, Diagram will build a path according to the provided values
• if mode is defined while from, to, and line are not, Diagram will build a link according to specified mode. In this case the link is guided from center to center
• if line is provided, but either of from/to is missing, the link will not follow its source/target block during drag-n-drop
• if the autoPlace() method is called, links are build according to their mode or mode defined in the linkItem (from, to, and line fields get deleted). In this case links are guided from center to center.

Back to top