From 3c6d7412725e1b614eef33912c18a56b2e055b23 Mon Sep 17 00:00:00 2001 From: ldd Date: Tue, 7 Apr 2020 15:08:11 -0400 Subject: [PATCH 1/6] docs(readme): document helper --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index a425ada..620507d 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,46 @@ import { Sprite } from "react-tech-tree"; | scale | number | sprite's scale | | 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) | +### _helpers_ + +#### nodeClickHandler + +```js +import { nodeClickHandler } from "react-tech-tree"; +``` + +ClickHandler function used by Node internally. +Use it when you are trying to build a custom `NodeElement` that you pass to a `Tree`. + +It will: + +- mark `Node` with class `active` +- mark `Node's children` with class `next-active` + +```jsx +//... + +function MyNodeElement({ name, id }) { + return ( + + ); +} + +function ExampleComponent() { + return ; +} +``` + +#### prepareSpritesheetStyle + +(to be added) + +#### simplePathMaker + +(to be added) + ## Tips For further usage, go to the [examples page](https://github.com/ldd/react-tech-tree/tree/master/example/src/trees) From 8b76595c528c74c19658fbe6c9e6f85a4bf57a0b Mon Sep 17 00:00:00 2001 From: ldd Date: Tue, 7 Apr 2020 15:08:50 -0400 Subject: [PATCH 2/6] docs(readme): prettify code --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 620507d..f4c803c 100644 --- a/README.md +++ b/README.md @@ -41,12 +41,15 @@ import { Tree } from "react-tech-tree"; import "react-tech-tree/dist/index.css"; const nodes = [ - [ {id: "A0", name: "A"}, {id:"B0", name: "B"} ] + [ + { id: "A0", name: "A" }, + { id: "B0", name: "B" } + ] ]; -const links = [ {from: "A0", to: "B0"} ]; +const links = [{ from: "A0", to: "B0" }]; -function Example { - return ; +function ExampleComponent() { + return ; } ``` From 887ec814ffe96b89371aa62d14727ec437348c3d Mon Sep 17 00:00:00 2001 From: ldd Date: Tue, 7 Apr 2020 15:09:48 -0400 Subject: [PATCH 3/6] docs(readme): document prepareSpritesheetStyle helper --- README.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f4c803c..011f165 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,28 @@ function ExampleComponent() { #### prepareSpritesheetStyle -(to be added) +```js +import { prepareSpritesheetStyle } from "react-tech-tree"; +``` + +When using spritesheets, you may need to style each `Sprite` based on its name. + +If you are using [TexturePacker](https://www.codeandweb.com/texturepacker), you can use this function as follows: + +```jsx +//... +import spriteInformation from "./data/spritesheet.json"; +import spriteImage from "./data/spritesheet.png"; +//... + +const nodeProps = { + styleName: prepareSpritesheetStyle(spriteImage, spriteInformation) +}; + +function ExampleComponent() { + return ; +} +``` #### simplePathMaker From 817fc3a81db0d62d8b0f82b18be712af1461de3d Mon Sep 17 00:00:00 2001 From: ldd Date: Tue, 7 Apr 2020 17:07:28 -0400 Subject: [PATCH 4/6] docs(readme): document simplePathMaker helper --- README.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 011f165..c2b7efe 100644 --- a/README.md +++ b/README.md @@ -151,7 +151,31 @@ function ExampleComponent() { #### simplePathMaker -(to be added) +```js +import { simplePathMaker } from "react-tech-tree"; +``` + +Pure function that return a string path between the center of two rectangles. + +```js +const rect0 = { x: 0, y: 24, width: 4, height: 4 }; +const rect1 = { x: 8, y: 32, width: 2, height: 2 }; +const path = simplePathMaker(point, point); +// "M 2 26 L 9 33" +``` + +It is used at the default value for building links between `Nodes`. +It can be passed down in `linkProps` to a `Tree`. See [example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/linkHelper.js) + +```jsx +//... + +const linkProps = { pathMaker: simplePathMaker }; + +function ExampleComponent() { + return ; +} +``` ## Tips From 3415fdbf9b620a769bc420bcd1294333f6f6263c Mon Sep 17 00:00:00 2001 From: ldd Date: Tue, 7 Apr 2020 17:23:04 -0400 Subject: [PATCH 5/6] docs(readme): prettify code --- README.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index c2b7efe..44feeb1 100644 --- a/README.md +++ b/README.md @@ -61,14 +61,14 @@ function ExampleComponent() { import { Tree } from "react-tech-tree"; ``` -| Prop | Type | Description | -| ----------- | -------------- | ---------------------------------------------------------------------------- | -| id | string | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid) | -| links | object[] | object with links information | -| nodes | object[] | object with nodes information | -| NodeElement | ReactComponent | _(optional)_ React Element to be used as Node. Defaults to Node. | -| nodeProps | object | Properties to pass down to Node elements. See Node. | -| linkProps | object | Properties to pass down to Link elements. See Link. | +| Prop | Type | Description | +| ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | +| id | `string` | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid) | +| links | `object[]` | object with links information | +| nodes | `object[]` | object with nodes information | +| NodeElement | ReactComponent | _(optional)_ React Element to be used as Node. Defaults to [`Node`](https://github.com/ldd/react-tech-tree/#node). | +| nodeProps | `object` | _(optional)_ Properties to pass down to Node elements. See [`Node`](https://github.com/ldd/react-tech-tree/#node). | +| linkProps | `object` | _(optional)_ Properties to pass down to Link elements. See [`Link`](https://github.com/ldd/react-tech-tree/#link). | ### _Node_ @@ -76,9 +76,9 @@ import { Tree } from "react-tech-tree"; import { Node } from "react-tech-tree"; ``` -| Prop | Type | Description | -| ------------ | ---------- | -------------------------------------------- | -| clickHandler | () => void | Event Handler fired when the Node is clicked | +| Prop | Type | Description | +| ------------ | ------------------------- | -------------------------------------------- | +| clickHandler | (e: `MouseEvent`) => void | Event Handler fired when the Node is clicked | ### _Sprite_ @@ -86,11 +86,11 @@ import { Node } from "react-tech-tree"; import { Sprite } from "react-tech-tree"; ``` -| Prop | Type | Description | -| --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | name of spritesheet entry or image name for this Sprite | -| scale | number | sprite's scale | -| 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) | +| Prop | Type | Description | +| --------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| name | `string` | name of spritesheet entry or image name for this Sprite | +| scale | `number` | sprite's scale | +| 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) | ### _helpers_ @@ -100,8 +100,8 @@ import { Sprite } from "react-tech-tree"; import { nodeClickHandler } from "react-tech-tree"; ``` -ClickHandler function used by Node internally. -Use it when you are trying to build a custom `NodeElement` that you pass to a `Tree`. +clickHandler function used by [`Node`](https://github.com/ldd/react-tech-tree/#node) internally. +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). It will: @@ -130,7 +130,7 @@ function ExampleComponent() { import { prepareSpritesheetStyle } from "react-tech-tree"; ``` -When using spritesheets, you may need to style each `Sprite` based on its name. +When using spritesheets, you may need to style each [`Sprite`](https://github.com/ldd/react-tech-tree/#sprite) based on its name. If you are using [TexturePacker](https://www.codeandweb.com/texturepacker), you can use this function as follows: @@ -160,12 +160,12 @@ Pure function that return a string path between the center of two rectangles. ```js const rect0 = { x: 0, y: 24, width: 4, height: 4 }; const rect1 = { x: 8, y: 32, width: 2, height: 2 }; -const path = simplePathMaker(point, point); +const path = simplePathMaker(rect0, rect1); // "M 2 26 L 9 33" ``` It is used at the default value for building links between `Nodes`. -It can be passed down in `linkProps` to a `Tree`. See [example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/linkHelper.js) +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) ```jsx //... From 082619c27bcfa92045ed54d304cd71c65afcdd21 Mon Sep 17 00:00:00 2001 From: ldd Date: Tue, 7 Apr 2020 18:18:04 -0400 Subject: [PATCH 6/6] docs(readme): improve documentation --- README.md | 39 +++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 44feeb1..a347f88 100644 --- a/README.md +++ b/README.md @@ -61,14 +61,20 @@ function ExampleComponent() { import { Tree } from "react-tech-tree"; ``` -| Prop | Type | Description | -| ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | -| id | `string` | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid) | -| links | `object[]` | object with links information | -| nodes | `object[]` | object with nodes information | -| NodeElement | ReactComponent | _(optional)_ React Element to be used as Node. Defaults to [`Node`](https://github.com/ldd/react-tech-tree/#node). | -| nodeProps | `object` | _(optional)_ Properties to pass down to Node elements. See [`Node`](https://github.com/ldd/react-tech-tree/#node). | -| linkProps | `object` | _(optional)_ Properties to pass down to Link elements. See [`Link`](https://github.com/ldd/react-tech-tree/#link). | +| Prop | Type | Description | +| ----------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------ | +| id | `string` | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid) | +| nodes | `{id:string, name: string}[][]` | 2d array with nodes information | +| links | `{from:string, to: string}[]` | array with links information | +| NodeElement | `ReactElement` | _(optional)_ React Element to be used as Node. Defaults to [`Node`](https://github.com/ldd/react-tech-tree/#node). | +| nodeProps | `object` | _(optional)_ Properties to pass down to Node elements. See [`Node`](https://github.com/ldd/react-tech-tree/#node). | +| linkProps | `object` | _(optional)_ See below. | + +#### linkProps + +| Prop | Type | Description | +| --------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| 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) | ### _Node_ @@ -76,9 +82,9 @@ import { Tree } from "react-tech-tree"; import { Node } from "react-tech-tree"; ``` -| Prop | Type | Description | -| ------------ | ------------------------- | -------------------------------------------- | -| clickHandler | (e: `MouseEvent`) => void | Event Handler fired when the Node is clicked | +| Prop | Type | Description | +| ------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 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) | ### _Sprite_ @@ -89,9 +95,18 @@ import { Sprite } from "react-tech-tree"; | Prop | Type | Description | | --------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | name | `string` | name of spritesheet entry or image name for this Sprite | -| scale | `number` | sprite's scale | | 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) | +### _Link_ + +```js +import { Link } from "react-tech-tree"; +``` + +| Prop | Type | Description | +| -------- | -------- | --------------------------------------- | +| pathData | `string` | data to build links. E.g: `M 0 0 L 1 1` | + ### _helpers_ #### nodeClickHandler