@hpcc-js/react 3.1.1 → 3.2.0
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/dist/index.js +1689 -2
- package/dist/index.js.map +1 -7
- package/dist/index.umd.cjs +3 -0
- package/dist/index.umd.cjs.map +1 -0
- package/package.json +13 -10
- package/src/ImageChar.tsx +4 -3
- package/src/edge.tsx +2 -2
- package/src/icon.tsx +3 -3
- package/src/image.tsx +3 -3
- package/src/index.ts +1 -4
- package/src/preact-shim.ts +4 -0
- package/src/render.ts +7 -10
- package/src/shape.tsx +5 -5
- package/src/span.tsx +2 -2
- package/src/subgraph.tsx +2 -2
- package/src/text.tsx +24 -23
- package/src/vertex.tsx +10 -9
- package/src/vertex2.tsx +5 -4
- package/src/vertex3.tsx +5 -4
- package/src/vertex4.tsx +5 -4
- package/types/ImageChar.d.ts +2 -2
- package/types/edge.d.ts +2 -2
- package/types/icon.d.ts +3 -3
- package/types/image.d.ts +2 -2
- package/types/index.d.ts +1 -2
- package/types/preact-shim.d.ts +4 -0
- package/types/render.d.ts +7 -9
- package/types/shape.d.ts +5 -5
- package/types/span.d.ts +2 -2
- package/types/subgraph.d.ts +2 -2
- package/types/text.d.ts +6 -6
- package/types/vertex.d.ts +3 -3
- package/types/vertex2.d.ts +2 -2
- package/types/vertex3.d.ts +3 -3
- package/types/vertex4.d.ts +3 -3
package/src/shape.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
|
|
3
3
|
interface CircleProps {
|
|
4
4
|
radius?: number;
|
|
@@ -8,7 +8,7 @@ interface CircleProps {
|
|
|
8
8
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
export const Circle:
|
|
11
|
+
export const Circle: FunctionComponent<CircleProps> = ({
|
|
12
12
|
radius = 32,
|
|
13
13
|
fill = "navy",
|
|
14
14
|
stroke = fill,
|
|
@@ -31,7 +31,7 @@ interface SquareProps {
|
|
|
31
31
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
export const Square:
|
|
34
|
+
export const Square: FunctionComponent<SquareProps> = ({
|
|
35
35
|
radius = 30,
|
|
36
36
|
cornerRadius = 0,
|
|
37
37
|
fill = "white",
|
|
@@ -61,7 +61,7 @@ interface RectangleProps {
|
|
|
61
61
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
export const Rectangle:
|
|
64
|
+
export const Rectangle: FunctionComponent<RectangleProps> = ({
|
|
65
65
|
width = 30,
|
|
66
66
|
height = 30,
|
|
67
67
|
cornerRadius = 0,
|
|
@@ -95,7 +95,7 @@ interface ShapeProps {
|
|
|
95
95
|
cornerRadius?: number;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
export const Shape:
|
|
98
|
+
export const Shape: FunctionComponent<ShapeProps> = ({
|
|
99
99
|
shape = "circle",
|
|
100
100
|
height = 128,
|
|
101
101
|
width,
|
package/src/span.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
|
|
3
3
|
export interface SpanProps {
|
|
4
4
|
text: string;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
export const Span:
|
|
7
|
+
export const Span: FunctionComponent<SpanProps> = ({
|
|
8
8
|
text
|
|
9
9
|
}) => <span>{text}</span>;
|
package/src/subgraph.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
1
2
|
import { Utility } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
3
|
import { Rectangle } from "./shape.tsx";
|
|
4
4
|
import { Text } from "./text.tsx";
|
|
5
5
|
|
|
@@ -15,7 +15,7 @@ export interface SubgraphProps {
|
|
|
15
15
|
fontFamily?: string;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
export const Subgraph:
|
|
18
|
+
export const Subgraph: FunctionComponent<SubgraphProps> = ({
|
|
19
19
|
text,
|
|
20
20
|
width = 100,
|
|
21
21
|
height = 100,
|
package/src/text.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "preact/hooks";
|
|
1
3
|
import { Utility } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
4
|
import { Icon } from "./icon.tsx";
|
|
4
5
|
import { Rectangle } from "./shape.tsx";
|
|
5
6
|
|
|
@@ -12,7 +13,7 @@ export interface TextLineProps {
|
|
|
12
13
|
fill?: string;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
export const TextLine:
|
|
16
|
+
export const TextLine: FunctionComponent<TextLineProps> = ({
|
|
16
17
|
text,
|
|
17
18
|
height = 12,
|
|
18
19
|
anchor = "middle",
|
|
@@ -37,33 +38,33 @@ export interface TextProps {
|
|
|
37
38
|
onSizeUpdate?: (size: { width: number, height: number }) => void;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
export const Text:
|
|
41
|
+
export const Text: FunctionComponent<TextProps> = ({
|
|
41
42
|
text,
|
|
42
43
|
height = 12,
|
|
43
44
|
fontFamily = "Verdana",
|
|
44
45
|
fill = "black",
|
|
45
46
|
onSizeUpdate
|
|
46
47
|
}) => {
|
|
47
|
-
const [totalWidth, setTotalWidth] =
|
|
48
|
-
const [totalHeight, setTotalHeight] =
|
|
48
|
+
const [totalWidth, setTotalWidth] = useState(0);
|
|
49
|
+
const [totalHeight, setTotalHeight] = useState(0);
|
|
49
50
|
|
|
50
|
-
|
|
51
|
+
useEffect(() => {
|
|
51
52
|
if (onSizeUpdate) {
|
|
52
53
|
onSizeUpdate({ width: totalWidth, height: totalHeight });
|
|
53
54
|
}
|
|
54
55
|
}, [totalWidth, totalHeight, onSizeUpdate]);
|
|
55
56
|
|
|
56
|
-
const parts =
|
|
57
|
+
const parts = useMemo(() => {
|
|
57
58
|
return text.split("\n");
|
|
58
59
|
}, [text]);
|
|
59
60
|
|
|
60
|
-
|
|
61
|
+
useLayoutEffect(() => {
|
|
61
62
|
const size = Utility.textSize(parts, fontFamily, height);
|
|
62
63
|
setTotalWidth(size.width);
|
|
63
64
|
setTotalHeight(size.height);
|
|
64
65
|
}, [fontFamily, height, parts]);
|
|
65
66
|
|
|
66
|
-
const TextLines =
|
|
67
|
+
const TextLines = useMemo(() => {
|
|
67
68
|
const yOffset = -(totalHeight / 2) + (height / 2);
|
|
68
69
|
return parts.map((p, i) => {
|
|
69
70
|
return <g key={`key-${i}`} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
|
|
@@ -94,7 +95,7 @@ export interface TextBoxProps {
|
|
|
94
95
|
onSizeUpdate?: (size: { width: number, height: number }) => void;
|
|
95
96
|
}
|
|
96
97
|
|
|
97
|
-
export const TextBox:
|
|
98
|
+
export const TextBox: FunctionComponent<TextBoxProps> = ({
|
|
98
99
|
text,
|
|
99
100
|
height = 12,
|
|
100
101
|
fontFamily = "Verdana",
|
|
@@ -106,16 +107,16 @@ export const TextBox: React.FunctionComponent<TextBoxProps> = ({
|
|
|
106
107
|
cornerRadius = 0,
|
|
107
108
|
onSizeUpdate
|
|
108
109
|
}) => {
|
|
109
|
-
const [textWidth, setTextWidthUpdate] =
|
|
110
|
-
const [textHeight, setTextHeightUpdate] =
|
|
110
|
+
const [textWidth, setTextWidthUpdate] = useState(0);
|
|
111
|
+
const [textHeight, setTextHeightUpdate] = useState(0);
|
|
111
112
|
|
|
112
|
-
|
|
113
|
+
useEffect(() => {
|
|
113
114
|
if (onSizeUpdate) {
|
|
114
115
|
onSizeUpdate({ width: textWidth, height: textHeight });
|
|
115
116
|
}
|
|
116
117
|
}, [textWidth, textHeight, onSizeUpdate]);
|
|
117
118
|
|
|
118
|
-
const onTextSizeUpdate =
|
|
119
|
+
const onTextSizeUpdate = useCallback(size => {
|
|
119
120
|
setTextWidthUpdate(size.width);
|
|
120
121
|
setTextHeightUpdate(size.height);
|
|
121
122
|
}, []);
|
|
@@ -150,7 +151,7 @@ export interface LabelledRect extends TextBoxProps {
|
|
|
150
151
|
fontSize?: number;
|
|
151
152
|
}
|
|
152
153
|
|
|
153
|
-
export const LabelledRect:
|
|
154
|
+
export const LabelledRect: FunctionComponent<LabelledRect> = ({
|
|
154
155
|
text,
|
|
155
156
|
height = 12,
|
|
156
157
|
width = 12,
|
|
@@ -165,16 +166,16 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
|
|
|
165
166
|
onSizeUpdate
|
|
166
167
|
}) => {
|
|
167
168
|
|
|
168
|
-
const [actualWidth, setActualWidthUpdate] =
|
|
169
|
-
const [actualHeight, setActualHeightUpdate] =
|
|
169
|
+
const [actualWidth, setActualWidthUpdate] = useState(width);
|
|
170
|
+
const [actualHeight, setActualHeightUpdate] = useState(height);
|
|
170
171
|
|
|
171
|
-
|
|
172
|
+
useLayoutEffect(() => {
|
|
172
173
|
const size = Utility.textSize(text, fontFamily, fontSize);
|
|
173
174
|
setActualWidthUpdate(size.width + padding * 2);
|
|
174
175
|
setActualHeightUpdate(size.height + padding * 2);
|
|
175
176
|
}, [text, fontFamily, fontSize, padding]);
|
|
176
177
|
|
|
177
|
-
|
|
178
|
+
useLayoutEffect(() => {
|
|
178
179
|
if (onSizeUpdate) {
|
|
179
180
|
onSizeUpdate({ width: actualWidth, height: actualHeight });
|
|
180
181
|
}
|
|
@@ -182,14 +183,14 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
|
|
|
182
183
|
|
|
183
184
|
return <>
|
|
184
185
|
<Rectangle
|
|
185
|
-
width={
|
|
186
|
-
height={
|
|
186
|
+
width={width}
|
|
187
|
+
height={height}
|
|
187
188
|
fill={fill}
|
|
188
189
|
stroke={stroke}
|
|
189
190
|
strokeWidth={strokeWidth}
|
|
190
191
|
cornerRadius={cornerRadius}
|
|
191
192
|
/>
|
|
192
|
-
<g transform={`translate(${-(
|
|
193
|
+
<g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
|
|
193
194
|
<TextLine
|
|
194
195
|
text={text}
|
|
195
196
|
fontFamily={fontFamily}
|
|
@@ -208,7 +209,7 @@ export interface IconLabelledRect extends LabelledRect {
|
|
|
208
209
|
iconFontSize?: number;
|
|
209
210
|
}
|
|
210
211
|
|
|
211
|
-
export const IconLabelledRect:
|
|
212
|
+
export const IconLabelledRect: FunctionComponent<IconLabelledRect> = ({
|
|
212
213
|
icon,
|
|
213
214
|
iconFontFamily,
|
|
214
215
|
text,
|
package/src/vertex.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
|
+
import { useCallback, useEffect, useState } from "preact/hooks";
|
|
2
3
|
import { Icon, IconProps } from "./icon.tsx";
|
|
3
4
|
import { TextBox } from "./text.tsx";
|
|
4
5
|
|
|
@@ -9,7 +10,7 @@ export interface AnnotationsProps {
|
|
|
9
10
|
stepSize?: number;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
|
-
export const Annotations:
|
|
13
|
+
export const Annotations: FunctionComponent<AnnotationsProps> = ({
|
|
13
14
|
x,
|
|
14
15
|
y,
|
|
15
16
|
annotationIDs = [],
|
|
@@ -20,7 +21,7 @@ export const Annotations: React.FunctionComponent<AnnotationsProps> = ({
|
|
|
20
21
|
transform={`translate(${x + i * stepSize} ${y})`}
|
|
21
22
|
>
|
|
22
23
|
<use
|
|
23
|
-
|
|
24
|
+
xlinkHref={"#" + id}
|
|
24
25
|
/>
|
|
25
26
|
</g>
|
|
26
27
|
);
|
|
@@ -47,7 +48,7 @@ export interface VertexProps {
|
|
|
47
48
|
scale?: number
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
export const Vertex:
|
|
51
|
+
export const Vertex: FunctionComponent<VertexProps> = ({
|
|
51
52
|
categoryID = "",
|
|
52
53
|
text = "",
|
|
53
54
|
textHeight = 12,
|
|
@@ -70,10 +71,10 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
|
|
|
70
71
|
...icon
|
|
71
72
|
};
|
|
72
73
|
|
|
73
|
-
const [textBoxWidth, setTextBoxWidthUpdate] =
|
|
74
|
-
const [textBoxHeight, setTextBoxHeightUpdate] =
|
|
74
|
+
const [textBoxWidth, setTextBoxWidthUpdate] = useState(0);
|
|
75
|
+
const [textBoxHeight, setTextBoxHeightUpdate] = useState(0);
|
|
75
76
|
|
|
76
|
-
|
|
77
|
+
useEffect(() => {
|
|
77
78
|
if (onSizeUpdate) {
|
|
78
79
|
onSizeUpdate({ width: 0, height: 0 });
|
|
79
80
|
}
|
|
@@ -89,7 +90,7 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
|
|
|
89
90
|
annotationOffsetY -= textBoxHeight + textPadding;
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
const onTextBoxSizeUpdate =
|
|
93
|
+
const onTextBoxSizeUpdate = useCallback(size => {
|
|
93
94
|
setTextBoxWidthUpdate(size.width);
|
|
94
95
|
setTextBoxHeightUpdate(size.height);
|
|
95
96
|
}, []);
|
|
@@ -108,7 +109,7 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
|
|
|
108
109
|
</g> : undefined;
|
|
109
110
|
return categoryID ?
|
|
110
111
|
<g transform={`translate(0 ${offsetY}) scale(${scale})`}>
|
|
111
|
-
<use
|
|
112
|
+
<use xlinkHref={"#" + categoryID} />
|
|
112
113
|
{label}
|
|
113
114
|
<Annotations x={width / 2} y={annotationOffsetY} annotationIDs={annotationIDs} />
|
|
114
115
|
</g> :
|
package/src/vertex2.tsx
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
|
+
import { useMemo } from "preact/hooks";
|
|
1
3
|
import { Utility } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
4
|
import { Icon, IconProps } from "./icon.tsx";
|
|
4
5
|
import { TextBox } from "./text.tsx";
|
|
5
6
|
import { Annotations, VertexProps } from "./vertex.tsx";
|
|
6
7
|
|
|
7
|
-
export const Vertex2:
|
|
8
|
+
export const Vertex2: FunctionComponent<VertexProps> = ({
|
|
8
9
|
categoryID = "",
|
|
9
10
|
text = "",
|
|
10
11
|
textHeight = 12,
|
|
@@ -26,7 +27,7 @@ export const Vertex2: React.FunctionComponent<VertexProps> = ({
|
|
|
26
27
|
...icon
|
|
27
28
|
};
|
|
28
29
|
const textBoxHeight = textHeight + textPadding * 2;
|
|
29
|
-
const { width } =
|
|
30
|
+
const { width } = useMemo(() => {
|
|
30
31
|
return Utility.textSize(text, textFontFamily, textHeight, false);
|
|
31
32
|
}, [text, textFontFamily, textHeight]);
|
|
32
33
|
|
|
@@ -51,7 +52,7 @@ export const Vertex2: React.FunctionComponent<VertexProps> = ({
|
|
|
51
52
|
transform={`translate(${iconOffsetX} ${iconOffsetY})`}
|
|
52
53
|
>
|
|
53
54
|
<use
|
|
54
|
-
|
|
55
|
+
xlinkHref={"#" + categoryID}
|
|
55
56
|
/>
|
|
56
57
|
</g>
|
|
57
58
|
<g
|
package/src/vertex3.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
|
+
import { useMemo } from "preact/hooks";
|
|
1
3
|
import { Utility } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
4
|
import { Icon, IconProps } from "./icon.tsx";
|
|
4
5
|
import { TextBox, TextBoxProps } from "./text.tsx";
|
|
5
6
|
import { VertexProps } from "./vertex.tsx";
|
|
@@ -29,7 +30,7 @@ export interface Vertex3Props extends VertexProps {
|
|
|
29
30
|
scale?: number;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
export const Vertex3:
|
|
33
|
+
export const Vertex3: FunctionComponent<Vertex3Props> = ({
|
|
33
34
|
text = "",
|
|
34
35
|
textHeight = 10,
|
|
35
36
|
textPadding = 4,
|
|
@@ -79,7 +80,7 @@ export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
|
|
|
79
80
|
|
|
80
81
|
const annoOffsetY = 0;
|
|
81
82
|
|
|
82
|
-
const labelWidth =
|
|
83
|
+
const labelWidth = useMemo(() => {
|
|
83
84
|
return Utility.textSize(text, textFontFamily, textHeight, false).width;
|
|
84
85
|
}, [text, textFontFamily, textHeight]);
|
|
85
86
|
|
|
@@ -174,7 +175,7 @@ export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
|
|
|
174
175
|
</g >;
|
|
175
176
|
};
|
|
176
177
|
|
|
177
|
-
export const CentroidVertex3:
|
|
178
|
+
export const CentroidVertex3: FunctionComponent<Vertex3Props> = function ({
|
|
178
179
|
id,
|
|
179
180
|
categoryID = "",
|
|
180
181
|
text = "",
|
package/src/vertex4.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
|
+
import { useMemo } from "preact/hooks";
|
|
1
3
|
import { Utility } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
4
|
import { Icon, IconProps } from "./icon.tsx";
|
|
4
5
|
import { TextBox, TextBoxProps } from "./text.tsx";
|
|
5
6
|
import { VertexProps } from "./vertex.tsx";
|
|
@@ -32,7 +33,7 @@ export interface IVertex4 extends VertexProps {
|
|
|
32
33
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
33
34
|
}
|
|
34
35
|
|
|
35
|
-
export const Vertex4:
|
|
36
|
+
export const Vertex4: FunctionComponent<IVertex4> = ({
|
|
36
37
|
categoryID = "",
|
|
37
38
|
text = "",
|
|
38
39
|
textHeight = 10,
|
|
@@ -86,7 +87,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
|
|
|
86
87
|
};
|
|
87
88
|
|
|
88
89
|
const annoOffsetY = 0;
|
|
89
|
-
const labelWidth =
|
|
90
|
+
const labelWidth = useMemo(() => {
|
|
90
91
|
return Utility.textSize(text, textFontFamily, textHeight, false).width;
|
|
91
92
|
}, [text, textFontFamily, textHeight]);
|
|
92
93
|
|
|
@@ -211,7 +212,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
|
|
|
211
212
|
;
|
|
212
213
|
};
|
|
213
214
|
|
|
214
|
-
export const CentroidVertex4:
|
|
215
|
+
export const CentroidVertex4: FunctionComponent<IVertex4> = function ({
|
|
215
216
|
id,
|
|
216
217
|
categoryID = "",
|
|
217
218
|
text = "",
|
package/types/ImageChar.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
export interface ImageCharProps {
|
|
3
3
|
x?: number;
|
|
4
4
|
y?: number;
|
|
@@ -10,4 +10,4 @@ export interface ImageCharProps {
|
|
|
10
10
|
yOffset?: number;
|
|
11
11
|
fontWeight?: number;
|
|
12
12
|
}
|
|
13
|
-
export declare const ImageChar:
|
|
13
|
+
export declare const ImageChar: FunctionComponent<ImageCharProps>;
|
package/types/edge.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
import { VertexProps } from "./vertex.tsx";
|
|
3
3
|
type Point = [number, number];
|
|
4
4
|
export interface EdgeProps<V extends VertexProps = VertexProps> {
|
|
@@ -19,5 +19,5 @@ export interface EdgeProps<V extends VertexProps = VertexProps> {
|
|
|
19
19
|
points?: Array<[number, number]>;
|
|
20
20
|
curveDepth?: number;
|
|
21
21
|
}
|
|
22
|
-
export declare const Edge:
|
|
22
|
+
export declare const Edge: FunctionComponent<EdgeProps>;
|
|
23
23
|
export {};
|
package/types/icon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
export interface IconProps {
|
|
3
3
|
shape?: "circle" | "square" | "rectangle";
|
|
4
4
|
width?: number;
|
|
@@ -16,11 +16,11 @@ export interface IconProps {
|
|
|
16
16
|
cornerRadius?: number;
|
|
17
17
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
18
18
|
}
|
|
19
|
-
export declare const Icon:
|
|
19
|
+
export declare const Icon: FunctionComponent<IconProps>;
|
|
20
20
|
export interface IconEx extends IconProps {
|
|
21
21
|
id: string;
|
|
22
22
|
}
|
|
23
23
|
export interface IconsProps {
|
|
24
24
|
icons: IconEx[];
|
|
25
25
|
}
|
|
26
|
-
export declare const Icons:
|
|
26
|
+
export declare const Icons: FunctionComponent<IconsProps>;
|
package/types/image.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
interface ImageProps {
|
|
3
3
|
href: string;
|
|
4
4
|
x?: number;
|
|
@@ -6,5 +6,5 @@ interface ImageProps {
|
|
|
6
6
|
height?: number;
|
|
7
7
|
yOffset?: number;
|
|
8
8
|
}
|
|
9
|
-
export declare const Image:
|
|
9
|
+
export declare const Image: FunctionComponent<ImageProps>;
|
|
10
10
|
export {};
|
package/types/index.d.ts
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { createElement, Component, Fragment, h, render } from "preact";
|
|
2
|
+
export { unmountComponentAtNode } from "preact/compat";
|
|
3
|
+
export type { FunctionComponent } from "preact";
|
|
4
|
+
export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";
|
package/types/render.d.ts
CHANGED
|
@@ -1,28 +1,26 @@
|
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
1
2
|
import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
4
|
-
export interface FunctionComponent<T> extends React.FunctionComponent<T> {
|
|
5
|
-
}
|
|
6
|
-
export declare function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
|
|
3
|
+
export declare function render<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
|
|
4
|
+
export declare function svgRender<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
|
|
7
5
|
export declare class HTMLAdapter<P> extends HTMLWidget {
|
|
8
|
-
protected readonly _component:
|
|
6
|
+
protected readonly _component: FunctionComponent<P>;
|
|
9
7
|
props(): P;
|
|
10
8
|
props(_: Partial<P>): this;
|
|
11
9
|
prop<K extends keyof P>(_: K): P[K];
|
|
12
10
|
prop<K extends keyof P>(_: K, value: P[K]): this;
|
|
13
|
-
constructor(_component:
|
|
11
|
+
constructor(_component: FunctionComponent<P>);
|
|
14
12
|
update(domNode: any, element: any): void;
|
|
15
13
|
}
|
|
16
14
|
export interface HTMLAdapter<P> {
|
|
17
15
|
_props: P;
|
|
18
16
|
}
|
|
19
17
|
export declare class SVGAdapter<P> extends SVGWidget {
|
|
20
|
-
protected readonly _component:
|
|
18
|
+
protected readonly _component: FunctionComponent<P>;
|
|
21
19
|
props(): P;
|
|
22
20
|
props(_: Partial<P>): this;
|
|
23
21
|
prop<K extends keyof P>(_: K): P[K];
|
|
24
22
|
prop<K extends keyof P>(_: K, value: P[K]): this;
|
|
25
|
-
constructor(_component:
|
|
23
|
+
constructor(_component: FunctionComponent<P>);
|
|
26
24
|
update(domNode: any, element: any): void;
|
|
27
25
|
}
|
|
28
26
|
export interface SVGAdapter<P> {
|
package/types/shape.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
interface CircleProps {
|
|
3
3
|
radius?: number;
|
|
4
4
|
fill?: string;
|
|
@@ -6,7 +6,7 @@ interface CircleProps {
|
|
|
6
6
|
strokeWidth?: number;
|
|
7
7
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
8
8
|
}
|
|
9
|
-
export declare const Circle:
|
|
9
|
+
export declare const Circle: FunctionComponent<CircleProps>;
|
|
10
10
|
interface SquareProps {
|
|
11
11
|
radius?: number;
|
|
12
12
|
cornerRadius?: number;
|
|
@@ -15,7 +15,7 @@ interface SquareProps {
|
|
|
15
15
|
strokeWidth?: number;
|
|
16
16
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
17
17
|
}
|
|
18
|
-
export declare const Square:
|
|
18
|
+
export declare const Square: FunctionComponent<SquareProps>;
|
|
19
19
|
interface RectangleProps {
|
|
20
20
|
width?: number;
|
|
21
21
|
height?: number;
|
|
@@ -25,7 +25,7 @@ interface RectangleProps {
|
|
|
25
25
|
strokeWidth?: number;
|
|
26
26
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
27
27
|
}
|
|
28
|
-
export declare const Rectangle:
|
|
28
|
+
export declare const Rectangle: FunctionComponent<RectangleProps>;
|
|
29
29
|
interface ShapeProps {
|
|
30
30
|
shape?: "circle" | "square" | "rectangle";
|
|
31
31
|
height?: number;
|
|
@@ -36,5 +36,5 @@ interface ShapeProps {
|
|
|
36
36
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
37
37
|
cornerRadius?: number;
|
|
38
38
|
}
|
|
39
|
-
export declare const Shape:
|
|
39
|
+
export declare const Shape: FunctionComponent<ShapeProps>;
|
|
40
40
|
export {};
|
package/types/span.d.ts
CHANGED
package/types/subgraph.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
export interface SubgraphProps {
|
|
3
3
|
id: string;
|
|
4
4
|
origData?: any;
|
|
@@ -10,4 +10,4 @@ export interface SubgraphProps {
|
|
|
10
10
|
fontHeight?: number;
|
|
11
11
|
fontFamily?: string;
|
|
12
12
|
}
|
|
13
|
-
export declare const Subgraph:
|
|
13
|
+
export declare const Subgraph: FunctionComponent<SubgraphProps>;
|
package/types/text.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
export interface TextLineProps {
|
|
3
3
|
text: string;
|
|
4
4
|
height?: number;
|
|
@@ -7,7 +7,7 @@ export interface TextLineProps {
|
|
|
7
7
|
fontFamily?: string;
|
|
8
8
|
fill?: string;
|
|
9
9
|
}
|
|
10
|
-
export declare const TextLine:
|
|
10
|
+
export declare const TextLine: FunctionComponent<TextLineProps>;
|
|
11
11
|
export interface TextProps {
|
|
12
12
|
text: string;
|
|
13
13
|
height?: number;
|
|
@@ -18,7 +18,7 @@ export interface TextProps {
|
|
|
18
18
|
height: number;
|
|
19
19
|
}) => void;
|
|
20
20
|
}
|
|
21
|
-
export declare const Text:
|
|
21
|
+
export declare const Text: FunctionComponent<TextProps>;
|
|
22
22
|
export interface TextBoxProps {
|
|
23
23
|
text: string;
|
|
24
24
|
height?: number;
|
|
@@ -35,15 +35,15 @@ export interface TextBoxProps {
|
|
|
35
35
|
height: number;
|
|
36
36
|
}) => void;
|
|
37
37
|
}
|
|
38
|
-
export declare const TextBox:
|
|
38
|
+
export declare const TextBox: FunctionComponent<TextBoxProps>;
|
|
39
39
|
export interface LabelledRect extends TextBoxProps {
|
|
40
40
|
width?: number;
|
|
41
41
|
fontSize?: number;
|
|
42
42
|
}
|
|
43
|
-
export declare const LabelledRect:
|
|
43
|
+
export declare const LabelledRect: FunctionComponent<LabelledRect>;
|
|
44
44
|
export interface IconLabelledRect extends LabelledRect {
|
|
45
45
|
icon: string;
|
|
46
46
|
iconFontFamily?: string;
|
|
47
47
|
iconFontSize?: number;
|
|
48
48
|
}
|
|
49
|
-
export declare const IconLabelledRect:
|
|
49
|
+
export declare const IconLabelledRect: FunctionComponent<IconLabelledRect>;
|
package/types/vertex.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
import { IconProps } from "./icon.tsx";
|
|
3
3
|
export interface AnnotationsProps {
|
|
4
4
|
x: number;
|
|
@@ -6,7 +6,7 @@ export interface AnnotationsProps {
|
|
|
6
6
|
annotationIDs: string[];
|
|
7
7
|
stepSize?: number;
|
|
8
8
|
}
|
|
9
|
-
export declare const Annotations:
|
|
9
|
+
export declare const Annotations: FunctionComponent<AnnotationsProps>;
|
|
10
10
|
export interface VertexProps {
|
|
11
11
|
id: string | number;
|
|
12
12
|
origData?: any;
|
|
@@ -29,4 +29,4 @@ export interface VertexProps {
|
|
|
29
29
|
showLabel?: boolean;
|
|
30
30
|
scale?: number;
|
|
31
31
|
}
|
|
32
|
-
export declare const Vertex:
|
|
32
|
+
export declare const Vertex: FunctionComponent<VertexProps>;
|
package/types/vertex2.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
import { VertexProps } from "./vertex.tsx";
|
|
3
|
-
export declare const Vertex2:
|
|
3
|
+
export declare const Vertex2: FunctionComponent<VertexProps>;
|
package/types/vertex3.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
import { IconProps } from "./icon.tsx";
|
|
3
3
|
import { TextBoxProps } from "./text.tsx";
|
|
4
4
|
import { VertexProps } from "./vertex.tsx";
|
|
@@ -29,5 +29,5 @@ export interface Vertex3Props extends VertexProps {
|
|
|
29
29
|
expansionIcon?: IconProps;
|
|
30
30
|
scale?: number;
|
|
31
31
|
}
|
|
32
|
-
export declare const Vertex3:
|
|
33
|
-
export declare const CentroidVertex3:
|
|
32
|
+
export declare const Vertex3: FunctionComponent<Vertex3Props>;
|
|
33
|
+
export declare const CentroidVertex3: FunctionComponent<Vertex3Props>;
|
package/types/vertex4.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FunctionComponent } from "preact";
|
|
2
2
|
import { IconProps } from "./icon.tsx";
|
|
3
3
|
import { VertexProps } from "./vertex.tsx";
|
|
4
4
|
export interface IVertex4Annotation extends IconProps {
|
|
@@ -27,5 +27,5 @@ export interface IVertex4 extends VertexProps {
|
|
|
27
27
|
iconText?: string;
|
|
28
28
|
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
29
29
|
}
|
|
30
|
-
export declare const Vertex4:
|
|
31
|
-
export declare const CentroidVertex4:
|
|
30
|
+
export declare const Vertex4: FunctionComponent<IVertex4>;
|
|
31
|
+
export declare const CentroidVertex4: FunctionComponent<IVertex4>;
|