Element: <oj-diagram>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojDiagram<K1, K2, D1 extends ojDiagram.Node<K1>|any, D2 extends ojDiagram.Link<K2, K1>|any>

QuickNav

Attributes


Context Objects

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.



PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 7.1.0
Since:
  • 1.1.0
Module:
  • ojdiagram

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojDiagram} from "ojs/ojdiagram";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdiagram";
Generic Parameters
ParameterDescription
K1Type of key of the nodeData dataprovider
K2Type of key of the linkData dataprovider
D1Type of data from the nodeData dataprovider
D2Type of data from the linkData dataprovider

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


JET Diagram

Diagrams are used to display a set of nodes and the links between them. The node positions and link paths are specified by an application-provided layout function (see JET Diagram Layout).


<oj-diagram
   layout = '{{layoutFunc}}'
   data = '{{dataSource}}'>
</oj-diagram>

JET Diagram Layout

In order to create JET Diagram component, applications are required to provide a layout callback function for positioning nodes and links. The component does not deliver a default layout. However there is a set of demo layouts that are delivered with the Cookbook application. The demo layouts can be reused by the application, but in most cases we expect that the application will want to create their own layout. The layout code must conform to the pluggable layout contract. See oj.ojDiagram#layout for additional information on layout API.

In the case when the node positions are known in advance or derived from an external layout engine, the layout can be generated using layout helper utility.

Accessibility

The application is responsible for populating the shortDesc value in the component properties object with meaningful descriptors when the component does not provide a default descriptor. Since component terminology for keyboard and touch shortcuts can conflict with those of the application, it is the application's responsibility to provide these shortcuts, possibly via a help popup.

Touch End User Information

Target Gesture Action
Node or Link Tap Select when selectionMode is enabled.
Press & Hold Display tooltip.
Display context menu on release.

Keyboard End User Information

Key Action
Tab Move focus to next element.
Shift + Tab Move focus to previous element.
+ Zoom in one level.
- Zoom out one level.
0 (zero) Zoom to fit.
Ctrl + Alt + 0 (zero) Zoom and center.
PageUp or PageDown Pan up / down.
Shift + PageUp or PageDown Pan left/right (RTL: Pan right/left).
LeftArrow or RightArrow When focus is on a node, move focus and selection to nearest node left/right.
UpArrow or DownArrow When focus is on a node, move focus and selection to nearest node up/down.
Ctrl + Shift + Space Open/Close an active container node
[ Move focus and selection to nearest node down in the container hierarchy
] Move focus and selection to nearest node up in the container hierarchy
Alt + < or Alt + > Move focus from the node to a link.
UpArrow or DownArrow When focus is on a link, navigate between links clockwise or counter clockwise.
LeftArrow or RightArrow When focus is on a link, move focus from a link to a start or end node.
Ctrl + Space Select focused node / link.
Ctrl + Space Multi-select node / link with focus.
Shift + <node or link navigation shortcut> Move focus and multi-select a node or a link.
Ctrl + <node or link navigation shortcut> Move focus to a node or a link but do not select.

Performance

Animation

Animation should only be enabled for visualizations of small to medium data sets. Alternate visualizations should be considered if identifying data changes is important, since all nodes will generally move and resize on any data change.

Data Set Size

Applications should avoid setting very large data densities on this element. Applications can aggregate small nodes to reduce the displayed data set size.

Styling

Use the highest level property available. For example, consider setting styling properties on styleDefaults.nodeDefaults or styleDefaults.linkDefaults, instead of styling properties on the individual nodes and links. The diagram can take advantage of these higher level properties to apply the style properties on containers, saving expensive DOM calls.

Tracking Resize

By default, the element will track resizes and render at the new size. This functionality adds a small overhead to the initial render for simple elements like gauges or spark charts, which become noticable when using large numbers of these simple elements. To disable resize tracking, set trackResize to off. The application can manually request a re-render at any time by calling the refresh function.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the component must be refresh()ed.

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

linkTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The linkTemplate slot is used to specify the template for creating each diagram link. The slot must be a <template> element.

When the template is executed for each item, it will have access to the diagram's binding context and the following properties:

  • $current - an object that contains information for the current item
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

The content of the template should only be one <oj-diagram-link> element. See the oj-diagram-link doc for more details.

Properties of $current:
Name Type Description
componentElement Element The <oj-diagram> custom element.
data Object The data object for the current link.
index number The zero-based index of the current link.
key any The key of the current link.

nodeContentTemplate

The nodeContentTemplate slot is used to specify custom node content.

This slot takes precedence over the renderer/focusRenderer/hoverRenderer/selectionRenderer/zoomRenderer properties if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current node. (See oj.ojDiagram.RendererContext for a list of properties available on $current)

Add data-oj-default-focus, data-oj-default-hover and/or data-oj-default-selection attributes to the template to also render the default focus, hover and/or selection effect for the data item.

Similarly, add oj-data-zoom-thresholds attribute to the template to set thresholds that will trigger a rerender when crossed. This should be a JSON array containing values between the min-zoom and max-zoom

Since:
  • 7.1.0

nodeTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The nodeTemplate slot is used to specify the template for creating each diagram node. The slot must be a <template> element.

When the template is executed for each item, it will have access to the diagram's binding context and the following properties:

  • $current - an object that contains information for the current item
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

The content of the template should only be one <oj-diagram-node> element. See the oj-diagram-node doc for more details.

Properties of $current:
Name Type Description
componentElement Element The <oj-diagram> custom element.
data Object The data object for the current node.
index number The zero-based index of the current node.
key any The key of the current node.
parentData array An array of data for the leaf and its parents. Eg: parentData[0] is the outermost parent and parentData[1] is the second outermost parent of the leaf.
parentKey any The key of the parent item. The parent key is null for root nodes.

tooltipTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The tooltipTemplate slot is used to specify custom tooltip content. This slot takes precedence over the tooltip.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current node or link. (See oj.ojDiagram.TooltipContext for a list of properties available on $current)

Attributes

animation-on-data-change :"auto"|"none"

Specifies the animation that is applied on data changes.
Supported Values:
Value
"auto"
"none"
Default Value:
  • "none"
Names
Item Name
Property animationOnDataChange
Property change event animationOnDataChangeChanged
Property change listener attribute (must be of type function) on-animation-on-data-change-changed

animation-on-display :"auto"|"none"

Specifies the animation that is shown on initial display.
Supported Values:
Value
"auto"
"none"
Default Value:
  • "none"
Names
Item Name
Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function) on-animation-on-display-changed

as :string

An alias for the $current context variable when referenced inside nodeTemplate or linkTemplate when using a DataProvider.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.
Default Value:
  • ""
Names
Item Name
Property as
Property change event asChanged
Property change listener attribute (must be of type function) on-as-changed

data :Object

The data source for the Diagram element. See oj.DiagramDataSource
Deprecated:
Since Description
6.0.0 Use nodeData and linkData instead.
Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function) on-data-changed

dnd :Object

Provides support for HTML5 Drag and Drop events. Please refer to third party documentation on HTML5 Drag and Drop to learn how to use it.
Names
Item Name
Property dnd
Property change event dndChanged
Property change listener attribute (must be of type function) on-dnd-changed

dnd.drag :Object

An object that describes drag functionality.
Names
Item Name
Property dnd.drag

dnd.drag.nodes :Object

If this object is specified, the diagram will initiate drag operation when the user drags on diagram nodes.
Names
Item Name
Property dnd.drag.nodes

dnd.drag.nodes.data-types :string|Array.<string>

The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. For example, if selected employee data items are being dragged, dataTypes could be "application/employees+json". Drop targets can examine the data types and decide whether to accept the data. For each type in the array, dataTransfer.setData will be called with the specified type and the data. The data is an array of the dataContexts of the selected data items. The dataContext is the JSON version of the dataContext that we use for "tooltip" option, excluding componentElement and parentElement. This property is required unless the application calls setData itself in a dragStart callback function.
Default Value:
  • null
Names
Item Name
Property dnd.drag.nodes.dataTypes

dnd.drag.nodes.drag :function(Event)

An optional callback function that receives the "drag" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.nodes.drag

dnd.drag.nodes.drag-end :function(Event)

An optional callback function that receives the "dragend" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.nodes.dragEnd

dnd.drag.nodes.drag-start :((event: Event, context: {nodes: ojDiagram.DndNodeContext<K1,D1>[]}) => void)

An optional callback function that receives the "dragstart" event and context information as arguments. The context information is as follows:
  • nodes {Array.(object)}: An array of data contexts of the dragged data nodes.
This function can set its own data and drag image as needed. When this function is called, event.dataTransfer is already populated with the default data and drag image.
Default Value:
  • null
Names
Item Name
Property dnd.drag.nodes.dragStart

dnd.drag.ports :Object

If this object is specified, the diagram will initiate link creation when the user starts dragging from a port.
Names
Item Name
Property dnd.drag.ports

dnd.drag.ports.data-types :string|Array.<string>

The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. and parentElement. This property is required unless the application calls setData itself in a dragStart callback function.
Default Value:
  • null
Names
Item Name
Property dnd.drag.ports.dataTypes

dnd.drag.ports.drag :function(Event)

An optional callback function that receives the "drag" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.ports.drag

dnd.drag.ports.drag-end :function(Event)

An optional callback function that receives the "dragend" event as argument.
Default Value:
  • null
Names
Item Name
Property dnd.drag.ports.dragEnd

dnd.drag.ports.drag-start :((event: Event, context: {ports: {portElement: Element, dataContext: ojDiagram.NodeItemContext<K1,D1>}}) => void)

An optional callback function that receives the "dragstart" event and context information as arguments. The context information is as follows:
  • ports {object}: An object with the following properties:
    • portElement : DOM element recognized as a port that received drag event.
    • dataContext : The dataContext object of the link start node
Default Value:
  • null
Names
Item Name
Property dnd.drag.ports.dragStart

dnd.drag.ports.link-style :((context: {portElement: Element, dataContext: ojDiagram.NodeItemContext<K1,D1>}) => ({svgStyle?: CSSStyleDeclaration, svgClassName?: string} | null))

An optional callback function for customizing link feedback based on a starting node and a port. If the function is not specified the link feedback will use default link styles. The function will take a single parameter - a context object with the following properties:
  • portElement DOM element recognized as a port that received drag event.
  • dataContext The dataContext object of the link start node.
The function should return one of the following:
  • an object with the following properties:
    • svgStyle : Inline style object to be applied on the link feedback
    • svgClassName : A name of a style class to be applied on the link
  • null or undefined : the default link styles will be used for the link feedback
Default Value:
  • null
Names
Item Name
Property dnd.drag.ports.linkStyle

dnd.drag.ports.selector :string

A string, containing a selector expression, that will be used to identify the descendant DOM element in a diagram node that can be used for link creation. This property is requred.
Default Value:
  • null
Names
Item Name
Property dnd.drag.ports.selector

dnd.drop :Object

An object that describes drop functionality.
Names
Item Name
Property dnd.drop

dnd.drop.background :Object

Allows dropping on the diagram background.
Names
Item Name
Property dnd.drop.background

dnd.drop.background.data-types :string|Array.<string>

An array of MIME data types the Diagram background can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.background.dataTypes

dnd.drop.background.drag-enter :((event: Event, context: {x: number, y: number}) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.background.dragEnter

dnd.drop.background.drag-leave :((event: Event, context: {x: number, y: number}) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content.
Default Value:
  • null
Names
Item Name
Property dnd.drop.background.dragLeave

dnd.drop.background.drag-over :((event: Event, context: {x: number, y: number}) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.background.dragOver

dnd.drop.background.drop :((event: Event, context: {x: number, y: number}) => void)

A callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.background.drop
Allows dropping on diagram links.
Names
Item Name
Property dnd.drop.links

dnd.drop.links.data-types :string|Array.<string>

An array of MIME data types the Diagram links can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.links.dataTypes

dnd.drop.links.drag-enter :((event: Event, context: {x: number, y: number, linkContext: ojDiagram.LinkItemContext<K1,K2,D2> | ojDiagram.PromotedLinkItemContext<K1,K2,D2>}) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • linkContext {Object}: the JSON version of the data context for the target link.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.links.dragEnter

dnd.drop.links.drag-leave :((event: Event, context: {x: number, y: number, linkContext: ojDiagram.LinkItemContext<K1,K2,D2> | ojDiagram.PromotedLinkItemContext<K1,K2,D2>}) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • linkContext {Object}: the JSON version of the data context for the target link.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content.
Default Value:
  • null
Names
Item Name
Property dnd.drop.links.dragLeave

dnd.drop.links.drag-over :((event: Event, context: {x: number, y: number, linkContext: ojDiagram.LinkItemContext<K1,K2,D2> | ojDiagram.PromotedLinkItemContext<K1,K2,D2>}) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • linkContext {Object}: the JSON version of the data context for the target link.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.links.dragOver

dnd.drop.links.drop :((event: Event, context: {x: number, y: number, linkContext: ojDiagram.LinkItemContext<K1,K2,D2> | ojDiagram.PromotedLinkItemContext<K1,K2,D2>}) => void)

A callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • linkContext {Object}: the JSON version of the data context for the target link.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.links.drop

dnd.drop.nodes :Object

Allows dropping on diagram nodes.
Names
Item Name
Property dnd.drop.nodes

dnd.drop.nodes.data-types :string|Array.<string>

An array of MIME data types the Diagram nodes can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.nodes.dataTypes

dnd.drop.nodes.drag-enter :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, nodeContext: ojDiagram.NodeItemContext<K1,D1>}) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • nodeContext {Object}: The JSON version of the data context for the target node.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.nodes.dragEnter

dnd.drop.nodes.drag-leave :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, nodeContext: ojDiagram.NodeItemContext<K1,D1>}) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • nodeContext {Object}: The JSON version of the data context for the target node.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content.
Default Value:
  • null
Names
Item Name
Property dnd.drop.nodes.dragLeave

dnd.drop.nodes.drag-over :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, nodeContext: ojDiagram.NodeItemContext<K1,D1>}) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • nodeContext {Object}: The JSON version of the data context for the target node.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.nodes.dragOver

dnd.drop.nodes.drop :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, nodeContext: ojDiagram.NodeItemContext<K1,D1>}) => void)

A callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • nodeContext {Object}: The JSON version of the data context for the target node.
Note: When the dropped items are originated from Diagram, the x, y coordinates represent the upper left corner of the dropped content. This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.nodes.drop

dnd.drop.ports :Object

Allows dropping a link end on a port.
Names
Item Name
Property dnd.drop.ports

dnd.drop.ports.data-types :string|Array.<string>

An array of MIME data types the Diagram ports can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
Default Value:
  • null
Names
Item Name
Property dnd.drop.ports.dataTypes

dnd.drop.ports.drag-enter :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, dataContext: ojDiagram.NodeItemContext<K1,D1>, portElement: Element}) => void)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • dataContext {Object}: the JSON version of the data context for the link end node.
  • portElement {Element}: DOM element that represents a port that received drop event.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.ports.dragEnter

dnd.drop.ports.drag-leave :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, dataContext: ojDiagram.NodeItemContext<K1,D1>, portElement: Element}) => void)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • dataContext {Object}: the JSON version of the data context for the link end node.
  • portElement {Element}: DOM element that represents a port that received drop event.
Default Value:
  • null
Names
Item Name
Property dnd.drop.ports.dragLeave

dnd.drop.ports.drag-over :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, dataContext: ojDiagram.NodeItemContext<K1,D1>, portElement: Element}) => void)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • dataContext {Object}: the JSON version of the data context for the link end node.
  • portElement {Element}: DOM element that represents a port that received drop event.
This function should call event.preventDefault() to indicate the dragged data can be accepted. Otherwise, dataTypes will be matched against the drag data types to determine if the data is acceptable.
Default Value:
  • null
Names
Item Name
Property dnd.drop.ports.dragOver

dnd.drop.ports.drop :((event: Event, context: {x: number, y: number, nodeX: number, nodeY: number, dataContext: ojDiagram.NodeItemContext<K1,D1>, portElement: Element}) => void)

A callback function that receives the "drop" event and context information as arguments. The context information is as follows:
  • x {number}: x-coordinate value of the drop in the component coordinate system.
  • y {number}: y-coordinate value of the drop in the component coordinate system.
  • nodeX {number}: x-coordinate value of the drop in the target node coordinate system.
  • nodeY {number}: y-coordinate value of the drop in the target node coordinate system.
  • dataContext {Object}: the JSON version of the data context for the link end node.
  • portElement {Element}: DOM element that represents a port that received drop event.
This function should call event.preventDefault() to indicate the dragged data can be accepted.
Default Value:
  • null
Names
Item Name
Property dnd.drop.ports.drop

dnd.drop.ports.selector :string

A string, containing a selector expression, that will be used to identify the descendant DOM element in a diagram node that can be used for link creation. This property is requred.
Default Value:
  • null
Names
Item Name
Property dnd.drop.ports.selector

expanded :oj.KeySet<K1>

Specifies the key set containing the ids of diagram nodes that should be expanded on initial render. Use the KeySetImpl class to specify nodes to expand. Use the AllKeySetImpl class to expand all nodes.
Default Value:
  • new KeySetImpl()
Supports writeback:
  • true
Names
Item Name
Property expanded
Property change event expandedChanged
Property change listener attribute (must be of type function) on-expanded-changed

focus-renderer :((context: ojDiagram.RendererContext<K1,D1>) => {insert: SVGElement}|void)|null

An optional callback function to update the node in response to changes in keyboard focus state. The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as content of a Diagram node.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property focusRenderer
Property change event focusRendererChanged
Property change listener attribute (must be of type function) on-focus-renderer-changed

hidden-categories :Array.<string>

An array of category strings used for category filtering. Diagram nodes and links with a category in hiddenCategories will be filtered.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function) on-hidden-categories-changed

highlight-match :"any"|"all"

The matching condition for the highlightedCategories option. By default, highlightMatch is 'all' and only items whose categories match all of the values specified in the highlightedCategories array will be highlighted. If highlightMatch is 'any', then items that match at least one of the highlightedCategories values will be highlighted.
Supported Values:
Value
"all"
"any"
Default Value:
  • "all"
Names
Item Name
Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function) on-highlight-match-changed

highlighted-categories :Array.<string>

An array of category strings used for category highlighting. Diagram nodes and links with a category in highlightedCategories will be highlighted.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function) on-highlighted-categories-changed

hover-behavior :"dim"|"none"

Defines the behavior applied when hovering over diagram nodes and links.
Supported Values:
Value
"dim"
"none"
Default Value:
  • "none"
Names
Item Name
Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function) on-hover-behavior-changed

hover-renderer :((context: ojDiagram.RendererContext<K1,D1>) => {insert: SVGElement}|void)|null

An optional callback function to update the node in response to changes in hover state. The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as content of a Diagram node.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property hoverRenderer
Property change event hoverRendererChanged
Property change listener attribute (must be of type function) on-hover-renderer-changed

layout :((context: DvtDiagramLayoutContext<K1, K2, D1, D2>) => void)

A custom JavaScript client layout method - a custom code developed by a customer used to position Diagram nodes and links. The layout code must conform to the pluggable layout contract.
See:
Names
Item Name
Property layout
Property change event layoutChanged
Property change listener attribute (must be of type function) on-layout-changed

link-data :(oj.DataProvider.<K2, D2>|null)

The oj.DataProvider for the diagram links. It should provide rows where each row corresponds to a single diagram link. The row key will be used as the id for diagram links. Note that when using this attribute, a template for the linkTemplate slot should be provided. The oj.DataProvider can either have an arbitrary data shape, in which case an element must be specified in the linkTemplate slot or it can have oj.ojDiagram.Linkoj.ojDiagram#Link as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property linkData
Property change event linkDataChanged
Property change listener attribute (must be of type function) on-link-data-changed

link-highlight-mode :"linkAndNodes"|"link"

Defines link highlighting mode.
Supported Values:
Value
"link"
"linkAndNodes"
Default Value:
  • "link"
Names
Item Name
Property linkHighlightMode
Property change event linkHighlightModeChanged
Property change listener attribute (must be of type function) on-link-highlight-mode-changed

link-properties :(null|function(Object): Object)

Optional callback that provides a way to customize an appearance of the specific link, the function maps link data into link styles. The function takes a data object for the link provided by the diagram. The following properties are supported on the return object:
  • labelStyle {Object}: The CSS style object defining the style of the link label. The CSS max-width property can be used to truncate labels.
  • color {string}: Link color.
  • svgStyle {Object}: The SVG CSS style object defining link style. The style class and style object will be applied directly on the link and override any other styling specified through the properties.
  • svgClassName {string}: The SVG CSS style class defining link style. The style class and style object will be applied directly on the link and override any other styling specified through the properties.
  • width {number}: Link width in pixels.
  • startConnectorType {string}: Specifies the type of start connector on the link.
    Supported values are "arrowOpen", "arrow", "arrowConcave", "circle", "rectangle", "rectangleRounded", "none".
    Default value is "none".
  • endConnectorType {string}: Specifies the type of end connector on the link.
    Supported values are "arrowOpen", "arrow", "arrowConcave", "circle", "rectangle", "rectangleRounded", "none".
    Default value is "none".
Deprecated:
Since Description
6.0.0 See nodeData and linkData usage.
Default Value:
  • null
Names
Item Name
Property linkProperties
Property change event linkPropertiesChanged
Property change listener attribute (must be of type function) on-link-properties-changed

max-zoom :number

Specifies the maximum zoom level for this diagram. This can be any number greater than zero which indicates the maximum point to which Diagram objects can be scaled. A value of 2.0 implies that the Diagram can be zoomed in until Nodes appear at twice their natural size. By default, maxZoom is 1.0.
Default Value:
  • 1.0
Names
Item Name
Property maxZoom
Property change event maxZoomChanged
Property change listener attribute (must be of type function) on-max-zoom-changed

min-zoom :number

Specifies the minimum zoom level for this diagram. If minZoom is greater than zero, it indicates the minimum point to which Diagram objects can be scaled. A value of 0.1 implies that the Diagram can be zoomed out until Nodes appear at one-tenth their natural size. By default, minZoom is set to zoom-to-fit level based on the currently visible Nodes and Links.
Default Value:
  • 0.0
Names
Item Name
Property minZoom
Property change event minZoomChanged
Property change listener attribute (must be of type function) on-min-zoom-changed

node-data :(oj.DataProvider.<K1, D1>|null)

The oj.DataProvider for the diagram nodes. It should provide rows where each row corresponds to a single diagram node. The row key will be used as the id for diagram nodes. Note that when using this attribute, a template for the nodeTemplate slot should be provided. The oj.DataProvider can either have an arbitrary data shape, in which case an element must be specified in the nodeTemplate slot or it can have oj.ojDiagram.Nodeoj.ojDiagram#Node as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property nodeData
Property change event nodeDataChanged
Property change listener attribute (must be of type function) on-node-data-changed

node-highlight-mode :"nodeAndIncomingLinks"|"nodeAndOutgoingLinks"|"nodeAndLinks"|"node"

Defines node highlighting mode.
Supported Values:
Value
"node"
"nodeAndIncomingLinks"
"nodeAndLinks"
"nodeAndOutgoingLinks"
Default Value:
  • "node"
Names
Item Name
Property nodeHighlightMode
Property change event nodeHighlightModeChanged
Property change listener attribute (must be of type function) on-node-highlight-mode-changed

node-properties :(null|function(Object): Object)

Optional callback that provides a way to customize an appearance of the specific node, the function maps node data into node styles. The function takes a data object for the node provided by the diagram. The following properties are supported on the return object:
  • showDisclosure {string}: Determines when to display the expand/collapse button.
    Supported values are "on", "off".
    Default value is "on".
  • labelStyle {Object}: The CSS style object defining the style of the node label.
  • icon {Object}: Object specfiying an icon to be used as a graphical element for the node. Its properties are:
    • borderColor {string}: The border color of the icon.
    • borderRadius {string}: The border radius of the icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
    • borderWidth {number}: The border width in pixels.
    • color {string}: The fill color of the icon.
    • pattern {string}: The fill pattern of the icon.
      Supported values are "smallChecker", "smallCrosshatch", "smallDiagonalLeft", "smallDiagonalRight", "smallDiamond", "smallTriangle", "largeChecker", "largeCrosshatch", "largeDiagonalLeft", "largeDiagonalRight", "largeDiamond", "largeTriangle", "none".
      Default value is "none".
    • opacity {number}: The opacity of the icon.
    • shape {string}: The shape of the icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
      Supported built-in shapes:"ellipse", "square", "plus", "diamond", "triangleUp", "triangleDown", "human", "rectangle", "star", "circle".
      Default value is "circle".
    • source {string}: The URI of the node image.
    • sourceHover {string}: The optional URI of the node hover image. If not defined, the source image will be used.
    • sourceHoverSelected {string}: The optional URI of the selected image on hover. If not defined, the sourceSelected image will be used. If the sourceSelected image is not defined, the source image will be used.
    • sourceSelected {string}: The optional URI of the selected image. If not defined, the source image will be used.
    • width {number}: The width of the icon.
    • height {number}: The height of the icon.
    • svgStyle {Object}: The CSS style object defining the style of the icon. The style class and style object will be applied directly on the icon and override any other styling specified through the properties.
    • svgClassName {string}: The CSS style class defining the style of the icon. The style class and style object will be applied directly on the icon and override any other styling specified through the properties.
  • overview {Object}: Object specfiying the overview node shape. Its properties are:
    • icon {Object}: Object specifying an icon for the node in the overview window. The width and height of the overview node is determined from the rendered node in the diagram. The following properties can be used to customize the overview node:
      • shape {string}: The shape of the icon in the overview window. Can take one of the following values for the shape name or the svg path commands for a custom shape.
        Supported built-in shapes:"inherit", "ellipse", "square", "plus", "diamond", "triangleUp", "triangleDown", "human", "rectangle", "star", "circle".
        The default value is always "inherit", but that means different things for custom nodes and default nodes. When "inherit" value is specified for a default node, the shape is determined from the node in the diagram. When "inherit" value is specified for a custom node, "rectangle" shape will be used.
        This property doesn't apply at all to containers (custom or default).
      • svgStyle {Object}: The CSS style object defining the style of the node icon in the overview.
      • svgClassName {string}: The CSS style class defining the style of the node icon in the overview.
Deprecated:
Since Description
6.0.0 See nodeData and linkData usage.
Default Value:
  • null
Names
Item Name
Property nodeProperties
Property change event nodePropertiesChanged
Property change listener attribute (must be of type function) on-node-properties-changed

overview :Object

An object, used to define a diagram overview. If not specified, no overview will be shown.
Names
Item Name
Property overview
Property change event overviewChanged
Property change listener attribute (must be of type function) on-overview-changed

overview.halign :"start"|"end"|"center"

Horizontal alignment for diagram overview window
Supported Values:
Value
"center"
"end"
"start"
Default Value:
  • "end"
Names
Item Name
Property overview.halign

overview.height :number

Overview window height. The height can't exceed the diagram height. If the specified height exceeds the height of the diagram itself, the height of the diagram will be used instead.
Default Value:
  • 100
Names
Item Name
Property overview.height

overview.rendered :"on"|"off"

Specifies whether the overview scrollbar is rendered.

See the overview attribute for usage examples.
Supported Values:
Value
"off"
"on"
Default Value:
  • "off"
Names
Item Name
Property overview.rendered

overview.valign :"top"|"bottom"|"middle"

Vertical alignment for diagram overview window
Supported Values:
Value
"bottom"
"middle"
"top"
Default Value:
  • "bottom"
Names
Item Name
Property overview.valign

overview.width :number

Overview window width. The width can't exceed the diagram width. If the specified width exceeds the width of the diagram itself, the width of the diagram will be used instead.
Default Value:
  • 200
Names
Item Name
Property overview.width

pan-direction :"x"|"y"|"auto"

Specifies if panning allowed in horizontal and vertical directions.
Supported Values:
Value
"auto"
"x"
"y"
Default Value:
  • "auto"
Names
Item Name
Property panDirection
Property change event panDirectionChanged
Property change listener attribute (must be of type function) on-pan-direction-changed

panning :"auto"|"none"

Specifies whether panning is allowed in Diagram.
Supported Values:
Value
"auto"
"none"
Default Value:
  • "none"
Names
Item Name
Property panning
Property change event panningChanged
Property change listener attribute (must be of type function) on-panning-changed

promoted-link-behavior :"none"|"full"|"lazy"

Defines promoted link behavior for the component.
If the value is set to none, the diagram will not retrieve additional data to resolve promoted links and will not display promoted links.
If the value is set to lazy, the diagram will retrieve additional data to resolve promoted links if the data is already available and will display available promoted links. The component will not retrieve additional data if the data is not available yet.
If the value is set to full, the diagram will retrieve additional data to resolve all promoted links and will display promoted links.
Supported Values:
Value
"full"
"lazy"
"none"
Default Value:
  • "lazy"
Names
Item Name
Property promotedLinkBehavior
Property change event promotedLinkBehaviorChanged
Property change listener attribute (must be of type function) on-promoted-link-behavior-changed

renderer :((context: ojDiagram.RendererContext<K1,D1>) => ({insert: SVGElement}))

A callback function - a custom renderer - that will be used for initial node rendering. The function should return an Object with the following property:
  • insert: SVGElement - An SVG element, which will be used as content of a Diagram node.
Default Value:
  • null
Names
Item Name
Property renderer
Property change event rendererChanged
Property change listener attribute (must be of type function) on-renderer-changed

selection :Array<K1|K2>

An array containing the ids of the selected nodes and links.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function) on-selection-changed

selection-mode :"single"|"multiple"|"none"

Specifies the selection mode.
Supported Values:
Value
"multiple"
"none"
"single"
Default Value:
  • "none"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function) on-selection-mode-changed

selection-renderer :((context: ojDiagram.RendererContext<K1,D1>) => {insert: SVGElement}|void)|null

An optional callback function to update the node in response to changes in selection state. The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as content of a Diagram node.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property selectionRenderer
Property change event selectionRendererChanged
Property change listener attribute (must be of type function) on-selection-renderer-changed

style-defaults :Object

An object defining the style defaults for this diagram.
Names
Item Name
Property styleDefaults
Property change event styleDefaultsChanged
Property change listener attribute (must be of type function) on-style-defaults-changed

style-defaults.animation-duration :number

We recommend using the component CSS classes to set component wide styling. This API should be used only for styling a specific instance of the component. The default values come from the CSS classes and varies based on theme. The duration of the animations in milliseconds.
Names
Item Name
Property styleDefaults.animationDuration

style-defaults.hover-behavior-delay :number

Specifies initial hover delay in ms for highlighting data items.
Default Value:
  • 200
Names
Item Name
Property styleDefaults.hoverBehaviorDelay

style-defaults.link-defaults :Object

Default link styles
Names
Item Name
Property styleDefaults.linkDefaults

style-defaults.link-defaults.color :string

Default link color. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.linkDefaults.color

style-defaults.link-defaults.end-connector-type :"arrowOpen"|"arrow"|"arrowConcave"|"circle"|"rectangle"|"rectangleRounded"|"none"

Specifies the type of end connector on the link.
Supported Values:
Value
"arrow"
"arrowConcave"
"arrowOpen"
"circle"
"none"
"rectangle"
"rectangleRounded"
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.linkDefaults.endConnectorType

style-defaults.link-defaults.label-style :CSSStyleDeclaration

The CSS style object defining the style of the link label. Supports color, fontFamily, fontSize, fontStyle, fontWeight, textDecoration, cursor, maxWidth, backgroundColor, borderColor, borderRadius, and borderWidth properties.
Names
Item Name
Property styleDefaults.linkDefaults.labelStyle

style-defaults.link-defaults.start-connector-type :"arrowOpen"|"arrow"|"arrowConcave"|"circle"|"rectangle"|"rectangleRounded"|"none"

Specifies the type of start connector on the link.
Supported Values:
Value
"arrow"
"arrowConcave"
"arrowOpen"
"circle"
"none"
"rectangle"
"rectangleRounded"
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.linkDefaults.startConnectorType

style-defaults.link-defaults.svg-class-name :string

The default SVG CSS style class to apply to the link.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.linkDefaults.svgClassName

style-defaults.link-defaults.svg-style :CSSStyleDeclaration

The default style object represents the SVG CSS style of the link. User defined custom SVG CSS Styles will be applied directly on the link.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.linkDefaults.svgStyle

style-defaults.link-defaults.width :number

Default link width in pixels.
Default Value:
  • 1.0
Names
Item Name
Property styleDefaults.linkDefaults.width

style-defaults.node-defaults :Object

Default node styles
Names
Item Name
Property styleDefaults.nodeDefaults

style-defaults.node-defaults.icon :Object

Default style for the node icon.
Names
Item Name
Property styleDefaults.nodeDefaults.icon

style-defaults.node-defaults.icon.border-color :string

Default border color of the icon.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.borderColor

style-defaults.node-defaults.icon.border-radius :string

The default border radius of the icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.borderRadius

style-defaults.node-defaults.icon.border-width :number

Default border width of the icon in pixels.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.borderWidth

style-defaults.node-defaults.icon.color :string

Default color of the icon.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.color

style-defaults.node-defaults.icon.height :number

Default icon height.
Default Value:
  • 10
Names
Item Name
Property styleDefaults.nodeDefaults.icon.height

style-defaults.node-defaults.icon.pattern :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"none"

Default fill pattern of the icon.
Supported Values:
Value
"largeChecker"
"largeCrosshatch"
"largeDiagonalLeft"
"largeDiagonalRight"
"largeDiamond"
"largeTriangle"
"none"
"smallChecker"
"smallCrosshatch"
"smallDiagonalLeft"
"smallDiagonalRight"
"smallDiamond"
"smallTriangle"
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.nodeDefaults.icon.pattern

style-defaults.node-defaults.icon.shape :"circle"|"diamond"|"ellipse"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|string

Default shape of the icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
Default Value:
  • "circle"
Names
Item Name
Property styleDefaults.nodeDefaults.icon.shape

style-defaults.node-defaults.icon.source :string

The URI of the node image
Names
Item Name
Property styleDefaults.nodeDefaults.icon.source

style-defaults.node-defaults.icon.source-hover :string

The optional URI of the node hover image. If not defined, the source image will be used.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.sourceHover

style-defaults.node-defaults.icon.source-hover-selected :string

The optional URI of the selected image on hover. If not defined, the sourceSelected image will be used. If the sourceSelected image is not defined, the source image will be used.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.sourceHoverSelected

style-defaults.node-defaults.icon.source-selected :string

The optional URI of the selected image. If not defined, the source image will be used.
Names
Item Name
Property styleDefaults.nodeDefaults.icon.sourceSelected

style-defaults.node-defaults.icon.svg-class-name :string

The SVG CSS style class to apply to the node icon.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.nodeDefaults.icon.svgClassName

style-defaults.node-defaults.icon.svg-style :CSSStyleDeclaration

The default SVG CSS style object defining the style of the icon.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.nodeDefaults.icon.svgStyle

style-defaults.node-defaults.icon.width :number

Default icon width.
Default Value:
  • 10
Names
Item Name
Property styleDefaults.nodeDefaults.icon.width

style-defaults.node-defaults.label-style :CSSStyleDeclaration

The CSS style object defining the style of the node label. Supports color, fontFamily, fontSize, fontStyle, fontWeight, textDecoration, cursor, maxWidth, backgroundColor, borderColor, borderRadius, and borderWidth properties.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.nodeDefaults.labelStyle

style-defaults.node-defaults.show-disclosure :"off"|"on"

Determines when to display the expand/collapse button.
Supported Values:
Value
"off"
"on"
Default Value:
  • "on"
Names
Item Name
Property styleDefaults.nodeDefaults.showDisclosure
Promoted link styles
Names
Item Name
Property styleDefaults.promotedLink

style-defaults.promoted-link.color :string

Default promoted link color. The default value varies based on theme.
Names
Item Name
Property styleDefaults.promotedLink.color

style-defaults.promoted-link.end-connector-type :"arrowOpen"|"arrow"|"arrowConcave"|"circle"|"rectangle"|"rectangleRounded"|"none"

Specifies the type of end connector on the promoted link.
Supported Values:
Value
"arrow"
"arrowConcave"
"arrowOpen"
"circle"
"none"
"rectangle"
"rectangleRounded"
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.promotedLink.endConnectorType

style-defaults.promoted-link.start-connector-type :"arrowOpen"|"arrow"|"arrowConcave"|"circle"|"rectangle"|"rectangleRounded"|"none"

Specifies the type of start connector on the promoted link.
Supported Values:
Value
"arrow"
"arrowConcave"
"arrowOpen"
"circle"
"none"
"rectangle"
"rectangleRounded"
Default Value:
  • "none"
Names
Item Name
Property styleDefaults.promotedLink.startConnectorType

style-defaults.promoted-link.svg-class-name :string

The SVG CSS style class to apply to the promoted link.
Default Value:
  • ""
Names
Item Name
Property styleDefaults.promotedLink.svgClassName

style-defaults.promoted-link.svg-style :CSSStyleDeclaration

The promoted style object represents the CSS style of the link. User defined custom CSS Styles will be applied directly on the link.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.promotedLink.svgStyle

style-defaults.promoted-link.width :number

Default link width in pixels.
Default Value:
  • 1.0
Names
Item Name
Property styleDefaults.promotedLink.width

tooltip :Object

An object containing an optional callback function for tooltip customization.
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function) on-tooltip-changed

tooltip.renderer :((context: ojDiagram.TooltipContext<K1,K2,D1,D2>) => ({insert: Element|string}|{preventDefault: boolean}))

A function that returns a custom tooltip. The function takes a dataContext argument, provided by the diagram. The function should return an Object that contains only one of the two properties:
  • insert: HTMLElement | string - An HTML element, which will be appended to the tooltip, or a tooltip string.
  • preventDefault: true - Indicates that the tooltip should not be displayed. It is not necessary to return {preventDefault:false} to display tooltip, since this is a default behavior.
Default Value:
  • null
Names
Item Name
Property tooltip.renderer

touch-response :"touchStart"|"auto"

Data visualizations require a press and hold delay before triggering tooltips and rollover effects on mobile devices to avoid interfering with page panning, but these hold delays can make applications seem slower and less responsive. For a better user experience, the application can remove the touch and hold delay when data visualizations are used within a non scrolling container or if there is sufficient space outside of the visualization for panning. If touchResponse is touchStart the component will instantly trigger the touch gesture and consume the page pan events if the component does not require an internal feature that requires a touch start gesture like panning or zooming. If touchResponse is auto, the component will behave like touchStart if it determines that it is not rendered within scrolling content and if component panning is not available for those components that support the feature.
Supported Values:
Value
"auto"
"touchStart"
Default Value:
  • "auto"
Names
Item Name
Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function) on-touch-response-changed

track-resize :"on"|"off"

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.
Supported Values:
Value
"off"
"on"
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function) on-track-resize-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function) on-translations-changed

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Diagram"
Names
Item Name
Property translations.componentName

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:
  • "{0}: {1}"
Names
Item Name
Property translations.labelAndValue

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:
  • "Clear Selection"
Names
Item Name
Property translations.labelClearSelection

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:
  • "{0} of {1}"
Names
Item Name
Property translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Data Visualization"
Names
Item Name
Property translations.labelDataVisualization

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:
  • "Invalid data"
Names
Item Name
Property translations.labelInvalidData

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:
  • "No data to display"
Names
Item Name
Property translations.labelNoData

Used for the promoted link tooltip - promoted link consists a single link.

See the translations attribute for usage examples.

Default Value:
  • "{0} link"
Names
Item Name
Property translations.promotedLink

(nullable) translations.promoted-link-aria-desc :string

Used to describe promoted link type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Indirect"
Names
Item Name
Property translations.promotedLinkAriaDesc

Used for the promoted link tooltip - promoted link consists multiple links.

See the translations attribute for usage examples.

Default Value:
  • "{0} links"
Names
Item Name
Property translations.promotedLinks

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Collapsed"
Names
Item Name
Property translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Drillable"
Names
Item Name
Property translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Expanded"
Names
Item Name
Property translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Hidden"
Names
Item Name
Property translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Isolated"
Names
Item Name
Property translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Maximized"
Names
Item Name
Property translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Minimized"
Names
Item Name
Property translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Selected"
Names
Item Name
Property translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Unselected"
Names
Item Name
Property translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Visible"
Names
Item Name
Property translations.stateVisible

zoom-renderer :((context: ojDiagram.RendererContext<K1,D1>) => {insert: SVGElement}|void)|null

An optional callback function to update the node in response to changes in zoom level. The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as content of a Diagram node.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property zoomRenderer
Property change event zoomRendererChanged
Property change listener attribute (must be of type function) on-zoom-renderer-changed

zooming :"auto"|"none"

Specifies whether zooming is allowed in Diagram.
Supported Values:
Value
"auto"
"none"
Default Value:
  • "none"
Names
Item Name
Property zooming
Property change event zoomingChanged
Property change listener attribute (must be of type function) on-zooming-changed

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

Context for diagram link at a specified index.

Properties:
Name Type
index number

oj-diagram-node

Context for diagram node at a specified index.

Properties:
Name Type
index number

Events

ojBeforeCollapse

Triggered immediately before any container node in the diagram is collapsed.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
nodeId K1 the id of the collapsing object

ojBeforeExpand

Triggered immediately before any container node in the diagram is expanded.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
nodeId K1 the id of the expanding object

ojCollapse

Triggered when a node has been collapsed.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
nodeId K1 the id of the collapsed object

ojExpand

Triggered when a node has been expanded. The ui object contains one property, "nodeId", which is the id of the node that has been expanded.
Properties:

All of the event payloads listed below can be found under event.detail.

Name Type Description
nodeId K1 the id of the expanded object

Methods

getContextByNode(node) → {(oj.ojDiagram.NodeContext|null)}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Argument Description
node Element <not nullable>
The child DOM node
Returns:
The context for the DOM node, or null when none is found.
Type
(oj.ojDiagram.NodeContext|null)
Returns an object with the following properties for automation testing verification of the diagram link at the specified index.
Parameters:
Name Type Description
linkIndex number Link index
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
color string Link color
label string Link label
endConnectorType string The type of end connector on the link
endNode string The id of the end node.
selected boolean The selected state of the link
startConnectorType string The type of start connector on the link
startNode string The id of the start node.
style string Link style
tooltip string Link tooltip
width number Link width
Returns:
An object containing properties for the link at the given index, or null if none exists.
Type
Object | null

getLinkCount() → {number}

Returns number of diagram links
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
The number of links
Type
number

getNode(nodeIndex) → {Object|null}

Returns an object with the following properties for automation testing verification of the diagram node at the specified index.
Parameters:
Name Type Description
nodeIndex number Node index
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
icon Object | null The icon for the node, or null if none exists.
Properties
Name Type Description
color string The color of the icon
shape string The shape of the icon
label string Node label
selected boolean The selected state of the node
tooltip string Node tooltip
Returns:
An object containing properties for the node at the given index, or null if none exists.
Type
Object | null

getNodeCount() → {number}

Returns number of diagram nodes
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:
The number of nodes
Type
number
Returns an object with the following properties for automation testing verification of the promoted link between specified nodes.
Parameters:
Name Type Description
startNodeIndex number Start node index
endNodeIndex number End node index
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Properties:
Name Type Description
color string Link color
endConnectorType string The type of end connector on the link
endNode string The id of the end node.
selected boolean The selected state of the link
startConnectorType string The type of start connector on the link
startNode string The id of the start node.
style string Link style
tooltip string Link tooltip
width number Link width
count number Number of links it represents
Returns:
An object containing properties for the link at the given index, or null if none exists.
Type
Object | null

getProperty(property) → {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh() → {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) → {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) → {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

DndNodeContext<K1,D1>

Properties:
Name Type Description
nodeOffset Object An object with x,y properties, that reflects node offset from the upper left corner of the bounding box for the dragged content.
Properties
Name Type Description
x number node An offset from the left side of the bounding box for the dragged content.
y number An offset from the upper side of the bounding box for the dragged content.
componentElement Element The diagram element.
id any The id of the diagram object.
type string The type of the diagram object.
label string The label of the diagram object.
data Object | Array.<Object> Relevant data for the object.
itemData Object | Array.<Object> The row data object for the object. This will only be set if an oj.DataProvider is being used.
Properties:
Name Type Argument Default Description
id K1 <optional>
The id of the node. For the DataProvider case, the key for the node will be used as the id.
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 <optional>
The link color.
label string <optional>
"" Text used for the link label.
labelStyle CSSStyleDeclaration | null <optional>
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.
selectable "auto" | "off" <optional>
"auto" Specifies whether or not the link will be selectable.
shortDesc string <optional>
"" The text that displays in the link's tooltip.
svgClassName string <optional>
"" The CSS style class defining the style of the link.
svgStyle CSSStyleDeclaration <optional>
{} The CSS style object defining the style of the link.
width number <optional>
The link width in pixels.
startNode any Specifies the start node id.
endNode any Specifies the end node id.
startConnectorType "arrow" | "arrowConcave" | "arrowOpen" | "circle" | "none" | "rectangle" | "rectangleRounded" <optional>
Specifies the type of start connector on the link. Can take the name of a built-in shape.
endConnectorType "arrow" | "arrowConcave" | "arrowOpen" | "circle" | "none" | "rectangle" | "rectangleRounded" <optional>
Specifies the type of end connector on the link. Can take the name of a built-in shape.

LinkItemContext<K1,K2,D2>

Properties:
Name Type Description
componentElement Element The diagram element.
id any The id of the diagram object.
type string The type of the diagram object.
label string The label of the diagram object.
data Object | Array.<Object> Relevant data for the object.
itemData Object | Array.<Object> The row data object for the object. This will only be set if an oj.DataProvider is being used.

Node<K1>

Properties:
Name Type Argument Default Description
id K1 <optional>
The id of the node. For the DataProvider case, the key for the node will be used as the id.
categories Array.<string> <optional>
An array of category strings corresponding to this node. This allows highlighting and filtering of nodes. By default, the label is used as the node category.
icon Object <optional>
{} Specifies an icon to be used as a graphical element for the node
Properties
Name Type Argument Description
borderColor string <optional>
The border color of the icon.
borderRadius string <optional>
The border radius of the icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.
borderWidth number <optional>
The border width in pixels.
color string <optional>
The fill color of the icon.
pattern ?'largeDiagonalLeft' | 'largeDiagonalRight' | 'largeDiamond' | 'largeTriangle' | 'none' | 'mallChecker' | 'smallCrosshatch' | 'smallDiagonalLeft' | 'smallDiagonalRight' | 'smallDiamond' | 'smallTriangle' | string <optional>
The fill pattern of the icon.
opacity number <optional>
The opacity of the icon.
shape "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string <optional>
The shape of the icon. Can take the name of a built-in shape or the svg path commands for a custom shape.
source string <optional>
The URI of the node image.
sourceHover string <optional>
The optional URI of the node hover image. If not defined, the source image will be used.
sourceHoverSelected string <optional>
The optional URI of the selected image on hover. If not defined, the sourceSelected image will be used. If the sourceSelected image is not defined, the source image will be used.
sourceSelected string <optional>
The optional URI of the selected image. If not defined, the source image will be used.
width number <optional>
The width of the icon.
height number <optional>
The height of the icon.
svgStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of the icon. The style class and style object will be applied directly on the icon and override any other styling specified through the properties.
svgClassName string <optional>
The CSS style class defining the style of the icon. The style class and style object will be applied directly on the icon and override any other styling specified through the properties.
label string <optional>
'' Text used for the node label.
labelStyle CSSStyleDeclaration | null <optional>
The CSS style object defining the style of the diagram node label. The default values come from the CSS classes and varies based on theme.
overview Object <optional>
{} Specifies overview node shape.
Properties
Name Type Argument Description
icon Object <optional>
Specifies overview node shape.
Properties
Name Type Argument Description
shape ?'inherit' | 'circle' | 'diamond' | 'ellipse' | 'human' | 'plus' | 'rectangle' | 'square' | 'star' | 'triangleDown' | 'triangleUp' | string <optional>
The shape of the icon in the overview window. Can take one of the following values for the shape name or the svg path commands for a custom shape. The default value is always "inherit", but that means different things for custom nodes and default nodes. When "inherit" value is specified for a default node, the shape is determined from the node in the diagram. When "inherit" value is specified for a custom node, "rectangle" shape will be used. This property doesn't apply at all to containers (custom or default).
svgStyle CSSStyleDeclaration <optional>
The CSS style object defining the style of the node icon in the overview.
svgClassName string <optional>
The CSS style class defining the style of the node icon in the overview.
selectable "auto" | "off" <optional>
"auto" Specifies whether or not the node will be selectable.
shortDesc string <optional>
"" The text that displays in the node's tooltip.
showDisclosure "on" | "off" <optional>
Determines when to display the expand/collapse button.
descendantsConnectivity "connected" | "disjoint" | "unknown" <optional>
"unknown" Indicates whether the specified object contains links that should be discovered in order to display promoted links.

NodeContext

Properties:
Name Type Description
subId 'oj-diagram-link' | 'oj-diagram-node' The subId string identify the particular DOM node.
index number The zero based index of the diagram item.

NodeItemContext<K1,D1>

Properties:
Name Type Description
componentElement Element The diagram element.
id any The id of the diagram object.
type string The type of the diagram object.
label string The label of the diagram object.
data Object | Array.<Object> Relevant data for the object.
itemData Object | Array.<Object> The row data object for the object. This will only be set if an oj.DataProvider is being used.

PromotedLinkItemContext<K1,K2,D2>

Properties:
Name Type Description
componentElement Element The diagram element.
id any The id of the diagram object.
type string The type of the diagram object.
label string The label of the diagram object.
data Object | Array.<Object> Relevant data for the object.
itemData Object | Array.<Object> The row data object for the object. This will only be set if an oj.DataProvider is being used.

RendererContext<K1,D1>

Properties:
Name Type Description
parentElement Element A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported.
componentElement Element The diagram element.
data oj.ojDiagram.Node.<K1> The data object for the node. If oj.DataProvider is being used, this property contains template processed data.
itemData D1 The row data object for the node. This will only be set if an oj.DataProvider is being used.
content Object An object that describes child content. The object has the following properties
Properties
Name Type Description
element Element SVG group element that contains child nodes for the container.
width number Width of the child content.
height number Height of the child content.
state Object An object that reflects the current state of the data item.
Properties
Name Type Description
hovered boolean True if the node is currently hovered.
selected boolean True if the node is currently selected.
focused boolean True if the node is currently selected.
expanded boolean True if the node is expanded.
zoom number Current zoom state.
previousState Object An object that reflects the previous state of the data item.
Properties
Name Type Description
hovered boolean True if the node was previously hovered.
selected boolean True if the node was previously selected.
focused boolean True if the node was previously selected.
expanded boolean True if the node was previously expanded.
zoom number Previous zoom state.
id K1 Node id.
type string Object type = node.
renderDefaultFocus function():void Function for rendering default focus effect for the node
renderDefaultHover function():void Function for rendering default hover effect for the node
renderDefaultSelection function():void Function for rendering default selection effect for the node

TooltipContext<K1,K2,D1,D2>

Properties:
Name Type Description
parentElement Element The tooltip element. The function can directly modify or append content to this element.
componentElement Element The diagram element.
id any The id of the diagram object.
type string The type of the diagram object.
label string The label of the diagram object.
data Object | Array.<Object> Relevant data for the object.
itemData Object | Array.<Object> The row data object for the object. This will only be set if an oj.DataProvider is being used.