fix(tree): ensures pan/zoom can bind to multiple Tree instances (#100)

* test(tree): adds regression test for unique className refs

Author: bkrem

src/Tree/index.tsx

@@ -21,9 +21,6 @@ type TreeState = {
   isInitialRenderForDataset: boolean;
 };
 
-const rd3tSvgClassName = 'rd3t-svg';
-const rd3tGClassName = 'rd3t-g';
-
 class Tree extends React.Component<TreeProps, TreeState> {
   static defaultProps: Partial<TreeProps> = {
     onNodeClick: undefined,
@@ -68,6 +65,9 @@ class Tree extends React.Component<TreeProps, TreeState> {
     isTransitioning: false,
   };
 
+  svgInstanceRef = `rd3t-svg-${uuidv4()}`;
+  gInstanceRef = `rd3t-g-${uuidv4()}`;
+
   static getDerivedStateFromProps(nextProps: TreeProps, prevState: TreeState) {
     let derivedState: Partial<TreeState> = null;
     // Clone new data & assign internal properties if `data` object reference changed.
@@ -138,8 +138,8 @@ class Tree extends React.Component<TreeProps, TreeState> {
    */
   bindZoomListener(props: TreeProps) {
     const { zoomable, scaleExtent, translate, zoom, onUpdate } = props;
-    const svg = select(`.${rd3tSvgClassName}`);
-    const g = select(`.${rd3tGClassName}`);
+    const svg = select(`.${this.svgInstanceRef}`);
+    const g = select(`.${this.gInstanceRef}`);
     if (zoomable) {
       // Sets initial offset, so that first pan and zoom does not jump back to default [0,0] coords.
       // @ts-ignore
@@ -481,11 +481,15 @@ class Tree extends React.Component<TreeProps, TreeState> {
     return (
       <div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
         <style>{globalCss}</style>
-        <svg className={[rd3tSvgClassName, svgClassName].join(' ')} width="100%" height="100%">
+        <svg
+          className={`rd3t-svg ${this.svgInstanceRef} ${svgClassName}`}
+          width="100%"
+          height="100%"
+        >
           <TransitionGroupWrapper
             enableLegacyTransitions={enableLegacyTransitions}
             component="g"
-            className={rd3tGClassName}
+            className={`rd3t-g ${this.gInstanceRef}`}
             transform={`translate(${translate.x},${translate.y}) scale(${scale})`}
           >
             {links.map((linkData, i) => {

src/Tree/tests/index.test.js

@@ -47,6 +47,18 @@ describe('<Tree />', () => {
     expect(renderedComponent.find(Link).length).toBe(linkCount);
   });
 
+  // Ensures D3's pan & zoom listeners can bind to multiple trees in a single view (https://github.com/bkrem/react-d3-tree/issues/100).
+  it("assigns unique ref classNames to each Tree instance's `svg` and primary `g` tag", () => {
+    const tree1 = shallow(<Tree data={mockData} />);
+    const tree2 = shallow(<Tree data={mockData} />);
+    expect(tree1.find('.rd3t-svg').prop('className')).not.toBe(
+      tree2.find('.rd3t-svg').prop('className')
+    );
+    expect(tree1.find('.rd3t-g').prop('className')).not.toBe(
+      tree2.find('.rd3t-g').prop('className')
+    );
+  });
+
   it('reassigns internal props if `props.data` changes', () => {
     // `assignInternalProperties` recurses by depth: 1 level -> 1 call
     const mockDataDepth = 3;