diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 842f28e8..2d4ff726 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -4,47 +4,57 @@ body: - type: markdown attributes: value: | - Thank you for reporting an issue :pray:. + Hello! :sparkles: You found the place to submit a bug or issue that you discovered in the xyflow library, thank you for helping us out! - **Please only file issues for v11. Will will no longer fix issues for v10.** + Having trouble making something work in xyflow, but it’s not a bug with the library itself? You’ll get the fastest response by asking in [github discussions](https://github.com/xyflow/xyflow/discussions) or our [discord server](https://discord.gg/RVmnytFmGW). - This issue tracker is for reporting bugs found in react-flow (https://github.com/wbkd/react-flow) - If you have a question about how to achieve something and are struggling, please post a question - inside of react-flow's Discussion's tab: https://github.com/wbkd/react-flow/discussions - If it's an issue about the docs please go to the react-flow-docs (https://github.com/wbkd/react-flow-docs) + **Search our [discussions](https://github.com/xyflow/xyflow/discussions?discussions_q=) and [issues](https://github.com/xyflow/xyflow/issues?q=)** to see if your problem has already been reported and you can add more context, or see if someone else has already solved your issue. And of course, check our [docs](https://reactflow.dev/learn) if you haven’t already. - Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already: - - react-flow's Open Issue's tab: https://github.com/wbkd/react-flow/issues?q=is%3Aissue+sort%3Aupdated-desc+position - - react-flow's Closed Issues tab: https://github.com/wbkd/react-flow/issues?q=is%3Aissue+sort%3Aupdated-desc+position+is%3Aclosed - - react-flow's Discussion's tab: https://github.com/wbkd/react-flow/discussions + **Issue with the xyflow Docs?** Submit an issue in our [web repo](https://github.com/xyflow/web/issues) instead. - The more information you fill in, the better the community can help you. + With that out of the way, let’s get started :bug: - type: textarea - id: description + id: platform attributes: - label: Describe the Bug - description: Provide a clear and concise description of the challenge you are running into. + label: What platform were you using when you found the bug? + description: We only address issues for the most recent xyflow major release or upcoming releases. + value: | + - React Flow / Svelte Flow version: + - Browser and version: + - OS and version: validations: required: true - type: input id: link attributes: - label: Your Example Website or App + label: Live code example description: | - Which website or app were you using when the bug happened? - Note: - - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `react-flow-renderer` npm package. - - To create a shareable code example you can use Codesandbox (https://codesandbox.io/s/react-flow-starter-ou8or) or Stackblitz (https://stackblitz.com/). - - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve. - placeholder: | - e.g. https://stackblitz.com/edit/...... OR Github Repo + This is the most important part of the bug report! + + React Flow codesandbox starters + - js: https://new.reactflow.dev/js + - ts: https://new.reactflow.dev/ts + + Svelte Flow stackblitz starters + - js: https://new.svelteflow.dev/js + - ts: https://new.svelteflow.dev/ts + + Avoid dependencies in your example for easier debugging. + placeholder: https://stackblitz.com/edit/... or Github Repo validations: required: false + - type: textarea + id: description + attributes: + label: Describe the Bug + description: What exactly is happening when you encounter the bug? + validations: + required: true - type: textarea id: steps attributes: - label: Steps to Reproduce the Bug or Issue - description: Describe the steps we have to take to reproduce the behavior. + label: Steps to reproduce the bug or issue + description: How can we see the reported behavior in the code example you provided? The more detail, the better! placeholder: | 1. Go to '...' 2. Click on '....' @@ -56,9 +66,8 @@ body: id: expected attributes: label: Expected behavior - description: Provide a clear and concise description of what you expected to happen. - placeholder: | - As a user, I expected ___ behavior but i am seeing ___ + description: What would you expect to happen if there was no bug or issue? + placeholder: As a user, I expected ___ behavior, but instead I am seeing ___ validations: required: true - type: textarea @@ -67,22 +76,9 @@ body: label: Screenshots or Videos description: | If applicable, add screenshots or a video to help explain your problem. - For more information on the supported file image/file types and the file size limits, please refer - to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files - placeholder: | - You can drag your video or image files inside of this editor ↓ - - type: textarea - id: platform - attributes: - label: Platform - value: | - - OS: [e.g. macOS, Windows, Linux] - - Browser: [e.g. Chrome, Safari, Firefox] - - Version: [e.g. 91.1] - validations: - required: true + Supported image/file types and file size limits- https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files + placeholder: Drag your video or image files inside of this editor - type: textarea id: additional attributes: label: Additional context - description: Add any other context about the problem here. diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 287ab17b..024a22ac 100644 --- a/examples/react/src/App/routes.ts +++ b/examples/react/src/App/routes.ts @@ -34,7 +34,7 @@ import Subflow from '../examples/Subflow'; import SwitchFlow from '../examples/Switch'; import TouchDevice from '../examples/TouchDevice'; import Undirectional from '../examples/Undirectional'; -import UpdatableEdge from '../examples/UpdatableEdge'; +import ReconnectEdge from '../examples/ReconnectEdge'; import UpdateNode from '../examples/UpdateNode'; import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals'; import UseReactFlow from '../examples/UseReactFlow'; @@ -271,9 +271,9 @@ const routes: IRoute[] = [ component: Undirectional, }, { - name: 'Updatable Edge', - path: 'updatable-edge', - component: UpdatableEdge, + name: 'Reconnect Edge', + path: 'reconnect-edge', + component: ReconnectEdge, }, { name: 'Update Node', diff --git a/examples/react/src/examples/ControlledUncontrolled/index.tsx b/examples/react/src/examples/ControlledUncontrolled/index.tsx index 170df3a4..590dfd18 100644 --- a/examples/react/src/examples/ControlledUncontrolled/index.tsx +++ b/examples/react/src/examples/ControlledUncontrolled/index.tsx @@ -60,12 +60,13 @@ const ControlledUncontrolled = () => { const updateNodePositions = () => { instance.setNodes((nodes) => nodes.map((node) => { - node.position = { - x: Math.random() * 400, - y: Math.random() * 400, + return { + ...node, + position: { + x: Math.random() * 400, + y: Math.random() * 400, + }, }; - - return node; }) ); }; @@ -73,11 +74,12 @@ const ControlledUncontrolled = () => { const updateEdgeColors = () => { instance.setEdges((edges) => edges.map((edge) => { - edge.style = { - stroke: '#ff5050', + return { + ...edge, + style: { + stroke: '#ff5050', + }, }; - - return edge; }) ); }; diff --git a/examples/react/src/examples/DefaultNodes/index.tsx b/examples/react/src/examples/DefaultNodes/index.tsx index 354fa994..65ebb060 100644 --- a/examples/react/src/examples/DefaultNodes/index.tsx +++ b/examples/react/src/examples/DefaultNodes/index.tsx @@ -25,6 +25,7 @@ const defaultNodes: Node[] = [ }, { id: '3', + type: 'output', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light', diff --git a/examples/react/src/examples/DragNDrop/index.tsx b/examples/react/src/examples/DragNDrop/index.tsx index 83c7bb4e..10a2eff4 100644 --- a/examples/react/src/examples/DragNDrop/index.tsx +++ b/examples/react/src/examples/DragNDrop/index.tsx @@ -77,6 +77,7 @@ const DnDFlow = () => { onInit={onInit} onDrop={onDrop} onDragOver={onDragOver} + nodeOrigin={nodeOrigin} > diff --git a/examples/react/src/examples/Hidden/index.tsx b/examples/react/src/examples/Hidden/index.tsx index 97bb6fcb..c9d49716 100644 --- a/examples/react/src/examples/Hidden/index.tsx +++ b/examples/react/src/examples/Hidden/index.tsx @@ -73,6 +73,8 @@ const HiddenFlow = () => { setEdges(setHidden(isHidden)); }, [isHidden, setEdges, setNodes]); + console.log(nodes); + return ( ((res, node, index) => { + if (index > 0) { + res.push({ id: `${index - 1}-${index}`, source: (index - 1).toString(), target: index.toString() }); + } + return res; +}, []); const CustomNodeFlow = () => { - const { setNodes, updateNodeData } = useReactFlow(); + const { setNodes, updateNodeData, updateEdge } = useReactFlow(); const [nodes, , onNodesChange] = useNodesState(initNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges); @@ -55,6 +60,10 @@ const CustomNodeFlow = () => { nodes.forEach((node) => updateNodeData(node.id, { label: 'node update' })); }; + const multiUpdateEdges = () => { + edges.forEach((edge) => updateEdge(edge.id, { label: 'edge update' })); + }; + return ( { + ); diff --git a/examples/react/src/examples/NodeTypesObjectChange/index.tsx b/examples/react/src/examples/NodeTypesObjectChange/index.tsx index 46b5cd5e..b3b8fd02 100644 --- a/examples/react/src/examples/NodeTypesObjectChange/index.tsx +++ b/examples/react/src/examples/NodeTypesObjectChange/index.tsx @@ -28,6 +28,14 @@ const initialNodes: Node[] = [ data: { label: 'A Node' }, position: { x: 250, y: 0 }, }, + { + id: '3', + type: 'b', + sourcePosition: Position.Right, + targetPosition: Position.Left, + data: { label: 'B Node' }, + position: { x: 350, y: 0 }, + }, ]; const buttonStyle: CSSProperties = { @@ -78,6 +86,7 @@ const NodeTypeChangeFlow = () => { onEdgesChange={onEdgesChange} onConnect={onConnect} nodeTypes={nodeTypesObjects[nodeTypesId]} + fitView >