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

Merge pull request #3929 from xyflow/extend-use-nodes-data

Browse Source 
Extend useNodesData by {id, type, data}
This commit is contained in:
Moritz Klack
2024-02-26 14:13:39 +01:00
committed by GitHub
parent c1beb6b58a 3fc3b7e603
commit 1c9a5f3b30
8 changed files with 81 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/react/src/examples/UseNodesData/ResultNode.tsx
View File

@@ -1,20 +1,18 @@
import { memo } from 'react';
import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
import { isTextNode, type MyNode } from '.';
function ResultNode() {
const connections = useHandleConnections({
type: 'target',
});
const nodesData = useNodesData(connections.map((connection) => connection.source));
const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));
const textNodes = nodesData.filter(isTextNode);
return (
<div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
<Handle type="target" position={Position.Left} />
<div>
incoming texts:{' '}
{nodesData?.filter((nodeData) => nodeData.text !== undefined).map(({ text }, i) => <div key={i}>{text}</div>) ||
'none'}
</div>
<div>incoming texts: {textNodes.map(({ data }, i) => <div key={i}>{data.text}</div>) || 'none'}</div>
</div>
);
}

8
examples/react/src/examples/UseNodesData/UppercaseNode.tsx
View File

@@ -1,16 +1,18 @@
import { memo, useEffect } from 'react';
import { Position, NodeProps, useReactFlow, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
import { isTextNode, type TextNode, type MyNode } from '.';
function UppercaseNode({ id }: NodeProps) {
const { updateNodeData } = useReactFlow();
const connections = useHandleConnections({
type: 'target',
});
const nodeData = useNodesData(connections[0]?.source);
const nodesData = useNodesData<MyNode>(connections[0]?.source);
const textNode = isTextNode(nodesData) ? nodesData : null;
useEffect(() => {
updateNodeData(id, { text: nodeData?.text.toUpperCase() });
}, [nodeData]);
updateNodeData(id, { text: textNode?.data.text.toUpperCase() });
}, [textNode]);
return (
<div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>

8
examples/react/src/examples/UseNodesData/index.tsx
View File

@@ -17,9 +17,13 @@ import UppercaseNode from './UppercaseNode';
export type TextNode = Node<{ text: string }, 'text'>;
export type ResultNode = Node<{}, 'result'>;
export type UppercaseNode = Node<{}, 'uppercase'>;
export type UppercaseNode = Node<{ text: string }, 'uppercase'>;
export type MyNode = TextNode | ResultNode | UppercaseNode;
export function isTextNode(node: any): node is TextNode {
return node.type === 'text';
}
const nodeTypes = {
text: TextNode,
result: ResultNode,
@@ -38,7 +42,7 @@ const initNodes: MyNode[] = [
{
id: '1a',
type: 'uppercase',
data: {},
data: { text: '' },
position: { x: 100, y: 0 },
},
{

21
examples/svelte/src/routes/examples/usenodesdata/+page.svelte
View File

@@ -1,3 +1,17 @@
<script context="module" lang="ts">
import type { Node } from '@xyflow/svelte';
type TextNodeType = Node<{ text: string }, 'text'>;
type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
type ResultNodeType = Node<{}, 'result'>;
export function isTextNode(node: any): node is TextNodeType {
return node.type === 'text';
}
export type MyNode = TextNodeType | UppercaseNodeType | ResultNodeType;
</script>
<script lang="ts">
import { writable } from 'svelte/store';
import {
@@ -6,7 +20,6 @@
Background,
BackgroundVariant,
MiniMap,
type Node,
type NodeTypes,
type Edge
} from '@xyflow/svelte';
@@ -22,7 +35,7 @@
result: ResultNode
};
const nodes = writable<Node[]>([
const nodes = writable<MyNode[]>([
{
id: '1',
type: 'text',
@@ -34,7 +47,9 @@
{
id: '1a',
type: 'uppercase',
data: {},
data: {
text: ''
},
position: { x: 100, y: 0 }
},
{

8
examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
View File

@@ -6,6 +6,7 @@
useNodesData,
type NodeProps
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';
type $$Props = NodeProps;
@@ -16,15 +17,16 @@
type: 'target'
});
$: nodeData = useNodesData($connections.map((connection) => connection.source));
$: nodeData = useNodesData<MyNode>($connections.map((connection) => connection.source));
$: textNodes = $nodeData.filter(isTextNode);
</script>
<div class="custom">
<Handle type="target" position={Position.Left} />
<div>incoming texts:</div>
{#each $nodeData as data}
<div>{data.text}</div>
{#each textNodes as textNode}
<div>{textNode.data.text}</div>
{/each}
</div>

6
examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
View File

@@ -7,6 +7,7 @@
useSvelteFlow,
type NodeProps
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';
type $$Props = NodeProps;
@@ -18,10 +19,11 @@
type: 'target'
});
$: nodeData = useNodesData($connections[0]?.source);
$: nodeData = useNodesData<MyNode>($connections[0]?.source);
$: textNode = isTextNode($nodeData) ? $nodeData : null;
$: {
updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' });
}
</script>

37
packages/react/src/hooks/useNodesData.ts
View File

@@ -4,40 +4,45 @@ import { shallow } from 'zustand/shallow';
import { useStore } from '../hooks/useStore';
import type { Node } from '../types';
export interface NodeDataReturn<NodeType extends Node> {
id: string;
type: NodeType['type'];
data: NodeType['data'];
}
/**
* Hook for receiving data of one or multiple nodes
*
* @public
* @param nodeId - The id (or ids) of the node to get the data from
* @param guard - Optional guard function to narrow down the node type
* @returns An array od data objects
* @returns An object (or array of object) with {id, type, data} representing each node
*/
export function useNodesData<NodeType extends Node = Node>(nodeId: string): NodeType['data'] | null;
export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): NodeType['data'][];
export function useNodesData<NodeType extends Node = Node>(
nodeIds: string[],
guard: (node: Node) => node is NodeType
): NodeType['data'][];
nodeId: string
): Pick<NodeType, 'id' | 'type' | 'data'> | null;
export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useNodesData(nodeIds: any): any {
const nodesData = useStore(
useCallback(
(s) => {
if (!Array.isArray(nodeIds)) {
return s.nodeLookup.get(nodeIds)?.data || null;
}
const data = [];
const isArrayOfIds = Array.isArray(nodeIds);
const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
for (const nodeId of nodeIds) {
const nodeData = s.nodeLookup.get(nodeId)?.data;
if (nodeData) {
data.push(nodeData);
for (const nodeId of _nodeIds) {
const node = s.nodeLookup.get(nodeId);
if (node) {
data.push({
id: node.id,
type: node.type,
data: node.data,
});
}
}
return data;
return isArrayOfIds ? data : data[0] ?? null;
},
[nodeIds]
),

49
packages/svelte/src/lib/hooks/useNodesData.ts
View File

@@ -3,17 +3,13 @@ import { derived, type Readable } from 'svelte/store';
import type { Node } from '$lib/types';
import { useStore } from '$lib/store';
function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] | null)[] | null) {
if ((!a && !b) || (!a?.length && !b?.length)) {
true;
}
if (!a || !b || a.length !== b.length) {
function areNodesDataEqual(a: any[], b: any[]) {
if (a.length !== b.length) {
return false;
}
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
if (a[i].data !== b[i].data) {
return false;
}
}
@@ -26,47 +22,38 @@ function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] |
*
* @public
* @param nodeId - The id (or ids) of the node to get the data from
* @param guard - Optional guard function to narrow down the node type
* @returns A readable store with an array of data objects
*/
export function useNodesData<NodeType extends Node = Node>(
nodeId: string
): Readable<NodeType['data'] | null>;
): Readable<Pick<NodeType, 'id' | 'data' | 'type'> | null>;
export function useNodesData<NodeType extends Node = Node>(
nodeIds: string[]
): Readable<NodeType['data'][]>;
export function useNodesData<NodeType extends Node = Node>(
nodeIds: string[],
guard: (node: Node) => node is NodeType
): Readable<NodeType['data'][]>;
): Readable<Pick<NodeType, 'id' | 'data' | 'type'>[]>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useNodesData(nodeIds: any): any {
const { nodes, nodeLookup } = useStore();
let prevNodesData: (Node['data'] | null)[] | null = null;
let prevNodesData: any = [];
return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
let nextNodesData: (Node['data'] | null)[] | null = null;
const nodeIdArray = Array.isArray(nodeIds);
const nextNodesData = [];
const isArrayOfIds = Array.isArray(nodeIds);
const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
if (!nodeIdArray) {
nextNodesData = [nodeLookup.get(nodeIds)?.data || null];
} else {
const data = [];
for (const nodeId of nodeIds) {
const nodeData = nodeLookup.get(nodeId)?.data;
if (nodeData) {
data.push(nodeData);
}
for (const nodeId of _nodeIds) {
const node = nodeLookup.get(nodeId);
if (node) {
nextNodesData.push({
id: node.id,
type: node.type,
data: node.data
});
}
nextNodesData = data;
}
if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
prevNodesData = nextNodesData;
set(nodeIdArray ? nextNodesData : nextNodesData[0]);
set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null);
}
});
}