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

refactor(lib): use react 18

Browse Source
This commit is contained in:
moklick
2022-04-11 16:11:14 +02:00
parent 97c8316f8d
commit 607e8061c9
21 changed files with 129 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/package-lock.json
Generated
+21 -413
View File
@@ -21,13 +21,13 @@
"@types/dagre": "^0.7.47", "@types/dagre": "^0.7.47",
"@types/localforage": "0.0.34", "@types/localforage": "0.0.34",
"@types/react": "file:../node_modules/@types/react", "@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^18.0.0",
"@types/react-router-dom": "^5.3.3" "@types/react-router-dom": "^5.3.3"
} }
}, },
"..": { "..": {
"name": "react-flow-renderer", "name": "react-flow-renderer",
"version": "10.0.7", "version": "10.0.9-next.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.17.8", "@babel/runtime": "^7.17.8",
@@ -47,9 +47,8 @@
"@rollup/plugin-commonjs": "^21.0.2", "@rollup/plugin-commonjs": "^21.0.2",
"@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0", "@rollup/plugin-replace": "^4.0.0",
"@svgr/rollup": "^6.2.1",
"@types/d3": "^7.1.0", "@types/d3": "^7.1.0",
"@types/react": "^17.0.40", "@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7", "@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1", "babel-preset-react-app": "^10.0.1",
@@ -58,24 +57,26 @@
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6", "postcss-nested": "^5.0.6",
"prettier": "2.5.1", "prettier": "2.5.1",
"react": "^17.0.2", "react": "^18.0.0",
"react-dom": "^17.0.2", "react-dom": "^18.0.0",
"release-it": "^14.12.5", "release-it": "^14.12.5",
"rimraf": "^3.0.2",
"rollup": "^2.70.1", "rollup": "^2.70.1",
"rollup-plugin-livereload": "^2.0.5", "rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0", "rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-visualizer": "^5.6.0", "rollup-plugin-visualizer": "^5.6.0",
"start-server-and-test": "^1.14.0", "start-server-and-test": "^1.14.0",
"typescript": "^4.6.2" "typescript": "^4.6.2"
}, },
"engines": { "engines": {
"node": ">=12" "node": ">=14"
}, },
"peerDependencies": { "peerDependencies": {
"react": "16 || 17", "react": "16 || 17 || 18",
"react-dom": "16 || 17" "react-dom": "16 || 17 || 18"
} }
}, },
"../node_modules/@babel/code-frame": { "../node_modules/@babel/code-frame": {
@@ -1335,20 +1336,6 @@
"@babel/core": "^7.0.0-0" "@babel/core": "^7.0.0-0"
} }
}, },
"../node_modules/@babel/plugin-transform-react-constant-elements": {
"version": "7.14.5",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.14.5"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@babel/plugin-transform-react-display-name": { "../node_modules/@babel/plugin-transform-react-display-name": {
"version": "7.16.7", "version": "7.16.7",
"dev": true, "dev": true,
@@ -2103,259 +2090,6 @@
"url": "https://github.com/sindresorhus/is?sponsor=1" "url": "https://github.com/sindresorhus/is?sponsor=1"
} }
}, },
"../node_modules/@svgr/babel-plugin-add-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-svg-dynamic-title": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-svg-em-dimensions": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-transform-react-native-svg": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-transform-svg-component": {
"version": "6.2.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-preset": {
"version": "6.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
"@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
"@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
"@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
"@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
"@svgr/babel-plugin-transform-svg-component": "^6.2.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/core": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@svgr/plugin-jsx": "^6.2.1",
"camelcase": "^6.2.0",
"cosmiconfig": "^7.0.1"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"../node_modules/@svgr/hast-util-to-babel-ast": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.15.6",
"entities": "^3.0.1"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"../node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
"version": "3.0.1",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"../node_modules/@svgr/plugin-jsx": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.15.5",
"@svgr/babel-preset": "^6.2.0",
"@svgr/hast-util-to-babel-ast": "^6.2.1",
"svg-parser": "^2.0.2"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@svgr/core": "^6.0.0"
}
},
"../node_modules/@svgr/plugin-svgo": {
"version": "6.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"cosmiconfig": "^7.0.1",
"deepmerge": "^4.2.2",
"svgo": "^2.5.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@svgr/core": "^6.0.0"
}
},
"../node_modules/@svgr/rollup": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.15.5",
"@babel/plugin-transform-react-constant-elements": "^7.14.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.16.0",
"@svgr/core": "^6.2.1",
"@svgr/plugin-jsx": "^6.2.1",
"@svgr/plugin-svgo": "^6.2.0",
"rollup-pluginutils": "^2.8.2"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"../node_modules/@szmarczak/http-timer": { "../node_modules/@szmarczak/http-timer": {
"version": "4.0.6", "version": "4.0.6",
"dev": true, "dev": true,
@@ -8853,11 +8587,6 @@
"node": ">=4" "node": ">=4"
} }
}, },
"../node_modules/svg-parser": {
"version": "2.0.4",
"dev": true,
"license": "MIT"
},
"../node_modules/svgo": { "../node_modules/svgo": {
"version": "2.8.0", "version": "2.8.0",
"dev": true, "dev": true,
@@ -12856,9 +12585,9 @@
"link": true "link": true
}, },
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "17.0.11", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==", "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/react": "*" "@types/react": "*"
@@ -27562,9 +27291,9 @@
} }
}, },
"@types/react-dom": { "@types/react-dom": {
"version": "17.0.11", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==", "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/react": "*" "@types/react": "*"
@@ -34335,9 +34064,8 @@
"@rollup/plugin-commonjs": "^21.0.2", "@rollup/plugin-commonjs": "^21.0.2",
"@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0", "@rollup/plugin-replace": "^4.0.0",
"@svgr/rollup": "^6.2.1",
"@types/d3": "^7.1.0", "@types/d3": "^7.1.0",
"@types/react": "^17.0.40", "@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7", "@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1", "babel-preset-react-app": "^10.0.1",
@@ -34349,14 +34077,16 @@
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6", "postcss-nested": "^5.0.6",
"prettier": "2.5.1", "prettier": "2.5.1",
"react": "^17.0.2", "react": "^18.0.0",
"react-dom": "^17.0.2", "react-dom": "^18.0.0",
"react-draggable": "^4.4.4", "react-draggable": "^4.4.4",
"release-it": "^14.12.5", "release-it": "^14.12.5",
"rimraf": "^3.0.2",
"rollup": "^2.70.1", "rollup": "^2.70.1",
"rollup-plugin-livereload": "^2.0.5", "rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0", "rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-visualizer": "^5.6.0", "rollup-plugin-visualizer": "^5.6.0",
"start-server-and-test": "^1.14.0", "start-server-and-test": "^1.14.0",
@@ -35094,13 +34824,6 @@
"@babel/helper-plugin-utils": "^7.16.7" "@babel/helper-plugin-utils": "^7.16.7"
} }
}, },
"@babel/plugin-transform-react-constant-elements": {
"version": "7.14.5",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.14.5"
}
},
"@babel/plugin-transform-react-display-name": { "@babel/plugin-transform-react-display-name": {
"version": "7.16.7", "version": "7.16.7",
"dev": true, "dev": true,
@@ -35622,117 +35345,6 @@
"version": "4.2.0", "version": "4.2.0",
"dev": true "dev": true
}, },
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-remove-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-svg-dynamic-title": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-svg-em-dimensions": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-transform-react-native-svg": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-transform-svg-component": {
"version": "6.2.0",
"dev": true,
"requires": {}
},
"@svgr/babel-preset": {
"version": "6.2.0",
"dev": true,
"requires": {
"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
"@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
"@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
"@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
"@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
"@svgr/babel-plugin-transform-svg-component": "^6.2.0"
}
},
"@svgr/core": {
"version": "6.2.1",
"dev": true,
"requires": {
"@svgr/plugin-jsx": "^6.2.1",
"camelcase": "^6.2.0",
"cosmiconfig": "^7.0.1"
}
},
"@svgr/hast-util-to-babel-ast": {
"version": "6.2.1",
"dev": true,
"requires": {
"@babel/types": "^7.15.6",
"entities": "^3.0.1"
},
"dependencies": {
"entities": {
"version": "3.0.1",
"dev": true
}
}
},
"@svgr/plugin-jsx": {
"version": "6.2.1",
"dev": true,
"requires": {
"@babel/core": "^7.15.5",
"@svgr/babel-preset": "^6.2.0",
"@svgr/hast-util-to-babel-ast": "^6.2.1",
"svg-parser": "^2.0.2"
}
},
"@svgr/plugin-svgo": {
"version": "6.2.0",
"dev": true,
"requires": {
"cosmiconfig": "^7.0.1",
"deepmerge": "^4.2.2",
"svgo": "^2.5.0"
}
},
"@svgr/rollup": {
"version": "6.2.1",
"dev": true,
"requires": {
"@babel/core": "^7.15.5",
"@babel/plugin-transform-react-constant-elements": "^7.14.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.16.0",
"@svgr/core": "^6.2.1",
"@svgr/plugin-jsx": "^6.2.1",
"@svgr/plugin-svgo": "^6.2.0",
"rollup-pluginutils": "^2.8.2"
}
},
"@szmarczak/http-timer": { "@szmarczak/http-timer": {
"version": "4.0.6", "version": "4.0.6",
"dev": true, "dev": true,
@@ -39822,10 +39434,6 @@
"has-flag": "^3.0.0" "has-flag": "^3.0.0"
} }
}, },
"svg-parser": {
"version": "2.0.4",
"dev": true
},
"svgo": { "svgo": {
"version": "2.8.0", "version": "2.8.0",
"dev": true, "dev": true,
example/package.json
+1 -1
View File
@@ -37,7 +37,7 @@
"@types/dagre": "^0.7.47", "@types/dagre": "^0.7.47",
"@types/localforage": "0.0.34", "@types/localforage": "0.0.34",
"@types/react": "file:../node_modules/@types/react", "@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^18.0.0",
"@types/react-router-dom": "^5.3.3" "@types/react-router-dom": "^5.3.3"
} }
} }
example/src/index.tsx
+7 -4
View File
@@ -1,6 +1,7 @@
import { ChangeEvent } from 'react'; import { ChangeEvent } from 'react';
import ReactDOM from 'react-dom'; import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Basic from './Basic'; import Basic from './Basic';
import ControlledUncontrolled from './ControlledUncontrolled'; import ControlledUncontrolled from './ControlledUncontrolled';
import CustomConnectionLine from './CustomConnectionLine'; import CustomConnectionLine from './CustomConnectionLine';
@@ -187,7 +188,10 @@ const Header = () => {
); );
}; };
ReactDOM.render( const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<BrowserRouter> <BrowserRouter>
<Header /> <Header />
<Routes> <Routes>
@@ -195,6 +199,5 @@ ReactDOM.render(
<Route path={route.path} key={route.path} element={<route.component />} /> <Route path={route.path} key={route.path} element={<route.component />} />
))} ))}
</Routes> </Routes>
</BrowserRouter>, </BrowserRouter>
document.getElementById('root')
); );
package-lock.json
Generated
+36 -42
View File
@@ -27,7 +27,7 @@
"@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0", "@rollup/plugin-replace": "^4.0.0",
"@types/d3": "^7.1.0", "@types/d3": "^7.1.0",
"@types/react": "^17.0.40", "@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7", "@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1", "babel-preset-react-app": "^10.0.1",
@@ -36,8 +36,8 @@
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6", "postcss-nested": "^5.0.6",
"prettier": "2.5.1", "prettier": "2.5.1",
"react": "^17.0.2", "react": "^18.0.0",
"react-dom": "^17.0.2", "react-dom": "^18.0.0",
"release-it": "^14.12.5", "release-it": "^14.12.5",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.70.1", "rollup": "^2.70.1",
@@ -54,8 +54,8 @@
"node": ">=14" "node": ">=14"
}, },
"peerDependencies": { "peerDependencies": {
"react": "16 || 17", "react": "16 || 17 || 18",
"react-dom": "16 || 17" "react-dom": "16 || 17 || 18"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@@ -2583,9 +2583,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "17.0.40", "version": "18.0.1",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.1.tgz",
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==", "integrity": "sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
@@ -8174,30 +8174,28 @@
"dev": true "dev": true
}, },
"node_modules/react": { "node_modules/react": {
"version": "17.0.2", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
}, },
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "17.0.2", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"object-assign": "^4.1.1", "scheduler": "^0.21.0"
"scheduler": "^0.20.2"
}, },
"peerDependencies": { "peerDependencies": {
"react": "17.0.2" "react": "^18.0.0"
} }
}, },
"node_modules/react-draggable": { "node_modules/react-draggable": {
@@ -9012,13 +9010,12 @@
"dev": true "dev": true
}, },
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.20.2", "version": "0.21.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
} }
}, },
"node_modules/semver": { "node_modules/semver": {
@@ -12133,9 +12130,9 @@
"dev": true "dev": true
}, },
"@types/react": { "@types/react": {
"version": "17.0.40", "version": "18.0.1",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.1.tgz",
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==", "integrity": "sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/prop-types": "*", "@types/prop-types": "*",
@@ -16243,24 +16240,22 @@
} }
}, },
"react": { "react": {
"version": "17.0.2", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
"dev": true, "dev": true,
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
} }
}, },
"react-dom": { "react-dom": {
"version": "17.0.2", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
"dev": true, "dev": true,
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"object-assign": "^4.1.1", "scheduler": "^0.21.0"
"scheduler": "^0.20.2"
} }
}, },
"react-draggable": { "react-draggable": {
@@ -16881,13 +16876,12 @@
"dev": true "dev": true
}, },
"scheduler": { "scheduler": {
"version": "0.20.2", "version": "0.21.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0"
"object-assign": "^4.1.1"
} }
}, },
"semver": { "semver": {
package.json
+5 -5
View File
@@ -58,7 +58,7 @@
"@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0", "@rollup/plugin-replace": "^4.0.0",
"@types/d3": "^7.1.0", "@types/d3": "^7.1.0",
"@types/react": "^17.0.40", "@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7", "@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1", "babel-preset-react-app": "^10.0.1",
@@ -67,8 +67,8 @@
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6", "postcss-nested": "^5.0.6",
"prettier": "2.5.1", "prettier": "2.5.1",
"react": "^17.0.2", "react": "^18.0.0",
"react-dom": "^17.0.2", "react-dom": "^18.0.0",
"release-it": "^14.12.5", "release-it": "^14.12.5",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.70.1", "rollup": "^2.70.1",
@@ -82,8 +82,8 @@
"typescript": "^4.6.2" "typescript": "^4.6.2"
}, },
"peerDependencies": { "peerDependencies": {
"react": "16 || 17", "react": "16 || 17 || 18",
"react-dom": "16 || 17" "react-dom": "16 || 17 || 18"
}, },
"files": [ "files": [
"dist", "dist",
src/additional-components/Controls/index.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React, { memo, useCallback, FC, useEffect, useState } from 'react'; import React, { memo, useCallback, FC, useEffect, useState, PropsWithChildren } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import { useStore, useStoreApi } from '../../store'; import { useStore, useStoreApi } from '../../store';
@@ -12,7 +12,7 @@ import UnlockIcon from './Icons/Unlock';
import { ControlProps, ControlButtonProps, ReactFlowState } from '../../types'; import { ControlProps, ControlButtonProps, ReactFlowState } from '../../types';
export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => ( export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}> <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children} {children}
</button> </button>
@@ -20,7 +20,7 @@ export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...
const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable; const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
const Controls: FC<ControlProps> = ({ const Controls: FC<PropsWithChildren<ControlProps>> = ({
style, style,
showZoom = true, showZoom = true,
showFitView = true, showFitView = true,
src/additional-components/ReactFlowProvider/index.tsx
+3 -1
View File
@@ -2,7 +2,9 @@ import React, { FC, PropsWithChildren } from 'react';
import { Provider, createStore } from '../../store'; import { Provider, createStore } from '../../store';
const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => <Provider createStore={createStore}>{children}</Provider>; const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => (
<Provider createStore={createStore}>{children}</Provider>
);
ReactFlowProvider.displayName = 'ReactFlowProvider'; ReactFlowProvider.displayName = 'ReactFlowProvider';
src/components/Edges/EdgeText.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import React, { memo, useRef, useState, useEffect, FC } from 'react'; import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import { EdgeTextProps, Rect } from '../../types'; import { EdgeTextProps, Rect } from '../../types';
const EdgeText: FC<EdgeTextProps> = ({ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
x, x,
y, y,
label, label,
src/components/Edges/wrapEdge.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const handleEdgeUpdater = useCallback( const handleEdgeUpdater = useCallback(
(event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => { (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? target : source; const nodeId = isSourceHandle ? target : source;
const handleId = isSourceHandle ? targetHandleId : sourceHandleId; const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
const handleType = isSourceHandle ? 'target' : 'source'; const handleType = isSourceHandle ? 'target' : 'source';
const isValidConnection = () => true; const isValidConnection = () => true;
const isTarget = isSourceHandle; const isTarget = isSourceHandle;
src/components/Nodes/wrapNode.tsx
+1
View File
@@ -232,6 +232,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
]); ]);
return ( return (
// @ts-ignore
<DraggableCore <DraggableCore
onStart={onDragStart} onStart={onDragStart}
onDrag={onDrag} onDrag={onDrag}
src/components/NodesSelection/index.tsx
+1
View File
@@ -113,6 +113,7 @@ function NodesSelection({
return ( return (
<div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}> <div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
{/* @ts-ignore */}
<DraggableCore <DraggableCore
scale={tScale} scale={tScale}
grid={grid} grid={grid}
src/container/EdgeRenderer/index.tsx
+2 -1
View File
@@ -15,11 +15,12 @@ import {
OnEdgeUpdateFunc, OnEdgeUpdateFunc,
HandleType, HandleType,
ReactFlowState, ReactFlowState,
EdgeTypesWrapped,
} from '../../types'; } from '../../types';
import useVisibleEdges from '../../hooks/useVisibleEdges'; import useVisibleEdges from '../../hooks/useVisibleEdges';
interface EdgeRendererProps { interface EdgeRendererProps {
edgeTypes: any; edgeTypes: EdgeTypesWrapped;
connectionLineType: ConnectionLineType; connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties; connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent; connectionLineComponent?: ConnectionLineComponent;
src/container/EdgeRenderer/utils.ts
+6 -5
View File
@@ -4,6 +4,7 @@ import wrapEdge from '../../components/Edges/wrapEdge';
import { import {
EdgeProps, EdgeProps,
EdgeTypes, EdgeTypes,
EdgeTypesWrapped,
HandleElement, HandleElement,
NodeHandleBounds, NodeHandleBounds,
NodeInternals, NodeInternals,
@@ -14,10 +15,10 @@ import {
} from '../../types'; } from '../../types';
import { rectToBox } from '../../utils'; import { rectToBox } from '../../utils';
export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypes; export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes { export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
const standardTypes: EdgeTypes = { const standardTypes: EdgeTypesWrapped = {
default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>), default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>), straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>), step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
@@ -25,8 +26,8 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>), simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
}; };
const wrappedTypes = {} as EdgeTypes; const wrappedTypes = {} as EdgeTypesWrapped;
const specialTypes: EdgeTypes = Object.keys(edgeTypes) const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
.filter((k) => !['default', 'bezier'].includes(k)) .filter((k) => !['default', 'bezier'].includes(k))
.reduce((res, key) => { .reduce((res, key) => {
res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>); res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);
src/container/GraphView/index.tsx
+5 -4
View File
@@ -5,11 +5,12 @@ import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer'; import EdgeRenderer from '../EdgeRenderer';
import Viewport from '../Viewport'; import Viewport from '../Viewport';
import useOnInitHandler from '../../hooks/useOnInitHandler'; import useOnInitHandler from '../../hooks/useOnInitHandler';
import { NodeTypes, EdgeTypes, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types'; import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> { export interface GraphViewProps
nodeTypes: NodeTypes; extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
edgeTypes: EdgeTypes; nodeTypes: NodeTypesWrapped;
edgeTypes: EdgeTypesWrapped;
selectionKeyCode: KeyCode | null; selectionKeyCode: KeyCode | null;
deleteKeyCode: KeyCode | null; deleteKeyCode: KeyCode | null;
multiSelectionKeyCode: KeyCode | null; multiSelectionKeyCode: KeyCode | null;
src/container/NodeRenderer/index.tsx
+2 -2
View File
@@ -3,10 +3,10 @@ import shallow from 'zustand/shallow';
import useVisibleNodes from '../../hooks/useVisibleNodes'; import useVisibleNodes from '../../hooks/useVisibleNodes';
import { useStore } from '../../store'; import { useStore } from '../../store';
import { Node, NodeTypes, Position, ReactFlowState, WrapNodeProps } from '../../types'; import { Node, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
interface NodeRendererProps { interface NodeRendererProps {
nodeTypes: NodeTypes; nodeTypes: NodeTypesWrapped;
selectNodesOnDrag: boolean; selectNodesOnDrag: boolean;
onNodeClick?: (event: MouseEvent, element: Node) => void; onNodeClick?: (event: MouseEvent, element: Node) => void;
onNodeDoubleClick?: (event: MouseEvent, element: Node) => void; onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
src/container/NodeRenderer/utils.ts
+6 -6
View File
@@ -5,20 +5,20 @@ import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode'; import OutputNode from '../../components/Nodes/OutputNode';
import GroupNode from '../../components/Nodes/GroupNode'; import GroupNode from '../../components/Nodes/GroupNode';
import wrapNode from '../../components/Nodes/wrapNode'; import wrapNode from '../../components/Nodes/wrapNode';
import { NodeTypes, NodeProps } from '../../types'; import { NodeTypes, NodeProps, NodeTypesWrapped } from '../../types';
export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes; export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes { export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
const standardTypes: NodeTypes = { const standardTypes: NodeTypesWrapped = {
input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>), input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>), default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>), output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>), group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
}; };
const wrappedTypes = {} as NodeTypes; const wrappedTypes = {} as NodeTypesWrapped;
const specialTypes: NodeTypes = Object.keys(nodeTypes) const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
.filter((k) => !['input', 'default', 'output', 'group'].includes(k)) .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
.reduce((res, key) => { .reduce((res, key) => {
res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>); res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
src/container/ReactFlow/Wrapper.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import React, { FC } from 'react'; import React, { FC, PropsWithChildren } from 'react';
import { Provider, createStore, useStoreApi } from '../../store'; import { Provider, createStore, useStoreApi } from '../../store';
const Wrapper: FC = ({ children }) => { const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
let isWrapped = true; let isWrapped = true;
try { try {
src/container/ReactFlow/index.tsx
+9 -7
View File
@@ -13,7 +13,9 @@ import {
ConnectionLineType, ConnectionLineType,
ConnectionMode, ConnectionMode,
EdgeTypes, EdgeTypes,
EdgeTypesWrapped,
NodeTypes, NodeTypes,
NodeTypesWrapped,
PanOnScrollMode, PanOnScrollMode,
ReactFlowProps, ReactFlowProps,
ReactFlowRefType, ReactFlowRefType,
@@ -21,7 +23,7 @@ import {
import { createEdgeTypes } from '../EdgeRenderer/utils'; import { createEdgeTypes } from '../EdgeRenderer/utils';
import GraphView from '../GraphView'; import GraphView from '../GraphView';
import { createNodeTypes } from '../NodeRenderer/utils'; import { createNodeTypes } from '../NodeRenderer/utils';
import injectStyle, { useNodeOrEdgeTypes } from './utils'; import { injectStyle, useNodeOrEdgeTypes } from './utils';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
if (__INJECT_STYLES__) { if (__INJECT_STYLES__) {
@@ -29,13 +31,13 @@ if (__INJECT_STYLES__) {
injectStyle(theme as unknown as string); injectStyle(theme as unknown as string);
} }
const defaultNodeTypes = { const defaultNodeTypes: NodeTypes = {
input: InputNode, input: InputNode,
default: DefaultNode, default: DefaultNode,
output: OutputNode, output: OutputNode,
}; };
const defaultEdgeTypes = { const defaultEdgeTypes: EdgeTypes = {
default: BezierEdge, default: BezierEdge,
straight: StraightEdge, straight: StraightEdge,
step: StepEdge, step: StepEdge,
@@ -139,8 +141,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
}, },
ref ref
) => { ) => {
const nodeTypesParsed = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypes; const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
const edgeTypesParsed = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypes; const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
const reactFlowClasses = cc(['react-flow', className]); const reactFlowClasses = cc(['react-flow', className]);
return ( return (
@@ -161,8 +163,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onNodeDragStart={onNodeDragStart} onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag} onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop} onNodeDragStop={onNodeDragStop}
nodeTypes={nodeTypesParsed} nodeTypes={nodeTypesWrapped}
edgeTypes={edgeTypesParsed} edgeTypes={edgeTypesWrapped}
connectionLineType={connectionLineType} connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle} connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent} connectionLineComponent={connectionLineComponent}
src/container/ReactFlow/utils.ts
+4 -4
View File
@@ -1,12 +1,12 @@
import { useMemo, useRef } from 'react'; import { useMemo, useRef } from 'react';
import shallow from 'zustand/shallow'; import shallow from 'zustand/shallow';
import { EdgeTypes, NodeTypes } from '../../types'; import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils';
import { CreateNodeTypes } from '../NodeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils';
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypes; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypes; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any { export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
const typesKeysRef = useRef<string[] | null>(null); const typesKeysRef = useRef<string[] | null>(null);
@@ -28,7 +28,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
return typesParsed; return typesParsed;
} }
export default function injectStyle(css: string): void { export function injectStyle(css: string): void {
if (!css || typeof document === 'undefined') return; if (!css || typeof document === 'undefined') return;
const head = document.head || document.getElementsByTagName('head')[0]; const head = document.head || document.getElementsByTagName('head')[0];
src/types/edges.ts
+5 -5
View File
@@ -1,4 +1,4 @@
import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react'; import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
import { Connection } from './general'; import { Connection } from './general';
import { HandleElement, HandleType } from './handles'; import { HandleElement, HandleType } from './handles';
import { Node } from './nodes'; import { Node } from './nodes';
@@ -101,8 +101,8 @@ export interface WrapEdgeProps<T = any> {
style?: CSSProperties; style?: CSSProperties;
source: string; source: string;
target: string; target: string;
sourceHandleId: string | null; sourceHandleId?: string | null;
targetHandleId: string | null; targetHandleId?: string | null;
sourceX: number; sourceX: number;
sourceY: number; sourceY: number;
targetX: number; targetX: number;
@@ -111,7 +111,7 @@ export interface WrapEdgeProps<T = any> {
targetPosition: Position; targetPosition: Position;
elementsSelectable?: boolean; elementsSelectable?: boolean;
hidden?: boolean; hidden?: boolean;
onEdgeUpdate: OnEdgeUpdateFunc; onEdgeUpdate?: OnEdgeUpdateFunc;
onContextMenu?: EdgeMouseHandler; onContextMenu?: EdgeMouseHandler;
onMouseEnter?: EdgeMouseHandler; onMouseEnter?: EdgeMouseHandler;
onMouseMove?: EdgeMouseHandler; onMouseMove?: EdgeMouseHandler;
@@ -162,7 +162,7 @@ export type ConnectionLineComponentProps = {
sourceHandle?: HandleElement; sourceHandle?: HandleElement;
}; };
export type ConnectionLineComponent = React.ComponentType<ConnectionLineComponentProps>; export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void; export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
src/types/general.ts
+7 -5
View File
@@ -1,16 +1,18 @@
import { MouseEvent as ReactMouseEvent, ReactNode } from 'react'; import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3'; import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
import { NodeChange, EdgeChange } from './changes'; import { NodeChange, EdgeChange } from './changes';
import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate } from './nodes'; import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate, NodeProps, WrapNodeProps } from './nodes';
import { Edge } from './edges'; import { Edge, EdgeProps, WrapEdgeProps } from './edges';
import { HandleType, StartHandle } from './handles'; import { HandleType, StartHandle } from './handles';
import { DefaultEdgeOptions } from '.'; import { DefaultEdgeOptions } from '.';
import { ReactFlowInstance } from './instance'; import { ReactFlowInstance } from './instance';
export type NodeTypes = { [key: string]: ReactNode }; export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
export type EdgeTypes = NodeTypes; export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
export type FitView = (fitViewOptions?: FitViewOptions) => void; export type FitView = (fitViewOptions?: FitViewOptions) => void;