Why can not access 'type' in EdgeProps when i create custom edge component using '@xyflow/react'?

[peanudge]

Hi, xyflow team :) First, thank you for making amazing graph draw library. it is very useful to me.

I could not access 'type' of edge during creating custom edge component like following.

const CustomEdgeComponent = (
    props: EdgeProps<CustomEdgeType>
) => {
     const type = props.type; // Problem: EdgeProps do not allow to access 'type' data.
     ...
}

Question 1) Is there alternative way to get edge's type?

if no special reason about hiding type of EdgeType,

I hope to add Pick<EdgeType, ... | 'type'> in following type definition for more customizable edge component

xyflow/packages/react/src/types/edges.ts

Line 109 in 9b768b2

'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' | 'selectable' | 'deletable'

Incompatible type mismatch

I'd like to share additional strange point.

EdgeTypes required {type: any} as props of <ReactFlow/> component. this problem make hard to write strict typescript for me.

xyflow/packages/react/src/types/general.ts

Lines 42 to 52 in e55b2ad

	export type EdgeTypes = Record<
	string,
	ComponentType<
	EdgeProps & {
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	data: any;
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	type: any;
	}
	>
	>;

FYI) I tried to apply HOC pattern to CustomEdgeComponent for adding,removing edit ability in case by case

import { EdgeTypes } from "'@xyflow/react"
const edgeTypes: EdgeTypes = {
    customEdge: withEditable(CustomEdge), // Typescript error b/c EdgeTypes required {data: any, type: any}
}

const CustomEdge = (props: EdgeProps) => {...}

type CustomEdgeComponentProps =   ComponentProps<typeof GraphEdgeComponent>
const withEditable = (EdgeComponent: ComponentType<CustomEdgeComponentProps>) => { ... }

Above code is summary in my situation.
Also, I can resolve through hack like type CustomEdgeComponentProps = ComponentProps<typeof GraphEdgeComponent> & {data:any, type:any}.

But, i hoped graceful solution

[bcakmakoglu]

An alternative way to get the edge type would be to use getEdge

const edge = getEdge(edgeId)

const type = edge.type