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

refactor(variables): dont use abbreviations

Browse Source
This commit is contained in:
moklick
2020-08-10 12:10:17 +02:00
parent 1f9a76eb89
commit 59742c9526
24 changed files with 160 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Basic/index.js
+2 -2
View File
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const onElementClick = (evt, element) => console.log('click', element);
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
example/src/CustomNode/index.js
+4 -4
View File
@@ -4,9 +4,9 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r
import ColorSelectorNode from './ColorSelectorNode';
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 onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
const initBgColor = '#f0e742';
@@ -21,14 +21,14 @@ const CustomNodeFlow = () => {
const [bgColor, setBgColor] = useState(initBgColor);
useEffect(() => {
const onChange = (evt) => {
const onChange = (event) => {
setElements((els) =>
els.map((e) => {
if (isEdge(e) || e.id !== '2') {
return e;
}
const color = evt.target.value;
const color = event.target.value;
setBgColor(color);
example/src/Edges/index.js
+2 -2
View File
@@ -4,9 +4,9 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } fro
import CustomEdge from './CustomEdge';
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onElementClick = (evt, element) => console.log('click', element);
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
example/src/Empty/index.js
+2 -2
View File
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
const onNodeDragStop = (evt, node) => console.log('drag stop', node);
const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const onElementClick = (evt, element) => console.log('click', element);
const onElementClick = (event, element) => console.log('click', element);
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const EmptyFlow = () => {
const [elements, setElements] = useState([]);
example/src/Hidden/index.js
+1 -1
View File
@@ -42,7 +42,7 @@ const HiddenFlow = () => {
id="ishidden"
type="checkbox"
checked={isHidden}
onChange={(evt) => setIsHidden(evt.target.checked)}
onChange={(event) => setIsHidden(event.target.checked)}
className="react-flow__ishidden"
/>
</label>
example/src/Horizontal/index.js
+5 -5
View File
@@ -4,11 +4,11 @@ import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const onNodeMouseEnter = (evt, node) => console.log('mouse enter:', node);
const onNodeMouseMove = (evt, node) => console.log('mouse move:', node);
const onNodeMouseLeave = (evt, node) => console.log('mouse leave:', node);
const onNodeContextMenu = (evt, node) => {
evt.preventDefault();
const onNodeMouseEnter = (event, node) => console.log('mouse enter:', node);
const onNodeMouseMove = (event, node) => console.log('mouse move:', node);
const onNodeMouseLeave = (event, node) => console.log('mouse leave:', node);
const onNodeContextMenu = (event, node) => {
event.preventDefault();
console.log('context menu:', node);
};
example/src/Interaction/index.js
+12 -12
View File
@@ -11,11 +11,11 @@ const initialElements = [
{ id: 'e1-3', source: '1', target: '3' },
];
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 onPaneContextMenu = (evt) => console.log('onPaneContextMenu', evt);
const onNodeDragStart = (event, node) => console.log('drag start', node);
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
const onPaneClick = (event) => console.log('onPaneClick', event);
const onPaneContextMenu = (event) => console.log('onPaneContextMenu', event);
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);
@@ -56,7 +56,7 @@ const InteractionFlow = () => {
id="draggable"
type="checkbox"
checked={isDraggable}
onChange={(evt) => setIsDraggable(evt.target.checked)}
onChange={(event) => setIsDraggable(event.target.checked)}
className="react-flow__draggable"
/>
</label>
@@ -68,7 +68,7 @@ const InteractionFlow = () => {
id="connectable"
type="checkbox"
checked={isConnectable}
onChange={(evt) => setIsConnectable(evt.target.checked)}
onChange={(event) => setIsConnectable(event.target.checked)}
className="react-flow__connectable"
/>
</label>
@@ -80,7 +80,7 @@ const InteractionFlow = () => {
id="selectable"
type="checkbox"
checked={isSelectable}
onChange={(evt) => setIsSelectable(evt.target.checked)}
onChange={(event) => setIsSelectable(event.target.checked)}
className="react-flow__selectable"
/>
</label>
@@ -92,7 +92,7 @@ const InteractionFlow = () => {
id="zoomonscroll"
type="checkbox"
checked={zoomOnScroll}
onChange={(evt) => setZoomOnScroll(evt.target.checked)}
onChange={(event) => setZoomOnScroll(event.target.checked)}
className="react-flow__zoomonscroll"
/>
</label>
@@ -104,7 +104,7 @@ const InteractionFlow = () => {
id="zoomondbl"
type="checkbox"
checked={zoomOnDoubleClick}
onChange={(evt) => setZoomOnDoubleClick(evt.target.checked)}
onChange={(event) => setZoomOnDoubleClick(event.target.checked)}
className="react-flow__zoomondbl"
/>
</label>
@@ -116,7 +116,7 @@ const InteractionFlow = () => {
id="panemoveable"
type="checkbox"
checked={paneMoveable}
onChange={(evt) => setPaneMoveable(evt.target.checked)}
onChange={(event) => setPaneMoveable(event.target.checked)}
className="react-flow__panemoveable"
/>
</label>
@@ -128,7 +128,7 @@ const InteractionFlow = () => {
id="capturezoompaneclick"
type="checkbox"
checked={captureZoomClick}
onChange={(evt) => setCaptureZoomClick(evt.target.checked)}
onChange={(event) => setCaptureZoomClick(event.target.checked)}
className="react-flow__capturezoompaneclick"
/>
</label>
example/src/Overview/index.js
+3 -3
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 = (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 onNodeDragStart = (event, node) => console.log('drag start', node);
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, 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);
example/src/Provider/index.js
+1 -1
View File
@@ -5,7 +5,7 @@ import Sidebar from './Sidebar';
import './provider.css';
const onElementClick = (evt, element) => console.log('click', element);
const onElementClick = (event, element) => console.log('click', element);
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
example/src/Stress/index.js
-1
View File
@@ -5,7 +5,6 @@ import { getElements } from './utils';
const onLoad = (reactFlowInstance) => {
reactFlowInstance.fitView();
console.log(reactFlowInstance.getElements());
};
example/src/Validation/index.js
+7 -7
View File
@@ -11,13 +11,10 @@ const initialElements = [
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
];
const isValidConnection = (connection) => connection.target === 'B';
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const onConnectStart = (evt, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
const onConnectStop = (evt) => console.log('on connect stop', evt);
const isValidConnection = (connection) => connection.target === 'B';
const onConnectStart = (event, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
const onConnectStop = (event) => console.log('on connect stop', event);
const CustomInput = () => (
<>
@@ -41,7 +38,10 @@ const nodeTypes = {
const HorizontalFlow = () => {
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => setElements((els) => addEdge(params, els));
const onConnect = (params) => {
console.log('on connect', params);
setElements((els) => addEdge(params, els));
};
return (
<ReactFlow