Improve tracking points, graph initialization, and add simulation dur…

…ing zoom option (#132)

* fix(tracking): reset point indices only on new position

* fix(graph): reorganize initialization to correctly update screen and space size

* feat(simulation): add option to enable simulation during zoom

* Beta v2.0.0-beta.21

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmograph/cosmos",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "description": "GPU-based force graph layout and rendering",
   "jsdelivr": "dist/index.min.js",
   "main": "dist/index.js",

src/config.ts

@@ -400,6 +400,13 @@ export interface GraphConfigInterface {
    * Default: `false`
    */
   disableZoom?: boolean;
+  /**
+   * Controls whether the simulation remains active during zoom operations.
+   * When set to `true`, the simulation continues running while zooming.
+   * When set to `false`, the simulation pauses during zoom operations.
+   * Default value: `false`
+   */
+  enableSimulationDuringZoom?: boolean;
   /**
    * Enables or disables dragging of points in the graph.
    * Default value: `false`
@@ -521,6 +528,7 @@ export class GraphConfig implements GraphConfigInterface {
   public scalePointsOnZoom = defaultConfigValues.scalePointsOnZoom
   public initialZoomLevel = undefined
   public disableZoom = defaultConfigValues.disableZoom
+  public enableSimulationDuringZoom = defaultConfigValues.enableSimulationDuringZoom
   public enableDrag = defaultConfigValues.enableDrag
   public fitViewOnInit = defaultConfigValues.fitViewOnInit
   public fitViewDelay = defaultConfigValues.fitViewDelay

src/index.ts

@@ -86,12 +86,23 @@ export class Graph {
     this.addAttribution()
     const w = canvas.clientWidth
     const h = canvas.clientHeight
-    this.store.updateScreenSize(w, h)
 
     canvas.width = w * this.config.pixelRatio
     canvas.height = h * this.config.pixelRatio
 
     this.canvas = canvas
+    this.reglInstance = regl({
+      canvas: this.canvas,
+      attributes: {
+        antialias: false,
+        preserveDrawingBuffer: true,
+      },
+      extensions: ['OES_texture_float', 'ANGLE_instanced_arrays'],
+    })
+
+    this.store.adjustSpaceSize(this.config.spaceSize, this.reglInstance.limits.maxTextureSize)
+    this.store.updateScreenSize(w, h)
+
     this.canvasD3Selection = select<HTMLCanvasElement, undefined>(this.canvas)
     this.canvasD3Selection
       .on('mouseenter.cosmos', () => { this._isMouseOnCanvas = true })
@@ -132,17 +143,7 @@ export class Graph {
     if (this.config.disableZoom || !this.config.enableDrag) this.updateZoomDragBehaviors()
     this.setZoomLevel(this.config.initialZoomLevel ?? 1)
 
-    this.reglInstance = regl({
-      canvas: this.canvas,
-      attributes: {
-        antialias: false,
-        preserveDrawingBuffer: true,
-      },
-      extensions: ['OES_texture_float', 'ANGLE_instanced_arrays'],
-    })
-
     this.store.maxPointSize = (this.reglInstance.limits.pointSizeDims[1] ?? MAX_POINT_SIZE) / this.config.pixelRatio
-    this.store.adjustSpaceSize(this.config.spaceSize, this.reglInstance.limits.maxTextureSize)
 
     this.points = new Points(this.reglInstance, this.config, this.store, this.graph)
     this.lines = new Lines(this.reglInstance, this.config, this.store, this.graph, this.points)
@@ -872,7 +873,6 @@ export class Graph {
     this.store.linksTextureSize = Math.ceil(Math.sqrt((graph.linksNumber ?? 0) * 2))
     this.create()
     this.initPrograms()
-    this.points.trackPointsByIndices()
     this.store.setFocusedPoint(this.config.focusedPointIndex)
     this.store.hoveredPoint = undefined
     this.start(simulationAlpha)
@@ -906,7 +906,7 @@ export class Graph {
           this.forceMouse?.run()
           this.points.updatePosition()
         }
-        if ((isSimulationRunning && !this.zoomInstance.isRunning)) {
+        if ((isSimulationRunning && !(this.zoomInstance.isRunning && !this.config.enableSimulationDuringZoom))) {
           if (simulationGravity) {
             this.forceGravity?.run()
             this.points.updatePosition()

src/modules/Points/index.ts

@@ -137,6 +137,8 @@ export class Points extends CoreModule {
 
     this.updateGreyoutStatus()
     this.updateSampledPointsGrid()
+
+    this.trackPointsByIndices()
   }
 
   public initPrograms (): void {

src/variables.ts

@@ -44,6 +44,7 @@ export const defaultConfigValues = {
   pixelRatio: 2,
   scalePointsOnZoom: true,
   disableZoom: false,
+  enableSimulationDuringZoom: false,
   enableDrag: false,
   fitViewOnInit: true,
   fitViewDelay: 250,