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

feat(editor): selectionKey as prop

Browse Source
This commit is contained in:
moklick
2019-10-03 17:47:34 +02:00
parent 5ffe4f9c93
commit 5dd8d6a804
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/GraphView/index.js
+3 -3
View File
@@ -24,7 +24,7 @@ const GraphView = memo((props) => {
const updateSize = useStoreActions(actions => actions.updateSize); const updateSize = useStoreActions(actions => actions.updateSize);
const setNodesSelection = useStoreActions(actions => actions.setNodesSelection); const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
const shiftPressed = useKeyPress('Shift'); const selectionKeyPressed = useKeyPress(props.selectionKey);
const updateDimensions = () => { const updateDimensions = () => {
const size = getDimensions(rendererNode.current); const size = getDimensions(rendererNode.current);
updateSize(size); updateSize(size);
@@ -39,7 +39,7 @@ const GraphView = memo((props) => {
}; };
}, []); }, []);
useD3Zoom(zoomPane, props.onMove, shiftPressed); useD3Zoom(zoomPane, props.onMove, selectionKeyPressed);
useEffect(() => { useEffect(() => {
if (state.d3Initialised) { if (state.d3Initialised) {
@@ -66,7 +66,7 @@ const GraphView = memo((props) => {
connectionLineType={props.connectionLineType} connectionLineType={props.connectionLineType}
connectionLineStyle={props.connectionLineStyle} connectionLineStyle={props.connectionLineStyle}
/> />
{shiftPressed && <UserSelection />} {selectionKeyPressed && <UserSelection />}
{state.nodesSelectionActive && <NodesSelection />} {state.nodesSelectionActive && <NodesSelection />}
<div <div
className="react-graph__zoompane" className="react-graph__zoompane"
src/ReactGraph/index.js
+4 -2
View File
@@ -27,7 +27,7 @@ const ReactGraph = ({
style, onElementClick, elements, children, style, onElementClick, elements, children,
nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove, nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove,
onConnect, onNodeDragStop, connectionLineType, connectionLineStyle, onConnect, onNodeDragStop, connectionLineType, connectionLineStyle,
deleteKey deleteKey, selectionKey
}) => { }) => {
const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []); const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []); const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -45,6 +45,7 @@ const ReactGraph = ({
edgeTypes={edgeTypesParsed} edgeTypes={edgeTypesParsed}
connectionLineType={connectionLineType} connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle} connectionLineStyle={connectionLineStyle}
selectionKey={selectionKey}
/> />
<GlobalKeyHandler <GlobalKeyHandler
onElementsRemove={onElementsRemove} onElementsRemove={onElementsRemove}
@@ -77,7 +78,8 @@ ReactGraph.defaultProps = {
}, },
connectionLineType: 'bezier', connectionLineType: 'bezier',
connectionLineStyle: {}, connectionLineStyle: {},
deleteKey: 'Backspace' deleteKey: 'Backspace',
selectionKey: 'Shift'
}; };
export default ReactGraph; export default ReactGraph;