Element: <oj-diagram-node>

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-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.

(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 :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'|'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 :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