reactjsreact-flow

Reactflow lock graph


Is it possible to make reactflow graph locked ? something like isLocked=true

I would like to get the easiest way to implement this. Just wanna get graph with 'view only' mode, for representing ready graphs from database.


Solution

  • <ReactFlow
              nodes={nodes}
              edges={edges}
              ref={flowRef}
              onNodesChange={onNodesChange}
              onEdgesChange={onEdgesChange}
              onConnect={onConnect}
              onInit={setReactFlowInstance}
              onDrop={onDrop}
              defaultViewport={defaultViewport}
              nodeTypes={nodeTypes}
              onDragOver={onDragOver}
              onNodeDragStop={handleDragEnd}
              onNodeDoubleClick={handleNodeDoubleClick}
              fitView
              multiSelectionKeyCode="Shift"
              edgesUpdatable={!isLocked}
              edgesFocusable={!isLocked}
              nodesDraggable={!isLocked}
              nodesConnectable={!isLocked}
              nodesFocusable={!isLocked}
              elementsSelectable={!isLocked}
            ></ReactFlow>