alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge main

Browse Source
This commit is contained in:
peterkogo
2025-01-21 15:37:53 +01:00
parent 04b9c828bb 1d29ae5f75
commit b1dfd12fc8
22 changed files with 101 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/silly-pots-yell.md
View File

@@ -1,7 +0,0 @@
---
'@xyflow/react': minor
'@xyflow/svelte': patch
'@xyflow/system': patch
---
Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.

6
.changeset/twelve-bottles-turn.md
View File

@@ -1,6 +0,0 @@
---
'@xyflow/react': patch
'@xyflow/system': patch
---
Optimize selections and take into account if edges connected to selected nodes are actually selectable.

2
examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
View File

@@ -47,7 +47,7 @@ const AddNodeOnEdgeDrop = () => {
(event) => {
if (!connectingNodeId.current) return;
const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('react-flow__pane');
const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('react-flow__pane');
if (targetIsPane && 'clientX' in event && 'clientY' in event) {
// we need to remove the wrapper bounds, in order to get the correct position

7
examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx
View File

@@ -28,10 +28,11 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
const CustomNode: FC<NodeProps> = ({ id }) => {
return (
<div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
<CustomHandle nodeId={id} type="target" position={Position.Left} />
<CustomHandle nodeId={id} type="target" position={Position.Left} id="t1" style={{ top: 10 }} />
<CustomHandle nodeId={id} type="target" position={Position.Left} id="t2" style={{ top: 20 }} />
<div>node {id}</div>
<CustomHandle nodeId={id} type="source" position={Position.Right} id="a" style={{ top: 10 }} />
<CustomHandle nodeId={id} type="source" position={Position.Right} id="b" style={{ top: 20 }} />
<CustomHandle nodeId={id} type="source" position={Position.Right} id="s1" style={{ top: 10 }} />
<CustomHandle nodeId={id} type="source" position={Position.Right} id="s2" style={{ top: 20 }} />
</div>
);
};

7
examples/react/src/examples/UseNodeConnections/index.tsx
View File

@@ -69,17 +69,16 @@ const initEdges = [
source: '1',
target: '3',
},
{
id: 'e4a-5',
source: '4',
sourceHandle: 'a',
sourceHandle: 's1',
target: '5',
},
{
id: 'e4b-5',
source: '4',
sourceHandle: 'b',
sourceHandle: 's2',
target: '6',
},
];
@@ -92,6 +91,8 @@ const CustomNodeFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
console.log(edges);
const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
return (

2
examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
View File

@@ -37,7 +37,7 @@
if (!connectingNodeId) return;
// See of connection landed inside the flow pane
const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('svelte-flow__pane');
const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('svelte-flow__pane');
if (targetIsPane && 'clientX' in event && 'clientY' in event) {
const id = getId();
const position = {

26
packages/react/CHANGELOG.md
View File

@@ -1,5 +1,31 @@
# @xyflow/react
## 12.4.1
### Patch Changes
- [#4949](https://github.com/xyflow/xyflow/pull/4949) [`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix useNodeConnection hook not returning all connected edges.
- Updated dependencies [[`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8)]:
- @xyflow/system@0.0.49
## 12.4.0
### Minor Changes
- [#4725](https://github.com/xyflow/xyflow/pull/4725) [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9) Thanks [@peterkogo](https://github.com/peterkogo)! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
### Patch Changes
- [#4947](https://github.com/xyflow/xyflow/pull/4947) [`868aa3f3`](https://github.com/xyflow/xyflow/commit/868aa3f3db8223ea1b04a68aa027ea99fd1e91c8) Thanks [@moklick](https://github.com/moklick)! - Export ResizeControlVariant correctly as a value.
- [#4880](https://github.com/xyflow/xyflow/pull/4880) [`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a) Thanks [@crimx](https://github.com/crimx)! - Add type check for all event targets
- [#4929](https://github.com/xyflow/xyflow/pull/4929) [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d) Thanks [@peterkogo](https://github.com/peterkogo)! - Optimize selections and take into account if edges connected to selected nodes are actually selectable.
- Updated dependencies [[`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a), [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9), [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d)]:
- @xyflow/system@0.0.48
## 12.3.6
### Patch Changes

2
packages/react/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@xyflow/react",
"version": "12.3.6",
"version": "12.4.1",
"description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
"keywords": [
"react",

2
packages/react/src/components/Handle/index.tsx
View File

@@ -175,7 +175,7 @@ function HandleComponent(
return;
}
const doc = getHostForElement(event.target as HTMLElement);
const doc = getHostForElement(event.target);
const isValidConnectionHandler = isValidConnection || isValidConnectionStore;
const { connection, isValid } = XYHandle.isValid(event.nativeEvent, {
handle: {

4
packages/react/src/container/Pane/index.tsx
View File

@@ -131,7 +131,7 @@ export function Pane({
return;
}
(event.target as Element)?.setPointerCapture?.(event.pointerId);
(event.target as Partial<Element> | null)?.setPointerCapture?.(event.pointerId);
selectionStarted.current = true;
selectionInProgress.current = false;
@@ -230,7 +230,7 @@ export function Pane({
return;
}
(event.target as Element)?.releasePointerCapture?.(event.pointerId);
(event.target as Partial<Element>)?.releasePointerCapture?.(event.pointerId);
const { userSelectionRect } = store.getState();
// We only want to trigger click functions when in selection mode if

2
packages/react/src/index.ts
View File

@@ -85,7 +85,7 @@ export {
type OnResizeEnd,
type ControlPosition,
type ControlLinePosition,
type ResizeControlVariant,
ResizeControlVariant,
type ResizeParams,
type ResizeParamsWithDirection,
type ResizeDragEvent,

24
packages/svelte/CHANGELOG.md
View File

@@ -1,5 +1,29 @@
# @xyflow/svelte
## 0.1.28
### Patch Changes
- [#4949](https://github.com/xyflow/xyflow/pull/4949) [`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix useNodeConnection hook not returning all connected edges.
- Updated dependencies [[`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8)]:
- @xyflow/system@0.0.49
## 0.1.27
### Patch Changes
- [#4937](https://github.com/xyflow/xyflow/pull/4937) [`9d940300`](https://github.com/xyflow/xyflow/commit/9d940300441b10f4d9eef4b07fac49a3e69d3503) Thanks [@jrmoynihan](https://github.com/jrmoynihan)! - Expose props of Controls
- [#4947](https://github.com/xyflow/xyflow/pull/4947) [`868aa3f3`](https://github.com/xyflow/xyflow/commit/868aa3f3db8223ea1b04a68aa027ea99fd1e91c8) Thanks [@moklick](https://github.com/moklick)! - Export ResizeControlVariant correctly as a value.
- [#4880](https://github.com/xyflow/xyflow/pull/4880) [`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a) Thanks [@crimx](https://github.com/crimx)! - Add type check for all event targets
- [#4725](https://github.com/xyflow/xyflow/pull/4725) [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9) Thanks [@peterkogo](https://github.com/peterkogo)! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
- Updated dependencies [[`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a), [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9), [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d)]:
- @xyflow/system@0.0.48
## 0.1.26
### Patch Changes

2
packages/svelte/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@xyflow/svelte",
"version": "0.1.26",
"version": "0.1.28",
"description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [
"svelte",

4
packages/svelte/src/lib/container/Pane/Pane.svelte
View File

@@ -99,7 +99,7 @@
return;
}
(event.target as Element)?.setPointerCapture?.(event.pointerId);
(event.target as Partial<Element> | null)?.setPointerCapture?.(event.pointerId);
const { x, y } = getEventPosition(event, containerBounds);
@@ -181,7 +181,7 @@
return;
}
(event.target as Element)?.releasePointerCapture?.(event.pointerId);
(event.target as Partial<Element> | null)?.releasePointerCapture?.(event.pointerId);
// We only want to trigger click functions when in selection mode if
// the user did not move the mouse.

2
packages/svelte/src/lib/index.ts
View File

@@ -103,7 +103,7 @@ export {
type OnResizeEnd,
type ControlPosition,
type ControlLinePosition,
type ResizeControlVariant,
ResizeControlVariant,
type ResizeParams,
type ResizeParamsWithDirection,
type ResizeDragEvent,

16
packages/system/CHANGELOG.md
View File

@@ -1,5 +1,21 @@
# @xyflow/system
## 0.0.49
### Patch Changes
- [#4949](https://github.com/xyflow/xyflow/pull/4949) [`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix useNodeConnection hook not returning all connected edges.
## 0.0.48
### Patch Changes
- [#4880](https://github.com/xyflow/xyflow/pull/4880) [`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a) Thanks [@crimx](https://github.com/crimx)! - Add type check for all event targets
- [#4725](https://github.com/xyflow/xyflow/pull/4725) [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9) Thanks [@peterkogo](https://github.com/peterkogo)! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
- [#4929](https://github.com/xyflow/xyflow/pull/4929) [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d) Thanks [@peterkogo](https://github.com/peterkogo)! - Optimize selections and take into account if edges connected to selected nodes are actually selectable.
## 0.0.47
### Patch Changes

2
packages/system/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@xyflow/system",
"version": "0.0.47",
"version": "0.0.49",
"description": "xyflow core system that powers React Flow and Svelte Flow.",
"keywords": [
"node-based UI",

12
packages/system/src/utils/dom.ts
View File

@@ -32,18 +32,20 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
height: node.offsetHeight,
});
export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
(element.getRootNode?.() as Document | ShadowRoot) || window?.document;
export const getHostForElement = (element: HTMLElement | EventTarget | null): Document | ShadowRoot =>
((element as Partial<HTMLElement> | null)?.getRootNode?.() as Document | ShadowRoot) || window?.document;
const inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];
export function isInputDOMNode(event: KeyboardEvent): boolean {
// using composed path for handling shadow dom
const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement;
const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute?.('contenteditable');
const target = (event.composedPath?.()?.[0] || event.target) as Element | null;
if (target?.nodeType !== 1 /* Node.ELEMENT_NODE */) return false;
const isInput = inputTags.includes(target.nodeName) || target.hasAttribute('contenteditable');
// when an input field is focused we don't want to trigger deletion or movement of nodes
return isInput || !!target?.closest('.nokey');
return isInput || !!target.closest('.nokey');
}
export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event;

4
packages/system/src/utils/store.ts
View File

@@ -498,8 +498,8 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeL
const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge;
const connection = { edgeId: edge.id, source: sourceNode, target: targetNode, sourceHandle, targetHandle };
const sourceKey = `${sourceNode}-${sourceHandle}`;
const targetKey = `${targetNode}-${targetHandle}`;
const sourceKey = `${sourceNode}-${sourceHandle}--${targetNode}-${targetHandle}`;
const targetKey = `${targetNode}-${targetHandle}--${sourceNode}-${sourceHandle}`;
addConnectionToLookup('source', connection, targetKey, connectionLookup, sourceNode, sourceHandle);
addConnectionToLookup('target', connection, sourceKey, connectionLookup, targetNode, targetHandle);

2
packages/system/src/xydrag/XYDrag.ts
View File

@@ -364,7 +364,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}
})
.filter((event: MouseEvent) => {
const target = event.target as HTMLDivElement;
const target = event.target;
const isDraggable =
!event.button &&
(!noDragClassName || !hasSelector(target, `.${noDragClassName}`, domNode)) &&

8
packages/system/src/xydrag/utils.ts
View File

@@ -18,13 +18,13 @@ export function isParentSelected<NodeType extends NodeBase>(node: NodeType, node
return isParentSelected(parentNode, nodeLookup);
}
export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
let current = target;
export function hasSelector(target: Element | EventTarget | null, selector: string, domNode: Element): boolean {
let current = target as Partial<Element> | null | undefined;
do {
if (current?.matches(selector)) return true;
if (current?.matches?.(selector)) return true;
if (current === domNode) return false;
current = current.parentElement as Element;
current = current?.parentElement;
} while (current);
return false;

2
packages/system/src/xyhandle/XYHandle.ts
View File

@@ -48,7 +48,7 @@ function onPointerDown(
}: OnPointerDownParams
) {
// when xyflow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement);
const doc = getHostForElement(event.target);
let autoPanId = 0;
let closestHandle: Handle | null;