Add config option for setting focused point by index

src/config.ts

@@ -269,6 +269,14 @@ export interface GraphConfigInterface {
    */
   focusedPointRingColor?: string | [number, number, number, number];
 
+  /**
+   * Set focus on a point by index.  A ring will be highlighted around the focused point.
+   * Has priority over the `setFocusedPointByIndex` method.
+   * When set to `undefined`, no point is focused.
+   * Default value: `undefined`
+   */
+  focusedPointIndex?: number;
+
   /**
    * Turns link rendering on / off.
    * Default value: `true`
@@ -449,6 +457,7 @@ export class GraphConfig implements GraphConfigInterface {
   public renderHoveredPointRing = defaultConfigValues.renderHoveredPointRing
   public hoveredPointRingColor = defaultConfigValues.hoveredPointRingColor
   public focusedPointRingColor = defaultConfigValues.focusedPointRingColor
+  public focusedPointIndex = defaultConfigValues.focusedPointIndex
   public defaultLinkColor = defaultLinkColor
   public linkGreyoutOpacity = defaultGreyoutLinkOpacity
   public defaultLinkWidth = defaultLinkWidth

src/index.ts

@@ -151,6 +151,9 @@ export class Graph {
     if (this.config.focusedPointRingColor) {
       this.store.setFocusedPointRingColor(this.config.focusedPointRingColor)
     }
+    if (this.config.focusedPointIndex !== undefined) {
+      this.store.setFocusedPoint(this.config.focusedPointIndex)
+    }
 
     if (this.config.showFPSMonitor) this.fpsMonitor = new FPSMonitor(this.canvas)
 
@@ -217,6 +220,9 @@ export class Graph {
     if (prevConfig.focusedPointRingColor !== this.config.focusedPointRingColor) {
       this.store.setFocusedPointRingColor(this.config.focusedPointRingColor)
     }
+    if (prevConfig.focusedPointIndex !== this.config.focusedPointIndex) {
+      this.store.setFocusedPoint(this.config.focusedPointIndex)
+    }
     if (prevConfig.spaceSize !== this.config.spaceSize ||
       prevConfig.simulation.repulsionQuadtreeLevels !== this.config.simulation.repulsionQuadtreeLevels) {
       this.store.adjustSpaceSize(this.config.spaceSize, this.reglInstance.limits.maxTextureSize)
@@ -584,9 +590,12 @@ export class Graph {
   /**
    * Set focus on a point by index. A ring will be highlighted around the focused point.
    * If no index is specified, the focus will be reset.
+   * If `focusedPointIndex` is specified in the config, this method will have no effect.
    * @param index The index of the point in the array of points.
    */
   public setFocusedPointByIndex (index?: number): void {
+    // Config `focusedPointIndex` parameter has higher priority than this method.
+    if (this.config.focusedPointIndex !== undefined) return
     if (index === undefined) {
       this.store.setFocusedPoint()
     } else {
@@ -769,7 +778,7 @@ export class Graph {
     this.create()
     this.initPrograms()
     this.points.trackPointsByIndices()
-    this.store.setFocusedPoint()
+    this.store.setFocusedPoint(this.config.focusedPointIndex)
     this.store.hoveredPoint = undefined
     if (runSimulation) {
       this.start()

src/variables.ts

@@ -24,6 +24,7 @@ export const defaultConfigValues = {
   renderHoveredPointRing: false,
   hoveredPointRingColor: 'white',
   focusedPointRingColor: 'white',
+  focusedPointIndex: undefined,
   useQuadtree: false,
   simulation: {
     decay: 5000,