feat(react): add selectable option to edges

packages/core/src/components/Edges/wrapEdge.tsx

@@ -37,7 +37,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     targetY,
     sourcePosition,
     targetPosition,
-    elementsSelectable,
+    isSelectable,
     hidden,
     sourceHandleId,
     targetHandleId,
@@ -73,7 +73,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
       const { edges, addSelectedEdges } = store.getState();
 
-      if (elementsSelectable) {
+      if (isSelectable) {
         store.setState({ nodesSelectionActive: false });
         addSelectedEdges([id]);
       }
@@ -137,10 +137,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
     const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
 
-    const inactive = !elementsSelectable && !onClick;
+    const inactive = !isSelectable && !onClick;
 
     const onKeyDown = (event: KeyboardEvent) => {
-      if (elementSelectionKeys.includes(event.key) && elementsSelectable) {
+      if (elementSelectionKeys.includes(event.key) && isSelectable) {
         const { unselectNodesAndEdges, addSelectedEdges, edges } = store.getState();
         const unselect = event.key === 'Escape';
 

packages/core/src/container/EdgeRenderer/index.tsx

@@ -115,6 +115,10 @@ const EdgeRenderer = ({
               const isUpdatable =
                 typeof onEdgeUpdate !== 'undefined' &&
                 (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
+              const isSelectable = !!(
+                edge.selectable ||
+                (elementsSelectable && typeof edge.selectable === 'undefined')
+              );
 
               if (!sourceHandle || !targetHandle) {
                 onError?.('008', errorMessages['error008'](sourceHandle, edge));
@@ -160,7 +164,7 @@ const EdgeRenderer = ({
                   targetY={targetY}
                   sourcePosition={sourcePosition}
                   targetPosition={targetPosition}
-                  elementsSelectable={elementsSelectable}
+                  isSelectable={isSelectable}
                   onEdgeUpdate={onEdgeUpdate}
                   onContextMenu={onEdgeContextMenu}
                   onMouseEnter={onEdgeMouseEnter}

packages/core/src/types/edges.ts

@@ -60,7 +60,6 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   targetY: number;
   sourcePosition: Position;
   targetPosition: Position;
-  elementsSelectable?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
   onContextMenu?: EdgeMouseHandler;
   onMouseEnter?: EdgeMouseHandler;
@@ -72,6 +71,7 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   rfId?: string;
   isFocusable: boolean;
   isUpdatable: EdgeUpdatable;
+  isSelectable: boolean;
   pathOptions?: BezierPathOptions | SmoothStepPathOptions;
 };