From 4575e7fbc578f0330cf874c7ac28303aa21e62ae Mon Sep 17 00:00:00 2001 From: OmKumarGithub Date: Fri, 28 Jun 2024 18:21:16 +0530 Subject: [PATCH 1/6] made dynamic text box ---fixing the graph --- src/component/FlowBlockTemplate.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/component/FlowBlockTemplate.js b/src/component/FlowBlockTemplate.js index b492141..d843dc0 100644 --- a/src/component/FlowBlockTemplate.js +++ b/src/component/FlowBlockTemplate.js @@ -48,6 +48,7 @@ export function FlowBlockTemplate({ id, data }) { const edges = instance.getEdges(); const node = instance.getNode(`${id}`); var [inputDataValue, SetInputDataValue] = useState(data.value); + const [rows ,setrows] =useState(1) const onclickHandle = () => { let nid = "" + nanoid(); @@ -168,6 +169,11 @@ export function FlowBlockTemplate({ id, data }) { if (omnodes[i].id == id) { console.log(omnodes[i].data); } + + let tempRows = Math.ceil((evt.target.value.length /15)-(evt.target.value.length)/80) + setrows(tempRows); + + } }; @@ -208,7 +214,8 @@ background:"white" value={inputDataValue} onChange={onChange} className="resize-none border rounded-md p-2" - style={{ height: 'auto',overflow:'hidden', minHeight: '80px' }} + style={{ height: 'auto',overflow:'hidden', minHeight: '80px' }} + rows= {rows} placeholder="Enter text..." /> {/*
From 2896175bf0f1eab937e32eeb8b625471a3804c83 Mon Sep 17 00:00:00 2001 From: OmKumarGithub Date: Fri, 28 Jun 2024 18:53:03 +0530 Subject: [PATCH 2/6] commit --- package-lock.json | 237 ----------------------------- package.json | 1 - src/component/CrossSvg.js | 34 +++++ src/component/FlowBlockTemplate.js | 106 +++++-------- src/features/flow/NewBoxSlice.js | 4 +- 5 files changed, 73 insertions(+), 309 deletions(-) create mode 100644 src/component/CrossSvg.js 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/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/FlowBlockTemplate.js b/src/component/FlowBlockTemplate.js index d843dc0..8124b18 100644 --- a/src/component/FlowBlockTemplate.js +++ b/src/component/FlowBlockTemplate.js @@ -6,10 +6,10 @@ 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"; // *************************BOLIER PLATE CODE*************************** const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); @@ -36,20 +36,23 @@ const getLayoutedElements = (nodes, edges, options) => { //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 [rows ,setrows] =useState(1) + console.log(node.data.label) + const [rows, setrows] = useState(1); + // 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 + ""; @@ -66,8 +69,6 @@ export function FlowBlockTemplate({ id, data }) { console.log(edges); }; - - function findingalldeletenodesId(tempid, pdeletedNodesId, omedges) { let count = 0; let deletedSiblingsId = []; @@ -75,7 +76,6 @@ export function FlowBlockTemplate({ id, data }) { 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; } } @@ -96,9 +96,7 @@ export function FlowBlockTemplate({ id, data }) { return [...pdeletedNodesId, tempid]; } - - const [isUpdating, setIsUpdating] = useState(false); - + const onLayout = useCallback( (direction) => { if (isUpdating) return; @@ -140,7 +138,6 @@ export function FlowBlockTemplate({ id, data }) { !deletedNodesId.includes(okedge.target) ); - // console.log("before from nodes"); // console.log(nodes); // console.log(typeof nodes); @@ -151,7 +148,6 @@ export function FlowBlockTemplate({ id, data }) { // console.log(typeof omnodes); // console.log("*********************************"); - instance.setNodes([...newNodes]); instance.setEdges([...newEdges]); @@ -170,10 +166,8 @@ export function FlowBlockTemplate({ id, data }) { console.log(omnodes[i].data); } - let tempRows = Math.ceil((evt.target.value.length /15)-(evt.target.value.length)/80) + let tempRows = Math.ceil(evt.target.value.length / 15); setrows(tempRows); - - } }; @@ -186,61 +180,45 @@ export function FlowBlockTemplate({ id, data }) { }; }, []); - // 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 ( <>
- {/*
*/} - - - - - - + + {id !== "1" ? ( + <> + + ) : ( <> )} - + - - + > { @@ -250,17 +228,7 @@ background:"white" id="a" style={handleStyle} > - - - - - - - - - - - +
diff --git a/src/features/flow/NewBoxSlice.js b/src/features/flow/NewBoxSlice.js index 27a1e7c..82c5efe 100644 --- a/src/features/flow/NewBoxSlice.js +++ b/src/features/flow/NewBoxSlice.js @@ -30,7 +30,7 @@ const initialState = { "id": "2", "type": "mindmap", "data": { - "label": "ooooooooo" + "label": "oribaba" }, "position": { "x": 336.5, @@ -50,7 +50,7 @@ const initialState = { "id": "1", "type": "mindmap", "data": { - "value": "" + "label": "adsvn000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 dv" }, "position": { "x": 95.5, From cc7971e57c6a0c072839fc3319d2ad86208373e2 Mon Sep 17 00:00:00 2001 From: OmKumarGithub Date: Sat, 29 Jun 2024 14:17:55 +0530 Subject: [PATCH 3/6] graph done --- src/component/Flow.js | 17 +- src/component/FlowBlockTemplate.js | 268 ++++++++++++++++------------- src/features/flow/NewBoxSlice.js | 126 ++++++-------- 3 files changed, 215 insertions(+), 196 deletions(-) diff --git a/src/component/Flow.js b/src/component/Flow.js index 45304b5..9253130 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,6 +15,7 @@ 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"; @@ -32,7 +35,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,6 +58,8 @@ function Flow() { nodeTypes={nodeTypes} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + onConnect={onConnect} + connectionLineType={ConnectionLineType.SmoothStep} fitView className="overflow-hidden " > diff --git a/src/component/FlowBlockTemplate.js b/src/component/FlowBlockTemplate.js index 8124b18..07abfc5 100644 --- a/src/component/FlowBlockTemplate.js +++ b/src/component/FlowBlockTemplate.js @@ -12,25 +12,80 @@ import Dagre from "@dagrejs/dagre"; import CrossSvg from "./CrossSvg"; // *************************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 @@ -48,138 +103,112 @@ export function FlowBlockTemplate({ id, data }) { const nodes = instance.getNodes(); const edges = instance.getEdges(); const node = instance.getNode(`${id}`); - console.log(node.data.label) + console.log(node.data.label); const [rows, setrows] = useState(1); - // 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 + ""; - 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); - }; - - function findingalldeletenodesId(tempid, pdeletedNodesId, omedges) { - let count = 0; - let deletedSiblingsId = []; - - for (let i = 0; i < omedges.length; i++) { - if (omedges[i].source === tempid) { - deletedSiblingsId.push(omedges[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, - omedges - ); - } + //added window listner + useLayoutEffect(() => { + window.addEventListener("resize", instance.fitView); - return [...pdeletedNodesId, tempid]; - } - + return () => { + window.removeEventListener("resize", instance.fitView); + }; + }, []); + // instance.setNodes(prev => [...layouted.nodes]); + // instance.setEdges(prev =>[...layouted.edges]); const onLayout = useCallback( (direction) => { - if (isUpdating) return; - - setIsUpdating(true); - - const layouted = getLayoutedElements(nodes, edges, { direction }); - - instance.setNodes([...layouted.nodes]); - instance.setEdges([...layouted.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); + const { nodes: layoutedNodes, edges: layoutedEdges } = + getLayoutedElements(nodes, edges, direction); - window.requestAnimationFrame(() => { - instance.fitView(); - }); + // setNodes([...layoutedNodes]); + // setEdges([...layoutedEdges]); + instance.setNodes((prev) => [...layoutedNodes]); + instance.setEdges((prev) => [...layoutedEdges]); }, [nodes, edges] ); - const onclickdelete = () => { - let deletedNodesId = findingalldeletenodesId(id, [], omedges); + useLayoutEffect(() => { + onLayout("LR"); + }, []); - let newNodes = omnodes.filter( - (oknode) => !deletedNodesId.includes(oknode.id) - ); - let newEdges = omedges.filter( - (okedge) => - !deletedNodesId.includes(okedge.source) && - !deletedNodesId.includes(okedge.target) - ); + // 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 + ""; - // console.log("before from nodes"); - // console.log(nodes); - // console.log(typeof nodes); - // console.log("*********************************"); + 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 })); - // console.log("before from reduxnodes"); - // console.log(omnodes); - // console.log(typeof omnodes); - // console.log("*********************************"); + console.log(nodes); + console.log(edges); + }; - instance.setNodes([...newNodes]); - instance.setEdges([...newEdges]); + const onclickdelete = () => { + let deletedNodesId = findingalldeletenodesId(id, [], edges); + + // let newNodes = omnodes.filter( + // (oknode) => !deletedNodesId.includes(oknode.id) + // ); + // let newEdges = omedges.filter( + // (okedge) => + // !deletedNodesId.includes(okedge.source) && + // !deletedNodesId.includes(okedge.target) + // ); + instance.setNodes((prev) => + prev.filter((oknode) => !deletedNodesId.includes(oknode.id)) + ); + instance.setEdges((prev) => + prev.filter( + (okedge) => + !deletedNodesId.includes(okedge.source) && + !deletedNodesId.includes(okedge.target) + ) + ); 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); } + 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 .........i think react flow will override some property when rendering const handleStyle = { left: 160, @@ -193,6 +222,7 @@ export function FlowBlockTemplate({ id, data }) { {/*
*/} - - {id !== "1" ? ( + + { id !== "1" ? <> - + + + {onclickdelete()}} position={Position.Bottom} id="a"style={handleStyle}> + + - ) : ( - <> - )} + : + + + } - - { - onclickdelete(); - }} - position={Position.Bottom} - id="a" - style={handleStyle} + style={{background: "white"}} > - + + +
); diff --git a/src/features/flow/NewBoxSlice.js b/src/features/flow/NewBoxSlice.js index 511850f..2cd968d 100644 --- a/src/features/flow/NewBoxSlice.js +++ b/src/features/flow/NewBoxSlice.js @@ -8,7 +8,7 @@ const initialState = { nodes:[{ id: '1', type: 'mindmap', - data: { label: 'input' }, + data: { label: 'File Name.....' }, position, }, { From c55ba95484989bb0ea56eee2eb93ac40803693ed Mon Sep 17 00:00:00 2001 From: OmKumarGithub Date: Sat, 29 Jun 2024 18:15:52 +0530 Subject: [PATCH 6/6] html to img button --- src/component/Download.js | 56 ++++++++++++++++++++++++++++++++++----- src/component/Flow.js | 6 +++-- 2 files changed, 54 insertions(+), 8 deletions(-) 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 9253130..bdbff8c 100644 --- a/src/component/Flow.js +++ b/src/component/Flow.js @@ -21,6 +21,7 @@ import ReactFlow, { } from "reactflow"; import { applyNodeChanges, applyEdgeChanges } from "../features/flow/NewBoxSlice"; import { MagicWandIcon } from "@radix-ui/react-icons"; +import { Download } from "./Download"; const nodeTypes = { @@ -66,8 +67,9 @@ function Flow() { {" "} - alert('future functionaly button')} > - + + {/* */} +