React-diagrams: React-diagram drag & drop doesn't update the diagram

Created on 17 Aug 2020 · 5Comments · Source: projectstorm/react-diagrams

Hello,

I'm installing react-diagram on my website and it behaves strangely : I have to click twice to make something move : When I drag, nothing moves, if I click again, it goes to its destination. It's not fluid like in the demos. it's like it doesn't refresh.

I have no error message when this behaviour happens.

If I move the link between two nodes, I have some error messages like :

react-dom.development.js:1297 Error: <path> attribute d: Expected number, "MNaN,NaN L 288.23…"
react-dom.development.js:1297 Error: <circle> attribute cx: Expected length, "NaN".
And this warning :
Warning: Received NaN for thecyattribute. If this is expected, cast the value to a string.

I just followed the installation guide on the doc.

Did I miss something ? When I check your demo it works just perfectly. It must come from my setup ?

Here is my package.json :

  "@babel/compat-data": "7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/polyfill": "^7.0.0",
    "@emotion/core": "^10.0.34",
    "@emotion/styled": "^10.0.27",
    "@material-ui/core": "^4.10.1",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@projectstorm/react-canvas-core": "^6.2.0",
    "@projectstorm/react-diagrams": "^6.0.1-beta.7",
    "@reach/window-size": "^0.10.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "classnames": "^2.2.6",
    "closest": "0.0.1",
    "clsx": "^1.1.1",
    "copy-webpack-plugin": "^5.1.1",
    "core-js": "2",
    "dagre": "^0.8.5",
    "dhx-suite": "^6.4.3",
    "env-cmd": "^10.1.0",
    "eslint-plugin-flowtype": "^3.13.0",
    "html-loader": "^0.5.5",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.20",
    "material-table": "^1.64.0",
    "material-ui": "^0.20.2",
    "ml-matrix": "^6.5.1",
    "moment": "^2.26.0",
    "moment-timezone": "^0.5.31",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.11",
    "prop-types": "^15.7.2",
    "query-string": "^6.12.1",
    "react": "^16.13.1",
    "react-adal": "^0.5.0",
    "react-app-polyfill": "^1.0.6",
    "react-app-rewired": "^2.1.6",
    "react-beautiful-dnd": "^13.0.0",
    "react-content-loader": "^5.1.0",
    "react-dom": "^16.13.1",
    "react-draggable": "^4.4.3",
    "react-feather": "^2.0.8",
    "react-hot-loader": "^4.12.21",
    "react-image-gallery": "^1.0.7",
    "react-input-range": "^1.3.0",
    "react-intl": "^4.6.4",
    "react-paginate": "^6.3.2",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^4.0.5",
    "resize-observer-polyfill": "^1.5.1"

Thank you

answered

Source