core · @graph-viz

@graph-viz › Globals › core

Index

References

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

References

ConfigurationOptions

• ConfigurationOptions:

DisplayGroup

• DisplayGroup:

DisplayGroups

• DisplayGroups:

DisplayLink

• DisplayLink:

DisplayNode

• DisplayNode:

GraphVisualization

• GraphVisualization:

Labels

• Labels:

Links

• Links:

MouseInteraction

• MouseInteraction:

Nodes

• Nodes:

VisualizationInputData

• VisualizationInputData:

Type aliases

ClickEventHandler

Ƭ ClickEventHandler: GenericMouseEventHandler

Defined in packages/core/src/MouseInteraction.ts:22

dispatched when the canvas is clicked. if a node click is detected the clickedNodeIdx will be non-null

DragEndEventHandler

Ƭ DragEndEventHandler: GenericMouseEventHandler

Defined in packages/core/src/MouseInteraction.ts:32

dispatched when a mouse drag end is detected anywhere on the canvas

DragStartEventHandler

Ƭ DragStartEventHandler: GenericMouseEventHandler

Defined in packages/core/src/MouseInteraction.ts:27

dispatched when a mouse drag start is detected anywhere on the canvas

GenericMouseEventHandler

Ƭ GenericMouseEventHandler: function

Defined in packages/core/src/MouseInteraction.ts:8

Type declaration:

▸ (worldSpacePosition: Vector3, nodeIdx: number | null, event: MouseEvent): any

Parameters:

Name	Type
`worldSpacePosition`	Vector3
`nodeIdx`	number \| null
`event`	MouseEvent

HoverEventHandler

Ƭ HoverEventHandler: function

Defined in packages/core/src/MouseInteraction.ts:17

dispatched when a node is hovered in or out

Type declaration:

▸ (hoveredIdx: number): any

Parameters:

Name	Type
`hoveredIdx`	number

NodeDragEventHandler

Ƭ NodeDragEventHandler: function

Defined in packages/core/src/MouseInteraction.ts:38

dispatched when a mouse dragging event is detected after dragStart was dispatched with a non-null node i.e. node was dragged

Type declaration:

▸ (worldSpaceMousePosition: Vector3, draggedNodeIdx: number): any

Parameters:

Name	Type
`worldSpaceMousePosition`	Vector3
`draggedNodeIdx`	number

PanEventHandler

Ƭ PanEventHandler: function

Defined in packages/core/src/MouseInteraction.ts:47

dispatched when a mouse dragging event is detected after dragStart was dispatched with a null node i.e. canvas was panned

Type declaration:

▸ (panDelta: Vector3): any

Parameters:

Name	Type
`panDelta`	Vector3

SecondaryClickEventHandler

Ƭ SecondaryClickEventHandler: function

Defined in packages/core/src/MouseInteraction.ts:58

dispatched on event: 'contextmenu' (usually right click or Ctrl+click in most browsers)

Type declaration:

▸ (event: MouseEvent, nodeIdx: number | null): any

Parameters:

Name	Type
`event`	MouseEvent
`nodeIdx`	number \| null

ZoomEventHandler

Ƭ ZoomEventHandler: function

Defined in packages/core/src/MouseInteraction.ts:52

dispatched on mouse wheel change

Type declaration:

▸ (event: WheelEvent): any

Parameters:

Name	Type
`event`	WheelEvent

Variables

`Const` DEFAULT_LINK_WIDTH

• DEFAULT_LINK_WIDTH: 1 = 1

Defined in packages/core/src/Links.ts:13

`Const` MAX_CLICK_DURATION

• MAX_CLICK_DURATION: 300 = 300

Defined in packages/core/src/MouseInteraction.ts:6

`Const` MAX_ZOOM

• MAX_ZOOM: 5 = 5

Defined in packages/core/src/GraphVisualization.ts:31

`Const` PAN_SPEED

• PAN_SPEED: 1 = 1

Defined in packages/core/src/GraphVisualization.ts:32

`Const` VERTICES_PER_QUAD

• VERTICES_PER_QUAD: 6 = 6

Defined in packages/core/src/Links.ts:12

Constants

`Const` linksFragmentShader

• linksFragmentShader: *" #define SQRT2OVER2 0.707107

varying vec2 vUV; varying float vQuadLength; varying vec3 vColor; varying float vOpacity; varying float vArrowWidth; varying float vArrowOffset; varying float vDashGap;

uniform float lineWidth; uniform float globalScale;

// pseudo "anti-aliased" step float aaStep(float edge, float x) { return smoothstep(edge - SQRT2OVER2/globalScale, edge + SQRT2OVER2/globalScale, x); }

float map(float value, float inMin, float inMax, float outMin, float outMax) { return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin); }

void main() { float quadWidth = max(vArrowWidth, lineWidth); float arrowHeight = vArrowWidth / 3.0; vec2 arrowTip = vec2( quadWidth / 2.0, vQuadLength - vArrowOffset ); vec2 arrowBase = arrowTip - vec2(0.0, arrowHeight);

// Configure the arrowhead's "aspect ratio" here: float arrowWidth = arrowHeight * 1.5;

float xFromCenter = abs(vUV.x - arrowTip.x); float lineMask = 1.0 - aaStep(lineWidth / 2.0, xFromCenter); lineMask -= aaStep(arrowBase.y, vUV.y); // line ends at the base of the arrow

float dashedY = mod(vUV.y - arrowBase.y, vDashGap * 2.0); lineMask -= aaStep(vDashGap, dashedY); lineMask = clamp(lineMask, 0.0, 1.0);

float arrowMask = aaStep(arrowBase.y, vUV.y); // base of the arrow arrowMask -= aaStep(arrowTip.y, vUV.y); // tip of the arrow float diagonalEdgeX = map( vUV.y, arrowBase.y, arrowTip.y, arrowWidth / 2.0, 0.0 ); arrowMask -= aaStep(diagonalEdgeX, xFromCenter);

float mask = (lineMask + arrowMask) * vOpacity; gl_FragColor = vec4(vColor, mask); } "* = ` #define SQRT2OVER2 0.707107

varying vec2 vUV; varying float vQuadLength; varying vec3 vColor; varying float vOpacity; varying float vArrowWidth; varying float vArrowOffset; varying float vDashGap;

uniform float lineWidth; uniform float globalScale;

// pseudo "anti-aliased" step float aaStep(float edge, float x) { return smoothstep(edge - SQRT2OVER2/globalScale, edge + SQRT2OVER2/globalScale, x); }

float map(float value, float inMin, float inMax, float outMin, float outMax) { return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin); }

// Configure the arrowhead's "aspect ratio" here: float arrowWidth = arrowHeight * 1.5;

float xFromCenter = abs(vUV.x - arrowTip.x); float lineMask = 1.0 - aaStep(lineWidth / 2.0, xFromCenter); lineMask -= aaStep(arrowBase.y, vUV.y); // line ends at the base of the arrow

float dashedY = mod(vUV.y - arrowBase.y, vDashGap * 2.0); lineMask -= aaStep(vDashGap, dashedY); lineMask = clamp(lineMask, 0.0, 1.0);

float mask = (lineMask + arrowMask) * vOpacity; gl_FragColor = vec4(vColor, mask); } `

Defined in packages/core/src/shaders/asText.ts:97

`Const` linksVertexShader

• linksVertexShader: *"// attribute vec3 position is automatic // attribute vec2 uv is automatic attribute float quadLength; attribute vec3 color; attribute float opacity; attribute float arrowWidth; attribute float arrowOffset; attribute float dashGap;

varying vec2 vUV; varying float vQuadLength; varying vec3 vColor; varying float vOpacity; varying float vArrowWidth; varying float vArrowOffset; varying float vDashGap;

void main() { vUV = uv; vQuadLength = quadLength; vColor = color; vOpacity = opacity; vArrowOffset = arrowOffset; vArrowWidth = arrowWidth; vDashGap = dashGap;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

} "* = `// attribute vec3 position is automatic // attribute vec2 uv is automatic attribute float quadLength; attribute vec3 color; attribute float opacity; attribute float arrowWidth; attribute float arrowOffset; attribute float dashGap;

varying vec2 vUV; varying float vQuadLength; varying vec3 vColor; varying float vOpacity; varying float vArrowWidth; varying float vArrowOffset; varying float vDashGap;

void main() { vUV = uv; vQuadLength = quadLength; vColor = color; vOpacity = opacity; vArrowOffset = arrowOffset; vArrowWidth = arrowWidth; vDashGap = dashGap;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

} `

Defined in packages/core/src/shaders/asText.ts:67

`Const` nodesFragmentShader

• nodesFragmentShader: *" #define SQRT_2 1.41421

varying vec3 vFill; varying float vFillOpacity; varying vec3 vStroke; varying float vStrokeWidth; varying float vStrokeOpacity; varying float vSize; varying float vInnerRadius;

void main() { float distanceFromCenter = distance(gl_PointCoord, vec2(0.5, 0.5)); float edgeWidth = SQRT_2 / vSize;

float radiusWithStroke = vInnerRadius + vStrokeWidth;

float strokeMask = smoothstep(vInnerRadius, vInnerRadius + edgeWidth, distanceFromCenter);
strokeMask -= smoothstep(radiusWithStroke, radiusWithStroke + edgeWidth, distanceFromCenter);
float fillMask = 1.0 - smoothstep(vInnerRadius, vInnerRadius + edgeWidth, distanceFromCenter);

gl_FragColor.rgb = mix(vFill, vStroke, strokeMask);
gl_FragColor.a = max(strokeMask * vStrokeOpacity, fillMask * vFillOpacity);

} "* = ` #define SQRT_2 1.41421

varying vec3 vFill; varying float vFillOpacity; varying vec3 vStroke; varying float vStrokeWidth; varying float vStrokeOpacity; varying float vSize; varying float vInnerRadius;

void main() { float distanceFromCenter = distance(gl_PointCoord, vec2(0.5, 0.5)); float edgeWidth = SQRT_2 / vSize;

float radiusWithStroke = vInnerRadius + vStrokeWidth;

float strokeMask = smoothstep(vInnerRadius, vInnerRadius + edgeWidth, distanceFromCenter);
strokeMask -= smoothstep(radiusWithStroke, radiusWithStroke + edgeWidth, distanceFromCenter);
float fillMask = 1.0 - smoothstep(vInnerRadius, vInnerRadius + edgeWidth, distanceFromCenter);

gl_FragColor.rgb = mix(vFill, vStroke, strokeMask);
gl_FragColor.a = max(strokeMask * vStrokeOpacity, fillMask * vFillOpacity);

} `

Defined in packages/core/src/shaders/asText.ts:41

`Const` nodesVertexShader

• nodesVertexShader: *" uniform float globalScale;

attribute vec3 fill; attribute float fillOpacity; attribute float absoluteSize; attribute float scale; attribute float innerRadius; attribute vec3 stroke; attribute float strokeOpacity; attribute float strokeWidth;

varying vec3 vFill; varying float vFillOpacity; varying vec3 vStroke; varying float vStrokeWidth; varying float vStrokeOpacity; varying float vSize; varying float vInnerRadius;

void main() { vStroke = stroke; vStrokeWidth = strokeWidth; vStrokeOpacity = strokeOpacity; vInnerRadius = innerRadius; vFill = fill; vFillOpacity = fillOpacity;

vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

// NOTE:
// globalScale multiplication could be logarithmic depending on intended zooming behavior
// Something like ((2.2 + log2(globalScale + 0.3)) / 2.0)
gl_PointSize = absoluteSize * scale * globalScale;
vSize = gl_PointSize;

gl_Position = projectionMatrix * mvPosition;

} "* = ` uniform float globalScale;

varying vec3 vFill; varying float vFillOpacity; varying vec3 vStroke; varying float vStrokeWidth; varying float vStrokeOpacity; varying float vSize; varying float vInnerRadius;

void main() { vStroke = stroke; vStrokeWidth = strokeWidth; vStrokeOpacity = strokeOpacity; vInnerRadius = innerRadius; vFill = fill; vFillOpacity = fillOpacity;

vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

// NOTE:
// globalScale multiplication could be logarithmic depending on intended zooming behavior
// Something like ((2.2 + log2(globalScale + 0.3)) / 2.0)
gl_PointSize = absoluteSize * scale * globalScale;
vSize = gl_PointSize;

gl_Position = projectionMatrix * mvPosition;

} `

Defined in packages/core/src/shaders/asText.ts:1

`Const` requiredMetadataKey

• requiredMetadataKey: unique symbol = Symbol('required')

Defined in packages/core/src/validators.ts:3

Functions

buildMaterial

▸ buildMaterial(): ShaderMaterial

Defined in packages/core/src/Labels.ts:64

Returns: ShaderMaterial

buildTexture

▸ buildTexture(text: string, labelScale: number): TextTexture

Defined in packages/core/src/Labels.ts:12

Parameters:

Name	Type	Default
`text`	string	-
`labelScale`	number	1

Returns: TextTexture

byPosition

▸ byPosition(a: Point, b: Point): number

Defined in packages/core/src/hullGeometryUtils.ts:15

predicate to sort two points by x and y coordinates

Parameters:

Name	Type	Description
`a`	Point	-
`b`	Point

Returns: number

`Const` calculateAbsoluteArrowOffset

▸ calculateAbsoluteArrowOffset(link: PopulatedDisplayLink): number

Defined in packages/core/src/Links.ts:87

Parameters:

Name	Type
`link`	PopulatedDisplayLink

Returns: number

constructIdToIdxMap

▸ constructIdToIdxMap(arr: Array‹object›): object

Defined in packages/core/src/GraphVisualization.ts:40

Parameters:

Name	Type
`arr`	Array‹object›

Returns: object

[ id: string]: number

cross

▸ cross(o: Point, p: Point, q: Point): number

Defined in packages/core/src/hullGeometryUtils.ts:95

Returns the 2D cross product of OP and OQ vectors, i.e. z-component of their 3D cross product. Returns a positive value, if vector OPQ makes a counter-clockwise turn, negative for clockwise turn, and zero if the points are collinear.

NOTE: We could use THREE.Vector2().cross() instead of this function.

Parameters:

Name	Type	Description
`o`	Point	-
`p`	Point	-
`q`	Point

Returns: number

findNormalViaIntersection

▸ findNormalViaIntersection(v1: Vector2, v2: Vector2, via: Vector2): Vector2

Defined in packages/core/src/hullGeometryUtils.ts:350

Finds the intersection point P of:

The vector V1→V2, and,
A vector normal to V1→V2 that passes through point "via".

In other words, we drop a perpendicular on line V1→V2 at point P that passes through point "via".

Parameters:

Name	Type	Description
`v1`	Vector2	-
`v2`	Vector2	-
`via`	Vector2

Returns: Vector2

get2DConvexHull

▸ get2DConvexHull(points: Point[]): Point[]

Defined in packages/core/src/hullGeometryUtils.ts:33

Returns points on the convex hull of the given set of co-planar points. The convex hull excludes collinear points.

This function is an implementation of the Monotone Chain Algorithm (A.M Andrew, 1979) and runs in O(n log(n)) time.

If input has less than three points, it trivially runs in constant time.

Parameters:

Name	Type	Description
`points`	Point[]

Returns: Point[]

getCapsulePolygon

▸ getCapsulePolygon(nodeA: DisplayNode, nodeB: DisplayNode, padding: number): Vector2[]

Defined in packages/core/src/hullGeometryUtils.ts:253

gets a bounding polygon in the shape of a capsule enclosing two nodes. 💊

Parameters:

Name	Type	Default	Description
`nodeA`	DisplayNode	-	-
`nodeB`	DisplayNode	-	-
`padding`	number	0

Returns: Vector2[]

getCentroid

▸ getCentroid(points: Point[]): Point

Defined in packages/core/src/hullGeometryUtils.ts:323

gets the centroid of a given list of points

Parameters:

Name	Type	Description
`points`	Point[]

Returns: Point

getCircularHull

▸ getCircularHull(points: Point[]): object

Defined in packages/core/src/hullGeometryUtils.ts:298

gets the circular hull of a given list of points

Parameters:

Name	Type	Description
`points`	Point[]

Returns: object

center: Vector2
radius: number

getDistance

▸ getDistance(a: Point, b: Point): number

Defined in packages/core/src/hullGeometryUtils.ts:335

gets the distance between two points

Parameters:

Name	Type	Description
`a`	Point	-
`b`	Point

Returns: number

getRoundedOffsetPolygon

▸ getRoundedOffsetPolygon(nodes: DisplayNode[], padding: number): Vector2[]

Defined in packages/core/src/hullGeometryUtils.ts:125

Gets the rounded offset polygon.

This implementation is loosely based on the method highlighted in this thread: https://discourse.threejs.org/t/offsetcontour-function/3185

First, find the offset contour by using the bisector method:

For each vertex V calculate the padded vertex:

Find the bisector B for the outer angle between vectors V1→V and V2→V, where V1 and V2 are previous and next vertices respectively.
Translate a point P = V along vector B for a distance of offset = node.radius + padding.
Return P (the padded vertex)

Then round the vertices:

Replace each padded vertex with a QuadraticBezierCurve s.t.: the paddedVertex P is the control point of the curve and the intersection points of perpendiculars drawn from vertex V to tangents V1→V and V2→V, are the start and the end points of the curve respectively.

Parameters:

Name	Type	Default	Description
`nodes`	DisplayNode[]	-	-
`padding`	number	0

Returns: Vector2[]

populateLinks

▸ populateLinks(graphData: VisualizationInputData, nodeIdToIdxMap: object): PopulatedDisplayLink[]

Defined in packages/core/src/Links.ts:76

Parameters:

Name	Type
`graphData`	VisualizationInputData
`nodeIdToIdxMap`	object

Returns: PopulatedDisplayLink[]

required

▸ required(target: Record‹string, any›, propertyKey: string | symbol, parameterIndex: number): void

Defined in packages/core/src/validators.ts:5

Parameters:

Name	Type
`target`	Record‹string, any›
`propertyKey`	string \| symbol
`parameterIndex`	number

Returns: void

setMeshTexture

▸ setMeshTexture(mesh: Mesh, texture: TextTexture): void

Defined in packages/core/src/Labels.ts:97

Parameters:

Name	Type
`mesh`	Mesh
`texture`	TextTexture

Returns: void

validate

▸ validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor‹Function›): void

Defined in packages/core/src/validators.ts:22

Parameters:

Name	Type
`target`	any
`propertyName`	string
`descriptor`	TypedPropertyDescriptor‹Function›

Returns: void

validateClassConstructor

▸ validateClassConstructor<T>(target: T): any

Defined in packages/core/src/validators.ts:53

Type parameters:

▪ T: object

Parameters:

Name	Type
`target`	T

Returns: any

Object literals

`Const` DATA

▪ DATA: object

Defined in packages/core/src/GraphVisualization.test.ts:6

groups

• groups: object[] = [ { id: 'c2', visible: true, shape: 'convexHull' as const, }, ]

Defined in packages/core/src/GraphVisualization.test.ts:21

links

• links: object[] = [ {source: '1', target: '2'}, {source: '3', target: '4'}, {source: '3', target: '5'}, {source: '3', target: '6'}, ]

Defined in packages/core/src/GraphVisualization.test.ts:15

nodes

• nodes: DisplayNode[] = [ {id: '1', fill: 'coral'}, {id: '2', fill: 'orange'}, {id: '3', displayGroupIds: ['c2'], fill: 'blue'}, {id: '4', displayGroupIds: ['c2'], fill: 'lightblue'}, {id: '5', displayGroupIds: ['c2'], fill: 'orange'}, {id: '6', displayGroupIds: ['c2'], fill: 'green'}, ] as DisplayNode[]

Defined in packages/core/src/GraphVisualization.test.ts:7