@cosmos.gl/graph 2.3.1 → 2.5.0

package/src/index.ts

@@ -17,10 +17,10 @@ import { FPSMonitor } from '@/graph/modules/FPSMonitor'
 import { GraphData } from '@/graph/modules/GraphData'
 import { Lines } from '@/graph/modules/Lines'
 import { Points } from '@/graph/modules/Points'
-import { Store, ALPHA_MIN, MAX_POINT_SIZE, type Hovered } from '@/graph/modules/Store'
+import { Store, ALPHA_MIN, MAX_POINT_SIZE, MAX_HOVER_DETECTION_DELAY, type Hovered } from '@/graph/modules/Store'
 import { Zoom } from '@/graph/modules/Zoom'
 import { Drag } from '@/graph/modules/Drag'
-import { defaultConfigValues, defaultScaleToZoom } from '@/graph/variables'
+import { defaultConfigValues, defaultScaleToZoom, defaultGreyoutPointColor, defaultBackgroundColor } from '@/graph/variables'
 import { createWebGLErrorMessage } from './graph/utils/error-message'
 
 export class Graph {
@@ -50,12 +50,12 @@ export class Graph {
 
   private currentEvent: D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | MouseEvent | undefined
   /**
-   * The value of `_findHoveredPointExecutionCount` is incremented by 1 on each animation frame.
-   * When the counter reaches 2 (or more), it is reset to 0 and the `findHoveredPoint` method is executed.
+   * The value of `_findHoveredItemExecutionCount` is incremented by 1 on each animation frame.
+   * When the counter reaches MAX_HOVER_DETECTION_DELAY (default 4), it is reset to 0 and the `findHoveredPoint` or `findHoveredLine` method is executed.
    */
-  private _findHoveredPointExecutionCount = 0
+  private _findHoveredItemExecutionCount = 0
   /**
-   * If the mouse is not on the Canvas, the `findHoveredPoint` method will not be executed.
+   * If the mouse is not on the Canvas, the `findHoveredPoint` or `findHoveredLine` method will not be executed.
    */
   private _isMouseOnCanvas = false
   /**
@@ -64,18 +64,20 @@ export class Graph {
   private _isFirstRenderAfterInit = true
   private _fitViewOnInitTimeoutID: number | undefined
 
-  private _needsPointPositionsUpdate = false
-  private _needsPointColorUpdate = false
-  private _needsPointSizeUpdate = false
-  private _needsPointShapeUpdate = false
-  private _needsLinksUpdate = false
-  private _needsLinkColorUpdate = false
-  private _needsLinkWidthUpdate = false
-  private _needsLinkArrowUpdate = false
-  private _needsPointClusterUpdate = false
-  private _needsForceManyBodyUpdate = false
-  private _needsForceLinkUpdate = false
-  private _needsForceCenterUpdate = false
+  private isPointPositionsUpdateNeeded = false
+  private isPointColorUpdateNeeded = false
+  private isPointSizeUpdateNeeded = false
+  private isPointShapeUpdateNeeded = false
+  private isPointImageIndicesUpdateNeeded = false
+  private isLinksUpdateNeeded = false
+  private isLinkColorUpdateNeeded = false
+  private isLinkWidthUpdateNeeded = false
+  private isLinkArrowUpdateNeeded = false
+  private isPointClusterUpdateNeeded = false
+  private isForceManyBodyUpdateNeeded = false
+  private isForceLinkUpdateNeeded = false
+  private isForceCenterUpdateNeeded = false
+  private isPointImageSizesUpdateNeeded = false
 
   private _isDestroyed = false
 
@@ -114,13 +116,37 @@ export class Graph {
     this.reglInstance = reglInstance
 
     this.store.adjustSpaceSize(this.config.spaceSize, this.reglInstance.limits.maxTextureSize)
+    this.store.setWebGLMaxTextureSize(this.reglInstance.limits.maxTextureSize)
     this.store.updateScreenSize(w, h)
 
     this.canvasD3Selection = select<HTMLCanvasElement, undefined>(this.canvas)
     this.canvasD3Selection
       .on('mouseenter.cosmos', () => { this._isMouseOnCanvas = true })
       .on('mousemove.cosmos', () => { this._isMouseOnCanvas = true })
-      .on('mouseleave.cosmos', () => { this._isMouseOnCanvas = false })
+      .on('mouseleave.cosmos', (event) => {
+        this._isMouseOnCanvas = false
+        this.currentEvent = event
+
+        // Clear point hover state and trigger callback if needed
+        if (this.store.hoveredPoint !== undefined && this.config.onPointMouseOut) {
+          this.config.onPointMouseOut(event)
+        }
+
+        // Clear link hover state and trigger callback if needed
+        if (this.store.hoveredLinkIndex !== undefined && this.config.onLinkMouseOut) {
+          this.config.onLinkMouseOut(event)
+        }
+
+        // Reset right-click flag
+        this.isRightClickMouse = false
+
+        // Clear hover states
+        this.store.hoveredPoint = undefined
+        this.store.hoveredLinkIndex = undefined
+
+        // Update cursor style after clearing hover states
+        this.updateCanvasCursor()
+      })
     select(document)
       .on('keydown.cosmos', (event) => { if (event.code === 'Space') this.store.isSpaceKeyPressed = true })
       .on('keyup.cosmos', (event) => { if (event.code === 'Space') this.store.isSpaceKeyPressed = false })
@@ -173,18 +199,15 @@ export class Graph {
     this.clusters = new Clusters(this.reglInstance, this.config, this.store, this.graph, this.points)
 
     this.store.backgroundColor = getRgbaColor(this.config.backgroundColor)
-    if (this.config.hoveredPointRingColor) {
-      this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor)
-    }
-    if (this.config.focusedPointRingColor) {
-      this.store.setFocusedPointRingColor(this.config.focusedPointRingColor)
-    }
+    this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor ?? defaultConfigValues.hoveredPointRingColor)
+    this.store.setFocusedPointRingColor(this.config.focusedPointRingColor ?? defaultConfigValues.focusedPointRingColor)
     if (this.config.focusedPointIndex !== undefined) {
       this.store.setFocusedPoint(this.config.focusedPointIndex)
     }
-    if (this.config.pointGreyoutColor) {
-      this.store.setGreyoutPointColor(this.config.pointGreyoutColor)
-    }
+    this.store.setGreyoutPointColor(this.config.pointGreyoutColor ?? defaultGreyoutPointColor)
+    this.store.setHoveredLinkColor(this.config.hoveredLinkColor ?? defaultConfigValues.hoveredLinkColor)
+
+    this.store.updateLinkHoveringEnabled(this.config)
 
     if (this.config.showFPSMonitor) this.fpsMonitor = new FPSMonitor(this.canvas)
 
@@ -248,15 +271,20 @@ export class Graph {
       prevConfig.curvedLinks !== this.config.curvedLinks) {
       this.lines.updateCurveLineGeometry()
     }
-    if (prevConfig.backgroundColor !== this.config.backgroundColor) this.store.backgroundColor = getRgbaColor(this.config.backgroundColor)
+    if (prevConfig.backgroundColor !== this.config.backgroundColor) {
+      this.store.backgroundColor = getRgbaColor(this.config.backgroundColor ?? defaultBackgroundColor)
+    }
     if (prevConfig.hoveredPointRingColor !== this.config.hoveredPointRingColor) {
-      this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor)
+      this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor ?? defaultConfigValues.hoveredPointRingColor)
     }
     if (prevConfig.focusedPointRingColor !== this.config.focusedPointRingColor) {
-      this.store.setFocusedPointRingColor(this.config.focusedPointRingColor)
+      this.store.setFocusedPointRingColor(this.config.focusedPointRingColor ?? defaultConfigValues.focusedPointRingColor)
     }
     if (prevConfig.pointGreyoutColor !== this.config.pointGreyoutColor) {
-      this.store.setGreyoutPointColor(this.config.pointGreyoutColor)
+      this.store.setGreyoutPointColor(this.config.pointGreyoutColor ?? defaultGreyoutPointColor)
+    }
+    if (prevConfig.hoveredLinkColor !== this.config.hoveredLinkColor) {
+      this.store.setHoveredLinkColor(this.config.hoveredLinkColor ?? defaultConfigValues.hoveredLinkColor)
     }
     if (prevConfig.focusedPointIndex !== this.config.focusedPointIndex) {
       this.store.setFocusedPoint(this.config.focusedPointIndex)
@@ -282,6 +310,12 @@ export class Graph {
     if (prevConfig.enableZoom !== this.config.enableZoom || prevConfig.enableDrag !== this.config.enableDrag) {
       this.updateZoomDragBehaviors()
     }
+
+    if (prevConfig.onLinkClick !== this.config.onLinkClick ||
+        prevConfig.onLinkMouseOver !== this.config.onLinkMouseOver ||
+        prevConfig.onLinkMouseOut !== this.config.onLinkMouseOut) {
+      this.store.updateLinkHoveringEnabled(this.config)
+    }
   }
 
   /**
@@ -297,18 +331,19 @@ export class Graph {
   public setPointPositions (pointPositions: Float32Array, dontRescale?: boolean | undefined): void {
     if (this._isDestroyed || !this.points) return
     this.graph.inputPointPositions = pointPositions
-    this.points.dontRescale = dontRescale
-    this._needsPointPositionsUpdate = true
+    this.points.shouldSkipRescale = dontRescale
+    this.isPointPositionsUpdateNeeded = true
     // Links related texture depends on point positions, so we need to update it
-    this._needsLinksUpdate = true
+    this.isLinksUpdateNeeded = true
     // Point related textures depend on point positions length, so we need to update them
-    this._needsPointColorUpdate = true
-    this._needsPointSizeUpdate = true
-    this._needsPointShapeUpdate = true
-    this._needsPointClusterUpdate = true
-    this._needsForceManyBodyUpdate = true
-    this._needsForceLinkUpdate = true
-    this._needsForceCenterUpdate = true
+    this.isPointColorUpdateNeeded = true
+    this.isPointSizeUpdateNeeded = true
+    this.isPointShapeUpdateNeeded = true
+    this.isPointImageIndicesUpdateNeeded = true
+    this.isPointClusterUpdateNeeded = true
+    this.isForceManyBodyUpdateNeeded = true
+    this.isForceLinkUpdateNeeded = true
+    this.isForceCenterUpdateNeeded = true
   }
 
   /**
@@ -321,7 +356,7 @@ export class Graph {
   public setPointColors (pointColors: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputPointColors = pointColors
-    this._needsPointColorUpdate = true
+    this.isPointColorUpdateNeeded = true
   }
 
   /**
@@ -345,7 +380,7 @@ export class Graph {
   public setPointSizes (pointSizes: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputPointSizes = pointSizes
-    this._needsPointSizeUpdate = true
+    this.isPointSizeUpdateNeeded = true
   }
 
   /**
@@ -353,13 +388,55 @@ export class Graph {
    *
    * @param {Float32Array} pointShapes - A Float32Array representing the shapes of points in the format [shape1, shape2, ..., shapen],
    * where `n` is the index of the point and each shape value corresponds to a PointShape enum:
-   * 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross.
+   * 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross, 8 = None.
    * Example: `new Float32Array([0, 1, 2])` sets the first point to Circle, the second point to Square, and the third point to Triangle.
+   * Images are rendered above shapes.
    */
   public setPointShapes (pointShapes: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputPointShapes = pointShapes
-    this._needsPointShapeUpdate = true
+    this.isPointShapeUpdateNeeded = true
+  }
+
+  /**
+   * Sets the images for the graph points using ImageData objects.
+   * Images are rendered above shapes.
+   * To use images, provide image indices via setPointImageIndices().
+   *
+   * @param {ImageData[]} imageDataArray - Array of ImageData objects to use as point images.
+   * Example: `setImageData([imageData1, imageData2, imageData3])`
+   */
+  public setImageData (imageDataArray: ImageData[]): void {
+    if (this._isDestroyed || !this.points) return
+    this.graph.inputImageData = imageDataArray
+    this.points.createAtlas()
+  }
+
+  /**
+   * Sets which image each point should use from the images array.
+   * Images are rendered above shapes.
+   *
+   * @param {Float32Array} imageIndices - A Float32Array representing which image each point uses in the format [index1, index2, ..., indexn],
+   * where `n` is the index of the point and each value is an index into the images array provided to `setImageData`.
+   * Example: `new Float32Array([0, 1, 0])` sets the first point to use image 0, second point to use image 1, third point to use image 0.
+   */
+  public setPointImageIndices (imageIndices: Float32Array): void {
+    if (this._isDestroyed) return
+    this.graph.inputPointImageIndices = imageIndices
+    this.isPointImageIndicesUpdateNeeded = true
+  }
+
+  /**
+   * Sets the sizes for the point images.
+   *
+   * @param {Float32Array} imageSizes - A Float32Array representing the sizes of point images in the format [size1, size2, ..., sizen],
+   * where `n` is the index of the point.
+   * Example: `new Float32Array([10, 20, 30])` sets the first image to size 10, the second image to size 20, and the third image to size 30.
+   */
+  public setPointImageSizes (imageSizes: Float32Array): void {
+    if (this._isDestroyed) return
+    this.graph.inputPointImageSizes = imageSizes
+    this.isPointImageSizesUpdateNeeded = true
   }
 
   /**
@@ -384,12 +461,12 @@ export class Graph {
   public setLinks (links: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinks = links
-    this._needsLinksUpdate = true
+    this.isLinksUpdateNeeded = true
     // Links related texture depends on links length, so we need to update it
-    this._needsLinkColorUpdate = true
-    this._needsLinkWidthUpdate = true
-    this._needsLinkArrowUpdate = true
-    this._needsForceLinkUpdate = true
+    this.isLinkColorUpdateNeeded = true
+    this.isLinkWidthUpdateNeeded = true
+    this.isLinkArrowUpdateNeeded = true
+    this.isForceLinkUpdateNeeded = true
   }
 
   /**
@@ -402,7 +479,7 @@ export class Graph {
   public setLinkColors (linkColors: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinkColors = linkColors
-    this._needsLinkColorUpdate = true
+    this.isLinkColorUpdateNeeded = true
   }
 
   /**
@@ -426,7 +503,7 @@ export class Graph {
   public setLinkWidths (linkWidths: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinkWidths = linkWidths
-    this._needsLinkWidthUpdate = true
+    this.isLinkWidthUpdateNeeded = true
   }
 
   /**
@@ -450,7 +527,7 @@ export class Graph {
   public setLinkArrows (linkArrows: boolean[]): void {
     if (this._isDestroyed) return
     this.graph.linkArrowsBoolean = linkArrows
-    this._needsLinkArrowUpdate = true
+    this.isLinkArrowUpdateNeeded = true
   }
 
   /**
@@ -463,7 +540,7 @@ export class Graph {
   public setLinkStrength (linkStrength: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinkStrength = linkStrength
-    this._needsForceLinkUpdate = true
+    this.isForceLinkUpdateNeeded = true
   }
 
   /**
@@ -480,7 +557,7 @@ export class Graph {
   public setPointClusters (pointClusters: (number | undefined)[]): void {
     if (this._isDestroyed) return
     this.graph.inputPointClusters = pointClusters
-    this._needsPointClusterUpdate = true
+    this.isPointClusterUpdateNeeded = true
   }
 
   /**
@@ -496,7 +573,7 @@ export class Graph {
   public setClusterPositions (clusterPositions: (number | undefined)[]): void {
     if (this._isDestroyed) return
     this.graph.inputClusterPositions = clusterPositions
-    this._needsPointClusterUpdate = true
+    this.isPointClusterUpdateNeeded = true
   }
 
   /**
@@ -512,7 +589,7 @@ export class Graph {
   public setPointClusterStrength (clusterStrength: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputClusterStrength = clusterStrength
-    this._needsPointClusterUpdate = true
+    this.isPointClusterUpdateNeeded = true
   }
 
   /**
@@ -936,9 +1013,11 @@ export class Graph {
 
   /**
    * Get current X and Y coordinates of the tracked points.
-   * @returns A Map object where keys are the indices of the points and values are their corresponding X and Y coordinates in the [number, number] format.
+   * Do not mutate the returned map - it may affect future calls.
+   * @returns A ReadonlyMap where keys are point indices and values are their corresponding X and Y coordinates in the [number, number] format.
+   * @see trackPointPositionsByIndices To set which points should be tracked
    */
-  public getTrackedPointPositionsMap (): Map<number, [number, number]> {
+  public getTrackedPointPositionsMap (): ReadonlyMap<number, [number, number]> {
     if (this._isDestroyed || !this.points) return new Map()
     return this.points.getTrackedPositionsMap()
   }
@@ -1017,7 +1096,8 @@ export class Graph {
   }
 
   /**
-   * Pause the simulation.
+   * Pause the simulation. When paused, the simulation stops running
+   * and can be resumed using the unpause method.
    */
   public pause (): void {
     if (this._isDestroyed) return
@@ -1026,7 +1106,19 @@ export class Graph {
   }
 
   /**
-   * Restart the simulation.
+   * Unpause the simulation. This method resumes a paused
+   * simulation and continues its execution.
+   */
+  public unpause (): void {
+    if (this._isDestroyed) return
+    this.store.isSimulationRunning = true
+    this.config.onSimulationUnpause?.()
+  }
+
+  /**
+   * Restart/Resume the simulation. This method unpauses a paused
+   * simulation and resumes its execution.
+   * @deprecated Use `unpause()` instead. This method will be removed in a future version.
    */
   public restart (): void {
     if (this._isDestroyed) return
@@ -1114,36 +1206,40 @@ export class Graph {
    */
   public create (): void {
     if (this._isDestroyed || !this.points || !this.lines) return
-    if (this._needsPointPositionsUpdate) this.points.updatePositions()
-    if (this._needsPointColorUpdate) this.points.updateColor()
-    if (this._needsPointSizeUpdate) this.points.updateSize()
-    if (this._needsPointShapeUpdate) this.points.updateShape()
-
-    if (this._needsLinksUpdate) this.lines.updatePointsBuffer()
-    if (this._needsLinkColorUpdate) this.lines.updateColor()
-    if (this._needsLinkWidthUpdate) this.lines.updateWidth()
-    if (this._needsLinkArrowUpdate) this.lines.updateArrow()
-
-    if (this._needsForceManyBodyUpdate) this.forceManyBody?.create()
-    if (this._needsForceLinkUpdate) {
+    if (this.isPointPositionsUpdateNeeded) this.points.updatePositions()
+    if (this.isPointColorUpdateNeeded) this.points.updateColor()
+    if (this.isPointSizeUpdateNeeded) this.points.updateSize()
+    if (this.isPointShapeUpdateNeeded) this.points.updateShape()
+    if (this.isPointImageIndicesUpdateNeeded) this.points.updateImageIndices()
+    if (this.isPointImageSizesUpdateNeeded) this.points.updateImageSizes()
+
+    if (this.isLinksUpdateNeeded) this.lines.updatePointsBuffer()
+    if (this.isLinkColorUpdateNeeded) this.lines.updateColor()
+    if (this.isLinkWidthUpdateNeeded) this.lines.updateWidth()
+    if (this.isLinkArrowUpdateNeeded) this.lines.updateArrow()
+
+    if (this.isForceManyBodyUpdateNeeded) this.forceManyBody?.create()
+    if (this.isForceLinkUpdateNeeded) {
       this.forceLinkIncoming?.create(LinkDirection.INCOMING)
       this.forceLinkOutgoing?.create(LinkDirection.OUTGOING)
     }
-    if (this._needsForceCenterUpdate) this.forceCenter?.create()
-    if (this._needsPointClusterUpdate) this.clusters?.create()
-
-    this._needsPointPositionsUpdate = false
-    this._needsPointColorUpdate = false
-    this._needsPointSizeUpdate = false
-    this._needsPointShapeUpdate = false
-    this._needsLinksUpdate = false
-    this._needsLinkColorUpdate = false
-    this._needsLinkWidthUpdate = false
-    this._needsLinkArrowUpdate = false
-    this._needsPointClusterUpdate = false
-    this._needsForceManyBodyUpdate = false
-    this._needsForceLinkUpdate = false
-    this._needsForceCenterUpdate = false
+    if (this.isForceCenterUpdateNeeded) this.forceCenter?.create()
+    if (this.isPointClusterUpdateNeeded) this.clusters?.create()
+
+    this.isPointPositionsUpdateNeeded = false
+    this.isPointColorUpdateNeeded = false
+    this.isPointSizeUpdateNeeded = false
+    this.isPointShapeUpdateNeeded = false
+    this.isPointImageIndicesUpdateNeeded = false
+    this.isPointImageSizesUpdateNeeded = false
+    this.isLinksUpdateNeeded = false
+    this.isLinkColorUpdateNeeded = false
+    this.isLinkWidthUpdateNeeded = false
+    this.isLinkArrowUpdateNeeded = false
+    this.isPointClusterUpdateNeeded = false
+    this.isForceManyBodyUpdateNeeded = false
+    this.isForceLinkUpdateNeeded = false
+    this.isForceCenterUpdateNeeded = false
   }
 
   /**
@@ -1193,6 +1289,7 @@ export class Graph {
   }
 
   private frame (): void {
+    if (this._isDestroyed) return
     const { config: { simulationGravity, simulationCenter, renderLinks, enableSimulation }, store: { alpha, isSimulationRunning } } = this
     if (alpha < ALPHA_MIN && isSimulationRunning) this.end()
     if (!this.store.pointsTextureSize) return
@@ -1200,7 +1297,9 @@ export class Graph {
     this.requestAnimationFrameId = window.requestAnimationFrame((now) => {
       this.fpsMonitor?.begin()
       this.resizeCanvas()
-      if (!this.dragInstance.isActive) this.findHoveredPoint()
+      if (!this.dragInstance.isActive) {
+        this.findHoveredItem()
+      }
 
       if (enableSimulation) {
         if (this.isRightClickMouse && this.config.enableRightClickRepulsion) {
@@ -1266,7 +1365,9 @@ export class Graph {
       this.fpsMonitor?.end(now)
 
       this.currentEvent = undefined
-      this.frame()
+      if (!this._isDestroyed) {
+        this.frame()
+      }
     })
   }
 
@@ -1286,6 +1387,23 @@ export class Graph {
       this.store.hoveredPoint?.position,
       event
     )
+
+    if (this.store.hoveredPoint) {
+      this.config.onPointClick?.(
+        this.store.hoveredPoint.index,
+        this.store.hoveredPoint.position,
+        event
+      )
+    } else if (this.store.hoveredLinkIndex !== undefined) {
+      this.config.onLinkClick?.(
+        this.store.hoveredLinkIndex,
+        event
+      )
+    } else {
+      this.config.onBackgroundClick?.(
+        event
+      )
+    }
   }
 
   private updateMousePosition (event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered>): void {
@@ -1313,6 +1431,7 @@ export class Graph {
   }
 
   private resizeCanvas (forceResize = false): void {
+    if (this._isDestroyed) return
     const prevWidth = this.canvas.width
     const prevHeight = this.canvas.height
     const w = this.canvas.clientWidth
@@ -1330,6 +1449,10 @@ export class Graph {
       this.canvasD3Selection
         ?.call(this.zoomInstance.behavior.transform, this.zoomInstance.getTransform([centerPosition], k))
       this.points?.updateSampledPointsGrid()
+      // Only update link index FBO if link hovering is enabled
+      if (this.store.isLinkHoveringEnabled) {
+        this.lines?.updateLinkIndexFbo()
+      }
     }
   }
 
@@ -1361,13 +1484,31 @@ export class Graph {
     }
   }
 
-  private findHoveredPoint (): void {
-    if (!this._isMouseOnCanvas || !this.reglInstance || !this.points) return
-    if (this._findHoveredPointExecutionCount < 2) {
-      this._findHoveredPointExecutionCount += 1
+  private findHoveredItem (): void {
+    if (this._isDestroyed || !this._isMouseOnCanvas || !this.reglInstance) return
+    if (this._findHoveredItemExecutionCount < MAX_HOVER_DETECTION_DELAY) {
+      this._findHoveredItemExecutionCount += 1
       return
     }
-    this._findHoveredPointExecutionCount = 0
+    this._findHoveredItemExecutionCount = 0
+    this.findHoveredPoint()
+
+    if (this.graph.linksNumber && this.store.isLinkHoveringEnabled) {
+      this.findHoveredLine()
+    } else if (this.store.hoveredLinkIndex !== undefined) {
+      // Clear stale hoveredLinkIndex when there are no links
+      const wasHovered = this.store.hoveredLinkIndex !== undefined
+      this.store.hoveredLinkIndex = undefined
+      if (wasHovered && this.config.onLinkMouseOut) {
+        this.config.onLinkMouseOut(this.currentEvent)
+      }
+    }
+
+    this.updateCanvasCursor()
+  }
+
+  private findHoveredPoint (): void {
+    if (this._isDestroyed || !this.reglInstance || !this.points) return
     this.points.findHoveredPoint()
     let isMouseover = false
     let isMouseout = false
@@ -1395,15 +1536,46 @@ export class Graph {
       )
     }
     if (isMouseout) this.config.onPointMouseOut?.(this.currentEvent)
-    this.updateCanvasCursor()
+  }
+
+  private findHoveredLine (): void {
+    if (this._isDestroyed || !this.reglInstance || !this.lines) return
+    if (this.store.hoveredPoint) {
+      if (this.store.hoveredLinkIndex !== undefined) {
+        this.store.hoveredLinkIndex = undefined
+        this.config.onLinkMouseOut?.(this.currentEvent)
+      }
+      return
+    }
+    this.lines.findHoveredLine()
+    let isMouseover = false
+    let isMouseout = false
+
+    const pixels = readPixels(this.reglInstance, this.lines.hoveredLineIndexFbo as regl.Framebuffer2D)
+    const hoveredLineIndex = pixels[0] as number
+
+    if (hoveredLineIndex >= 0) {
+      if (this.store.hoveredLinkIndex !== hoveredLineIndex) isMouseover = true
+      this.store.hoveredLinkIndex = hoveredLineIndex
+    } else {
+      if (this.store.hoveredLinkIndex !== undefined) isMouseout = true
+      this.store.hoveredLinkIndex = undefined
+    }
+
+    if (isMouseover && this.store.hoveredLinkIndex !== undefined) {
+      this.config.onLinkMouseOver?.(this.store.hoveredLinkIndex)
+    }
+    if (isMouseout) this.config.onLinkMouseOut?.(this.currentEvent)
   }
 
   private updateCanvasCursor (): void {
-    const { hoveredPointCursor } = this.config
+    const { hoveredPointCursor, hoveredLinkCursor } = this.config
     if (this.dragInstance.isActive) select(this.canvas).style('cursor', 'grabbing')
     else if (this.store.hoveredPoint) {
       if (!this.config.enableDrag || this.store.isSpaceKeyPressed) select(this.canvas).style('cursor', hoveredPointCursor)
       else select(this.canvas).style('cursor', 'grab')
+    } else if (this.store.isLinkHoveringEnabled && this.store.hoveredLinkIndex !== undefined) {
+      select(this.canvas).style('cursor', hoveredLinkCursor)
     } else select(this.canvas).style('cursor', null)
   }