@ts-graphviz/react 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.all-contributorsrc +47 -0
- package/.devcontainer/Dockerfile +16 -0
- package/.devcontainer/devcontainer.json +35 -0
- package/.eslintignore +2 -0
- package/LICENSE +22 -0
- package/README.md +142 -0
- package/example/example.svg +40 -0
- package/example/example.tsx +39 -0
- package/lib/index.d.ts +368 -0
- package/lib/index.js +1 -0
- package/lib/index.mjs +1 -0
- package/package.json +81 -0
- package/rollup.config.js +55 -0
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"files": [
|
|
3
|
+
"README.md"
|
|
4
|
+
],
|
|
5
|
+
"imageSize": 100,
|
|
6
|
+
"commit": false,
|
|
7
|
+
"contributors": [
|
|
8
|
+
{
|
|
9
|
+
"login": "kamiazya",
|
|
10
|
+
"name": "Yuki Yamazaki",
|
|
11
|
+
"avatar_url": "https://avatars0.githubusercontent.com/u/35218186?v=4",
|
|
12
|
+
"profile": "http://blog.kamiazya.tech/",
|
|
13
|
+
"contributions": [
|
|
14
|
+
"code",
|
|
15
|
+
"test",
|
|
16
|
+
"ideas",
|
|
17
|
+
"doc"
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"login": "nagasawaryoya",
|
|
22
|
+
"name": "nagasawaryoya",
|
|
23
|
+
"avatar_url": "https://avatars.githubusercontent.com/u/53528726?v=4",
|
|
24
|
+
"profile": "https://github.com/nagasawaryoya",
|
|
25
|
+
"contributions": [
|
|
26
|
+
"code",
|
|
27
|
+
"test"
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"login": "tokidrill",
|
|
32
|
+
"name": "YukiSasaki",
|
|
33
|
+
"avatar_url": "https://avatars.githubusercontent.com/u/42460318?v=4",
|
|
34
|
+
"profile": "https://github.com/tokidrill",
|
|
35
|
+
"contributions": [
|
|
36
|
+
"code",
|
|
37
|
+
"test"
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"contributorsPerLine": 7,
|
|
42
|
+
"projectName": "react",
|
|
43
|
+
"projectOwner": "ts-graphviz",
|
|
44
|
+
"repoType": "github",
|
|
45
|
+
"repoHost": "https://github.com",
|
|
46
|
+
"skipCi": true
|
|
47
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.192.0/containers/typescript-node/.devcontainer/base.Dockerfile
|
|
2
|
+
|
|
3
|
+
# [Choice] Node.js version: 16, 14, 12
|
|
4
|
+
ARG VARIANT="16-buster"
|
|
5
|
+
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
|
|
6
|
+
|
|
7
|
+
# [Optional] Uncomment this section to install additional OS packages.
|
|
8
|
+
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
|
9
|
+
&& apt-get -y install --no-install-recommends graphviz
|
|
10
|
+
|
|
11
|
+
# [Optional] Uncomment if you want to install an additional version of node using nvm
|
|
12
|
+
# ARG EXTRA_NODE_VERSION=10
|
|
13
|
+
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
|
|
14
|
+
|
|
15
|
+
# [Optional] Uncomment if you want to install more global node packages
|
|
16
|
+
# RUN su node -c "npm install -g <your-package-list -here>"
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
|
|
2
|
+
// https://github.com/microsoft/vscode-dev-containers/tree/v0.192.0/containers/typescript-node
|
|
3
|
+
{
|
|
4
|
+
"name": "ts-graphviz",
|
|
5
|
+
"build": {
|
|
6
|
+
"dockerfile": "Dockerfile",
|
|
7
|
+
// Update 'VARIANT' to pick a Node version: 12, 14, 16
|
|
8
|
+
"args": {
|
|
9
|
+
"VARIANT": "16"
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
// Set *default* container specific settings.json values on container create.
|
|
13
|
+
"settings": {
|
|
14
|
+
"editor.formatOnSave": false,
|
|
15
|
+
"editor.formatOnPaste": false,
|
|
16
|
+
"editor.formatOnType": false,
|
|
17
|
+
"editor.codeActionsOnSave": {
|
|
18
|
+
"source.fixAll.eslint": true
|
|
19
|
+
},
|
|
20
|
+
"typescript.tsdk": "node_modules/typescript/lib"
|
|
21
|
+
},
|
|
22
|
+
// Add the IDs of extensions you want installed when the container is created.
|
|
23
|
+
"extensions": [
|
|
24
|
+
"EditorConfig.EditorConfig",
|
|
25
|
+
"esbenp.prettier-vscode",
|
|
26
|
+
"dbaeumer.vscode-eslint",
|
|
27
|
+
"Orta.vscode-jest"
|
|
28
|
+
],
|
|
29
|
+
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
|
30
|
+
// "forwardPorts": [],
|
|
31
|
+
// Use 'postCreateCommand' to run commands after the container is created.
|
|
32
|
+
"postCreateCommand": "yarn install",
|
|
33
|
+
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
|
34
|
+
"remoteUser": "node"
|
|
35
|
+
}
|
package/.eslintignore
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
The MIT License (MIT)
|
|
3
|
+
|
|
4
|
+
Copyright (c) 2020 Yuki Yamazaki
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
[](https://github.com/ts-graphviz/react/actions?workflow=NodeCI)
|
|
2
|
+
[](https://badge.fury.io/js/%40ts-graphviz%2Freact)
|
|
3
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
|
+
[](http://makeapullrequest.com)
|
|
5
|
+
[](https://github.com/facebook/jest)
|
|
6
|
+
[](https://github.com/prettier/prettier)
|
|
7
|
+
[](https://open.vscode.dev/ts-graphviz/react)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
8
|
+
[](#contributors-)
|
|
9
|
+
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
# @ts-graphviz/react
|
|
13
|
+
|
|
14
|
+
Graphviz-dot Renderer using React.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
The module can then be installed using [npm](https://www.npmjs.com/):
|
|
19
|
+
|
|
20
|
+
[](https://nodei.co/npm/@ts-graphviz/react/)
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
# yarn
|
|
24
|
+
$ yarn add @ts-graphviz/react react
|
|
25
|
+
# or npm
|
|
26
|
+
$ npm install -S @ts-graphviz/react react
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
> Install [React](https://github.com/facebook/react/) as peerDependencies at the same time.
|
|
30
|
+
|
|
31
|
+
## Example
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
import React from 'react';
|
|
35
|
+
import { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';
|
|
36
|
+
|
|
37
|
+
const Example = () => (
|
|
38
|
+
<Digraph
|
|
39
|
+
rankdir="TB"
|
|
40
|
+
edge={{
|
|
41
|
+
color: 'blue',
|
|
42
|
+
fontcolor: 'blue',
|
|
43
|
+
}}
|
|
44
|
+
node={{
|
|
45
|
+
shape: 'none',
|
|
46
|
+
}}
|
|
47
|
+
>
|
|
48
|
+
<Node
|
|
49
|
+
id="nodeA"
|
|
50
|
+
shape="none"
|
|
51
|
+
label={
|
|
52
|
+
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
|
|
53
|
+
<DOT.TR>
|
|
54
|
+
<DOT.TD>left</DOT.TD>
|
|
55
|
+
<DOT.TD PORT="m">middle</DOT.TD>
|
|
56
|
+
<DOT.TD PORT="r">right</DOT.TD>
|
|
57
|
+
</DOT.TR>
|
|
58
|
+
</DOT.TABLE>
|
|
59
|
+
}
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
<Subgraph id="cluster" label="Cluster" labeljust="l">
|
|
63
|
+
<Node id="nodeB" label="This is label for nodeB." />
|
|
64
|
+
</Subgraph>
|
|
65
|
+
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
|
|
66
|
+
</Digraph>
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
const dot = renderToDot(<Example />);
|
|
70
|
+
|
|
71
|
+
console.log(dot);
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Output dot
|
|
75
|
+
|
|
76
|
+
```dot
|
|
77
|
+
digraph {
|
|
78
|
+
rankdir = "TB";
|
|
79
|
+
edge [
|
|
80
|
+
color = "blue",
|
|
81
|
+
fontcolor = "blue",
|
|
82
|
+
];
|
|
83
|
+
node [
|
|
84
|
+
shape = "none",
|
|
85
|
+
];
|
|
86
|
+
"nodeA" [
|
|
87
|
+
shape = "none",
|
|
88
|
+
label = <<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"><TR><TD>left</TD><TD PORT="m">middle</TD><TD PORT="r">right</TD></TR></TABLE>>,
|
|
89
|
+
];
|
|
90
|
+
subgraph "cluster" {
|
|
91
|
+
labeljust = "l";
|
|
92
|
+
label = "Cluster";
|
|
93
|
+
"nodeB" [
|
|
94
|
+
label = "This is label for nodeB.",
|
|
95
|
+
];
|
|
96
|
+
}
|
|
97
|
+
// Edge from node A to B
|
|
98
|
+
"nodeB" -> "nodeA":"m" [
|
|
99
|
+
label = <<B>A to B</B>>,
|
|
100
|
+
];
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
## See Also
|
|
107
|
+
|
|
108
|
+
Graphviz-dot Test and Integration
|
|
109
|
+
|
|
110
|
+
- [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)
|
|
111
|
+
- Graphviz library for TypeScript.
|
|
112
|
+
- [jest-graphviz](https://github.com/ts-graphviz/jest-graphviz)
|
|
113
|
+
- Jest matchers that supports graphviz integration.
|
|
114
|
+
- [setup-graphviz](https://github.com/ts-graphviz/setup-graphviz)
|
|
115
|
+
- GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).
|
|
116
|
+
|
|
117
|
+
## Contributors
|
|
118
|
+
|
|
119
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
120
|
+
|
|
121
|
+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
122
|
+
<!-- prettier-ignore-start -->
|
|
123
|
+
<!-- markdownlint-disable -->
|
|
124
|
+
<table>
|
|
125
|
+
<tr>
|
|
126
|
+
<td align="center"><a href="http://blog.kamiazya.tech/"><img src="https://avatars0.githubusercontent.com/u/35218186?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yuki Yamazaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/react/commits?author=kamiazya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/react/commits?author=kamiazya" title="Tests">⚠️</a> <a href="#ideas-kamiazya" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ts-graphviz/react/commits?author=kamiazya" title="Documentation">📖</a></td>
|
|
127
|
+
<td align="center"><a href="https://github.com/nagasawaryoya"><img src="https://avatars.githubusercontent.com/u/53528726?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nagasawaryoya</b></sub></a><br /><a href="https://github.com/ts-graphviz/react/commits?author=nagasawaryoya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/react/commits?author=nagasawaryoya" title="Tests">⚠️</a></td>
|
|
128
|
+
<td align="center"><a href="https://github.com/tokidrill"><img src="https://avatars.githubusercontent.com/u/42460318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>YukiSasaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/react/commits?author=tokidrill" title="Code">💻</a> <a href="https://github.com/ts-graphviz/react/commits?author=tokidrill" title="Tests">⚠️</a></td>
|
|
129
|
+
</tr>
|
|
130
|
+
</table>
|
|
131
|
+
|
|
132
|
+
<!-- markdownlint-restore -->
|
|
133
|
+
<!-- prettier-ignore-end -->
|
|
134
|
+
|
|
135
|
+
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
136
|
+
|
|
137
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
|
|
138
|
+
specification. Contributions of any kind welcome!
|
|
139
|
+
|
|
140
|
+
## License
|
|
141
|
+
|
|
142
|
+
This software is released under the MIT License, see [LICENSE](./LICENSE).
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
|
3
|
+
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<!-- Generated by graphviz version 2.42.3 (20191010.1750)
|
|
5
|
+
-->
|
|
6
|
+
<!-- Title: %3 Pages: 1 -->
|
|
7
|
+
<svg width="188pt" height="168pt"
|
|
8
|
+
viewBox="0.00 0.00 188.00 168.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
9
|
+
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 164)">
|
|
10
|
+
<title>%3</title>
|
|
11
|
+
<polygon fill="white" stroke="transparent" points="-4,4 -4,-164 184,-164 184,4 -4,4"/>
|
|
12
|
+
<g id="clust1" class="cluster">
|
|
13
|
+
<title>cluster</title>
|
|
14
|
+
<polygon fill="none" stroke="black" points="8,-78 8,-152 172,-152 172,-78 8,-78"/>
|
|
15
|
+
<text text-anchor="middle" x="36.22" y="-136.8" font-family="Times,serif" font-size="14.00">Cluster</text>
|
|
16
|
+
</g>
|
|
17
|
+
<!-- nodeA -->
|
|
18
|
+
<g id="node1" class="node">
|
|
19
|
+
<title>nodeA</title>
|
|
20
|
+
<polygon fill="none" stroke="black" points="44,-8 44,-28 68,-28 68,-8 44,-8"/>
|
|
21
|
+
<text text-anchor="start" x="46.67" y="-13.8" font-family="Times,serif" font-size="14.00">left</text>
|
|
22
|
+
<polygon fill="none" stroke="black" points="68,-8 68,-28 112,-28 112,-8 68,-8"/>
|
|
23
|
+
<text text-anchor="start" x="70.56" y="-13.8" font-family="Times,serif" font-size="14.00">middle</text>
|
|
24
|
+
<polygon fill="none" stroke="black" points="112,-8 112,-28 144,-28 144,-8 112,-8"/>
|
|
25
|
+
<text text-anchor="start" x="114.78" y="-13.8" font-family="Times,serif" font-size="14.00">right</text>
|
|
26
|
+
</g>
|
|
27
|
+
<!-- nodeB -->
|
|
28
|
+
<g id="node2" class="node">
|
|
29
|
+
<title>nodeB</title>
|
|
30
|
+
<text text-anchor="middle" x="90" y="-99.8" font-family="Times,serif" font-size="14.00">This is label for nodeB.</text>
|
|
31
|
+
</g>
|
|
32
|
+
<!-- nodeB->nodeA -->
|
|
33
|
+
<g id="edge1" class="edge">
|
|
34
|
+
<title>nodeB->nodeA:m</title>
|
|
35
|
+
<path fill="none" stroke="blue" d="M90,-85.95C90,-73.53 90,-56.02 90,-39.27"/>
|
|
36
|
+
<polygon fill="blue" stroke="blue" points="93.5,-39 90,-29 86.5,-39 93.5,-39"/>
|
|
37
|
+
<text text-anchor="start" x="90" y="-57.8" font-family="Times,serif" font-weight="bold" font-size="14.00" fill="blue">A to B</text>
|
|
38
|
+
</g>
|
|
39
|
+
</g>
|
|
40
|
+
</svg>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '../src';
|
|
3
|
+
|
|
4
|
+
const Example: FC = () => (
|
|
5
|
+
<Digraph
|
|
6
|
+
rankdir="TB"
|
|
7
|
+
edge={{
|
|
8
|
+
color: 'blue',
|
|
9
|
+
fontcolor: 'blue',
|
|
10
|
+
}}
|
|
11
|
+
node={{
|
|
12
|
+
shape: 'none',
|
|
13
|
+
}}
|
|
14
|
+
>
|
|
15
|
+
<Node
|
|
16
|
+
id="nodeA"
|
|
17
|
+
shape="none"
|
|
18
|
+
label={
|
|
19
|
+
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
|
|
20
|
+
<DOT.TR>
|
|
21
|
+
<DOT.TD>left</DOT.TD>
|
|
22
|
+
<DOT.TD PORT="m">middle</DOT.TD>
|
|
23
|
+
<DOT.TD PORT="r">right</DOT.TD>
|
|
24
|
+
</DOT.TR>
|
|
25
|
+
</DOT.TABLE>
|
|
26
|
+
}
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<Subgraph id="cluster" label="Cluster" labeljust="l">
|
|
30
|
+
<Node id="nodeB" label="This is label for nodeB." />
|
|
31
|
+
</Subgraph>
|
|
32
|
+
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
|
|
33
|
+
</Digraph>
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
const dot = renderToDot(<Example />);
|
|
37
|
+
|
|
38
|
+
// eslint-disable-next-line no-console
|
|
39
|
+
console.log(dot);
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,368 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ReactElement, FC, VFC } from 'react';
|
|
3
|
+
import {
|
|
4
|
+
EdgeAttributes,
|
|
5
|
+
NodeAttributes,
|
|
6
|
+
ClusterSubgraphAttributes,
|
|
7
|
+
RootClusterAttributes,
|
|
8
|
+
attribute,
|
|
9
|
+
IHasComment,
|
|
10
|
+
EdgeTargetLikeTuple,
|
|
11
|
+
AttributesValue,
|
|
12
|
+
ICluster,
|
|
13
|
+
IRootCluster,
|
|
14
|
+
ISubgraph,
|
|
15
|
+
IEdge,
|
|
16
|
+
INode,
|
|
17
|
+
} from 'ts-graphviz';
|
|
18
|
+
|
|
19
|
+
/** Common attribute values of objects under cluster */
|
|
20
|
+
interface ClusterCommonAttributesProps {
|
|
21
|
+
/** Attribute value for Edges */
|
|
22
|
+
edge?: EdgeAttributes;
|
|
23
|
+
/** Attribute value for Nodes */
|
|
24
|
+
node?: NodeAttributes;
|
|
25
|
+
/** Attribute value for Graphs */
|
|
26
|
+
graph?: ClusterSubgraphAttributes;
|
|
27
|
+
}
|
|
28
|
+
/** Options for RootCluster */
|
|
29
|
+
interface RootClusterOptions
|
|
30
|
+
extends Omit<RootClusterAttributes, typeof attribute.comment>,
|
|
31
|
+
ClusterCommonAttributesProps,
|
|
32
|
+
IHasComment {
|
|
33
|
+
/** Cluster id */
|
|
34
|
+
id?: string;
|
|
35
|
+
}
|
|
36
|
+
/** Options for Subgraph */
|
|
37
|
+
interface SubgraphOptions
|
|
38
|
+
extends Omit<ClusterSubgraphAttributes, typeof attribute.comment>,
|
|
39
|
+
ClusterCommonAttributesProps,
|
|
40
|
+
IHasComment {
|
|
41
|
+
/** Cluster id */
|
|
42
|
+
id?: string;
|
|
43
|
+
}
|
|
44
|
+
/** Options for Edge */
|
|
45
|
+
interface EdgeOptions extends Omit<EdgeAttributes, typeof attribute.comment>, IHasComment {}
|
|
46
|
+
/** Options for Node */
|
|
47
|
+
interface NodeOptions extends Omit<NodeAttributes, typeof attribute.comment>, IHasComment {}
|
|
48
|
+
/** Props for RootCluster component */
|
|
49
|
+
interface RootClusterProps extends Omit<RootClusterOptions, typeof attribute.label> {
|
|
50
|
+
label?: ReactElement | string;
|
|
51
|
+
}
|
|
52
|
+
/** Props for Edge component */
|
|
53
|
+
interface EdgeProps extends Omit<EdgeOptions, typeof attribute.label> {
|
|
54
|
+
/** Edge targets */
|
|
55
|
+
targets: EdgeTargetLikeTuple;
|
|
56
|
+
/** Edge label */
|
|
57
|
+
label?: ReactElement | string;
|
|
58
|
+
}
|
|
59
|
+
/** Props for Node component */
|
|
60
|
+
interface NodeProps extends Omit<NodeOptions, typeof attribute.label | typeof attribute.xlabel> {
|
|
61
|
+
/** Node id */
|
|
62
|
+
id: string;
|
|
63
|
+
/** Node label */
|
|
64
|
+
label?: ReactElement | string;
|
|
65
|
+
/** Node xlabel */
|
|
66
|
+
xlabel?: ReactElement | string;
|
|
67
|
+
}
|
|
68
|
+
/** Props for Subgraph component */
|
|
69
|
+
interface SubgraphProps extends Omit<SubgraphOptions, typeof attribute.label> {
|
|
70
|
+
/** Subgraph label */
|
|
71
|
+
label?: ReactElement | string;
|
|
72
|
+
}
|
|
73
|
+
/** Props for ClusterPortal component */
|
|
74
|
+
interface ClusterPortalProps {
|
|
75
|
+
/**
|
|
76
|
+
* id of the cluster you want to target for the portal.
|
|
77
|
+
* If not specified, target the cluster that is the container to the portal.
|
|
78
|
+
*/
|
|
79
|
+
id?: string;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
declare type ValueOf<T> = T[keyof T];
|
|
83
|
+
declare namespace labels {
|
|
84
|
+
export type TableProps = {
|
|
85
|
+
ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT';
|
|
86
|
+
BGCOLOR?: AttributesValue;
|
|
87
|
+
BORDER?: AttributesValue;
|
|
88
|
+
CELLBORDER?: AttributesValue;
|
|
89
|
+
CELLPADDING?: AttributesValue;
|
|
90
|
+
CELLSPACING?: AttributesValue;
|
|
91
|
+
COLOR?: AttributesValue;
|
|
92
|
+
COLUMNS?: AttributesValue;
|
|
93
|
+
FIXEDSIZE?: true;
|
|
94
|
+
GRADIENTANGLE?: AttributesValue;
|
|
95
|
+
HEIGHT?: AttributesValue;
|
|
96
|
+
HREF?: AttributesValue;
|
|
97
|
+
ID?: AttributesValue;
|
|
98
|
+
PORT?: AttributesValue;
|
|
99
|
+
ROWS?: AttributesValue;
|
|
100
|
+
SIDES?: AttributesValue;
|
|
101
|
+
STYLE?: AttributesValue;
|
|
102
|
+
TARGET?: AttributesValue;
|
|
103
|
+
TITLE?: AttributesValue;
|
|
104
|
+
TOOLTIP?: AttributesValue;
|
|
105
|
+
VALIGN?: 'MIDDLE' | 'BOTTOM' | 'TOP';
|
|
106
|
+
WIDTH?: AttributesValue;
|
|
107
|
+
};
|
|
108
|
+
type NoAttributes = Record<string, unknown>;
|
|
109
|
+
export type TrProps = NoAttributes;
|
|
110
|
+
export type TdProps = {
|
|
111
|
+
ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT' | 'TEXT';
|
|
112
|
+
BALIGN?: 'CENTER' | 'LEFT' | 'RIGHT';
|
|
113
|
+
BGCOLOR?: AttributesValue;
|
|
114
|
+
BORDER?: AttributesValue;
|
|
115
|
+
CELLPADDING?: AttributesValue;
|
|
116
|
+
CELLSPACING?: AttributesValue;
|
|
117
|
+
COLOR?: AttributesValue;
|
|
118
|
+
COLSPAN?: AttributesValue;
|
|
119
|
+
FIXEDSIZE?: boolean;
|
|
120
|
+
GRADIENTANGLE?: AttributesValue;
|
|
121
|
+
HEIGHT?: AttributesValue;
|
|
122
|
+
HREF?: AttributesValue;
|
|
123
|
+
ID?: AttributesValue;
|
|
124
|
+
PORT?: AttributesValue;
|
|
125
|
+
ROWSPAN?: AttributesValue;
|
|
126
|
+
SIDES?: AttributesValue;
|
|
127
|
+
STYLE?: AttributesValue;
|
|
128
|
+
TARGET?: AttributesValue;
|
|
129
|
+
TITLE?: AttributesValue;
|
|
130
|
+
TOOLTIP?: AttributesValue;
|
|
131
|
+
VALIGN?: 'MIDDLE' | 'BOTTOM' | 'TOP';
|
|
132
|
+
WIDTH?: AttributesValue;
|
|
133
|
+
};
|
|
134
|
+
export type FontProps = {
|
|
135
|
+
COLOR?: AttributesValue;
|
|
136
|
+
FACE?: AttributesValue;
|
|
137
|
+
'POINT-SIZE'?: AttributesValue;
|
|
138
|
+
};
|
|
139
|
+
export type BrProps = {
|
|
140
|
+
ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT';
|
|
141
|
+
};
|
|
142
|
+
export type ImgProps = {
|
|
143
|
+
SCALE?: boolean | 'WIDTH' | 'HEIGHT' | 'BOTH';
|
|
144
|
+
SRC?: AttributesValue;
|
|
145
|
+
};
|
|
146
|
+
export type IProps = NoAttributes;
|
|
147
|
+
export type BProps = NoAttributes;
|
|
148
|
+
export type UProps = NoAttributes;
|
|
149
|
+
export type OProps = NoAttributes;
|
|
150
|
+
export type SubProps = NoAttributes;
|
|
151
|
+
export type SupProps = NoAttributes;
|
|
152
|
+
export type SProps = NoAttributes;
|
|
153
|
+
export type HrProps = NoAttributes;
|
|
154
|
+
export type VrProps = NoAttributes;
|
|
155
|
+
export {};
|
|
156
|
+
}
|
|
157
|
+
declare const DOT: Readonly<{
|
|
158
|
+
readonly PORT: 'dot-port';
|
|
159
|
+
readonly TABLE: 'dot-table';
|
|
160
|
+
readonly TR: 'dot-tr';
|
|
161
|
+
readonly TD: 'dot-td';
|
|
162
|
+
readonly FONT: 'dot-font';
|
|
163
|
+
readonly BR: 'dot-br';
|
|
164
|
+
readonly IMG: 'dot-img';
|
|
165
|
+
readonly I: 'dot-i';
|
|
166
|
+
readonly B: 'dot-b';
|
|
167
|
+
readonly U: 'dot-u';
|
|
168
|
+
readonly O: 'dot-o';
|
|
169
|
+
readonly SUB: 'dot-sub';
|
|
170
|
+
readonly SUP: 'dot-sup';
|
|
171
|
+
readonly S: 'dot-s';
|
|
172
|
+
readonly HR: 'dot-hr';
|
|
173
|
+
readonly VR: 'dot-vr';
|
|
174
|
+
}>;
|
|
175
|
+
declare type DOT = ValueOf<typeof DOT>;
|
|
176
|
+
declare global {
|
|
177
|
+
namespace JSX {
|
|
178
|
+
interface IntrinsicElements {
|
|
179
|
+
[DOT.PORT]: {
|
|
180
|
+
children: string;
|
|
181
|
+
};
|
|
182
|
+
[DOT.TABLE]: React.PropsWithChildren<labels.TableProps>;
|
|
183
|
+
[DOT.TR]: React.PropsWithChildren<labels.TrProps>;
|
|
184
|
+
[DOT.TD]: React.PropsWithChildren<labels.TdProps>;
|
|
185
|
+
[DOT.FONT]: React.PropsWithChildren<labels.FontProps>;
|
|
186
|
+
[DOT.BR]: labels.BrProps;
|
|
187
|
+
[DOT.IMG]: labels.ImgProps;
|
|
188
|
+
[DOT.I]: React.PropsWithChildren<labels.IProps>;
|
|
189
|
+
[DOT.B]: React.PropsWithChildren<labels.BProps>;
|
|
190
|
+
[DOT.U]: React.PropsWithChildren<labels.UProps>;
|
|
191
|
+
[DOT.O]: React.PropsWithChildren<labels.OProps>;
|
|
192
|
+
[DOT.SUB]: React.PropsWithChildren<labels.SubProps>;
|
|
193
|
+
[DOT.SUP]: React.PropsWithChildren<labels.SupProps>;
|
|
194
|
+
[DOT.S]: React.PropsWithChildren<labels.SProps>;
|
|
195
|
+
[DOT.HR]: labels.HrProps;
|
|
196
|
+
[DOT.VR]: labels.VrProps;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* Return the cluster of container.
|
|
203
|
+
*/
|
|
204
|
+
declare function useContainerCluster(): ICluster | null;
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* Hook to get the current cluster(Digraph, Graph or Subgraph).
|
|
208
|
+
*
|
|
209
|
+
* @throws If it is out of the context of Cluster, it throws an exception.
|
|
210
|
+
*/
|
|
211
|
+
declare function useCurrentCluster(): ICluster;
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* `useDigraph` is a hook that creates an instance of Digraph
|
|
215
|
+
* according to the object given by props.
|
|
216
|
+
*/
|
|
217
|
+
declare function useDigraph(options?: RootClusterOptions): IRootCluster;
|
|
218
|
+
|
|
219
|
+
/**
|
|
220
|
+
* `useGraph` is a hook that creates an instance of Graph
|
|
221
|
+
* according to the object given by props.
|
|
222
|
+
*/
|
|
223
|
+
declare function useGraph(options?: RootClusterOptions): IRootCluster;
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* `useSubgraph` is a hook that creates an instance of Subgraph
|
|
227
|
+
* according to the object given by props.
|
|
228
|
+
*/
|
|
229
|
+
declare function useSubgraph(props?: SubgraphOptions): ISubgraph;
|
|
230
|
+
|
|
231
|
+
/**
|
|
232
|
+
* `useEdge` is a hook that creates an instance of Edge
|
|
233
|
+
* according to the object given by props.
|
|
234
|
+
*/
|
|
235
|
+
declare function useEdge(targets: EdgeTargetLikeTuple, props?: EdgeOptions): IEdge;
|
|
236
|
+
|
|
237
|
+
/**
|
|
238
|
+
* `useNode` is a hook that creates an instance of Node
|
|
239
|
+
* according to the object given by props.
|
|
240
|
+
*/
|
|
241
|
+
declare function useNode(id: string, options?: NodeOptions): INode;
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* `Graph` component.
|
|
245
|
+
*/
|
|
246
|
+
declare const Graph: FC<RootClusterProps>;
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* `Digraph` component.
|
|
250
|
+
*/
|
|
251
|
+
declare const Digraph: FC<RootClusterProps>;
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* `Subgraph` component.
|
|
255
|
+
*/
|
|
256
|
+
declare const Subgraph: FC<SubgraphProps>;
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* `Node` component.
|
|
260
|
+
*/
|
|
261
|
+
declare const Node: VFC<NodeProps>;
|
|
262
|
+
|
|
263
|
+
/**
|
|
264
|
+
* `Edge` component.
|
|
265
|
+
*/
|
|
266
|
+
declare const Edge: VFC<EdgeProps>;
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* ClusterPortal component.
|
|
270
|
+
*/
|
|
271
|
+
declare const ClusterPortal: FC<ClusterPortalProps>;
|
|
272
|
+
|
|
273
|
+
/**
|
|
274
|
+
* Convert the given element to Graphviz model.
|
|
275
|
+
*
|
|
276
|
+
* @example Example of giving a cluster as a container with the second argument.
|
|
277
|
+
*
|
|
278
|
+
* ```tsx
|
|
279
|
+
* import React, { FC } from 'react';
|
|
280
|
+
* import { digraph, toDot } from 'ts-graphviz';
|
|
281
|
+
* import { Node, Subgraph, render, Edge } from '@ts-graphviz/react';
|
|
282
|
+
*
|
|
283
|
+
* const Example: FC = () => (
|
|
284
|
+
* <>
|
|
285
|
+
* <Node id="a" />
|
|
286
|
+
*
|
|
287
|
+
* <Subgraph id="my_cluster">
|
|
288
|
+
* <Node id="b" />
|
|
289
|
+
* </Subgraph>
|
|
290
|
+
* <Edge targets={['b', 'a']} />
|
|
291
|
+
* </>
|
|
292
|
+
* );
|
|
293
|
+
*
|
|
294
|
+
* const G = digraph((g) => render(<Example />, g));
|
|
295
|
+
* console.log(toDot(G));
|
|
296
|
+
* // digraph {
|
|
297
|
+
* // "a";
|
|
298
|
+
* // subgraph "my_cluster" {
|
|
299
|
+
* // "b";
|
|
300
|
+
* // }
|
|
301
|
+
* // "b" -> "a";
|
|
302
|
+
* // }
|
|
303
|
+
* ```
|
|
304
|
+
*/
|
|
305
|
+
declare function render(element: ReactElement, container?: ICluster): ICluster;
|
|
306
|
+
/**
|
|
307
|
+
* Converts the given element to DOT language and returns it.
|
|
308
|
+
*
|
|
309
|
+
* @example
|
|
310
|
+
*
|
|
311
|
+
* ```tsx
|
|
312
|
+
* import React, { FC } from 'react';
|
|
313
|
+
* import { Digraph, Node, Subgraph, renderToDot, Edge } from '@ts-graphviz/react';
|
|
314
|
+
*
|
|
315
|
+
* const Example: FC = () => (
|
|
316
|
+
* <Digraph>
|
|
317
|
+
* <Node id="a" />
|
|
318
|
+
* <Subgraph id="my_cluster">
|
|
319
|
+
* <Node id="b" />
|
|
320
|
+
* </Subgraph>
|
|
321
|
+
* <Edge targets={['b', 'a']} />
|
|
322
|
+
* </Digraph>
|
|
323
|
+
* );
|
|
324
|
+
*
|
|
325
|
+
* const dot = renderToDot(<Example />);
|
|
326
|
+
* console.log(dot);
|
|
327
|
+
* // digraph {
|
|
328
|
+
* // "a";
|
|
329
|
+
* // subgraph "my_cluster" {
|
|
330
|
+
* // "b";
|
|
331
|
+
* // }
|
|
332
|
+
* // "b" -> "a";
|
|
333
|
+
* // }
|
|
334
|
+
* ```
|
|
335
|
+
*
|
|
336
|
+
* @returns Rendered dot string
|
|
337
|
+
*/
|
|
338
|
+
declare function renderToDot(element: ReactElement, container?: ICluster): string;
|
|
339
|
+
|
|
340
|
+
export {
|
|
341
|
+
ClusterCommonAttributesProps,
|
|
342
|
+
ClusterPortal,
|
|
343
|
+
ClusterPortalProps,
|
|
344
|
+
DOT,
|
|
345
|
+
Digraph,
|
|
346
|
+
Edge,
|
|
347
|
+
EdgeOptions,
|
|
348
|
+
EdgeProps,
|
|
349
|
+
Graph,
|
|
350
|
+
Node,
|
|
351
|
+
NodeOptions,
|
|
352
|
+
NodeProps,
|
|
353
|
+
RootClusterOptions,
|
|
354
|
+
RootClusterProps,
|
|
355
|
+
Subgraph,
|
|
356
|
+
SubgraphOptions,
|
|
357
|
+
SubgraphProps,
|
|
358
|
+
labels,
|
|
359
|
+
render,
|
|
360
|
+
renderToDot,
|
|
361
|
+
useContainerCluster,
|
|
362
|
+
useCurrentCluster,
|
|
363
|
+
useDigraph,
|
|
364
|
+
useEdge,
|
|
365
|
+
useGraph,
|
|
366
|
+
useNode,
|
|
367
|
+
useSubgraph,
|
|
368
|
+
};
|
package/lib/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("ts-graphviz"),r=require("prop-types"),n=require("react-dom/server.js"),o=require("react-reconciler");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(e),i=a(r),l=a(o),p=Object.freeze({PORT:"dot-port",TABLE:"dot-table",TR:"dot-tr",TD:"dot-td",FONT:"dot-font",BR:"dot-br",IMG:"dot-img",I:"dot-i",B:"dot-b",U:"dot-u",O:"dot-o",SUB:"dot-sub",SUP:"dot-sup",S:"dot-s",HR:"dot-hr",VR:"dot-vr"}),d=u.default.createContext(null);function c(){return e.useContext(d)}d.displayName="ContainerCluster";var s=u.default.createContext(null);s.displayName="CurrentCluster";function f(){var t=e.useContext(s);if(null===t)throw Error("useCluster must be called within a cluster such as Digraph, Graph, Subgraph.");return t}function m(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}var v=u.default.createContext(null);function g(){var t=e.useContext(v);if(null===t)throw Error("Cannot call useGraphvizContext outside GraphvizContext.\nBasically, you need to use the render function provided by @ts-graphviz/react.");return t}function h(t,r,n){var o=n.edge,a=n.node,u=n.graph;e.useEffect((function(){t.clear(),t.apply(r)}),[t,r]),e.useEffect((function(){t.attributes.node.clear(),t.attributes.node.apply(null!=a?a:{})}),[t,a]),e.useEffect((function(){t.attributes.edge.clear(),t.attributes.edge.apply(null!=o?o:{})}),[t,o]),e.useEffect((function(){t.attributes.graph.clear(),t.attributes.graph.apply(null!=u?u:{})}),[t,u])}function y(t,r){e.useEffect((function(){t.comment=r}),[t,r])}function b(r){void 0===r&&(r={});var n=r.id,o=r.comment,a=r.edge,u=r.node,i=r.graph,l=m(r,["id","comment","edge","node","graph"]),p=g(),d=e.useMemo((function(){var e=new t.Digraph(n);return p.container=e,e.comment=o,e.apply(l),e.attributes.node.apply(null!=u?u:{}),e.attributes.edge.apply(null!=a?a:{}),e.attributes.graph.apply(null!=i?i:{}),e}),[p,n,o,a,u,i,l]);return y(d,o),h(d,l,{edge:a,node:u,graph:i}),e.useEffect((function(){return function(){p.container=void 0}}),[p]),d}function C(r){void 0===r&&(r={});var n=r.id,o=r.comment,a=r.edge,u=r.node,i=r.graph,l=m(r,["id","comment","edge","node","graph"]),p=g(),d=e.useMemo((function(){var e=new t.Graph(n);return p.container=e,e.comment=o,e.apply(l),e.attributes.node.apply(null!=u?u:{}),e.attributes.edge.apply(null!=a?a:{}),e.attributes.graph.apply(null!=i?i:{}),e}),[p,n,o,a,u,i,l]);return y(d,o),h(d,l,{edge:a,node:u,graph:i}),e.useEffect((function(){return function(){p.container=void 0}}),[p]),d}function x(r){void 0===r&&(r={});var n=r.id,o=r.comment,a=r.edge,u=r.node,i=r.graph,l=m(r,["id","comment","edge","node","graph"]),p=g(),d=f(),c=e.useMemo((function(){var e=new t.Subgraph(n);return null!==d?d.addSubgraph(e):p.container||(p.container=e),e.comment=o,e.apply(l),e.attributes.node.apply(null!=u?u:{}),e.attributes.edge.apply(null!=a?a:{}),e.attributes.graph.apply(null!=i?i:{}),e}),[p,d,n,o,a,u,i,l]);return y(c,o),h(c,l,{edge:a,node:u,graph:i}),e.useEffect((function(){return function(){d.removeSubgraph(c)}}),[d,c]),c}function E(t,r){e.useEffect((function(){t.attributes.clear(),t.attributes.apply(r)}),[t,r])}function T(t,r){void 0===r&&(r={});var n=r.comment,o=m(r,["comment"]),a=f();if(t.length<2)throw Error("Edges must have at least 2 targets.");var u=e.useMemo((function(){var e=a.createEdge(t);return e.comment=n,e.attributes.apply(o),e}),[a,t,n,o]);return y(u,n),E(u,o),e.useEffect((function(){return function(){a.removeEdge(u)}}),[a,u]),u}function P(t,r){void 0===r&&(r={});var n=r.comment,o=m(r,["comment"]),a=f(),u=e.useMemo((function(){var e=a.createNode(t);return e.attributes.apply(o),e.comment=n,e}),[a,t,o,n]);return y(u,n),E(u,o),e.useEffect((function(){return function(){a.removeNode(u)}}),[a,u]),u}function O(t){return e.useMemo((function(){return function(t){return e.isValidElement(t)?"<"+n.renderToStaticMarkup(t).replace(/<dot-port>(.+?)<\/dot-port>/gi,"<$1>").replace(/<(\/?)dot-([a-z-]+)/gi,(function(e,t,r){return"<"+t+r.toUpperCase()}))+">":t}(t)}),[t])}v.displayName="GraphvizContext";var w=u.default.createContext(new Map);function M(){return e.useContext(w)}w.displayName="ClusterMap";var D=function(t){var r=t.children,n=t.label,o=m(t,["children","label"]);if(null!==c())throw Error("RootCluster is duplicated.\nUse only one of Digraph and Graph.");var a=O(n);void 0!==a&&Object.assign(o,{label:a});var i=C(o),l=M();return e.useEffect((function(){void 0!==i.id&&l.set(i.id,i)}),[l,i]),u.default.createElement(d.Provider,{value:i},u.default.createElement(s.Provider,{value:i},r))};D.displayName="Graph",D.defaultProps={id:void 0,comment:void 0,label:void 0},D.propTypes={id:i.default.string,comment:i.default.string,label:i.default.oneOfType([i.default.element,i.default.string])};var N=function(t){var r=t.children,n=t.label,o=m(t,["children","label"]);if(null!==c())throw Error("RootCluster is duplicated.\nUse only one of Digraph and Graph.");var a=O(n);void 0!==a&&Object.assign(o,{label:a});var i=b(o),l=M();return e.useEffect((function(){void 0!==i.id&&l.set(i.id,i)}),[l,i]),u.default.createElement(d.Provider,{value:i},u.default.createElement(s.Provider,{value:i},r))};N.displayName="Digraph",N.defaultProps={id:void 0,comment:void 0,label:void 0},N.propTypes={id:i.default.string,comment:i.default.string,label:i.default.oneOfType([i.default.element,i.default.string])};var S=function(t){var r=t.children,n=t.label,o=m(t,["children","label"]),a=O(n);void 0!==a&&Object.assign(o,{label:a});var i=x(o),l=M();return e.useEffect((function(){void 0!==i.id&&l.set(i.id,i)}),[i,l]),u.default.createElement(s.Provider,{value:i},r)};S.displayName="Subgraph",S.propTypes={id:i.default.string,comment:i.default.string,label:i.default.oneOfType([i.default.element,i.default.string])},S.defaultProps={id:void 0,comment:void 0,label:void 0};var j=function(e){var t=e.id,r=e.label,n=e.xlabel,o=m(e,["id","label","xlabel"]),a=O(r),u=O(n);return void 0!==a&&Object.assign(o,{label:a}),void 0!==u&&Object.assign(o,{xlabel:u}),P(t,o),null};j.displayName="Node",j.propTypes={id:i.default.string.isRequired,comment:i.default.string,label:i.default.oneOfType([i.default.element,i.default.string]),xlabel:i.default.oneOfType([i.default.element,i.default.string])},j.defaultProps={comment:void 0,label:void 0,xlabel:void 0};var G=function(e){var t=e.targets,r=e.label,n=m(e,["targets","label"]),o=O(r);return void 0!==o&&Object.assign(n,{label:o}),T(t,n),null};G.displayName="Edge",G.propTypes={targets:i.default.array.isRequired,comment:i.default.string,label:i.default.oneOfType([i.default.element,i.default.string])},G.defaultProps={comment:void 0,label:void 0};var R=function(t){var r=t.children,n=t.id,o=c(),a=e.useContext(w),i=e.useMemo((function(){var e;return n&&null!==(e=a.get(n))&&void 0!==e?e:o}),[o,a,n]);return u.default.createElement(s.Provider,{value:i},r)};R.displayName="ClusterPortal",R.defaultProps={id:void 0},R.propTypes={id:i.default.string};var z=function(){function e(){this.now=Date.now,this.setTimeout=setTimeout,this.clearTimeout=clearTimeout,this.noTimeout=-1,this.isPrimaryRenderer=!1,this.supportsMutation=!1,this.supportsPersistence=!1,this.supportsHydration=!1}return e.prototype.preparePortalMount=function(e){},e.prototype.scheduleTimeout=function(e,t){},e.prototype.cancelTimeout=function(e){},e.prototype.queueMicrotask=function(e){},e.prototype.getPublicInstance=function(e){return e},e.prototype.getRootHostContext=function(e){return{}},e.prototype.getChildHostContext=function(e,t,r){return e},e.prototype.prepareForCommit=function(e){return null},e.prototype.resetAfterCommit=function(e){},e.prototype.createInstance=function(e,t,r,n,o){return e(t)},e.prototype.appendInitialChild=function(e,t){e.appendChild(t)},e.prototype.finalizeInitialChildren=function(e,t,r,n,o){return!1},e.prototype.prepareUpdate=function(e,t,r,n,o,a){return{}},e.prototype.shouldSetTextContent=function(e,t){return!1},e.prototype.shouldDeprioritizeSubtree=function(e,t){return!1},e.prototype.createTextInstance=function(e,t,r,n){return e},e.prototype.scheduleDeferredCallback=function(e,t){},e.prototype.cancelDeferredCallback=function(e){},e.prototype.appendChild=function(e,t){e.appendChild&&e.appendChild(t)},e.prototype.appendChildToContainer=function(e,t){},e.prototype.commitTextUpdate=function(e,t,r){},e.prototype.commitMount=function(e,t,r,n){},e.prototype.commitUpdate=function(e,t,r,n,o,a){},e.prototype.insertBefore=function(e,t,r){},e.prototype.insertInContainerBefore=function(e,t,r){},e.prototype.removeChild=function(e,t){},e.prototype.removeChildFromContainer=function(e,t){},e.prototype.resetTextContent=function(e){},e}(),I=l.default(new z),U=function(){};function q(e,t){return void 0===t&&(t=new Map),e&&(e.id&&t.set(e.id,e),e.subgraphs.forEach((function(e){return q(e,t)}))),t}function B(t,r){var n={container:r};if(I.updateContainer(e.createElement(v.Provider,{value:n},e.createElement(w.Provider,{value:q(r)},e.createElement(d.Provider,{value:null!=r?r:null},r?e.createElement(s.Provider,{value:r},t):t))),I.createContainer({},0,!1,null),null,U),!n.container)throw Error("There are no clusters of container(Subgraph, Digraph, Graph).");return n.container}exports.ClusterPortal=R,exports.DOT=p,exports.Digraph=N,exports.Edge=G,exports.Graph=D,exports.Node=j,exports.Subgraph=S,exports.render=B,exports.renderToDot=function(e,r){return t.toDot(B(e,r))},exports.useContainerCluster=c,exports.useCurrentCluster=f,exports.useDigraph=b,exports.useEdge=T,exports.useGraph=C,exports.useNode=P,exports.useSubgraph=x;
|
package/lib/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{useContext as t,useEffect as r,useMemo as n,isValidElement as o,createElement as i}from"react";import{Digraph as a,Graph as u,Subgraph as l,toDot as p}from"ts-graphviz";import c from"prop-types";import{renderToStaticMarkup as d}from"react-dom/server.js";import s from"react-reconciler";var f=Object.freeze({PORT:"dot-port",TABLE:"dot-table",TR:"dot-tr",TD:"dot-td",FONT:"dot-font",BR:"dot-br",IMG:"dot-img",I:"dot-i",B:"dot-b",U:"dot-u",O:"dot-o",SUB:"dot-sub",SUP:"dot-sup",S:"dot-s",HR:"dot-hr",VR:"dot-vr"}),m=e.createContext(null);function v(){return t(m)}m.displayName="ContainerCluster";var y=e.createContext(null);y.displayName="CurrentCluster";function g(){var e=t(y);if(null===e)throw Error("useCluster must be called within a cluster such as Digraph, Graph, Subgraph.");return e}function h(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}var b=e.createContext(null);function C(){var e=t(b);if(null===e)throw Error("Cannot call useGraphvizContext outside GraphvizContext.\nBasically, you need to use the render function provided by @ts-graphviz/react.");return e}function T(e,t,n){var o=n.edge,i=n.node,a=n.graph;r((function(){e.clear(),e.apply(t)}),[e,t]),r((function(){e.attributes.node.clear(),e.attributes.node.apply(null!=i?i:{})}),[e,i]),r((function(){e.attributes.edge.clear(),e.attributes.edge.apply(null!=o?o:{})}),[e,o]),r((function(){e.attributes.graph.clear(),e.attributes.graph.apply(null!=a?a:{})}),[e,a])}function P(e,t){r((function(){e.comment=t}),[e,t])}function O(e){void 0===e&&(e={});var t=e.id,o=e.comment,i=e.edge,u=e.node,l=e.graph,p=h(e,["id","comment","edge","node","graph"]),c=C(),d=n((function(){var e=new a(t);return c.container=e,e.comment=o,e.apply(p),e.attributes.node.apply(null!=u?u:{}),e.attributes.edge.apply(null!=i?i:{}),e.attributes.graph.apply(null!=l?l:{}),e}),[c,t,o,i,u,l,p]);return P(d,o),T(d,p,{edge:i,node:u,graph:l}),r((function(){return function(){c.container=void 0}}),[c]),d}function x(e){void 0===e&&(e={});var t=e.id,o=e.comment,i=e.edge,a=e.node,l=e.graph,p=h(e,["id","comment","edge","node","graph"]),c=C(),d=n((function(){var e=new u(t);return c.container=e,e.comment=o,e.apply(p),e.attributes.node.apply(null!=a?a:{}),e.attributes.edge.apply(null!=i?i:{}),e.attributes.graph.apply(null!=l?l:{}),e}),[c,t,o,i,a,l,p]);return P(d,o),T(d,p,{edge:i,node:a,graph:l}),r((function(){return function(){c.container=void 0}}),[c]),d}function E(e){void 0===e&&(e={});var t=e.id,o=e.comment,i=e.edge,a=e.node,u=e.graph,p=h(e,["id","comment","edge","node","graph"]),c=C(),d=g(),s=n((function(){var e=new l(t);return null!==d?d.addSubgraph(e):c.container||(c.container=e),e.comment=o,e.apply(p),e.attributes.node.apply(null!=a?a:{}),e.attributes.edge.apply(null!=i?i:{}),e.attributes.graph.apply(null!=u?u:{}),e}),[c,d,t,o,i,a,u,p]);return P(s,o),T(s,p,{edge:i,node:a,graph:u}),r((function(){return function(){d.removeSubgraph(s)}}),[d,s]),s}function w(e,t){r((function(){e.attributes.clear(),e.attributes.apply(t)}),[e,t])}function N(e,t){void 0===t&&(t={});var o=t.comment,i=h(t,["comment"]),a=g();if(e.length<2)throw Error("Edges must have at least 2 targets.");var u=n((function(){var t=a.createEdge(e);return t.comment=o,t.attributes.apply(i),t}),[a,e,o,i]);return P(u,o),w(u,i),r((function(){return function(){a.removeEdge(u)}}),[a,u]),u}function S(e,t){void 0===t&&(t={});var o=t.comment,i=h(t,["comment"]),a=g(),u=n((function(){var t=a.createNode(e);return t.attributes.apply(i),t.comment=o,t}),[a,e,i,o]);return P(u,o),w(u,i),r((function(){return function(){a.removeNode(u)}}),[a,u]),u}function j(e){return n((function(){return function(e){return o(e)?"<"+d(e).replace(/<dot-port>(.+?)<\/dot-port>/gi,"<$1>").replace(/<(\/?)dot-([a-z-]+)/gi,(function(e,t,r){return"<"+t+r.toUpperCase()}))+">":e}(e)}),[e])}b.displayName="GraphvizContext";var D=e.createContext(new Map);function R(){return t(D)}D.displayName="ClusterMap";var G=function(t){var n=t.children,o=t.label,i=h(t,["children","label"]);if(null!==v())throw Error("RootCluster is duplicated.\nUse only one of Digraph and Graph.");var a=j(o);void 0!==a&&Object.assign(i,{label:a});var u=x(i),l=R();return r((function(){void 0!==u.id&&l.set(u.id,u)}),[l,u]),e.createElement(m.Provider,{value:u},e.createElement(y.Provider,{value:u},n))};G.displayName="Graph",G.defaultProps={id:void 0,comment:void 0,label:void 0},G.propTypes={id:c.string,comment:c.string,label:c.oneOfType([c.element,c.string])};var z=function(t){var n=t.children,o=t.label,i=h(t,["children","label"]);if(null!==v())throw Error("RootCluster is duplicated.\nUse only one of Digraph and Graph.");var a=j(o);void 0!==a&&Object.assign(i,{label:a});var u=O(i),l=R();return r((function(){void 0!==u.id&&l.set(u.id,u)}),[l,u]),e.createElement(m.Provider,{value:u},e.createElement(y.Provider,{value:u},n))};z.displayName="Digraph",z.defaultProps={id:void 0,comment:void 0,label:void 0},z.propTypes={id:c.string,comment:c.string,label:c.oneOfType([c.element,c.string])};var I=function(t){var n=t.children,o=t.label,i=h(t,["children","label"]),a=j(o);void 0!==a&&Object.assign(i,{label:a});var u=E(i),l=R();return r((function(){void 0!==u.id&&l.set(u.id,u)}),[u,l]),e.createElement(y.Provider,{value:u},n)};I.displayName="Subgraph",I.propTypes={id:c.string,comment:c.string,label:c.oneOfType([c.element,c.string])},I.defaultProps={id:void 0,comment:void 0,label:void 0};var U=function(e){var t=e.id,r=e.label,n=e.xlabel,o=h(e,["id","label","xlabel"]),i=j(r),a=j(n);return void 0!==i&&Object.assign(o,{label:i}),void 0!==a&&Object.assign(o,{xlabel:a}),S(t,o),null};U.displayName="Node",U.propTypes={id:c.string.isRequired,comment:c.string,label:c.oneOfType([c.element,c.string]),xlabel:c.oneOfType([c.element,c.string])},U.defaultProps={comment:void 0,label:void 0,xlabel:void 0};var M=function(e){var t=e.targets,r=e.label,n=h(e,["targets","label"]),o=j(r);return void 0!==o&&Object.assign(n,{label:o}),N(t,n),null};M.displayName="Edge",M.propTypes={targets:c.array.isRequired,comment:c.string,label:c.oneOfType([c.element,c.string])},M.defaultProps={comment:void 0,label:void 0};var B=function(r){var o=r.children,i=r.id,a=v(),u=t(D),l=n((function(){var e;return i&&null!==(e=u.get(i))&&void 0!==e?e:a}),[a,u,i]);return e.createElement(y.Provider,{value:l},o)};B.displayName="ClusterPortal",B.defaultProps={id:void 0},B.propTypes={id:c.string};var H=s(new(function(){function e(){this.now=Date.now,this.setTimeout=setTimeout,this.clearTimeout=clearTimeout,this.noTimeout=-1,this.isPrimaryRenderer=!1,this.supportsMutation=!1,this.supportsPersistence=!1,this.supportsHydration=!1}return e.prototype.preparePortalMount=function(e){},e.prototype.scheduleTimeout=function(e,t){},e.prototype.cancelTimeout=function(e){},e.prototype.queueMicrotask=function(e){},e.prototype.getPublicInstance=function(e){return e},e.prototype.getRootHostContext=function(e){return{}},e.prototype.getChildHostContext=function(e,t,r){return e},e.prototype.prepareForCommit=function(e){return null},e.prototype.resetAfterCommit=function(e){},e.prototype.createInstance=function(e,t,r,n,o){return e(t)},e.prototype.appendInitialChild=function(e,t){e.appendChild(t)},e.prototype.finalizeInitialChildren=function(e,t,r,n,o){return!1},e.prototype.prepareUpdate=function(e,t,r,n,o,i){return{}},e.prototype.shouldSetTextContent=function(e,t){return!1},e.prototype.shouldDeprioritizeSubtree=function(e,t){return!1},e.prototype.createTextInstance=function(e,t,r,n){return e},e.prototype.scheduleDeferredCallback=function(e,t){},e.prototype.cancelDeferredCallback=function(e){},e.prototype.appendChild=function(e,t){e.appendChild&&e.appendChild(t)},e.prototype.appendChildToContainer=function(e,t){},e.prototype.commitTextUpdate=function(e,t,r){},e.prototype.commitMount=function(e,t,r,n){},e.prototype.commitUpdate=function(e,t,r,n,o,i){},e.prototype.insertBefore=function(e,t,r){},e.prototype.insertInContainerBefore=function(e,t,r){},e.prototype.removeChild=function(e,t){},e.prototype.removeChildFromContainer=function(e,t){},e.prototype.resetTextContent=function(e){},e}())),k=function(){};function q(e,t){return void 0===t&&(t=new Map),e&&(e.id&&t.set(e.id,e),e.subgraphs.forEach((function(e){return q(e,t)}))),t}function F(e,t){var r={container:t};if(H.updateContainer(i(b.Provider,{value:r},i(D.Provider,{value:q(t)},i(m.Provider,{value:null!=t?t:null},t?i(y.Provider,{value:t},e):e))),H.createContainer({},0,!1,null),null,k),!r.container)throw Error("There are no clusters of container(Subgraph, Digraph, Graph).");return r.container}function A(e,t){return p(F(e,t))}export{B as ClusterPortal,f as DOT,z as Digraph,M as Edge,G as Graph,U as Node,I as Subgraph,F as render,A as renderToDot,v as useContainerCluster,g as useCurrentCluster,O as useDigraph,N as useEdge,x as useGraph,S as useNode,E as useSubgraph};
|
package/package.json
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ts-graphviz/react",
|
|
3
|
+
"version": "0.9.1",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"author": "kamiazya <yuki@kamiazya.tech>",
|
|
6
|
+
"description": "Graphviz-dot Renderer for React.",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/ts-graphviz/react.git"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/ts-graphviz/react/issues"
|
|
13
|
+
},
|
|
14
|
+
"funding": {
|
|
15
|
+
"type": "github",
|
|
16
|
+
"url": "https://github.com/sponsors/kamiazya"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"graphviz",
|
|
20
|
+
"dot",
|
|
21
|
+
"react"
|
|
22
|
+
],
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"main": "./lib/index.js",
|
|
27
|
+
"exports": {
|
|
28
|
+
"import": "./lib/index.mjs",
|
|
29
|
+
"default": "./lib/index.js"
|
|
30
|
+
},
|
|
31
|
+
"types": "./lib/index.d.ts",
|
|
32
|
+
"scripts": {
|
|
33
|
+
"example": "ts-node example/example",
|
|
34
|
+
"build": "rollup -c && prettier --write './lib/index.d.ts'",
|
|
35
|
+
"test": "jest",
|
|
36
|
+
"lint": "eslint -c .eslintrc.json --ext ts,tsx src",
|
|
37
|
+
"format": "eslint -c .eslintrc.json --ext ts,tsx src --fix && prettier --write './src/**/*.(ts|tsx)'"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"react": ">=16.8.0 || >=17"
|
|
41
|
+
},
|
|
42
|
+
"dependencies": {
|
|
43
|
+
"prop-types": "^15.7.2",
|
|
44
|
+
"react-dom": "^17.0.2",
|
|
45
|
+
"react-reconciler": "^0.26.2",
|
|
46
|
+
"ts-graphviz": "^0.16.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@testing-library/jest-dom": "^5.12.0",
|
|
50
|
+
"@testing-library/react": "^11.2.7",
|
|
51
|
+
"@testing-library/react-hooks": "^5.1.2",
|
|
52
|
+
"@types/prop-types": "^15.7.3",
|
|
53
|
+
"@types/react": "^17.0.5",
|
|
54
|
+
"@types/react-dom": "^17.0.5",
|
|
55
|
+
"@types/react-reconciler": "^0.26.1",
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "^4.23.0",
|
|
57
|
+
"@typescript-eslint/parser": "^4.23.0",
|
|
58
|
+
"eslint": "^7.26.0",
|
|
59
|
+
"eslint-config-airbnb": "^18.2.1",
|
|
60
|
+
"eslint-config-prettier": "^8.3.0",
|
|
61
|
+
"eslint-plugin-import": "^2.23.1",
|
|
62
|
+
"eslint-plugin-jest": "^24.3.6",
|
|
63
|
+
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
64
|
+
"eslint-plugin-prettier": "^3.4.0",
|
|
65
|
+
"eslint-plugin-react": "^7.23.2",
|
|
66
|
+
"eslint-plugin-react-hooks": "^4.2.0",
|
|
67
|
+
"jest": "^26.6.3",
|
|
68
|
+
"jest-graphviz": "^0.4.0",
|
|
69
|
+
"prettier": "^2.3.0",
|
|
70
|
+
"react": "^17.0.2",
|
|
71
|
+
"react-test-renderer": "^17.0.2",
|
|
72
|
+
"rollup": "^2.48.0",
|
|
73
|
+
"rollup-plugin-delete": "^2.0.0",
|
|
74
|
+
"rollup-plugin-dts": "^3.0.1",
|
|
75
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
76
|
+
"rollup-plugin-typescript2": "^0.30.0",
|
|
77
|
+
"ts-jest": "^26.5.6",
|
|
78
|
+
"ts-node": "^9.1.1",
|
|
79
|
+
"typescript": "^4.2.4"
|
|
80
|
+
}
|
|
81
|
+
}
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import typescript from 'rollup-plugin-typescript2';
|
|
2
|
+
import del from 'rollup-plugin-delete';
|
|
3
|
+
import dts from 'rollup-plugin-dts';
|
|
4
|
+
import { terser } from 'rollup-plugin-terser';
|
|
5
|
+
|
|
6
|
+
/** @type {import('rollup').RollupOptions[]} */
|
|
7
|
+
const options = [
|
|
8
|
+
{
|
|
9
|
+
input: './src/index.ts',
|
|
10
|
+
plugins: [
|
|
11
|
+
typescript({
|
|
12
|
+
tsconfigOverride: {
|
|
13
|
+
compilerOptions: {
|
|
14
|
+
module: 'ESNext',
|
|
15
|
+
declaration: true,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
}),
|
|
19
|
+
terser({
|
|
20
|
+
format: {
|
|
21
|
+
comments: false,
|
|
22
|
+
},
|
|
23
|
+
}),
|
|
24
|
+
],
|
|
25
|
+
external: ['react', 'react-dom/server.js', 'ts-graphviz', 'prop-types', 'react-reconciler'],
|
|
26
|
+
output: [
|
|
27
|
+
{
|
|
28
|
+
format: 'cjs',
|
|
29
|
+
file: './lib/index.js',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
format: 'esm',
|
|
33
|
+
file: './lib/index.mjs',
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
input: './lib/index.d.ts',
|
|
39
|
+
plugins: [
|
|
40
|
+
del({
|
|
41
|
+
targets: ['lib/**/*.d.ts', '!lib/index.d.ts'],
|
|
42
|
+
hook: 'buildEnd',
|
|
43
|
+
}),
|
|
44
|
+
dts(),
|
|
45
|
+
],
|
|
46
|
+
output: [
|
|
47
|
+
{
|
|
48
|
+
format: 'esm',
|
|
49
|
+
file: './lib/index.d.ts',
|
|
50
|
+
},
|
|
51
|
+
],
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
export default options;
|