From 75657ab66185edbf93083c406f45343c742470b9 Mon Sep 17 00:00:00 2001
From: Felix Hofmann <felix@hofmann.rocks>
Date: Wed, 14 Aug 2024 15:01:45 +0200
Subject: [PATCH] added generics for nodes and links in typescript

---
 src/index.d.ts | 165 +++++++++++++++++++++++++++----------------------
 src/index.js   |   4 +-
 2 files changed, 94 insertions(+), 75 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 6a67eec..b4ea342 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,7 +1,8 @@
-export interface GraphData {
-  nodes: NodeObject[];
-  links: LinkObject[];
+export interface TypedGraphData<N extends NodeObject, L extends TypedLinkObject<N>> {
+  nodes: N[];
+  links: L[];
 }
+export interface GraphData extends TypedGraphData<NodeObject, TypedLinkObject<NodeObject>> {}
 
 export interface NodeObject {
   id?: string | number;
@@ -13,14 +14,15 @@ export interface NodeObject {
   fy?: number;
 }
 
-export interface LinkObject {
-  source?: string | number | NodeObject;
-  target?: string | number | NodeObject;
+export interface TypedLinkObject<N extends NodeObject> {
+  source?: string | number | N;
+  target?: string | number | N;
 }
+export interface LinkObject extends TypedLinkObject<NodeObject> {}
 
 type Accessor<In, Out> = Out | string | ((obj: In) => Out);
-type NodeAccessor<T> = Accessor<NodeObject, T>;
-type LinkAccessor<T> = Accessor<LinkObject, T>;
+type NodeAccessor<N extends NodeObject, T> = Accessor<N, T>;
+type LinkAccessor<N extends NodeObject, L extends TypedLinkObject<N>, T> = Accessor<L, T>;
 
 type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
 export type CanvasCustomRenderModeFn<T> = (obj: T) => CanvasCustomRenderMode | any;
@@ -35,14 +37,19 @@ interface ForceFn {
   [key: string]: any;
 }
 
-export interface ForceGraphGenericInstance<ChainableInstance> {
+export interface FullTypedForceGraphGenericInstance<
+    N extends NodeObject,
+    L extends TypedLinkObject<N>,
+    D extends TypedGraphData<N, L>,
+    ChainableInstance
+> {
   (element: HTMLElement): ChainableInstance;
   resetProps(): ChainableInstance;
   _destructor(): void;
 
   // Data input
-  graphData(): GraphData;
-  graphData(data: GraphData): ChainableInstance;
+  graphData(): D;
+  graphData(data: D): ChainableInstance;
   nodeId(): string;
   nodeId(id: string): ChainableInstance;
   linkSource(): string;
@@ -61,59 +68,59 @@ export interface ForceGraphGenericInstance<ChainableInstance> {
   // Node styling
   nodeRelSize(): number;
   nodeRelSize(size: number): ChainableInstance;
-  nodeVal(): NodeAccessor<number>;
-  nodeVal(valAccessor: NodeAccessor<number>): ChainableInstance;
-  nodeLabel(): NodeAccessor<string>;
-  nodeLabel(labelAccessor: NodeAccessor<string>): ChainableInstance;
-  nodeVisibility(): NodeAccessor<boolean>;
-  nodeVisibility(visibilityAccessor: NodeAccessor<boolean>): ChainableInstance;
-  nodeColor(): NodeAccessor<string>;
-  nodeColor(colorAccessor: NodeAccessor<string>): ChainableInstance;
-  nodeAutoColorBy(): NodeAccessor<string | null>;
-  nodeAutoColorBy(colorByAccessor: NodeAccessor<string | null>): ChainableInstance;
-  nodeCanvasObject(): CanvasCustomRenderFn<NodeObject>;
-  nodeCanvasObject(renderFn: CanvasCustomRenderFn<NodeObject>): ChainableInstance;
-  nodeCanvasObjectMode(): string | CanvasCustomRenderModeFn<NodeObject>;
-  nodeCanvasObjectMode(modeAccessor: string | CanvasCustomRenderModeFn<NodeObject>): ChainableInstance;
-  nodePointerAreaPaint(): CanvasPointerAreaPaintFn<NodeObject>;
-  nodePointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<NodeObject>): ChainableInstance;
+  nodeVal(): NodeAccessor<N, number>;
+  nodeVal(valAccessor: NodeAccessor<N, number>): ChainableInstance;
+  nodeLabel(): NodeAccessor<N, string>;
+  nodeLabel(labelAccessor: NodeAccessor<N, string>): ChainableInstance;
+  nodeVisibility(): NodeAccessor<N, boolean>;
+  nodeVisibility(visibilityAccessor: NodeAccessor<N, boolean>): ChainableInstance;
+  nodeColor(): NodeAccessor<N, string>;
+  nodeColor(colorAccessor: NodeAccessor<N, string>): ChainableInstance;
+  nodeAutoColorBy(): NodeAccessor<N, string | null>;
+  nodeAutoColorBy(colorByAccessor: NodeAccessor<N, string | null>): ChainableInstance;
+  nodeCanvasObject(): CanvasCustomRenderFn<N>;
+  nodeCanvasObject(renderFn: CanvasCustomRenderFn<N>): ChainableInstance;
+  nodeCanvasObjectMode(): string | CanvasCustomRenderModeFn<N>;
+  nodeCanvasObjectMode(modeAccessor: string | CanvasCustomRenderModeFn<N>): ChainableInstance;
+  nodePointerAreaPaint(): CanvasPointerAreaPaintFn<N>;
+  nodePointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<N>): ChainableInstance;
 
   // Link styling
-  linkLabel(): LinkAccessor<string>;
-  linkLabel(labelAccessor: LinkAccessor<string>): ChainableInstance;
-  linkVisibility(): LinkAccessor<boolean>;
-  linkVisibility(visibilityAccessor: LinkAccessor<boolean>): ChainableInstance;
-  linkColor(): LinkAccessor<string>;
-  linkColor(colorAccessor: LinkAccessor<string>): ChainableInstance;
-  linkAutoColorBy(): LinkAccessor<string | null>;
-  linkAutoColorBy(colorByAccessor: LinkAccessor<string | null>): ChainableInstance;
-  linkLineDash(): LinkAccessor<number[] | null>;
-  linkLineDash(linkLineDashAccessor: LinkAccessor<number[] | null>): ChainableInstance;
-  linkWidth(): LinkAccessor<number>;
-  linkWidth(widthAccessor: LinkAccessor<number>): ChainableInstance;
-  linkCurvature(): LinkAccessor<number>;
-  linkCurvature(curvatureAccessor: LinkAccessor<number>): ChainableInstance;
-  linkCanvasObject(): CanvasCustomRenderFn<LinkObject>;
-  linkCanvasObject(renderFn: CanvasCustomRenderFn<LinkObject>): ChainableInstance;
-  linkCanvasObjectMode(): string | CanvasCustomRenderModeFn<LinkObject>;
-  linkCanvasObjectMode(modeAccessor: string | CanvasCustomRenderModeFn<LinkObject>): ChainableInstance;
-  linkDirectionalArrowLength(): LinkAccessor<number>;
-  linkDirectionalArrowLength(lengthAccessor: LinkAccessor<number>): ChainableInstance;
-  linkDirectionalArrowColor(): LinkAccessor<string>;
-  linkDirectionalArrowColor(colorAccessor: LinkAccessor<string>): ChainableInstance;
-  linkDirectionalArrowRelPos(): LinkAccessor<number>;
-  linkDirectionalArrowRelPos(fractionAccessor: LinkAccessor<number>): ChainableInstance;
-  linkDirectionalParticles(): LinkAccessor<number>;
-  linkDirectionalParticles(numParticlesAccessor: LinkAccessor<number>): ChainableInstance;
-  linkDirectionalParticleSpeed(): LinkAccessor<number>;
-  linkDirectionalParticleSpeed(relDistancePerFrameAccessor: LinkAccessor<number>): ChainableInstance;
-  linkDirectionalParticleWidth(): LinkAccessor<number>;
-  linkDirectionalParticleWidth(widthAccessor: LinkAccessor<number>): ChainableInstance;
-  linkDirectionalParticleColor(): LinkAccessor<string>;
-  linkDirectionalParticleColor(colorAccessor: LinkAccessor<string>): ChainableInstance;
-  emitParticle(link: LinkObject): ChainableInstance;
-  linkPointerAreaPaint(): CanvasPointerAreaPaintFn<LinkObject>;
-  linkPointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<LinkObject>): ChainableInstance;
+  linkLabel(): LinkAccessor<N, L, string>;
+  linkLabel(labelAccessor: LinkAccessor<N, L, string>): ChainableInstance;
+  linkVisibility(): LinkAccessor<N, L, boolean>;
+  linkVisibility(visibilityAccessor: LinkAccessor<N, L, boolean>): ChainableInstance;
+  linkColor(): LinkAccessor<N, L, string>;
+  linkColor(colorAccessor: LinkAccessor<N, L, string>): ChainableInstance;
+  linkAutoColorBy(): LinkAccessor<N, L, string | null>;
+  linkAutoColorBy(colorByAccessor: LinkAccessor<N, L, string | null>): ChainableInstance;
+  linkLineDash(): LinkAccessor<N, L, number[] | null>;
+  linkLineDash(linkLineDashAccessor: LinkAccessor<N, L, number[] | null>): ChainableInstance;
+  linkWidth(): LinkAccessor<N, L, number>;
+  linkWidth(widthAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkCurvature(): LinkAccessor<N, L, number>;
+  linkCurvature(curvatureAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkCanvasObject(): CanvasCustomRenderFn<L>;
+  linkCanvasObject(renderFn: CanvasCustomRenderFn<L>): ChainableInstance;
+  linkCanvasObjectMode(): string | CanvasCustomRenderModeFn<L>;
+  linkCanvasObjectMode(modeAccessor: string | CanvasCustomRenderModeFn<L>): ChainableInstance;
+  linkDirectionalArrowLength(): LinkAccessor<N, L, number>;
+  linkDirectionalArrowLength(lengthAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkDirectionalArrowColor(): LinkAccessor<N, L, string>;
+  linkDirectionalArrowColor(colorAccessor: LinkAccessor<N, L, string>): ChainableInstance;
+  linkDirectionalArrowRelPos(): LinkAccessor<N, L, number>;
+  linkDirectionalArrowRelPos(fractionAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkDirectionalParticles(): LinkAccessor<N, L, number>;
+  linkDirectionalParticles(numParticlesAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkDirectionalParticleSpeed(): LinkAccessor<N, L, number>;
+  linkDirectionalParticleSpeed(relDistancePerFrameAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkDirectionalParticleWidth(): LinkAccessor<N, L, number>;
+  linkDirectionalParticleWidth(widthAccessor: LinkAccessor<N, L, number>): ChainableInstance;
+  linkDirectionalParticleColor(): LinkAccessor<N, L, string>;
+  linkDirectionalParticleColor(colorAccessor: LinkAccessor<N, L, string>): ChainableInstance;
+  emitParticle(link: L): ChainableInstance;
+  linkPointerAreaPaint(): CanvasPointerAreaPaintFn<L>;
+  linkPointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<L>): ChainableInstance;
 
   // Render control
   autoPauseRedraw(): boolean;
@@ -124,7 +131,7 @@ export interface ForceGraphGenericInstance<ChainableInstance> {
   centerAt(x?: number, y?: number, durationMs?: number): ChainableInstance;
   zoom(): number;
   zoom(scale: number, durationMs?: number): ChainableInstance;
-  zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: NodeObject) => boolean): ChainableInstance;
+  zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: N) => boolean): ChainableInstance;
   minZoom(): number;
   minZoom(scale: number): ChainableInstance;
   maxZoom(): number;
@@ -137,8 +144,8 @@ export interface ForceGraphGenericInstance<ChainableInstance> {
   dagMode(mode: DagMode | null): ChainableInstance;
   dagLevelDistance(): number | null;
   dagLevelDistance(distance: number): ChainableInstance;
-  dagNodeFilter(): (node: NodeObject) => boolean;
-  dagNodeFilter(filterFn: (node: NodeObject) => boolean): ChainableInstance;
+  dagNodeFilter(): (node: N) => boolean;
+  dagNodeFilter(filterFn: (node: N) => boolean): ChainableInstance;
   onDagError(): (loopNodeIds: (string | number)[]) => void;
   onDagError(errorHandleFn: (loopNodeIds: (string | number)[]) => void): ChainableInstance;
   d3AlphaMin(): number;
@@ -160,14 +167,14 @@ export interface ForceGraphGenericInstance<ChainableInstance> {
   onEngineStop(callback: () => void): ChainableInstance;
 
   // Interaction
-  onNodeClick(callback: (node: NodeObject, event: MouseEvent) => void): ChainableInstance;
-  onNodeRightClick(callback: (node: NodeObject, event: MouseEvent) => void): ChainableInstance;
-  onNodeHover(callback: (node: NodeObject | null, previousNode: NodeObject | null) => void): ChainableInstance;
-  onNodeDrag(callback: (node: NodeObject, translate: { x: number, y: number }) => void): ChainableInstance;
-  onNodeDragEnd(callback: (node: NodeObject, translate: { x: number, y: number }) => void): ChainableInstance;
-  onLinkClick(callback: (link: LinkObject, event: MouseEvent) => void): ChainableInstance;
-  onLinkRightClick(callback: (link: LinkObject, event: MouseEvent) => void): ChainableInstance;
-  onLinkHover(callback: (link: LinkObject | null, previousLink: LinkObject | null) => void): ChainableInstance;
+  onNodeClick(callback: (node: N, event: MouseEvent) => void): ChainableInstance;
+  onNodeRightClick(callback: (node: N, event: MouseEvent) => void): ChainableInstance;
+  onNodeHover(callback: (node: N | null, previousNode: N | null) => void): ChainableInstance;
+  onNodeDrag(callback: (node: N, translate: { x: number, y: number }) => void): ChainableInstance;
+  onNodeDragEnd(callback: (node: N, translate: { x: number, y: number }) => void): ChainableInstance;
+  onLinkClick(callback: (link: L, event: MouseEvent) => void): ChainableInstance;
+  onLinkRightClick(callback: (link: L, event: MouseEvent) => void): ChainableInstance;
+  onLinkHover(callback: (link: L | null, previousLink: L | null) => void): ChainableInstance;
   linkHoverPrecision(): number;
   linkHoverPrecision(precision: number): ChainableInstance;
   onBackgroundClick(callback: (event: MouseEvent) => void): ChainableInstance;
@@ -184,13 +191,23 @@ export interface ForceGraphGenericInstance<ChainableInstance> {
   enablePointerInteraction(enable?: boolean): ChainableInstance;
 
   // Utility
-  getGraphBbox(nodeFilter?: (node: NodeObject) => boolean): { x: [number, number], y: [number, number] };
+  getGraphBbox(nodeFilter?: (node: N) => boolean): { x: [number, number], y: [number, number] };
   screen2GraphCoords(x: number, y: number): { x: number, y: number };
   graph2ScreenCoords(x: number, y: number): { x: number, y: number };
 }
 
+export interface TypedForceGraphGenericInstance<
+    N extends NodeObject,
+    L extends TypedLinkObject<N>,
+    ChainableInstance
+> extends FullTypedForceGraphGenericInstance<N, L, TypedGraphData<N, L>, ChainableInstance> {}
+export interface ForceGraphGenericInstance<ChainableInstance> extends FullTypedForceGraphGenericInstance<NodeObject, LinkObject, GraphData, ChainableInstance> {}
+
+export type TypedForceGraphInstance<N extends NodeObject, L extends TypedLinkObject<N>> = TypedForceGraphGenericInstance<N, L, TypedForceGraphInstance<N, L>>;
 export type ForceGraphInstance = ForceGraphGenericInstance<ForceGraphInstance>;
 
+declare function TypedForceGraph<N extends NodeObject, L extends TypedLinkObject<N>>(): TypedForceGraphInstance<N, L>;
 declare function ForceGraph(): ForceGraphInstance;
 
+export {TypedForceGraph};
 export default ForceGraph;
diff --git a/src/index.js b/src/index.js
index 3c23e1b..2218036 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,5 @@
 import './force-graph.css';
+import ForceGraph from './force-graph';
 
-export { default } from "./force-graph";
\ No newline at end of file
+export {ForceGraph as TypedForceGraph};
+export default ForceGraph;