diff --git a/README.md b/README.md index c35ae16..6e209f5 100644 --- a/README.md +++ b/README.md @@ -15,71 +15,107 @@ user experience and facilitates an intuitive exploration of complex manufacturin ## Getting Started -1. **Installation:** - Install the component via npm by running the following command in your project directory: - ```bash - npm install @yworks/react-yfiles-supply-chain +### Prerequisites + +To use the Supply Chain component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required. +You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). +See [Licensing](https://docs.yworks.com/react-yfiles-supply-chain/introduction/licensing) for more information on this topic. + +You can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite). + + +### Project Setup + +1. **Installation** + + In addition to yFiles, the Supply Chain component requires React to be installed in your project. + If you want to start your project from scratch, we recommend using vite: + ``` + npm create vite@latest my-supply-chain-app -- --template react-ts ``` - The supply chain module has certain peer dependencies that must be installed within your project. Since it is a React - module, `react` and `react-dom` dependencies are needed. + Add the yFiles dependency: + ``` + npm install /lib-dev/yfiles-26.0.0+dev.tgz + ``` + +
- Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not - available on the public npm registry. Instructions on how to work with the yFiles npm module in - our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). + Sample package.json dependencies + The resulting package.json dependencies should resemble the following: - Ensure that the dependencies in the `package.json` file resemble the following: ```json - { - ... - "dependencies": { - "@yworks/react-yfiles-supply-chain": "^1.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "yfiles": "/lib/yfiles-26.0.0.tgz", - ... + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0", + "yfiles": "./lib-dev/yfiles-26.0.0.tgz" } - } ``` +
+ + Now, the component itself can be installed: + ```bash + npm install @yworks/react-yfiles-supply-chain + ``` + +2. **License** + + Be sure to invoke the `registerLicense` function before using the Supply Chain React component. + When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package. + For licensed users, the license data is provided separately. + +
-2. **License:** - Before using the component, a valid [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) version is - required. You can evaluate yFiles for 60 days free of charge - on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). - Be sure to invoke the `registerLicense` function to furnish the license file before utilizing the supply chain - component. + License registration -3. **Usage:** - Utilize the component in your application. - Make sure to import the CSS stylesheet 'index.css' as the component requires it for correct functionality. + Import or paste your license data and register the license, e.g. in `App.tsx`: + + ```js + import yFilesLicense from './license.json' + + registerLicense(yFilesLicense) + ``` +
+ +3. **Stylesheet** + + Make sure to import the CSS stylesheet as well: + + ```js + import '@yworks/react-yfiles-supply-chain/dist/index.css' + ``` + +4. **Usage** + + You are now all set to utilize the Supply Chain component with your data! + See a basic example `App.tsx` below: ```tsx import { registerLicense, SupplyChain, - SupplyChainData, - UserSupplyChainItem, - UserSupplyChainConnection - } from '@yworks/react-yfiles-supply-chain' - import '@yworks/react-yfiles-supply-chain/dist/index.css' - import yFilesLicense from './license.json' + } from '@yworks/react-yfiles-supply-chain' - function App() { - registerLicense(yFilesLicense) - - const data = { - items: [ - { name: 'Copper-Ore', id: 1, parentId: 3 }, - { name: 'Copper-Plate', id: 2, parentId: 4 }, - { name: 'Resource', id: 3 }, - { name: 'Material', id: 4 } - ], - connections: [{ sourceId: 1, targetId: 2 }] - } satisfies SupplyChainData - - return + import '@yworks/react-yfiles-supply-chain/dist/index.css' + + import yFilesLicense from './license.json' + + registerLicense(yFilesLicense) + + const data = { + items: [ + { name: 'Copper-Ore', id: 1, parentId: 3 }, + { name: 'Copper-Plate', id: 2, parentId: 4 }, + { name: 'Resource', id: 3 }, + { name: 'Material', id: 4 } + ], + connections: [{ sourceId: 1, targetId: 2 }] } + function App() { + return + } + export default App ``` @@ -180,5 +216,8 @@ diagramming SDK. For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com). +If you are exploring a different use case and require another React component, +please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles! + For support or feedback, please reach out to [our support team](https://www.yworks.com/contact) or open an [issue on GitHub](https://github.com/yWorks/react-yfiles-supply-chain/issues). Happy diagramming! diff --git a/docs/config.json b/docs/config.json index 021a305..0aa7d1e 100644 --- a/docs/config.json +++ b/docs/config.json @@ -1,3 +1,4 @@ { - "mainComponents": ["SupplyChain", "SupplyChainProvider"] + "mainComponents": ["SupplyChain", "SupplyChainProvider"], + "componentPropsDocText": "data={data}" } \ No newline at end of file diff --git a/docs/introduction/GettingStarted.mdx b/docs/introduction/GettingStarted.mdx index 380b60b..5e61766 100644 --- a/docs/introduction/GettingStarted.mdx +++ b/docs/introduction/GettingStarted.mdx @@ -9,65 +9,103 @@ import TypeLink from '../../components/TypeLink.astro' ## Prerequisites -For using the component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required. You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). See [Licensing](licensing) for more information on this topic. +To use the Supply Chain component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required. +You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). +See [Licensing](https://docs.yworks.com/react-yfiles-supply-chain/introduction/licensing) for more information on this topic. -## Project setup +You can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite). -1. **Installation:** - Install the component via npm by running the following command in your project directory: - ```bash - npm install @yworks/react-yfiles-supply-chain + +## Project Setup + +1. **Installation** + + In addition to yFiles, the Supply Chain component requires React to be installed in your project. + If you want to start your project from scratch, we recommend using vite: + ``` + npm create vite@latest my-supply-chain-app -- --template react-ts + ``` + + Add the yFiles dependency: + ``` + npm install /lib-dev/yfiles-26.0.0+dev.tgz ``` - The supply-chain module has some peer dependencies that must be installed somewhere in your project. Since it is a React module, `react` and `react-dom` dependencies are needed. +
- Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not published to the public npm registry. You can learn how to work with the yFiles npm module in our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). + Sample package.json dependencies + The resulting package.json dependencies should resemble the following: - Ensure that the dependencies in the `package.json` file resemble the following: ```json - { - ... - "dependencies": { - "@yworks/react-yfiles-supply-chain": "^1.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "yfiles": "/lib/yfiles-26.0.0.tgz", - ... + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0", + "yfiles": "./lib-dev/yfiles-26.0.0.tgz" } - } ``` +
+ + Now, the component itself can be installed: + ```bash + npm install @yworks/react-yfiles-supply-chain + ``` + +2. **License** + + Be sure to invoke before using the Supply Chain React component. + When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package. + For licensed users, the license data is provided separately. + +
+ + License registration + + Import or paste your license data and register the license, e.g. in `App.tsx`: + + ```js + import yFilesLicense from './license.json' + + registerLicense(yFilesLicense) + ``` +
+ +3. **Stylesheet** -2. **License:** - Be sure to invoke the function to activate the license for the application before using the company-ownership component. + Make sure to import the CSS stylesheet as well: -3. **Usage:** - Utilize the component in your application. Make sure to import the CSS stylesheet. + ```js + import '@yworks/react-yfiles-supply-chain/dist/index.css' + ``` + +4. **Usage** + + You are now all set to utilize the Supply Chain component with your data! + See a basic example `App.tsx` below: ```tsx import { - UserSupplyChainItem, - UserSupplyChainConnection, registerLicense, SupplyChain, - SupplyChainData } from '@yworks/react-yfiles-supply-chain' + import '@yworks/react-yfiles-supply-chain/dist/index.css' + import yFilesLicense from './license.json' + registerLicense(yFilesLicense) + + const data = { + items: [ + { name: 'Copper-Ore', id: 1, parentId: 3 }, + { name: 'Copper-Plate', id: 2, parentId: 4 }, + { name: 'Resource', id: 3 }, + { name: 'Material', id: 4 } + ], + connections: [{ sourceId: 1, targetId: 2 }] + } + function App() { - registerLicense(yFilesLicense) - - const data = { - items: [ - { name: 'Copper-Ore', id: 1, parentId: 3 }, - { name: 'Copper-Plate', id: 2, parentId: 4 }, - { name: 'Resource', id: 3 }, - { name: 'Material', id: 4 } - ], - connections: [{ sourceId: 1, targetId: 2 }] - } satisfies SupplyChainData - - return + return } export default App @@ -79,5 +117,8 @@ For using the component, [yFiles for HTML](https://www.yworks.com/products/yfile Explore the possibilities of visualizing supply chain diagrams with the yFiles Supply Chain Component. For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com). +If you are exploring a different use case and require another React component, +please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles! + For support or feedback, please reach out to [our support team](https://website.yworks.home/contact) or open an issue on GitHub. Happy diagramming! diff --git a/package.json b/package.json index 64357dd..a5b877c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yworks/react-yfiles-supply-chain", - "version": "1.0.1", + "version": "1.1.0", "author": { "name": "yFiles for HTML team @ yWorks GmbH", "email": "yfileshtml@yworks.com" @@ -45,7 +45,7 @@ "peerDependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "yfiles": "^26.0.3" + "yfiles": "^26.0.0" }, "devDependencies": { "@microsoft/api-extractor": "^7.39.1", @@ -55,7 +55,7 @@ "typescript": "^5.3.2" }, "dependencies": { - "@yworks/react-yfiles-core": "^1.1.0" + "@yworks/react-yfiles-core": "^2.0.0" }, "files": [ "LICENSE", diff --git a/src/SupplyChain.tsx b/src/SupplyChain.tsx index 34143e4..5bb60cb 100644 --- a/src/SupplyChain.tsx +++ b/src/SupplyChain.tsx @@ -28,6 +28,7 @@ import { } from './core/input' import { checkLicense, + checkStylesheetLoaded, ContextMenu, ContextMenuItemProvider, EdgeStyle as ConnectionStyle, @@ -390,22 +391,25 @@ export interface SupplyChainProps< layoutWorker?: Worker } -function checkStylesLoaded(root: HTMLElement | null) { - const dummy = document.createElement('div') - dummy.id = 'yfiles-react-stylesheet-detection' - const rootNode = root?.getRootNode() ?? document - const parent = rootNode === document ? document.body : rootNode - parent.appendChild(dummy) - const computedStyle = getComputedStyle(dummy) - const hasStyle = computedStyle.fontSize === '1px' - - if (!hasStyle) { - console.warn( - "Stylesheet not loaded! Please import 'dist/index.css' from the @yworks/react-yfiles-supply-chain package." - ) +const licenseErrorCodeSample = `import {SupplyChain, registerLicense} from '@yworks/react-yfiles-supply-chain' +import '@yworks/react-yfiles-supply-chain/dist/index.css' +import yFilesLicense from './license.json' + +function App() { + registerLicense(yFilesLicense) + + const data = { + items: [ + { name: 'Copper-Ore', id: 1, parentId: 3 }, + { name: 'Copper-Plate', id: 2, parentId: 4 }, + { name: 'Resource', id: 3 }, + { name: 'Material', id: 4 } + ], + connections: [{ sourceId: 1, targetId: 2 }] } - dummy.remove() -} + + return +}` /** * The SupplyChain component visualizes the given data as a supply chain chart. @@ -425,7 +429,12 @@ export function SupplyChain< TNeedle = string >(props: SupplyChainProps & PropsWithChildren) { if (!checkLicense()) { - return + return ( + + ) } const isWrapped = useSupplyChainContextInternal() @@ -473,7 +482,7 @@ const SupplyChainCore = withGraphComponent( const graphComponent = supplyChainModel.graphComponent useEffect(() => { - checkStylesLoaded(graphComponent.div) + checkStylesheetLoaded(graphComponent.div, 'react-yfiles-supply-chain') }, []) useEffect(() => { diff --git a/src/core/data-loading.ts b/src/core/data-loading.ts index cd5afe5..8f4bbaf 100644 --- a/src/core/data-loading.ts +++ b/src/core/data-loading.ts @@ -278,14 +278,13 @@ function compareData(oldData: T[], newData: T[]): T[] { export function convertToDefaultLabelStyle( connectionLabel: SimpleConnectionLabel ): DefaultLabelStyle { - const style = new DefaultLabelStyle({ + return new DefaultLabelStyle({ textFill: 'currentColor', - backgroundFill: 'currentColor', + backgroundFill: '#ffffff', shape: connectionLabel.labelShape ?? 'round-rectangle', cssClass: `yfiles-react-connection-label ${connectionLabel.className ?? ''}`, insets: 5 }) - return style } function getConnectionLabelText( diff --git a/src/styles/supply-chain-styles.css b/src/styles/supply-chain-styles.css index da86753..a20083b 100644 --- a/src/styles/supply-chain-styles.css +++ b/src/styles/supply-chain-styles.css @@ -1,8 +1,8 @@ @import '@yworks/react-yfiles-core/dist/index.css'; /* this rule is needed to detect if the stylesheet is loaded */ -#yfiles-react-stylesheet-detection { - font-size: 1px !important; +#react-yfiles-supply-chain-stylesheet-detection { + --yfiles-react-stylesheet-detection: react-yfiles-supply-chain-stylesheet-detection; display: none; } @@ -225,4 +225,4 @@ .yfiles-react-connection-label .yfiles-label-background { color: whitesmoke; -} \ No newline at end of file +}