Element: <oj-diagram-node>

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 6.0.0
Module:
  • ojdiagram

QuickNav

Attributes


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>


Usage

Signature:

interface DiagramNodeElement<K1=any, D1=any>

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

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

For additional information visit:


Attributes

categories :Array.<string>

An array of category strings corresponding to this 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.
Deprecated:
Since Description
17.0.0 Node opacity has been deprecated. Please use custom renderer or template instead.

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

The fill pattern of the icon.

icon.shape :"circle"|"rectangle"|"square"

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.

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 or template instead.

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 or template instead.

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 or template instead.

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 or template instead.

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 :Partial<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. Only SVG CSS style properties are supported.

icon.width :number

The width of the icon.

label :string

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

label-style :Partial<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. The following style properties are supported: backgroundColor, borderColor, borderWidth, borderRadius, color, cursor, fontFamily, fontSize, fontStyle, fontWeight, maxWidth, textDecoration.

overview :Object

Specifies overview node shape.
Default Value:
  • {}

overview.icon :Object

Specifies overview node shape.

(nullable) overview.icon.shape :('inherit'|'circle'|'rectangle'|'square'|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. 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).

overview.icon.svg-class-name :string

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

overview.icon.svg-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the node icon in the overview. Only SVG CSS style properties are supported.

selectable :"auto"|"off"

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

short-desc :(string | ((context: ojDiagram.NodeShortDescContext<K1,D1>) => string))

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

show-disclosure :"on"|"off"

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