Skip to content
This repository was archived by the owner on Mar 17, 2024. It is now read-only.

Commit 93a3acf

Browse files
kamiazyakamiazya
authored
Merge pull request #62 from ts-graphviz/html-like
Html like labels
2 parents d4af9b1 + 04807cb commit 93a3acf

File tree

8 files changed

+170
-10
lines changed

8 files changed

+170
-10
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"import/extensions": "off",
4141
"import/prefer-default-export": "off",
4242
"react/forbid-prop-types": "off",
43+
"react/jsx-wrap-multilines": "off",
4344
"react/prop-types": [
4445
2,
4546
{

‎README.md‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,28 @@ $ npm install @ts-graphviz/react
2323

2424
```tsx
2525
import React, { FC } from 'react';
26-
import { Digraph, Node, Subgraph, renderToDot, Edge } from '@ts-graphviz/react';
26+
import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '@ts-graphviz/react';
2727

2828
const Example: FC = () => (
2929
<Digraph dpi={150}>
30-
<Node id="nodeA" />
30+
<Node
31+
id="nodeA"
32+
shape="none"
33+
label={
34+
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
35+
<DOT.TR>
36+
<DOT.TD>left</DOT.TD>
37+
<DOT.TD PORT="m">middle</DOT.TD>
38+
<DOT.TD PORT="r">right</DOT.TD>
39+
</DOT.TR>
40+
</DOT.TABLE>
41+
}
42+
/>
3143

3244
<Subgraph id="cluster" label="Cluster" labeljust="l">
3345
<Node id="nodeB" label="This is label for nodeB." />
3446
</Subgraph>
35-
<Edge targets={['nodeA', 'nodeB']} comment="Edge from node A to B" label={<b>A to B</b>} />
47+
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
3648
</Digraph>
3749
);
3850

@@ -46,7 +58,10 @@ console.log(dot);
4658
```dot
4759
digraph {
4860
dpi = 150;
49-
"nodeA";
61+
"nodeA" [
62+
shape = "none",
63+
label = <<table BORDER="0" CELLBORDER="1" CELLSPACING="0"><tr><td>left</td><td PORT="m">middle</td><td PORT="r">right</td></tr></table>>,
64+
];
5065
"nodeB";
5166
subgraph "cluster" {
5267
labeljust = "l";
@@ -56,7 +71,7 @@ digraph {
5671
];
5772
}
5873
// Edge from node A to B
59-
"nodeA" -> "nodeB" [
74+
"nodeB" -> "nodeA":"m" [
6075
label = <<b>A to B</b>>,
6176
];
6277
}

‎example/example.png‎

-936 Bytes
Loading

‎example/example.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import React, { FC } from 'react';
2-
import { Digraph, Node, Subgraph, renderToDot, Edge } from '../src';
2+
import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '../src';
33

44
const Example: FC = () => (
55
<Digraph dpi={150}>
6-
<Node id="nodeA" />
6+
<Node
7+
id="nodeA"
8+
shape="none"
9+
label={
10+
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
11+
<DOT.TR>
12+
<DOT.TD>left</DOT.TD>
13+
<DOT.TD PORT="m">middle</DOT.TD>
14+
<DOT.TD PORT="r">right</DOT.TD>
15+
</DOT.TR>
16+
</DOT.TABLE>
17+
}
18+
/>
719

820
<Subgraph id="cluster" label="Cluster" labeljust="l">
921
<Node id="nodeB" label="This is label for nodeB." />
1022
</Subgraph>
11-
<Edge targets={['nodeA', 'nodeB']} comment="Edge from node A to B" label={<b>A to B</b>} />
23+
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
1224
</Digraph>
1325
);
1426

‎src/components/HtmlLike.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/* eslint-disable no-undef */
2+
import { AttributesValue } from 'ts-graphviz';
3+
4+
export type TableProps = {
5+
ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT'; // "CENTER|LEFT|RIGHT"
6+
BGCOLOR?: AttributesValue; // "color"
7+
BORDER?: AttributesValue; // "value"
8+
CELLBORDER?: AttributesValue; // "value"
9+
CELLPADDING?: AttributesValue; // "value"
10+
CELLSPACING?: AttributesValue; // "value"
11+
COLOR?: AttributesValue; // "color"
12+
COLUMNS?: AttributesValue; // "value"
13+
FIXEDSIZE?: true; // "FALSE|TRUE"
14+
GRADIENTANGLE?: AttributesValue; // "value"
15+
HEIGHT?: AttributesValue; // "value"
16+
HREF?: AttributesValue; // "value"
17+
ID?: AttributesValue; // "value"
18+
PORT?: AttributesValue; // "portName"
19+
ROWS?: AttributesValue; // "value"
20+
SIDES?: AttributesValue; // "value"
21+
STYLE?: AttributesValue; // "value"
22+
TARGET?: AttributesValue; // "value"
23+
TITLE?: AttributesValue; // "value"
24+
TOOLTIP?: AttributesValue; // "value"
25+
VALIGN?: 'MIDDLE' | 'BOTTOM' | 'TOP'; // "MIDDLE|BOTTOM|TOP"
26+
WIDTH?: AttributesValue; // "value"
27+
};
28+
29+
type NoAttributes = {};
30+
31+
export type TrProps = NoAttributes;
32+
33+
export type TdProps = {
34+
ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT' | 'TEXT'; // "CENTER|LEFT|RIGHT|TEXT"
35+
BALIGN?: 'CENTER' | 'LEFT' | 'RIGHT'; // "CENTER|LEFT|RIGHT"
36+
BGCOLOR?: AttributesValue; // "color"
37+
BORDER?: AttributesValue; // "value"
38+
CELLPADDING?: AttributesValue; // "value"
39+
CELLSPACING?: AttributesValue; // "value"
40+
COLOR?: AttributesValue; // "color"
41+
COLSPAN?: AttributesValue; // "value"
42+
FIXEDSIZE?: boolean; // "FALSE|TRUE"
43+
GRADIENTANGLE?: AttributesValue; // "value"
44+
HEIGHT?: AttributesValue; // "value"
45+
HREF?: AttributesValue; // "value"
46+
ID?: AttributesValue; // "value"
47+
PORT?: AttributesValue; // "portName"
48+
ROWSPAN?: AttributesValue; // "value"
49+
SIDES?: AttributesValue; // "value"
50+
STYLE?: AttributesValue; // "value"
51+
TARGET?: AttributesValue; // "value"
52+
TITLE?: AttributesValue; // "value"
53+
TOOLTIP?: AttributesValue; // "value"
54+
VALIGN?: 'MIDDLE' | 'BOTTOM' | 'TOP'; // "MIDDLE|BOTTOM|TOP"
55+
WIDTH?: AttributesValue; // "value"
56+
};
57+
58+
export type FontProps = {
59+
color?: AttributesValue; // "color"
60+
face?: AttributesValue; // "fontname"
61+
point?: AttributesValue; // SIZE="value"
62+
};
63+
64+
export type BrProps = {
65+
ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT'; // "CENTER|LEFT|RIGHT"
66+
};
67+
68+
export type ImgProps = {
69+
SCALE?: boolean | 'WIDTH' | 'HEIGHT' | 'BOTH'; // "FALSE|TRUE|WIDTH|HEIGHT|BOTH"
70+
SRC?: AttributesValue; // "value"
71+
};
72+
73+
export type IProps = NoAttributes;
74+
75+
export type BProps = NoAttributes;
76+
77+
export type UProps = NoAttributes;
78+
79+
export type OProps = NoAttributes;
80+
export type SubProps = NoAttributes;
81+
82+
export type SupProps = NoAttributes;
83+
export type SProps = NoAttributes;
84+
export type HrProps = NoAttributes;
85+
export type VrProps = NoAttributes;
86+
87+
export enum DOT {
88+
PORT = 'dot-port',
89+
TABLE = 'dot-table',
90+
TR = 'dot-tr',
91+
TD = 'dot-td',
92+
FONT = 'dot-font',
93+
BR = 'dot-br',
94+
IMG = 'dot-img',
95+
I = 'dot-i',
96+
B = 'dot-b',
97+
U = 'dot-u',
98+
O = 'dot-o',
99+
SUB = 'dot-sub',
100+
SUP = 'dot-sup',
101+
S = 'dot-s',
102+
HR = 'dot-hr',
103+
VR = 'dot-vr',
104+
}
105+
106+
declare global {
107+
// eslint-disable-next-line @typescript-eslint/no-namespace
108+
namespace JSX {
109+
interface IntrinsicElements {
110+
[DOT.PORT]: { children: string };
111+
[DOT.TABLE]: React.PropsWithChildren<TableProps>;
112+
[DOT.TR]: React.PropsWithChildren<TrProps>;
113+
[DOT.TD]: React.PropsWithChildren<TdProps>;
114+
[DOT.FONT]: React.PropsWithChildren<FontProps>;
115+
[DOT.BR]: BrProps;
116+
[DOT.IMG]: ImgProps;
117+
[DOT.I]: React.PropsWithChildren<IProps>;
118+
[DOT.B]: React.PropsWithChildren<BProps>;
119+
[DOT.U]: React.PropsWithChildren<UProps>;
120+
[DOT.O]: React.PropsWithChildren<OProps>;
121+
[DOT.SUB]: React.PropsWithChildren<SubProps>;
122+
[DOT.SUP]: React.PropsWithChildren<SupProps>;
123+
[DOT.S]: React.PropsWithChildren<SProps>;
124+
[DOT.HR]: HrProps;
125+
[DOT.VR]: VrProps;
126+
}
127+
}
128+
}

‎src/hooks/use-rendered-id.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ export function useRenderedID(id?: ReactElement | string): string | undefined {
77
return id;
88
}
99
if (isValidElement(id)) {
10-
return `<${renderToStaticMarkup(id)}>`;
10+
const htmlLike = renderToStaticMarkup(id)
11+
.replace(/<dot-port>(.+?)<\/dot-port>/gi, '<$1>')
12+
.replace(/<dot-/gi, '<')
13+
.replace(/<\/dot-/gi, '</');
14+
return `<${htmlLike}>`;
1115
}
1216
return undefined;
1317
}, [id]);

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export * from './hooks/use-edge';
88
export * from './hooks/use-node';
99
export * from './hooks/use-rendered-id';
1010
export * from './hooks/use-root-cluster';
11+
export * from './components/HtmlLike';
1112
export * from './components/Graph';
1213
export * from './components/Digraph';
1314
export * from './components/Subgraph';

‎tsconfig.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"compilerOptions": {
33
"target": "ES5",
4-
"module": "ES2015",
54
"jsx": "react",
65
"strict": true,
76
"rootDir": "src",

0 commit comments

Comments
 (0)