Usage
Signature:
Generic Parameters
Parameter Description K1 Type of key of the nodeData dataprovider D1 Type 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.
- Default Value:
"unknown"
Supported Values:
Value connected
disjoint
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.
- Default Value:
"auto"
Supported Values:
Value auto
off
-
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