Usage
Signature:
interface DiagramElement<K1, K2, D1 extends ojDiagram.Node<K1>|any, D2 extends ojDiagram.Link<K2, K1>|any>
Generic Parameters
Parameter Description K1 Type of key of the nodeData dataprovider K2 Type of key of the linkData dataprovider D1 Type of data from the nodeData dataprovider D2 Type of data from the linkData dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { DiagramElement } from "ojs/ojdiagram";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdiagram";
For additional information visit:
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.
-
linkContentTemplate
-
The
This slot takes precedence over the renderer/focusRenderer/hoverRenderer/selectionRenderer properties on the linkContent object if specified.linkContentTemplate
slot is used to specify custom link content. The slot content must be a single <template> element.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 link. (See oj.ojDiagram.LinkRendererContext or the table below for a list of properties available on $current)
Note that SVG nodes for the diagram link content should be wrapped into an
svg
element in order to have the SVG namespace. The component will strip the outersvg
element before inserting nodes into DOM.See linkContent.renderer for additional details on custom content for Diagram links.
// Initialize the Diagram with a link content template specified <oj-diagram> <template slot="linkContentTemplate"> <svg> <g value="[['link' + $current.id]]"> <path class="oj-diagram-link-path" stroke="[[$current.itemData.color]]" stroke-width="[[$current.itemData.width]]"></path> </g> </svg> </template> </oj-diagram>
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component. - Since:
- 8.0.0
Properties of $current:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Link.<K2, K1> The data object for the link or an array of data objects for the promoted link. If DataProvider is being used, this property contains template processed data. id
K2 Link id. itemData
D2 | D2[] The row data object for the link or an array of row data objects for the promoted link. This will only be set if an DataProvider is being used. parentElement
Element A parent group element that takes a custom SVG fragment as the link content. Modifications of the parentElement are not supported. points
array | string An array of points or a string with SVG path to use for rendering this link as set by diagram layout. When custom renderer is used for link creation, the property will contain an array of x and y points for the link start and link end calculated by Diagram. previousState
Object An object that reflects the previous state of the data item. Properties
Name Type Description focused
boolean True if the link was previously selected. hovered
boolean True if the link was previously hovered. inActionableMode
boolean True if the link was previously in actionable mode. selected
boolean True if the link was previously selected. rootElement
Element | null Null on initial rendering or SVG element for the link. state
Object An object that reflects the current state of the data item. Properties
Name Type Description focused
boolean True if the link is currently selected. hovered
boolean True if the link is currently hovered. inActionableMode
boolean True if the link is currently in actionable mode. selected
boolean True if the link is currently selected. type
'link' | 'promotedLink' Object type is 'link' or 'promotedLink'. -
linkTemplate
-
The
linkTemplate
slot is used to specify the template for creating each diagram link. The slot content must be a single <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 link. (See oj.ojDiagram.LinkTemplateContext or the table below for a list of properties available on $current)
- alias - if data-oj-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.
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
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
The slot content must be a single <template> element. This slot takes precedence over the renderer/focusRenderer/hoverRenderer/selectionRenderer/zoomRenderer properties on the nodeContent object if specified.nodeContentTemplate
slot is used to specify custom node content.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.NodeContentTemplateContext or the table below for a list of properties available on $current)
The template for a container node must include an oj-diagram-child-content element. Diagram will replace this element with the node child contents.
Add data-oj-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
Note that SVG nodes for the diagram node content should be wrapped into an
svg
element in order to have the SVG namespace. The component will insert the entire SVG structure into DOM including the outersvg
element.// Initialize the Diagram with a node content template specified <oj-diagram> <template slot="nodeContentTemplate" data-oj-zoom-thresholds="[0.25, 0.5, 0.75]"> <svg width="100" height="100"> <text><oj-bind-text value="[[$current.id]]"></oj-bind-text></text> </svg> </template> </oj-diagram>
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component. - Deprecated:
-
Since Description 17.0.0
The renderDefaultFocus property is deprecated. This behavior can be implemented in the custom template. - Deprecated:
-
Since Description 17.0.0
The renderDefaultHover property is deprecated. This behavior can be implemented in the custom template. - Deprecated:
-
Since Description 17.0.0
The renderDefaultSelection property is deprecated. This behavior can be implemented in the custom template. - Since:
- 7.1.0
Properties of $current:
Name Type Description componentElement
Element The diagram element. 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. height
number Height of the child content. width
number Width of the child content. data
oj.ojDiagram.Node.<K1> The data object for the node. If DataProvider is being used, this property contains template processed data. id
K1 Node id. itemData
D1 The row data object for the node. This will only be set if an DataProvider is being used. parentElement
Element A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported. previousState
Object An object that reflects the previous state of the data item. Properties
Name Type Description expanded
boolean True if the node was previously expanded. focused
boolean True if the node was previously selected. hovered
boolean True if the node was previously hovered. inActionableMode
boolean True if the node was previously in actionable mode. selected
boolean True if the node was previously selected. zoom
number Previous zoom state. 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 rootElement
Element | null Null on initial rendering or SVG element for the node. state
Object An object that reflects the current state of the data item. Properties
Name Type Description expanded
boolean True if the node is expanded. focused
boolean True if the node is currently selected. hovered
boolean True if the node is currently hovered. inActionableMode
boolean True if the node is currently in actionable mode. selected
boolean True if the node is currently selected. zoom
number Current zoom state. type
string Object type = node. -
nodeTemplate
-
The
nodeTemplate
slot is used to specify the template for creating each diagram node. The slot content must be a single <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 node. (See oj.ojDiagram.NodeTemplateContext or the table below for a list of properties available on $current)
- alias - if data-oj-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 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
-
The
tooltipTemplate
slot is used to specify custom tooltip content. The slot content must be a single <template> element. 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 or the table below for a list of properties available on $current)
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
Properties of $current:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Node.<K1> | oj.ojDiagram.Link.<K2, K1> | ojDiagram.Link<K2, K1>[] Relevant data for the object. id
K1 | K2 The id of the diagram object. itemData
D1 | D2 | D2[] The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. parentElement
Element The tooltip element. The function can directly modify or append content to this element. type
'node' | 'link' | 'promotedLink' The type of the diagram object.
Attributes
-
animation-on-data-change :"auto"|"none"
-
Specifies the animation that is applied on data changes.
- Default Value:
"none"
Supported Values:
Value auto
none
Names
Item Name Property animationOnDataChange
Property change event animationOnDataChangeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-on-data-change-changed
-
animation-on-display :"auto"|"none"
-
Specifies the animation that is shown on initial display.
- Default Value:
"none"
Supported Values:
Value auto
none
Names
Item Name Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) on-as-changed
-
current-item :(K1|K2)
-
The node or link that should receive focus. Note that if the current item is set to something invalid or to something hidden inside a collapsed parent node, then the value is not applied.
- Default Value:
null
- Supports writeback:
true
Names
Item Name Property currentItem
Property change event currentItemChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-current-item-changed
-
data :Object
-
The data source for the Diagram element. See oj.DiagramDataSource for details.
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, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) 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.
- 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
- ports {object}: An object with the following properties:
-
dnd.drag.ports.link-style :((context: {portElement: Element, dataContext: ojDiagram.NodeItemContext<K1,D1>}) => ({svgStyle?: Partial<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.
- 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.
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.
- 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.
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.
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 :((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.
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.
- 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.
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.
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.
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.
- 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.
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.
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.
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.
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.
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, see Events and Listeners for additional information.) 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.
- Deprecated:
-
Since Description 8.0.0
Use nodeContent.focusRenderer instead.
- Default Value:
null
Names
Item Name Property focusRenderer
Property change event focusRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-focus-renderer-changed
- An Object with the following property:
-
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, see Events and Listeners for additional information.) 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.
- Default Value:
"all"
Supported Values:
Value all
any
Names
Item Name Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) on-highlighted-categories-changed
-
hover-behavior :"dim"|"none"
-
Defines the behavior applied when hovering over diagram nodes and links.
- Default Value:
"none"
Supported Values:
Value dim
none
Names
Item Name Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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.
- Deprecated:
-
Since Description 8.0.0
Use nodeContent.hoverRenderer instead.
- Default Value:
null
Names
Item Name Property hoverRenderer
Property change event hoverRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-renderer-changed
- An Object with the following property:
-
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.
Names
Item Name Property layout
Property change event layoutChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-layout-changed
-
link-content :Object
-
An object containing an optional callbacks function for link customization.
Names
Item Name Property linkContent
Property change event linkContentChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-link-content-changed
-
link-content.focus-renderer :((context: ojDiagram.LinkRendererContext<K1,K2,D2>) => {insert: SVGElement}|void)|null
-
An optional callback function to update the link 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 link.
- undefined: Indicates that the existing DOM has been directly modified and no further action is required.
See linkContent.renderer for additional details on custom content for Diagram links.
- Default Value:
null
Names
Item Name Property linkContent.focusRenderer
- An Object with the following property:
-
link-content.hover-renderer :((context: ojDiagram.LinkRendererContext<K1,K2,D2>) => {insert: SVGElement}|void)|null
-
An optional callback function to update the link 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 link.
- undefined: Indicates that the existing DOM has been directly modified and no further action is required.
See linkContent.renderer for additional details on custom content for Diagram links.
- Default Value:
null
Names
Item Name Property linkContent.hoverRenderer
- An Object with the following property:
-
link-content.renderer :((context: ojDiagram.LinkRendererContext<K1,K2,D2>) => ({insert: SVGElement}))
-
A callback function - a custom renderer - that will be used for initial link 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 link.
Note that a link can be represented by any SVG content. However if an application wants to take advantage of built-in path animation provided by the Diagram component, then the main shape of a link should be represented by a single path element and that path element should be marked by oj-diagram-link-path class. When the class is applied to the path element, its d attribute value will be populated by the component and the path transformation will be applied to the element during data change animation. Fade-in animation will be used for other elements of the link.
When the oj-diagram-link-path class is not used for any element of the link, then the entire custom content will fade-in during data change animation.
Note that when linkContent.renderer is specified, but the other state renderer functions are not, then the linkContent.renderer will be used to render the state.
Note that when the content returned by the renderer is an
svg
element, the children of this element will be inserted into the DOM by the component, omitting thesvg
element itself.- Default Value:
null
Names
Item Name Property linkContent.renderer
-
link-content.selection-renderer :((context: ojDiagram.LinkRendererContext<K1,K2,D2>) => {insert: SVGElement}|void)|null
-
An optional callback function to update the link 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 link.
- undefined: Indicates that the existing DOM has been directly modified and no further action is required.
See linkContent.renderer for additional details on custom content for Diagram links.
- Default Value:
null
Names
Item Name Property linkContent.selectionRenderer
- An Object with the following property:
-
link-data :(DataProvider.<K2, D2>|null)
-
The 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 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, see Events and Listeners for additional information.) on-link-data-changed
-
link-highlight-mode :"linkAndNodes"|"link"
-
Defines link highlighting mode.
- Default Value:
"link"
Supported Values:
Value link
linkAndNodes
Names
Item Name Property linkHighlightMode
Property change event linkHighlightModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) on-min-zoom-changed
-
node-content :Object
-
An object containing an optional callbacks function for node customization.
Names
Item Name Property nodeContent
Property change event nodeContentChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-node-content-changed
-
node-content.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.
See nodeContent.renderer for additional details on custom content for Diagram nodes.
- Default Value:
null
Names
Item Name Property nodeContent.focusRenderer
- An Object with the following property:
-
node-content.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.
See nodeContent.renderer for additional details on custom content for Diagram nodes.
- Default Value:
null
Names
Item Name Property nodeContent.hoverRenderer
- An Object with the following property:
-
node-content.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.
The callback function is responsible for placing the child content by positioning either the content object passed on the RendererContext or oj-diagram-child-content element. If an oj-diagram-child-content element is used, diagram will replace this element with the node child contents.
Note that when nodeContent.renderer is specified, but the other state renderer functions are not, then the default state renderer will be used to render the state.
- Default Value:
null
Names
Item Name Property nodeContent.renderer
-
node-content.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.
See nodeContent.renderer for additional details on custom content for Diagram nodes.
- Default Value:
null
Names
Item Name Property nodeContent.selectionRenderer
- An Object with the following property:
-
node-content.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.
See nodeContent.renderer for additional details on custom content for Diagram nodes.
- Default Value:
null
Names
Item Name Property nodeContent.zoomRenderer
- An Object with the following property:
-
node-data :(DataProvider.<K1, D1>|null)
-
The 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 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, see Events and Listeners for additional information.) on-node-data-changed
-
node-highlight-mode :"nodeAndIncomingLinks"|"nodeAndOutgoingLinks"|"nodeAndLinks"|"node"
-
Defines node highlighting mode.
- Default Value:
"node"
Supported Values:
Value node
nodeAndIncomingLinks
nodeAndLinks
nodeAndOutgoingLinks
Names
Item Name Property nodeHighlightMode
Property change event nodeHighlightModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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"
. - shape {string}: The shape of the icon. Can take the name of a built-in shape.
Supported built-in shapes:"square", "rectangle", "circle". Diamond, ellipse, human, plus, star, triangleDown, and triangleUp were deprecated in 17.0.0. For all other shapes please use the custom renderer.
Default value is"circle"
. - 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.
- 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.
- 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:
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, see Events and Listeners for additional information.) on-node-properties-changed
- showDisclosure {string}: Determines when to display the expand/collapse button.
-
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, see Events and Listeners for additional information.) on-overview-changed
-
overview.fit-area :"content"|"canvas"
-
Specifies the region that will be scaled to fit within the overview.
- Default Value:
"content"
Supported Values:
Value Description canvas
The canvas (the pannable area when the diagram is at minZoom) will be scaled to fit within the overview. The diagram panning property should also be set to 'fixed' in most situations. content
The bounding box of the Diagram nodes will be scaled to fit within the overview. Names
Item Name Property overview.fitArea
-
overview.halign :"start"|"end"|"center"
-
Horizontal alignment for diagram overview window
- Default Value:
"end"
Supported Values:
Value center
end
start
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.preserve-aspect-ratio :"none"|"meet"
-
Controls how the fit area is scaled within the overview.
- Default Value:
"meet"
Supported Values:
Value Description meet
The aspect ratio of the fit area will be preserved as it is scaled to fit the overview. none
The aspect ratio of the fit area may not be preserved as it is scaled to fit the overview. Names
Item Name Property overview.preserveAspectRatio
-
overview.rendered :"on"|"off"
-
Specifies whether the overview scrollbar is rendered.
See the overview attribute for usage examples.- Default Value:
"off"
Supported Values:
Value off
on
Names
Item Name Property overview.rendered
-
overview.valign :"top"|"bottom"|"middle"
-
Vertical alignment for diagram overview window
- Default Value:
"bottom"
Supported Values:
Value bottom
middle
top
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.
- Default Value:
"auto"
Supported Values:
Value auto
x
y
Names
Item Name Property panDirection
Property change event panDirectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-pan-direction-changed
-
pan-zoom-state :Object
-
A writeback object that contains properties zoom, centerX, and centerY that represent the panZoomState
- Supports writeback:
true
Names
Item Name Property panZoomState
Property change event panZoomStateChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-pan-zoom-state-changed
-
pan-zoom-state.center-x :number|null
-
The x coordinate of the center of the viewport in the layout coordinate space. By default the content will be centered horizontally.
- Default Value:
null
- Supports writeback:
true
Names
Item Name Property panZoomState.centerX
-
pan-zoom-state.center-y :number|null
-
The y coordinate of the center of the viewport in the layout coordinate space By default the content will be centered vertically.
- Default Value:
null
- Supports writeback:
true
Names
Item Name Property panZoomState.centerY
-
pan-zoom-state.zoom :number
-
Specifies the zoom value of the diagram. The specified value should be between the diagram minZoom and maxZoom values. A value of 0, the default, indicates that the diagram should be zoomed in as much as possible while keeping all content visible.
- Default Value:
0.0
- Supports writeback:
true
Names
Item Name Property panZoomState.zoom
-
panning :"fixed"|"centerContent"|"none"|"auto"
-
Specifies whether panning is allowed in Diagram.
- Default Value:
"none"
Supported Values:
Value Description auto
One of the other described behaviors will be chosen at runtime based on the theme, form factor etc. centerContent
Panning is restricted based on the current zoom level to allow any area of the content to be centered. If an overview is being rendered, the overview.fitArea property should also be set to 'content' in most situations. fixed
Panning is restricted to the visible region when the diagram is rendered at minZoom. none
Panning is not allowed. Names
Item Name Property panning
Property change event panningChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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.- Default Value:
"lazy"
Supported Values:
Value full
lazy
none
Names
Item Name Property promotedLinkBehavior
Property change event promotedLinkBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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.
- Deprecated:
-
Since Description 8.0.0
Use nodeContent.renderer instead.
- Default Value:
null
Names
Item Name Property renderer
Property change event rendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) on-selection-changed
-
selection-mode :"none"|"single"|"multiple"
-
The type of selection behavior that is enabled on the diagram. This attribute controls the number of selections that can be made via selection gestures at any given time.
If
single
ormultiple
is specified, selection gestures will be enabled, and the diagram's selection styling will be applied to all items specified by the selection attribute. Ifnone
is specified, selection gestures will be disabled, and the diagram's selection styling will not be applied to any items specified by the selection attribute.Changing the value of this attribute will not affect the value of the selection attribute.
- Default Value:
"none"
Supported Values:
Value Description multiple
Multiple items can be selected at the same time. none
Selection is disabled. single
Only a single item can be selected at a time. Names
Item Name Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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.
- Deprecated:
-
Since Description 8.0.0
Use nodeContent.selectionRenderer instead.
- Default Value:
null
Names
Item Name Property selectionRenderer
Property change event selectionRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-renderer-changed
- An Object with the following property:
-
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, see Events and Listeners for additional information.) 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" style-defaults.link-defaults.end-connector-type :"arrowOpen"|"arrow"|"none"
-
Specifies the type of end connector on the link.
- Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Default Value:
"none"
Supported Values:
Value Description arrow
arrowConcave
arrowOpen
circle
none
rectangle
rectangleRounded
Names
Item Name Property styleDefaults.linkDefaults.endConnectorType
-
style-defaults.link-defaults.label-style :Partial<CSSStyleDeclaration>
-
The CSS style object defining the style of the link label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration. The default value comes from the CSS and varies based on theme.
Names
Item Name Property styleDefaults.linkDefaults.labelStyle
-
style-defaults.link-defaults.start-connector-type :"arrowOpen"|"arrow"|"arrowConcave"|"circle"|"rectangle"|"rectangleRounded"|"none" style-defaults.link-defaults.start-connector-type :"arrowOpen"|"arrow"|"none"
-
Specifies the type of start connector on the link.
- Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Deprecated:
-
Since Description 17.0.0
This value will be removed in the future. Please use the custom renderer instead. - Default Value:
"none"
Supported Values:
Value Description arrow
arrowConcave
arrowOpen
circle
none
rectangle
rectangleRounded
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 :Partial<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. Only SVG CSS style properties are supported.
- 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.
- Default Value:
"none"
Supported Values:
Value largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
none
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
Names
Item Name Property styleDefaults.nodeDefaults.icon.pattern
-
style-defaults.node-defaults.icon.shape :"circle"|"rectangle"|"square"|string
-
Default shape of the icon. Supported shapes are circle, square, and rectangle. For all other shapes please use the custom renderer. Diamond, ellipse, human, plus, star, triangleDown, and triangleUp were deprecated in 17.0.0.
- Default Value:
"circle"
Names
Item Name Property styleDefaults.nodeDefaults.icon.shape
-
style-defaults.node-defaults.icon.source :string
-
The URI of the node image
- Deprecated:
-
Since Description 17.0.0
Node source property has been deprecated. Please use custom renderer instead.
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.
- Deprecated:
-
Since Description 17.0.0
Node sourceHover property has been deprecated. Please use custom renderer instead.
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.
- Deprecated:
-
Since Description 17.0.0
Node sourceHoverSelected property has been deprecated. Please use custom renderer instead.
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.
- Deprecated:
-
Since Description 17.0.0
Node sourceSelected property has been deprecated. Please use custom renderer instead.
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 :Partial<CSSStyleDeclaration>
-
The default SVG CSS style object defining the style of the icon. Only SVG CSS style properties are supported.
- 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 :Partial<CSSStyleDeclaration>
-
The CSS style object defining the style of the node label. Supports backgroundColor, borderColor, borderRadius, borderWidth, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration 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.
- Default Value:
"on"
Supported Values:
Value off
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 :"arrowOpen"|"arrow"|"arrowConcave"|"circle"|"rectangle"|"rectangleRounded"|"none"
-
Specifies the type of end connector on the promoted link.
- Default Value:
"none"
Supported Values:
Value arrow
arrowConcave
arrowOpen
circle
none
rectangle
rectangleRounded
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.
- Default Value:
"none"
Supported Values:
Value arrow
arrowConcave
arrowOpen
circle
none
rectangle
rectangleRounded
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 :Partial<CSSStyleDeclaration>
-
The promoted style object represents the CSS style of the link. User defined custom CSS Styles will be applied directly on the link. Only SVG CSS style properties are supported.
- 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, see Events and Listeners for additional information.) on-tooltip-changed
-
tooltip.renderer :((context: ojDiagram.TooltipRendererContext<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.
- Default Value:
"auto"
Supported Values:
Value auto
touchStart
Names
Item Name Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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 callingrefresh
to render the element at the new size.- Default Value:
"on"
Supported Values:
Value off
on
Names
Item Name Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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, see Events and Listeners for additional information.) on-translations-changed
-
(nullable) translations.accessible-contains-controls :string
-
Used to describe a container that contains controls.
See the translations attribute for usage examples.
- Since:
- 13.0.0
Names
Item Name Property translations.accessibleContainsControls
-
(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 of 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 of 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.
- Deprecated:
-
Since Description 8.0.0
Use nodeContent.zoomRenderer instead.
- Default Value:
null
Names
Item Name Property zoomRenderer
Property change event zoomRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-zoom-renderer-changed
- An Object with the following property:
-
zooming :"auto"|"none"
-
Specifies whether zooming is allowed in Diagram.
- Default Value:
"none"
Supported Values:
Value auto
none
Names
Item Name Property zooming
Property change event zoomingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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:
-
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.
- Deprecated:
-
Since Description 12.1.0
The oj-before-collapse event has been deprecated. Lazy loading of data can be done through the data provider.
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information.Name Type Description nodeId
K1 the id of the collapsing object -
ojBeforeExpand
-
Triggered immediately before any container node in the diagram is expanded.
- Deprecated:
-
Since Description 12.1.0
The oj-before-expand event has been deprecated. Lazy loading of data can be done through the data provider.
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information.Name Type Description nodeId
K1 the id of the expanding object -
ojBeforePanZoomReset
-
Triggered in response to property changes and component resizes. By default, the panZoomState is reset in these cases such that the content is centered and zoomed to fit. This behavior can be prevented by listening to this event and calling event.preventDefault() which will cause the current panZoomState to be preserved.
See Events and Listeners for additional information.
-
ojCollapse
-
Triggered when a node has been collapsed.
- Deprecated:
-
Since Description 12.1.0
The oj-collapse event has been deprecated. Use on-expanded-changed instead.
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information.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.
- Deprecated:
-
Since Description 12.1.0
The oj-expand event has been deprecated. Use on-expanded-changed instead.
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information.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)
-
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 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. label
string Link label 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 pattern
string The pattern 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
-
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 Deprecated:
Since Description 7.0.0
The use of this function is no longer recommended. Properties:
Name Type Description color
string Link color count
number Number of links it represents 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
-
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
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
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
myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");
Type Definitions
-
DndNodeContext<K1,D1>
-
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Node.<K1> Relevant data for the object. id
K1 The id of the diagram object. itemData
D1 The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. 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. type
'node' The type of the diagram object. -
Link<K1, K2, D2=any>
-
Properties:
Name Type Argument Default Description categories
Array.<string> <optional>
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. 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. endNode
K2 Specifies the end node id. id
K1 <optional>
The id of the node. For the DataProvider case, the key for the node will be used as the id. label
string <optional>
"" Text used for the link label. labelStyle
Partial<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. The following style properties are supported: backgroundColor, borderColor, borderWidth, borderRadius, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration. selectable
"auto" | "off" <optional>
"auto" Specifies whether or not the link will be selectable. shortDesc
(string | ((context: ojDiagram.LinkShortDescContext<K1,K2,D2>) => string)) <optional>
"" The text that displays in the link's tooltip. Will be lazily created if a function is used. 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. startNode
K2 Specifies the start node id. svgClassName
string <optional>
"" The CSS style class defining the style of the link. svgStyle
Partial<CSSStyleDeclaration> <optional>
{} The CSS style object defining the style of the link. Only SVG CSS style properties are supported. width
number <optional>
The link width in pixels. -
LinkContentTemplateContext<K1,K2,D2>
-
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Link.<K2, K1> The data object for the link or an array of data objects for the promoted link. If DataProvider is being used, this property contains template processed data. id
K2 Link id. itemData
D2 | D2[] The row data object for the link or an array of row data objects for the promoted link. This will only be set if an DataProvider is being used. parentElement
Element A parent group element that takes a custom SVG fragment as the link content. Modifications of the parentElement are not supported. points
array | string An array of points or a string with SVG path to use for rendering this link as set by diagram layout. When custom renderer is used for link creation, the property will contain an array of x and y points for the link start and link end calculated by Diagram. previousState
Object An object that reflects the previous state of the data item. Properties
Name Type Description focused
boolean True if the link was previously selected. hovered
boolean True if the link was previously hovered. inActionableMode
boolean True if the link was previously in actionable mode. selected
boolean True if the link was previously selected. rootElement
Element | null Null on initial rendering or SVG element for the link. state
Object An object that reflects the current state of the data item. Properties
Name Type Description focused
boolean True if the link is currently selected. hovered
boolean True if the link is currently hovered. inActionableMode
boolean True if the link is currently in actionable mode. selected
boolean True if the link is currently selected. type
'link' | 'promotedLink' Object type is 'link' or 'promotedLink'. -
LinkItemContext<K1,K2,D2>
-
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Link.<K2, K1> Relevant data for the object. id
K2 The id of the diagram object. itemData
D2 The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. type
'link' The type of the diagram object. -
LinkRendererContext<K1,K2,D2>
-
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Link.<K2, K1> The data object for the link or an array of data objects for the promoted link. If DataProvider is being used, this property contains template processed data. id
K2 Link id. itemData
D2 | D2[] The row data object for the link or an array of row data objects for the promoted link. This will only be set if an DataProvider is being used. parentElement
Element A parent group element that takes a custom SVG fragment as the link content. Modifications of the parentElement are not supported. points
array | string An array of points or a string with SVG path to use for rendering this link as set by diagram layout. When custom renderer is used for link creation, the property will contain an array of x and y points for the link start and link end calculated by Diagram. previousState
Object An object that reflects the previous state of the data item. Properties
Name Type Description focused
boolean True if the link was previously selected. hovered
boolean True if the link was previously hovered. inActionableMode
boolean True if the link was previously in actionable mode. selected
boolean True if the link was previously selected. rootElement
Element | null Null on initial rendering or SVG element for the link. state
Object An object that reflects the current state of the data item. Properties
Name Type Description focused
boolean True if the link is currently selected. hovered
boolean True if the link is currently hovered. inActionableMode
boolean True if the link is currently in actionable mode. selected
boolean True if the link is currently selected. type
'link' | 'promotedLink' Object type is 'link' or 'promotedLink'. -
LinkShortDescContext<K1,K2,D2>
-
Properties:
Name Type Description data
oj.ojDiagram.Link.<K2, K1> | ojDiagram.Link<K2, K1>[] Relevant data for the link id
K2 The id of the link itemData
D2 | D2[] The The row data object for the link. This will only be set if an oj.DataProvider is being used. label
string The label of the link -
LinkTemplateContext
-
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
Properties:
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. -
Node<K1,D1=any>
-
Properties:
Name Type Argument Default Description 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. descendantsConnectivity
"connected" | "disjoint" | "unknown" <optional>
"unknown" Indicates whether the specified object contains links that should be discovered in order to display promoted links. 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. height
number <optional>
The height of the icon. opacity
number <optional>
The opacity of the icon. pattern
?'largeDiagonalLeft' | 'largeDiagonalRight' | 'largeDiamond' | 'largeTriangle' | 'none' | 'mallChecker' | 'smallCrosshatch' | 'smallDiagonalLeft' | 'smallDiagonalRight' | 'smallDiamond' | 'smallTriangle' | string <optional>
The fill pattern of the icon. shape
"circle" | "rectangle" | "square" <optional>
The shape of the icon. Diagram supports square, circle, and rectangle. For all other shapes, please use the custom renderer or template instead. Diamond, ellipse, human, plus, star, triangleDown, and triangleUp were deprecated in 17.0.0. 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. 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. svgStyle
Partial<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. Only SVG CSS style properties are supported. width
number <optional>
The width of the icon. id
K1 <optional>
The id of the node. For the DataProvider case, the key for the node will be used as the id. label
string <optional>
'' Text used for the node label. labelStyle
Partial<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. The following style properties are supported: backgroundColor, borderColor, borderWidth, borderRadius, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration. 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' | 'rectangle' | 'square' | 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. Diamond, ellipse, human, plus, star, triangleDown, and triangleUp were deprecated in 17.0.0. 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). svgClassName
string <optional>
The CSS style class defining the style of the node icon in the overview. svgStyle
Partial<CSSStyleDeclaration> <optional>
The CSS style object defining the style of the node icon in the overview. Only SVG CSS style properties are supported. selectable
"auto" | "off" <optional>
"auto" Specifies whether or not the node will be selectable. shortDesc
(string | ((context: ojDiagram.NodeShortDescContext<K1,D1>) => string)) <optional>
"" The text that displays in the node's tooltip. Will be lazily created if a function is used. showDisclosure
"on" | "off" <optional>
Determines when to display the expand/collapse button. -
NodeContentTemplateContext<K1,D1>
-
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component. - Deprecated:
-
Since Description 17.0.0
The renderDefaultFocus property is deprecated. This behavior can be implemented in the custom template. - Deprecated:
-
Since Description 17.0.0
The renderDefaultHover property is deprecated. This behavior can be implemented in the custom template. - Deprecated:
-
Since Description 17.0.0
The renderDefaultSelection property is deprecated. This behavior can be implemented in the custom template.
Properties:
Name Type Description componentElement
Element The diagram element. 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. height
number Height of the child content. width
number Width of the child content. data
oj.ojDiagram.Node.<K1> The data object for the node. If DataProvider is being used, this property contains template processed data. id
K1 Node id. itemData
D1 The row data object for the node. This will only be set if an DataProvider is being used. parentElement
Element A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported. previousState
Object An object that reflects the previous state of the data item. Properties
Name Type Description expanded
boolean True if the node was previously expanded. focused
boolean True if the node was previously selected. hovered
boolean True if the node was previously hovered. inActionableMode
boolean True if the node was previously in actionable mode. selected
boolean True if the node was previously selected. zoom
number Previous zoom state. 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 rootElement
Element | null Null on initial rendering or SVG element for the node. state
Object An object that reflects the current state of the data item. Properties
Name Type Description expanded
boolean True if the node is expanded. focused
boolean True if the node is currently selected. hovered
boolean True if the node is currently hovered. inActionableMode
boolean True if the node is currently in actionable mode. selected
boolean True if the node is currently selected. zoom
number Current zoom state. type
string Object type = node. -
NodeContext
-
Properties:
Name Type Description index
number The zero based index of the diagram item. subId
'oj-diagram-link' | 'oj-diagram-node' The subId string identify the particular DOM node. -
NodeItemContext<K1,D1>
-
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Node.<K1> Relevant data for the object. id
K1 The id of the diagram object. itemData
D1 The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. type
'node' The type of the diagram object. -
NodeShortDescContext<K1,D1>
-
Properties:
Name Type Description data
oj.ojDiagram.Node.<K1> Relevant data for the node id
K1 The id of the node itemData
D1 The The row data object for the node. This will only be set if an oj.DataProvider is being used. label
string The label of the node -
NodeTemplateContext
-
Properties:
Name Type Description 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. -
PromotedLinkItemContext<K1,K2,D2>
-
Properties:
Name Type Description componentElement
Element The diagram element. data
ojDiagram.Link<K2, K1>[] Relevant data for the object. id
K2 The id of the diagram object. itemData
D2[] The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. type
'promotedLink' The type of the diagram object. -
RendererContext<K1,D1>
-
- Deprecated:
-
Since Description 17.0.0
The renderDefaultFocus property is deprecated. This behavior can be implemented in the custom renderer. - Deprecated:
-
Since Description 17.0.0
The renderDefaultHover property is deprecated. This behavior can be implemented in the custom renderer. - Deprecated:
-
Since Description 17.0.0
The renderDefaultSelection property is deprecated. This behavior can be implemented in the custom renderer.
Properties:
Name Type Description componentElement
Element The diagram element. 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. height
number Height of the child content. width
number Width of the child content. data
oj.ojDiagram.Node.<K1> The data object for the node. If DataProvider is being used, this property contains template processed data. id
K1 Node id. itemData
D1 The row data object for the node. This will only be set if an DataProvider is being used. parentElement
Element A parent group element that takes a custom SVG fragment as the node content. Modifications of the parentElement are not supported. previousState
Object An object that reflects the previous state of the data item. Properties
Name Type Description expanded
boolean True if the node was previously expanded. focused
boolean True if the node was previously selected. hovered
boolean True if the node was previously hovered. inActionableMode
boolean True if the node was previously in actionable mode. selected
boolean True if the node was previously selected. zoom
number Previous zoom state. 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 rootElement
Element | null Null on initial rendering or SVG element for the node. state
Object An object that reflects the current state of the data item. Properties
Name Type Description expanded
boolean True if the node is expanded. focused
boolean True if the node is currently selected. hovered
boolean True if the node is currently hovered. inActionableMode
boolean True if the node is currently in actionable mode. selected
boolean True if the node is currently selected. zoom
number Current zoom state. type
string Object type = node. -
TooltipContext<K1,K2,D1,D2>
-
- Deprecated:
-
Since Description 16.0.0
The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Node.<K1> | oj.ojDiagram.Link.<K2, K1> | ojDiagram.Link<K2, K1>[] Relevant data for the object. id
K1 | K2 The id of the diagram object. itemData
D1 | D2 | D2[] The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. parentElement
Element The tooltip element. The function can directly modify or append content to this element. type
'node' | 'link' | 'promotedLink' The type of the diagram object. -
TooltipRendererContext<K1,K2,D1,D2>
-
Properties:
Name Type Description componentElement
Element The diagram element. data
oj.ojDiagram.Node.<K1> | oj.ojDiagram.Link.<K2, K1> | ojDiagram.Link<K2, K1>[] Relevant data for the object. id
K1 | K2 The id of the diagram object. itemData
D1 | D2 | D2[] The row data object for the object. This will only be set if an oj.DataProvider is being used. label
string The label of the diagram object. parentElement
Element The tooltip element. The function can directly modify or append content to this element. type
'node' | 'link' | 'promotedLink' The type of the diagram object.