@xyflow/react 12.4.4 → 12.5.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/base.css +8 -4
- package/dist/esm/additional-components/Background/types.d.ts +20 -4
- package/dist/esm/additional-components/Background/types.d.ts.map +1 -1
- package/dist/esm/additional-components/Controls/types.d.ts +33 -9
- package/dist/esm/additional-components/Controls/types.d.ts.map +1 -1
- package/dist/esm/additional-components/MiniMap/MiniMap.d.ts.map +1 -1
- package/dist/esm/additional-components/NodeToolbar/types.d.ts +8 -2
- package/dist/esm/additional-components/NodeToolbar/types.d.ts.map +1 -1
- package/dist/esm/components/EdgeLabelRenderer/index.d.ts +31 -29
- package/dist/esm/components/EdgeLabelRenderer/index.d.ts.map +1 -1
- package/dist/esm/components/Edges/BezierEdge.d.ts +26 -0
- package/dist/esm/components/Edges/BezierEdge.d.ts.map +1 -1
- package/dist/esm/components/Edges/EdgeAnchor.d.ts +3 -0
- package/dist/esm/components/Edges/EdgeAnchor.d.ts.map +1 -1
- package/dist/esm/components/Edges/EdgeText.d.ts +18 -18
- package/dist/esm/components/Edges/EdgeText.d.ts.map +1 -1
- package/dist/esm/components/Edges/SmoothStepEdge.d.ts +26 -0
- package/dist/esm/components/Edges/SmoothStepEdge.d.ts.map +1 -1
- package/dist/esm/components/Edges/StepEdge.d.ts +26 -0
- package/dist/esm/components/Edges/StepEdge.d.ts.map +1 -1
- package/dist/esm/components/Edges/StraightEdge.d.ts +24 -0
- package/dist/esm/components/Edges/StraightEdge.d.ts.map +1 -1
- package/dist/esm/container/Pane/index.d.ts.map +1 -1
- package/dist/esm/hooks/useKeyPress.d.ts +1 -0
- package/dist/esm/hooks/useKeyPress.d.ts.map +1 -1
- package/dist/esm/hooks/useReactFlow.d.ts.map +1 -1
- package/dist/esm/hooks/useViewportHelper.d.ts.map +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +418 -336
- package/dist/esm/index.mjs +418 -336
- package/dist/esm/store/index.d.ts +9 -9
- package/dist/esm/store/index.d.ts.map +1 -1
- package/dist/esm/store/initialState.d.ts +9 -9
- package/dist/esm/store/initialState.d.ts.map +1 -1
- package/dist/esm/types/edges.d.ts +23 -3
- package/dist/esm/types/edges.d.ts.map +1 -1
- package/dist/esm/types/general.d.ts +1 -12
- package/dist/esm/types/general.d.ts.map +1 -1
- package/dist/esm/types/instance.d.ts +2 -1
- package/dist/esm/types/instance.d.ts.map +1 -1
- package/dist/esm/types/store.d.ts +3 -5
- package/dist/esm/types/store.d.ts.map +1 -1
- package/dist/style.css +8 -4
- package/dist/umd/additional-components/Background/types.d.ts +20 -4
- package/dist/umd/additional-components/Background/types.d.ts.map +1 -1
- package/dist/umd/additional-components/Controls/types.d.ts +33 -9
- package/dist/umd/additional-components/Controls/types.d.ts.map +1 -1
- package/dist/umd/additional-components/MiniMap/MiniMap.d.ts.map +1 -1
- package/dist/umd/additional-components/NodeToolbar/types.d.ts +8 -2
- package/dist/umd/additional-components/NodeToolbar/types.d.ts.map +1 -1
- package/dist/umd/components/EdgeLabelRenderer/index.d.ts +31 -29
- package/dist/umd/components/EdgeLabelRenderer/index.d.ts.map +1 -1
- package/dist/umd/components/Edges/BezierEdge.d.ts +26 -0
- package/dist/umd/components/Edges/BezierEdge.d.ts.map +1 -1
- package/dist/umd/components/Edges/EdgeAnchor.d.ts +3 -0
- package/dist/umd/components/Edges/EdgeAnchor.d.ts.map +1 -1
- package/dist/umd/components/Edges/EdgeText.d.ts +18 -18
- package/dist/umd/components/Edges/EdgeText.d.ts.map +1 -1
- package/dist/umd/components/Edges/SmoothStepEdge.d.ts +26 -0
- package/dist/umd/components/Edges/SmoothStepEdge.d.ts.map +1 -1
- package/dist/umd/components/Edges/StepEdge.d.ts +26 -0
- package/dist/umd/components/Edges/StepEdge.d.ts.map +1 -1
- package/dist/umd/components/Edges/StraightEdge.d.ts +24 -0
- package/dist/umd/components/Edges/StraightEdge.d.ts.map +1 -1
- package/dist/umd/container/Pane/index.d.ts.map +1 -1
- package/dist/umd/hooks/useKeyPress.d.ts +1 -0
- package/dist/umd/hooks/useKeyPress.d.ts.map +1 -1
- package/dist/umd/hooks/useReactFlow.d.ts.map +1 -1
- package/dist/umd/hooks/useViewportHelper.d.ts.map +1 -1
- package/dist/umd/index.d.ts +1 -1
- package/dist/umd/index.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/store/index.d.ts +9 -9
- package/dist/umd/store/index.d.ts.map +1 -1
- package/dist/umd/store/initialState.d.ts +9 -9
- package/dist/umd/store/initialState.d.ts.map +1 -1
- package/dist/umd/types/edges.d.ts +23 -3
- package/dist/umd/types/edges.d.ts.map +1 -1
- package/dist/umd/types/general.d.ts +1 -12
- package/dist/umd/types/general.d.ts.map +1 -1
- package/dist/umd/types/instance.d.ts +2 -1
- package/dist/umd/types/instance.d.ts.map +1 -1
- package/dist/umd/types/store.d.ts +3 -5
- package/dist/umd/types/store.d.ts.map +1 -1
- package/package.json +3 -3
package/dist/base.css
CHANGED
|
@@ -247,16 +247,20 @@ svg.react-flow__connectionline {
|
|
|
247
247
|
.react-flow__panel.bottom {
|
|
248
248
|
bottom: 0;
|
|
249
249
|
}
|
|
250
|
+
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
|
|
251
|
+
left: 50%;
|
|
252
|
+
transform: translateX(-50%);
|
|
253
|
+
}
|
|
250
254
|
.react-flow__panel.left {
|
|
251
255
|
left: 0;
|
|
252
256
|
}
|
|
253
257
|
.react-flow__panel.right {
|
|
254
258
|
right: 0;
|
|
255
259
|
}
|
|
256
|
-
.react-flow__panel.center {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
+
.react-flow__panel.left.center, .react-flow__panel.right.center {
|
|
261
|
+
top: 50%;
|
|
262
|
+
transform: translateY(-50%);
|
|
263
|
+
}
|
|
260
264
|
.react-flow__attribution {
|
|
261
265
|
font-size: 10px;
|
|
262
266
|
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
|
|
@@ -14,6 +14,7 @@ export declare enum BackgroundVariant {
|
|
|
14
14
|
* @expand
|
|
15
15
|
*/
|
|
16
16
|
export type BackgroundProps = {
|
|
17
|
+
/** When multiple backgrounds are present on the page, each one should have a unique id. */
|
|
17
18
|
id?: string;
|
|
18
19
|
/** Color of the pattern */
|
|
19
20
|
color?: string;
|
|
@@ -23,16 +24,31 @@ export type BackgroundProps = {
|
|
|
23
24
|
className?: string;
|
|
24
25
|
/** Class applied to the pattern */
|
|
25
26
|
patternClassName?: string;
|
|
26
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* The gap between patterns. Passing in a tuple allows you to control the x and y gap
|
|
29
|
+
* independently.
|
|
30
|
+
* @default '28'
|
|
31
|
+
*/
|
|
27
32
|
gap?: number | [number, number];
|
|
28
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* The radius of each dot or the size of each rectangle if `BackgroundVariant.Dots` or
|
|
35
|
+
* `BackgroundVariant.Cross` is used. This defaults to 1 or 6 respectively, or ignored if
|
|
36
|
+
* `BackgroundVariant.Lines` is used.
|
|
37
|
+
*/
|
|
29
38
|
size?: number;
|
|
30
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Offset of the pattern
|
|
41
|
+
* @default 2
|
|
42
|
+
*/
|
|
31
43
|
offset?: number | [number, number];
|
|
32
|
-
/**
|
|
44
|
+
/**
|
|
45
|
+
* The stroke thickness used when drawing the pattern.
|
|
46
|
+
* @default 1
|
|
47
|
+
*/
|
|
33
48
|
lineWidth?: number;
|
|
34
49
|
/**
|
|
35
50
|
* Variant of the pattern
|
|
51
|
+
* @default BackgroundVariant.Dots
|
|
36
52
|
* @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
|
|
37
53
|
* 'lines', 'dots', 'cross'
|
|
38
54
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Background/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,2FAA2F;IAC3F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,qCAAqC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC"}
|
|
@@ -5,24 +5,42 @@ import type { FitViewOptions } from '../../types';
|
|
|
5
5
|
* @expand
|
|
6
6
|
*/
|
|
7
7
|
export type ControlProps = {
|
|
8
|
-
/**
|
|
8
|
+
/**
|
|
9
|
+
* Whether or not to show the zoom in and zoom out buttons. These buttons will adjust the viewport
|
|
10
|
+
* zoom by a fixed amount each press.
|
|
11
|
+
* @default true
|
|
12
|
+
*/
|
|
9
13
|
showZoom?: boolean;
|
|
10
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* Whether or not to show the fit view button. By default, this button will adjust the viewport so
|
|
16
|
+
* that all nodes are visible at once.
|
|
17
|
+
* @default true
|
|
18
|
+
*/
|
|
11
19
|
showFitView?: boolean;
|
|
12
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Show button for toggling interactivity
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
13
24
|
showInteractive?: boolean;
|
|
14
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* Customise the options for the fit view button. These are the same options you would pass to the
|
|
27
|
+
* fitView function.
|
|
28
|
+
*/
|
|
15
29
|
fitViewOptions?: FitViewOptions;
|
|
16
|
-
/**
|
|
30
|
+
/** Called in addition the default zoom behavior when the zoom in button is clicked. */
|
|
17
31
|
onZoomIn?: () => void;
|
|
18
|
-
/**
|
|
32
|
+
/** Called in addition the default zoom behavior when the zoom out button is clicked. */
|
|
19
33
|
onZoomOut?: () => void;
|
|
20
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* Called when the fit view button is clicked. When this is not provided, the viewport will be
|
|
36
|
+
* adjusted so that all nodes are visible.
|
|
37
|
+
*/
|
|
21
38
|
onFitView?: () => void;
|
|
22
|
-
/**
|
|
39
|
+
/** Called when the interactive (lock) button is clicked. */
|
|
23
40
|
onInteractiveChange?: (interactiveStatus: boolean) => void;
|
|
24
41
|
/**
|
|
25
42
|
* Position of the controls on the pane
|
|
43
|
+
* @default PanelPosition.BottomLeft
|
|
26
44
|
* @example PanelPosition.TopLeft, PanelPosition.TopRight,
|
|
27
45
|
* PanelPosition.BottomLeft, PanelPosition.BottomRight
|
|
28
46
|
*/
|
|
@@ -30,9 +48,15 @@ export type ControlProps = {
|
|
|
30
48
|
children?: ReactNode;
|
|
31
49
|
/** Style applied to container */
|
|
32
50
|
style?: React.CSSProperties;
|
|
33
|
-
/**
|
|
51
|
+
/** Class name applied to container */
|
|
34
52
|
className?: string;
|
|
53
|
+
/**
|
|
54
|
+
* @default 'React Flow controls'
|
|
55
|
+
*/
|
|
35
56
|
'aria-label'?: string;
|
|
57
|
+
/**
|
|
58
|
+
* @default 'vertical'
|
|
59
|
+
*/
|
|
36
60
|
orientation?: 'horizontal' | 'vertical';
|
|
37
61
|
};
|
|
38
62
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Controls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/Controls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMap.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../src/additional-components/MiniMap/MiniMap.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA+B5C,iBAAS,gBAAgB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACtD,KAAK,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,aAAkB,EAClB,gBAAoB,EACpB,eAAe,EAKf,aAAa,EACb,OAAO,EACP,SAAS,EACT,eAAe,EACf,eAAe,EACf,QAAyB,EACzB,OAAO,EACP,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,SAAiC,EACjC,UAAU,EACV,QAAa,EACb,WAAe,GAChB,EAAE,YAAY,CAAC,QAAQ,CAAC,2CAgHxB;kBA1IQ,gBAAgB;;;AA8IzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,yBAAoD,CAAC"}
|
|
@@ -4,7 +4,10 @@ import type { Position, Align } from '@xyflow/system';
|
|
|
4
4
|
* @expand
|
|
5
5
|
*/
|
|
6
6
|
export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
|
|
7
|
-
/**
|
|
7
|
+
/**
|
|
8
|
+
* By passing in an array of node id's you can render a single tooltip for a group or collection
|
|
9
|
+
* of nodes.
|
|
10
|
+
*/
|
|
8
11
|
nodeId?: string | string[];
|
|
9
12
|
/** If true, node toolbar is visible even if node is not selected */
|
|
10
13
|
isVisible?: boolean;
|
|
@@ -14,7 +17,10 @@ export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
14
17
|
* Position.BottomLeft, Position.BottomRight
|
|
15
18
|
*/
|
|
16
19
|
position?: Position;
|
|
17
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* The space between the node and the toolbar, measured in pixels.
|
|
22
|
+
* @default 10
|
|
23
|
+
*/
|
|
18
24
|
offset?: number;
|
|
19
25
|
/**
|
|
20
26
|
* Align the toolbar relative to the node
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeToolbar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeToolbar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC"}
|
|
@@ -1,45 +1,47 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
export type EdgeLabelRendererProps = {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
};
|
|
2
5
|
/**
|
|
3
6
|
* Edges are SVG-based. If you want to render more complex labels you can use the
|
|
4
7
|
* `<EdgeLabelRenderer />` component to access a div based renderer. This component
|
|
5
8
|
* is a portal that renders the label in a `<div />` that is positioned on top of
|
|
6
|
-
* the edges. You can see an example usage of the component in the
|
|
9
|
+
* the edges. You can see an example usage of the component in the
|
|
10
|
+
* [edge label renderer example](/examples/edges/edge-label-renderer).
|
|
7
11
|
* @public
|
|
8
12
|
*
|
|
9
13
|
* @example
|
|
10
|
-
|
|
11
|
-
*import React from 'react';
|
|
12
|
-
*import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
|
|
14
|
+
* ```jsx
|
|
15
|
+
* import React from 'react';
|
|
16
|
+
* import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
|
|
13
17
|
*
|
|
14
|
-
*export function CustomEdge({ id, data, ...props }) {
|
|
15
|
-
*
|
|
18
|
+
* export function CustomEdge({ id, data, ...props }) {
|
|
19
|
+
* const [edgePath, labelX, labelY] = getBezierPath(props);
|
|
16
20
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*};
|
|
36
|
-
|
|
21
|
+
* return (
|
|
22
|
+
* <>
|
|
23
|
+
* <BaseEdge id={id} path={edgePath} />
|
|
24
|
+
* <EdgeLabelRenderer>
|
|
25
|
+
* <div
|
|
26
|
+
* style={{
|
|
27
|
+
* position: 'absolute',
|
|
28
|
+
* transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
|
29
|
+
* background: '#ffcc00',
|
|
30
|
+
* padding: 10,
|
|
31
|
+
* }}
|
|
32
|
+
* className="nodrag nopan"
|
|
33
|
+
* >
|
|
34
|
+
* {data.label}
|
|
35
|
+
* </div>
|
|
36
|
+
* </EdgeLabelRenderer>
|
|
37
|
+
* </>
|
|
38
|
+
* );
|
|
39
|
+
* };
|
|
40
|
+
* ```
|
|
37
41
|
*
|
|
38
42
|
* @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
|
|
39
43
|
* add mouse interactions you need to set the style `pointerEvents: all` and add
|
|
40
44
|
* the `nopan` class on the label or the element you want to interact with.
|
|
41
45
|
*/
|
|
42
|
-
export declare function EdgeLabelRenderer({ children }:
|
|
43
|
-
children: ReactNode;
|
|
44
|
-
}): import("react").ReactPortal | null;
|
|
46
|
+
export declare function EdgeLabelRenderer({ children }: EdgeLabelRendererProps): import("react").ReactPortal | null;
|
|
45
47
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeLabelRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeLabelRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,sCAQrE"}
|
|
@@ -1,6 +1,32 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { BezierEdgeProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Component that can be used inside a custom edge to render a bezier curve.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @example
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { BezierEdge } from '@xyflow/react';
|
|
11
|
+
*
|
|
12
|
+
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
|
|
13
|
+
* return (
|
|
14
|
+
* <BezierEdge
|
|
15
|
+
* sourceX={sourceX}
|
|
16
|
+
* sourceY={sourceY}
|
|
17
|
+
* targetX={targetX}
|
|
18
|
+
* targetY={targetY}
|
|
19
|
+
* sourcePosition={sourcePosition}
|
|
20
|
+
* targetPosition={targetPosition}
|
|
21
|
+
* />
|
|
22
|
+
* );
|
|
23
|
+
* }
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
3
26
|
declare const BezierEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, pathOptions, interactionWidth, }: BezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
4
30
|
declare const BezierEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, pathOptions, interactionWidth, }: BezierEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
5
31
|
export { BezierEdge, BezierEdgeInternal };
|
|
6
32
|
//# sourceMappingURL=BezierEdge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BezierEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/BezierEdge.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA2DnD,QAAA,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"BezierEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/BezierEdge.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA2DnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,UAAU,qQA1DT,eAAe,6CA0DoC,CAAC;AAE3D;;GAEG;AACH,QAAA,MAAM,kBAAkB,qQA/DjB,eAAe,6CA+D2C,CAAC;AAKlE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -10,5 +10,8 @@ export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
|
|
|
10
10
|
onMouseOut: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
|
|
11
11
|
type: string;
|
|
12
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
13
16
|
export declare function EdgeAnchor({ position, centerX, centerY, radius, onMouseDown, onMouseEnter, onMouseOut, type, }: EdgeAnchorProps): import("react/jsx-runtime").JSX.Element;
|
|
14
17
|
//# sourceMappingURL=EdgeAnchor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EdgeAnchor.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAc1C,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,WAAW,CAAC;IACjE,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;CACd;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,GACL,EAAE,eAAe,2CAcjB"}
|
|
1
|
+
{"version":3,"file":"EdgeAnchor.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAc1C,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,WAAW,CAAC;IACjE,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;CACd;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,GACL,EAAE,eAAe,2CAcjB"}
|
|
@@ -8,26 +8,26 @@ declare namespace EdgeTextComponent {
|
|
|
8
8
|
* You can use the `<EdgeText />` component as a helper component to display text
|
|
9
9
|
* within your custom edges.
|
|
10
10
|
*
|
|
11
|
-
|
|
11
|
+
* @public
|
|
12
12
|
*
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
*import { EdgeText } from '@xyflow/react';
|
|
13
|
+
* @example
|
|
14
|
+
* ```jsx
|
|
15
|
+
* import { EdgeText } from '@xyflow/react';
|
|
16
16
|
*
|
|
17
|
-
*export function CustomEdgeLabel({ label }) {
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*}
|
|
17
|
+
* export function CustomEdgeLabel({ label }) {
|
|
18
|
+
* return (
|
|
19
|
+
* <EdgeText
|
|
20
|
+
* x={100}
|
|
21
|
+
* y={100}
|
|
22
|
+
* label={label}
|
|
23
|
+
* labelStyle={{ fill: 'white' }}
|
|
24
|
+
* labelShowBg
|
|
25
|
+
* labelBgStyle={{ fill: 'red' }}
|
|
26
|
+
* labelBgPadding={[2, 4]}
|
|
27
|
+
* labelBgBorderRadius={2}
|
|
28
|
+
* />
|
|
29
|
+
* );
|
|
30
|
+
* }
|
|
31
31
|
*```
|
|
32
32
|
*/
|
|
33
33
|
export declare const EdgeText: import("react").MemoExoticComponent<typeof EdgeTextComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EdgeText.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeText.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iBAAS,iBAAiB,CAAC,EACzB,CAAC,EACD,CAAC,EACD,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"EdgeText.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/EdgeText.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iBAAS,iBAAiB,CAAC,EACzB,CAAC,EACD,CAAC,EACD,KAAK,EACL,UAAU,EACV,WAAkB,EAClB,YAAY,EACZ,cAAuB,EACvB,mBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,kDAqDf;kBAjEQ,iBAAiB;;;AAqE1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
|
|
@@ -1,6 +1,32 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { SmoothStepEdgeProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Component that can be used inside a custom edge to render a smooth step edge.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @example
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { SmoothStepEdge } from '@xyflow/react';
|
|
11
|
+
*
|
|
12
|
+
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
|
|
13
|
+
* return (
|
|
14
|
+
* <SmoothStepEdge
|
|
15
|
+
* sourceX={sourceX}
|
|
16
|
+
* sourceY={sourceY}
|
|
17
|
+
* targetX={targetX}
|
|
18
|
+
* targetY={targetY}
|
|
19
|
+
* sourcePosition={sourcePosition}
|
|
20
|
+
* targetPosition={targetPosition}
|
|
21
|
+
* />
|
|
22
|
+
* );
|
|
23
|
+
* }
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
3
26
|
declare const SmoothStepEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, sourcePosition, targetPosition, markerEnd, markerStart, pathOptions, interactionWidth, }: SmoothStepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
4
30
|
declare const SmoothStepEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, sourcePosition, targetPosition, markerEnd, markerStart, pathOptions, interactionWidth, }: SmoothStepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
5
31
|
export { SmoothStepEdge, SmoothStepEdgeInternal };
|
|
6
32
|
//# sourceMappingURL=SmoothStepEdge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmoothStepEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/SmoothStepEdge.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA4DvD,QAAA,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"SmoothStepEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/SmoothStepEdge.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA4DvD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,cAAc,qQA3Db,mBAAmB,6CA2DwC,CAAC;AAEnE;;GAEG;AACH,QAAA,MAAM,sBAAsB,qQAhErB,mBAAmB,6CAgE+C,CAAC;AAK1E,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -1,6 +1,32 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { StepEdgeProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Component that can be used inside a custom edge to render a step edge.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @example
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { StepEdge } from '@xyflow/react';
|
|
11
|
+
*
|
|
12
|
+
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
|
|
13
|
+
* return (
|
|
14
|
+
* <StepEdge
|
|
15
|
+
* sourceX={sourceX}
|
|
16
|
+
* sourceY={sourceY}
|
|
17
|
+
* targetX={targetX}
|
|
18
|
+
* targetY={targetY}
|
|
19
|
+
* sourcePosition={sourcePosition}
|
|
20
|
+
* targetPosition={targetPosition}
|
|
21
|
+
* />
|
|
22
|
+
* );
|
|
23
|
+
* }
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
3
26
|
declare const StepEdge: import("react").MemoExoticComponent<({ id, ...props }: StepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
4
30
|
declare const StepEdgeInternal: import("react").MemoExoticComponent<({ id, ...props }: StepEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
5
31
|
export { StepEdge, StepEdgeInternal };
|
|
6
32
|
//# sourceMappingURL=StepEdge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/StepEdge.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAoBjD,QAAA,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"StepEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/StepEdge.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAoBjD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,yDAvCmB,aAAa,6CAuCQ,CAAC;AAEvD;;GAEG;AACH,QAAA,MAAM,gBAAgB,yDA5CW,aAAa,6CA4Ce,CAAC;AAK9D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { StraightEdgeProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Component that can be used inside a custom edge to render a straight line.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @example
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { StraightEdge } from '@xyflow/react';
|
|
11
|
+
*
|
|
12
|
+
* function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
|
|
13
|
+
* return (
|
|
14
|
+
* <StraightEdge
|
|
15
|
+
* sourceX={sourceX}
|
|
16
|
+
* sourceY={sourceY}
|
|
17
|
+
* targetX={targetX}
|
|
18
|
+
* targetY={targetY}
|
|
19
|
+
* />
|
|
20
|
+
* );
|
|
21
|
+
* }
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
3
24
|
declare const StraightEdge: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: StraightEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
25
|
+
/**
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
4
28
|
declare const StraightEdgeInternal: import("react").MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }: StraightEdgeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
5
29
|
export { StraightEdge, StraightEdgeInternal };
|
|
6
30
|
//# sourceMappingURL=StraightEdge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StraightEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/StraightEdge.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAgDrD,QAAA,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"StraightEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/StraightEdge.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAgDrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,YAAY,wNAhDX,iBAAiB,6CAgDsC,CAAC;AAE/D;;GAEG;AACH,QAAA,MAAM,oBAAoB,wNArDnB,iBAAiB,6CAqD6C,CAAC;AAKtE,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAqBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CAyMX"}
|
|
@@ -2,6 +2,7 @@ import { type KeyCode } from '@xyflow/system';
|
|
|
2
2
|
export type UseKeyPressOptions = {
|
|
3
3
|
target?: Window | Document | HTMLElement | ShadowRoot | null;
|
|
4
4
|
actInsideInputWithModifier?: boolean;
|
|
5
|
+
preventDefault?: boolean;
|
|
5
6
|
};
|
|
6
7
|
/**
|
|
7
8
|
* This hook lets you listen for specific key codes and tells you whether they are
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAC7D,0BAA0B,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAC7D,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAOzB,OAAO,GAAE,OAAO,GAAG,IAAW,EAC9B,OAAO,GAAE,kBAA6E,GACrF,OAAO,CAsGT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EAKL,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAiPA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useViewportHelper.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useViewportHelper.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,QAAO,uBAoH7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
|
|
|
9
9
|
export { BaseEdge } from './components/Edges/BaseEdge';
|
|
10
10
|
export { ReactFlowProvider } from './components/ReactFlowProvider';
|
|
11
11
|
export { Panel, type PanelProps } from './components/Panel';
|
|
12
|
-
export { EdgeLabelRenderer } from './components/EdgeLabelRenderer';
|
|
12
|
+
export { EdgeLabelRenderer, type EdgeLabelRendererProps } from './components/EdgeLabelRenderer';
|
|
13
13
|
export { ViewportPortal } from './components/ViewportPortal';
|
|
14
14
|
export { useReactFlow } from './hooks/useReactFlow';
|
|
15
15
|
export { useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|