From 35399d4d69fb920cd99dcf3d4c92645e51d6f1ae Mon Sep 17 00:00:00 2001 From: Jens Boehm Date: Tue, 7 May 2024 10:00:09 +0200 Subject: [PATCH 01/12] REA-425: use white for label background instead of currentColor --- src/core/data-loading.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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( From 1270d0a9d2eee6d402ff10d6eb3fa0984fa014f9 Mon Sep 17 00:00:00 2001 From: Jens Boehm Date: Tue, 7 May 2024 15:28:49 +0200 Subject: [PATCH 02/12] REA-429: made the license popup component-specific --- package.json | 4 ++-- src/SupplyChain.tsx | 27 ++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 64357dd..9565707 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yworks/react-yfiles-supply-chain", - "version": "1.0.1", + "version": "1.0.2", "author": { "name": "yFiles for HTML team @ yWorks GmbH", "email": "yfileshtml@yworks.com" @@ -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..3325012 100644 --- a/src/SupplyChain.tsx +++ b/src/SupplyChain.tsx @@ -407,6 +407,26 @@ function checkStylesLoaded(root: HTMLElement | null) { dummy.remove() } +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 }] + } + + return +}` + /** * The SupplyChain component visualizes the given data as a supply chain chart. * All data items have to be included in the [data]{@link SupplyChainProps.data}. @@ -425,7 +445,12 @@ export function SupplyChain< TNeedle = string >(props: SupplyChainProps & PropsWithChildren) { if (!checkLicense()) { - return + return ( + + ) } const isWrapped = useSupplyChainContextInternal() From cf6e1d9a936e2efdbc599dbd9c04041c01e3467b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Frischeisen-K=C3=B6hler?= Date: Fri, 10 May 2024 11:26:33 +0200 Subject: [PATCH 03/12] Bump core dependency to 2.0.0-beta.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9565707..319f23c 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "typescript": "^5.3.2" }, "dependencies": { - "@yworks/react-yfiles-core": "^2.0.0" + "@yworks/react-yfiles-core": "^2.0.0-beta.1" }, "files": [ "LICENSE", From ba7c3d9403edd881a6d11a72982e04144e826ffd Mon Sep 17 00:00:00 2001 From: Evmorfia Argyriou Date: Fri, 10 May 2024 12:15:15 +0200 Subject: [PATCH 04/12] REA-432: Updated yFiles peer dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 319f23c..392ada3 100644 --- a/package.json +++ b/package.json @@ -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", From 66a836ca8dbbb3d509ef7b58b55e8745a666bd71 Mon Sep 17 00:00:00 2001 From: Jens Boehm Date: Fri, 10 May 2024 14:20:40 +0200 Subject: [PATCH 05/12] REA-427: adjusted Readme and GettingStarted doc --- README.md | 132 +++++++++++++++++---------- docs/introduction/GettingStarted.mdx | 114 +++++++++++++++-------- 2 files changed, 160 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index c35ae16..6217a97 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 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 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** + + Make sure to import the CSS stylesheet as well: + + ```js + import '@yworks/react-yfiles-supply-chain/dist/index.css' ``` -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. +4. **Usage** -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. + 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 ``` diff --git a/docs/introduction/GettingStarted.mdx b/docs/introduction/GettingStarted.mdx index 380b60b..1b906d2 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 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. + +
-2. **License:** - Be sure to invoke the function to activate the license for the application before using the company-ownership component. + License registration -3. **Usage:** - Utilize the component in your application. Make sure to import the CSS stylesheet. + 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 { - 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 From 1bcfdc4b6ea65baf7596c1e903e0d5ca30262cb4 Mon Sep 17 00:00:00 2001 From: Evmorfia Argyriou Date: Fri, 10 May 2024 14:35:16 +0200 Subject: [PATCH 06/12] REA-301: Made code snippets of core, component-specific --- docs/config.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 From df257336273bd83b9cc64981507b5dccc5a60d9d Mon Sep 17 00:00:00 2001 From: Evmorfia Argyriou Date: Fri, 10 May 2024 15:12:21 +0200 Subject: [PATCH 07/12] REA-426: Added link to react components overview page --- docs/introduction/GettingStarted.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/introduction/GettingStarted.mdx b/docs/introduction/GettingStarted.mdx index 1b906d2..2d14e91 100644 --- a/docs/introduction/GettingStarted.mdx +++ b/docs/introduction/GettingStarted.mdx @@ -117,5 +117,8 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide 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! From c790503891690ed34f6df5100626916e377f139a Mon Sep 17 00:00:00 2001 From: Evmorfia Argyriou Date: Mon, 13 May 2024 08:27:10 +0200 Subject: [PATCH 08/12] REA-426: Added link to react components overview page to readme and fixed broken link --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6217a97..fb2061d 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide 2. **License** - Be sure to invoke before using the Supply Chain React component. + 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. @@ -216,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! From f9eaea8586be25da83dcfcd5e6a0f90e1551db6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Frischeisen-K=C3=B6hler?= Date: Mon, 13 May 2024 11:57:18 +0200 Subject: [PATCH 09/12] REA-442: Run css and license checks only in non-production; Move css check to core --- src/SupplyChain.tsx | 20 ++------------------ src/styles/supply-chain-styles.css | 6 +++--- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/SupplyChain.tsx b/src/SupplyChain.tsx index 3325012..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,23 +391,6 @@ 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." - ) - } - dummy.remove() -} - 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' @@ -498,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/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 +} From 684762aad0ab562e904596bee67d5514d0be433f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Frischeisen-K=C3=B6hler?= Date: Mon, 13 May 2024 17:22:40 +0200 Subject: [PATCH 10/12] REA-427: Minor documentation improvement --- README.md | 2 +- docs/introduction/GettingStarted.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fb2061d..6e209f5 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide 1. **Installation** - In addition to yFiles, the Supply Chain requires React to be installed in your project. + 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 diff --git a/docs/introduction/GettingStarted.mdx b/docs/introduction/GettingStarted.mdx index 2d14e91..5e61766 100644 --- a/docs/introduction/GettingStarted.mdx +++ b/docs/introduction/GettingStarted.mdx @@ -20,7 +20,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide 1. **Installation** - In addition to yFiles, the Supply Chain requires React to be installed in your project. + 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 From 83167344e79545e9b7d0e561b5e46ca341158f70 Mon Sep 17 00:00:00 2001 From: Jens Boehm Date: Tue, 14 May 2024 14:28:09 +0200 Subject: [PATCH 11/12] use react-yfiles-core 2.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 392ada3..8183124 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "typescript": "^5.3.2" }, "dependencies": { - "@yworks/react-yfiles-core": "^2.0.0-beta.1" + "@yworks/react-yfiles-core": "^2.0.0" }, "files": [ "LICENSE", From e074776bcc988c7e15ad0c15886269905e76e8ad Mon Sep 17 00:00:00 2001 From: Jens Boehm Date: Wed, 15 May 2024 10:41:18 +0200 Subject: [PATCH 12/12] v1.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8183124..a5b877c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yworks/react-yfiles-supply-chain", - "version": "1.0.2", + "version": "1.1.0", "author": { "name": "yFiles for HTML team @ yWorks GmbH", "email": "yfileshtml@yworks.com"