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

feat(svelte): add useHandleConnections, useNodesData and useUpdateNodeData

Browse Source
This commit is contained in:
moklick
2023-12-11 18:31:37 +01:00
parent 5d8c1bbff9
commit d4d773d9c6
32 changed files with 761 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/UseNodesData/ResultNode.tsx
+3 -2
View File
@@ -5,7 +5,7 @@ function ResultNode() {
const connections = useHandleConnections({
handleType: 'target',
});
const nodesData = useNodesData<{ text: string }>(connections.map((connection) => connection.source));
const nodesData = useNodesData(connections.map((connection) => connection.source));
useEffect(() => {
console.log('incoming data changed', nodesData);
@@ -16,7 +16,8 @@ function ResultNode() {
<Handle type="target" position={Position.Left} />
<div>
incoming texts:{' '}
{nodesData?.filter((nodeData) => nodeData.text).map(({ text }, i) => <div key={i}>{text}</div>) || 'none'}
{nodesData?.filter((nodeData) => nodeData.text !== undefined).map(({ text }, i) => <div key={i}>{text}</div>) ||
'none'}
</div>
</div>
);
examples/react/src/examples/UseNodesData/UppercaseNode.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ function UppercaseNode({ id }: NodeProps) {
const connections = useHandleConnections({
handleType: 'target',
});
const nodeData = useNodesData<{ text: string }>(connections[0]?.source);
const nodeData = useNodesData(connections[0]?.source);
const updateNodeData = useUpdateNodeData();
useEffect(() => {
@@ -14,9 +14,9 @@ function UppercaseNode({ id }: NodeProps) {
return (
<div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
<Handle type="source" position={Position.Right} />
<div>uppercase transform</div>
<Handle type="target" position={Position.Left} isConnectable={connections.length === 0} />
<div>uppercase transform</div>
<Handle type="source" position={Position.Right} />
</div>
);
}
examples/react/src/examples/UseNodesData/index.tsx
+6 -1
View File
@@ -15,13 +15,18 @@ import TextNode from './TextNode';
import ResultNode from './ResultNode';
import UppercaseNode from './UppercaseNode';
export type TextNode = Node<{ text: string }, 'text'>;
export type ResultNode = Node<{}, 'result'>;
export type UppercaseNode = Node<{}, 'uppercase'>;
export type MyNode = Node<{ text: string }, 'text'> | Node<{}, 'result'> | Node<{}, 'uppercase'>;
const nodeTypes = {
text: TextNode,
result: ResultNode,
uppercase: UppercaseNode,
};
const initNodes: Node[] = [
const initNodes: MyNode[] = [
{
id: '1',
type: 'text',