@xyflow/react 12.3.5 → 12.4.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.
Files changed (52) hide show
  1. package/dist/esm/components/Edges/BaseEdge.d.ts +1 -1
  2. package/dist/esm/components/Edges/BaseEdge.d.ts.map +1 -1
  3. package/dist/esm/components/NodeWrapper/index.d.ts.map +1 -1
  4. package/dist/esm/components/NodesSelection/index.d.ts.map +1 -1
  5. package/dist/esm/components/Panel/index.d.ts +8 -2
  6. package/dist/esm/components/Panel/index.d.ts.map +1 -1
  7. package/dist/esm/container/EdgeRenderer/index.d.ts.map +1 -1
  8. package/dist/esm/container/Pane/index.d.ts.map +1 -1
  9. package/dist/esm/hooks/useHandleConnections.d.ts +1 -0
  10. package/dist/esm/hooks/useHandleConnections.d.ts.map +1 -1
  11. package/dist/esm/hooks/useNodeConnections.d.ts +22 -0
  12. package/dist/esm/hooks/useNodeConnections.d.ts.map +1 -0
  13. package/dist/esm/hooks/useReactFlow.d.ts.map +1 -1
  14. package/dist/esm/index.d.ts +2 -1
  15. package/dist/esm/index.d.ts.map +1 -1
  16. package/dist/esm/index.js +92 -57
  17. package/dist/esm/index.mjs +92 -57
  18. package/dist/esm/store/index.d.ts.map +1 -1
  19. package/dist/esm/types/component-props.d.ts +1 -1
  20. package/dist/esm/types/component-props.d.ts.map +1 -1
  21. package/dist/esm/types/edges.d.ts +3 -15
  22. package/dist/esm/types/edges.d.ts.map +1 -1
  23. package/dist/esm/types/instance.d.ts +15 -2
  24. package/dist/esm/types/instance.d.ts.map +1 -1
  25. package/dist/esm/types/nodes.d.ts +1 -1
  26. package/dist/esm/types/nodes.d.ts.map +1 -1
  27. package/dist/umd/components/Edges/BaseEdge.d.ts +1 -1
  28. package/dist/umd/components/Edges/BaseEdge.d.ts.map +1 -1
  29. package/dist/umd/components/NodeWrapper/index.d.ts.map +1 -1
  30. package/dist/umd/components/NodesSelection/index.d.ts.map +1 -1
  31. package/dist/umd/components/Panel/index.d.ts +8 -2
  32. package/dist/umd/components/Panel/index.d.ts.map +1 -1
  33. package/dist/umd/container/EdgeRenderer/index.d.ts.map +1 -1
  34. package/dist/umd/container/Pane/index.d.ts.map +1 -1
  35. package/dist/umd/hooks/useHandleConnections.d.ts +1 -0
  36. package/dist/umd/hooks/useHandleConnections.d.ts.map +1 -1
  37. package/dist/umd/hooks/useNodeConnections.d.ts +22 -0
  38. package/dist/umd/hooks/useNodeConnections.d.ts.map +1 -0
  39. package/dist/umd/hooks/useReactFlow.d.ts.map +1 -1
  40. package/dist/umd/index.d.ts +2 -1
  41. package/dist/umd/index.d.ts.map +1 -1
  42. package/dist/umd/index.js +2 -2
  43. package/dist/umd/store/index.d.ts.map +1 -1
  44. package/dist/umd/types/component-props.d.ts +1 -1
  45. package/dist/umd/types/component-props.d.ts.map +1 -1
  46. package/dist/umd/types/edges.d.ts +3 -15
  47. package/dist/umd/types/edges.d.ts.map +1 -1
  48. package/dist/umd/types/instance.d.ts +15 -2
  49. package/dist/umd/types/instance.d.ts.map +1 -1
  50. package/dist/umd/types/nodes.d.ts +1 -1
  51. package/dist/umd/types/nodes.d.ts.map +1 -1
  52. package/package.json +2 -2
@@ -1,3 +1,3 @@
1
1
  import type { BaseEdgeProps } from '../../types';
2
- export declare function BaseEdge({ id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, className, interactionWidth, }: BaseEdgeProps): import("react/jsx-runtime").JSX.Element;
2
+ export declare function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth, ...props }: BaseEdgeProps): import("react/jsx-runtime").JSX.Element;
3
3
  //# sourceMappingURL=BaseEdge.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/BaseEdge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,gBAAqB,GACtB,EAAE,aAAa,2CAmCf"}
1
+ {"version":3,"file":"BaseEdge.d.ts","sourceRoot":"","sources":["../../../src/components/Edges/BaseEdge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,gBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,aAAa,2CA2Bf"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAgB,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExE,wBAAgB,WAAW,CAAC,QAAQ,SAAS,IAAI,EAAE,EACjD,EAAE,EACF,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,kDA+K5B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodeWrapper/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAgB,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExE,wBAAgB,WAAW,CAAC,QAAQ,SAAS,IAAI,EAAE,EACjD,EAAE,EACF,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,OAAO,GACR,EAAE,gBAAgB,CAAC,QAAQ,CAAC,kDAkL5B"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodesSelection/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAqB,KAAK,UAAU,EAAsB,MAAM,OAAO,CAAC;AAS/E,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAeF,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,EAAE,EACpD,sBAAsB,EACtB,cAAc,EACd,mBAAmB,GACpB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,kDA2D/B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NodesSelection/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAqB,KAAK,UAAU,EAAsB,MAAM,OAAO,CAAC;AAS/E,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAeF,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,EAAE,EACpD,sBAAsB,EACtB,cAAc,EACd,mBAAmB,GACpB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,kDA6D/B"}
@@ -1,4 +1,4 @@
1
- import type { HTMLAttributes, ReactNode } from 'react';
1
+ import { type HTMLAttributes, type ReactNode } from 'react';
2
2
  import type { PanelPosition } from '@xyflow/system';
3
3
  export type PanelProps = HTMLAttributes<HTMLDivElement> & {
4
4
  /** Set position of the panel
@@ -7,5 +7,11 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
7
7
  position?: PanelPosition;
8
8
  children: ReactNode;
9
9
  };
10
- export declare function Panel({ position, children, className, style, ...rest }: PanelProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare const Panel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
11
+ /** Set position of the panel
12
+ * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
13
+ */
14
+ position?: PanelPosition | undefined;
15
+ children: ReactNode;
16
+ } & import("react").RefAttributes<HTMLDivElement>>;
11
17
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKpD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAIF,wBAAgB,KAAK,CAAC,EAAE,QAAqB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAa/F"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAKpD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,KAAK;IAThB;;OAEG;;cAEO,SAAS;kDAqBpB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/EdgeRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,IAAI,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAE9D,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACzD,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,aAAa,GACb,mBAAmB,GACnB,oBAAoB,GACpB,2BAA2B,GAC3B,aAAa,GACb,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,MAAM,GACN,qBAAqB,GACrB,WAAW,CACd,GAAG;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAYF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,kBAAkB,EAClB,yBAAyB,EACzB,IAAI,EACJ,SAAS,EACT,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,GACpB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CAoC7B;kBArDQ,qBAAqB;;;AAyD9B,eAAO,MAAM,YAAY,8BAA8D,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/EdgeRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,IAAI,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAE9D,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACzD,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,aAAa,GACb,mBAAmB,GACnB,oBAAoB,GACpB,2BAA2B,GAC3B,aAAa,GACb,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,MAAM,GACN,qBAAqB,GACrB,WAAW,CACd,GAAG;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAUF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,kBAAkB,EAClB,yBAAyB,EACzB,IAAI,EACJ,SAAS,EACT,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,GACpB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CAoC7B;kBArDQ,qBAAqB;;;AAyD9B,eAAO,MAAM,YAAY,8BAA8D,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;AASf,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;AAoBF,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"}
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;AAoBF,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,2CAoMX"}
@@ -10,6 +10,7 @@ type useHandleConnectionsParams = {
10
10
  * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
11
11
  *
12
12
  * @public
13
+ * @deprecated Use `useNodeConnections` instead.
13
14
  * @param param.type - handle type 'source' or 'target'
14
15
  * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
15
16
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
@@ -1 +1 @@
1
- {"version":3,"file":"useHandleConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useHandleConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EAGX,MAAM,gBAAgB,CAAC;AAKxB,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,EAAS,EACT,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,0BAA0B,GAAG,gBAAgB,EAAE,CAuBjD"}
1
+ {"version":3,"file":"useHandleConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useHandleConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EAGX,MAAM,gBAAgB,CAAC;AAKxB,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,EAAE,EACF,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,0BAA0B,GAAG,gBAAgB,EAAE,CA2BjD"}
@@ -0,0 +1,22 @@
1
+ import { Connection, NodeConnection, HandleType } from '@xyflow/system';
2
+ type UseNodeConnectionsParams = {
3
+ id?: string;
4
+ handleType?: HandleType;
5
+ handleId?: string;
6
+ onConnect?: (connections: Connection[]) => void;
7
+ onDisconnect?: (connections: Connection[]) => void;
8
+ };
9
+ /**
10
+ * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
11
+ *
12
+ * @public
13
+ * @param param.id - node id - optional if called inside a custom node
14
+ * @param param.handleType - filter by handle type 'source' or 'target'
15
+ * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
16
+ * @param param.onConnect - gets called when a connection is established
17
+ * @param param.onDisconnect - gets called when a connection is removed
18
+ * @returns an array with connections
19
+ */
20
+ export declare function useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect, }?: UseNodeConnectionsParams): NodeConnection[];
21
+ export {};
22
+ //# sourceMappingURL=useNodeConnections.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useNodeConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodeConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EAIX,MAAM,gBAAgB,CAAC;AAOxB,KAAK,wBAAwB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,GACb,GAAE,wBAA6B,GAAG,cAAc,EAAE,CA8BlD"}
@@ -1 +1 @@
1
- {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAgD,MAAM,UAAU,CAAC;AAI5G;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAgOA"}
1
+ {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAgD,MAAM,UAAU,CAAC;AAI5G;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAsOA"}
@@ -23,6 +23,7 @@ export { useOnViewportChange, type UseOnViewportChangeOptions } from './hooks/us
23
23
  export { useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
24
24
  export { useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
25
25
  export { useHandleConnections } from './hooks/useHandleConnections';
26
+ export { useNodeConnections } from './hooks/useNodeConnections';
26
27
  export { useNodesData } from './hooks/useNodesData';
27
28
  export { useConnection } from './hooks/useConnection';
28
29
  export { useInternalNode } from './hooks/useInternalNode';
@@ -31,7 +32,7 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
31
32
  export { isNode, isEdge } from './utils/general';
32
33
  export * from './additional-components';
33
34
  export * from './types';
34
- export { type Align, type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant, type ResizeParams, type ResizeParamsWithDirection, type ResizeDragEvent, type NodeChange, type NodeDimensionChange, type NodePositionChange, type NodeSelectionChange, type NodeRemoveChange, type NodeAddChange, type NodeReplaceChange, type EdgeChange, type EdgeSelectionChange, type EdgeRemoveChange, type EdgeAddChange, type EdgeReplaceChange, type KeyCode, type ConnectionState, type FinalConnectionState, type ConnectionInProgress, type NoConnection, } from '@xyflow/system';
35
+ export { type Align, type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, ResizeControlVariant, type ResizeParams, type ResizeParamsWithDirection, type ResizeDragEvent, type NodeChange, type NodeDimensionChange, type NodePositionChange, type NodeSelectionChange, type NodeRemoveChange, type NodeAddChange, type NodeReplaceChange, type EdgeChange, type EdgeSelectionChange, type EdgeRemoveChange, type EdgeAddChange, type EdgeReplaceChange, type KeyCode, type ConnectionState, type FinalConnectionState, type ConnectionInProgress, type NoConnection, } from '@xyflow/system';
35
36
  import { type Handle as HandleBound } from '@xyflow/system';
36
37
  export type Handle = HandleBound;
37
38
  export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getViewportForBounds, getNodesBounds, getIncomers, getOutgoers, addEdge, reconnectEdge, getConnectedEdges, } from '@xyflow/system';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/esm/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client"
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import cc from 'classcat';
4
- import { errorMessages, infiniteExtent, isInputDOMNode, getFitViewNodes, getDimensions, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, evaluateAbsolutePosition, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
5
- export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
6
- import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
4
+ import { errorMessages, infiniteExtent, isInputDOMNode, getFitViewNodes, getDimensions, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, evaluateAbsolutePosition, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
5
+ export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
6
+ import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';
7
7
  import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
8
8
  import { shallow } from 'zustand/shallow';
9
9
  import { createPortal } from 'react-dom';
@@ -68,11 +68,11 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }) {
68
68
  }
69
69
 
70
70
  const selector$n = (s) => (s.userSelectionActive ? 'none' : 'all');
71
- function Panel({ position = 'top-left', children, className, style, ...rest }) {
71
+ const Panel = forwardRef(({ position = 'top-left', children, className, style, ...rest }, ref) => {
72
72
  const pointerEvents = useStore(selector$n);
73
73
  const positionClasses = `${position}`.split('-');
74
- return (jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ...rest, children: children }));
75
- }
74
+ return (jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ref: ref, ...rest, children: children }));
75
+ });
76
76
 
77
77
  function Attribution({ proOptions, position = 'bottom-right' }) {
78
78
  if (proOptions?.hideAttribution) {
@@ -865,11 +865,10 @@ function useReactFlow() {
865
865
  ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)
866
866
  : nodeToUse.position;
867
867
  const nodeWithPosition = {
868
- id: nodeToUse.id,
868
+ ...nodeToUse,
869
869
  position,
870
870
  width: nodeToUse.measured?.width ?? nodeToUse.width,
871
871
  height: nodeToUse.measured?.height ?? nodeToUse.height,
872
- data: nodeToUse.data,
873
872
  };
874
873
  return nodeToRect(nodeWithPosition);
875
874
  };
@@ -997,7 +996,11 @@ function useReactFlow() {
997
996
  },
998
997
  getHandleConnections: ({ type, id, nodeId }) => Array.from(store
999
998
  .getState()
1000
- .connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)
999
+ .connectionLookup.get(`${nodeId}-${type}${id ? `-${id}` : ''}`)
1000
+ ?.values() ?? []),
1001
+ getNodeConnections: ({ type, handleId, nodeId }) => Array.from(store
1002
+ .getState()
1003
+ .connectionLookup.get(`${nodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`)
1001
1004
  ?.values() ?? []),
1002
1005
  };
1003
1006
  }, []);
@@ -1199,22 +1202,16 @@ const selector$h = (s) => ({
1199
1202
  dragging: s.paneDragging,
1200
1203
  });
1201
1204
  function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
1202
- const container = useRef(null);
1203
1205
  const store = useStoreApi();
1204
- const prevSelectedNodesCount = useRef(0);
1205
- const prevSelectedEdgesCount = useRef(0);
1206
- const containerBounds = useRef();
1207
- const edgeIdLookup = useRef(new Map());
1208
1206
  const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$h, shallow);
1209
1207
  const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
1208
+ const container = useRef(null);
1209
+ const containerBounds = useRef();
1210
+ const selectedNodeIds = useRef(new Set());
1211
+ const selectedEdgeIds = useRef(new Set());
1210
1212
  // Used to prevent click events when the user lets go of the selectionKey during a selection
1211
1213
  const selectionInProgress = useRef(false);
1212
1214
  const selectionStarted = useRef(false);
1213
- const resetUserSelection = () => {
1214
- store.setState({ userSelectionActive: false, userSelectionRect: null });
1215
- prevSelectedNodesCount.current = 0;
1216
- prevSelectedEdgesCount.current = 0;
1217
- };
1218
1215
  const onClick = (event) => {
1219
1216
  // We prevent click events when the user let go of the selectionKey during a selection
1220
1217
  if (selectionInProgress.current) {
@@ -1234,7 +1231,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
1234
1231
  };
1235
1232
  const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;
1236
1233
  const onPointerDown = (event) => {
1237
- const { resetSelectedElements, domNode, edgeLookup } = store.getState();
1234
+ const { resetSelectedElements, domNode } = store.getState();
1238
1235
  containerBounds.current = domNode?.getBoundingClientRect();
1239
1236
  if (!elementsSelectable ||
1240
1237
  !isSelecting ||
@@ -1246,11 +1243,6 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
1246
1243
  event.target?.setPointerCapture?.(event.pointerId);
1247
1244
  selectionStarted.current = true;
1248
1245
  selectionInProgress.current = false;
1249
- edgeIdLookup.current = new Map();
1250
- for (const [id, edge] of edgeLookup) {
1251
- edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
1252
- edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
1253
- }
1254
1246
  const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
1255
1247
  resetSelectedElements();
1256
1248
  store.setState({
@@ -1266,7 +1258,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
1266
1258
  onSelectionStart?.(event);
1267
1259
  };
1268
1260
  const onPointerMove = (event) => {
1269
- const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
1261
+ const { userSelectionRect, transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, } = store.getState();
1270
1262
  if (!containerBounds.current || !userSelectionRect) {
1271
1263
  return;
1272
1264
  }
@@ -1281,26 +1273,29 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
1281
1273
  width: Math.abs(mouseX - startX),
1282
1274
  height: Math.abs(mouseY - startY),
1283
1275
  };
1284
- const selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true);
1285
- const selectedEdgeIds = new Set();
1286
- const selectedNodeIds = new Set();
1287
- for (const selectedNode of selectedNodes) {
1288
- selectedNodeIds.add(selectedNode.id);
1289
- const edgeIds = edgeIdLookup.current.get(selectedNode.id);
1290
- if (edgeIds) {
1291
- for (const edgeId of edgeIds) {
1292
- selectedEdgeIds.add(edgeId);
1276
+ const prevSelectedNodeIds = selectedNodeIds.current;
1277
+ const prevSelectedEdgeIds = selectedEdgeIds.current;
1278
+ selectedNodeIds.current = new Set(getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true).map((node) => node.id));
1279
+ selectedEdgeIds.current = new Set();
1280
+ const edgesSelectable = defaultEdgeOptions?.selectable ?? true;
1281
+ // We look for all edges connected to the selected nodes
1282
+ for (const nodeId of selectedNodeIds.current) {
1283
+ const connections = connectionLookup.get(nodeId);
1284
+ if (!connections)
1285
+ continue;
1286
+ for (const { edgeId } of connections.values()) {
1287
+ const edge = edgeLookup.get(edgeId);
1288
+ if (edge && (edge.selectable ?? edgesSelectable)) {
1289
+ selectedEdgeIds.current.add(edgeId);
1293
1290
  }
1294
1291
  }
1295
1292
  }
1296
- if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
1297
- prevSelectedNodesCount.current = selectedNodeIds.size;
1298
- const changes = getSelectionChanges(nodeLookup, selectedNodeIds, true);
1293
+ if (!areSetsEqual(prevSelectedNodeIds, selectedNodeIds.current)) {
1294
+ const changes = getSelectionChanges(nodeLookup, selectedNodeIds.current, true);
1299
1295
  triggerNodeChanges(changes);
1300
1296
  }
1301
- if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
1302
- prevSelectedEdgesCount.current = selectedEdgeIds.size;
1303
- const changes = getSelectionChanges(edgeLookup, selectedEdgeIds);
1297
+ if (!areSetsEqual(prevSelectedEdgeIds, selectedEdgeIds.current)) {
1298
+ const changes = getSelectionChanges(edgeLookup, selectedEdgeIds.current);
1304
1299
  triggerEdgeChanges(changes);
1305
1300
  }
1306
1301
  store.setState({
@@ -1320,10 +1315,11 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
1320
1315
  if (!userSelectionActive && userSelectionRect && event.target === container.current) {
1321
1316
  onClick?.(event);
1322
1317
  }
1323
- if (prevSelectedNodesCount.current > 0) {
1324
- store.setState({ nodesSelectionActive: true });
1325
- }
1326
- resetUserSelection();
1318
+ store.setState({
1319
+ userSelectionActive: false,
1320
+ userSelectionRect: null,
1321
+ nodesSelectionActive: selectedNodeIds.current.size > 0,
1322
+ });
1327
1323
  onSelectionEnd?.(event);
1328
1324
  // If the user kept holding the selectionKey during the selection,
1329
1325
  // we need to reset the selectionInProgress, so the next click event is not prevented
@@ -1685,6 +1681,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
1685
1681
  : undefined;
1686
1682
  const onKeyDown = (event) => {
1687
1683
  if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
1684
+ event.preventDefault();
1688
1685
  moveSelectedNodes({
1689
1686
  direction: arrowKeyDiffs[event.key],
1690
1687
  factor: event.shiftKey ? 4 : 1,
@@ -1897,6 +1894,8 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
1897
1894
  });
1898
1895
  }
1899
1896
  else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
1897
+ // prevent default scrolling behavior on arrow key press when node is moved
1898
+ event.preventDefault();
1900
1899
  store.setState({
1901
1900
  ariaLiveMessage: `Moved selected node ${event.key
1902
1901
  .replace('Arrow', '')
@@ -2093,8 +2092,8 @@ function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, l
2093
2092
  EdgeTextComponent.displayName = 'EdgeText';
2094
2093
  const EdgeText = memo(EdgeTextComponent);
2095
2094
 
2096
- function BaseEdge({ id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, className, interactionWidth = 20, }) {
2097
- return (jsxs(Fragment, { children: [jsx("path", { id: id, style: style, d: path, fill: "none", className: cc(['react-flow__edge-path', className]), markerEnd: markerEnd, markerStart: markerStart }), interactionWidth && (jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
2095
+ function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth = 20, ...props }) {
2096
+ return (jsxs(Fragment, { children: [jsx("path", { ...props, d: path, fill: "none", className: cc(['react-flow__edge-path', props.className]) }), interactionWidth && (jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
2098
2097
  }
2099
2098
 
2100
2099
  function getControl({ pos, x1, y1, x2, y2 }) {
@@ -2430,8 +2429,6 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
2430
2429
  }
2431
2430
 
2432
2431
  const selector$a = (s) => ({
2433
- width: s.width,
2434
- height: s.height,
2435
2432
  edgesFocusable: s.edgesFocusable,
2436
2433
  edgesReconnectable: s.edgesReconnectable,
2437
2434
  elementsSelectable: s.elementsSelectable,
@@ -2775,13 +2772,19 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
2775
2772
  const parentExpandChildren = [];
2776
2773
  const changes = [];
2777
2774
  for (const [id, dragItem] of nodeDragItems) {
2775
+ const expandParent = !!(dragItem?.expandParent && dragItem?.parentId && dragItem?.position);
2778
2776
  const change = {
2779
2777
  id,
2780
2778
  type: 'position',
2781
- position: dragItem.position,
2779
+ position: expandParent
2780
+ ? {
2781
+ x: Math.max(0, dragItem.position.x),
2782
+ y: Math.max(0, dragItem.position.y),
2783
+ }
2784
+ : dragItem.position,
2782
2785
  dragging,
2783
2786
  };
2784
- if (dragItem?.expandParent && dragItem?.parentId && change.position) {
2787
+ if (expandParent) {
2785
2788
  parentExpandChildren.push({
2786
2789
  id,
2787
2790
  parentId: dragItem.parentId,
@@ -2791,8 +2794,6 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
2791
2794
  height: dragItem.measured.height,
2792
2795
  },
2793
2796
  });
2794
- change.position.x = Math.max(0, change.position.x);
2795
- change.position.y = Math.max(0, change.position.y);
2796
2797
  }
2797
2798
  changes.push(change);
2798
2799
  }
@@ -2989,7 +2990,7 @@ const wrapperStyle = {
2989
2990
  function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
2990
2991
  const rfId = id || '1';
2991
2992
  const colorModeClassName = useColorModeClass(colorMode);
2992
- return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
2993
+ return (jsx("div", { "data-testid": "rf__wrapper", ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
2993
2994
  }
2994
2995
  var index = fixedForwardRef(ReactFlow);
2995
2996
 
@@ -3169,6 +3170,7 @@ function useNodesInitialized(options = defaultOptions) {
3169
3170
  * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
3170
3171
  *
3171
3172
  * @public
3173
+ * @deprecated Use `useNodeConnections` instead.
3172
3174
  * @param param.type - handle type 'source' or 'target'
3173
3175
  * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
3174
3176
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
@@ -3176,11 +3178,44 @@ function useNodesInitialized(options = defaultOptions) {
3176
3178
  * @param param.onDisconnect - gets called when a connection is removed
3177
3179
  * @returns an array with handle connections
3178
3180
  */
3179
- function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect, }) {
3181
+ function useHandleConnections({ type, id, nodeId, onConnect, onDisconnect, }) {
3182
+ console.warn('[DEPRECATED] `useHandleConnections` is deprecated. Instead use `useNodeConnections` https://reactflow.dev/api-reference/hooks/useNodeConnections');
3180
3183
  const _nodeId = useNodeId();
3181
3184
  const currentNodeId = nodeId ?? _nodeId;
3182
3185
  const prevConnections = useRef(null);
3183
- const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`), areConnectionMapsEqual);
3186
+ const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`), areConnectionMapsEqual);
3187
+ useEffect(() => {
3188
+ // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
3189
+ if (prevConnections.current && prevConnections.current !== connections) {
3190
+ const _connections = connections ?? new Map();
3191
+ handleConnectionChange(prevConnections.current, _connections, onDisconnect);
3192
+ handleConnectionChange(_connections, prevConnections.current, onConnect);
3193
+ }
3194
+ prevConnections.current = connections ?? new Map();
3195
+ }, [connections, onConnect, onDisconnect]);
3196
+ return useMemo(() => Array.from(connections?.values() ?? []), [connections]);
3197
+ }
3198
+
3199
+ const error014 = errorMessages['error014']();
3200
+ /**
3201
+ * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
3202
+ *
3203
+ * @public
3204
+ * @param param.id - node id - optional if called inside a custom node
3205
+ * @param param.handleType - filter by handle type 'source' or 'target'
3206
+ * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
3207
+ * @param param.onConnect - gets called when a connection is established
3208
+ * @param param.onDisconnect - gets called when a connection is removed
3209
+ * @returns an array with connections
3210
+ */
3211
+ function useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect, } = {}) {
3212
+ const nodeId = useNodeId();
3213
+ const currentNodeId = id ?? nodeId;
3214
+ if (!currentNodeId) {
3215
+ throw new Error(error014);
3216
+ }
3217
+ const prevConnections = useRef(null);
3218
+ const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`), areConnectionMapsEqual);
3184
3219
  useEffect(() => {
3185
3220
  // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
3186
3221
  if (prevConnections.current && prevConnections.current !== connections) {
@@ -3684,4 +3719,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
3684
3719
  return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
3685
3720
  }
3686
3721
 
3687
- export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
3722
+ export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };