Element: <oj-diagram-node>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojDiagramNode

QuickNav

Attributes


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

Version:
  • 7.1.0
Since:
  • 6.0.0
Module:
  • ojdiagram

Module usage

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

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

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

JET In Typescript

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

JET Diagram Node

The oj-diagram-node element is used to declare properties for diagram nodes and is only valid as the child of a template element for the nodeTemplate slot of oj-diagram.


<oj-diagram link-data='[[linkDataProvider]]' node-data='[[nodeDataProvider]]'>
 <template slot='nodeTemplate' data-oj-as='node'>
   <oj-diagram-node icon.shape='[[node.data.shape]]' icon.color='[[node.data.color]]' icon.width='50' icon.height='20'>
   </oj-diagram-node>
 </template>
</oj-diagram>

Attributes

categories :Array.<string>

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.

descendants-connectivity :"connected"|"disjoint"|"unknown"

Indicates whether the specified object contains links that should be discovered in order to display promoted links.
Supported Values:
Value
"connected"
"disjoint"
"unknown"
Default Value:
  • "unknown"

icon :Object

Specifies an icon to be used as a graphical element for the node
Default Value:
  • {}

icon.border-color :string

The border color of the icon.

icon.border-radius :string

The border radius of the icon. CSS border-radius values accepted. Note that non-% values (including unitless) get interpreted as 'px'.

icon.border-width :number

The border width in pixels.

icon.color :string

The fill color of the icon.

icon.height :number

The height of the icon.

icon.opacity :number

The opacity of the icon.

(nullable) icon.pattern :('largeDiagonalLeft'|'largeDiagonalRight'|'largeDiamond'|'largeTriangle'|'none'|'mallChecker'|'smallCrosshatch'|'smallDiagonalLeft'|'smallDiagonalRight'|'smallDiamond'|'smallTriangle'|string)

The fill pattern of the icon.

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

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

icon.source :string

The URI of the node image.

icon.source-hover :string

The optional URI of the node hover image. If not defined, the source image will be used.

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.

icon.source-selected :string

The optional URI of the selected image. If not defined, the source image will be used.

icon.svg-class-name :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.

icon.svg-style :CSSStyleDeclaration

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.

icon.width :number

The width of the icon.

label :string

Text used for the node label.
Default Value:
  • ''

label-style :(CSSStyleDeclaration|null)

The CSS style object defining the style of the diagram node label. The default values come from the CSS classes and varies based on theme.

overview :Object

Specifies overview node shape.
Default Value:
  • {}

overview.icon :Object

Specifies overview node shape.

(nullable) overview.icon.shape :('inherit'|'circle'|'diamond'|'ellipse'|'human'|'plus'|'rectangle'|'square'|'star'|'triangleDown'|'triangleUp'|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. 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).

overview.icon.svg-class-name :string

The CSS style class defining the style of the node icon in the overview.

overview.icon.svg-style :CSSStyleDeclaration

The CSS style object defining the style of the node icon in the overview.

selectable :"auto"|"off"

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

short-desc :string

The text that displays in the node's tooltip.
Default Value:
  • ""

show-disclosure :"on"|"off"

Determines when to display the expand/collapse button.
Supported Values:
Value
"off"
"on"