Skip to content

Commit 86e4db2

Browse files
bkrembkrem
committed
Merge branch 'feature/13-expose-separation-prop' into develop
2 parents 1b6e6be + 847da4e commit 86e4db2

File tree

6 files changed

+71
-43
lines changed

6 files changed

+71
-43
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,6 @@ node_modules
3232

3333
# ignore playground dir
3434
playground
35+
36+
# ignore Webpack stats output
37+
stats.json

‎README.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -77,19 +77,21 @@ class MyComponent extends React.Component {
7777

7878

7979
## Props
80-
| Property | Type | Options | Required? | Default | Description |
81-
|-----------------------|-----------------|-------------------------|-----------|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
82-
| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys. |
83-
| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom. |
84-
| `translate` | `object` | | | `{x: 0, y: 0}` | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner). |
85-
| `pathFunc` | `string` (enum) | `diagonal` `elbow` | | `diagonal` | `diagonal` - Renders smooth, curved edges between parent-child nodes. <br /><br /> `elbow` - Renders sharp edges at right angles between parent-child nodes. |
86-
| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
87-
| `initialDepth` | `number` | `0..n` | | `undefined` | Sets the maximum node depth to which the tree is expanded on its initial render. <br /> Tree renders to full depth if prop is omitted. |
88-
| `depthFactor` | `number` | `-n..0..n` | | `undefined` | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth. <br /> **TIP**: Negative values invert the tree's direction. |
89-
| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`. |
90-
| `scaleExtent` | `object` | | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
91-
| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely. |
92-
| `styles` | `object` | see [Styling](#styling) | | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling. |
80+
| Property | Type | Options | Required? | Default | Description |
81+
|-----------------------|-----------------|---------------------------------------|-----------|---------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
82+
| `data` | `array` | | required | `undefined` | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys. |
83+
| `orientation` | `string` (enum) | `horizontal` `vertical` | | `horizontal` | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom. |
84+
| `translate` | `object` | | | `{x: 0, y: 0}` | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner). |
85+
| `pathFunc` | `string` (enum) | `diagonal` `elbow` | | `diagonal` | `diagonal` - Renders smooth, curved edges between parent-child nodes. <br /><br /> `elbow` - Renders sharp edges at right angles between parent-child nodes. |
86+
| `collapsible` | `bool` | | | `true` | Toggles ability to collapse/expand the tree's nodes by clicking them. |
87+
| `initialDepth` | `number` | `0..n` | | `undefined` | Sets the maximum node depth to which the tree is expanded on its initial render. <br /> Tree renders to full depth if prop is omitted. |
88+
| `depthFactor` | `number` | `-n..0..n` | | `undefined` | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth. <br /> **TIP**: Negative values invert the tree's direction. |
89+
| `zoomable` | `bool` | | | `true` | Toggles ability to zoom in/out on the Tree by scaling it according to `props.scaleExtent`. |
90+
| `scaleExtent` | `object` | `{min: 0..n, max: 0..n}` | | `{min: 0.1, max: 1}` | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true. |
91+
| `nodeSize` | `object` | `{x: 0..n, y: 0..n}` | | `{x: 140, y: 140}` | Sets a fixed size for each node. <br /><br /> This does not affect node circle sizes, circle sizes are handled by the `circleRadius` prop. |
92+
| `separation` | `object` | `{siblings: 0..n, nonSiblings: 0..n}` | | `{siblings: 1, nonSiblings: 2}` | Sets separation between neighbouring nodes, differentiating between siblings (same parent) and non-siblings. |
93+
| `transitionDuration` | `number` | `0..n` | | `500` | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely. |
94+
| `styles` | `object` | see [Styling](#styling) | | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling. |
9395

9496

9597
## Styling

‎package.json

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
"docs": "npm run docs:react && npm run docs:util",
1818
"docs:util": "jsdoc2md src/util/index.js > docs/util/util.md",
1919
"docs:clean": "rimraf docs/components/* && rimraf docs/util/*",
20-
"release": "npm run test && npm run build && npm run docs && git commit -a && np"
20+
"release": "npm run test && npm run build && npm run docs && git commit -a && np",
21+
"preanalyze": "rimraf stats.json",
22+
"analyze": "webpack --config webpack.config.js --env build --profile --json > stats.json && echo '==> http://webpack.github.io/analyse/'"
2123
},
2224
"jest": {
2325
"collectCoverageFrom": [
@@ -29,10 +31,10 @@
2931
],
3032
"coverageThreshold": {
3133
"global": {
32-
"statements": 90,
33-
"branches": 82,
34+
"statements": 95,
35+
"branches": 84,
3436
"functions": 90,
35-
"lines": 90
37+
"lines": 95
3638
}
3739
},
3840
"moduleNameMapper": {

‎src/Tree/index.js

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -197,16 +197,29 @@ export default class Tree extends React.Component {
197197
/**
198198
* generateTree - Generates tree elements (`nodes` and `links`) by
199199
* grabbing the rootNode from `this.state.data[0]`.
200-
* Restricts tree depth to `props.initial` if defined and this is
200+
* Restricts tree depth to `props.initialDepth` if defined and if this is
201201
* the initial render of the tree.
202202
*
203-
* @return {object} Object containing `nodes` and `links` fields.
203+
* @return {object} Object containing `nodes` and `links`.
204204
*/
205205
generateTree() {
206-
const { initialDepth, depthFactor } = this.props;
206+
const {
207+
initialDepth,
208+
depthFactor,
209+
separation,
210+
nodeSize,
211+
orientation,
212+
} = this.props;
213+
207214
const tree = layout.tree()
208-
.nodeSize([100 + 40, 100 + 40])
209-
.separation((d) => d._children ? 1.2 : 0.9)
215+
.nodeSize(orientation === 'horizontal' ?
216+
[nodeSize.y, nodeSize.x] :
217+
[nodeSize.x, nodeSize.y]
218+
)
219+
.separation((a, b) => deepEqual(a.parent, b.parent) ?
220+
separation.siblings :
221+
separation.nonSiblings
222+
)
210223
.children((d) => d._collapsed ? null : d._children);
211224

212225
const rootNode = this.state.data[0];
@@ -237,7 +250,7 @@ export default class Tree extends React.Component {
237250
} = this.props;
238251

239252
return (
240-
<div className={`rd3t-tree-container ${zoomable ? 'grabbable' : undefined}`}>
253+
<div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
241254
<svg className="rd3t-svg" width="100%" height="100%">
242255
<TransitionGroup
243256
component="g"
@@ -285,6 +298,8 @@ Tree.defaultProps = {
285298
initialDepth: undefined,
286299
zoomable: true,
287300
scaleExtent: { min: 0.1, max: 1 },
301+
nodeSize: { x: 140, y: 140 },
302+
separation: { siblings: 1, nonSiblings: 2 },
288303
styles: {
289304
nodes: {
290305
node: {
@@ -325,6 +340,14 @@ Tree.propTypes = {
325340
min: PropTypes.number,
326341
max: PropTypes.number,
327342
}),
343+
nodeSize: PropTypes.shape({
344+
x: PropTypes.number,
345+
y: PropTypes.number,
346+
}),
347+
separation: PropTypes.shape({
348+
siblings: PropTypes.number,
349+
nonSiblings: PropTypes.number,
350+
}),
328351
styles: PropTypes.shape({
329352
nodes: PropTypes.object,
330353
links: PropTypes.object,

‎src/Tree/style.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
height: 100%;
44
}
55

6-
.grabbable {
6+
.rd3t-grabbable {
77
cursor: move; /* fallback if grab cursor is unsupported */
88
cursor: grab;
99
cursor: -moz-grab;
1010
cursor: -webkit-grab;
1111
}
12-
.grabbable:active {
12+
.rd3t-grabbable:active {
1313
cursor: grabbing;
1414
cursor: -moz-grabbing;
1515
cursor: -webkit-grabbing;

‎src/Tree/tests/index.test.js

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -227,22 +227,20 @@ describe('<Tree />', () => {
227227
});
228228

229229

230-
// it('allows zooming in/out according to `props.scaleExtent` if `props.zoomable`', () => {
231-
// const zoomableComponent = mount(
232-
// <Tree
233-
// data={mockData}
234-
// />
235-
// );
236-
// const nonZoomableComponent = mount(
237-
// <Tree
238-
// data={mockData}
239-
// zoomable={false}
240-
// />
241-
// );
242-
//
243-
// zoomableComponent.find('svg').simulate('touchmove');
244-
//
245-
// expect(zoomableComponent.find('svg').prop('transform')).toBeDefined();
246-
// expect(nonZoomableComponent.find('svg').prop('transform')).toBeUndefined();
247-
// });
230+
it('adds the `.rd3t-grabbable` class if `props.zoomable`', () => {
231+
const zoomableComponent = shallow(
232+
<Tree
233+
data={mockData}
234+
/>
235+
);
236+
const nonZoomableComponent = shallow(
237+
<Tree
238+
data={mockData}
239+
zoomable={false}
240+
/>
241+
);
242+
243+
expect(zoomableComponent.find('.rd3t-tree-container').hasClass('rd3t-grabbable')).toBe(true);
244+
expect(nonZoomableComponent.find('.rd3t-tree-container').hasClass('rd3t-grabbable')).toBe(false);
245+
});
248246
});

0 commit comments

Comments
 (0)