Element: <oj-diagram>

Slots

JET elements can have up to two types of child content:

• Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
• Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

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 and demos 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.

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

Attributes

animation-on-data-change :string

Specifies the animation that is applied on data changes.

Supported Values:

Name	Type
"auto"	string
"none"	string

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

Examples

Initialize the diagram with the animation-on-data-change attribute specified:

<oj-diagram animation-on-data-change='auto'></oj-diagram>

Get or set the animationOnDataChange property after initialization:

// getter
var value = myDiagram.animationOnDataChange;

// setter
myDiagram.animationOnDataChange="auto";

animation-on-display :string

Specifies the animation that is shown on initial display.

Supported Values:

Name	Type
"auto"	string
"none"	string

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

Examples

Initialize the diagram with the animation-on-display attribute specified:

<oj-diagram animation-on-display='auto'></oj-diagram>

Get or set the animationOnDisplay property after initialization:

// getter
var value = myDiagram.animationOnDisplay;

// setter
myDiagram.animationOnDisplay="auto";

data :Object

The data source for the Diagram element. See oj.DiagramDataSource

Default Value:

• null

Names

Item	Name
Property	data
Property change event	dataChanged
Property change listener attribute (must be of type function)	on-data-changed

Examples

Initialize the diagram with the data attribute specified:

<oj-diagram data='{{myDataSource}}'></oj-diagram>

Get or set the data property after initialization:

// getter
var dataValue = myDiagram.data;

// setter
myDiagram.data = myDataSource;

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

Examples

Initialize the diagram with the dnd attribute specified:

<oj-diagram dnd.drop.background.data-types = '["text/shape"]' dnd.drop.background.drop = '[[onDropFunc]]'></oj-diagram>

<oj-diagram dnd='[[dndObject]]'></oj-diagram>

Get or set the dnd property after initialization:

// Get one
var value = myDiagram.dnd.drag.nodes.dataTypes;

// Get all
var values = myDiagram.dnd;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myDiagram.setProperty('dnd.drop.nodes.drop', onDropFunc);

// Set all. Must list every resource key, as those not listed are lost.
myDiagram.dnd=dndObject;

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 :function(Event, Object)

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 dataContexts of the dragged data nodes. The dataContext for the node has the following properties:
  • componentElement {Element}: The diagram element.
  • id {string}: The id of the diagram object
  • type {string}: The type of the diagram object - "link", "promotedLink" or "node".
  • label {string}: The label of the diagram object.
  • data {Object}: Relevant data for the object
    • data object for the node, if the object type is "node"
    • data object for the link, if the object type is "link"
    • an array of data objects that correspond to links represented by the promoted link
  • nodeOffset: An object with x,y properties, that reflects node offset from the upper left corner of the bounding box for the dragged content.

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 :function(Event, Object)

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:
  • dataContext : The dataContext object of the link start node with the following properties:
    • componentElement {Element}: The diagram element.
    • id {string}: The id of the diagram object
    • type {string}: The type of the diagram object - "link", "promotedLink" or "node".
    • label {string}: The label of the diagram object.
    • data {Object}: Relevant data for the object
      • data object for the node, if the object type is "node"
      • data object for the link, if the object type is "link"
      • an array of data objects that correspond to links represented by the promoted link
  • portElement : DOM element recognized as a port that received drag event.

Default Value:

• null

Names

Item	Name
Property	dnd.drag.ports.dragStart

dnd.drag.ports.link-style :function(Object)

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:

• dataContext The dataContext object of the link start node.
  • componentElement {Element}: The diagram element.
  • id {string}: The id of the diagram object
  • type {string}: The type of the diagram object - "link", "promotedLink" or "node".
  • label {string}: The label of the diagram object.
  • data {Object}: Relevant data for the object
    • data object for the node, if the object type is "node"
    • data object for the link, if the object type is "link"
    • an array of data objects that correspond to links represented by the promoted link
• portElement DOM element recognized as a port that received drag event.

The function should return one of the following:

• an object with the following properties:
  • svgStyle : Inline stlye 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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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

dnd.drop.links :Object

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

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 :function(Event, Object)

An optional callback function that receives the "dragenter" event and context information as arguments. The context information is as follows: * The context information is as follows:

• 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 :function(Event, Object)

An optional callback function that receives the "dragleave" event and context information as arguments. The context information is as follows: * The context information is as follows:

• 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 :function(Event, Object)

An optional callback function that receives the "dragover" event and context information as arguments. The context information is as follows: * The context information is as follows:

• 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 :function(Event, Object)

A callback function that receives the "drop" event and context information as arguments. The context information is as follows: * The context information is as follows:

• 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 :KeySet

Specifies the key set containing the ids of diagram nodes that should be expanded on initial render. Use the ExpandedKeySet class to specify nodes to expand. Use the ExpandAllKeySet class to expand all nodes.

Default Value:

• new ExpandedKeySet()

Supports writeback:

• true

Names

Item	Name
Property	expanded
Property change event	expandedChanged
Property change listener attribute (must be of type function)	on-expanded-changed

Examples

Initialize the diagram with specific items expanded:

myDiagram.expanded = new ExpandedKeySet(['N0', 'N00']);

Initialize the diagram with all items expanded:

myDiagram.expanded = new ExpandAllKeySet();

focus-renderer :(null|function(Object): Object)

An optional callback function to update the node in response to changes in keyboard focus state. The function takes a single argument, provided by the component, with the following properties:

• componentElement {Element}: The Diagram element.
• parentElement {Element}: A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported.
• data {Object}: The data object for the node.
• content {Object}: An object that describes child content. The object has the following properties
  • element {Element}: an 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 diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• previousState {Object}: An object that reflects the previous state of the diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• id {string}: Node id.
• type {string}: Object type = node.
• renderDefaultFocus {function()}: Function for rendering default focus effect for the diagram node.
• renderDefaultHover {function()}: Function for rendering default hover effect for the diagram node.
• renderDefaultSelection {function()}: Function for rendering default selection effect for the diagram node.

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

Examples

Initialize the diagram with the focus-renderer attribute specified:

<oj-diagram focus-renderer='{{rendererFunc}}'></oj-diagram>

Get or set the focusRenderer property after initialization:

// getter
var renderer = myDiagram.focusRenderer;

// setter
myDiagram.focusRenderer = rendererFunc;

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

Examples

Initialize the diagram with the hidden-categories attribute specified:

<oj-diagram hidden-categories='["green", "blue"]'></oj-diagram>

Get or set the hiddenCategories property after initialization:

// Get one
var value = myDiagram.hiddenCategories[0];

// Get all
var values = myDiagram.hiddenCategories;

// Set all (There is no permissible "set one" syntax.)
myDiagram.hiddenCategories=["green", "blue"];

highlight-match :string

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:

Name	Type
"all"	string
"any"	string

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

Examples

Initialize the diagram with the highlight-match attribute specified:

<oj-diagram highlight-match='any'></oj-diagram>

Get or set the highlightMatch property after initialization:

// getter
var value = myDiagram.highlightMatch;

// setter
myDiagram.highlightMatch="any";

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

Examples

Initialize the diagram with the highlighted-categories attribute specified:

<oj-diagram highlighted-categories='["green", "blue"]'></oj-diagram>

Get or set the highlightedCategories property after initialization:

// Get one
var value = myDiagram.highlightedCategories[0];

// Get all
var values = myDiagram.highlightedCategories;

// Set all (There is no permissible "set one" syntax.)
myDiagram.highlightedCategories=["green", "blue"];

hover-behavior :string

Defines the behavior applied when hovering over diagram nodes and links.

Supported Values:

Name	Type
"dim"	string
"none"	string

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

Examples

Initialize the diagram with the hover-behavior attribute specified:

<oj-diagram max-zoom='dim'></oj-diagram>

Get or set the hoverBehavior property after initialization:

// getter
var value = myDiagram.hoverBehavior;

// setter
myDiagram.hoverBehavior='dim';

hover-renderer :(null|function(Object): Object)

An optional callback function to update the node in response to changes in hover state. The function takes a single argument, provided by the component, with the following properties:

• componentElement {Element}: The Diagram element.
• parentElement {Element}: A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported.
• data {Object}: The data object for the node.
• content {Object}: An object that describes child content. The object has the following properties
  • element {Element}: an 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 diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• previousState {Object}: An object that reflects the previous state of the diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• id {string}: Node id.
• type {string}: Object type = node.
• renderDefaultFocus {function()}: Function for rendering default focus effect for the diagram node.
• renderDefaultHover {function()}: Function for rendering default hover effect for the diagram node.
• renderDefaultSelection {function()}: Function for rendering default selection effect for the diagram node.

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

Examples

Initialize the diagram with the hover-renderer attribute specified:

<oj-diagram hover-renderer='{{rendererFunc}}'></oj-diagram>

Get or set the hoverRenderer property after initialization:

// getter
var renderer = myDiagram.hoverRenderer;

// setter
myDiagram.hoverRenderer = rendererFunc;

layout :function(DvtDiagramLayoutContext)

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:

• DvtDiagramLayoutContext
• DvtDiagramLayoutContextLink
• DvtDiagramLayoutContextNode

Names

Item	Name
Property	layout
Property change event	layoutChanged
Property change listener attribute (must be of type function)	on-layout-changed

link-highlight-mode :string

Defines link highlighting mode.

Supported Values:

Name	Type
"link"	string
"linkAndNodes"	string

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

Examples

Initialize the diagram with the link-highlight-mode attribute specified:

<oj-diagram link-highlight-mode='linkAndNodes'></oj-diagram>

Get or set the linkHighlightMode property after initialization:

// getter
var value = myDiagram.linkHighlightMode;

// setter
myDiagram.linkHighlightMode="linkAndNodes";

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:

Properties:

Name	Type	Description
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".

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

Example

Customizing link color using customColor property defined on the link data object

<oj-diagram
   layout = '{{layoutFunc}}'
   data = '{{dataSource}}'
   node-properties = '[[function(data){return {color:data.customColor};}]]'>
</oj-diagram>

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

Examples

Initialize the diagram with the max-zoom attribute specified:

<oj-diagram max-zoom='10.0'></oj-diagram>

Get or set the maxZoom property after initialization:

// getter
var value = myDiagram.maxZoom;

// setter
myDiagram.maxZoom=5.0;

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

Examples

Initialize the diagram with the min-zoom attribute specified:

<oj-diagram min-zoom='0.5'></oj-diagram>

Get or set the minZoom property after initialization:

// getter
var value = myDiagram.minZoom;

// setter
myDiagram.minZoom=1.0;

node-highlight-mode :string

Defines node highlighting mode.

Supported Values:

Name	Type
"node"	string
"nodeAndIncomingLinks"	string
"nodeAndLinks"	string
"nodeAndOutgoingLinks"	string

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

Examples

Initialize the diagram with the node-highlight-mode attribute specified:

<oj-diagram node-highlight-mode='nodeAndLinks'></oj-diagram>

Get or set the nodeHighlightMode property after initialization:

// getter
var value = myDiagram.nodeHighlightMode;

// setter
myDiagram.nodeHighlightMode="nodeAndLinks";

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:

Properties:

Name	Type	Description
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	Specifies an icon to be used as a graphical element for the node Properties Name Type Description 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 object 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	Specifies overview node shape. Properties Name Type Description icon object Specifies an icon for the node in the overview window. The following properties can be used to customize the overview node. The width and height of the overview node is determined from the rendered node in the diagram. Properties Name Type Description 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.

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

Example

Customizing node icon color using customColor property defined on the node data object

<oj-diagram
   layout = '{{layoutFunc}}'
   data = '{{dataSource}}'
   node-properties = '[[function(data){return {icon:{color:data.customColor}};}]]'>
</oj-diagram>

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

Examples

Initialize the diagram with the overview attribute specified:

<oj-diagram overview.rendered = 'on' overview.width = '150'></oj-diagram>

<oj-diagram overview='[[overviewObject]]'></oj-diagram>

Get or set the overview property after initialization:

// Get one
var value = myDiagram.overview.width;

// Get all
var values = myDiagram.overview;

// Set one, leaving the others intact. Always use the setProperty API for
// subproperties rather than setting a subproperty directly.
myDiagram.setProperty('overview.width', '150');

// Set all. Must list every resource key, as those not listed are lost.
myDiagram.overview=overviewObject;

overview.halign :string

Horizontal alignment for diagram overview window

Supported Values:

Name	Type
"center"	string
"end"	string
"start"	string

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 :string

Specifies whether the overview scrollbar is rendered.

See the overview attribute for usage examples.

Supported Values:

Name	Type
"off"	string
"on"	string

Default Value:

• "off"

Names

Item	Name
Property	overview.rendered

overview.valign :string

Vertical alignment for diagram overview window

Supported Values:

Name	Type
"bottom"	string
"middle"	string
"top"	string

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 :string

Specifies if panning allowed in horizontal and vertical directions.

Supported Values:

Name	Type
"auto"	string
"x"	string
"y"	string

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

Examples

Initialize the diagram with the pan-direction attribute specified:

<oj-diagram pan-direction='x'></oj-diagram>

Get or set the panDirection property after initialization:

// getter
var value = myDiagram.panDirection;

// setter
myDiagram.panDirection="y";

panning :string

Specifies whether panning is allowed in Diagram.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	panning
Property change event	panningChanged
Property change listener attribute (must be of type function)	on-panning-changed

Examples

Initialize the diagram with the panning attribute specified:

<oj-diagram panning='auto'></oj-diagram>

Get or set the panning property after initialization:

// getter
var value = myDiagram.panning;

// setter
myDiagram.panning="auto";

promoted-link-behavior :string

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:

Name	Type
"full"	string
"lazy"	string
"none"	string

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

Examples

Initialize the diagram with the promoted-link-behavior attribute specified:

<oj-diagram promoted-link-behavior='none'></oj-diagram>

Get or set the promotedLinkBehavior property after initialization:

// getter
var value = myDiagram.promotedLinkBehavior;

// setter
myDiagram.promotedLinkBehavior="none";

renderer :(null|function(Object): Object)

A callback function - a custom renderer - that will be used for initial node rendering. The function takes a single argument, provided by the component, with the following properties:

• componentElement {Element}: The Diagram element.
• parentElement {Element}: A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported.
• data {Object}: The data object for the node.
• content {Object}: An object that describes child content. The object has the following properties
  • element {Element}: an 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 diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• previousState {Object}: An object that reflects the previous state of the diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• id {string}: Node id.
• type {string}: Object type = node.
• renderDefaultFocus {function()}: Function for rendering default focus effect for the diagram node.
• renderDefaultHover {function()}: Function for rendering default hover effect for the diagram node.
• renderDefaultSelection {function()}: Function for rendering default selection effect for the diagram node.

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

Examples

Initialize the diagram with the renderer attribute specified:

<oj-diagram renderer='{{rendererFunc}}'></oj-diagram>

Get or set the renderer property after initialization:

// getter
var renderer = myDiagram.renderer;

// setter
myDiagram.renderer = rendererFunc;

selection :Array.<string>

An array containing the ids of the selected nodes and links.

Default Value:

• null

Supports writeback:

• true

Names

Item	Name
Property	selection
Property change event	selectionChanged
Property change listener attribute (must be of type function)	on-selection-changed

Examples

Initialize the diagram with the selection attribute specified:

<oj-diagram selection='["N1", "N2", "L0"]'></oj-diagram>

Get or set the selection property after initialization:

// Get one
var value = myDiagram.selection[0];

// Get all
var values = myDiagram.selection;

// Set all (There is no permissible "set one" syntax.)
myDiagram.selection=["N1", "N2", "L0"];

selection-mode :string

Specifies the selection mode.

Supported Values:

Name	Type
"multiple"	string
"none"	string
"single"	string

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

Examples

Initialize the diagram with the selection-mode attribute specified:

<oj-diagram selection-mode='multiple'></oj-diagram>

Get or set the selectionMode property after initialization:

// getter
var value = myDiagram.selectionMode;

// setter
myDiagram.selectionMode="multiple";

selection-renderer :(null|function(Object): Object)

An optional callback function to update the node in response to changes in selection state. The function takes a single argument, provided by the component, with the following properties:

• componentElement {Element}: The Diagram element.
• parentElement {Element}: A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported.
• data {Object}: The data object for the node.
• content {Object}: An object that describes child content. The object has the following properties
  • element {Element}: an 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 diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• previousState {Object}: An object that reflects the previous state of the diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• id {string}: Node id.
• type {string}: Object type = node.
• renderDefaultFocus {function()}: Function for rendering default focus effect for the diagram node.
• renderDefaultHover {function()}: Function for rendering default hover effect for the diagram node.
• renderDefaultSelection {function()}: Function for rendering default selection effect for the diagram node.

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

Examples

Initialize the diagram with the selection-renderer attribute specified:

<oj-diagram selection-renderer='{{rendererFunc}}'></oj-diagram>

Get or set the selectionRenderer property after initialization:

// getter
var renderer = myDiagram.selectionRenderer;

// setter
myDiagram.selectionRenderer = rendererFunc;

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

Example

Get or set the styleDefaults property after initialization:

// Get one
var value = myDiagram.styleDefaults.animationDuration;

// Get all
var values = myDiagram.styleDefaults;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myDiagram.setProperty('styleDefaults.nodeDefaults', {'icon': {width: 125, height: 125}});

// Set all. Must list every resource key, as those not listed are lost.
myDiagram.styleDefaults={'nodeDefaults': {'icon': {width: 125, height: 125}}};

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 classess 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 :string

Specifies the type of end connector on the link.

Supported Values:

Name	Type
"arrow"	string
"arrowConcave"	string
"arrowOpen"	string
"circle"	string
"none"	string
"rectangle"	string
"rectangleRounded"	string

Default Value:

• "none"

Names

Item	Name
Property	styleDefaults.linkDefaults.endConnectorType

style-defaults.link-defaults.label-style :Object

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.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.linkDefaults.labelStyle

style-defaults.link-defaults.start-connector-type :string

Specifies the type of start connector on the link.

Supported Values:

Name	Type
"arrow"	string
"arrowConcave"	string
"arrowOpen"	string
"circle"	string
"none"	string
"rectangle"	string
"rectangleRounded"	string

Default Value:

• "none"

Names

Item	Name
Property	styleDefaults.linkDefaults.startConnectorType

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

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 :Object

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 :string

Default fill pattern of the icon.

Supported Values:

Name	Type
"largeChecker"	string
"largeCrosshatch"	string
"largeDiagonalLeft"	string
"largeDiagonalRight"	string
"largeDiamond"	string
"largeTriangle"	string
"none"	string
"smallChecker"	string
"smallCrosshatch"	string
"smallDiagonalLeft"	string
"smallDiagonalRight"	string
"smallDiamond"	string
"smallTriangle"	string

Default Value:

• "none"

Names

Item	Name
Property	styleDefaults.nodeDefaults.icon.pattern

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

Default shape of the icon. Can take the name of a built-in shape or the svg path commands for a custom shape.

Supported Values:

Name	Type	Argument
"circle"	string	<optional>
"diamond"	string	<optional>
"ellipse"	string	<optional>
"human"	string	<optional>
"plus"	string	<optional>
"rectangle"	string	<optional>
"square"	string	<optional>
"star"	string	<optional>
"triangleDown"	string	<optional>
"triangleUp"	string	<optional>

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 :Object

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 :Object

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 :string

Determines when to display the expand/collapse button.

Supported Values:

Name	Type
"off"	string
"on"	string

Default Value:

• "on"

Names

Item	Name
Property	styleDefaults.nodeDefaults.showDisclosure

style-defaults.promoted-link :Object

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 :string

Specifies the type of end connector on the promoted link.

Supported Values:

Name	Type
"arrow"	string
"arrowConcave"	string
"arrowOpen"	string
"circle"	string
"none"	string
"rectangle"	string
"rectangleRounded"	string

Default Value:

• "none"

Names

Item	Name
Property	styleDefaults.promotedLink.endConnectorType

style-defaults.promoted-link.start-connector-type :string

Specifies the type of start connector on the promoted link.

Supported Values:

Name	Type
"arrow"	string
"arrowConcave"	string
"arrowOpen"	string
"circle"	string
"none"	string
"rectangle"	string
"rectangleRounded"	string

Default Value:

• "none"

Names

Item	Name
Property	styleDefaults.promotedLink.startConnectorType

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

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 :Object

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

Examples

Initialize the diagram with the tooltip attribute specified:

<oj-diagram tooltip.renderer='[[tooltipFun]]'></oj-diagram>

<oj-diagram tooltip='[[{"renderer": tooltipFun}]]'></oj-diagram>

Get or set the tooltip property after initialization:

// Get one
var value = myDiagram.tooltip.renderer;

// Get all
var values = myDiagram.tooltip;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myDiagram.setProperty('tooltip.renderer', tooltipFun);

// Set all. Must list every resource key, as those not listed are lost.
myDiagram.tooltip={'renderer': tooltipFun};     

tooltip.renderer :function(Object): (Object|null)

A function that returns a custom tooltip. The function takes a dataContext argument, provided by the diagram, with the following properties:

• parentElement The tooltip element. The function can directly modify or append content to this element.
• componentElement {Element}: The diagram element.
• id {string}: The id of the diagram object
• type {string}: The type of the diagram object - "link", "promotedLink" or "node".
• label {string}: The label of the diagram object.
• data {Object}: Relevant data for the object
  • data object for the node, if the object type is "node"
  • data object for the link, if the object type is "link"
  • an array of data objects that correspond to links represented by the promoted link

Default Value:

• null

Names

Item	Name
Property	tooltip.renderer

touch-response :string

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:

Name	Type
"auto"	string
"touchStart"	string

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

Examples

Initialize the diagram with the touch-response attribute specified:

<oj-diagram touch-response='touchStart'></oj-diagram>

Get or set the touchResponse property after initialization:

// getter
var value = myDiagram.touchResponse;

// setter
myDiagram.touchResponse="touchStart";

track-resize :string

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:

Name	Type
"off"	string
"on"	string

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

Examples

Initialize the data visualization element with the track-resize attribute specified:

<oj-some-dvt track-resize='off'></oj-some-dvt>

Get or set the trackResize property after initialization:

// getter
var value = myComponent.trackResize;

// setter
myComponent.trackResize="off";

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

Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

(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

(nullable) translations.promoted-link :string

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

(nullable) translations.promoted-links :string

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 :(null|function(Object): Object)

An optional callback function to update the node in response to changes in zoom level. The function takes a single argument, provided by the component, with the following properties:

• componentElement {Element}: The Diagram element.
• parentElement {Element}: A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported.
• data {Object}: The data object for the node.
• content {Object}: An object that describes child content. The object has the following properties
  • element {Element}: an 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 diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• previousState {Object}: An object that reflects the previous state of the diagram node. The object has the following properties
  • hovered {boolean}: hovered state.
  • selected {boolean}: selected state.
  • focused {boolean}: focused state.
  • zoom {number}: zoom state.
  • expanded {boolean}: expanded state.
• id {string}: Node id.
• type {string}: Object type = node.
• renderDefaultFocus {function()}: Function for rendering default focus effect for the diagram node.
• renderDefaultHover {function()}: Function for rendering default hover effect for the diagram node.
• renderDefaultSelection {function()}: Function for rendering default selection effect for the diagram node.

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

Examples

Initialize the diagram with the zoom-renderer attribute specified:

<oj-diagram zoom-renderer='{{rendererFunc}}'></oj-diagram>

Get or set the zoomRenderer property after initialization:

// getter
var renderer = myDiagram.zoomRenderer;

// setter
myDiagram.zoomRenderer = rendererFunc;

zooming :string

Specifies whether zooming is allowed in Diagram.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	zooming
Property change event	zoomingChanged
Property change listener attribute (must be of type function)	on-zooming-changed

Examples

Initialize the diagram with the zooming attribute specified:

<oj-diagram panDirection='auto'></oj-diagram>

Get or set the zooming property after initialization:

// getter
var value = myDiagram.zooming;

// setter
myDiagram.zooming="auto";

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.

Following are the valid subIds:

oj-diagram-link

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
data.nodeId	string	the id of the collapsing object

Examples

Specify an ojBeforeCollapse listener via the DOM attribute:

<oj-diagram on-oj-before-collapse='[[listener]]'></oj-diagram>

Specify an ojBeforeCollapse listener via the JavaScript property:

myDiagram.onOjBeforeCollapse = listener;

Add an ojBeforeCollapse listener via the addEventListener API:

myDiagram.addEventListener('ojBeforeCollapse', listener);

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	string	the id of the expanding object

Examples

Specify an ojBeforeExpand listener via the DOM attribute:

<oj-diagram on-oj-before-expand='[[listener]]'></oj-diagram>

Specify an ojBeforeExpand listener via the JavaScript property:

myDiagram.onOjBeforeExpand = listener;

Add an ojBeforeExpand listener via the addEventListener API:

myDiagram.addEventListener('ojBeforeExpand', listener);

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
data.nodeId	string	the id of the collapsed object

Examples

Specify an ojCollapse listener via the DOM attribute:

<oj-diagram on-oj-collapse='[[listener]]'></oj-diagram>

Specify an ojCollapse listener via the JavaScript property:

myDiagram.onOjCollapse = listener;

Add an ojCollapse listener via the addEventListener API:

myDiagram.addEventListener('ojCollapse', listener);

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	string	the id of the expanded object

Examples

Specify an ojExpand listener via the DOM attribute:

<oj-diagram on-oj-expand='[[listener]]'></oj-diagram>

Specify an ojExpand listener via the JavaScript property:

myDiagram.onOjExpand = listener;

Add an ojExpand listener via the addEventListener API:

myDiagram.addEventListener('ojExpand', listener);

Methods

getContextByNode(node) → {Object|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

Object | null

Example

// Returns {'subId': 'oj-some-sub-id', 'componentSpecificProperty': someValue, ...}
var context = myComponent.getContextByNode(nodeInsideElement);

getLink(linkIndex) → {Object|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

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

Example

Invoke the getLink method:

var link = myDiagram.getLink(3);

getLinkCount() → {Number}

Returns number of diagram links

Returns:

The number of links

Type

Number

Example

Invoke the getLinkCount method:

var count = myDiagram.getLinkCount();

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	String	Node index

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

Example

Invoke the getNode method:

var node = myDiagram.getNode(3);

getNodeCount() → {Number}

Returns number of diagram nodes

Returns:

The number of nodes

Type

Number

Example

Invoke the getNodeCount method:

var count = myDiagram.getNodeCount();

getPromotedLink(startNodeIndex, endNodeIndex) → {Object|null}

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

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 a value for a property or a single subproperty for complex properties.

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:

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

refresh() → {void}

Refreshes the component.

Returns:

Type

void

setProperties(properties) → {void}

Performs a batch set of properties.

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 single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.

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");