react-force-graph-2d - npm Package Compare versions

Comparing version 1.24.4 to 1.25.0

dist/react-force-graph-2d.d.ts

 import * as React from 'react';
 import { ForceGraphInstance } from 'force-graph';
 
-interface GraphData {
-  nodes: NodeObject[];
-  links: LinkObject[];
+interface GraphData<NodeType = {}, LinkType = {}> {
+  nodes: NodeObject<NodeType>[];
+  links: LinkObject<NodeType, LinkType>[];
 }
 
-type NodeObject = object & {
+type NodeObject<NodeType = {}> = NodeType & {
   id?: string | number;
@@ -17,12 +17,14 @@ x?: number;
   fy?: number;
+  [others: string]: any;
 };
 
-type LinkObject = object & {
-  source?: string | number | NodeObject;
-  target?: string | number | NodeObject;
+type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+  source?: string | number | NodeObject<NodeType>;
+  target?: string | number | NodeObject<NodeType>;
+  [others: string]: any;
 };
 
 type Accessor<In, Out> = Out | string | ((obj: In) => Out);
-type NodeAccessor<T> = Accessor<NodeObject, T>;
-type LinkAccessor<T> = Accessor<LinkObject, T>;
+type NodeAccessor<NodeType, T> = Accessor<NodeObject<NodeType>, T>;
+type LinkAccessor<NodeType, LinkType, T> = Accessor<LinkObject<NodeType, LinkType>, T>;
 
@@ -35,11 +37,14 @@ type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
 
-interface ForceFn {
+interface ForceFn<NodeType = {}> {
   (alpha: number): void;
-  initialize?: (nodes: NodeObject[], ...args: any[]) => void;
+  initialize?: (nodes: NodeObject<NodeType>[], ...args: any[]) => void;
   [key: string]: any;
 }
 
-interface ForceGraphProps {
+interface ForceGraphProps<
+  NodeType = {},
+  LinkType = {}
+> {
   // Data input
-  graphData?: GraphData;
+  graphData?: GraphData<NodeObject<NodeType>, LinkObject<NodeType, LinkType>>;
   nodeId?: string;
@@ -56,29 +61,29 @@ linkSource?: string;
   nodeRelSize?: number;
-  nodeVal?: NodeAccessor<number>;
-  nodeLabel?: NodeAccessor<string>;
-  nodeVisibility?: NodeAccessor<boolean>;
-  nodeColor?: NodeAccessor<string>;
-  nodeAutoColorBy?: NodeAccessor<string | null>;
-  nodeCanvasObjectMode?: string | ((obj: NodeObject) => CanvasCustomRenderMode | any);
-  nodeCanvasObject?: CanvasCustomRenderFn<NodeObject>;
-  nodePointerAreaPaint?: CanvasPointerAreaPaintFn<NodeObject>;
+  nodeVal?: NodeAccessor<NodeType, number>;
+  nodeLabel?: NodeAccessor<NodeType, string>;
+  nodeVisibility?: NodeAccessor<NodeType, boolean>;
+  nodeColor?: NodeAccessor<NodeType, string>;
+  nodeAutoColorBy?: NodeAccessor<NodeType, string | null>;
+  nodeCanvasObjectMode?: string | ((obj: NodeObject<NodeType>) => CanvasCustomRenderMode | any);
+  nodeCanvasObject?: CanvasCustomRenderFn<NodeObject<NodeType>>;
+  nodePointerAreaPaint?: CanvasPointerAreaPaintFn<NodeObject<NodeType>>;
 
   // Link styling
-  linkLabel?: LinkAccessor<string>;
-  linkVisibility?: LinkAccessor<boolean>;
-  linkColor?: LinkAccessor<string>;
-  linkAutoColorBy?: LinkAccessor<string | null>;
-  linkLineDash?: LinkAccessor<number[] | null>;
-  linkWidth?: LinkAccessor<number>;
-  linkCurvature?: LinkAccessor<number>;
-  linkCanvasObject?: CanvasCustomRenderFn<LinkObject>;
-  linkCanvasObjectMode?: string | ((obj: LinkObject) => CanvasCustomRenderMode | any);
-  linkDirectionalArrowLength?: LinkAccessor<number>;
-  linkDirectionalArrowColor?: LinkAccessor<string>;
-  linkDirectionalArrowRelPos?: LinkAccessor<number>;
-  linkDirectionalParticles?: LinkAccessor<number>;
-  linkDirectionalParticleSpeed?: LinkAccessor<number>;
-  linkDirectionalParticleWidth?: LinkAccessor<number>;
-  linkDirectionalParticleColor?: LinkAccessor<string>;
-  linkPointerAreaPaint?: CanvasPointerAreaPaintFn<LinkObject>;
+  linkLabel?: LinkAccessor<NodeType, LinkType, string>;
+  linkVisibility?: LinkAccessor<NodeType, LinkType, boolean>;
+  linkColor?: LinkAccessor<NodeType, LinkType, string>;
+  linkAutoColorBy?: LinkAccessor<NodeType, LinkType, string | null>;
+  linkLineDash?: LinkAccessor<NodeType, LinkType, number[] | null>;
+  linkWidth?: LinkAccessor<NodeType, LinkType, number>;
+  linkCurvature?: LinkAccessor<NodeType, LinkType, number>;
+  linkCanvasObject?: CanvasCustomRenderFn<LinkObject<NodeType, LinkType>>;
+  linkCanvasObjectMode?: string | ((obj: LinkObject<NodeType, LinkType>) => CanvasCustomRenderMode | any);
+  linkDirectionalArrowLength?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalArrowColor?: LinkAccessor<NodeType, LinkType, string>;
+  linkDirectionalArrowRelPos?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticles?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleSpeed?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleWidth?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleColor?: LinkAccessor<NodeType, LinkType, string>;
+  linkPointerAreaPaint?: CanvasPointerAreaPaintFn<LinkObject<NodeType, LinkType>>;
 
@@ -95,3 +100,3 @@ // Render control
   dagLevelDistance?: number | null;
-  dagNodeFilter?: (node: NodeObject) => boolean;
+  dagNodeFilter?: (node: NodeObject<NodeType>) => boolean;
   onDagError?: ((loopNodeIds: (string | number)[]) => void) | undefined;
@@ -109,10 +114,10 @@ d3AlphaMin?: number;
   // Interaction
-  onNodeClick?: (node: NodeObject, event: MouseEvent) => void;
-  onNodeRightClick?: (node: NodeObject, event: MouseEvent) => void;
-  onNodeHover?: (node: NodeObject | null, previousNode: NodeObject | null) => void;
-  onNodeDrag?: (node: NodeObject, translate: { x: number, y: number }) => void;
-  onNodeDragEnd?: (node: NodeObject, translate: { x: number, y: number }) => void;
-  onLinkClick?: (link: LinkObject, event: MouseEvent) => void;
-  onLinkRightClick?: (link: LinkObject, event: MouseEvent) => void;
-  onLinkHover?: (link: LinkObject | null, previousLink: LinkObject | null) => void;
+  onNodeClick?: (node: NodeObject<NodeType>, event: MouseEvent) => void;
+  onNodeRightClick?: (node: NodeObject<NodeType>, event: MouseEvent) => void;
+  onNodeHover?: (node: NodeObject<NodeType> | null, previousNode: NodeObject<NodeType> | null) => void;
+  onNodeDrag?: (node: NodeObject<NodeType>, translate: { x: number, y: number }) => void;
+  onNodeDragEnd?: (node: NodeObject<NodeType>, translate: { x: number, y: number }) => void;
+  onLinkClick?: (link: LinkObject<NodeType, LinkType>, event: MouseEvent) => void;
+  onLinkRightClick?: (link: LinkObject<NodeType, LinkType>, event: MouseEvent) => void;
+  onLinkHover?: (link: LinkObject<NodeType, LinkType> | null, previousLink: LinkObject<NodeType, LinkType> | null) => void;
   linkHoverPrecision?: number;
@@ -129,9 +134,12 @@ onBackgroundClick?: (event: MouseEvent) => void;
 
-interface ForceGraphMethods {
+interface ForceGraphMethods<
+  NodeType = {},
+  LinkType = {}
+> {
   // Link styling
-  emitParticle(link: LinkObject): ForceGraphInstance;
+  emitParticle(link: LinkObject<NodeType, LinkType>): ForceGraphInstance;
 
   // Force engine (d3-force) configuration
-  d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn | undefined;
-  d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn): ForceGraphInstance;
+  d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn<NodeObject<NodeType>> | undefined;
+  d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn<NodeObject<NodeType>>): ForceGraphInstance;
   d3ReheatSimulation(): ForceGraphInstance;
@@ -146,6 +154,6 @@
   zoom(scale: number, durationMs?: number): ForceGraphInstance;
-  zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: NodeObject) => boolean): ForceGraphInstance;
+  zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: NodeObject<NodeType>) => boolean): ForceGraphInstance;
 
   // Utility
-  getGraphBbox(nodeFilter?: (node: NodeObject) => boolean): { x: [number, number], y: [number, number] };
+  getGraphBbox(nodeFilter?: (node: NodeObject<NodeType>) => boolean): { x: [number, number], y: [number, number] };
   screen2GraphCoords(x: number, y: number): { x: number, y: number };
@@ -155,6 +163,6 @@ graph2ScreenCoords(x: number, y: number): { x: number, y: number };
 
-type FCwithRef<P = {}, R = {}> = React.FunctionComponent<P & { ref?: React.MutableRefObject<R | undefined> }>;
+type FCwithRef = <NodeType = {}, LinkType = {}>(props: ForceGraphProps<NodeObject<NodeType>, LinkObject<NodeType, LinkType>> & { ref?: React.MutableRefObject<ForceGraphMethods<NodeObject<NodeType>, LinkObject<NodeType, LinkType>> | undefined>; }) => React.ReactElement;
 
-declare const ForceGraph: FCwithRef<ForceGraphProps, ForceGraphMethods>;
+declare const ForceGraph: FCwithRef;
 
 export { ForceGraphMethods, ForceGraphProps, GraphData, LinkObject, NodeObject, ForceGraph as default };

package.json

 {
   "name": "react-force-graph-2d",
-  "version": "1.24.4",
+  "version": "1.25.0",
   "description": "React component for 2D force directed graphs",
@@ -5,0 +5,0 @@ "license": "MIT",

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

1640628

increased by0.07%

Lines of code

13241

increased by0.06%

No dependency changes