react-d3-dag - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/Dag/index.js

@@ -225,3 +225,3 @@ "use strict";
         var _this = this;
-        var zoomable = props.zoomable, scaleExtent = props.scaleExtent, translate = props.translate, zoom = props.zoom, onUpdate = props.onUpdate;
+        var zoomable = props.zoomable, scaleExtent = props.scaleExtent, translate = props.translate, zoom = props.zoom, onUpdate = props.onUpdate, hasInteractiveNodes = props.hasInteractiveNodes;
         var svg = d3_selection_1.select("." + this.svgInstanceRef);
@@ -235,2 +235,9 @@ var g = d3_selection_1.select("." + this.gInstanceRef);
             // TODO: break this out into a separate zoom handler fn, rather than inlining it.
+            .filter(function () {
+            if (hasInteractiveNodes)
+                return (d3_selection_1.event.target.classList.contains(_this.svgInstanceRef) ||
+                    d3_selection_1.event.target.classList.contains(_this.gInstanceRef) ||
+                    d3_selection_1.event.shiftKey);
+            return true;
+        })
             .on('zoom', function () {
@@ -437,2 +444,3 @@ g.attr('transform', d3_selection_1.event.transform);
         enableLegacyTransitions: false,
+        hasInteractiveNodes: false,
     };
@@ -439,0 +447,0 @@ return Dag;

lib/Dag/types.d.ts

@@ -236,2 +236,11 @@ import { DagNode } from 'd3-dag';
     transitionDuration?: number;
+    /**
+     * Disables drag/pan/zoom D3 events when hovering over a node.
+     * Useful for cases where D3 events interfere when interacting with inputs or other interactive elements on a node.
+     *
+     * **Tip:** Holding the `Shift` key while hovering over a node re-enables the D3 events.
+     *
+     * {@link Tree.defaultProps.hasInteractiveNodes | Default value}
+     */
+    hasInteractiveNodes?: boolean;
 }

lib/Node/DefaultNodeElement.d.ts

 import React from 'react';
-import { CustomNodeElementProps, SyntheticEventHandler } from '../types/common';
+import { CustomNodeElementProps } from '../types/common';
 export interface DefaultNodeElementProps extends CustomNodeElementProps {
-    onNodeClick: SyntheticEventHandler;
-    onNodeMouseOver: SyntheticEventHandler;
-    onNodeMouseOut: SyntheticEventHandler;
 }
 declare const DefaultNodeElement: React.FunctionComponent<DefaultNodeElementProps>;
 export default DefaultNodeElement;

lib/Node/index.js

@@ -44,10 +44,4 @@ "use strict";
             var _a = _this.props, data = _a.data, dagNode = _a.dagNode, renderCustomNodeElement = _a.renderCustomNodeElement;
-            if (typeof renderCustomNodeElement === 'function') {
-                return renderCustomNodeElement({
-                    dagNode: dagNode,
-                    nodeDatum: data,
-                    toggleNode: _this.handleNodeToggle,
-                });
-            }
-            return DefaultNodeElement_1.default({
+            var renderNode = typeof renderCustomNodeElement === 'function' ? renderCustomNodeElement : DefaultNodeElement_1.default;
+            var nodeProps = {
                 dagNode: dagNode,
@@ -59,3 +53,4 @@ nodeDatum: data,
                 onNodeMouseOut: _this.handleOnMouseOut,
-            });
+            };
+            return renderNode(nodeProps);
         };
@@ -62,0 +57,0 @@ _this.handleNodeToggle = function () { return _this.props.onNodeToggle(_this.props.data.__rd3dag.id); };

lib/types/common.d.ts

@@ -45,3 +45,15 @@ import { SyntheticEvent } from 'react';
     toggleNode: () => void;
+    /**
+     * The `onNodeClick` handler defined for `Tree` (if any).
+     */
+    onNodeClick: SyntheticEventHandler;
+    /**
+     * The `onNodeMouseOver` handler defined for `Tree` (if any).
+     */
+    onNodeMouseOver: SyntheticEventHandler;
+    /**
+     * The `onNodeMouseOut` handler defined for `Tree` (if any).
+     */
+    onNodeMouseOut: SyntheticEventHandler;
 }
 export declare type RenderCustomNodeElementFn = (rd3dagNodeProps: CustomNodeElementProps) => JSX.Element;

package.json

 {
   "name": "react-d3-dag",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React component to create interactive D3 directed acyclic graphs (DAGs)",
@@ -77,3 +77,3 @@ "author": "Emily Klassen",
     "clone": "^2.1.1",
-    "d3-dag": "^0.8.2",
+    "d3-dag": "^0.9.1",
     "d3-selection": "^1.4.2",
@@ -83,3 +83,3 @@ "d3-shape": "^1.3.7",
     "dequal": "^2.0.2",
-    "uuid": "^8.3.1"
+    "uuid": "^8.3.2"
   },
@@ -86,0 +86,0 @@ "peerDependencies": {

src/Dag/types.ts

@@ -14,6 +14,3 @@ import { DagNode } from 'd3-dag';
 
-export type TreeNodeEventCallback = (
-  node: DagNode<TreeNodeDatum>,
-  event: SyntheticEvent
-) => any;
+export type TreeNodeEventCallback = (node: DagNode<TreeNodeDatum>, event: SyntheticEvent) => any;
 
@@ -279,2 +276,12 @@ export type TreeLinkEventCallback = (
   transitionDuration?: number;
+
+  /**
+   * Disables drag/pan/zoom D3 events when hovering over a node.
+   * Useful for cases where D3 events interfere when interacting with inputs or other interactive elements on a node.
+   *
+   * **Tip:** Holding the `Shift` key while hovering over a node re-enables the D3 events.
+   *
+   * {@link Tree.defaultProps.hasInteractiveNodes | Default value}
+   */
+  hasInteractiveNodes?: boolean;
 }

src/types/common.ts

@@ -52,4 +52,16 @@ import { SyntheticEvent } from 'react';
   toggleNode: () => void;
+  /**
+   * The `onNodeClick` handler defined for `Tree` (if any).
+   */
+  onNodeClick: SyntheticEventHandler;
+  /**
+   * The `onNodeMouseOver` handler defined for `Tree` (if any).
+   */
+  onNodeMouseOver: SyntheticEventHandler;
+  /**
+   * The `onNodeMouseOut` handler defined for `Tree` (if any).
+   */
+  onNodeMouseOut: SyntheticEventHandler;
 }
 
 export type RenderCustomNodeElementFn = (rd3dagNodeProps: CustomNodeElementProps) => JSX.Element;

No alert changes

Improved metrics

Total package byte prevSize

164237

increased by1.14%

Lines of code

3781

increased by1.1%

Dependency changes

• + Addedd3-dag@0.9.1(transitive)

• - Removedd3-dag@0.8.2(transitive)

• - Removeddenque@1.5.1(transitive)

• Updatedd3-dag@^0.9.1

• Updateduuid@^8.3.2