Merge branch 'v11' of github.com:wbkd/react-flow into v11

cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: false,
+    supportFile: false,
+  },
+});

cypress/e2e/basic.cy.js

@@ -1,6 +1,6 @@
 describe('Basic Flow Rendering', () => {
   before(() => {
-    cy.visit('/basic');
+    cy.visit('/');
   });
 
   it('renders a flow with three nodes', () => {
@@ -29,7 +29,9 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('selects a node by click', () => {
-    cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected');
+    cy.get('.react-flow__node:first')
+      .click({ force: true })
+      .should('have.class', 'selected');
   });
 
   it('deselects node', () => {
@@ -38,7 +40,9 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('selects an edge by click', () => {
-    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
+    cy.get('.react-flow__edge:first')
+      .click({ force: true })
+      .should('have.class', 'selected');
   });
 
   it('deselects edge', () => {
@@ -89,11 +93,15 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('selects an edge', () => {
-    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
+    cy.get('.react-flow__edge:first')
+      .click({ force: true })
+      .should('have.class', 'selected');
   });
 
   it('drags a node', () => {
-    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css(
+      'transform'
+    );
 
     cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
       const styleAfterDrag = $el.css('transform');
@@ -145,7 +153,9 @@ describe('Basic Flow Rendering', () => {
         .wait(50)
         .trigger('mouseup', { force: true, view: win })
         .then(() => {
-          const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
+          const styleAfterDrag = Cypress.$('.react-flow__viewport').css(
+            'transform'
+          );
           expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
         });
     });
@@ -158,7 +168,9 @@ describe('Basic Flow Rendering', () => {
       .trigger('wheel', 'topLeft', { deltaY: -200 })
       .wait(50)
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__viewport').css(
+          'transform'
+        );
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
       });
   });

package.json

@@ -12,7 +12,8 @@
   "scripts": {
     "dev": "preconstruct watch",
     "postinstall": "preconstruct dev",
-    "build": "preconstruct build"
+    "build": "preconstruct build",
+    "test": "cypress run --browser chrome"
   },
   "dependencies": {
     "react": "^18.1.0",
@@ -25,6 +26,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@preconstruct/cli": "^2.1.8",
     "autoprefixer": "^10.4.7",
+    "cypress": "^10.3.1",
     "postcss": "^8.4.14",
     "postcss-nested": "^5.0.6",
     "typescript": "^4.7.4"

packages/core/.postcssrc.json

@@ -1,7 +0,0 @@
-
-{
-  "plugins": {
-    "autoprefixer" : {},
-    "postcss-nested": {}
-  }
-}

packages/core/cypress.json

@@ -1,7 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "viewportWidth": 1280,
-  "viewportHeight": 720,
-  "video": false,
-  "pluginsFile": false
-}

packages/core/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -20,7 +20,7 @@ const Marker = ({
   height = 12.5,
   markerUnits = 'strokeWidth',
   strokeWidth,
-  orient = 'auto',
+  orient = 'auto-start-reverse',
 }: MarkerProps) => {
   const Symbol = useMarkerSymbol(type);