Option to remove clickability for edges about xyflow

[runfaj]

@bcakmakoglu Sorry about the late reply. So my issue is that all three of the options you provided essentially require specific scenarios. Something like isFocusable is clear and applies in every case, and matches with accessibility. However, something I'd expect to be extremely similar to isFocusable for a click action is anything but simple.

For (2), this is doable, but when you're in a tailwind environment, this now forces a css file to be defined, since there's no tailwind option to override it.

For (1) and (3), I can see the selectable option in the docs and this file

xyflow/packages/react/src/components/EdgeWrapper/index.tsx

Line 56 in 82f40b4

const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));

, but it doesn't seem not appear to actually remove the styling for an edge, so you still get the pointer showing up. I'm using a custom edge and you can see it still shows all the clickable aspects. Here's parts of the relevant code and a screen grab:

export type TreeEdge = Edge<{
  start: { x: number, y: number }
  center: { x: number, y: number },
  end: { x: number, y: number };
}>;

function makeEdge(left: string, right: string): TreeEdge {
  return {
    id: `Edge-${left || 'null'}-${right || 'null'}`,
    type: CanvasEdgeTypes.CustomEdge,
    source: left,
    target: right,
    data: {
      start: { x: 0, y: 0 }, // calculated later
      center: { x: 0, y: 0 }, // calculated later
      end: { x: 0, y: 0 }, // calculated later
    },
    // animated: true, // turned this off because it was taking a ton of GPU processing
    focusable: false,
    selectable: false, // there's a TS error here - it isn't defined
  };
}

...

const edgeTypes = useMemo(() => ({
    [CanvasEdgeTypes.CustomEdge]: CustomEdge,
  }), []);

<ReactFlow
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes}
      nodes={nodes}
      edges={edges}

...
      
export function CustomEdge(edge: TreeEdge) {
  const {
    id,
    data,
  } = edge;

  if (!data) return null;

  const { start, end, center } = data;
  const isCurved = center.x !== -1 && center.y !== -1;

  let edgePath;
  if (isCurved) {
    ([edgePath] = getSmoothStepPath({
      sourceX: start.x,
      sourceY: start.y,
      centerX: center.x,
      centerY: center.y,
      targetX: end.x,
      targetY: end.y,
      sourcePosition: Position.Right, // must match handles
      targetPosition: Position.Left, // must match handles
      borderRadius: 4,
      offset: 0,
    }));
  } else {
    ([edgePath] = getStraightPath({
      sourceX: start.x,
      sourceY: start.y,
      targetX: end.x,
      targetY: end.y,
    }));
  }

  return (
    <BaseEdge id={id} path={edgePath} />
  );
}

Also, seems like there is a typing issue somewhere too. I can see that selectable prop defined here:

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

Line 26 in 82f40b4

selectable?: boolean;

, but the actual Edge export doesn't match this base edge for the installed package (node_modules/@reactflow/core/dist/esm/types/edges.d.ts):

type DefaultEdge<T = any> = {
    id: string;
    type?: string;
    source: string;
    target: string;
    sourceHandle?: string | null;
    targetHandle?: string | null;
    style?: CSSProperties;
    animated?: boolean;
    hidden?: boolean;
    deletable?: boolean;
    data?: T;
    className?: string;
    sourceNode?: Node;
    targetNode?: Node;
    selected?: boolean;
    markerStart?: EdgeMarkerType;
    markerEnd?: EdgeMarkerType;
    zIndex?: number;
    ariaLabel?: string;
    interactionWidth?: number;
    focusable?: boolean;
    updatable?: EdgeUpdatable;
} & EdgeLabelOptions;

export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;

[moklick]

Sorry for the confusion. edge. selectable is a new v12 feature. I would go with the CSS solution for v11.

[bcakmakoglu]

Since there are already ways to go about this, I'm not sure if introducing another prop is really that beneficial (we already have quite a number of props available already).

1. As you said, you can solve this with a custom edge
2. You can use CSS to disable pointer events on edges .react-flow__edges { pointer-events: none }
3. You can set edge.selectable to false which basically disables running any action on click (or use defaultEdgeOptions to set it to false for just all edges by default)

What specific benefit would this new prop have from your point of view? If it's really just about "disabling" the click (though if you don't have any listener bound for it, what exactly is the reason for "disabling" it?) I feel like there are easy enough options already.

[runfaj]

@moklick thanks for the clarification! Will definitely keep a watch on that v12 release!