@hpcc-js/react 3.4.9 → 3.4.11
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/LICENSE +43 -43
- package/dist/index.js +41 -41
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +4 -4
- package/src/ImageChar.tsx +42 -42
- package/src/__package__.ts +3 -3
- package/src/edge.tsx +45 -45
- package/src/icon.tsx +95 -95
- package/src/image.tsx +25 -25
- package/src/index.ts +17 -17
- package/src/preact-shim.ts +4 -4
- package/src/render.ts +78 -78
- package/src/shape.tsx +138 -138
- package/src/span.tsx +9 -9
- package/src/subgraph.tsx +45 -45
- package/src/text.tsx +257 -257
- package/src/vertex.tsx +119 -119
- package/src/vertex2.tsx +100 -100
- package/src/vertex3.tsx +238 -238
- package/src/vertex4.tsx +308 -308
package/src/vertex.tsx
CHANGED
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
import * as PReact from "./preact-shim.ts";
|
|
2
|
-
import { Icon, IconProps } from "./icon.tsx";
|
|
3
|
-
import { TextBox } from "./text.tsx";
|
|
4
|
-
|
|
5
|
-
export interface AnnotationsProps {
|
|
6
|
-
x: number;
|
|
7
|
-
y: number;
|
|
8
|
-
annotationIDs: string[];
|
|
9
|
-
stepSize?: number;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export const Annotations: PReact.FunctionComponent<AnnotationsProps> = ({
|
|
13
|
-
x,
|
|
14
|
-
y,
|
|
15
|
-
annotationIDs = [],
|
|
16
|
-
stepSize = -16
|
|
17
|
-
}) => {
|
|
18
|
-
const IconComponents = annotationIDs.map((id, i) => <g
|
|
19
|
-
key={id}
|
|
20
|
-
transform={`translate(${x + i * stepSize} ${y})`}
|
|
21
|
-
>
|
|
22
|
-
<use
|
|
23
|
-
xlinkHref={"#" + id}
|
|
24
|
-
/>
|
|
25
|
-
</g>
|
|
26
|
-
);
|
|
27
|
-
return <>{IconComponents}</>;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export interface VertexProps {
|
|
31
|
-
id: string | number;
|
|
32
|
-
origData?: any;
|
|
33
|
-
centroid?: boolean;
|
|
34
|
-
categoryID?: string;
|
|
35
|
-
text: string;
|
|
36
|
-
textHeight?: number;
|
|
37
|
-
textPadding?: number;
|
|
38
|
-
icon?: IconProps;
|
|
39
|
-
annotationsHeight?: number;
|
|
40
|
-
annotationIDs?: string[];
|
|
41
|
-
textFill?: string;
|
|
42
|
-
textboxFill?: string;
|
|
43
|
-
textboxStroke?: string;
|
|
44
|
-
textFontFamily?: string;
|
|
45
|
-
onSizeUpdate?: (size: { width: number, height: number }) => void;
|
|
46
|
-
showLabel?: boolean;
|
|
47
|
-
scale?: number
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export const Vertex: React.FunctionComponent<VertexProps> = ({
|
|
51
|
-
categoryID = "",
|
|
52
|
-
text = "",
|
|
53
|
-
textHeight = 12,
|
|
54
|
-
textPadding = 4,
|
|
55
|
-
icon = {} as IconProps,
|
|
56
|
-
annotationsHeight = 12,
|
|
57
|
-
annotationIDs = [],
|
|
58
|
-
textFill,
|
|
59
|
-
textboxFill,
|
|
60
|
-
textboxStroke,
|
|
61
|
-
textFontFamily,
|
|
62
|
-
onSizeUpdate,
|
|
63
|
-
showLabel = true,
|
|
64
|
-
scale = 1
|
|
65
|
-
}) => {
|
|
66
|
-
icon = {
|
|
67
|
-
imageChar: "fa-question",
|
|
68
|
-
height: 32,
|
|
69
|
-
fill: "transparent",
|
|
70
|
-
...icon
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
const [textBoxWidth, setTextBoxWidthUpdate] = PReact.useState(0);
|
|
74
|
-
const [textBoxHeight, setTextBoxHeightUpdate] = PReact.useState(0);
|
|
75
|
-
|
|
76
|
-
PReact.useEffect(() => {
|
|
77
|
-
if (onSizeUpdate) {
|
|
78
|
-
onSizeUpdate({ width: 0, height: 0 });
|
|
79
|
-
}
|
|
80
|
-
}, [textBoxWidth, textBoxHeight, onSizeUpdate]);
|
|
81
|
-
|
|
82
|
-
let width = textBoxWidth;
|
|
83
|
-
width += 4;
|
|
84
|
-
let offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
|
|
85
|
-
const textboxOffsetY = icon.height / 3 + textBoxHeight / 2 + textPadding;
|
|
86
|
-
let annotationOffsetY = icon.height / 3 + textBoxHeight + textPadding + annotationsHeight / 3;
|
|
87
|
-
if (!showLabel) {
|
|
88
|
-
offsetY += (textHeight + 8) / 2;
|
|
89
|
-
annotationOffsetY -= textBoxHeight + textPadding;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const onTextBoxSizeUpdate = PReact.useCallback(size => {
|
|
93
|
-
setTextBoxWidthUpdate(size.width);
|
|
94
|
-
setTextBoxHeightUpdate(size.height);
|
|
95
|
-
}, []);
|
|
96
|
-
|
|
97
|
-
const label = showLabel ? <g transform={`translate(0 ${textboxOffsetY})`}>
|
|
98
|
-
<TextBox
|
|
99
|
-
text={text}
|
|
100
|
-
height={textHeight}
|
|
101
|
-
padding={textPadding}
|
|
102
|
-
onSizeUpdate={onTextBoxSizeUpdate}
|
|
103
|
-
textFill={textFill}
|
|
104
|
-
fill={textboxFill}
|
|
105
|
-
stroke={textboxStroke}
|
|
106
|
-
fontFamily={textFontFamily}
|
|
107
|
-
/>
|
|
108
|
-
</g> : undefined;
|
|
109
|
-
return categoryID ?
|
|
110
|
-
<g transform={`translate(0 ${offsetY}) scale(${scale})`}>
|
|
111
|
-
<use xlinkHref={"#" + categoryID} />
|
|
112
|
-
{label}
|
|
113
|
-
<Annotations x={width / 2} y={annotationOffsetY} annotationIDs={annotationIDs} />
|
|
114
|
-
</g> :
|
|
115
|
-
<g transform={`translate(0 ${offsetY}) scale(${scale})`}>
|
|
116
|
-
<Icon {...icon} />
|
|
117
|
-
{label}
|
|
118
|
-
</g>;
|
|
119
|
-
};
|
|
1
|
+
import * as PReact from "./preact-shim.ts";
|
|
2
|
+
import { Icon, IconProps } from "./icon.tsx";
|
|
3
|
+
import { TextBox } from "./text.tsx";
|
|
4
|
+
|
|
5
|
+
export interface AnnotationsProps {
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
annotationIDs: string[];
|
|
9
|
+
stepSize?: number;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const Annotations: PReact.FunctionComponent<AnnotationsProps> = ({
|
|
13
|
+
x,
|
|
14
|
+
y,
|
|
15
|
+
annotationIDs = [],
|
|
16
|
+
stepSize = -16
|
|
17
|
+
}) => {
|
|
18
|
+
const IconComponents = annotationIDs.map((id, i) => <g
|
|
19
|
+
key={id}
|
|
20
|
+
transform={`translate(${x + i * stepSize} ${y})`}
|
|
21
|
+
>
|
|
22
|
+
<use
|
|
23
|
+
xlinkHref={"#" + id}
|
|
24
|
+
/>
|
|
25
|
+
</g>
|
|
26
|
+
);
|
|
27
|
+
return <>{IconComponents}</>;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export interface VertexProps {
|
|
31
|
+
id: string | number;
|
|
32
|
+
origData?: any;
|
|
33
|
+
centroid?: boolean;
|
|
34
|
+
categoryID?: string;
|
|
35
|
+
text: string;
|
|
36
|
+
textHeight?: number;
|
|
37
|
+
textPadding?: number;
|
|
38
|
+
icon?: IconProps;
|
|
39
|
+
annotationsHeight?: number;
|
|
40
|
+
annotationIDs?: string[];
|
|
41
|
+
textFill?: string;
|
|
42
|
+
textboxFill?: string;
|
|
43
|
+
textboxStroke?: string;
|
|
44
|
+
textFontFamily?: string;
|
|
45
|
+
onSizeUpdate?: (size: { width: number, height: number }) => void;
|
|
46
|
+
showLabel?: boolean;
|
|
47
|
+
scale?: number
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export const Vertex: React.FunctionComponent<VertexProps> = ({
|
|
51
|
+
categoryID = "",
|
|
52
|
+
text = "",
|
|
53
|
+
textHeight = 12,
|
|
54
|
+
textPadding = 4,
|
|
55
|
+
icon = {} as IconProps,
|
|
56
|
+
annotationsHeight = 12,
|
|
57
|
+
annotationIDs = [],
|
|
58
|
+
textFill,
|
|
59
|
+
textboxFill,
|
|
60
|
+
textboxStroke,
|
|
61
|
+
textFontFamily,
|
|
62
|
+
onSizeUpdate,
|
|
63
|
+
showLabel = true,
|
|
64
|
+
scale = 1
|
|
65
|
+
}) => {
|
|
66
|
+
icon = {
|
|
67
|
+
imageChar: "fa-question",
|
|
68
|
+
height: 32,
|
|
69
|
+
fill: "transparent",
|
|
70
|
+
...icon
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const [textBoxWidth, setTextBoxWidthUpdate] = PReact.useState(0);
|
|
74
|
+
const [textBoxHeight, setTextBoxHeightUpdate] = PReact.useState(0);
|
|
75
|
+
|
|
76
|
+
PReact.useEffect(() => {
|
|
77
|
+
if (onSizeUpdate) {
|
|
78
|
+
onSizeUpdate({ width: 0, height: 0 });
|
|
79
|
+
}
|
|
80
|
+
}, [textBoxWidth, textBoxHeight, onSizeUpdate]);
|
|
81
|
+
|
|
82
|
+
let width = textBoxWidth;
|
|
83
|
+
width += 4;
|
|
84
|
+
let offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
|
|
85
|
+
const textboxOffsetY = icon.height / 3 + textBoxHeight / 2 + textPadding;
|
|
86
|
+
let annotationOffsetY = icon.height / 3 + textBoxHeight + textPadding + annotationsHeight / 3;
|
|
87
|
+
if (!showLabel) {
|
|
88
|
+
offsetY += (textHeight + 8) / 2;
|
|
89
|
+
annotationOffsetY -= textBoxHeight + textPadding;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const onTextBoxSizeUpdate = PReact.useCallback(size => {
|
|
93
|
+
setTextBoxWidthUpdate(size.width);
|
|
94
|
+
setTextBoxHeightUpdate(size.height);
|
|
95
|
+
}, []);
|
|
96
|
+
|
|
97
|
+
const label = showLabel ? <g transform={`translate(0 ${textboxOffsetY})`}>
|
|
98
|
+
<TextBox
|
|
99
|
+
text={text}
|
|
100
|
+
height={textHeight}
|
|
101
|
+
padding={textPadding}
|
|
102
|
+
onSizeUpdate={onTextBoxSizeUpdate}
|
|
103
|
+
textFill={textFill}
|
|
104
|
+
fill={textboxFill}
|
|
105
|
+
stroke={textboxStroke}
|
|
106
|
+
fontFamily={textFontFamily}
|
|
107
|
+
/>
|
|
108
|
+
</g> : undefined;
|
|
109
|
+
return categoryID ?
|
|
110
|
+
<g transform={`translate(0 ${offsetY}) scale(${scale})`}>
|
|
111
|
+
<use xlinkHref={"#" + categoryID} />
|
|
112
|
+
{label}
|
|
113
|
+
<Annotations x={width / 2} y={annotationOffsetY} annotationIDs={annotationIDs} />
|
|
114
|
+
</g> :
|
|
115
|
+
<g transform={`translate(0 ${offsetY}) scale(${scale})`}>
|
|
116
|
+
<Icon {...icon} />
|
|
117
|
+
{label}
|
|
118
|
+
</g>;
|
|
119
|
+
};
|
package/src/vertex2.tsx
CHANGED
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
import * as PReact from "./preact-shim.ts";
|
|
2
|
-
import { Utility } from "@hpcc-js/common";
|
|
3
|
-
import { Icon, IconProps } from "./icon.tsx";
|
|
4
|
-
import { TextBox } from "./text.tsx";
|
|
5
|
-
import { Annotations, VertexProps } from "./vertex.tsx";
|
|
6
|
-
|
|
7
|
-
export const Vertex2: PReact.FunctionComponent<VertexProps> = ({
|
|
8
|
-
categoryID = "",
|
|
9
|
-
text = "",
|
|
10
|
-
textHeight = 12,
|
|
11
|
-
textPadding = 4,
|
|
12
|
-
icon = {} as IconProps,
|
|
13
|
-
textFill = "black",
|
|
14
|
-
textboxFill = "white",
|
|
15
|
-
textboxStroke = "black",
|
|
16
|
-
textFontFamily,
|
|
17
|
-
annotationsHeight = 12,
|
|
18
|
-
annotationIDs = []
|
|
19
|
-
}) => {
|
|
20
|
-
icon = {
|
|
21
|
-
imageChar: "fa-question",
|
|
22
|
-
imageCharFill: "white",
|
|
23
|
-
height: 32,
|
|
24
|
-
fill: "black",
|
|
25
|
-
shape: "square",
|
|
26
|
-
...icon
|
|
27
|
-
};
|
|
28
|
-
const textBoxHeight = textHeight + textPadding * 2;
|
|
29
|
-
const { width } = PReact.useMemo(() => {
|
|
30
|
-
return Utility.textSize(text, textFontFamily, textHeight, false);
|
|
31
|
-
}, [text, textFontFamily, textHeight]);
|
|
32
|
-
|
|
33
|
-
const stepSize = annotationsHeight;
|
|
34
|
-
const textboxStrokeWidth = 1;
|
|
35
|
-
|
|
36
|
-
const halfTextboxHeight = textBoxHeight / 2;
|
|
37
|
-
|
|
38
|
-
const offsetX = 0;
|
|
39
|
-
const offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
|
|
40
|
-
const iconOffsetX = - icon.height / 2;
|
|
41
|
-
const iconOffsetY = 0;
|
|
42
|
-
const textboxOffsetX = Math.ceil((width / 2) + textPadding);
|
|
43
|
-
const textboxOffsetY = halfTextboxHeight - (icon.height / 2);
|
|
44
|
-
const annotationOffsetX = stepSize / 2;
|
|
45
|
-
const annotationOffsetY = halfTextboxHeight;
|
|
46
|
-
return categoryID ?
|
|
47
|
-
<g
|
|
48
|
-
transform={`translate(${offsetX} ${offsetY})`}
|
|
49
|
-
>
|
|
50
|
-
<g
|
|
51
|
-
transform={`translate(${iconOffsetX} ${iconOffsetY})`}
|
|
52
|
-
>
|
|
53
|
-
<use
|
|
54
|
-
xlinkHref={"#" + categoryID}
|
|
55
|
-
/>
|
|
56
|
-
</g>
|
|
57
|
-
<g
|
|
58
|
-
transform={`translate(${textboxOffsetX} ${textboxOffsetY})`}
|
|
59
|
-
>
|
|
60
|
-
<TextBox
|
|
61
|
-
text={text}
|
|
62
|
-
height={textHeight}
|
|
63
|
-
padding={textPadding}
|
|
64
|
-
strokeWidth={textboxStrokeWidth}
|
|
65
|
-
stroke={textboxStroke}
|
|
66
|
-
fill={textboxFill}
|
|
67
|
-
textFill={textFill}
|
|
68
|
-
fontFamily={textFontFamily}
|
|
69
|
-
/>
|
|
70
|
-
</g>
|
|
71
|
-
<Annotations
|
|
72
|
-
x={annotationOffsetX}
|
|
73
|
-
y={annotationOffsetY}
|
|
74
|
-
annotationIDs={annotationIDs}
|
|
75
|
-
stepSize={stepSize}
|
|
76
|
-
/>
|
|
77
|
-
</g>
|
|
78
|
-
:
|
|
79
|
-
<>
|
|
80
|
-
<g
|
|
81
|
-
transform={`translate(${iconOffsetX} ${iconOffsetY})scale(1.0002)`}
|
|
82
|
-
>
|
|
83
|
-
<Icon
|
|
84
|
-
{...icon}
|
|
85
|
-
shape="square"
|
|
86
|
-
/>
|
|
87
|
-
</g>
|
|
88
|
-
<g
|
|
89
|
-
transform={`translate(${textboxOffsetX} ${textboxOffsetY})scale(1.0002)`}
|
|
90
|
-
>
|
|
91
|
-
<TextBox
|
|
92
|
-
text={text}
|
|
93
|
-
height={textHeight}
|
|
94
|
-
padding={textPadding}
|
|
95
|
-
stroke={textboxStroke}
|
|
96
|
-
fill={textboxFill}
|
|
97
|
-
/>
|
|
98
|
-
</g>
|
|
99
|
-
</>;
|
|
100
|
-
};
|
|
1
|
+
import * as PReact from "./preact-shim.ts";
|
|
2
|
+
import { Utility } from "@hpcc-js/common";
|
|
3
|
+
import { Icon, IconProps } from "./icon.tsx";
|
|
4
|
+
import { TextBox } from "./text.tsx";
|
|
5
|
+
import { Annotations, VertexProps } from "./vertex.tsx";
|
|
6
|
+
|
|
7
|
+
export const Vertex2: PReact.FunctionComponent<VertexProps> = ({
|
|
8
|
+
categoryID = "",
|
|
9
|
+
text = "",
|
|
10
|
+
textHeight = 12,
|
|
11
|
+
textPadding = 4,
|
|
12
|
+
icon = {} as IconProps,
|
|
13
|
+
textFill = "black",
|
|
14
|
+
textboxFill = "white",
|
|
15
|
+
textboxStroke = "black",
|
|
16
|
+
textFontFamily,
|
|
17
|
+
annotationsHeight = 12,
|
|
18
|
+
annotationIDs = []
|
|
19
|
+
}) => {
|
|
20
|
+
icon = {
|
|
21
|
+
imageChar: "fa-question",
|
|
22
|
+
imageCharFill: "white",
|
|
23
|
+
height: 32,
|
|
24
|
+
fill: "black",
|
|
25
|
+
shape: "square",
|
|
26
|
+
...icon
|
|
27
|
+
};
|
|
28
|
+
const textBoxHeight = textHeight + textPadding * 2;
|
|
29
|
+
const { width } = PReact.useMemo(() => {
|
|
30
|
+
return Utility.textSize(text, textFontFamily, textHeight, false);
|
|
31
|
+
}, [text, textFontFamily, textHeight]);
|
|
32
|
+
|
|
33
|
+
const stepSize = annotationsHeight;
|
|
34
|
+
const textboxStrokeWidth = 1;
|
|
35
|
+
|
|
36
|
+
const halfTextboxHeight = textBoxHeight / 2;
|
|
37
|
+
|
|
38
|
+
const offsetX = 0;
|
|
39
|
+
const offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
|
|
40
|
+
const iconOffsetX = - icon.height / 2;
|
|
41
|
+
const iconOffsetY = 0;
|
|
42
|
+
const textboxOffsetX = Math.ceil((width / 2) + textPadding);
|
|
43
|
+
const textboxOffsetY = halfTextboxHeight - (icon.height / 2);
|
|
44
|
+
const annotationOffsetX = stepSize / 2;
|
|
45
|
+
const annotationOffsetY = halfTextboxHeight;
|
|
46
|
+
return categoryID ?
|
|
47
|
+
<g
|
|
48
|
+
transform={`translate(${offsetX} ${offsetY})`}
|
|
49
|
+
>
|
|
50
|
+
<g
|
|
51
|
+
transform={`translate(${iconOffsetX} ${iconOffsetY})`}
|
|
52
|
+
>
|
|
53
|
+
<use
|
|
54
|
+
xlinkHref={"#" + categoryID}
|
|
55
|
+
/>
|
|
56
|
+
</g>
|
|
57
|
+
<g
|
|
58
|
+
transform={`translate(${textboxOffsetX} ${textboxOffsetY})`}
|
|
59
|
+
>
|
|
60
|
+
<TextBox
|
|
61
|
+
text={text}
|
|
62
|
+
height={textHeight}
|
|
63
|
+
padding={textPadding}
|
|
64
|
+
strokeWidth={textboxStrokeWidth}
|
|
65
|
+
stroke={textboxStroke}
|
|
66
|
+
fill={textboxFill}
|
|
67
|
+
textFill={textFill}
|
|
68
|
+
fontFamily={textFontFamily}
|
|
69
|
+
/>
|
|
70
|
+
</g>
|
|
71
|
+
<Annotations
|
|
72
|
+
x={annotationOffsetX}
|
|
73
|
+
y={annotationOffsetY}
|
|
74
|
+
annotationIDs={annotationIDs}
|
|
75
|
+
stepSize={stepSize}
|
|
76
|
+
/>
|
|
77
|
+
</g>
|
|
78
|
+
:
|
|
79
|
+
<>
|
|
80
|
+
<g
|
|
81
|
+
transform={`translate(${iconOffsetX} ${iconOffsetY})scale(1.0002)`}
|
|
82
|
+
>
|
|
83
|
+
<Icon
|
|
84
|
+
{...icon}
|
|
85
|
+
shape="square"
|
|
86
|
+
/>
|
|
87
|
+
</g>
|
|
88
|
+
<g
|
|
89
|
+
transform={`translate(${textboxOffsetX} ${textboxOffsetY})scale(1.0002)`}
|
|
90
|
+
>
|
|
91
|
+
<TextBox
|
|
92
|
+
text={text}
|
|
93
|
+
height={textHeight}
|
|
94
|
+
padding={textPadding}
|
|
95
|
+
stroke={textboxStroke}
|
|
96
|
+
fill={textboxFill}
|
|
97
|
+
/>
|
|
98
|
+
</g>
|
|
99
|
+
</>;
|
|
100
|
+
};
|