Element: <oj-diagram-link>

Oracle® JavaScript Extension Toolkit (JET)
11.1.0
F37999-01

Since:
  • 6.0.0
Module:
  • ojdiagram

QuickNav

Attributes


JET Diagram Link

The oj-diagram-link element is used to declare properties for diagram links and is only valid as the child of a template element for the linkTemplate slot of oj-diagram. 


<oj-diagram link-data='[[linkDataProvider]]' node-data='[[nodeDataProvider]]'>
 <template slot='linkTemplate' data-oj-as='link'>
   <oj-diagram-link  startConnectorType='[[link.data.start]]' endConnectorType='[[link.data.end]]'>
   </oj-diagram-link>
 </template>
</oj-diagram>


Usage

Signature:

interface DiagramLinkElement<K1=any, K2=any, D2=any>

Generic Parameters
ParameterDescription
K1Type of key of the nodeData dataprovider
K2Type of key of the linkData dataprovider
D2Type of data from the linkData dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import {DiagramLinkElement} from "ojs/ojdiagram";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdiagram";

For additional information visit:


Attributes

categories :Array.<string>

An array of category strings corresponding to this link. This allows highlighting and filtering of links. By default, the label is used as the link category.

color :string

The link color.

end-connector-type :"arrow"|"arrowConcave"|"arrowOpen"|"circle"|"none"|"rectangle"|"rectangleRounded"

Specifies the type of end connector on the link. Can take the name of a built-in shape.
Supported Values:
Value
arrow
arrowConcave
arrowOpen
circle
none
rectangle
rectangleRounded

end-node :any

Specifies the end node id.

label :string

Text used for the link label.
Default Value:
  • ""

label-style :Partial<CSSStyleDeclaration>|null

The CSS style object defining the style of the diagram link label. The default values come from the CSS classes and varies based on theme. The following style properties are supported: backgroundColor, borderColor, borderWidth, borderRadius, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration.

selectable :"auto"|"off"

Specifies whether or not the link will be selectable.
Supported Values:
Value
auto
off
Default Value:
  • "auto"

short-desc :(string | ((context: ojDiagram.LinkShortDescContext<K1,K2,D2>) => string))

The text that displays in the link's tooltip. Will be lazily created if a function is used.
Default Value:
  • ""

start-connector-type :"arrow"|"arrowConcave"|"arrowOpen"|"circle"|"none"|"rectangle"|"rectangleRounded"

Specifies the type of start connector on the link. Can take the name of a built-in shape.
Supported Values:
Value
arrow
arrowConcave
arrowOpen
circle
none
rectangle
rectangleRounded

start-node :any

Specifies the start node id.

svg-class-name :string

The CSS style class defining the style of the link.
Default Value:
  • ""

svg-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the link. Only SVG CSS style properties are supported.
Default Value:
  • {}

width :number

The link width in pixels.