force-graph 1.44.2 → 1.46.0

package/README.md

@@ -176,8 +176,8 @@ myGraph(<myDOMElement>)
 | <b>nodePointerAreaPaint</b>([<i>fn</i>]) | Callback function for painting a canvas area used to detect node pointer interactions. The provided paint color uniquely identifies the node and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the node. The callback function has the signature: `.nodePointerAreaPaint(<node>, <color>, <canvas context>, <current global scale>)`. | *default interaction area is a circle centered on the node and sized according to `val`.* |
 | <b>linkPointerAreaPaint</b>([<i>fn</i>]) | Callback function for painting a canvas area used to detect link pointer interactions. The provided paint color uniquely identifies the link and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the link. The callback function has the signature: `.linkPointerAreaPaint(<link>, <color>, <canvas context>, <current global scale>)`. | *default interaction area is a straight line between the source and target nodes.* |
 | <b>enableNodeDrag</b>([<i>boolean</i>]) | Getter/setter for whether to enable the user interaction to drag nodes by click-dragging. If enabled, every time a node is dragged the simulation is re-heated so the other nodes react to the changes. Only applicable if enablePointerInteraction is `true`. | `true` |
-| <b>enableZoomInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable zooming user interactions. | `true` |
-| <b>enablePanInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable panning user interactions. | `true` |
+| <b>enableZoomInteraction</b>([<i>boolean</i> or <i>fn</i>]) | Getter/setter for whether to enable zooming user interactions. When a predicate function is provided, the mouse event is passed as an argument.| `true` |
+| <b>enablePanInteraction</b>([<i>boolean</i> or <i>fn</i>]) | Getter/setter for whether to enable panning user interactions. When a predicate function is provided, the mouse event is passed as an argument.| `true` |
 | <b>enablePointerInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click/drag and tooltip labels, at the cost of performance. If you're looking for maximum gain in your graph performance it's recommended to switch off this property. | `true` |
 
 ###  Utility

package/dist/force-graph.d.ts

@@ -1,10 +1,11 @@
-interface GraphData {
-  nodes: NodeObject[];
-  links: LinkObject[];
+interface GraphData<N = NodeObject, L = LinkObject<N>> {
+  nodes: N[];
+  links: L[];
 }
 
 interface NodeObject {
   id?: string | number;
+  index?: number;
   x?: number;
   y?: number;
   vx?: number;
@@ -13,14 +14,14 @@ interface NodeObject {
   fy?: number;
 }
 
-interface LinkObject {
-  source?: string | number | NodeObject;
-  target?: string | number | NodeObject;
+interface LinkObject<N = NodeObject> {
+  source?: string | number | N;
+  target?: string | number | N;
 }
 
 type Accessor<In, Out> = Out | string | ((obj: In) => Out);
-type NodeAccessor<T> = Accessor<NodeObject, T>;
-type LinkAccessor<T> = Accessor<LinkObject, T>;
+type NodeAccessor<T, N> = Accessor<N, T>;
+type LinkAccessor<T, N, L> = Accessor<L, T>;
 
 type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
 type CanvasCustomRenderModeFn<T> = (obj: T) => CanvasCustomRenderMode | any;
@@ -29,20 +30,20 @@ type CanvasPointerAreaPaintFn<T> = (obj: T, paintColor: string, canvasContext: C
 
 type DagMode = 'td' | 'bu' | 'lr' | 'rl' | 'radialout' | 'radialin';
 
-interface ForceFn {
+interface ForceFn<N = NodeObject> {
   (alpha: number): void;
-  initialize?: (nodes: NodeObject[], ...args: any[]) => void;
+  initialize?: (nodes: N[], ...args: any[]) => void;
   [key: string]: any;
 }
 
-interface ForceGraphGenericInstance<ChainableInstance> {
+interface ForceGraphGenericInstance<ChainableInstance, N extends NodeObject = NodeObject, L extends LinkObject<N> = LinkObject<N>> {
   (element: HTMLElement): ChainableInstance;
   resetProps(): ChainableInstance;
   _destructor(): void;
 
   // Data input
-  graphData(): GraphData;
-  graphData(data: GraphData): ChainableInstance;
+  graphData(): GraphData<N, L>;
+  graphData(data: GraphData<N, L>): ChainableInstance;
   nodeId(): string;
   nodeId(id: string): ChainableInstance;
   linkSource(): string;
@@ -61,59 +62,59 @@ 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<number, N>;
+  nodeVal(valAccessor: NodeAccessor<number, N>): ChainableInstance;
+  nodeLabel(): NodeAccessor<string, N>;
+  nodeLabel(labelAccessor: NodeAccessor<string, N>): ChainableInstance;
+  nodeVisibility(): NodeAccessor<boolean, N>;
+  nodeVisibility(visibilityAccessor: NodeAccessor<boolean, N>): ChainableInstance;
+  nodeColor(): NodeAccessor<string, N>;
+  nodeColor(colorAccessor: NodeAccessor<string, N>): ChainableInstance;
+  nodeAutoColorBy(): NodeAccessor<string | null, N>;
+  nodeAutoColorBy(colorByAccessor: NodeAccessor<string | null, N>): 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<string, N, L>;
+  linkLabel(labelAccessor: LinkAccessor<string, N, L>): ChainableInstance;
+  linkVisibility(): LinkAccessor<boolean, N, L>;
+  linkVisibility(visibilityAccessor: LinkAccessor<boolean, N, L>): ChainableInstance;
+  linkColor(): LinkAccessor<string, N, L>;
+  linkColor(colorAccessor: LinkAccessor<string, N, L>): ChainableInstance;
+  linkAutoColorBy(): LinkAccessor<string | null, N, L>;
+  linkAutoColorBy(colorByAccessor: LinkAccessor<string | null, N, L>): ChainableInstance;
+  linkLineDash(): LinkAccessor<number[] | null, N, L>;
+  linkLineDash(linkLineDashAccessor: LinkAccessor<number[] | null, N, L>): ChainableInstance;
+  linkWidth(): LinkAccessor<number, N, L>;
+  linkWidth(widthAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkCurvature(): LinkAccessor<number, N, L>;
+  linkCurvature(curvatureAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkCanvasObject(): CanvasCustomRenderFn<L>;
+  linkCanvasObject(renderFn: CanvasCustomRenderFn<L>): ChainableInstance;
+  linkCanvasObjectMode(): string | CanvasCustomRenderModeFn<L>;
+  linkCanvasObjectMode(modeAccessor: string | CanvasCustomRenderModeFn<L>): ChainableInstance;
+  linkDirectionalArrowLength(): LinkAccessor<number, N, L>;
+  linkDirectionalArrowLength(lengthAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkDirectionalArrowColor(): LinkAccessor<string, N, L>;
+  linkDirectionalArrowColor(colorAccessor: LinkAccessor<string, N, L>): ChainableInstance;
+  linkDirectionalArrowRelPos(): LinkAccessor<number, N, L>;
+  linkDirectionalArrowRelPos(fractionAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkDirectionalParticles(): LinkAccessor<number, N, L>;
+  linkDirectionalParticles(numParticlesAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkDirectionalParticleSpeed(): LinkAccessor<number, N, L>;
+  linkDirectionalParticleSpeed(relDistancePerFrameAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkDirectionalParticleWidth(): LinkAccessor<number, N, L>;
+  linkDirectionalParticleWidth(widthAccessor: LinkAccessor<number, N, L>): ChainableInstance;
+  linkDirectionalParticleColor(): LinkAccessor<string, N, L>;
+  linkDirectionalParticleColor(colorAccessor: LinkAccessor<string, N, L>): ChainableInstance;
+  emitParticle(link: L): ChainableInstance;
+  linkPointerAreaPaint(): CanvasPointerAreaPaintFn<L>;
+  linkPointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<L>): ChainableInstance;
 
   // Render control
   autoPauseRedraw(): boolean;
@@ -124,7 +125,7 @@ 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 +138,8 @@ 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;
@@ -147,8 +148,8 @@ interface ForceGraphGenericInstance<ChainableInstance> {
   d3AlphaDecay(alphaDecay: number): ChainableInstance;
   d3VelocityDecay(): number;
   d3VelocityDecay(velocityDecay: number): ChainableInstance;
-  d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn | undefined;
-  d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn | null): ChainableInstance;
+  d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn<N> | undefined;
+  d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn<N> | null): ChainableInstance;
   d3ReheatSimulation(): ChainableInstance;
   warmupTicks(): number;
   warmupTicks(ticks: number): ChainableInstance;
@@ -160,14 +161,14 @@ 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;
@@ -177,20 +178,20 @@ interface ForceGraphGenericInstance<ChainableInstance> {
   enableNodeDrag(): boolean;
   enableNodeDrag(enable: boolean): ChainableInstance;
   enableZoomInteraction(): boolean;
-  enableZoomInteraction(enable: boolean): ChainableInstance;
+  enableZoomInteraction(enable: boolean | ((event: MouseEvent) => boolean)): ChainableInstance;
   enablePanInteraction(): boolean;
-  enablePanInteraction(enable: boolean): ChainableInstance;
+  enablePanInteraction(enable: boolean | ((event: MouseEvent) => boolean)): ChainableInstance;
   enablePointerInteraction(): boolean;
   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 };
 }
 
-type ForceGraphInstance = ForceGraphGenericInstance<ForceGraphInstance>;
+type ForceGraphInstance<NodeType = NodeObject, LinkType = LinkObject<NodeType>> = ForceGraphGenericInstance<ForceGraphInstance<NodeType, LinkType>, NodeType, LinkType>;
 
-declare function ForceGraph(): ForceGraphInstance;
+declare function ForceGraph<NodeType = NodeObject, LinkType = LinkObject<NodeType>>(): ForceGraphInstance<NodeType, LinkType>;
 
 export { type CanvasCustomRenderFn, type CanvasCustomRenderModeFn, type CanvasPointerAreaPaintFn, type ForceGraphGenericInstance, type ForceGraphInstance, type GraphData, type LinkObject, type NodeObject, ForceGraph as default };

package/dist/force-graph.js

@@ -1,4 +1,4 @@
-// Version 1.44.2 force-graph - https://github.com/vasturiano/force-graph
+// Version 1.46.0 force-graph - https://github.com/vasturiano/force-graph
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -5410,6 +5410,22 @@
    */
   TWEEN.update.bind(TWEEN);
 
+  function _arrayLikeToArray$2(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+  function _arrayWithHoles$1(r) {
+    if (Array.isArray(r)) return r;
+  }
+  function _classCallCheck$1(a, n) {
+    if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+  }
+  function _createClass$1(e, r, t) {
+    return Object.defineProperty(e, "prototype", {
+      writable: !1
+    }), e;
+  }
   function _iterableToArrayLimit$1(r, l) {
     var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
     if (null != t) {
@@ -5434,39 +5450,19 @@
       return a;
     }
   }
-  function _classCallCheck$1(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-  function _createClass$1(Constructor, protoProps, staticProps) {
-    Object.defineProperty(Constructor, "prototype", {
-      writable: false
-    });
-    return Constructor;
-  }
-  function _slicedToArray$1(arr, i) {
-    return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$1();
-  }
-  function _arrayWithHoles$1(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-  function _unsupportedIterableToArray$2(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray$2(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen);
-  }
-  function _arrayLikeToArray$2(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-    return arr2;
-  }
   function _nonIterableRest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
+  function _slicedToArray$1(r, e) {
+    return _arrayWithHoles$1(r) || _iterableToArrayLimit$1(r, e) || _unsupportedIterableToArray$2(r, e) || _nonIterableRest$1();
+  }
+  function _unsupportedIterableToArray$2(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray$2(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0;
+    }
+  }
 
   var Prop = /*#__PURE__*/_createClass$1(function Prop(name, _ref) {
     var _ref$default = _ref["default"],
@@ -12253,7 +12249,7 @@
       state.zoom.filter(function (ev) {
         return (
           // disable zoom interaction
-          !ev.button && state.enableZoomPanInteraction && (state.enableZoomInteraction || ev.type !== 'wheel') && (state.enablePanInteraction || ev.type === 'wheel')
+          !ev.button && state.enableZoomPanInteraction && (ev.type !== 'wheel' || index$2(state.enableZoomInteraction)(ev)) && (ev.type === 'wheel' || index$2(state.enablePanInteraction)(ev))
         );
       }).on('zoom', function (ev) {
         var t = ev.transform;