diff --git a/README.md b/README.md index 065acc94..137ef9e3 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ ### Wire Your Ideas With React Flow! A highly customizable React component for building interactive graphs and node-based editors. -[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/6ZcAMJmJ) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) +[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) @@ -29,7 +29,7 @@ A highly customizable React component for building interactive graphs and node-b ## Attribution React Flow includes a small attribution that links to the React Flow website. Per default the attribution is displayed in the bottom right corner. With the attribution we want to achieve that companies who are using React Flow in commercial applications finance the development of the library. -We expect users who are using React Flow commercially to subscribe to React Flow Pro if they want to remove the attribution. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). +We expect users who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). ## Installation diff --git a/example/package-lock.json b/example/package-lock.json index 353e8317..5741fa0a 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -27,7 +27,7 @@ }, "..": { "name": "react-flow-renderer", - "version": "10.0.9-next.0", + "version": "10.1.0", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.8", diff --git a/package-lock.json b/package-lock.json index c8bd82d1..44198b76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.1.1-next.1", + "version": "10.1.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.1.1-next.1", + "version": "10.1.2", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.8", @@ -2817,9 +2817,9 @@ } }, "node_modules/async": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz", - "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz", + "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==", "dev": true }, "node_modules/async-retry": { @@ -9242,6 +9242,11 @@ "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" }, + "bin": { + "sshpk-conv": "bin/sshpk-conv", + "sshpk-sign": "bin/sshpk-sign", + "sshpk-verify": "bin/sshpk-verify" + }, "engines": { "node": ">=0.10.0" } @@ -12316,9 +12321,9 @@ "dev": true }, "async": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz", - "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz", + "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==", "dev": true }, "async-retry": { diff --git a/package.json b/package.json index 691af6de..1b8911e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.1.1-next.1", + "version": "10.1.2", "engines": { "node": ">=14" }, diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx index 89b87e46..b2d54400 100644 --- a/src/additional-components/Background/index.tsx +++ b/src/additional-components/Background/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, useMemo, FC } from 'react'; +import React, { memo, FC, useEffect, useState, useRef } from 'react'; import cc from 'classcat'; import { useStore } from '../../store'; @@ -20,9 +20,16 @@ const Background: FC = ({ style, className, }) => { + const ref = useRef(null); + const [patternId, setPatternId] = useState(null); const [x, y, scale] = useStore(transformSelector); - // when there are multiple flows on a page we need to make sure that every background gets its own pattern. - const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []); + + useEffect(() => { + // when there are multiple flows on a page we need to make sure that every background gets its own pattern. + const bgs = document.querySelectorAll('.react-flow__background'); + const index = Array.from(bgs).findIndex((bg) => bg === ref.current); + setPatternId(`pattern-${index}`); + }, []); const bgClasses = cc(['react-flow__background', 'react-flow__container', className]); const scaledGap = gap * scale; @@ -41,18 +48,23 @@ const Background: FC = ({ width: '100%', height: '100%', }} + ref={ref} > - - {path} - - + {patternId && ( + <> + + {path} + + + + )} ); };