@cosmograph/cosmos - npm Package Compare versions

Comparing version 2.0.0-beta.4 to 2.0.0-beta.5

dist/config.d.ts

@@ -88,3 +88,3 @@ import { D3ZoomEvent } from 'd3-zoom';
      * Decay coefficient. Use smaller values if you want the simulation to "cool down" slower.
-     * Default value: `1000`
+     * Default value: `5000`
      */
@@ -94,3 +94,3 @@ decay?: number;
      * Gravity force coefficient.
-     * Default value: `0`
+     * Default value: `0.25`
      */
@@ -105,3 +105,3 @@ gravity?: number;
      * Repulsion force coefficient.
-     * Default value: `0.1`
+     * Default value: `1.0`
      */
@@ -112,3 +112,3 @@ repulsion?: number;
      * When `useQuadtree` is set to `true`, this property corresponds to the Barnes–Hut approximation criterion.
-     * Default value: `1.7`
+     * Default value: `1.15`
      */
@@ -129,3 +129,3 @@ repulsionTheta?: number;
      * Minimum link distance.
-     * Default value: `2`
+     * Default value: `10`
      */
@@ -192,5 +192,6 @@ linkDistance?: number;
      * Canvas background color.
+     * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
      * Default value: '#222222'
      */
-    backgroundColor?: string;
+    backgroundColor?: string | [number, number, number, number];
     /**
@@ -227,3 +228,3 @@ * Simulation space size (max 8192).
      * Cursor style to use when hovering over a point
-     * Default value: `pointer`
+     * Default value: `auto`
      */
@@ -238,10 +239,12 @@ hoveredPointCursor?: string;
      * Hovered point ring color hex value.
+     * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
      * Default value: `white`
      */
-    hoveredPointRingColor?: string;
+    hoveredPointRingColor?: string | [number, number, number, number];
     /**
      * Focused point ring color hex value.
+     * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
      * Default value: `white`
      */
-    focusedPointRingColor?: string;
+    focusedPointRingColor?: string | [number, number, number, number];
     /**
@@ -362,6 +365,6 @@ * Turns link rendering on / off.
     /**
-     * Disables dragging points.
-     * Default: `true`
+     * Enables or disables dragging of points in the graph.
+     * Default value: `false`
      */
-    disableDrag?: boolean;
+    enableDrag?: boolean;
     /**
@@ -373,3 +376,3 @@ * Whether to center and zoom the view to fit all points in the scene on initialization or not.
     /**
-     * Delay in milliseconds before fitting the view.
+     * Delay in milliseconds before fitting the view when `fitViewOnInit` is enabled.
      * Useful if you want the layout to stabilize a bit before fitting.
@@ -380,2 +383,14 @@ * Default: `250`
     /**
+     * Padding to apply when fitting the view to show all points.
+     * This value is added to the calculated bounding box to provide some extra space around the points.
+     * This is used when the `fitViewOnInit` option is enabled.
+     * Default: `0.1`
+     */
+    fitViewPadding?: number;
+    /**
+     * Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled.
+     * Default: `250`
+     */
+    fitViewDuration?: number;
+    /**
      * When `fitViewOnInit` is set to `true`, fits the view to show the points within a rectangle
@@ -435,5 +450,7 @@ * defined by its two corner coordinates `[[left, bottom], [right, top]]` in the scene space.
     disableZoom: boolean;
-    disableDrag: boolean;
+    enableDrag: boolean;
     fitViewOnInit: boolean;
     fitViewDelay: number;
+    fitViewPadding: number;
+    fitViewDuration: number;
     fitViewByPointsInRect: undefined;
@@ -440,0 +457,0 @@ randomSeed: undefined;

dist/index.d.ts

@@ -162,3 +162,3 @@ 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
+     * @param padding Padding around the viewport in percentage (`0.1` by default).
      */
@@ -165,0 +165,0 @@ fitView(duration?: number, padding?: number): void;

dist/variables.d.ts

@@ -44,5 +44,7 @@ export declare const defaultPointColor = "#b3b3b3";
     disableZoom: boolean;
-    disableDrag: boolean;
+    enableDrag: boolean;
     fitViewOnInit: boolean;
     fitViewDelay: number;
+    fitViewPadding: number;
+    fitViewDuration: number;
     pointSamplingDistance: number;
@@ -49,0 +51,0 @@ };

package.json

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

src/config.ts

@@ -109,3 +109,3 @@ import { D3ZoomEvent } from 'd3-zoom'
    * Decay coefficient. Use smaller values if you want the simulation to "cool down" slower.
-   * Default value: `1000`
+   * Default value: `5000`
    */
@@ -115,3 +115,3 @@ decay?: number;
    * Gravity force coefficient.
-   * Default value: `0`
+   * Default value: `0.25`
    */
@@ -126,3 +126,3 @@ gravity?: number;
    * Repulsion force coefficient.
-   * Default value: `0.1`
+   * Default value: `1.0`
    */
@@ -133,3 +133,3 @@ repulsion?: number;
    * When `useQuadtree` is set to `true`, this property corresponds to the Barnes–Hut approximation criterion.
-   * Default value: `1.7`
+   * Default value: `1.15`
    */
@@ -150,3 +150,3 @@ repulsionTheta?: number;
    * Minimum link distance.
-   * Default value: `2`
+   * Default value: `10`
    */
@@ -215,5 +215,6 @@ linkDistance?: number;
    * Canvas background color.
+   * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
    * Default value: '#222222'
    */
-  backgroundColor?: string;
+  backgroundColor?: string | [number, number, number, number];
   /**
@@ -253,3 +254,3 @@ * Simulation space size (max 8192).
    * Cursor style to use when hovering over a point
-   * Default value: `pointer`
+   * Default value: `auto`
    */
@@ -266,11 +267,13 @@ hoveredPointCursor?: string;
    * Hovered point ring color hex value.
+   * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
    * Default value: `white`
    */
-  hoveredPointRingColor?: string;
+  hoveredPointRingColor?: string | [number, number, number, number];
 
   /**
    * Focused point ring color hex value.
+   * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
    * Default value: `white`
    */
-  focusedPointRingColor?: string;
+  focusedPointRingColor?: string | [number, number, number, number];
 
@@ -395,6 +398,6 @@ /**
   /**
-   * Disables dragging points.
-   * Default: `true`
+   * Enables or disables dragging of points in the graph.
+   * Default value: `false`
    */
-  disableDrag?: boolean;
+  enableDrag?: boolean;
   /**
@@ -406,3 +409,3 @@ * Whether to center and zoom the view to fit all points in the scene on initialization or not.
   /**
-   * Delay in milliseconds before fitting the view.
+   * Delay in milliseconds before fitting the view when `fitViewOnInit` is enabled.
    * Useful if you want the layout to stabilize a bit before fitting.
@@ -413,2 +416,14 @@ * Default: `250`
   /**
+   * Padding to apply when fitting the view to show all points.
+   * This value is added to the calculated bounding box to provide some extra space around the points.
+   * This is used when the `fitViewOnInit` option is enabled.
+   * Default: `0.1`
+   */
+  fitViewPadding?: number;
+  /**
+   * Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled.
+   * Default: `250`
+   */
+  fitViewDuration?: number;
+  /**
    * When `fitViewOnInit` is set to `true`, fits the view to show the points within a rectangle
@@ -502,5 +517,7 @@ * defined by its two corner coordinates `[[left, bottom], [right, top]]` in the scene space.
   public disableZoom = defaultConfigValues.disableZoom
-  public disableDrag = defaultConfigValues.disableDrag
+  public enableDrag = defaultConfigValues.enableDrag
   public fitViewOnInit = defaultConfigValues.fitViewOnInit
   public fitViewDelay = defaultConfigValues.fitViewDelay
+  public fitViewPadding = defaultConfigValues.fitViewPadding
+  public fitViewDuration = defaultConfigValues.fitViewDuration
   public fitViewByPointsInRect = undefined
@@ -507,0 +524,0 @@

src/index.ts

@@ -118,3 +118,3 @@ import { select, Selection } from 'd3-selection'
       .on('contextmenu', this.onRightClickMouse.bind(this))
-    if (this.config.disableZoom || this.config.disableDrag) this.updateZoomDragBehaviors()
+    if (this.config.disableZoom || !this.config.enableDrag) this.updateZoomDragBehaviors()
     this.setZoomLevel(this.config.initialZoomLevel ?? 1)
@@ -239,3 +239,3 @@
 
-    if (prevConfig.disableZoom !== this.config.disableZoom || prevConfig.disableDrag !== this.config.disableDrag) {
+    if (prevConfig.disableZoom !== this.config.disableZoom || prevConfig.enableDrag !== this.config.enableDrag) {
       this.updateZoomDragBehaviors()
@@ -340,3 +340,3 @@ }
     this.graph.update()
-    const { fitViewOnInit, fitViewDelay, fitViewByPointsInRect, initialZoomLevel } = this.config
+    const { fitViewOnInit, fitViewDelay, fitViewPadding, fitViewDuration, fitViewByPointsInRect, initialZoomLevel } = this.config
     if (!this.graph.pointsNumber && !this.graph.linksNumber) {
@@ -357,4 +357,4 @@ this.stopFrames()
       this._fitViewOnInitTimeoutID = window.setTimeout(() => {
-        if (fitViewByPointsInRect) this.setZoomTransformByPointPositions(fitViewByPointsInRect, undefined, undefined, 0)
-        else this.fitView()
+        if (fitViewByPointsInRect) this.setZoomTransformByPointPositions(fitViewByPointsInRect, fitViewDuration, undefined, fitViewPadding)
+        else this.fitView(fitViewDuration, fitViewPadding)
       }, fitViewDelay)
@@ -459,3 +459,3 @@ }
    * @param duration Duration of the center and zoom in/out animation in milliseconds (`250` by default).
-   * @param padding Padding around the viewport in percentage
+   * @param padding Padding around the viewport in percentage (`0.1` by default).
    */
@@ -689,2 +689,8 @@ public fitView (duration = 250, padding = 0.1): void {
     this.destroyParticleSystem()
+    // Clears the canvas after particle system is destroyed
+    this.reglInstance.clear({
+      color: this.store.backgroundColor,
+      depth: 1,
+      stencil: 0,
+    })
     select(this.canvas).style('cursor', null)
@@ -919,7 +925,9 @@ this.fpsMonitor?.destroy()
   private updateZoomDragBehaviors (): void {
-    if (this.config.disableDrag) {
+    if (this.config.enableDrag) {
+      this.canvasD3Selection.call(this.dragInstance.behavior)
+    } else {
       this.canvasD3Selection
         .call(this.dragInstance.behavior)
         .on('.drag', null)
-    } else this.canvasD3Selection.call(this.dragInstance.behavior)
+    }
 
@@ -974,3 +982,3 @@ if (this.config.disableZoom) {
     else if (this.store.hoveredPoint) {
-      if (this.config.disableDrag || this.store.isSpaceKeyPressed) select(this.canvas).style('cursor', hoveredPointCursor)
+      if (!this.config.enableDrag || this.store.isSpaceKeyPressed) select(this.canvas).style('cursor', hoveredPointCursor)
       else select(this.canvas).style('cursor', 'grab')
@@ -977,0 +985,0 @@ } else select(this.canvas).style('cursor', null)

src/variables.ts

@@ -45,5 +45,7 @@ export const defaultPointColor = '#b3b3b3'
   disableZoom: false,
-  disableDrag: true,
+  enableDrag: false,
   fitViewOnInit: true,
   fitViewDelay: 250,
+  fitViewPadding: 0.1,
+  fitViewDuration: 250,
   pointSamplingDistance: 150,
@@ -50,0 +52,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

2232469

increased by0.29%

Lines of code

9355

increased by0.62%

No dependency changes