React-flow config based consumption

Write a react-flow wrapper that takes all features in form of props

Here is an example of a React Flow wrapper component that accepts all features as props

`import React from "react"; import ReactFlow, { Controls, Background, MiniMap, useZoomPanHelper, } from "react-flow-renderer";

const FlowWrapper = ({ elements, onElementClick, onElementsRemove, onConnect, onLoad, onMove, onNodeMouseEnter, onNodeMouseLeave, onPaneClick, onPaneScroll, onSelectionChange, panOnScroll, zoomOnPinch, zoomOnDoubleClick, snapToGrid, snapGrid, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineBorderRadius, minZoom, maxZoom, defaultZoom, zoomStep, nodeExtent, nodesDraggable, nodesConnectable, zoomActivationKeyCode, selectNodesOnDrag, selectEdgeOnDrag, multiSelectionKeyCode, deleteKeyCode, deleteSelectedElements, elementsSelectable, nodesSelectable, selectNodesOnCanvas, selectEdgesOnCanvas, selectable, paneMoveable, paneZoomable, panOnScrollSpeed, zoomOnPinchSpeed, translateExtent, zoomActivationKey, zoomOnDoubleClickDelay, nodeTypesId, edgeTypesId, ...rest }) => { const { transform, fitView } = useZoomPanHelper();

const handleLoad = (reactFlowInstance) => { onLoad && onLoad(reactFlowInstance); fitView(); };

return ( <ReactFlow elements={elements} onElementClick={onElementClick} onElementsRemove={onElementsRemove} onConnect={onConnect} onMove={onMove} onNodeMouseEnter={onNodeMouseEnter} onNodeMouseLeave={onNodeMouseLeave} onPaneClick={onPaneClick} onPaneScroll={onPaneScroll} onSelectionChange={onSelectionChange} nodeTypes={nodeTypes} edgeTypes={edgeTypes} connectionLineType={connectionLineType} connectionLineStyle={connectionLineStyle} connectionLineBorderRadius={connectionLineBorderRadius} minZoom={minZoom} maxZoom={maxZoom} defaultZoom={defaultZoom} zoomStep={zoomStep} nodeExtent={nodeExtent} nodesDraggable={nodesDraggable} nodesConnectable={nodesConnectable} zoomActivationKeyCode={zoomActivationKeyCode} selectNodesOnDrag={selectNodesOnDrag} selectEdgeOnDrag={selectEdgeOnDrag} multiSelectionKeyCode={multiSelectionKeyCode} deleteKeyCode={deleteKeyCode} deleteSelectedElements={deleteSelectedElements} elementsSelectable={elementsSelectable} nodesSelectable={nodesSelectable} selectNodesOnCanvas={selectNodesOnCanvas} selectEdgesOnCanvas={selectEdgesOnCanvas} selectable={selectable} paneMoveable={paneMoveable} paneZoomable={paneZoomable} panOnScrollSpeed={panOnScrollSpeed} zoomOnPinchSpeed={zoomOnPinchSpeed} translateExtent={translateExtent} zoomActivationKey={zoomActivationKey} zoomOnDoubleClickDelay={zoomOnDoubleClickDelay} nodeTypesId={nodeTypesId} edgeTypesId={edgeTypesId} onLoad={handleLoad} {...rest}

); };

export default FlowWrapper; ` In this component, all features that can be passed as props to.

Here is an example of a React Flow wrapper component that uses a configuration object instead of passing props for every feature:

`import React from "react"; import ReactFlow, { Controls, Background, MiniMap, useZoomPanHelper, } from "react-flow-renderer";

const FlowWrapper = ({ elements, onLoad, config }) => { const { transform, fitView } = useZoomPanHelper();

const handleLoad = (reactFlowInstance) => { onLoad && onLoad(reactFlowInstance); fitView(); };

return ( <ReactFlow onLoad={handleLoad} elements={elements} {...config}>

  <MiniMap />
  <Background />
</ReactFlow>

); };

FlowWrapper.defaultProps = { config: {}, };

export default FlowWrapper; `

React Flow Wrapper Props

Vetrivel Write a react-flow wrapper that takes all features in form of props

Here is an example of a React Flow wrapper component that accepts all features as props:

jsx Copy code import React from "react"; import ReactFlow, { Controls, Background, MiniMap, useZoomPanHelper, } from "react-flow-renderer";

const handleLoad = (reactFlowInstance) => { onLoad && onLoad(reactFlowInstance); fitView(); };

); };

export default FlowWrapper; In this component, all features that can be passed as props to `

Vetrivel Rewrite the same into configuration based

Here is an example of a React Flow wrapper component that uses a configuration object instead of passing props for every feature:

jsx Copy code import React from "react"; import ReactFlow, { Controls, Background, MiniMap, useZoomPanHelper, } from "react-flow-renderer";

const FlowWrapper = ({ elements, onLoad, config }) => { const { transform, fitView } = useZoomPanHelper();

const handleLoad = (reactFlowInstance) => { onLoad && onLoad(reactFlowInstance); fitView(); };

return ( <ReactFlow onLoad={handleLoad} elements={elements} {...config}>

  <MiniMap />
  <Background />
</ReactFlow>

); };

FlowWrapper.defaultProps = { config: {}, };

export default FlowWrapper; In this implementation, the configuration object can be passed in as a prop to the component. The configuration object includes all the options that can be passed to the ReactFlow component, such as nodeTypes, edgeTypes, zoomOnPinch, etc. The defaultProps object is used to provide a default empty configuration object to avoid errors when the configuration object is not provided.

Here's an example of how the FlowWrapper component can be used with a configuration object:

`import React from "react"; import FlowWrapper from "./FlowWrapper";

const config = { nodeTypes: { customNode: CustomNodeComponent, default: DefaultNodeComponent, }, edgeTypes: { customEdge: CustomEdgeComponent, default: DefaultEdgeComponent, }, panOnScroll: true, zoomOnPinch: true, snapToGrid: true, snapGrid: [16, 16], minZoom: 0.1, maxZoom: 2, defaultZoom: 1, zoomStep: 0.1, nodeExtent: 80, nodesDraggable: true, nodesConnectable: true, selectNodesOnDrag: true, selectEdgeOnDrag: true, deleteKeyCode: 46, deleteSelectedElements: true, nodesSelectable: true, selectNodesOnCanvas: true, selectEdgesOnCanvas: true, selectable: true, paneMoveable: true, paneZoomable: true, zoomActivationKey: 17, };

const elements = [ { id: "node-1", type: "customNode", position: { x: 100, y: 100 }, data: { label: "Node 1" }, }, { id: "node-2", type: "customNode", position: { x: 200, y: 200 }, data: { label: "Node 2" }, }, { id: "edge-1", type: "customEdge", source: "node-1", target: "node-2", }, ];

const App = () => { return ; };

export default App; ` In this example, the config object includes the custom node and edge components, as well as various other options such as zoom and snap settings. The elements array is passed in as a prop to the FlowWrapper component, along with the config object.

Here's an example configuration object for some of the pro features available in react-flow-renderer:

const proConfig = { nodeTypes: { input: InputNode, output: OutputNode, special: SpecialNode, default: DefaultNode, }, edgeTypes: { special: SpecialEdge, default: DefaultEdge, }, snapToGrid: true, snapGrid: [16, 16], nodeExtent: 80, nodesDraggable: true, nodesConnectable: true, selectNodesOnDrag: true, selectEdgeOnDrag: true, deleteKeyCode: 46, deleteSelectedElements: true, nodesSelectable: true, selectNodesOnCanvas: true, selectEdgesOnCanvas: true, selectable: true, paneMoveable: true, paneZoomable: true, zoomActivationKeyCode: 17, zoomOnScroll: true, zoomOnPinch: true, minZoom: 0.1, maxZoom: 2, defaultZoom: 1, zoomStep: 0.1, preventScroll: true, zoomDoubleTapThreshold: 1000, nodeTypesSelectable: true, edgeTypesSelectable: true, nodesDraggableOnSelection: true, elementsSelectableOnDrag: true, multiSelectionKeyCode: 16, nodesDraggableWhileDragging: true, zoomOnDoubleClick: true, selectionKeyCode: 32, connectionLineType: 'bezier', connectionLineStyle: { stroke: '#000', strokeWidth: 2 }, connectionLineComponent: ConnectionLineComponent, nodeTypesDescription: { input: 'Input node', output: 'Output node', special: 'Special node', default: 'Default node', }, edgeTypesDescription: { special: 'Special edge', default: 'Default edge', }, nodesDragged: (event, nodes) => console.log('Nodes dragged:', nodes), nodesAdded: (nodes) => console.log('Nodes added:', nodes), nodesSelected: (nodes) => console.log('Nodes selected:', nodes), nodesDeselected: (nodes) => console.log('Nodes deselected:', nodes), nodesUpdated: (nodes) => console.log('Nodes updated:', nodes), elementsRemoved: (elements) => console.log('Elements removed:', elements), nodeTypesUpdated: (nodeTypes) => console.log('Node types updated:', nodeTypes), edgeTypesUpdated: (edgeTypes) => console.log('Edge types updated:', edgeTypes), nodeTypesRemoved: (nodeTypes) => console.log('Node types removed:', nodeTypes), edgeTypesRemoved: (edgeTypes) => console.log('Edge types removed:', edgeTypes), onPaneClick: (event, pane) => console.log('Pane clicked:', pane), onPaneContextMenu: (event, pane) => console.log('Pane context menu:', pane), onPaneDragStart: (event, pane) => console.log('Pane drag start:', pane), onPaneDrag: (event, pane) => console.log('Pane drag:', pane), onPaneDragStop: (event, pane) => console.log('Pane drag stop:', pane), onWheel: (event, delta) => console.log('Wheel:', delta), onWheelStop: () => console.log('Wheel stopped'), onMove: (event, node) => console.log('Move:', node), onMoveEnd: (event, node) => console.log('Move end:', node), onNodeContextMenu:

imvetri / ui-editor

React-flow config based consumption #579