@cosmograph/cosmos - npm Package Compare versions

Comparing version 1.6.0-beta.3 to 1.6.0-beta.4

dist/index.d.ts

@@ -119,9 +119,11 @@ import 'd3-transition';
      * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
+     * @param padding Padding around the viewport in percentage
      */
-    fitView(duration?: number): void;
+    fitView(duration?: number, padding?: 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).
+     * @param padding Padding around the viewport in percentage
      */
-    fitViewByNodeIds(ids: string[], duration?: number): void;
+    fitViewByNodeIds(ids: string[], duration?: number, padding?: number): void;
     /** Select nodes inside a rectangular area.
@@ -128,0 +130,0 @@ * @param selection - Array of two corner points `[[left, top], [right, bottom]]`.

dist/modules/Zoom/index.d.ts

@@ -12,7 +12,15 @@ import { ZoomTransform } from 'd3-zoom';
     constructor(store: Store<N>, config: GraphConfigInterface<N, L>);
+    /**
+     * Get the zoom transform that will fit the given node positions into the viewport
+     *
+     * @param positions An array of node positions in the form `[x, y]`
+     * @param scale An optional scale factor to apply to the transform
+     * @param padding Padding around the viewport in percentage
+     */
     getTransform(positions: [number, number][], scale?: number, padding?: number): ZoomTransform;
     getDistanceToPoint(position: [number, number]): number;
     getMiddlePointTransform(position: [number, number]): ZoomTransform;
+    convertScreenToSpacePosition(screenPosition: [number, number]): [number, number];
     convertSpaceToScreenPosition(spacePosition: [number, number]): [number, number];
     convertSpaceToScreenRadius(spaceRadius: number): number;
 }

package.json

 {
   "name": "@cosmograph/cosmos",
-  "version": "1.6.0-beta.3",
+  "version": "1.6.0-beta.4",
   "description": "GPU-based force graph layout and rendering",
@@ -5,0 +5,0 @@ "jsdelivr": "dist/index.min.js",

src/index.ts

@@ -366,5 +366,6 @@ import { select, Selection } from 'd3-selection'
    * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
+   * @param padding Padding around the viewport in percentage
    */
-  public fitView (duration = 250): void {
-    this.setZoomTransformByNodePositions(this.getNodePositionsArray(), duration)
+  public fitView (duration = 250, padding = 0.1): void {
+    this.setZoomTransformByNodePositions(this.getNodePositionsArray(), duration, undefined, padding)
   }
@@ -375,7 +376,8 @@
    * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
+   * @param padding Padding around the viewport in percentage
    */
-  public fitViewByNodeIds (ids: string[], duration = 250): void {
+  public fitViewByNodeIds (ids: string[], duration = 250, padding = 0.1): 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)
+    this.setZoomTransformByNodePositions(positions, duration, undefined, padding)
   }
@@ -783,11 +785,5 @@
     if (!event || event.offsetX === undefined || event.offsetY === undefined) return
-    const { x, y, k } = this.zoomInstance.eventTransform
-    const h = this.canvas.clientHeight
     const mouseX = event.offsetX
     const mouseY = event.offsetY
-    const invertedX = (mouseX - x) / k
-    const invertedY = (mouseY - y) / k
-    this.store.mousePosition = [invertedX, (h - invertedY)]
-    this.store.mousePosition[0] -= (this.store.screenSize[0] - this.store.adjustedSpaceSize) / 2
-    this.store.mousePosition[1] -= (this.store.screenSize[1] - this.store.adjustedSpaceSize) / 2
+    this.store.mousePosition = this.zoomInstance.convertScreenToSpacePosition([mouseX, mouseY])
     this.store.screenMousePosition = [mouseX, (this.store.screenSize[1] - mouseY)]
@@ -819,2 +815,6 @@ }
     if (forceResize || prevWidth !== w * this.config.pixelRatio || prevHeight !== h * this.config.pixelRatio) {
+      const [prevW, prevH] = this.store.screenSize
+      const { k } = this.zoomInstance.eventTransform
+      const centerPosition = this.zoomInstance.convertScreenToSpacePosition([prevW / 2, prevH / 2])
+
       this.store.updateScreenSize(w, h)
@@ -825,3 +825,3 @@ this.canvas.width = w * this.config.pixelRatio
       this.canvasD3Selection
-        .call(this.zoomInstance.behavior.transform, this.zoomInstance.eventTransform)
+        .call(this.zoomInstance.behavior.transform, this.zoomInstance.getTransform([centerPosition], k))
       this.points.updateSampledNodesGrid()
@@ -828,0 +828,0 @@ }

src/modules/Points/index.ts

 import regl from 'regl'
 import { scaleLinear } from 'd3-scale'
+import { extent } from 'd3-array'
 import { CoreModule } from '@/graph/modules/core-module'
@@ -469,6 +470,6 @@ import { defaultConfigValues } from '@/graph/variables'
     if (ys.length === 0) return
-    const minX = Math.min(...xs)
-    const maxX = Math.max(...xs)
-    const minY = Math.min(...ys)
-    const maxY = Math.max(...ys)
+    const [minX, maxX] = extent(xs)
+    if (minX === undefined || maxX === undefined) return
+    const [minY, maxY] = extent(ys)
+    if (minY === undefined || maxY === undefined) return
     const w = maxX - minX
@@ -475,0 +476,0 @@ const h = maxY - minY

src/modules/Zoom/index.ts

@@ -49,3 +49,10 @@ import { zoom, ZoomTransform, zoomIdentity, D3ZoomEvent } from 'd3-zoom'
 
-  public getTransform (positions: [number, number][], scale?: number, padding = this.store.maxPointSize / 2): ZoomTransform {
+  /**
+   * Get the zoom transform that will fit the given node positions into the viewport
+   *
+   * @param positions An array of node positions in the form `[x, y]`
+   * @param scale An optional scale factor to apply to the transform
+   * @param padding Padding around the viewport in percentage
+   */
+  public getTransform (positions: [number, number][], scale?: number, padding = 0.1): ZoomTransform {
     if (positions.length === 0) return this.eventTransform
@@ -57,9 +64,9 @@ const { store: { screenSize } } = this
     const yExtent = extent(positions.map(d => d[1])) as [number, number]
-    xExtent[0] = this.store.scaleX(xExtent[0] - padding)
-    xExtent[1] = this.store.scaleX(xExtent[1] + padding)
-    yExtent[0] = this.store.scaleY(yExtent[0] - padding)
-    yExtent[1] = this.store.scaleY(yExtent[1] + padding)
+    xExtent[0] = this.store.scaleX(xExtent[0])
+    xExtent[1] = this.store.scaleX(xExtent[1])
+    yExtent[0] = this.store.scaleY(yExtent[0])
+    yExtent[1] = this.store.scaleY(yExtent[1])
 
-    const xScale = width / (xExtent[1] - xExtent[0])
-    const yScale = height / (yExtent[0] - yExtent[1])
+    const xScale = (width * (1 - padding * 2)) / (xExtent[1] - xExtent[0])
+    const yScale = (height * (1 - padding * 2)) / (yExtent[0] - yExtent[1])
     const clampedScale = clamp(scale ?? Math.min(xScale, yScale), ...this.behavior.scaleExtent())
@@ -106,2 +113,14 @@ const xCenter = (xExtent[1] + xExtent[0]) / 2
 
+  public convertScreenToSpacePosition (screenPosition: [number, number]): [number, number] {
+    const { eventTransform: { x, y, k }, store: { screenSize } } = this
+    const w = screenSize[0]
+    const h = screenSize[1]
+    const invertedX = (screenPosition[0] - x) / k
+    const invertedY = (screenPosition[1] - y) / k
+    const spacePosition = [invertedX, (h - invertedY)] as [number, number]
+    spacePosition[0] -= (w - this.store.adjustedSpaceSize) / 2
+    spacePosition[1] -= (h - this.store.adjustedSpaceSize) / 2
+    return spacePosition
+  }
+
   public convertSpaceToScreenPosition (spacePosition: [number, number]): [number, number] {
@@ -108,0 +127,0 @@ const screenPointX = this.eventTransform.applyX(this.store.scaleX(spacePosition[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

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

1785190

increased by0.16%

Lines of code

9097

increased by0.53%

No dependency changes