@graphty/graphty-element / Styles / Styles

Class: Styles

Defined in: src/Styles.ts:30

Manages style layers and computes styles for nodes and edges.

Constructors

Constructor

new Styles(config): Styles

Defined in: src/Styles.ts:48

Creates a new Styles instance from a style configuration.

View mode controls how the graph is rendered and displayed.

"2d": Orthographic camera, fixed top-down view
"3d": Perspective camera with orbit controls (default)
"ar": Augmented reality mode using WebXR
"vr": Virtual reality mode using WebXR

Properties

config

readonly config: object

Defined in: src/Styles.ts:31

behavior

behavior: object

behavior.fetchEdges?

optional fetchEdges: Function

behavior.fetchNodes?

optional fetchNodes: Function

behavior.layout

layout: object

behavior.layout.minDelta

minDelta: number

behavior.layout.preSteps

preSteps: number

behavior.layout.stepMultiplier

stepMultiplier: number

behavior.layout.type

type: string

behavior.layout.zoomStepInterval

zoomStepInterval: number

behavior.node

node: object = NodeBehaviorOpts

behavior.node.pinOnDrag

pinOnDrag: boolean

data

data: object

data.algorithms?

optional algorithms: string[]

data.knownFields

knownFields: object

data.knownFields.edgeDstIdPath

edgeDstIdPath: string

data.knownFields.edgeSrcIdPath

edgeSrcIdPath: string

data.knownFields.edgeTimePath

edgeTimePath: string | null

data.knownFields.edgeWeightPath

edgeWeightPath: string | null

data.knownFields.nodeIdPath

nodeIdPath: string

data.knownFields.nodeTimePath

nodeTimePath: string | null

data.knownFields.nodeWeightPath

nodeWeightPath: string | null

graph

graph: object

graph.addDefaultStyle

addDefaultStyle: boolean

graph.background

background: { backgroundType: "color"; color: string | undefined; } | { backgroundType: "skybox"; data: string; }

graph.effects?

optional effects: object

graph.effects.depthOfField?

optional depthOfField: number

graph.effects.motionBlur?

optional motionBlur: number

graph.effects.screenSpaceReflections?

optional screenSpaceReflections: boolean

graph.layout?

optional layout: string

graph.layoutOptions?

optional layoutOptions: object

Index Signature

[key: string]: unknown

graph.startingCameraDistance

startingCameraDistance: number

graph.twoD

twoD: boolean

Deprecated

Use viewMode instead. twoD: true is equivalent to viewMode: "2d"

graph.viewMode

viewMode: "2d" | "3d" | "ar" | "vr"

View mode controls how the graph is rendered and displayed.

"2d": Orthographic camera, fixed top-down view
"3d": Perspective camera with orbit controls (default)
"ar": Augmented reality mode using WebXR
"vr": Virtual reality mode using WebXR

graphtyTemplate

graphtyTemplate: true

layers

layers: object[]

majorVersion

majorVersion: "1"

metadata?

optional metadata: object

metadata.templateCreationTimestamp?

optional templateCreationTimestamp: string

metadata.templateCreator?

optional templateCreator: string

metadata.templateModificationTimestamp?

optional templateModificationTimestamp: string

metadata.templateName?

optional templateName: string

Accessors

layers

Get Signature

get layers(): readonly object[]

Defined in: src/Styles.ts:40

Gets the read-only array of style layers.

Returns

readonly object[]

Array of style layers

Methods

addLayer()

addLayer(layer): void

Defined in: src/Styles.ts:127

Adds a new style layer to the end of the layer stack.

edge.style.arrowHead.text.backgroundGradient?

boolean = ...

edge.style.arrowHead.text.backgroundGradientColors?

(... | ...)[] = ...

edge.style.arrowHead.text.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

edge.style.arrowHead.text.backgroundGradientType?

"linear" | "radial" = ...

edge.style.arrowHead.text.backgroundPadding?

number = ...

number = ...

edge.style.arrowTail.size?

number = ...

edge.style.arrowTail.text?

edge.style.arrowTail.text.animation?

edge.style.arrowTail.text.animationSpeed?

number = ...

edge.style.arrowTail.text.attachOffset?

number = ...

edge.style.arrowTail.text.attachPosition?

edge.style.arrowTail.text.autoSize?

boolean = ...

edge.style.arrowTail.text.backgroundColor?

edge.style.arrowTail.text.backgroundGradient?

boolean = ...

edge.style.arrowTail.text.backgroundGradientColors?

(... | ...)[] = ...

edge.style.arrowTail.text.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

edge.style.arrowTail.text.backgroundGradientType?

"linear" | "radial" = ...

edge.style.arrowTail.text.backgroundPadding?

number = ...

number = ...

edge.style.label.backgroundGradient?

boolean = ...

edge.style.label.backgroundGradientColors?

(string | undefined)[] = ...

edge.style.label.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

edge.style.label.backgroundGradientType?

"linear" | "radial" = ...

edge.style.label.backgroundPadding?

number = ...

number = ...

string = ...

edge.style.line.opacity?

number = ...

edge.style.line.type?

edge.style.line.width?

number = ...

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

number = ...

boolean = ...

(string | undefined)[] = ...

"vertical" | "horizontal" | "diagonal" = ...

"linear" | "radial" = ...

number = ...

number = ...

string = ...

object[] = ...

number = ...

boolean = ...

number = ...

boolean = ...

string = ...

number = ...

string = ...

"left" | "right" = ...

number = ...

number = ...

string = ...

boolean = ...

"top" | "left" | "right" | "bottom" | "auto" = ...

number = ...

{ x: number; y: number; z: number; } = ...

number = ...

boolean = ...

string = ...

"left" | "center" | "right" = ...

string = ...

boolean = ...

string = ...

"round" | "bevel" | "miter" = ...

number = ...

string = ...

boolean = ...

boolean = ...

node.style.label?

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

node.style.label.animation?

node.style.label.animationSpeed?

number = ...

node.style.label.attachOffset?

number = ...

node.style.label.attachPosition?

node.style.label.autoSize?

boolean = ...

node.style.label.backgroundColor?

node.style.label.backgroundGradient?

boolean = ...

node.style.label.backgroundGradientColors?

(string | undefined)[] = ...

node.style.label.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

node.style.label.backgroundGradientType?

"linear" | "radial" = ...

node.style.label.backgroundPadding?

number = ...

number = ...

node.style.texture?

{ color?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; icon?: string; image?: string; } = ...

node.style.texture.color?

node.style.texture.icon?

string = ...

node.style.texture.image?

string = ...

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

number = ...

boolean = ...

(string | undefined)[] = ...

"vertical" | "horizontal" | "diagonal" = ...

"linear" | "radial" = ...

number = ...

number = ...

string = ...

object[] = ...

number = ...

boolean = ...

number = ...

boolean = ...

string = ...

number = ...

string = ...

"left" | "right" = ...

number = ...

number = ...

string = ...

boolean = ...

"top" | "left" | "right" | "bottom" | "auto" = ...

number = ...

{ x: number; y: number; z: number; } = ...

number = ...

boolean = ...

string = ...

"left" | "center" | "right" = ...

string = ...

boolean = ...

string = ...

"round" | "bevel" | "miter" = ...

number = ...

string = ...

boolean = ...

number = ...

string = ...

number = ...

Returns

void

default()

static default(): Styles

Defined in: src/Styles.ts:116

Creates a default Styles instance with minimal configuration.

Returns

Styles

New default Styles instance

fromJson()

static fromJson(json): Styles

Defined in: src/Styles.ts:73

Creates a Styles instance from a JSON string.

Parameters

json

string

JSON string containing style configuration

Returns

Styles

New Styles instance

fromObject()

static fromObject(obj): Styles

Defined in: src/Styles.ts:83

Creates a Styles instance from a plain object.

Parameters

obj

object

Object containing style configuration

Returns

Styles

New Styles instance

fromUrl()

static fromUrl(url): Promise<Styles>

Defined in: src/Styles.ts:101

Fetches and creates a Styles instance from a URL.

Parameters

url

string

URL to fetch style configuration from

Returns

Promise<Styles>

Promise resolving to new Styles instance

getCalculatedStylesForEdge()

getCalculatedStylesForEdge(data): CalculatedValue[]

Defined in: src/Styles.ts:213

Retrieves calculated style values for an edge from matching layers.

Parameters

data

AdHocData

Edge data for selector matching

Returns

CalculatedValue[]

Array of calculated values to apply to the edge

getCalculatedStylesForNode()

getCalculatedStylesForNode(data): CalculatedValue[]

Defined in: src/Styles.ts:191

Retrieves calculated style values for a node from matching layers.

Parameters

data

AdHocData

Node data for selector matching

Returns

CalculatedValue[]

Array of calculated values to apply to the node

getEdgeIdForStyle()

static getEdgeIdForStyle(style): EdgeStyleId

Defined in: src/Styles.ts:317

Gets or creates a style ID for an edge style configuration.

Parameters

style

Edge style configuration

arrowHead?

{ color?: string; opacity?: number; size?: number; text?: { animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; }; type?: "none" | "dot" | "normal" | "inverted" | "sphere-dot" | "open-dot" | "tee" | "open-normal" | "diamond" | "open-diamond" | "crow" | "box" | "half-open" | "vee"; } = ...

arrowHead.color?

string = ...

arrowHead.opacity?

number = ...

arrowHead.size?

number = ...

arrowHead.text?

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

arrowHead.text.animation?

arrowHead.text.animationSpeed?

number = ...

arrowHead.text.attachOffset?

number = ...

arrowHead.text.attachPosition?

arrowHead.text.autoSize?

boolean = ...

arrowHead.text.backgroundColor?

arrowHead.text.backgroundGradient?

boolean = ...

arrowHead.text.backgroundGradientColors?

(string | undefined)[] = ...

arrowHead.text.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

arrowHead.text.backgroundGradientType?

"linear" | "radial" = ...

arrowHead.text.backgroundPadding?

number = ...

number = ...

string = ...

arrowHead.text.textShadowOffsetX?

number = ...

arrowHead.text.textShadowOffsetY?

number = ...

arrowHead.type?

arrowTail?

{ color?: string; opacity?: number; size?: number; text?: { animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; }; type?: "none" | "dot" | "normal" | "inverted" | "sphere-dot" | "open-dot" | "tee" | "open-normal" | "diamond" | "open-diamond" | "crow" | "box" | "half-open" | "vee"; } = ...

arrowTail.color?

string = ...

arrowTail.opacity?

number = ...

arrowTail.size?

number = ...

arrowTail.text?

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

arrowTail.text.animation?

arrowTail.text.animationSpeed?

number = ...

arrowTail.text.attachOffset?

number = ...

arrowTail.text.attachPosition?

arrowTail.text.autoSize?

boolean = ...

arrowTail.text.backgroundColor?

arrowTail.text.backgroundGradient?

boolean = ...

arrowTail.text.backgroundGradientColors?

(string | undefined)[] = ...

arrowTail.text.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

arrowTail.text.backgroundGradientType?

"linear" | "radial" = ...

arrowTail.text.backgroundPadding?

number = ...

number = ...

label.attachPosition?

label.autoSize?

boolean = ...

label.backgroundColor?

label.backgroundGradient?

boolean = ...

label.backgroundGradientColors?

(string | undefined)[] = ...

label.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

label.backgroundGradientType?

"linear" | "radial" = ...

label.backgroundPadding?

number = ...

number = ...

string = ...

label.textShadowOffsetX?

number = ...

label.textShadowOffsetY?

number = ...

line?

line.animationSpeed?

number = ...

line.bezier?

boolean = ...

line.color?

string = ...

line.opacity?

number = ...

line.type?

line.width?

number = ...

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

number = ...

boolean = ...

(string | undefined)[] = ...

"vertical" | "horizontal" | "diagonal" = ...

"linear" | "radial" = ...

number = ...

number = ...

string = ...

object[] = ...

number = ...

boolean = ...

number = ...

boolean = ...

string = ...

number = ...

string = ...

"left" | "right" = ...

number = ...

number = ...

string = ...

boolean = ...

"top" | "left" | "right" | "bottom" | "auto" = ...

number = ...

{ x: number; y: number; z: number; } = ...

number = ...

boolean = ...

string = ...

"left" | "center" | "right" = ...

string = ...

boolean = ...

string = ...

"round" | "bevel" | "miter" = ...

number = ...

string = ...

boolean = ...

number = ...

string = ...

number = ...

Returns

EdgeStyleId

Edge style identifier

getNodeIdForStyle()

static getNodeIdForStyle(style): NodeStyleId

Defined in: src/Styles.ts:308

Gets or creates a style ID for a node style configuration.

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

label.animation?

label.animationSpeed?

number = ...

label.attachOffset?

number = ...

label.attachPosition?

label.autoSize?

boolean = ...

label.backgroundColor?

label.backgroundGradient?

boolean = ...

label.backgroundGradientColors?

(string | undefined)[] = ...

label.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

label.backgroundGradientType?

"linear" | "radial" = ...

label.backgroundPadding?

number = ...

number = ...

string = ...

number = ...

boolean = ...

(string | undefined)[] = ...

"vertical" | "horizontal" | "diagonal" = ...

"linear" | "radial" = ...

number = ...

number = ...

string = ...

object[] = ...

number = ...

boolean = ...

number = ...

boolean = ...

string = ...

number = ...

string = ...

"left" | "right" = ...

number = ...

number = ...

string = ...

boolean = ...

"top" | "left" | "right" | "bottom" | "auto" = ...

number = ...

{ x: number; y: number; z: number; } = ...

number = ...

boolean = ...

string = ...

"left" | "center" | "right" = ...

string = ...

boolean = ...

string = ...

"round" | "bevel" | "miter" = ...

number = ...

string = ...

boolean = ...

number = ...

string = ...

number = ...

Returns

NodeStyleId

Node style identifier

getStyleForEdge()

getStyleForEdge(data, algorithmResults?): EdgeStyleId

Defined in: src/Styles.ts:244

Computes the merged style for an edge by applying matching layers.

Parameters

data

AdHocData

Edge data for selector matching

algorithmResults?

AdHocData

Optional algorithm results for selector matching

Returns

EdgeStyleId

Style ID for the computed edge style

getStyleForEdgeStyleId()

static getStyleForEdgeStyleId(id): object

Defined in: src/Styles.ts:294

Retrieves the edge style configuration for a given style ID.

Parameters

id

EdgeStyleId

Edge style identifier

Returns

object

Edge style configuration

arrowHead?

optional arrowHead: object

arrowHead.color?

optional color: string

arrowHead.opacity?

optional opacity: number

arrowHead.size?

optional size: number

arrowHead.text?

optional text: object

arrowHead.text.animation?

optional animation: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"

arrowHead.text.animationSpeed?

optional animationSpeed: number

arrowHead.text.attachOffset?

optional attachOffset: number

arrowHead.text.attachPosition?

optional attachPosition: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"

arrowHead.text.autoSize?

optional autoSize: boolean

arrowHead.text.backgroundColor?

optional backgroundColor: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

arrowHead.text.backgroundGradient?

optional backgroundGradient: boolean

arrowHead.text.backgroundGradientColors?

optional backgroundGradientColors: (string | undefined)[]

arrowHead.text.backgroundGradientDirection?

optional backgroundGradientDirection: "vertical" | "horizontal" | "diagonal"

arrowHead.text.backgroundGradientType?

optional backgroundGradientType: "linear" | "radial"

arrowHead.text.backgroundPadding?

optional backgroundPadding: number

arrowHead.text.badge?

optional badge: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"

arrowHead.text.billboardMode?

optional billboardMode: number

arrowHead.text.borderColor?

optional borderColor: string

arrowHead.text.borders?

optional borders: object[]

arrowHead.text.borderWidth?

optional borderWidth: number

arrowHead.text.cornerRadius?

optional cornerRadius: number

arrowHead.text.depthFadeEnabled?

optional depthFadeEnabled: boolean

arrowHead.text.depthFadeFar?

optional depthFadeFar: number

arrowHead.text.depthFadeNear?

optional depthFadeNear: number

arrowHead.text.enabled?

optional enabled: boolean

arrowHead.text.font?

optional font: string

arrowHead.text.fontSize?

optional fontSize: number

arrowHead.text.fontWeight?

optional fontWeight: string

arrowHead.text.icon?

optional icon: string

arrowHead.text.iconPosition?

optional iconPosition: "left" | "right"

arrowHead.text.lineHeight?

optional lineHeight: number

arrowHead.text.location?

optional location: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"

arrowHead.text.marginBottom?

optional marginBottom: number

arrowHead.text.marginLeft?

optional marginLeft: number

arrowHead.text.marginRight?

optional marginRight: number

arrowHead.text.marginTop?

optional marginTop: number

arrowHead.text.maxNumber?

optional maxNumber: number

arrowHead.text.overflowSuffix?

optional overflowSuffix: string

arrowHead.text.pointer?

optional pointer: boolean

arrowHead.text.pointerCurve?

optional pointerCurve: boolean

arrowHead.text.pointerDirection?

optional pointerDirection: "top" | "left" | "right" | "bottom" | "auto"

arrowHead.text.pointerHeight?

optional pointerHeight: number

arrowHead.text.pointerOffset?

optional pointerOffset: number

arrowHead.text.pointerWidth?

optional pointerWidth: number

arrowHead.text.position?

optional position: object

arrowHead.text.position.x

x: number

arrowHead.text.position.y

y: number

arrowHead.text.position.z

z: number

arrowHead.text.progress?

optional progress: number

arrowHead.text.resolution?

optional resolution: number

arrowHead.text.smartOverflow?

optional smartOverflow: boolean

arrowHead.text.text?

optional text: string

arrowHead.text.textAlign?

optional textAlign: "left" | "center" | "right"

arrowHead.text.textColor?

optional textColor: string

arrowHead.text.textOutline?

optional textOutline: boolean

arrowHead.text.textOutlineColor?

optional textOutlineColor: string

arrowHead.text.textOutlineJoin?

optional textOutlineJoin: "round" | "bevel" | "miter"

arrowHead.text.textOutlineWidth?

optional textOutlineWidth: number

arrowHead.text.textPath?

optional textPath: string

arrowHead.text.textShadow?

optional textShadow: boolean

arrowHead.text.textShadowBlur?

optional textShadowBlur: number

arrowHead.text.textShadowColor?

optional textShadowColor: string

arrowHead.text.textShadowOffsetX?

optional textShadowOffsetX: number

arrowHead.text.textShadowOffsetY?

optional textShadowOffsetY: number

arrowHead.type?

optional type: "none" | "dot" | "normal" | "inverted" | "sphere-dot" | "open-dot" | "tee" | "open-normal" | "diamond" | "open-diamond" | "crow" | "box" | "half-open" | "vee"

arrowTail?

optional arrowTail: object

arrowTail.color?

optional color: string

arrowTail.opacity?

optional opacity: number

arrowTail.size?

optional size: number

arrowTail.text?

optional text: object

arrowTail.text.animation?

optional animation: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"

arrowTail.text.animationSpeed?

optional animationSpeed: number

arrowTail.text.attachOffset?

optional attachOffset: number

arrowTail.text.attachPosition?

optional attachPosition: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"

arrowTail.text.autoSize?

optional autoSize: boolean

arrowTail.text.backgroundColor?

optional backgroundColor: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

arrowTail.text.backgroundGradient?

optional backgroundGradient: boolean

arrowTail.text.backgroundGradientColors?

optional backgroundGradientColors: (string | undefined)[]

arrowTail.text.backgroundGradientDirection?

optional backgroundGradientDirection: "vertical" | "horizontal" | "diagonal"

arrowTail.text.backgroundGradientType?

optional backgroundGradientType: "linear" | "radial"

arrowTail.text.backgroundPadding?

optional backgroundPadding: number

arrowTail.text.badge?

optional badge: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"

arrowTail.text.billboardMode?

optional billboardMode: number

arrowTail.text.borderColor?

optional borderColor: string

arrowTail.text.borders?

optional borders: object[]

arrowTail.text.borderWidth?

optional borderWidth: number

arrowTail.text.cornerRadius?

optional cornerRadius: number

arrowTail.text.depthFadeEnabled?

optional depthFadeEnabled: boolean

arrowTail.text.depthFadeFar?

optional depthFadeFar: number

arrowTail.text.depthFadeNear?

optional depthFadeNear: number

arrowTail.text.enabled?

optional enabled: boolean

arrowTail.text.font?

optional font: string

arrowTail.text.fontSize?

optional fontSize: number

arrowTail.text.fontWeight?

optional fontWeight: string

arrowTail.text.icon?

optional icon: string

arrowTail.text.iconPosition?

optional iconPosition: "left" | "right"

arrowTail.text.lineHeight?

optional lineHeight: number

arrowTail.text.location?

optional location: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"

arrowTail.text.marginBottom?

optional marginBottom: number

arrowTail.text.marginLeft?

optional marginLeft: number

arrowTail.text.marginRight?

optional marginRight: number

arrowTail.text.marginTop?

optional marginTop: number

arrowTail.text.maxNumber?

optional maxNumber: number

arrowTail.text.overflowSuffix?

optional overflowSuffix: string

arrowTail.text.pointer?

optional pointer: boolean

arrowTail.text.pointerCurve?

optional pointerCurve: boolean

arrowTail.text.pointerDirection?

optional pointerDirection: "top" | "left" | "right" | "bottom" | "auto"

arrowTail.text.pointerHeight?

optional pointerHeight: number

arrowTail.text.pointerOffset?

optional pointerOffset: number

arrowTail.text.pointerWidth?

optional pointerWidth: number

arrowTail.text.position?

optional position: object

arrowTail.text.position.x

x: number

arrowTail.text.position.y

y: number

arrowTail.text.position.z

z: number

arrowTail.text.progress?

optional progress: number

arrowTail.text.resolution?

optional resolution: number

arrowTail.text.smartOverflow?

optional smartOverflow: boolean

arrowTail.text.text?

optional text: string

arrowTail.text.textAlign?

optional textAlign: "left" | "center" | "right"

arrowTail.text.textColor?

optional textColor: string

arrowTail.text.textOutline?

optional textOutline: boolean

arrowTail.text.textOutlineColor?

optional textOutlineColor: string

arrowTail.text.textOutlineJoin?

optional textOutlineJoin: "round" | "bevel" | "miter"

arrowTail.text.textOutlineWidth?

optional textOutlineWidth: number

arrowTail.text.textPath?

optional textPath: string

arrowTail.text.textShadow?

optional textShadow: boolean

arrowTail.text.textShadowBlur?

optional textShadowBlur: number

arrowTail.text.textShadowColor?

optional textShadowColor: string

arrowTail.text.textShadowOffsetX?

optional textShadowOffsetX: number

arrowTail.text.textShadowOffsetY?

optional textShadowOffsetY: number

arrowTail.type?

optional type: "none" | "dot" | "normal" | "inverted" | "sphere-dot" | "open-dot" | "tee" | "open-normal" | "diamond" | "open-diamond" | "crow" | "box" | "half-open" | "vee"

enabled?

optional enabled: boolean

label?

optional label: object

label.animation?

optional animation: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"

label.animationSpeed?

optional animationSpeed: number

label.attachOffset?

optional attachOffset: number

label.attachPosition?

optional attachPosition: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"

label.autoSize?

optional autoSize: boolean

label.backgroundColor?

optional backgroundColor: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

label.backgroundGradient?

optional backgroundGradient: boolean

label.backgroundGradientColors?

optional backgroundGradientColors: (string | undefined)[]

label.backgroundGradientDirection?

optional backgroundGradientDirection: "vertical" | "horizontal" | "diagonal"

label.backgroundGradientType?

optional backgroundGradientType: "linear" | "radial"

label.backgroundPadding?

optional backgroundPadding: number

label.badge?

optional badge: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"

label.billboardMode?

optional billboardMode: number

label.borderColor?

optional borderColor: string

label.borders?

optional borders: object[]

label.borderWidth?

optional borderWidth: number

label.cornerRadius?

optional cornerRadius: number

label.depthFadeEnabled?

optional depthFadeEnabled: boolean

label.depthFadeFar?

optional depthFadeFar: number

label.depthFadeNear?

optional depthFadeNear: number

label.enabled?

optional enabled: boolean

label.font?

optional font: string

label.fontSize?

optional fontSize: number

label.fontWeight?

optional fontWeight: string

label.icon?

optional icon: string

label.iconPosition?

optional iconPosition: "left" | "right"

label.lineHeight?

optional lineHeight: number

label.location?

optional location: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"

label.marginBottom?

optional marginBottom: number

label.marginLeft?

optional marginLeft: number

label.marginRight?

optional marginRight: number

label.marginTop?

optional marginTop: number

label.maxNumber?

optional maxNumber: number

label.overflowSuffix?

optional overflowSuffix: string

label.pointer?

optional pointer: boolean

label.pointerCurve?

optional pointerCurve: boolean

label.pointerDirection?

optional pointerDirection: "top" | "left" | "right" | "bottom" | "auto"

label.pointerHeight?

optional pointerHeight: number

label.pointerOffset?

optional pointerOffset: number

label.pointerWidth?

optional pointerWidth: number

label.position?

optional position: object

label.position.x

x: number

label.position.y

y: number

label.position.z

z: number

label.progress?

optional progress: number

label.resolution?

optional resolution: number

label.smartOverflow?

optional smartOverflow: boolean

label.text?

optional text: string

label.textAlign?

optional textAlign: "left" | "center" | "right"

label.textColor?

optional textColor: string

label.textOutline?

optional textOutline: boolean

label.textOutlineColor?

optional textOutlineColor: string

label.textOutlineJoin?

optional textOutlineJoin: "round" | "bevel" | "miter"

label.textOutlineWidth?

optional textOutlineWidth: number

label.textPath?

optional textPath: string

label.textShadow?

optional textShadow: boolean

label.textShadowBlur?

optional textShadowBlur: number

label.textShadowColor?

optional textShadowColor: string

label.textShadowOffsetX?

optional textShadowOffsetX: number

label.textShadowOffsetY?

optional textShadowOffsetY: number

line?

optional line: object

line.animationSpeed?

optional animationSpeed: number

line.bezier?

optional bezier: boolean

line.color?

optional color: string

line.opacity?

optional opacity: number

line.type?

optional type: "solid" | "dot" | "diamond" | "box" | "star" | "dash" | "dash-dot" | "sinewave" | "zigzag"

line.width?

optional width: number

optional tooltip: object

optional animation: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"

optional animationSpeed: number

optional attachOffset: number

optional attachPosition: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"

optional autoSize: boolean

optional backgroundColor: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

optional backgroundGradient: boolean

optional backgroundGradientColors: (string | undefined)[]

optional backgroundGradientDirection: "vertical" | "horizontal" | "diagonal"

optional backgroundGradientType: "linear" | "radial"

optional backgroundPadding: number

optional badge: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"

optional billboardMode: number

optional borderColor: string

optional borders: object[]

optional borderWidth: number

optional cornerRadius: number

optional depthFadeEnabled: boolean

optional depthFadeFar: number

optional depthFadeNear: number

optional enabled: boolean

optional font: string

optional fontSize: number

optional fontWeight: string

optional icon: string

optional iconPosition: "left" | "right"

optional lineHeight: number

optional location: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"

optional marginBottom: number

optional marginLeft: number

optional marginRight: number

optional marginTop: number

optional maxNumber: number

optional overflowSuffix: string

optional pointer: boolean

optional pointerCurve: boolean

optional pointerDirection: "top" | "left" | "right" | "bottom" | "auto"

optional pointerHeight: number

optional pointerOffset: number

optional pointerWidth: number

optional position: object

x: number

y: number

z: number

optional progress: number

optional resolution: number

optional smartOverflow: boolean

optional text: string

optional textAlign: "left" | "center" | "right"

optional textColor: string

optional textOutline: boolean

optional textOutlineColor: string

optional textOutlineJoin: "round" | "bevel" | "miter"

optional textOutlineWidth: number

optional textPath: string

optional textShadow: boolean

optional textShadowBlur: number

optional textShadowColor: string

optional textShadowOffsetX: number

optional textShadowOffsetY: number

getStyleForNode()

getStyleForNode(data, algorithmResults?): NodeStyleId

Defined in: src/Styles.ts:161

Computes the merged style for a node by applying matching layers.

Parameters

data

AdHocData

Node data for selector matching

algorithmResults?

AdHocData

Optional algorithm results for selector matching

Returns

NodeStyleId

Style ID for the computed node style

getStyleForNodeStyleId()

static getStyleForNodeStyleId(id): object

Defined in: src/Styles.ts:280

Retrieves the node style configuration for a given style ID.

Parameters

id

NodeStyleId

Node style identifier

Returns

object

Node style configuration

effect?

optional effect: object

effect.flatShaded?

optional flatShaded: boolean

effect.glow?

optional glow: object

effect.glow.color?

optional color: string

effect.glow.strength?

optional strength: number

effect.outline?

optional outline: object

effect.outline.color?

optional color: string

effect.outline.width?

optional width: number

effect.wireframe?

optional wireframe: boolean

enabled?

optional enabled: boolean

label?

optional label: object

label.animation?

optional animation: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"

label.animationSpeed?

optional animationSpeed: number

label.attachOffset?

optional attachOffset: number

label.attachPosition?

optional attachPosition: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"

label.autoSize?

optional autoSize: boolean

label.backgroundColor?

optional backgroundColor: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

label.backgroundGradient?

optional backgroundGradient: boolean

label.backgroundGradientColors?

optional backgroundGradientColors: (string | undefined)[]

label.backgroundGradientDirection?

optional backgroundGradientDirection: "vertical" | "horizontal" | "diagonal"

label.backgroundGradientType?

optional backgroundGradientType: "linear" | "radial"

label.backgroundPadding?

optional backgroundPadding: number

label.badge?

optional badge: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"

label.billboardMode?

optional billboardMode: number

label.borderColor?

optional borderColor: string

label.borders?

optional borders: object[]

label.borderWidth?

optional borderWidth: number

label.cornerRadius?

optional cornerRadius: number

label.depthFadeEnabled?

optional depthFadeEnabled: boolean

label.depthFadeFar?

optional depthFadeFar: number

label.depthFadeNear?

optional depthFadeNear: number

label.enabled?

optional enabled: boolean

label.font?

optional font: string

label.fontSize?

optional fontSize: number

label.fontWeight?

optional fontWeight: string

label.icon?

optional icon: string

label.iconPosition?

optional iconPosition: "left" | "right"

label.lineHeight?

optional lineHeight: number

label.location?

optional location: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"

label.marginBottom?

optional marginBottom: number

label.marginLeft?

optional marginLeft: number

label.marginRight?

optional marginRight: number

label.marginTop?

optional marginTop: number

label.maxNumber?

optional maxNumber: number

label.overflowSuffix?

optional overflowSuffix: string

label.pointer?

optional pointer: boolean

label.pointerCurve?

optional pointerCurve: boolean

label.pointerDirection?

optional pointerDirection: "top" | "left" | "right" | "bottom" | "auto"

label.pointerHeight?

optional pointerHeight: number

label.pointerOffset?

optional pointerOffset: number

label.pointerWidth?

optional pointerWidth: number

label.position?

optional position: object

label.position.x

x: number

label.position.y

y: number

label.position.z

z: number

label.progress?

optional progress: number

label.resolution?

optional resolution: number

label.smartOverflow?

optional smartOverflow: boolean

label.text?

optional text: string

label.textAlign?

optional textAlign: "left" | "center" | "right"

label.textColor?

optional textColor: string

label.textOutline?

optional textOutline: boolean

label.textOutlineColor?

optional textOutlineColor: string

label.textOutlineJoin?

optional textOutlineJoin: "round" | "bevel" | "miter"

label.textOutlineWidth?

optional textOutlineWidth: number

label.textPath?

optional textPath: string

label.textShadow?

optional textShadow: boolean

label.textShadowBlur?

optional textShadowBlur: number

label.textShadowColor?

optional textShadowColor: string

label.textShadowOffsetX?

optional textShadowOffsetX: number

label.textShadowOffsetY?

optional textShadowOffsetY: number

shape?

optional shape: object

shape.size?

optional size: number

shape.type?

optional type: "box" | "sphere" | "cylinder" | "cone" | "capsule" | "torus-knot" | "tetrahedron" | "octahedron" | "dodecahedron" | "icosahedron" | "rhombicuboctahedron" | "triangular_prism" | "pentagonal_prism" | "hexagonal_prism" | "square_pyramid" | "pentagonal_pyramid" | "triangular_dipyramid" | "pentagonal_dipyramid" | "elongated_square_dipyramid" | "elongated_pentagonal_dipyramid" | "elongated_pentagonal_cupola" | "goldberg" | "icosphere" | "geodesic"

texture?

optional texture: object

texture.color?

optional color: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

texture.icon?

optional icon: string

texture.image?

optional image: string

optional tooltip: object

optional animation: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"

optional animationSpeed: number

optional attachOffset: number

optional attachPosition: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"

optional autoSize: boolean

optional backgroundColor: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }

optional backgroundGradient: boolean

optional backgroundGradientColors: (string | undefined)[]

optional backgroundGradientDirection: "vertical" | "horizontal" | "diagonal"

optional backgroundGradientType: "linear" | "radial"

optional backgroundPadding: number

optional badge: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"

optional billboardMode: number

optional borderColor: string

optional borders: object[]

optional borderWidth: number

optional cornerRadius: number

optional depthFadeEnabled: boolean

optional depthFadeFar: number

optional depthFadeNear: number

optional enabled: boolean

optional font: string

optional fontSize: number

optional fontWeight: string

optional icon: string

optional iconPosition: "left" | "right"

optional lineHeight: number

optional location: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"

optional marginBottom: number

optional marginLeft: number

optional marginRight: number

optional marginTop: number

optional maxNumber: number

optional overflowSuffix: string

optional pointer: boolean

optional pointerCurve: boolean

optional pointerDirection: "top" | "left" | "right" | "bottom" | "auto"

optional pointerHeight: number

optional pointerOffset: number

optional pointerWidth: number

optional position: object

x: number

y: number

z: number

optional progress: number

optional resolution: number

optional smartOverflow: boolean

optional text: string

optional textAlign: "left" | "center" | "right"

optional textColor: string

optional textOutline: boolean

optional textOutlineColor: string

optional textOutlineJoin: "round" | "bevel" | "miter"

optional textOutlineWidth: number

optional textPath: string

optional textShadow: boolean

optional textShadowBlur: number

optional textShadowColor: string

optional textShadowOffsetX: number

optional textShadowOffsetY: number

insertLayer()

insertLayer(position, layer): void

Defined in: src/Styles.ts:138

Inserts a style layer at a specific position in the layer stack.

Parameters

position

number

Index position to insert the layer

layer

Style layer to insert

number = ...

edge.style.arrowHead.text?

edge.style.arrowHead.text.animation?

edge.style.arrowHead.text.animationSpeed?

number = ...

edge.style.arrowHead.text.attachOffset?

number = ...

edge.style.arrowHead.text.attachPosition?

edge.style.arrowHead.text.autoSize?

boolean = ...

edge.style.arrowHead.text.backgroundColor?

edge.style.arrowHead.text.backgroundGradient?

boolean = ...

edge.style.arrowHead.text.backgroundGradientColors?

(... | ...)[] = ...

edge.style.arrowHead.text.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

edge.style.arrowHead.text.backgroundGradientType?

"linear" | "radial" = ...

edge.style.arrowHead.text.backgroundPadding?

number = ...

number = ...

edge.style.arrowTail.size?

number = ...

edge.style.arrowTail.text?

edge.style.arrowTail.text.animation?

edge.style.arrowTail.text.animationSpeed?

number = ...

edge.style.arrowTail.text.attachOffset?

number = ...

edge.style.arrowTail.text.attachPosition?

edge.style.arrowTail.text.autoSize?

boolean = ...

edge.style.arrowTail.text.backgroundColor?

edge.style.arrowTail.text.backgroundGradient?

boolean = ...

edge.style.arrowTail.text.backgroundGradientColors?

(... | ...)[] = ...

edge.style.arrowTail.text.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

edge.style.arrowTail.text.backgroundGradientType?

"linear" | "radial" = ...

edge.style.arrowTail.text.backgroundPadding?

number = ...

number = ...

edge.style.label.attachPosition?

edge.style.label.autoSize?

boolean = ...

edge.style.label.backgroundColor?

edge.style.label.backgroundGradient?

boolean = ...

edge.style.label.backgroundGradientColors?

(string | undefined)[] = ...

edge.style.label.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

edge.style.label.backgroundGradientType?

"linear" | "radial" = ...

edge.style.label.backgroundPadding?

number = ...

number = ...

string = ...

edge.style.label.textShadowOffsetX?

number = ...

edge.style.label.textShadowOffsetY?

number = ...

edge.style.line?

edge.style.line.animationSpeed?

number = ...

edge.style.line.bezier?

boolean = ...

edge.style.line.color?

string = ...

edge.style.line.opacity?

number = ...

edge.style.line.type?

edge.style.line.width?

number = ...

{ animation?: "none" | "pulse" | "bounce" | "shake" | "glow" | "fill"; animationSpeed?: number; attachOffset?: number; attachPosition?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right"; autoSize?: boolean; backgroundColor?: string | { colorType: "solid"; opacity?: number; value: string | undefined; } | { colors: (string | undefined)[]; colorType: "gradient"; direction: number; opacity?: number; } | { colors: (string | undefined)[]; colorType: "radial-gradient"; opacity?: number; }; backgroundGradient?: boolean; backgroundGradientColors?: (string | undefined)[]; backgroundGradientDirection?: "vertical" | "horizontal" | "diagonal"; backgroundGradientType?: "linear" | "radial"; backgroundPadding?: number; badge?: "notification" | "label" | "label-success" | "label-warning" | "label-danger" | "count" | "icon" | "progress" | "dot"; billboardMode?: number; borderColor?: string; borders?: object[]; borderWidth?: number; cornerRadius?: number; depthFadeEnabled?: boolean; depthFadeFar?: number; depthFadeNear?: number; enabled?: boolean; font?: string; fontSize?: number; fontWeight?: string; icon?: string; iconPosition?: "left" | "right"; lineHeight?: number; location?: "top" | "top-right" | "top-left" | "left" | "center" | "right" | "bottom" | "bottom-left" | "bottom-right" | "automatic"; marginBottom?: number; marginLeft?: number; marginRight?: number; marginTop?: number; maxNumber?: number; overflowSuffix?: string; pointer?: boolean; pointerCurve?: boolean; pointerDirection?: "top" | "left" | "right" | "bottom" | "auto"; pointerHeight?: number; pointerOffset?: number; pointerWidth?: number; position?: { x: number; y: number; z: number; }; progress?: number; resolution?: number; smartOverflow?: boolean; text?: string; textAlign?: "left" | "center" | "right"; textColor?: string; textOutline?: boolean; textOutlineColor?: string; textOutlineJoin?: "round" | "bevel" | "miter"; textOutlineWidth?: number; textPath?: string; textShadow?: boolean; textShadowBlur?: number; textShadowColor?: string; textShadowOffsetX?: number; textShadowOffsetY?: number; } = ...

number = ...

boolean = ...

(string | undefined)[] = ...

"vertical" | "horizontal" | "diagonal" = ...

"linear" | "radial" = ...

number = ...

number = ...

string = ...

object[] = ...

number = ...

boolean = ...

number = ...

boolean = ...

string = ...

number = ...

string = ...

"left" | "right" = ...

number = ...

number = ...

string = ...

boolean = ...

"top" | "left" | "right" | "bottom" | "auto" = ...

number = ...

{ x: number; y: number; z: number; } = ...

number = ...

boolean = ...

string = ...

"left" | "center" | "right" = ...

string = ...

boolean = ...

string = ...

"round" | "bevel" | "miter" = ...

number = ...

string = ...

boolean = ...

number = ...

string = ...

number = ...

metadata?

{ name: string; } = ...

metadata.name

string = ...

node?

node.calculatedStyle?

{ expr: string; inputs: string[]; output: string; } = ...

node.calculatedStyle.expr

string = ...

node.calculatedStyle.inputs

string[] = ...

node.calculatedStyle.output

string = AllowedOuputPaths

node.selector

string = ...

node.style.label.animationSpeed?

number = ...

node.style.label.attachOffset?

number = ...

node.style.label.attachPosition?

node.style.label.autoSize?

boolean = ...

node.style.label.backgroundColor?

node.style.label.backgroundGradient?

boolean = ...

node.style.label.backgroundGradientColors?

(string | undefined)[] = ...

node.style.label.backgroundGradientDirection?

"vertical" | "horizontal" | "diagonal" = ...

node.style.label.backgroundGradientType?

"linear" | "radial" = ...

node.style.label.backgroundPadding?

number = ...

number = ...

string = ...

number = ...

boolean = ...

(string | undefined)[] = ...

"vertical" | "horizontal" | "diagonal" = ...

"linear" | "radial" = ...

number = ...

number = ...

string = ...

object[] = ...

number = ...

boolean = ...

number = ...

boolean = ...

string = ...

number = ...

string = ...

"left" | "right" = ...

number = ...

number = ...

string = ...

boolean = ...

"top" | "left" | "right" | "bottom" | "auto" = ...

number = ...

{ x: number; y: number; z: number; } = ...

number = ...

boolean = ...

string = ...

"left" | "center" | "right" = ...

string = ...

boolean = ...

string = ...

"round" | "bevel" | "miter" = ...

number = ...

string = ...

boolean = ...

number = ...

string = ...

number = ...

Returns

void

removeLayersByMetadata()

removeLayersByMetadata(predicate): boolean

Defined in: src/Styles.ts:149

Removes style layers matching a metadata predicate.

Parameters

predicate

(metadata) => boolean

Function to test layer metadata for removal

Returns

boolean

True if any layers were removed

Algorithm

Classes

Interfaces

DataSource

Classes

Interfaces

LayoutEngine

Classes

Interfaces

Type Aliases

Variables

Class: Styles ​

Constructors ​

Constructor ​

Parameters ​

config ​

behavior ​

behavior.fetchEdges? ​

behavior.fetchNodes? ​

behavior.layout ​

behavior.layout.minDelta ​

behavior.layout.preSteps ​

behavior.layout.stepMultiplier ​

behavior.layout.type ​

behavior.layout.zoomStepInterval ​

behavior.node ​

behavior.node.pinOnDrag ​

data ​

data.algorithms? ​

data.knownFields ​

data.knownFields.edgeDstIdPath ​

data.knownFields.edgeSrcIdPath ​

data.knownFields.edgeTimePath ​

data.knownFields.edgeWeightPath ​

data.knownFields.nodeIdPath ​

data.knownFields.nodeTimePath ​

data.knownFields.nodeWeightPath ​

graph ​

graph.addDefaultStyle ​

graph.background ​

graph.effects? ​

graph.effects.depthOfField? ​

graph.effects.motionBlur? ​

graph.effects.screenSpaceReflections? ​

graph.layout? ​

graph.layoutOptions? ​

graph.startingCameraDistance ​

graph.twoD ​

graph.viewMode ​

graphtyTemplate ​

layers ​

majorVersion ​

metadata? ​

metadata.templateCreationTimestamp? ​

metadata.templateCreator? ​

metadata.templateModificationTimestamp? ​

metadata.templateName? ​

Returns ​

Properties ​

config ​

behavior ​

behavior.fetchEdges? ​

behavior.fetchNodes? ​

behavior.layout ​

behavior.layout.minDelta ​

behavior.layout.preSteps ​

behavior.layout.stepMultiplier ​

behavior.layout.type ​

behavior.layout.zoomStepInterval ​

behavior.node ​

behavior.node.pinOnDrag ​

data ​

data.algorithms? ​

data.knownFields ​

data.knownFields.edgeDstIdPath ​

data.knownFields.edgeSrcIdPath ​

data.knownFields.edgeTimePath ​

data.knownFields.edgeWeightPath ​

data.knownFields.nodeIdPath ​

data.knownFields.nodeTimePath ​

Class: Styles

Constructors

Constructor

Parameters

config

behavior

behavior.fetchEdges?

behavior.fetchNodes?

behavior.layout

behavior.layout.minDelta

behavior.layout.preSteps

behavior.layout.stepMultiplier

behavior.layout.type

behavior.layout.zoomStepInterval

behavior.node

behavior.node.pinOnDrag

data

data.algorithms?

data.knownFields

data.knownFields.edgeDstIdPath

data.knownFields.edgeSrcIdPath

data.knownFields.edgeTimePath

data.knownFields.edgeWeightPath

data.knownFields.nodeIdPath

data.knownFields.nodeTimePath

data.knownFields.nodeWeightPath

graph

graph.addDefaultStyle

graph.background

graph.effects?

graph.effects.depthOfField?

graph.effects.motionBlur?

graph.effects.screenSpaceReflections?

graph.layout?

graph.layoutOptions?

graph.startingCameraDistance

graph.twoD

graph.viewMode

graphtyTemplate

layers

majorVersion

metadata?

metadata.templateCreationTimestamp?

metadata.templateCreator?

metadata.templateModificationTimestamp?

metadata.templateName?

Returns

Properties

config

behavior

behavior.fetchEdges?

behavior.fetchNodes?

behavior.layout

behavior.layout.minDelta

behavior.layout.preSteps

behavior.layout.stepMultiplier

behavior.layout.type

behavior.layout.zoomStepInterval

behavior.node

behavior.node.pinOnDrag

data

data.algorithms?

data.knownFields

data.knownFields.edgeDstIdPath

data.knownFields.edgeSrcIdPath

data.knownFields.edgeTimePath

data.knownFields.edgeWeightPath

data.knownFields.nodeIdPath

data.knownFields.nodeTimePath

data.knownFields.nodeWeightPath

graph

graph.addDefaultStyle

graph.background

graph.effects?

graph.effects.depthOfField?

graph.effects.motionBlur?

graph.effects.screenSpaceReflections?

graph.layout?

graph.layoutOptions?

Index Signature