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

feat(props): add mouse event to onNodeDragStart, onNodeDragStop, onElementClick, and onPaneClick

Browse Source
This commit is contained in:
Nate Amack
2020-08-04 12:01:30 -06:00
parent 0f79c3d978
commit 97ec24fa14
15 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
example/src/Basic/index.js
View File

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
const onNodeDragStop = (node) => console.log('drag stop', node);
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const onElementClick = (element) => console.log('click', element);
const onElementClick = (evt, element) => console.log('click', element);
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

4
example/src/CustomNode/index.js
View File

@@ -4,8 +4,8 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r
import ColorSelectorNode from './ColorSelectorNode';
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onElementClick = (evt, element) => console.log('click', element);
const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const initBgColor = '#f0e742';

4
example/src/Edges/index.js
View File

@@ -4,8 +4,8 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } fro
import CustomEdge from './CustomEdge';
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onElementClick = (evt, element) => console.log('click', element);
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const initialElements = [

4
example/src/Empty/index.js
View File

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
const onNodeDragStop = (node) => console.log('drag stop', node);
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const onElementClick = (element) => console.log('click', element);
const onElementClick = (evt, element) => console.log('click', element);
const EmptyFlow = () => {
const [elements, setElements] = useState([]);

8
example/src/Interaction/index.js
View File

@@ -11,10 +11,10 @@ const initialElements = [
{ id: 'e1-3', source: '1', target: '3' },
];
const onNodeDragStart = (node) => console.log('drag start', node);
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onPaneClick = () => console.log('onPaneClick');
const onNodeDragStart = (evt, node) => console.log('drag start', node);
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onElementClick = (evt, element) => console.log('click', evt, element);
const onPaneClick = (evt) => console.log('onPaneClick', evt);
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);

6
example/src/Overview/index.js
View File

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNode } from 'react-flow-renderer';
const onNodeDragStart = (node) => console.log('drag start', node);
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
const onNodeDragStart = (evt, node) => console.log('drag start', node);
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onElementClick = (evt, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
const onSelectionChange = (elements) => console.log('selection change', elements);
const onLoad = (reactFlowInstance) => {
console.log('flow loaded:', reactFlowInstance);

2
example/src/Provider/index.js
View File

@@ -5,7 +5,7 @@ import Sidebar from './Sidebar';
import './provider.css';
const onElementClick = (element) => console.log('click', element);
const onElementClick = (evt, element) => console.log('click', element);
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },