refactor(edgesUpdatable): pass to store

packages/core/src/components/StoreUpdater/index.tsx

@@ -20,6 +20,7 @@ type StoreUpdaterProps = Pick<
   | 'nodesConnectable'
   | 'nodesFocusable'
   | 'edgesFocusable'
+  | 'edgesUpdatable'
   | 'minZoom'
   | 'maxZoom'
   | 'nodeExtent'
@@ -98,6 +99,7 @@ const StoreUpdater = ({
   nodesConnectable,
   nodesFocusable,
   edgesFocusable,
+  edgesUpdatable,
   elevateNodesOnSelect,
   minZoom,
   maxZoom,
@@ -162,6 +164,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);
   useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState);
   useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState);
+  useDirectStoreUpdater('edgesUpdatable', edgesUpdatable, store.setState);
   useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
   useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
   useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState);

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

@@ -67,10 +67,8 @@ const EdgeRenderer = ({
   onEdgeUpdateEnd,
   children,
 }: EdgeRendererProps) => {
-  const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
-    selector,
-    shallow
-  );
+  const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } =
+    useStore(selector, shallow);
   const edgeTree = useVisibleEdges(onlyRenderVisibleElements, nodeInternals, elevateEdgesOnSelect);
 
   if (!width) {
@@ -115,7 +113,9 @@ 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 || typeof onEdgeUpdate !== 'undefined' || (edgesUpdatable && typeof edge.updatable === 'undefined');
+              const isUpdatable =
+                typeof onEdgeUpdate !== 'undefined' &&
+                (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
 
               if (!sourceHandle || !targetHandle) {
                 onError?.('008', errorMessages['error008'](sourceHandle, edge));

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

@@ -115,6 +115,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       nodesFocusable,
       nodeOrigin = initNodeOrigin,
       edgesFocusable,
+      edgesUpdatable,
       elementsSelectable,
       defaultViewport = initDefaultViewport,
       minZoom = 0.5,
@@ -266,6 +267,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             nodesConnectable={nodesConnectable}
             nodesFocusable={nodesFocusable}
             edgesFocusable={edgesFocusable}
+            edgesUpdatable={edgesUpdatable}
             elementsSelectable={elementsSelectable}
             elevateNodesOnSelect={elevateNodesOnSelect}
             minZoom={minZoom}

packages/core/src/store/initialState.ts

@@ -48,7 +48,7 @@ const initialState: ReactFlowStore = {
   nodesConnectable: true,
   nodesFocusable: true,
   edgesFocusable: true,
-  edgesUpdatable: false,
+  edgesUpdatable: true,
   elementsSelectable: true,
   elevateNodesOnSelect: true,
   fitViewOnInit: false,

packages/core/src/types/component-props.ts

@@ -112,6 +112,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   nodesFocusable?: boolean;
   nodeOrigin?: NodeOrigin;
   edgesFocusable?: boolean;
+  edgesUpdatable?: boolean;
   initNodeOrigin?: NodeOrigin;
   elementsSelectable?: boolean;
   selectNodesOnDrag?: boolean;

packages/core/src/types/edges.ts

@@ -39,7 +39,7 @@ type DefaultEdge<T = any> = {
   updatable?: EdgeUpdatable;
 } & EdgeLabelOptions;
 
-export type EdgeUpdatable = boolean | 'target' | 'source';
+export type EdgeUpdatable = boolean | HandleType;
 
 export type SmoothStepPathOptions = {
   offset?: number;