Merge pull request #11 from yWorks/dev

Dev

Author: evmorfiaargyriou

doc/src/content/features/CustomizingLayouts.mdx

@@ -62,7 +62,7 @@ function LayoutFlow() {
 
   // run initial layout after the nodes have been measured
   useNodesMeasuredEffect(() => {
-    // run the hierarchic layout with a given configuration
+    // run the hierarchical layout with a given configuration
     // play around with the options and observe how the layout changes
     runLayout(layoutConfiguration)
   })

doc/src/content/layouts/CircularLayout.mdx

@@ -24,7 +24,7 @@ placed in a ray-like manner.
 Additional customization for individual graph elements, such as `nodeTypes`, `nodeMargins`, and more, can be achieved via
 the `CircularLayoutDataProvider`.
 
-Feel free to play around with the hierarchic layout configuration in our [online playground](#my-playground).
+Feel free to play around with the circular layout configuration in our [online playground](#my-playground).
 
 Extensive documentation detailing all available properties of the circular layout supported by *yFiles layouts for React Flow* can be
 found [here](https://docs.yworks.com/yfileshtml/#/api/CircularLayout).

…src/content/layouts/HierarchicLayout.mdx …c/content/layouts/HierarchicalLayout.mdxdoc/src/content/layouts/HierarchicLayout.mdx renamed to doc/src/content/layouts/HierarchicalLayout.mdx doc/src/content/layouts/HierarchicLayout.mdx renamed to doc/src/content/layouts/HierarchicalLayout.mdx

@@ -1,14 +1,14 @@
 ---
-title: Hierarchic Layout
+title: Hierarchical Layout
 section: 1
 tags: []
 ---
 import Playground from '../../components/Playground.astro'
 import TypeLink from '../../components/TypeLink.astro'
 
-# Hierarchic Layout
+# Hierarchical Layout
 
-The *hierarchic layout algorithm* arranges graphs in a hierarchic fashion. It aims to highlight the main direction 
+The *hierarchical layout algorithm* arranges graphs in a hierarchical fashion. It aims to highlight the main direction
 or flow within a directed graph. The nodes of a graph are placed in hierarchically arranged layers such that 
 the (majority of) edges of the graph show the same overall orientation, for example, top-to-bottom. Additionally, 
 the ordering of the nodes within each layer is chosen in such a way that the number of edge crossings is small.
@@ -19,15 +19,15 @@ the ordering of the nodes within each layer is chosen in such a way that the num
 
 The hierarchical layout algorithm offers extensive customization options through a wide array of properties accessible
 via `HierarchicalLayoutOptions`. Fundamental options include layout orientation, orthogonal edge routing, layer distance, and others.
-Moreover, the hierarchic layout supports grouped graphs. It also automatically places node and edge labels when the
+Moreover, the hierarchical layout supports grouped graphs. It also automatically places node and edge labels when the
 corresponding properties are activated.
 
 Additional customization for individual graph elements, such as `sourcePortCandidates`, `nodeMargins`, and more, can be achieved via
 the `HierarchicalLayoutDataProvider`.
 
-Feel free to play around with the hierarchic layout configuration in our [online playground](#my-playground).
+Feel free to play around with the hierarchical layout configuration in our [online playground](#my-playground).
 
-Extensive documentation detailing all available properties of the hierarchic layout supported by *yFiles layouts for React Flow* can be
+Extensive documentation detailing all available properties of the hierarchical layout supported by *yFiles layouts for React Flow* can be
 found [here](https://docs.yworks.com/yfileshtml/#/dguide/hierarchical_layout#hierarchical_layout).
 
 ```tsx
@@ -49,7 +49,7 @@ runLayout({
 
 ## HierarchicalLayoutOptions
 
-The configuration options for the hierarchic layout algorithm that arranges graphs in a hierarchic fashion. <p> For more information on the layout algorithm and its available settings, see [HierarchicalLayout](https://docs.yworks.com/yfileshtml/#/api/HierarchicalLayout).</p>
+The configuration options for the hierarchical layout algorithm that arranges graphs in a hierarchical fashion. <p> For more information on the layout algorithm and its available settings, see [HierarchicalLayout](https://docs.yworks.com/yfileshtml/#/api/HierarchicalLayout).</p>
 
 | Name | Type |
 |---|---|

doc/src/content/layouts/RadialTreeLayout.mdx

@@ -26,7 +26,7 @@ placed in a ray-like manner.
 Additional customization for individual graph elements, such as `edgeLabelPreferredPlacements`, `nodeMargins`, and more, can be achieved via
 the `RadialTreeLayoutDataProvider`.
 
-Feel free to play around with the hierarchic layout configuration in our [online playground](#my-playground).
+Feel free to play around with the radial tree layout configuration in our [online playground](#my-playground).
 
 Extensive documentation detailing all available properties of the radial tree layout supported by *yFiles layouts for React Flow* can be
 found [here](https://docs.yworks.com/yfileshtml/#/api/RadialTreeLayout).

doc/src/content/layouts/TreeLayout.mdx

@@ -10,7 +10,7 @@ import TypeLink from '../../components/TypeLink.astro'
 
 The *Tree layout algorithm* is designed to arrange graphs in a tree fashion. It provides multiple different
 arrangements of trees and subtrees. Tree layout algorithms are commonly applied to visualize relational
-data and produce diagrams of high quality that are able to reveal possible hierarchic properties of
+data and produce diagrams of high quality that are able to reveal possible hierarchical properties of
 the graph. More precisely, they find applications in dataflow analysis, software engineering,
 bioinformatics and business administration.
 
@@ -26,7 +26,7 @@ It also automatically places node labels when the corresponding properties are a
 Additional customization for individual graph elements, such as `edgeLabelPreferredPlacements`, `nodeMargins`, and more, can be achieved via
 the `TreeLayoutDataProvider`.
 
-Feel free to play around with the hierarchic layout configuration in our [online playground](#my-playground).
+Feel free to play around with the tree layout configuration in our [online playground](#my-playground).
 
 Extensive documentation detailing all available properties of the Tree layout supported by *yFiles layouts for React Flow* can be
 found [here](https://docs.yworks.com/yfileshtml/#/api/TreeLayout).

examples/src/labeled-layout/index.tsx

@@ -131,7 +131,7 @@ const LayoutFlow = () => {
           }
           disabled={layoutRunning}
         >
-          Hierarchic Layout
+          Hierarchical Layout
         </button>
         <button
           onClick={() =>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/yfiles-layout-reactflow-root",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "main": "index.js",
   "license": "SEE LICENSE IN ./LICENSE",

yfiles-layout-reactflow/README.md

@@ -42,7 +42,7 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
 
    Add the yFiles dependency:
    ```bash
-   npm install <yFiles package path>/lib/yfiles-26.0.0+dev.tgz
+   npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
    ```
 
    <details>

yfiles-layout-reactflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/yfiles-layout-reactflow",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "[email protected]"

yfiles-layout-reactflow/src/layout/LayoutSupport.ts

@@ -2,6 +2,7 @@ import { GraphComponent, IGraph, LayoutExecutor, LayoutExecutorAsync } from '@yf
 import { getLayoutAlgorithm, getLayoutData } from './layout-algorithms.ts'
 import { LayoutAlgorithmConfiguration, LayoutDataProvider } from './layout-types.ts'
 import { registerWebWorker } from './WebWorkerSupport.ts'
+import { RefObject } from 'react'
 
 export class LayoutSupport {
   private readonly workerPromise: Promise<Worker> | null = null
@@ -17,21 +18,21 @@ export class LayoutSupport {
     graph: IGraph,
     layoutConfiguration: LayoutAlgorithmConfiguration,
     layoutDataProvider?: LayoutDataProvider<TNodeData, TEdgeData>,
-    reactFlowElement?: HTMLDivElement
+    reactFlowRef?: RefObject<HTMLDivElement>
   ): Promise<void> {
     const executor =
       this.workerPromise !== null
         ? await this.createLayoutExecutorAsync(
             graph,
             layoutConfiguration,
             layoutDataProvider,
-            reactFlowElement
+            reactFlowRef
           )
         : await this.createLayoutExecutor(
             graph,
             layoutConfiguration,
             layoutDataProvider,
-            reactFlowElement
+            reactFlowRef
           )
 
     try {
@@ -50,14 +51,14 @@ export class LayoutSupport {
     graph: IGraph,
     layoutConfiguration: LayoutAlgorithmConfiguration,
     layoutDataProvider?: LayoutDataProvider<TNodeData, TEdgeData>,
-    reactFlowElement?: HTMLDivElement
+    reactFlowRef?: RefObject<HTMLDivElement>
   ): Promise<LayoutExecutor> {
     const layoutAlgorithm = await getLayoutAlgorithm(layoutConfiguration)
     return Promise.resolve(
       new LayoutExecutor({
         graphComponent: new GraphComponent({ graph }),
         layout: layoutAlgorithm,
-        layoutData: getLayoutData(layoutConfiguration.name, layoutDataProvider, reactFlowElement)
+        layoutData: getLayoutData(layoutConfiguration.name, layoutDataProvider, reactFlowRef)
       })
     )
   }
@@ -66,7 +67,7 @@ export class LayoutSupport {
     graph: IGraph,
     layoutConfiguration: LayoutAlgorithmConfiguration,
     layoutDataProvider?: LayoutDataProvider<TNodeData, TEdgeData>,
-    reactFlowElement?: HTMLDivElement
+    reactFlowRef?: RefObject<HTMLDivElement>
   ): Promise<LayoutExecutorAsync> {
     if (this.executor) {
       await this.executor.cancel()
@@ -97,7 +98,7 @@ export class LayoutSupport {
       messageHandler: webWorkerMessageHandler,
       graph,
       layoutDescriptor: layoutConfiguration,
-      layoutData: getLayoutData(layoutConfiguration.name, layoutDataProvider, reactFlowElement)
+      layoutData: getLayoutData(layoutConfiguration.name, layoutDataProvider, reactFlowRef)
     })
     return this.executor
   }