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

Merge branch 'main' of github.com:jackfishwick/react-flow into jackfishwick-main

Browse Source
This commit is contained in:
moklick
2022-12-08 18:32:33 +01:00
parent 7c51a61f10 2f767408ca
commit badacf763b
17 changed files with 503 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/cypress/e2e/basic.cy.ts
+7 -7
View File
@@ -50,9 +50,9 @@ describe('Basic Flow Rendering', () => {
cy.get('body')
.type('{shift}', { release: false })
.wait(50)
.get('.react-flow__selectionpane')
.trigger('mousedown', 1000, 50, { which: 1, force: true })
.trigger('mousemove', 1, 400, { which: 1 })
.get('.react-flow__pane')
.trigger('mousedown', 1000, 50, { button: 0, force: true })
.trigger('mousemove', 1, 400, { button: 0 })
.wait(50)
.trigger('mouseup', 1, 200, { force: true });
@@ -70,9 +70,9 @@ describe('Basic Flow Rendering', () => {
it('selects all nodes', () => {
cy.get('body')
.type('{shift}', { release: false })
.get('.react-flow__selectionpane')
.trigger('mousedown', 'topRight', { which: 1, force: true })
.trigger('mousemove', 'bottomLeft', { which: 1 })
.get('.react-flow__pane')
.trigger('mousedown', 'topRight', { button: 0, force: true })
.trigger('mousemove', 'bottomLeft', { button: 0 })
.wait(50)
.trigger('mouseup', 'bottomLeft', { force: true })
.wait(50)
@@ -140,7 +140,7 @@ describe('Basic Flow Rendering', () => {
// https://github.com/cypress-io/cypress/issues/3441
cy.window().then((win) => {
cy.get('.react-flow__pane')
.trigger('mousedown', 'topLeft', { which: 1, view: win })
.trigger('mousedown', 'topLeft', { button: 0, view: win })
.trigger('mousemove', 'bottomLeft')
.wait(50)
.trigger('mouseup', { force: true, view: win })
examples/vite-app/cypress/e2e/controls.cy.ts
+1 -1
View File
@@ -37,7 +37,7 @@ describe('Controls Testing', () => {
// https://github.com/cypress-io/cypress/issues/3441
cy.window().then((win) => {
cy.get('.react-flow__renderer')
.trigger('mousedown', 'topLeft', { which: 1, view: win })
.trigger('mousedown', 'topLeft', { button: 0, view: win })
.trigger('mousemove', 10, 400)
.wait(50)
.trigger('mouseup', 10, 400, { force: true, view: win })
examples/vite-app/cypress/e2e/empty.cy.ts
+3 -3
View File
@@ -14,9 +14,9 @@ describe('Empty Flow Rendering', () => {
cy.get('body')
.type('{shift}', { release: false })
.wait(50)
.get('.react-flow__selectionpane')
.trigger('mousedown', 400, 50, { which: 1, force: true })
.trigger('mousemove', 200, 200, { which: 1 })
.get('.react-flow__pane')
.trigger('mousedown', 400, 50, { button: 0, force: true })
.trigger('mousemove', 200, 200, { button: 0 })
.wait(50)
.trigger('mouseup', 200, 200, { force: true });
examples/vite-app/cypress/e2e/figma.cy.ts
+52
View File
@@ -0,0 +1,52 @@
describe('Figma Flow UI', () => {
before(() => {
cy.visit('/figma');
});
it('renders a flow with three nodes', () => {
cy.get('.react-flow__renderer');
cy.get('.react-flow-basic-example'); // check if className prop works
cy.get('.react-flow__node').should('have.length', 4);
cy.get('.react-flow__edge').should('have.length', 2);
cy.get('.react-flow__node').children('.react-flow__handle');
});
it('renders a grid', () => {
cy.get('.react-flow__background');
});
it('selects all nodes by drag', () => {
cy.window().then((win) => {
cy.get('.react-flow__pane')
.trigger('mousedown', 'topLeft', { button: 0, view: win })
.trigger('mousemove', 'bottomRight', { force: true })
.wait(50)
.trigger('mouseup', { force: true, view: win })
.then(() => {
cy.get('.react-flow__node').should('have.class', 'selected');
});
});
});
it('removes selection', () => {
cy.get('.react-flow__pane').click('topLeft');
cy.get('.react-flow__node').should('not.have.class', 'selected');
});
it('drags using right click', () => {
cy.window().then((win) => {
cy.get('.react-flow__node:last').isWithinViewport();
cy.get('.react-flow__pane')
.trigger('mousedown', 'center', { button: 2, view: win })
.trigger('mousemove', 'bottom', { force: true })
.wait(50)
.trigger('mouseup', { force: true, view: win })
.then(() => {
cy.get('.react-flow__node').should('not.have.class', 'selected');
cy.get('.react-flow__node:last').isOutsideViewport();
});
});
});
});
export {};
examples/vite-app/cypress/e2e/interaction.cy.ts
+12 -1
View File
@@ -35,7 +35,18 @@ describe('Interaction Flow 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: false })
.wait(50)
.get('.react-flow__pane')
.trigger('mousedown', 1000, 50, { button: 0, force: true })
.trigger('mousemove', 1, 400, { button: 0 })
.wait(50)
.get('.react-flow__selection')
.should('not.exist');
cy.get('.react-flow__pane').trigger('mouseup', 1, 200, { force: true });
cy.get('body').type('{shift}', { release: true });
});
examples/vite-app/cypress/e2e/minimap.cy.ts
+6 -7
View File
@@ -9,13 +9,12 @@ describe('Minimap Testing', () => {
});
it('has same number of nodes as the pane', () => {
const paneNodes = Cypress.$('.react-flow__node').length;
cy.get('.react-flow__minimap-node').then(() => {
const paneNodes = Cypress.$('.react-flow__node').length;
const minimapNodes = Cypress.$('.react-flow__minimap-node').length;
cy.wait(200);
const minimapNodes = Cypress.$('.react-flow__minimap-node').length;
expect(paneNodes).equal(minimapNodes);
expect(paneNodes).equal(minimapNodes);
});
});
it('changes zoom level', () => {
@@ -60,7 +59,7 @@ describe('Minimap Testing', () => {
// https://github.com/cypress-io/cypress/issues/3441
cy.window().then((win) => {
cy.get('.react-flow__pane')
.trigger('mousedown', 'topLeft', { which: 1, view: win })
.trigger('mousedown', 'topLeft', { button: 0, view: win })
.trigger('mousemove', 'bottomLeft')
.wait(50)
.trigger('mouseup', { force: true, view: win })
examples/vite-app/cypress/support/commands.ts
+12 -10
View File
@@ -36,23 +36,25 @@ Cypress.Commands.add('zoomPane', (wheelDelta: number) =>
Cypress.Commands.add('isWithinViewport', { prevSubject: true }, (subject) => {
const rect = subject[0].getBoundingClientRect();
expect(rect.top).to.be.within(0, window.innerHeight);
expect(rect.right).to.be.within(0, window.innerWidth);
expect(rect.bottom).to.be.within(0, window.innerHeight);
expect(rect.left).to.be.within(0, window.innerWidth);
return cy.window().then((window) => {
expect(rect.top).to.be.within(0, window.innerHeight);
expect(rect.right).to.be.within(0, window.innerWidth);
expect(rect.bottom).to.be.within(0, window.innerHeight);
expect(rect.left).to.be.within(0, window.innerWidth);
return subject;
return subject;
});
});
Cypress.Commands.add('isOutsideViewport', { prevSubject: true }, (subject) => {
const rect = subject[0].getBoundingClientRect();
expect(rect.top).not.to.be.within(0, window.innerHeight);
expect(rect.right).not.to.be.within(0, window.innerWidth);
expect(rect.bottom).not.to.be.within(0, window.innerHeight);
expect(rect.left).not.to.be.within(0, window.innerWidth);
return cy.window().then((window) => {
expect(window.innerHeight < rect.top || rect.bottom < 0 || window.innerWidth < rect.left || rect.right < 0).to.be
.true;
return subject;
return subject;
});
});
export {};
examples/vite-app/src/App/index.tsx
+6
View File
@@ -13,6 +13,7 @@ import Edges from '../examples/Edges';
import EdgeRenderer from '../examples/EdgeRenderer';
import EdgeTypes from '../examples/EdgeTypes';
import Empty from '../examples/Empty';
import Figma from '../examples/Figma';
import FloatingEdges from '../examples/FloatingEdges';
import Hidden from '../examples/Hidden';
import Interaction from '../examples/Interaction';
@@ -120,6 +121,11 @@ const routes: IRoute[] = [
path: '/empty',
component: Empty,
},
{
name: 'Figma',
path: '/figma',
component: Figma,
},
{
name: 'Floating Edges',
path: '/floating-edges',
examples/vite-app/src/examples/Figma/index.tsx
+101
View File
@@ -0,0 +1,101 @@
import ReactFlow, {
ReactFlowProvider,
Background,
BackgroundVariant,
Node,
Edge,
useReactFlow,
useKeyPress,
} from 'reactflow';
const MULTI_SELECT_KEY = ['Meta', 'Shift'];
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
];
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
];
const defaultEdgeOptions = { zIndex: 0 };
const logEvent = (e: any) => console.log(e);
const BasicFlow = () => {
const instance = useReactFlow();
const spaceBarPressed = useKeyPress('Space');
const updatePos = () => {
instance.setNodes((nodes) =>
nodes.map((node) => {
node.position = {
x: Math.random() * 400,
y: Math.random() * 400,
};
return node;
})
);
};
const logToObject = () => console.log(instance.toObject());
const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () => {
instance.setNodes((nodes) =>
nodes.map((node) => {
node.className = node.className === 'light' ? 'dark' : 'light';
return node;
})
);
};
return (
<ReactFlow
defaultNodes={initialNodes}
defaultEdges={initialEdges}
selectBoxOnDrag
selectBoxMode="Overlap"
panOnDrag={spaceBarPressed ? true : 'RightClick'}
panOnScroll
onPaneContextMenu={logEvent}
zoomActivationKeyCode={'Meta'}
multiSelectionKeyCode={MULTI_SELECT_KEY}
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}
fitView
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
>
<Background variant={BackgroundVariant.Lines} />
<div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
<button onClick={resetTransform} style={{ marginRight: 5 }}>
reset transform
</button>
<button onClick={updatePos} style={{ marginRight: 5 }}>
change pos
</button>
<button onClick={toggleClassnames} style={{ marginRight: 5 }}>
toggle classnames
</button>
<button onClick={logToObject}>toObject</button>
</div>
</ReactFlow>
);
};
export default function App() {
return (
<ReactFlowProvider>
<BasicFlow />
</ReactFlowProvider>
);
}