feat(core): allow setting edges updatable to bool, source or target

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

@@ -55,6 +55,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     rfId,
     ariaLabel,
     isFocusable,
+    isUpdatable,
     pathOptions,
     interactionWidth,
   }: WrapEdgeProps): JSX.Element | null => {
@@ -138,7 +139,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
 
     const inactive = !elementsSelectable && !onClick;
-    const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (elementSelectionKeys.includes(event.key) && elementsSelectable) {
@@ -205,28 +205,28 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             interactionWidth={interactionWidth}
           />
         )}
-        {handleEdgeUpdate && (
+        {isUpdatable && (
           <>
-            <EdgeAnchor
-              position={sourcePosition}
-              centerX={sourceX}
-              centerY={sourceY}
-              radius={edgeUpdaterRadius}
-              onMouseDown={onEdgeUpdaterSourceMouseDown}
-              onMouseEnter={onEdgeUpdaterMouseEnter}
-              onMouseOut={onEdgeUpdaterMouseOut}
-              type="source"
-            />
-            <EdgeAnchor
-              position={targetPosition}
-              centerX={targetX}
-              centerY={targetY}
-              radius={edgeUpdaterRadius}
-              onMouseDown={onEdgeUpdaterTargetMouseDown}
-              onMouseEnter={onEdgeUpdaterMouseEnter}
-              onMouseOut={onEdgeUpdaterMouseOut}
-              type="target"
-            />
+            {isUpdatable === 'source' && <EdgeAnchor
+                position={sourcePosition}
+                centerX={sourceX}
+                centerY={sourceY}
+                radius={edgeUpdaterRadius}
+                onMouseDown={onEdgeUpdaterSourceMouseDown}
+                onMouseEnter={onEdgeUpdaterMouseEnter}
+                onMouseOut={onEdgeUpdaterMouseOut}
+                type="source"
+            />}
+            {isUpdatable === 'target' && <EdgeAnchor
+                position={targetPosition}
+                centerX={targetX}
+                centerY={targetY}
+                radius={edgeUpdaterRadius}
+                onMouseDown={onEdgeUpdaterTargetMouseDown}
+                onMouseEnter={onEdgeUpdaterMouseEnter}
+                onMouseOut={onEdgeUpdaterMouseOut}
+                type="target"
+            />}
           </>
         )}
       </g>

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

@@ -39,6 +39,7 @@ type EdgeRendererProps = Pick<
 const selector = (s: ReactFlowState) => ({
   nodesConnectable: s.nodesConnectable,
   edgesFocusable: s.edgesFocusable,
+  edgesUpdatable: s.edgesUpdatable,
   elementsSelectable: s.elementsSelectable,
   width: s.width,
   height: s.height,
@@ -66,7 +67,7 @@ const EdgeRenderer = ({
   onEdgeUpdateEnd,
   children,
 }: EdgeRendererProps) => {
-  const { edgesFocusable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
+  const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
     selector,
     shallow
   );
@@ -114,6 +115,7 @@ const EdgeRenderer = ({
               const sourcePosition = sourceHandle?.position || Position.Bottom;
               const targetPosition = targetHandle?.position || Position.Top;
               const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
+              const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined');
 
               if (!sourceHandle || !targetHandle) {
                 onError?.('008', errorMessages['error008'](sourceHandle, edge));
@@ -173,6 +175,7 @@ const EdgeRenderer = ({
                   rfId={rfId}
                   ariaLabel={edge.ariaLabel}
                   isFocusable={isFocusable}
+                  isUpdatable={isUpdatable}
                   pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
                   interactionWidth={edge.interactionWidth}
                 />

packages/core/src/types/edges.ts

@@ -91,6 +91,7 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
   rfId?: string;
   isFocusable: boolean;
+  isUpdatable: EdgeUpdatable;
   pathOptions?: BezierPathOptions | SmoothStepPathOptions;
 };