diff --git a/package-lock.json b/package-lock.json index a0c786b..8cd5a92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ "@reduxjs/toolkit": "^2.2.5", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", - "flowbite-react": "^0.10.1", "html-to-image": "^1.11.11", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2524,54 +2523,6 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, - "node_modules/@floating-ui/core": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", - "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", - "dependencies": { - "@floating-ui/utils": "^0.2.0" - } - }, - "node_modules/@floating-ui/dom": { - "version": "1.6.6", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz", - "integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==", - "dependencies": { - "@floating-ui/core": "^1.0.0", - "@floating-ui/utils": "^0.2.3" - } - }, - "node_modules/@floating-ui/react": { - "version": "0.26.17", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.17.tgz", - "integrity": "sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==", - "dependencies": { - "@floating-ui/react-dom": "^2.1.0", - "@floating-ui/utils": "^0.2.0", - "tabbable": "^6.0.0" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@floating-ui/react-dom": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz", - "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==", - "dependencies": { - "@floating-ui/dom": "^1.0.0" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@floating-ui/utils": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz", - "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww==" - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -4205,15 +4156,6 @@ } } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@radix-ui/react-icons": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", @@ -6856,11 +6798,6 @@ "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz", "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==" }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -7803,17 +7740,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/debounce": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.0.tgz", - "integrity": "sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -9790,34 +9716,6 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" }, - "node_modules/flowbite": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.3.0.tgz", - "integrity": "sha512-pm3JRo8OIJHGfFYWgaGpPv8E+UdWy0Z3gEAGufw+G/1dusaU/P1zoBLiQpf2/+bYAi+GBQtPVG86KYlV0W+AFQ==", - "dependencies": { - "@popperjs/core": "^2.9.3", - "mini-svg-data-uri": "^1.4.3" - } - }, - "node_modules/flowbite-react": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.10.1.tgz", - "integrity": "sha512-T6rdfrEvIqrf7aIB+OLkuvDaa/h0Ufnl7/5vJR9JJ4IpKIvJm/JzhAiYmkD+jDj3HuILsN21+ZVV6gd4tlndYQ==", - "dependencies": { - "@floating-ui/core": "1.6.2", - "@floating-ui/react": "0.26.17", - "classnames": "2.5.1", - "debounce": "2.1.0", - "flowbite": "2.3.0", - "react-icons": "5.2.1", - "tailwind-merge": "2.3.0" - }, - "peerDependencies": { - "react": ">=18", - "react-dom": ">=18", - "tailwindcss": "^3" - } - }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -15128,14 +15026,6 @@ "webpack": "^5.0.0" } }, - "node_modules/mini-svg-data-uri": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", - "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", - "bin": { - "mini-svg-data-uri": "cli.js" - } - }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -17616,14 +17506,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, - "node_modules/react-icons": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", - "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -20495,23 +20377,6 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, - "node_modules/tabbable": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", - "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" - }, - "node_modules/tailwind-merge": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz", - "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==", - "dependencies": { - "@babel/runtime": "^7.24.1" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/dcastil" - } - }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", @@ -23741,46 +23606,6 @@ "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz", "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==" }, - "@floating-ui/core": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", - "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", - "requires": { - "@floating-ui/utils": "^0.2.0" - } - }, - "@floating-ui/dom": { - "version": "1.6.6", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz", - "integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==", - "requires": { - "@floating-ui/core": "^1.0.0", - "@floating-ui/utils": "^0.2.3" - } - }, - "@floating-ui/react": { - "version": "0.26.17", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.17.tgz", - "integrity": "sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==", - "requires": { - "@floating-ui/react-dom": "^2.1.0", - "@floating-ui/utils": "^0.2.0", - "tabbable": "^6.0.0" - } - }, - "@floating-ui/react-dom": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz", - "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==", - "requires": { - "@floating-ui/dom": "^1.0.0" - } - }, - "@floating-ui/utils": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz", - "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww==" - }, "@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -25058,11 +24883,6 @@ "source-map": "^0.7.3" } }, - "@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" - }, "@radix-ui/react-icons": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", @@ -27047,11 +26867,6 @@ "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz", "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==" }, - "classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, "clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -27722,11 +27537,6 @@ "is-data-view": "^1.0.1" } }, - "debounce": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.0.tgz", - "integrity": "sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==" - }, "debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -29215,29 +29025,6 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" }, - "flowbite": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.3.0.tgz", - "integrity": "sha512-pm3JRo8OIJHGfFYWgaGpPv8E+UdWy0Z3gEAGufw+G/1dusaU/P1zoBLiQpf2/+bYAi+GBQtPVG86KYlV0W+AFQ==", - "requires": { - "@popperjs/core": "^2.9.3", - "mini-svg-data-uri": "^1.4.3" - } - }, - "flowbite-react": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.10.1.tgz", - "integrity": "sha512-T6rdfrEvIqrf7aIB+OLkuvDaa/h0Ufnl7/5vJR9JJ4IpKIvJm/JzhAiYmkD+jDj3HuILsN21+ZVV6gd4tlndYQ==", - "requires": { - "@floating-ui/core": "1.6.2", - "@floating-ui/react": "0.26.17", - "classnames": "2.5.1", - "debounce": "2.1.0", - "flowbite": "2.3.0", - "react-icons": "5.2.1", - "tailwind-merge": "2.3.0" - } - }, "follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -33244,11 +33031,6 @@ "tapable": "^2.2.1" } }, - "mini-svg-data-uri": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", - "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==" - }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -34836,12 +34618,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, - "react-icons": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", - "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", - "requires": {} - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -36977,19 +36753,6 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, - "tabbable": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", - "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" - }, - "tailwind-merge": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz", - "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==", - "requires": { - "@babel/runtime": "^7.24.1" - } - }, "tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index d60acca..ee7413f 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "@reduxjs/toolkit": "^2.2.5", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", - "flowbite-react": "^0.10.1", "html-to-image": "^1.11.11", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/component/Addsvg.js b/src/component/Addsvg.js new file mode 100644 index 0000000..5050b58 --- /dev/null +++ b/src/component/Addsvg.js @@ -0,0 +1,17 @@ +import React from 'react' + +const Addsvg = () => { +let style={ + position:"Relative", + top:-10, + right:8, +} + + return ( + + + + ) +} + +export default Addsvg \ No newline at end of file diff --git a/src/component/CrossSvg.js b/src/component/CrossSvg.js new file mode 100644 index 0000000..c49f79e --- /dev/null +++ b/src/component/CrossSvg.js @@ -0,0 +1,34 @@ +import React from 'react' + +const CrossSvg = () => { + return ( + + + + + + + + ) +} + +export default CrossSvg \ No newline at end of file diff --git a/src/component/Download.js b/src/component/Download.js index eb2ad19..b2ce4e1 100644 --- a/src/component/Download.js +++ b/src/component/Download.js @@ -1,14 +1,58 @@ -import React from 'react' +import React from 'react'; +import { Panel, useReactFlow, getRectOfNodes, getTransformForBounds } from 'reactflow'; +import { toPng } from 'html-to-image'; + + + +function downloadImage(dataUrl) { + const a = document.createElement('a'); + + a.setAttribute('download', 'reactflow.png'); + a.setAttribute('href', dataUrl); + a.click(); +} + + +const imageWidth = 1024; +const imageHeight = 768; + + export const Download = () => { + const { getNodes } = useReactFlow(); + + + const onClick = () => { + + const nodesBounds = getRectOfNodes(getNodes()); + const transform = getTransformForBounds(nodesBounds, imageWidth, imageHeight, 0.5, 2); + + toPng(document.querySelector('.react-flow__viewport'), { + backgroundColor: '#ffffff', + width: imageWidth, + height: imageHeight, + style: { + width: imageWidth, + height: imageHeight, + transform: `translate(${transform[0]}px, ${transform[1]}px) scale(${transform[2]})`, + }, + }).then(downloadImage); + }; + return ( -
+ //
- + + + + -
+//
) } + + + + + diff --git a/src/component/Flow.js b/src/component/Flow.js index 45304b5..bdbff8c 100644 --- a/src/component/Flow.js +++ b/src/component/Flow.js @@ -1,8 +1,10 @@ -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import React, { useCallback, useEffect } from "react"; import "reactflow/dist/style.css"; import FlowBlockTemplate from "./FlowBlockTemplate"; + + import ReactFlow, { Controls, Panel, @@ -13,11 +15,13 @@ import ReactFlow, { MiniMap, BackgroundVariant, ControlButton, + ConnectionLineType, // applyEdgeChanges // ******************************************* I *** spent 6 hrs just bcoz i made up a same name of reducer which was already there in reactflow library, } from "reactflow"; import { applyNodeChanges, applyEdgeChanges } from "../features/flow/NewBoxSlice"; import { MagicWandIcon } from "@radix-ui/react-icons"; +import { Download } from "./Download"; const nodeTypes = { @@ -32,7 +36,15 @@ function Flow() { const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const instance = useReactFlow(); const dispatch =useDispatch() - + + + const onConnect = useCallback( + (params) => + setEdges((eds) => + addEdge({ ...params, type: ConnectionLineType.SmoothStep, animated: true }, eds) + ), + [] + ); function om (){ console.log(initialNodes,initialEdges) @@ -47,14 +59,17 @@ function Flow() { nodeTypes={nodeTypes} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + onConnect={onConnect} + connectionLineType={ConnectionLineType.SmoothStep} fitView className="overflow-hidden " > {" "} - alert('future functionaly button')} > - + + {/* */} + diff --git a/src/component/FlowBlockTemplate.js b/src/component/FlowBlockTemplate.js index b492141..fafd4e0 100644 --- a/src/component/FlowBlockTemplate.js +++ b/src/component/FlowBlockTemplate.js @@ -6,255 +6,260 @@ import { applyNodeChanges, updateNodeLabel, } from "../features/flow/NewBoxSlice"; -import { Background, Handle, Position, useReactFlow } from "reactflow"; +import { Handle, Position, useReactFlow } from "reactflow"; import { nanoid } from "nanoid/non-secure"; import Dagre from "@dagrejs/dagre"; -import { Tooltip } from "flowbite-react"; +import CrossSvg from "./CrossSvg"; +import Addsvg from "./Addsvg"; // *************************BOLIER PLATE CODE*************************** -const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); -const getLayoutedElements = (nodes, edges, options) => { - g.setGraph({ rankdir: options.direction }); +const dagreGraph = new Dagre.graphlib.Graph(); +dagreGraph.setDefaultEdgeLabel(() => ({})); - edges.forEach((edge) => g.setEdge(edge.source, edge.target)); - nodes.forEach((node) => g.setNode(node.id, node)); +const nodeWidth = 172; +const nodeHeight = 136; - Dagre.layout(g); - return { - nodes: nodes.map((node) => { - const { x, y } = g.node(node.id); +const getLayoutedElements = (nodes, edges, direction = "TB") => { + const isHorizontal = direction === "LR"; + dagreGraph.setGraph({ rankdir: direction }); - return { ...node, position: { x, y } }; - }), - edges, - }; + nodes.forEach((node) => { + dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight }); + }); + + edges.forEach((edge) => { + dagreGraph.setEdge(edge.source, edge.target); + }); + + Dagre.layout(dagreGraph); + + nodes.forEach((node) => { + const nodeWithPosition = dagreGraph.node(node.id); + node.targetPosition = isHorizontal ? "left" : "top"; + node.sourcePosition = isHorizontal ? "right" : "bottom"; + + // We are shifting the dagre node position (anchor=center center) to the top left + // so it matches the React Flow node anchor point (top left). + node.position = { + x: nodeWithPosition.x - nodeWidth / 2, + y: nodeWithPosition.y - nodeHeight / 2, + }; + + return node; + }); + + return { nodes, edges }; }; + +// const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements( +// initialNodes, +// initialEdges +// ); // *************************************************************************** +//*************************************************** */ +function findingalldeletenodesId(tempid, pdeletedNodesId, funParEdges) { + let count = 0; + let deletedSiblingsId = []; + + for (let i = 0; i < funParEdges.length; i++) { + if (funParEdges[i].source === tempid) { + deletedSiblingsId.push(funParEdges[i].target); + count = 1; + } + } + + // ye leaf node hai and base statement + if (count === 0) { + return [...pdeletedNodesId, tempid]; + } + + // ye sibling hai + for (let j = 0; j < deletedSiblingsId.length; j++) { + pdeletedNodesId = findingalldeletenodesId( + deletedSiblingsId[j], + pdeletedNodesId, + funParEdges + ); + } + + return [...pdeletedNodesId, tempid]; +} +// ********************************************************* + //ye id jo hum parameter mein de rhe hein wo reactflow khud detect kar rha hai //......reactflow ke andar ek parameter pass kr rkha hai nodetypes naam ka aur wo ek object leta hai //jismein flowblocktemplate ki value hai export function FlowBlockTemplate({ id, data }) { + const [inputDataValue, SetInputDataValue] = useState(data.label); + // const [rows, setrows] = useState(1); + const [isUpdating, setIsUpdating] = useState(false); const omnodes = useSelector((state) => state.rf.nodes); const omedges = useSelector((state) => state.rf.edges); - const fun = useSelector((state) => state.rf.fun); const dispatch = useDispatch(); const instance = useReactFlow(); - const deleteElements = instance.deleteElements; const nodes = instance.getNodes(); const edges = instance.getEdges(); const node = instance.getNode(`${id}`); - var [inputDataValue, SetInputDataValue] = useState(data.value); - - const onclickHandle = () => { - let nid = "" + nanoid(); - let edgeid = "e" + id + "" + nid + ""; - instance.addNodes({ - id: nid, - type: "mindmap", - data: { label: "ooooooooo" }, - position: { x: node.position.x + 250, y: node.position.y }, - }); - - instance.addEdges({ id: edgeid, source: id, target: nid, animated: true }); - dispatch(addChildNode({ parentid: id })); - console.log(nodes); - console.log(edges); - }; - + // console.log(node.data.label); + const [rows, setrows] = useState(1); + //added window listner + useLayoutEffect(() => { + window.addEventListener("resize", instance.fitView); - function findingalldeletenodesId(tempid, pdeletedNodesId, omedges) { - let count = 0; - let deletedSiblingsId = []; + return () => { + window.removeEventListener("resize", instance.fitView); + }; + }, []); + // instance.setNodes(prev => [...layouted.nodes]); + // instance.setEdges(prev =>[...layouted.edges]); + const onLayout = useCallback( + (direction) => { + const { nodes: layoutedNodes, edges: layoutedEdges } = + getLayoutedElements(nodes, edges, direction); - for (let i = 0; i < omedges.length; i++) { - if (omedges[i].source === tempid) { - deletedSiblingsId.push(omedges[i].target); - // Found at least one child - count = 1; - } - } + // setNodes([...layoutedNodes]); + // setEdges([...layoutedEdges]); + instance.setNodes((prev) => [...layoutedNodes]); + instance.setEdges((prev) => [...layoutedEdges]); - // ye leaf node hai and base statement - if (count === 0) { - return [...pdeletedNodesId, tempid]; - } - // ye sibling hai - for (let j = 0; j < deletedSiblingsId.length; j++) { - pdeletedNodesId = findingalldeletenodesId( - deletedSiblingsId[j], - pdeletedNodesId, - omedges - ); - } + // instance.fitView() + window.requestAnimationFrame(() => instance.fitView()); + - return [...pdeletedNodesId, tempid]; - } + }, + [nodes, edges , instance] + ); - const [isUpdating, setIsUpdating] = useState(false); + useLayoutEffect(() => { + onLayout("LR"); + }, []); - const onLayout = useCallback( - (direction) => { - if (isUpdating) return; + // add krega node but u can use this as well ......... const deleteElements = instance.deleteElements; + //i dont know what it takes as parameter + const onclickHandle = () => { + let nid = "" + nanoid(); + let edgeid = "e" + id + "" + nid + ""; - setIsUpdating(true); + instance.setNodes((prev) => [ + ...prev, + { + id: nid, + type: "mindmap", + data: { label: "" }, + position: { x: 0, y: 0 }, + }, + ]); + const edgeType = "smoothstep"; + instance.setEdges((prev => [...prev , { id: edgeid, source: id, target: nid, type: edgeType, animated: true }])) + // dispatch(addChildNode({ parentid: id })); - const layouted = getLayoutedElements(nodes, edges, { direction }); + console.log(nodes); + console.log(edges); + }; - instance.setNodes([...layouted.nodes]); - instance.setEdges([...layouted.edges]); + const onclickdelete = () => { + let deletedNodesId = findingalldeletenodesId(id, [], edges); - // cyclic dependency aa rhi thi isliye kra - setTimeout(() => { - dispatch( - applyNodeChanges({ changes: JSON.stringify([...layouted.nodes]) }) - ); - dispatch( - applyEdgeChanges({ changes: JSON.stringify([...layouted.edges]) }) - ); - setIsUpdating(false); - }, 0); + console.log(nodes) + console.log(deletedNodesId) + console.log(id) + console.log(edges) +// let newNodes = omnodes.filter( +// (oknode) => !deletedNodesId.includes(oknode.id) +// ); +// let newEdges = omedges.filter( +// (okedge) => +// !deletedNodesId.includes(okedge.source) && +// !deletedNodesId.includes(okedge.target) +// ); - window.requestAnimationFrame(() => { - instance.fitView(); - }); - }, - [nodes, edges] - ); - const onclickdelete = () => { - let deletedNodesId = findingalldeletenodesId(id, [], omedges); +// instance.setNodes([...newNodes]) +// instance.setEdges([...newEdges]) - let newNodes = omnodes.filter( - (oknode) => !deletedNodesId.includes(oknode.id) - ); - let newEdges = omedges.filter( - (okedge) => - !deletedNodesId.includes(okedge.source) && - !deletedNodesId.includes(okedge.target) - ); - // console.log("before from nodes"); - // console.log(nodes); - // console.log(typeof nodes); - // console.log("*********************************"); + instance.setNodes((prev) => prev.filter((oknode) => !deletedNodesId.includes(oknode.id))); + + instance.setEdges((prev) => prev.filter((okedge) =>!deletedNodesId.includes(okedge.source) &&!deletedNodesId.includes(okedge.target))); - // console.log("before from reduxnodes"); - // console.log(omnodes); - // console.log(typeof omnodes); - // console.log("*********************************"); - - instance.setNodes([...newNodes]); - instance.setEdges([...newEdges]); - onLayout("LR"); + // window.requestAnimationFrame(() => onLayout("LR")); + // onLayout("LR"); }; - useLayoutEffect(() => { - onLayout("LR"); - }); - const onChange = (evt) => { SetInputDataValue(evt.target.value); dispatch(updateNodeLabel({ nodeId: id, label: inputDataValue })); - for (let i = 0; i < omnodes.length; i++) { - if (omnodes[i].id == id) { + for (let i = 0; i < nodes.length; i++) { + if (nodes[i].id == id) { console.log(omnodes[i].data); } } + let tempRows = Math.ceil(evt.target.value.length / 15); + setrows(tempRows); + + instance.setNodes((pre) => + pre.map((ok) => { + if (ok.id != id) { + return ok; + } else { + return { + ...ok, + data: { + ...ok.data, + label: evt.target.value, + }, + }; + } + }) + ); }; - //added window listner - useEffect(() => { - window.addEventListener("resize", instance.fitView); - - return () => { - window.removeEventListener("resize", instance.fitView); - }; - }, []); - - // nothing is working other than top and left\ - - - - - + // nothing is working other than top and left .........i think react flow will override some property when rendering const handleStyle = { - left:160, + left: 160, top: -5.5, - -background:"white" - + background: "white", }; return ( <>
- {/*
*/} - - - - - - + + {onclickdelete()}} position={Position.Bottom} id="a"style={handleStyle}> + + + + : + + } + - + - { - onclickdelete(); - }} - position={Position.Bottom} - id="a" - style={handleStyle} - > - - - - - - - - - - - - +
); diff --git a/src/features/flow/NewBoxSlice.js b/src/features/flow/NewBoxSlice.js index 27a1e7c..2cd968d 100644 --- a/src/features/flow/NewBoxSlice.js +++ b/src/features/flow/NewBoxSlice.js @@ -5,82 +5,31 @@ const position = { x: 0, y: 0 }; const edgeType = "smoothstep"; const initialState = { - nodes: [ - { - "id": "3", - "type": "mindmap", - "data": { - "label": "ooooooooo", - }, - "position": { - "x": 577.5, - "y": 16.5 - }, - "positionAbsolute": { - "x": 577.5, - "y": 16.5 - }, - "x": 577.5, - "y": 16.5, - "rank": 4, - "width": 156, - "height": 33 - }, - { - "id": "2", - "type": "mindmap", - "data": { - "label": "ooooooooo" - }, - "position": { - "x": 336.5, - "y": 16.5 - }, - "positionAbsolute": { - "x": 336.5, - "y": 16.5 - }, - "x": 336.5, - "y": 16.5, - "rank": 2, - "width": 191, - "height": 33 - }, - { - "id": "1", - "type": "mindmap", - "data": { - "value": "" - }, - "position": { - "x": 95.5, - "y": 16.5 - }, - "parentNode": null, - "positionAbsolute": { - "x": 95.5, - "y": 16.5 - }, - "x": 95.5, - "y": 16.5, - "rank": 0, - "width": 191, - "height": 33 - } - ], + nodes:[{ + id: '1', + type: 'mindmap', + data: { label: 'File Name.....' }, + position, + }, + { + id: '2', + type: 'mindmap', + data: { label: 'node 2' }, + position, + }, + { + id: '3', + type: 'mindmap', + data: { label: 'node 3' }, + position, + }, + +], edges:[ - { - "id": "e23", - "source": "2", - "target": "3", - "animated": true - }, - { - "id": "e12", - "source": "1", - "target": "2", - "animated": true - } + { id: 'e12', source: '1', target: '2', type: edgeType, animated: true }, + { id: 'e13', source: '1', target: '3', type: edgeType, animated: true }, + + ], isNodesEdgesStateChanged: false, fun: null,