alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(graph): more adjustable interaction closes #329, closes #291

Browse Source
This commit is contained in:
moklick
2020-07-13 17:36:15 +02:00
parent 32f6101d37
commit 1d8a9d6d87
21 changed files with 259 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -2
View File
@@ -88,7 +88,9 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `snapToGrid`: default: `false`
- `snapGrid`: [x, y] array - default: `[16, 16]`
- `onlyRenderVisibleNodes`: default: `true`
- `isInteractive`: default: `true`. If the graph is not interactive you can't drag any nodes
- `nodesDraggable`: default: `true`
- `nodesConnectable`: default: `true`
- `elementsSelectable`: default: `true`
- `selectNodesOnDrag`: default: `true`
- `minZoom`: default: `0.5`
- `maxZoom`: default: `2`
@@ -511,7 +513,7 @@ You can find all examples in the [example](example) folder or check out the live
- [provider](https://react-flow.netlify.app/provider)
- [edges](https://react-flow.netlify.app/edges)
- [empty](https://react-flow.netlify.app/empty)
- [inactive](https://react-flow.netlify.app/inactive)
- [interaction](https://react-flow.netlify.app/interaction)
- [provider](https://react-flow.netlify.app/provider)
# Development
cypress/integration/flow/inactive.spec.js
+17 -5
View File
@@ -1,6 +1,6 @@
describe('Inactive Graph Rendering', () => {
describe('Interaction Graph Rendering', () => {
it('renders a graph', () => {
cy.visit('/inactive');
cy.visit('/interaction');
cy.get('.react-flow__renderer');
cy.get('.react-flow__node').should('have.length', 4);
@@ -20,12 +20,24 @@ describe('Inactive Graph Rendering', () => {
it('tries to do a selection', () => {
cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
cy.get('body').type('{shift}', { release: true });
});
it('toggles interactive mode', () => {
cy.get('.react-flow__interactive').click();
it('toggles draggable mode', () => {
cy.get('.react-flow__draggable').click();
});
it('drags a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
cy.drag('.react-flow__node:first', { x: 325, y: 100 }).then(($el) => {
const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
});
});
it('toggles selectable mode', () => {
cy.get('.react-flow__selectable').click();
});
it('selects a node by click', () => {
example/src/Inactive/index.js
-45
View File
@@ -1,45 +0,0 @@
import React, { useState } from 'react';
import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
];
const InactiveFlow = () => {
const [isInteractive, setIsInteractive] = useState(false);
const onToggleInteractive = (evt) => {
setIsInteractive(evt.target.checked);
};
return (
<ReactFlow
elements={initialElements}
isInteractive={isInteractive}
>
<MiniMap />
<Controls />
<div
style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
>
<label>
interactive
<input
type="checkbox"
checked={isInteractive}
onChange={onToggleInteractive}
className="react-flow__interactive"
/>
</label>
</div>
</ReactFlow>
);
}
export default InactiveFlow;
example/src/Interaction/index.js
+75
View File
@@ -0,0 +1,75 @@
import React, { useState } from 'react';
import ReactFlow, { addEdge, MiniMap, Controls } from 'react-flow-renderer';
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
];
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => setElements((els) => addEdge(params, els));
const [isSelectable, setIsSelectable] = useState(false);
const [isDraggable, setIsDraggable] = useState(false);
const [isConnectable, setIsConnectable] = useState(false);
return (
<ReactFlow
elements={elements}
elementsSelectable={isSelectable}
nodesConnectable={isConnectable}
nodesDraggable={isDraggable}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
<div>
<label htmlFor="draggable">
draggable
<input
id="draggable"
type="checkbox"
checked={isDraggable}
onChange={(evt) => setIsDraggable(evt.target.checked)}
className="react-flow__draggable"
/>
</label>
</div>
<div>
<label htmlFor="connectable">
connectable
<input
id="connectable"
type="checkbox"
checked={isConnectable}
onChange={(evt) => setIsConnectable(evt.target.checked)}
className="react-flow__connectable"
/>
</label>
</div>
<div>
<label htmlFor="selectable">
selectable
<input
id="selectable"
type="checkbox"
checked={isSelectable}
onChange={(evt) => setIsSelectable(evt.target.checked)}
className="react-flow__selectable"
/>
</label>
</div>
</div>
</ReactFlow>
);
};
export default InteractionFlow;
example/src/index.js
+4 -3
View File
@@ -6,7 +6,7 @@ import Overview from './Overview';
import Basic from './Basic';
import CustomNode from './CustomNode';
import Stress from './Stress';
import Inactive from './Inactive';
import Interaction from './Interaction';
import Empty from './Empty';
import Edges from './Edges';
import Validation from './Validation';
@@ -60,8 +60,9 @@ const routes = [
component: Empty,
},
{
path: '/inactive',
component: Inactive,
path: '/interaction',
component: Interaction,
label: 'Interaction',
},
];
src/additional-components/Controls/index.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const Controls = ({ style, showZoom = true, showFitView = true, showInteractive
const zoomIn = useStoreActions((actions) => actions.zoomIn);
const zoomOut = useStoreActions((actions) => actions.zoomOut);
const isInteractive = useStoreState((s) => s.isInteractive);
const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
const mapClasses = classnames('react-flow__controls', className);
return (
src/components/ConnectionLine/index.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ interface ConnectionLineProps {
connectionLineType: ConnectionLineType;
nodes: Node[];
transform: Transform;
isInteractive: boolean;
isConnectable: boolean;
connectionLineStyle?: CSSProperties;
className?: string;
}
@@ -26,7 +26,7 @@ export default ({
nodes = [],
className,
transform,
isInteractive,
isConnectable,
}: ConnectionLineProps) => {
const [sourceNode, setSourceNode] = useState<Node | null>(null);
const hasHandleId = connectionNodeId.includes('__');
@@ -39,7 +39,7 @@ export default ({
setSourceNode(nextSourceNode);
}, []);
if (!sourceNode || !isInteractive) {
if (!sourceNode || !isConnectable) {
return null;
}
src/components/Edges/wrapEdge.tsx
+4 -4
View File
@@ -17,7 +17,7 @@ interface EdgeWrapperProps {
onClick?: (edge: Edge) => void;
animated?: boolean;
selected: boolean;
isInteractive: boolean;
elementsSelectable: boolean;
}
export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
@@ -30,7 +30,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
animated,
selected,
onClick,
isInteractive,
elementsSelectable,
label,
labelStyle,
labelShowBg,
@@ -41,10 +41,10 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
const edgeGroupStyle: CSSProperties = {
pointerEvents: isInteractive ? 'all' : 'none',
pointerEvents: elementsSelectable ? 'all' : 'none',
};
const onEdgeClick = (): void => {
if (!isInteractive) {
if (!elementsSelectable) {
return;
}
src/components/Handle/index.tsx
+5 -2
View File
@@ -1,4 +1,5 @@
import React, { memo, useContext } from 'react';
import classnames from 'classnames';
import { useStoreActions, useStoreState } from '../../store/hooks';
import BaseHandle from './BaseHandle';
@@ -12,6 +13,7 @@ const Handle = memo(
position = Position.Top,
onConnect = () => {},
isValidConnection = () => true,
isConnectable = true,
style,
className,
id,
@@ -24,9 +26,12 @@ const Handle = memo(
onConnectAction(params);
onConnect(params);
};
const handleClasses = classnames(className, { connectable: isConnectable });
return (
<BaseHandle
className={handleClasses}
id={id}
nodeId={nodeId}
setPosition={setPosition}
setConnectionNodeId={setConnectionNodeId}
@@ -35,8 +40,6 @@ const Handle = memo(
position={position}
isValidConnection={isValidConnection}
style={style}
className={className}
id={id}
/>
);
}
src/components/Nodes/DefaultNode.tsx
+9 -7
View File
@@ -3,13 +3,15 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
const DefaultNode = memo(({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} />
{data.label}
<Handle type="source" position={sourcePosition} />
</>
));
const DefaultNode = memo(
({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
{data.label}
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
)
);
DefaultNode.displayName = 'DefaultNode';
src/components/Nodes/InputNode.tsx
+2 -2
View File
@@ -3,10 +3,10 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
const InputNode = memo(({ data, sourcePosition = Position.Bottom }: NodeProps) => (
const InputNode = memo(({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
<>
{data.label}
<Handle type="source" position={sourcePosition} />
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
));
src/components/Nodes/OutputNode.tsx
+2 -2
View File
@@ -3,9 +3,9 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
const OutputNode = memo(({ data, targetPosition = Position.Top }: NodeProps) => (
const OutputNode = memo(({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} />
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
{data.label}
</>
));
src/components/Nodes/wrapNode.tsx
+38 -8
View File
@@ -1,4 +1,14 @@
import React, { useEffect, useRef, useState, memo, ComponentType, CSSProperties, useMemo, MouseEvent } from 'react';
import React, {
useEffect,
useRef,
useState,
memo,
ComponentType,
CSSProperties,
useMemo,
MouseEvent,
useCallback,
} from 'react';
import { DraggableCore } from 'react-draggable';
import cx from 'classnames';
import { ResizeObserver } from 'resize-observer';
@@ -28,6 +38,7 @@ interface OnDragStartParams {
type: string;
data: any;
selectNodesOnDrag: boolean;
isSelectable: boolean;
setOffset: (pos: XYPosition) => void;
transform: Transform;
position: XYPosition;
@@ -46,6 +57,7 @@ const onStart = ({
transform,
position,
setSelectedElements,
isSelectable,
}: OnDragStartParams): false | void => {
const startEvt = getMouseEvent(evt);
@@ -64,7 +76,7 @@ const onStart = ({
onNodeDragStart(node);
}
if (selectNodesOnDrag) {
if (selectNodesOnDrag && isSelectable) {
setSelectedElements({ id, type } as Node);
}
};
@@ -104,6 +116,7 @@ interface OnDragStopParams {
position: XYPosition;
data: any;
selectNodesOnDrag: boolean;
isSelectable: boolean;
setSelectedElements: (elms: Elements | Node | Edge) => void;
onNodeDragStop?: (node: Node) => void;
onClick?: (node: Node) => void;
@@ -117,6 +130,7 @@ const onStop = ({
isDragging,
setDragging,
selectNodesOnDrag,
isSelectable,
onNodeDragStop,
onClick,
setSelectedElements,
@@ -127,8 +141,7 @@ const onStop = ({
position,
data,
} as Node;
if (!isDragging) {
if (!isDragging && isSelectable) {
if (!selectNodesOnDrag) {
setSelectedElements({ id, type } as Node);
}
@@ -164,7 +177,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onNodeDragStop,
style,
className,
isInteractive,
isDraggable,
isSelectable,
isConnectable,
selectNodesOnDrag,
sourcePosition,
targetPosition,
@@ -177,7 +192,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [isDragging, setDragging] = useState(false);
const position = { x: xPos, y: yPos };
const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, { selected });
const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
selected,
selectable: isSelectable,
});
const node = { id, type, position, data };
const onMouseEnterHandler = useMemo(() => {
if (!onMouseEnter || isDragging) {
@@ -211,10 +229,18 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return (evt: MouseEvent) => onContextMenu(evt, node);
}, [onContextMenu]);
const onSelectNodeHandler = useCallback(() => {
if (!isDraggable && isSelectable) {
setSelectedElements({ id, type } as Node);
}
return noop;
}, [isSelectable, isDraggable, id, type]);
const nodeStyle: CSSProperties = {
zIndex: selected ? 10 : 3,
transform: `translate(${xPos}px,${yPos}px)`,
pointerEvents: isInteractive ? 'all' : 'none',
pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
...style,
};
@@ -246,6 +272,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStart({
evt: evt as MouseEvent,
selectNodesOnDrag,
isSelectable,
onNodeDragStart,
id,
type,
@@ -261,6 +288,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStop({
onNodeDragStop,
selectNodesOnDrag,
isSelectable,
onClick,
isDragging,
setDragging,
@@ -272,7 +300,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
})
}
scale={transform[2]}
disabled={!isInteractive}
disabled={!isDraggable}
cancel=".nodrag"
>
<div
@@ -283,6 +311,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onMouseMove={onMouseMoveHandler}
onMouseLeave={onMouseLeaveHandler}
onContextMenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
>
<Provider value={id}>
<NodeComponent
@@ -290,6 +319,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
data={data}
type={type}
selected={selected}
isConnectable={isConnectable}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
/>
src/components/UserSelection/index.tsx
+3 -3
View File
@@ -8,7 +8,6 @@ import { useStoreActions, useStoreState } from '../../store/hooks';
import { XYPosition } from '../../types';
type UserSelectionProps = {
isInteractive: boolean;
selectionKeyPressed: boolean;
};
@@ -45,8 +44,9 @@ const SelectionRect = () => {
);
};
export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps) => {
export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
const selectionActive = useStoreState((s) => s.selectionActive);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const setUserSelection = useStoreActions((a) => a.setUserSelection);
const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
@@ -59,7 +59,7 @@ export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps)
}
}, [selectionKeyPressed]);
if (!isInteractive || !renderUserSelectionPane) {
if (!elementsSelectable || !renderUserSelectionPane) {
return null;
}
src/container/EdgeRenderer/index.tsx
+6 -5
View File
@@ -118,7 +118,7 @@ function renderEdge(
props: EdgeRendererProps,
nodes: Node[],
selectedElements: Elements | null,
isInteractive: boolean
elementsSelectable: boolean
) {
const [sourceId, sourceHandleId] = edge.source.split('__');
const [targetId, targetHandleId] = edge.target.split('__');
@@ -181,7 +181,7 @@ function renderEdge(
targetY={targetY}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
isInteractive={isInteractive}
elementsSelectable={elementsSelectable}
/>
);
}
@@ -194,7 +194,8 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
const connectionHandleType = useStoreState((s) => s.connectionHandleType);
const connectionPosition = useStoreState((s) => s.connectionPosition);
const selectedElements = useStoreState((s) => s.selectedElements);
const isInteractive = useStoreState((s) => s.isInteractive);
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const { width, height, connectionLineStyle, connectionLineType } = props;
@@ -208,7 +209,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
return (
<svg width={width} height={height} className="react-flow__edges">
<g transform={transformStyle}>
{edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, isInteractive))}
{edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, elementsSelectable))}
{renderConnectionLine && (
<ConnectionLine
nodes={nodes}
@@ -219,7 +220,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
transform={[tX, tY, tScale]}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
isInteractive={isInteractive}
isConnectable={nodesConnectable}
/>
)}
</g>
src/container/GraphView/index.tsx
+21 -9
View File
@@ -1,5 +1,4 @@
import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react';
import classnames from 'classnames';
import { ResizeObserver } from 'resize-observer';
import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -46,7 +45,9 @@ export interface GraphViewProps {
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean;
isInteractive: boolean;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
selectNodesOnDrag: boolean;
minZoom: number;
maxZoom: number;
@@ -76,7 +77,9 @@ const GraphView = memo(
snapToGrid,
snapGrid,
onlyRenderVisibleNodes,
isInteractive,
nodesDraggable,
nodesConnectable,
elementsSelectable,
selectNodesOnDrag,
minZoom,
maxZoom,
@@ -92,14 +95,15 @@ const GraphView = memo(
const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
const setOnConnect = useStoreActions((a) => a.setOnConnect);
const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
const setInteractive = useStoreActions((actions) => actions.setInteractive);
const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
const updateTransform = useStoreActions((actions) => actions.updateTransform);
const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
const fitView = useStoreActions((actions) => actions.fitView);
const zoom = useStoreActions((actions) => actions.zoom);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
const onZoomPaneClick = () => setNodesSelection({ isActive: false });
@@ -169,8 +173,16 @@ const GraphView = memo(
}, [snapToGrid]);
useEffect(() => {
setInteractive(isInteractive);
}, [isInteractive]);
setNodesDraggable(nodesDraggable);
}, [nodesDraggable]);
useEffect(() => {
setNodesConnectable(nodesConnectable);
}, [nodesConnectable]);
useEffect(() => {
setElementsSelectable(elementsSelectable);
}, [elementsSelectable]);
useEffect(() => {
setMinMaxZoom({ minZoom, maxZoom });
@@ -180,7 +192,7 @@ const GraphView = memo(
useElementUpdater(elements);
return (
<div className={rendererClasses} ref={rendererNode}>
<div className="react-flow__renderer" ref={rendererNode}>
<NodeRenderer
nodeTypes={nodeTypes}
onElementClick={onElementClick}
@@ -201,7 +213,7 @@ const GraphView = memo(
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
/>
<UserSelection selectionKeyPressed={selectionKeyPressed} isInteractive={isInteractive} />
<UserSelection selectionKeyPressed={selectionKeyPressed} />
{nodesSelectionActive && <NodesSelection />}
<div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
</div>
src/container/NodeRenderer/index.tsx
+13 -4
View File
@@ -22,7 +22,9 @@ function renderNode(
props: NodeRendererProps,
transform: Transform,
selectedElements: Elements | null,
isInteractive: boolean
nodesDraggable: boolean,
nodesConnectable: boolean,
elementsSelectable: boolean
) {
const nodeType = node.type || 'default';
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
@@ -51,7 +53,9 @@ function renderNode(
selected={isSelected}
style={node.style}
className={node.className}
isInteractive={isInteractive}
isDraggable={nodesDraggable}
isSelectable={elementsSelectable}
isConnectable={nodesConnectable}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
selectNodesOnDrag={props.selectNodesOnDrag}
@@ -65,7 +69,10 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend
const selectedElements = useStoreState((s) => s.selectedElements);
const width = useStoreState((s) => s.width);
const height = useStoreState((s) => s.height);
const isInteractive = useStoreState((s) => s.isInteractive);
const nodesDraggable = useStoreState((s) => s.nodesDraggable);
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const [tX, tY, tScale] = transform;
const transformStyle = {
transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
@@ -77,7 +84,9 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend
return (
<div className="react-flow__nodes" style={transformStyle}>
{renderNodes.map((node) => renderNode(node, props, transform, selectedElements, isInteractive))}
{renderNodes.map((node) =>
renderNode(node, props, transform, selectedElements, nodesDraggable, nodesConnectable, elementsSelectable)
)}
</div>
);
});
src/container/ReactFlow/index.tsx
+12 -4
View File
@@ -56,7 +56,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean;
isInteractive: boolean;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
selectNodesOnDrag: boolean;
minZoom: number;
maxZoom: number;
@@ -89,7 +91,9 @@ const ReactFlow = ({
snapToGrid,
snapGrid,
onlyRenderVisibleNodes,
isInteractive,
nodesDraggable,
nodesConnectable,
elementsSelectable,
selectNodesOnDrag,
minZoom,
maxZoom,
@@ -123,7 +127,9 @@ const ReactFlow = ({
snapToGrid={snapToGrid}
snapGrid={snapGrid}
onlyRenderVisibleNodes={onlyRenderVisibleNodes}
isInteractive={isInteractive}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
elementsSelectable={elementsSelectable}
selectNodesOnDrag={selectNodesOnDrag}
minZoom={minZoom}
maxZoom={maxZoom}
@@ -156,7 +162,9 @@ ReactFlow.defaultProps = {
snapToGrid: false,
snapGrid: [16, 16],
onlyRenderVisibleNodes: true,
isInteractive: true,
nodesDraggable: true,
nodesConnectable: true,
elementsSelectable: true,
selectNodesOnDrag: true,
minZoom: 0.5,
maxZoom: 2,
src/store/index.ts
+24 -3
View File
@@ -79,7 +79,9 @@ export interface StoreModel {
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
reactFlowVersion: string;
@@ -116,6 +118,9 @@ export interface StoreModel {
setConnectionNodeId: Action<StoreModel, SetConnectionId>;
setInteractive: Action<StoreModel, boolean>;
setNodesDraggable: Action<StoreModel, boolean>;
setNodesConnectable: Action<StoreModel, boolean>;
setElementsSelectable: Action<StoreModel, boolean>;
setUserSelection: Action<StoreModel, XYPosition>;
updateUserSelection: Action<StoreModel, XYPosition>;
@@ -162,7 +167,9 @@ export const storeModel: StoreModel = {
snapGrid: [16, 16],
snapToGrid: false,
isInteractive: true,
nodesDraggable: true,
nodesConnectable: true,
elementsSelectable: true,
reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
@@ -373,7 +380,21 @@ export const storeModel: StoreModel = {
}),
setInteractive: action((state, isInteractive) => {
state.isInteractive = isInteractive;
state.nodesDraggable = isInteractive;
state.nodesConnectable = isInteractive;
state.elementsSelectable = isInteractive;
}),
setNodesDraggable: action((state, nodesDraggable) => {
state.nodesDraggable = nodesDraggable;
}),
setNodesConnectable: action((state, nodesConnectable) => {
state.nodesConnectable = nodesConnectable;
}),
setElementsSelectable: action((state, elementsSelectable) => {
state.elementsSelectable = elementsSelectable;
}),
fitView: action((state, payload = { padding: 0.1 }) => {
src/style.css
+10 -1
View File
@@ -112,7 +112,11 @@
font-size: 12px;
color: #222;
text-align: center;
}
.react-flow__node-default.selectable,
.react-flow__node-input.selectable,
.react-flow__node-output.selectable {
&.selected,
&.selected:hover {
box-shadow: 0 0 0 2px #555;
@@ -158,7 +162,12 @@
width: 10px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
cursor: crosshair;
pointer-events: none;
&.connectable {
pointer-events: all;
cursor: crosshair;
}
}
.react-flow__handle-bottom {
src/types/index.ts
+6 -1
View File
@@ -94,6 +94,7 @@ export interface NodeProps {
type: string;
data: any;
selected: boolean;
isConnectable: boolean;
targetPosition?: Position;
sourcePosition?: Position;
}
@@ -102,6 +103,7 @@ export interface NodeComponentProps {
id: ElementId;
type: string;
data: any;
isConnectable: boolean;
selected?: boolean;
transform?: Transform;
xPos?: number;
@@ -126,7 +128,9 @@ export interface WrapNodeProps {
transform: Transform;
xPos: number;
yPos: number;
isInteractive: boolean;
isSelectable: boolean;
isDraggable: boolean;
isConnectable: boolean;
selectNodesOnDrag: boolean;
onClick?: (node: Node) => void;
onMouseEnter?: (evt: MouseEvent, node: Node) => void;
@@ -182,6 +186,7 @@ export interface HandleElement extends XYPosition, Dimensions {
export interface HandleProps {
type: HandleType;
position: Position;
isConnectable?: boolean;
onConnect?: OnConnectFunc;
isValidConnection?: (connection: Connection) => boolean;
id?: string;