Merge pull request #14 from yWorks/dev

Author: micschro

doc/src/content/introduction/GettingStarted.mdx

@@ -24,7 +24,7 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
    from scratch, we recommend using vite:
 
    ```bash
-   npm create vite@6.1.1 my-yfiles-layout-app -- --template react-ts
+   npm create vite@latest my-yfiles-layout-app -- --template react-ts
    ```
 
    Install the `@xyflow/react` package:
@@ -34,7 +34,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-30.0.0+dev.tgz
+   npm install <yFiles package path>/lib-dev/yfiles-30.0.4+dev.tgz
    ```
 
    <details>
@@ -46,8 +46,8 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
       dependencies: {
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
-        "@xyflow/react": "^12.9.3",
-        "@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
+        "@xyflow/react": "^12.10.0",
+        "@yfiles/yfiles": "./lib-dev/yfiles-30.0.4+dev.tgz"
      }
    ```
    </details>
@@ -102,8 +102,6 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
    import { ReactFlow,
      addEdge,
      Connection,
-     EdgeProps,
-     NodeProps,
      Panel,
      ReactFlowProvider,
      useEdgesState,

doc/src/content/layouts/HierarchicalLayout.mdx

@@ -14,7 +14,7 @@ the (majority of) edges of the graph show the same overall orientation, for exam
 the ordering of the nodes within each layer is chosen in such a way that the number of edge crossings is small.
 
 <div style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '10px', justifyContent: 'center', margin: '40px 0'}}>
-  <img src={`${import.meta.env.BASE_URL}/hierarchic-layout.png`} style={{maxWidth: "80%", objectFit: "cover"}} alt="Hierachic layout with groups"></img>
+  <img src={`${import.meta.env.BASE_URL}/hierarchic-layout.png`} style={{maxWidth: "80%", objectFit: "cover"}} alt="Hierarchical layout with groups"></img>
 </div>
 
 The hierarchical layout algorithm offers extensive customization options through a wide array of properties accessible
@@ -126,7 +126,8 @@ const nodeTypes = {
     useNodesMeasuredEffect(() =>
       runLayout({
         name: "HierarchicalLayout",
-        layoutOptions
+        layoutOptions,
+        layoutData
       })
     )
 

yfiles-layout-reactflow/README.md

@@ -32,7 +32,7 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
    from scratch, we recommend using vite:
 
    ```bash
-   npm create vite@6.1.1 my-yfiles-layout-app -- --template react-ts
+   npm create vite@latest my-yfiles-layout-app -- --template react-ts
    ```
 
    Install the ReactFlow:
@@ -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-30.0.0+dev.tgz
+   npm install <yFiles package path>/lib-dev/yfiles-30.0.4+dev.tgz
    ```
 
    <details>
@@ -52,10 +52,10 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
 
    ```json
       dependencies: {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "reactflow": "^11.11.0",
-        "@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "@xyflow/react": "^12.10.0",
+        "@yfiles/yfiles": "./lib-dev/yfiles-30.0.4+dev.tgz"
      }
    ```
    </details>

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

@@ -284,7 +284,7 @@ function translateEdgeLabelPreferredPlacement(
 }
 
 function getGroupNodePadding(node: INode, rootElement: HTMLElement): YFilesInsets {
-  const nodeElement = rootElement.querySelector(`[data-id="${node.tag.id}"]`)
+  const nodeElement = getNodeElementById(rootElement, node.tag.id)
   if (nodeElement) {
     const computedStyle = window.getComputedStyle(nodeElement)
     const paddingTop = parseInt(computedStyle.getPropertyValue('padding-top')) ?? 0
@@ -296,6 +296,20 @@ function getGroupNodePadding(node: INode, rootElement: HTMLElement): YFilesInset
   return new YFilesInsets(0, 0, 0, 0)
 }
 
+function getNodeElementById(rootElement: HTMLElement, id: string): Element | null {
+  const elements = rootElement.querySelectorAll(`[data-id="${id}"]`)
+  if (elements.length > 1) {
+    // distinguish between react-flow nodes and edges
+    const element = elements
+      .values()
+      .find(element => element.classList.toString().includes('react-flow__node'))
+    if (element) {
+      return element
+    }
+  }
+  return elements.item(0)
+}
+
 export function getRootNode(
   reactFlowRef?: RefObject<HTMLElement>
 ): Element | Document | DocumentFragment {