Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document how to use BuiltInEdge type, so that pathOptions works properly #485

Open
bcakmakoglu opened this issue Apr 18, 2024 · 2 comments
Labels
react-docs Issues belonging to the reactflow website svelte-docs Issues belonging to the svelteflow website

Comments

@bcakmakoglu
Copy link
Contributor

Describe the Bug

In v11 the typing for the Edge type allows pathOptions for the default edge-types (bezier, step and smoothstep) while in v12 pathOptions is not recognized anymore and will cause TypeScript to report an error for it even though the options are still taken and passed to the edge component.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Set up a basic v12 example and use sth like this

const initialEdges: Edge[] = [
  // Error: Object literal may only specify known properties, and pathOptions does not exist in type Edge
  { id: 'e1-2', type: 'smoothstep', pathOptions: { borderRadius: 100 }, source: '1', target: '2', animated: true },
];

Expected behavior

pathOptions should be a valid property on the default edge types previously mentioned.

Screenshots or Videos

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response

@hedefalk
Copy link

We have the same issue, need it for curvature setting and don't want to mess with ts-ignores. Working around with:

import { Edge as XYFlowEdge } from "@xyflow/react";
type Edge = XYFlowEdge & { pathOptions?: { curvature: number } };

@peterkogo peterkogo self-assigned this Jun 3, 2024
@peterkogo
Copy link
Member

peterkogo commented Jun 5, 2024

We have added a type called BuiltInEdge to make usage of built in edge types more specific and to have an opt-out mechanism (in a real world application you will probably only use custom nodes).
If you type your edges array correctly it should work.

const edges: BuiltInEdge[] = [...]          // if you just use built in edges
const edges: (BuiltInEdge | Edge)[] = [...] // if you use built in and custom edges

We have revamped our Typescript section for v12, where all of this is explained in detail. Will post it here once it's released.

@moklick moklick transferred this issue from xyflow/xyflow Aug 27, 2024
@moklick moklick changed the title [v12]: pathOptions not recognized anymore Document how to use BuiltInEdge type, so that pathOptions works properly Aug 27, 2024
@moklick moklick added react-docs Issues belonging to the reactflow website svelte-docs Issues belonging to the svelteflow website labels Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react-docs Issues belonging to the reactflow website svelte-docs Issues belonging to the svelteflow website
Projects
None yet
Development

No branches or pull requests

4 participants