Skip to content

Commit b6b3961

Browse files
lddldd
committed
docs(readme): document helpers
Squashed commit of the following: docs(readme): improve documentation docs(readme): prettify code docs(readme): document simplePathMaker helper docs(readme): document prepareSpritesheetStyle helper docs(readme): prettify code docs(readme): document helper
1 parent c2485b5 commit b6b3961

File tree

1 file changed

+123
-20
lines changed

1 file changed

+123
-20
lines changed

‎README.md‎

Lines changed: 123 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,15 @@ import { Tree } from "react-tech-tree";
4141
import "react-tech-tree/dist/index.css";
4242

4343
const nodes = [
44-
[ {id: "A0", name: "A"}, {id:"B0", name: "B"} ]
44+
[
45+
{ id: "A0", name: "A" },
46+
{ id: "B0", name: "B" }
47+
]
4548
];
46-
const links = [ {from: "A0", to: "B0"} ];
49+
const links = [{ from: "A0", to: "B0" }];
4750

48-
function Example {
49-
return <Tree nodes={nodes} links={links}/>;
51+
function ExampleComponent() {
52+
return <Tree nodes={nodes} links={links} />;
5053
}
5154
```
5255

@@ -58,36 +61,136 @@ function Example {
5861
import { Tree } from "react-tech-tree";
5962
```
6063

61-
| Prop | Type | Description |
62-
| ----------- | -------------- | ---------------------------------------------------------------------------- |
63-
| id | string | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid) |
64-
| links | object[] | object with links information |
65-
| nodes | object[] | object with nodes information |
66-
| NodeElement | ReactComponent | _(optional)_ React Element to be used as Node. Defaults to Node. |
67-
| nodeProps | object | Properties to pass down to Node elements. See Node. |
68-
| linkProps | object | Properties to pass down to Link elements. See Link. |
64+
| Prop | Type | Description |
65+
| ----------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
66+
| id | `string` | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid) |
67+
| nodes | `{id:string, name: string}[][]` | 2d array with nodes information |
68+
| links | `{from:string, to: string}[]` | array with links information |
69+
| NodeElement | `ReactElement` | _(optional)_ React Element to be used as Node. Defaults to [`Node`](https://github.com/ldd/react-tech-tree/#node). |
70+
| nodeProps | `object` | _(optional)_ Properties to pass down to Node elements. See [`Node`](https://github.com/ldd/react-tech-tree/#node). |
71+
| linkProps | `object` | _(optional)_ See below. |
72+
73+
#### linkProps
74+
75+
| Prop | Type | Description |
76+
| --------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
77+
| pathMaker | `(r0: Rect,r1: Rect, props?: object) => string` | _(optional)_ Function to generate string paths. Defaults to [`simplePathMaker`](https://github.com/ldd/react-tech-tree/#simplePathMaker) |
6978

7079
### _Node_
7180

7281
```js
7382
import { Node } from "react-tech-tree";
7483
```
7584

76-
| Prop | Type | Description |
77-
| ------------ | ---------- | -------------------------------------------- |
78-
| clickHandler | () => void | Event Handler fired when the Node is clicked |
85+
| Prop | Type | Description |
86+
| ------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
87+
| onClick | `(e: MouseEvent) => void` | _(optional)_ Event Handler fired when the Node is clicked. Defaults to [`nodeClickHandler`](https://github.com/ldd/react-tech-tree/tree/document-helpers#nodeClickHandler) | styleName | () => `object` | function to style the Node from its name. [Example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/index.js#L18) |
7988

8089
### _Sprite_
8190

8291
```js
8392
import { Sprite } from "react-tech-tree";
8493
```
8594

86-
| Prop | Type | Description |
87-
| --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
88-
| name | string | name of spritesheet entry or image name for this Sprite |
89-
| scale | number | sprite's scale |
90-
| styleName | () => object | function to style the Sprite from its name. [Example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/index.js#L18) |
95+
| Prop | Type | Description |
96+
| --------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
97+
| name | `string` | name of spritesheet entry or image name for this Sprite |
98+
| styleName | () => `object` | function to style the Sprite from its name. [Example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/index.js#L18) |
99+
100+
### _Link_
101+
102+
```js
103+
import { Link } from "react-tech-tree";
104+
```
105+
106+
| Prop | Type | Description |
107+
| -------- | -------- | --------------------------------------- |
108+
| pathData | `string` | data to build links. E.g: `M 0 0 L 1 1` |
109+
110+
### _helpers_
111+
112+
#### nodeClickHandler
113+
114+
```js
115+
import { nodeClickHandler } from "react-tech-tree";
116+
```
117+
118+
clickHandler function used by [`Node`](https://github.com/ldd/react-tech-tree/#node) internally.
119+
Use it when you are trying to build a custom `NodeElement` that you pass to a [`Tree`](https://github.com/ldd/react-tech-tree/#tree).
120+
121+
It will:
122+
123+
- mark `Node` with class `active`
124+
- mark `Node's children` with class `next-active`
125+
126+
```jsx
127+
//...
128+
129+
function MyNodeElement({ name, id }) {
130+
return (
131+
<button id={id} onClick={nodeClickHandler}>
132+
{name}
133+
</button>
134+
);
135+
}
136+
137+
function ExampleComponent() {
138+
return <Tree nodes={nodes} links={links} NodeElement={MyNodeElement} />;
139+
}
140+
```
141+
142+
#### prepareSpritesheetStyle
143+
144+
```js
145+
import { prepareSpritesheetStyle } from "react-tech-tree";
146+
```
147+
148+
When using spritesheets, you may need to style each [`Sprite`](https://github.com/ldd/react-tech-tree/#sprite) based on its name.
149+
150+
If you are using [TexturePacker](https://www.codeandweb.com/texturepacker), you can use this function as follows:
151+
152+
```jsx
153+
//...
154+
import spriteInformation from "./data/spritesheet.json";
155+
import spriteImage from "./data/spritesheet.png";
156+
//...
157+
158+
const nodeProps = {
159+
styleName: prepareSpritesheetStyle(spriteImage, spriteInformation)
160+
};
161+
162+
function ExampleComponent() {
163+
return <Tree nodes={nodes} links={links} nodeProps={nodeProps} />;
164+
}
165+
```
166+
167+
#### simplePathMaker
168+
169+
```js
170+
import { simplePathMaker } from "react-tech-tree";
171+
```
172+
173+
Pure function that return a string path between the center of two rectangles.
174+
175+
```js
176+
const rect0 = { x: 0, y: 24, width: 4, height: 4 };
177+
const rect1 = { x: 8, y: 32, width: 2, height: 2 };
178+
const path = simplePathMaker(rect0, rect1);
179+
// "M 2 26 L 9 33"
180+
```
181+
182+
It is used at the default value for building links between `Nodes`.
183+
It can be passed down in `linkProps` to a [`Tree`](https://github.com/ldd/react-tech-tree/#tree). See [example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/linkHelper.js)
184+
185+
```jsx
186+
//...
187+
188+
const linkProps = { pathMaker: simplePathMaker };
189+
190+
function ExampleComponent() {
191+
return <Tree nodes={nodes} links={links} linkProps={linkProps} />;
192+
}
193+
```
91194

92195
## Tips
93196

0 commit comments

Comments
 (0)