Minor adjustments for individual nodeSvgShape

Correct syntax in example snippet

Ensure correct merge order of node styles

Renames `nodeData.shape` -> `nodeData.nodeSvgShape`

Avoids awkward `shape.shape` property access & unifies naming convention

Author: bkrem

README.md

@@ -141,7 +141,7 @@ This is to prevent breaking the legacy usage of `circleRadius` + styling via `no
 
 
 ### Individual `shapeProps`
-`shapeProps` can be passed to a given node individually. The shape is optionally added as `shape` property to input data. This allows for setting style, shape and size of nodes independently (see [Styling](#styling)).
+`shapeProps` can be passed to a node individually by adding the `nodeSvgShape` property to the relevant node's data set. This allows setting each node's style, shape and size independently of the tree's overall `shapeProps` configuration (see [Styling](#styling)).
 
 The usage example above can be extended to include individual `shapeProps`:
 ```jsx
@@ -156,7 +156,7 @@ const myTreeData = [
       keyB: 'val B',
       keyC: 'val C',
     },
-    shape: {
+    nodeSvgShape: {
       shapeProps: {
         fill: 'blue',
       },
@@ -169,14 +169,14 @@ const myTreeData = [
           keyB: 'val B',
           keyC: 'val C',
         },
-        shape: {
+        nodeSvgShape: {
           shape: 'rect',
           shapeProps: {
             width: 20,
             height: 20,
             x: -10,
             y: -10,
-            fill: red,
+            fill: 'red',
           },
         },
       },

src/Node/index.js

@@ -84,8 +84,8 @@ export default class Node extends React.Component {
     return nodeSvgShape.shape === 'none'
       ? null
       : React.createElement(nodeSvgShape.shape, {
-          ...nodeSvgShape.shapeProps,
           ...nodeStyle.circle,
+          ...nodeSvgShape.shapeProps,
         });
   }
 

src/Tree/index.js

@@ -385,7 +385,7 @@ export default class Tree extends React.Component {
             {nodes.map(nodeData => (
               <Node
                 key={nodeData.id}
-                nodeSvgShape={{ ...nodeSvgShape, ...nodeData.shape }}
+                nodeSvgShape={{ ...nodeSvgShape, ...nodeData.nodeSvgShape }}
                 nodeLabelComponent={nodeLabelComponent}
                 nodeSize={nodeSize}
                 orientation={orientation}

src/Tree/tests/index.test.js

@@ -34,7 +34,7 @@ describe('<Tree />', () => {
 
   it('passes individual `shapeProps` to the specified <Node /> only', () => {
     const svgShapeMock = {
-      shape: 'circle',
+      shape: 'rect',
       shapeProps: {
         r: 3,
         fill: 'red',
@@ -44,7 +44,7 @@ describe('<Tree />', () => {
       {
         name: 'Top Level',
         parent: 'null',
-        shape: svgShapeMock,
+        nodeSvgShape: svgShapeMock,
         children: [
           {
             name: 'Inner',