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

fix zoom behaviour while selection key is pressed

Browse Source
This commit is contained in:
Christopher Möller
2020-11-02 13:19:04 +01:00
parent 0cb6662d5c ce48087673
commit febf3012d7
6 changed files with 201 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/integration/flow/interaction.spec.js
+2 -2
View File
@@ -49,7 +49,7 @@ describe('Interaction Flow Rendering', () => {
});
});
it('tries to zoom by scroll', () => {
it('tries to zoom by double click', () => {
const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
cy.get('.react-flow__renderer')
@@ -60,7 +60,7 @@ describe('Interaction Flow Rendering', () => {
});
});
it('tries to zoom by double click', () => {
it('tries to zoom by scroll', () => {
const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
cy.get('.react-flow__renderer')
example/src/Interaction/index.js
+1 -1
View File
@@ -25,7 +25,7 @@ const InteractionFlow = () => {
const [isSelectable, setIsSelectable] = useState(false);
const [isDraggable, setIsDraggable] = useState(false);
const [isConnectable, setIsConnectable] = useState(false);
const [zoomOnScroll, setZoomOnScroll] = useState(true);
const [zoomOnScroll, setZoomOnScroll] = useState(false);
const [panOnScroll, setPanOnScroll] = useState(false);
const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
const [paneMoveable, setPaneMoveable] = useState(true);
package-lock.json
Generated
+177 -139
View File
@@ -1360,18 +1360,18 @@
}
},
"@octokit/auth-token": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.4.2.tgz",
"integrity": "sha512-jE/lE/IKIz2v1+/P0u4fJqv0kYwXOTujKemJMFr6FeopsxlIK3+wKDCJGnysg81XID5TgZQbIfuJ5J0lnTiuyQ==",
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.4.3.tgz",
"integrity": "sha512-fdGoOQ3kQJh+hrilc0Plg50xSfaCKOeYN9t6dpJKXN9BxhhfquL0OzoQXg3spLYymL5rm29uPeI3KEXRaZQ9zg==",
"dev": true,
"requires": {
"@octokit/types": "^5.0.0"
}
},
"@octokit/core": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.1.3.tgz",
"integrity": "sha512-s5UyENGUQBB+ocEOulXq6UH5J16fxuKY2J7ZYrIu9oJYAn0nCwM8hC8o4L23HEzU0SFzNEX86+ffc1T3Vr2ybg==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.2.1.tgz",
"integrity": "sha512-XfFSDDwv6tclUenS0EmB6iA7u+4aOHBT1Lz4PtQNQQg3hBbNaR/+Uv5URU+egeIuuGAiMRiDyY92G4GBOWOqDA==",
"dev": true,
"requires": {
"@octokit/auth-token": "^2.4.0",
@@ -1383,9 +1383,9 @@
}
},
"@octokit/endpoint": {
"version": "6.0.8",
"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.8.tgz",
"integrity": "sha512-MuRrgv+bM4Q+e9uEvxAB/Kf+Sj0O2JAOBA131uo1o6lgdq1iS8ejKwtqHgdfY91V3rN9R/hdGKFiQYMzVzVBEQ==",
"version": "6.0.9",
"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.9.tgz",
"integrity": "sha512-3VPLbcCuqji4IFTclNUtGdp9v7g+nspWdiCUbK3+iPMjJCZ6LEhn1ts626bWLOn0GiDb6j+uqGvPpqLnY7pBgw==",
"dev": true,
"requires": {
"@octokit/types": "^5.0.0",
@@ -1394,9 +1394,9 @@
}
},
"@octokit/graphql": {
"version": "4.5.6",
"resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.5.6.tgz",
"integrity": "sha512-Rry+unqKTa3svswT2ZAuqenpLrzJd+JTv89LTeVa5UM/5OX8o4KTkPL7/1ABq4f/ZkELb0XEK/2IEoYwykcLXg==",
"version": "4.5.7",
"resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.5.7.tgz",
"integrity": "sha512-Gk0AR+DcwIK/lK/GX+OQ99UqtenQhcbrhHHfOYlrCQe17ADnX3EKAOKRsAZ9qZvpi5MuwWm/Nm+9aO2kTDSdyA==",
"dev": true,
"requires": {
"@octokit/request": "^5.3.0",
@@ -1405,18 +1405,18 @@
}
},
"@octokit/plugin-paginate-rest": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.4.0.tgz",
"integrity": "sha512-YT6Klz3LLH6/nNgi0pheJnUmTFW4kVnxGft+v8Itc41IIcjl7y1C8TatmKQBbCSuTSNFXO5pCENnqg6sjwpJhg==",
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.6.0.tgz",
"integrity": "sha512-o+O8c1PqsC5++BHXfMZabRRsBIVb34tXPWyQLyp2IXq5MmkxdipS7TXM4Y9ldL1PzY9CTrCsn/lzFFJGM3oRRA==",
"dev": true,
"requires": {
"@octokit/types": "^5.5.0"
}
},
"@octokit/plugin-request-log": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.0.tgz",
"integrity": "sha512-ywoxP68aOT3zHCLgWZgwUJatiENeHE7xJzYjfz8WI0goynp96wETBF+d95b8g/uL4QmS6owPVlaxiz3wyMAzcw==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.2.tgz",
"integrity": "sha512-oTJSNAmBqyDR41uSMunLQKMX0jmEXbwD1fpz8FG27lScV3RhtGfBa1/BBLym+PxcC16IBlF7KH9vP1BUYxA+Eg==",
"dev": true
},
"@octokit/plugin-rest-endpoint-methods": {
@@ -1430,9 +1430,9 @@
}
},
"@octokit/request": {
"version": "5.4.9",
"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.4.9.tgz",
"integrity": "sha512-CzwVvRyimIM1h2n9pLVYfTDmX9m+KHSgCpqPsY8F1NdEK8IaWqXhSBXsdjOBFZSpEcxNEeg4p0UO9cQ8EnOCLA==",
"version": "5.4.10",
"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.4.10.tgz",
"integrity": "sha512-egA49HkqEORVGDZGav1mh+VD+7uLgOxtn5oODj6guJk0HCy+YBSYapFkSLFgeYj3Fr18ZULKGURkjyhkAChylw==",
"dev": true,
"requires": {
"@octokit/endpoint": "^6.0.1",
@@ -1446,9 +1446,9 @@
}
},
"@octokit/request-error": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.0.2.tgz",
"integrity": "sha512-2BrmnvVSV1MXQvEkrb9zwzP0wXFNbPJij922kYBTLIlIafukrGOb+ABBT2+c6wZiuyWDH1K1zmjGQ0toN/wMWw==",
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.0.3.tgz",
"integrity": "sha512-GgD5z8Btm301i2zfvJLk/mkhvGCdjQ7wT8xF9ov5noQY8WbKZDH9cOBqXzoeKd1mLr1xH2FwbtGso135zGBgTA==",
"dev": true,
"requires": {
"@octokit/types": "^5.0.1",
@@ -1457,9 +1457,9 @@
}
},
"@octokit/rest": {
"version": "18.0.6",
"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-18.0.6.tgz",
"integrity": "sha512-ES4lZBKPJMX/yUoQjAZiyFjei9pJ4lTTfb9k7OtYoUzKPDLl/M8jiHqt6qeSauyU4eZGLw0sgP1WiQl9FYeM5w==",
"version": "18.0.7",
"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-18.0.7.tgz",
"integrity": "sha512-ctz0cMIb3c6gO2ADto+A1r4JI+2hkUkDcD1JRunkhk1SOUrNGQcQ+9FBqZ6UekS1Z/c3xPvF0OoLtX2cQ118+A==",
"dev": true,
"requires": {
"@octokit/core": "^3.0.0",
@@ -1517,13 +1517,13 @@
}
},
"@rollup/plugin-replace": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz",
"integrity": "sha512-XPmVXZ7IlaoWaJLkSCDaa0Y6uVo5XQYHhiMFzOd5qSv5rE+t/UJToPIOE56flKIxBFQI27ONsxb7dqHnwSsjKQ==",
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz",
"integrity": "sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^3.0.8",
"magic-string": "^0.25.5"
"@rollup/pluginutils": "^3.1.0",
"magic-string": "^0.25.7"
}
},
"@rollup/pluginutils": {
@@ -1555,9 +1555,9 @@
}
},
"@sindresorhus/is": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-3.1.2.tgz",
"integrity": "sha512-JiX9vxoKMmu8Y3Zr2RVathBL1Cdu4Nt4MuNWemt1Nc06A0RAin9c5FArkhGsyMBWfCu4zj+9b+GxtjAnE4qqLQ==",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.0.0.tgz",
"integrity": "sha512-FyD2meJpDPjyNQejSjvnhpgI/azsQkA4lGbuu5BQZfjvJ9cbRZXzeWL2HceCekW4lixO9JPesIIQkSoLjeJHNQ==",
"dev": true
},
"@svgr/babel-plugin-add-jsx-attribute": {
@@ -1705,9 +1705,9 @@
}
},
"@types/classnames": {
"version": "2.2.10",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
"integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==",
"version": "2.2.11",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
"integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==",
"dev": true
},
"@types/d3": {
@@ -2022,9 +2022,9 @@
"dev": true
},
"@types/react": {
"version": "16.9.53",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.53.tgz",
"integrity": "sha512-4nW60Sd4L7+WMXH1D6jCdVftuW7j4Za6zdp6tJ33Rqv0nk1ZAmQKML9ZLD4H0dehA3FZxXR/GM8gXplf82oNGw==",
"version": "16.9.55",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.55.tgz",
"integrity": "sha512-6KLe6lkILeRwyyy7yG9rULKJ0sXplUsl98MGoCfpteXf9sPWFWWMknDcsvubcpaTdBuxtsLF6HDUwdApZL/xIg==",
"dev": true,
"requires": {
"@types/prop-types": "*",
@@ -2032,9 +2032,9 @@
}
},
"@types/react-dom": {
"version": "16.9.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
"integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
"version": "16.9.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.9.tgz",
"integrity": "sha512-jE16FNWO3Logq/Lf+yvEAjKzhpST/Eac8EMd1i4dgZdMczfgqC8EjpxwNgEe3SExHYLliabXDh9DEhhqnlXJhg==",
"dev": true,
"requires": {
"@types/react": "*"
@@ -2173,9 +2173,9 @@
"dev": true
},
"arch": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/arch/-/arch-2.1.2.tgz",
"integrity": "sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==",
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
"integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
"dev": true
},
"argparse": {
@@ -2263,9 +2263,9 @@
"dev": true
},
"aws4": {
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.1.tgz",
"integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"axios": {
@@ -2441,6 +2441,12 @@
"requires": {
"has-flag": "^4.0.0"
}
},
"type-fest": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
"dev": true
}
}
},
@@ -2512,6 +2518,14 @@
"lowercase-keys": "^2.0.0",
"normalize-url": "^4.1.0",
"responselike": "^2.0.0"
},
"dependencies": {
"normalize-url": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
"integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
"dev": true
}
}
},
"cachedir": {
@@ -3228,15 +3242,15 @@
}
},
"csstype": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
"integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==",
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.4.tgz",
"integrity": "sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA==",
"dev": true
},
"cypress": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-5.4.0.tgz",
"integrity": "sha512-BJR+u3DRSYMqaBS1a3l1rbh5AkMRHugbxcYYzkl+xYlO6dzcJVE8uAhghzVI/hxijCyBg1iuSe4TRp/g1PUg8Q==",
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-5.5.0.tgz",
"integrity": "sha512-UHEiTca8AUTevbT2pWkHQlxoHtXmbq+h6Eiu/Mz8DqpNkF98zjTBLv/HFiKJUU5rQzp9EwSWtms33p5TWCJ8tQ==",
"dev": true,
"requires": {
"@cypress/listr-verbose-renderer": "^0.4.1",
@@ -3269,10 +3283,10 @@
"minimist": "^1.2.5",
"moment": "^2.27.0",
"ospath": "^1.2.2",
"pretty-bytes": "^5.3.0",
"pretty-bytes": "^5.4.1",
"ramda": "~0.26.1",
"request-progress": "^3.0.0",
"supports-color": "^7.1.0",
"supports-color": "^7.2.0",
"tmp": "~0.2.1",
"untildify": "^4.0.0",
"url": "^0.11.0",
@@ -3853,9 +3867,9 @@
"dev": true
},
"fastq": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
"integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.9.0.tgz",
"integrity": "sha512-i7FVWL8HhVY+CTkwFxkN2mk3h+787ixS5S63eb78diVRc1MCssarHq3W5cj0av7YDSwmaV928RNag+U1etRQ7w==",
"dev": true,
"requires": {
"reusify": "^1.0.4"
@@ -4064,9 +4078,9 @@
}
},
"git-url-parse": {
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.3.0.tgz",
"integrity": "sha512-i3XNa8IKmqnUqWBcdWBjOcnyZYfN3C1WRvnKI6ouFWwsXCZEnlgbwbm55ZpJ3OJMhfEP/ryFhqW8bBhej3C5Ug==",
"version": "11.4.0",
"resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.4.0.tgz",
"integrity": "sha512-KlIa5jvMYLjXMQXkqpFzobsyD/V2K5DRHl5OAf+6oDFPlPLxrGDVQlIdI63c4/Kt6kai4kALENSALlzTGST3GQ==",
"dev": true,
"requires": {
"git-up": "^4.0.0"
@@ -4125,12 +4139,12 @@
}
},
"got": {
"version": "11.7.0",
"resolved": "https://registry.npmjs.org/got/-/got-11.7.0.tgz",
"integrity": "sha512-7en2XwH2MEqOsrK0xaKhbWibBoZqy+f1RSUoIeF1BLcnf+pyQdDsljWMfmOh+QKJwuvDIiKx38GtPh5wFdGGjg==",
"version": "11.8.0",
"resolved": "https://registry.npmjs.org/got/-/got-11.8.0.tgz",
"integrity": "sha512-k9noyoIIY9EejuhaBNLyZ31D5328LeqnyPNXJQb2XlJZcKakLqN5m6O/ikhq/0lw56kUYS54fVm+D1x57YC9oQ==",
"dev": true,
"requires": {
"@sindresorhus/is": "^3.1.1",
"@sindresorhus/is": "^4.0.0",
"@szmarczak/http-timer": "^4.0.5",
"@types/cacheable-request": "^6.0.1",
"@types/responselike": "^1.0.0",
@@ -4496,12 +4510,6 @@
"requires": {
"has-flag": "^4.0.0"
}
},
"type-fest": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
"integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
"dev": true
}
}
},
@@ -4865,13 +4873,21 @@
}
},
"jsonfile": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
"integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^1.0.0"
"universalify": "^2.0.0"
},
"dependencies": {
"universalify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
"dev": true
}
}
},
"jsprim": {
@@ -5496,9 +5512,9 @@
"dev": true
},
"normalize-url": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
"integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
"dev": true
},
"npm-run-path": {
@@ -5872,6 +5888,23 @@
"lowercase-keys": "^2.0.0",
"normalize-url": "^4.1.0",
"responselike": "^1.0.2"
},
"dependencies": {
"get-stream": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
"dev": true,
"requires": {
"pump": "^3.0.0"
}
},
"lowercase-keys": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
"integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
"dev": true
}
}
},
"decompress-response": {
@@ -5889,6 +5922,15 @@
"integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
"dev": true
},
"get-stream": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
"dev": true,
"requires": {
"pump": "^3.0.0"
}
},
"got": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
@@ -5906,23 +5948,6 @@
"p-cancelable": "^1.0.0",
"to-readable-stream": "^1.0.0",
"url-parse-lax": "^3.0.0"
},
"dependencies": {
"get-stream": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
"dev": true,
"requires": {
"pump": "^3.0.0"
}
},
"lowercase-keys": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
"dev": true
}
}
},
"json-buffer": {
@@ -5940,6 +5965,18 @@
"json-buffer": "3.0.0"
}
},
"lowercase-keys": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
"dev": true
},
"normalize-url": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
"integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
"dev": true
},
"p-cancelable": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
@@ -5953,14 +5990,6 @@
"dev": true,
"requires": {
"lowercase-keys": "^1.0.0"
},
"dependencies": {
"lowercase-keys": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
"dev": true
}
}
},
"semver": {
@@ -6012,14 +6041,6 @@
"normalize-url": "^3.3.0",
"parse-path": "^4.0.0",
"protocols": "^1.4.0"
},
"dependencies": {
"normalize-url": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
"dev": true
}
}
},
"path-exists": {
@@ -6932,9 +6953,9 @@
"dev": true
},
"pupa": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.0.tgz",
"integrity": "sha512-Pj8EhJzFiPwnf4dEXpuUWwH8M/Yl4vpl4cN2RX1i3R77DWvbY5ZPKni7CCKkOYxz+XKt2fieemsV+WTZbIlYzg==",
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
"integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
"dev": true,
"requires": {
"escape-goat": "^2.0.0"
@@ -7137,24 +7158,24 @@
}
},
"release-it": {
"version": "14.2.0",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-14.2.0.tgz",
"integrity": "sha512-34m8YlmZOUs+/mJhiVx11hcJEi67CAxtqqWXGGszc0uoEUdojUNTm1cWCEW/kuJbv6bMhmb8jP8B/8qmGjiKyQ==",
"version": "14.2.1",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-14.2.1.tgz",
"integrity": "sha512-zHXJjU2eOvVcbXTQSfgNC9DcDU7WgTc9qappBFfGRDicK//Bqt1KaOAEhCS6EZ9u4v7YbWBRbUejSrVXOLfCVQ==",
"dev": true,
"requires": {
"@iarna/toml": "2.2.5",
"@octokit/rest": "18.0.6",
"@octokit/rest": "18.0.7",
"async-retry": "1.3.1",
"chalk": "4.1.0",
"cosmiconfig": "7.0.0",
"debug": "4.2.0",
"deprecated-obj": "2.0.0",
"execa": "4.0.3",
"execa": "4.1.0",
"find-up": "5.0.0",
"form-data": "3.0.0",
"git-url-parse": "11.3.0",
"git-url-parse": "11.4.0",
"globby": "11.0.1",
"got": "11.7.0",
"got": "11.8.0",
"import-cwd": "3.0.0",
"inquirer": "7.3.3",
"is-ci": "2.0.0",
@@ -7219,6 +7240,23 @@
"yaml": "^1.10.0"
}
},
"execa": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
"integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
"dev": true,
"requires": {
"cross-spawn": "^7.0.0",
"get-stream": "^5.0.0",
"human-signals": "^1.1.1",
"is-stream": "^2.0.0",
"merge-stream": "^2.0.0",
"npm-run-path": "^4.0.0",
"onetime": "^5.1.0",
"signal-exit": "^3.0.2",
"strip-final-newline": "^2.0.0"
}
},
"form-data": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
@@ -7356,9 +7394,9 @@
}
},
"rollup": {
"version": "2.32.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.32.1.tgz",
"integrity": "sha512-Op2vWTpvK7t6/Qnm1TTh7VjEZZkN8RWgf0DHbkKzQBwNf748YhXbozHVefqpPp/Fuyk/PQPAnYsBxAEtlMvpUw==",
"version": "2.33.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.0.tgz",
"integrity": "sha512-7jFrmKgQj1GOWlC8rExHaPcv2SQnWMv1BFUyH/xWS5w80h6132wBUWp/qTvQkAbnlqGvi13T6iP2kHo9Sb2HxA==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@@ -7554,9 +7592,9 @@
"dev": true
},
"run-parallel": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
"integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
"integrity": "sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==",
"dev": true
},
"rxjs": {
@@ -7969,9 +8007,9 @@
"integrity": "sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA=="
},
"term-size": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz",
"integrity": "sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==",
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
"integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==",
"dev": true
},
"throttleit": {
@@ -8059,9 +8097,9 @@
"dev": true
},
"type-fest": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
"integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
"dev": true
},
"typedarray": {
@@ -8080,9 +8118,9 @@
}
},
"typescript": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
"integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==",
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz",
"integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
"dev": true
},
"unicode-canonical-property-names-ecmascript": {
package.json
+8 -8
View File
@@ -44,26 +44,26 @@
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-commonjs": "^15.1.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-replace": "^2.3.4",
"@svgr/rollup": "^5.4.0",
"@types/classnames": "^2.2.10",
"@types/classnames": "^2.2.11",
"@types/d3": "^5.16.3",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@types/react": "^16.9.55",
"@types/react-dom": "^16.9.9",
"autoprefixer": "^9.8.6",
"babel-preset-react-app": "^10.0.0",
"cypress": "^5.4.0",
"cypress": "^5.5.0",
"postcss-nested": "^4.2.3",
"prettier": "2.1.2",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"release-it": "^14.2.0",
"rollup": "^2.32.1",
"release-it": "^14.2.1",
"rollup": "^2.33.0",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-typescript2": "^0.28.0",
"start-server-and-test": "^1.11.5",
"typescript": "^4.0.3"
"typescript": "^4.0.5"
},
"peerDependencies": {
"react": "^16.14.0"
src/container/ZoomPane/index.tsx
+13 -10
View File
@@ -55,7 +55,6 @@ const ZoomPane = ({
const initD3 = useStoreActions((actions) => actions.initD3);
const updateTransform = useStoreActions((actions) => actions.updateTransform);
const updateTransformDelta = useStoreActions((actions) => actions.updateTransformDelta);
useResizeHandler(zoomPane);
@@ -83,16 +82,20 @@ const ZoomPane = ({
useEffect(() => {
if (d3Zoom) {
d3Zoom.on('zoom', (event: any) => {
updateTransform(event.transform);
if (selectionKeyPressed) {
d3Zoom.on('zoom', null);
} else {
d3Zoom.on('zoom', (event: any) => {
updateTransform(event.transform);
if (onMove) {
const flowTransform = eventToFlowTransform(event.transform);
onMove(flowTransform);
}
});
if (onMove) {
const flowTransform = eventToFlowTransform(event.transform);
onMove(flowTransform);
}
});
}
}
}, [selectionKeyPressed, panOnScroll, d3Zoom, updateTransform, updateTransformDelta, onMove]);
}, [selectionKeyPressed, d3Zoom, updateTransform, onMove]);
useEffect(() => {
if (d3Zoom) {
@@ -137,7 +140,7 @@ const ZoomPane = ({
}
// during a selection we prevent all other interactions
if (elementsSelectable && selectionKeyPressed) {
if (selectionKeyPressed) {
return false;
}
src/store/index.ts
-21
View File
@@ -37,12 +37,6 @@ type TransformXYK = {
k: number;
};
type TransformDeltas = {
x?: number;
y?: number;
k?: number;
};
type NodeDimensionUpdate = {
id: ElementId;
nodeElement: HTMLDivElement;
@@ -116,7 +110,6 @@ export interface StoreModel {
setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
updateTransform: Action<StoreModel, TransformXYK>;
updateTransformDelta: Action<StoreModel, TransformDeltas>;
setInitTransform: Action<StoreModel, TransformXYK>;
@@ -360,20 +353,6 @@ export const storeModel: StoreModel = {
state.transform[2] = transform.k;
}),
updateTransformDelta: action((state, deltas) => {
const { x = 0, y = 0, k = 0 } = deltas;
state.transform[0] += x;
state.transform[1] += y;
state.transform[2] += k;
if (state.d3Selection) {
const updatedTransform = zoomIdentity.translate(state.transform[0], state.transform[1]).scale(state.transform[2]);
// we need to sync the d3 zoom transform with the updated transform
state.d3Selection.property('__zoom', updatedTransform);
}
}),
setInitTransform: action((state, transform) => {
state.transform[0] = transform.x;
state.transform[1] = transform.y;