@cosmograph/cosmos - npm Package Compare versions

Comparing version 1.1.4-beta.0 to 1.2.0-beta.0

dist/config.d.ts

@@ -23,3 +23,3 @@ import { D3ZoomEvent } from 'd3-zoom';
      */
-    onZoomStart?: (e: D3ZoomEvent<HTMLCanvasElement, unknown>, userDriven: boolean) => void;
+    onZoomStart?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
     /**
@@ -32,3 +32,3 @@ * Callback function that will be called continuously during zooming or panning.
      */
-    onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, unknown>, userDriven: boolean) => void;
+    onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
     /**
@@ -41,3 +41,3 @@ * Callback function that will be called when zooming or panning ends.
      */
-    onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, unknown>, userDriven: boolean) => void;
+    onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
 }
@@ -44,0 +44,0 @@ export interface GraphSimulationSetting {

dist/index.d.ts

@@ -7,2 +7,3 @@ import 'd3-transition';
     private canvas;
+    private canvasD3Selection;
     private reglInstance;
@@ -98,5 +99,10 @@ private requestAnimationFrameId;
      * Center and zoom in/out the view to fit all nodes in the scene.
-     * @param duration Duration of the center and zoom in/out animation in milliseconds (`500` by default).
+     * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
      */
     fitView(duration?: number): void;
+    /**
+     * Center and zoom in/out the view to fit nodes by their ids in the scene.
+     * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
+     */
+    fitViewByNodeIds(ids: string[], duration?: number): void;
     /** Select nodes inside a rectangular area.
@@ -178,2 +184,3 @@ * @param selection - Array of two corner points `[[left, top], [right, bottom]]`.
     private resizeCanvas;
+    private setZoomTransformByNodePositions;
     private zoomToNode;
@@ -180,0 +187,0 @@ }

dist/modules/Points/index.d.ts

@@ -14,3 +14,4 @@ import regl from 'regl';
     private updatePositionCommand;
-    private findPointCommand;
+    private findPointOnMouseClickCommand;
+    private findPointsOnAreaSelectionCommand;
     create(): void;
@@ -23,5 +24,6 @@ initPrograms(): void;
     updatePosition(): void;
-    findPoint(): void;
+    findPointsOnAreaSelection(): void;
+    findPointsOnMouseClick(): void;
     destroy(): void;
     private swapFbo;
 }

dist/modules/Store/index.d.ts

@@ -12,2 +12,3 @@ import { mat3 } from 'gl-matrix';
     mousePosition: number[];
+    screenMousePosition: number[];
     selectedArea: number[][];
@@ -14,0 +15,0 @@ isSimulationRunning: boolean;

dist/modules/Zoom/index.d.ts

@@ -9,3 +9,3 @@ import { ZoomTransform } from 'd3-zoom';
     eventTransform: ZoomTransform;
-    behavior: import("d3-zoom").ZoomBehavior<HTMLCanvasElement, unknown>;
+    behavior: import("d3-zoom").ZoomBehavior<HTMLCanvasElement, undefined>;
     isRunning: boolean;
@@ -12,0 +12,0 @@ constructor(store: Store, config: GraphConfigInterface<N, L>);

package.json

 {
   "name": "@cosmograph/cosmos",
-  "version": "1.1.4-beta.0",
+  "version": "1.2.0-beta.0",
   "description": "GPU-based force graph layout and rendering",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -139,4 +139,8 @@ <p align="center" style="color: #444">
 
-Center and zoom in/out the view to fit all nodes in the scene with given animation <i>duration</i>. The default <i>duration</i> is 500 ms.
+Center and zoom in/out the view to fit all nodes in the scene with given animation <i>duration</i>. The default <i>duration</i> is 250 ms.
 
+<a name="fit_view_by_node_ids" href="#fit_view_by_node_ids">#</a> graph.<b>fitViewByNodeIds</b>(<i>ids</i>, [<i>duration</i>])
+
+Center and zoom in/out the view to fit nodes by their <i>ids</i> in the scene with given animation <i>duration</i>. The default <i>duration</i> is 250 ms.
+
 <a name="select_nodes_in_range" href="#select_nodes_in_range">#</a> graph.<b>selectNodesInRange</b>(<i>selection</i>)
@@ -143,0 +147,0 @@

src/config.ts

@@ -36,3 +36,3 @@ import { D3ZoomEvent } from 'd3-zoom'
    */
-  onZoomStart?: (e: D3ZoomEvent<HTMLCanvasElement, unknown>, userDriven: boolean) => void;
+  onZoomStart?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
   /**
@@ -45,3 +45,3 @@ * Callback function that will be called continuously during zooming or panning.
    */
-  onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, unknown>, userDriven: boolean) => void;
+  onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
   /**
@@ -54,3 +54,3 @@ * Callback function that will be called when zooming or panning ends.
    */
-  onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, unknown>, userDriven: boolean) => void;
+  onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
 }
@@ -57,0 +57,0 @@

src/index.ts

@@ -1,2 +0,2 @@
-import { select } from 'd3-selection'
+import { select, Selection } from 'd3-selection'
 import 'd3-transition'
@@ -25,2 +25,3 @@ import { easeQuadIn, easeQuadOut, easeQuadInOut } from 'd3-ease'
   private canvas: HTMLCanvasElement
+  private canvasD3Selection: Selection<HTMLCanvasElement, undefined, null, undefined>
   private reglInstance: regl.Regl
@@ -63,3 +64,4 @@ private requestAnimationFrameId = 0
     this.canvas = canvas
-    select(canvas)
+    this.canvasD3Selection = select<HTMLCanvasElement, undefined>(canvas)
+    this.canvasD3Selection
       .call(this.zoomInstance.behavior)
@@ -203,3 +205,3 @@ .on('click', this.onClick.bind(this))
   public setZoomLevel (value: number, duration = 0): void {
-    select(this.canvas)
+    this.canvasD3Selection
       .transition()
@@ -280,13 +282,18 @@ .duration(duration)
    * Center and zoom in/out the view to fit all nodes in the scene.
-   * @param duration Duration of the center and zoom in/out animation in milliseconds (`500` by default).
+   * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
    */
   public fitView (duration = 250): void {
-    const transform = this.zoomInstance.getTransform(this.getNodePositionsArray())
-    select(this.canvas)
-      .transition()
-      .ease(easeQuadInOut)
-      .duration(duration)
-      .call(this.zoomInstance.behavior.transform, transform)
+    this.setZoomTransformByNodePositions(this.getNodePositionsArray(), duration)
   }
 
+  /**
+   * Center and zoom in/out the view to fit nodes by their ids in the scene.
+   * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
+   */
+  public fitViewByNodeIds (ids: string[], duration = 250): void {
+    const positionsMap = this.getNodePositionsMap()
+    const positions = ids.map(id => positionsMap.get(id)).filter((d): d is [number, number] => d !== undefined)
+    this.setZoomTransformByNodePositions(positions, duration)
+  }
+
   /** Select nodes inside a rectangular area.
@@ -300,3 +307,3 @@ * @param selection - Array of two corner points `[[left, top], [right, bottom]]`.
       this.store.selectedArea = [[selection[0][0], (h - selection[1][1])], [selection[1][0], (h - selection[0][1])]]
-      this.points.findPoint()
+      this.points.findPointsOnAreaSelection()
       const pixels = readPixels(this.reglInstance, this.points.selectedFbo as regl.Framebuffer2D)
@@ -557,5 +564,3 @@ this.store.selectedIndices = pixels
   private onClick (event: MouseEvent): void {
-    const h = this.store.screenSize[1]
-    this.store.selectedArea = [[event.offsetX, (h - event.offsetY)], [event.offsetX, (h - event.offsetY)]]
-    this.points.findPoint()
+    this.points.findPointsOnMouseClick()
     const pixels = readPixels(this.reglInstance, this.points.selectedFbo as regl.Framebuffer2D)
@@ -586,2 +591,3 @@ let position: [number, number] | undefined
     this.store.mousePosition[1] -= (this.store.screenSize[1] - this.config.spaceSize) / 2
+    this.store.screenMousePosition = [mouseX, (this.store.screenSize[1] - mouseY)]
     this.isRightClickMouse = event.which === 3
@@ -605,3 +611,3 @@ }
       this.reglInstance.poll()
-      select(this.canvas)
+      this.canvasD3Selection
         .call(this.zoomInstance.behavior.transform, this.zoomInstance.eventTransform)
@@ -611,2 +617,11 @@ }
 
+  private setZoomTransformByNodePositions (positions: [number, number][], duration = 250, scale?: number): void {
+    const transform = this.zoomInstance.getTransform(positions, scale)
+    this.canvasD3Selection
+      .transition()
+      .ease(easeQuadInOut)
+      .duration(duration)
+      .call(this.zoomInstance.behavior.transform, transform)
+  }
+
   private zoomToNode (node: N, duration: number): void {
@@ -621,12 +636,8 @@ const { graph, store: { screenSize } } = this
     const distance = this.zoomInstance.getDistanceToPoint([posX, posY])
-    const transform = this.zoomInstance.getTransform([[posX, posY]], 3)
     if (distance < Math.min(screenSize[0], screenSize[1])) {
-      select(this.canvas)
-        .transition()
-        .ease(easeQuadInOut)
-        .duration(duration)
-        .call(this.zoomInstance.behavior.transform, transform)
+      this.setZoomTransformByNodePositions([[posX, posY]], duration, 3)
     } else {
+      const transform = this.zoomInstance.getTransform([[posX, posY]], 3)
       const middle = this.zoomInstance.getMiddlePointTransform([posX, posY])
-      select(this.canvas)
+      this.canvasD3Selection
         .transition()
@@ -633,0 +644,0 @@ .ease(easeQuadIn)

src/modules/Points/index.ts

@@ -6,3 +6,4 @@ import regl from 'regl'
 import drawPointsVert from '@/graph/modules/Points/draw-points.vert'
-import findPointFrag from '@/graph/modules/Points/find-point.frag'
+import findPointOnMouseClickFrag from '@/graph/modules/Points/find-point-on-mouse-click.frag'
+import findPointsOnAreaSelectionFrag from '@/graph/modules/Points/find-points-on-area-selection.frag'
 import { createSizeBuffer } from '@/graph/modules/Points/size-buffer'
@@ -25,3 +26,4 @@ import updatePositionFrag from '@/graph/modules/Points/update-position.frag'
   private updatePositionCommand: regl.DrawCommand | undefined
-  private findPointCommand: regl.DrawCommand | undefined
+  private findPointOnMouseClickCommand: regl.DrawCommand | undefined
+  private findPointsOnAreaSelectionCommand: regl.DrawCommand | undefined
 
@@ -145,4 +147,4 @@ public create (): void {
     })
-    this.findPointCommand = reglInstance({
-      frag: findPointFrag,
+    this.findPointOnMouseClickCommand = reglInstance({
+      frag: findPointOnMouseClickFrag,
       vert: updateVert,
@@ -161,2 +163,22 @@ framebuffer: () => this.selectedFbo as regl.Framebuffer2D,
         ratio: () => config.pixelRatio,
+        mousePosition: () => store.screenMousePosition,
+        scaleNodesOnZoom: () => config.scaleNodesOnZoom,
+        maxPointSize: () => store.maxPointSize,
+      },
+    })
+    this.findPointsOnAreaSelectionCommand = reglInstance({
+      frag: findPointsOnAreaSelectionFrag,
+      vert: updateVert,
+      framebuffer: () => this.selectedFbo as regl.Framebuffer2D,
+      primitive: 'triangle strip',
+      count: 4,
+      attributes: { quad: createQuadBuffer(reglInstance) },
+      uniforms: {
+        position: () => this.currentPositionFbo,
+        particleSize: () => this.sizeFbo,
+        spaceSize: () => config.spaceSize,
+        screenSize: () => store.screenSize,
+        sizeScale: () => config.nodeSizeScale,
+        transform: () => store.transform,
+        ratio: () => config.pixelRatio,
         'selection[0]': () => store.selectedArea[0],
@@ -194,6 +216,10 @@ 'selection[1]': () => store.selectedArea[1],
 
-  public findPoint (): void {
-    this.findPointCommand?.()
+  public findPointsOnAreaSelection (): void {
+    this.findPointsOnAreaSelectionCommand?.()
   }
 
+  public findPointsOnMouseClick (): void {
+    this.findPointOnMouseClickCommand?.()
+  }
+
   public destroy (): void {
@@ -200,0 +226,0 @@ this.currentPositionFbo?.destroy()

src/modules/Store/index.ts

@@ -15,2 +15,3 @@ import { scaleLinear } from 'd3-scale'
   public mousePosition = [0, 0]
+  public screenMousePosition = [0, 0]
   public selectedArea = [[0, 0], [0, 0]]
@@ -17,0 +18,0 @@ public isSimulationRunning = false

src/modules/Zoom/index.ts

@@ -13,4 +13,4 @@ import { zoom, ZoomTransform, zoomIdentity, D3ZoomEvent } from 'd3-zoom'
   public eventTransform = zoomIdentity
-  public behavior = zoom<HTMLCanvasElement, unknown>()
-    .on('start', (e: D3ZoomEvent<HTMLCanvasElement, unknown>) => {
+  public behavior = zoom<HTMLCanvasElement, undefined>()
+    .on('start', (e: D3ZoomEvent<HTMLCanvasElement, undefined>) => {
       this.isRunning = true
@@ -20,3 +20,3 @@ const userDriven = !!e.sourceEvent
     })
-    .on('zoom', (e: D3ZoomEvent<HTMLCanvasElement, unknown>) => {
+    .on('zoom', (e: D3ZoomEvent<HTMLCanvasElement, undefined>) => {
       this.eventTransform = e.transform
@@ -36,3 +36,3 @@ const { eventTransform: { x, y, k }, store: { transform, screenSize } } = this
     })
-    .on('end', (e: D3ZoomEvent<HTMLCanvasElement, unknown>) => {
+    .on('end', (e: D3ZoomEvent<HTMLCanvasElement, undefined>) => {
       this.isRunning = false
@@ -39,0 +39,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

332429

increased by2.14%

Number of package files

80

increased by1.27%

Lines of code

5958

increased by1.41%

Number of lines in readme file

238

increased by1.71%

Worsened metrics

Number of low supply chain risk alerts

8

increased by14.29%

No dependency changes