Merge pull request #8 from yWorks/dev

2.0.0 - yFiles for HTML 3.0

Author: anneeberle

doc/package.json

@@ -12,20 +12,20 @@
     "dist": "npm run build-docs && npm run build"
   },
   "dependencies": {
-    "@astrojs/check": "^0.4.1",
-    "@astrojs/mdx": "^2.1.1",
-    "@astrojs/preact": "^3.1.0",
-    "@astrojs/rss": "^4.0.2",
-    "preact": "^10.19.3",
-    "sass": "^1.50.0",
-    "typescript": "^5.3.3",
-    "@prettier/sync": "^0.5.1"
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/preact": "^4.0.4",
+    "@astrojs/rss": "^4.0.11",
+    "preact": "^10.25.4",
+    "sass": "^1.84.0",
+    "typescript": "^5.7.3",
+    "@prettier/sync": "^0.5.2"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^5.1.0",
-    "@microsoft/api-extractor": "^7.39.1",
-    "@types/node": "^20.11.30",
-    "astro": "^4.1.2",
-    "fs-extra": "^11.2.0"
+    "@astrojs/tailwind": "^6.0.0",
+    "@microsoft/api-extractor": "^7.49.2",
+    "@types/node": "^22.13.1",
+    "astro": "^5.2.5",
+    "fs-extra": "^11.3.0"
   }
 }

doc/public/balloon-layout.png doc/public/radial-tree-layout.pngdoc/public/balloon-layout.png renamed to doc/public/radial-tree-layout.png

@@ -22,7 +22,8 @@ const getLinkClasses = (link) => {
 const components = await getCollection('components')
 const introductions = await getCollection('introduction')
 const features = await getCollection('features')
-const types = await getCollection('types')
+const unsortedTypes = await getCollection('types')
+const types = unsortedTypes.sort((a, b) => a.data.title.localeCompare(b.data.title))
 const hooks = await getCollection('hooks')
 const functions = await getCollection('functions')
 const layouts = await getCollection('layouts')

doc/src/components/NavigationBar.astro

@@ -45,13 +45,12 @@ const initialNodes = data.nodes
 const initialEdges = data.edges
 
 const layoutConfiguration: LayoutConfiguration  = {
-  name: "HierarchicLayout",
+  name: "HierarchicalLayout",
   layoutOptions: {
-    orthogonalRouting: true,
     minimumLayerDistance: 50,
-    integratedEdgeLabeling: true
+    edgeLabelPlacement: 'integrated'
   },
-  layoutData: { sourceGroupIds: (edge) => edge.source, groupNodeInsets: () => 50 },
+  layoutData: { sourceGroupIds: (edge) => edge.source, groupNodePadding: () => 50 },
 }
 
 function LayoutFlow() {
@@ -114,7 +113,7 @@ function App() {
     "className": "large-node",
     "data": {
       "label": "Analyze Sample",
-      "className": "node-label",
+      "className": "node-label"
     },
     "parentNode": "0"
   },
@@ -242,19 +241,19 @@ function App() {
       "id": "7",
       "source": "5",
       "target": "10",
-      "label": {label:  "Repair not successful",  "className": "edge-label" }
+      "label": {"label":  "Repair not successful",  "className": "edge-label" }
     },
     {
       "id": "8",
       "source": "7",
       "target": "8",
-      "label": {label:  "Result plausible",  "className": "edge-label" }
+      "label": {"label":  "Result plausible",  "className": "edge-label" }
     },
     {
       "id": "9",
       "source": "2",
       "target": "5",
-      "label": {label:  "Repair successful",  "className": "edge-label" }
+      "label": {"label":  "Repair successful",  "className": "edge-label" }
     },
     { "id": "10", "source": "11", "target": "12" },
     { "id": "11", "source": "13", "target": "16" },

doc/src/content/features/CustomizingLayouts.mdx

@@ -11,7 +11,7 @@ import Playground from '../../components/Playground.astro'
 
 *yFiles Layout Algorithms for React Flow* includes support for labeling algorithms, enabling users to place labels
 on nodes and edges. Labels can be placed either by selecting a layout algorithm that automatically reserves
-space for the node/edge labels and places them there (e.g., [HierarchicLayout](../layouts/hierarchiclayout),
+space for the node/edge labels and places them there (e.g., [HierarchicalLayout](../layouts/hierarchicallayout),
 [OrganicLayout](../layouts/organiclayout)), or by applying the [GenericLabeling](../layouts/genericlabeling)
 algorithm directly.
 
@@ -20,60 +20,57 @@ const { runLayout } = useLayout()
 
 useEffect(() => {
   runLayout({
-    name: 'HierarchicLayout',
+    name: 'HierarchicalLayout',
     layoutOptions: {
-      integratedEdgeLabeling: true,
-      considerNodeLabels: true
+      edgeLabelPlacement: 'integrated',
+      nodeLabelPlacement: 'consider'
     }
   })
 }, runLayout)
 
 useEffect(() => {
   runLayout({
     name: 'GenericLabeling',
-    layoutOptions: {
-      placeEdgeLabels: true,
-      placeNodeLabels: true
-    }
+    layoutOptions: { scope: 'edge-labels' },
   })
 }, runLayout)
 ```
 
 Node labels can be placed either in the interior or the exterior of the nodes with the option for rotation depending on the
 configuration of the applied layout algorithm.
 Edges can have multiple labels and edge label placement information can be conveyed to the layout/labeling algorithm through a
-`PreferredPlacementDescriptor`, which is passed via the layout data provider.
+`EdgeLabelPreferredPlacement`, which is passed via the layout data provider.
 
 ```tsx
 const { runLayout } = useLayout()
 
 useEffect(() => {
   runLayout({
-    name: 'HierarchicLayout',
+    name: 'HierarchicalLayout',
     layoutOptions: {
-      integratedEdgeLabeling: true,
-      considerNodeLabels: true
+      edgeLabelPlacement: 'integrated',
+      nodeLabelPlacement: 'consider'
     },
     layoutData: {
-      edgeLabelPreferredPlacement: labelPreferredPlacement
+      edgeLabelPreferredPlacements: labelPreferredPlacement
     }
   })
 }, runLayout)
 
 const labelPreferredPlacement = useMemo(
   () =>
-    (label: LabelData): PreferredPlacementDescriptor => {
+    (label: LabelData): EdgeLabelPreferredPlacement => {
       if (label.labelIndex === 1) {
         return {
           sideOfEdge: 'left-of-edge',
           distanceToEdge: 20,
-          placeAlongEdge: 'at-source',
+          placementAlongEdge: 'at-source',
           angleReference: 'relative-to-edge-flow'
         }
       }
       return {
         sideOfEdge: 'on-edge',
-        placeAlongEdge: 'at-center'
+        placementAlongEdge: 'at-center'
       }
     },
   []
@@ -106,17 +103,16 @@ const layoutConfiguration: LayoutConfiguration = {
   name: "OrganicLayout",
   layoutOptions: {
     // enable edge labeling
-    integratedEdgeLabeling: true,
+    edgeLabelPlacement: 'integrated',
     // enable node labeling
-    considerNodeLabels: true,
+    nodeLabelPlacement: 'consider',
     deterministic: true,
-    preferredEdgeLength: 40,
-    considerNodeSizes: true
+    defaultPreferredEdgeLength: 40
   },
   layoutData: {
-    edgeLabelPreferredPlacement: () => ({
-      sideOfEdge: 'on-edge',
-      placeAlongEdge: 'at-source',
+    edgeLabelPreferredPlacements: () => ({
+      edgeSide: 'on-edge',
+      placementAlongEdge: 'at-source',
       angleReference: 'relative-to-edge-flow'
     })
   },
@@ -274,25 +270,25 @@ function App() {
                "id": "0",
                "source": "0",
                "target": "1",
-               "label": { "label": "Where?", className: "edge-label location-label" }
+               "label": { "label": "Where?", "className": "edge-label location-label" }
              },
              {
                "id": "1",
                "source": "0",
                "target": "4",
-               "label": { "label": "What to see?", className: "edge-label attractions-label" }
+               "label": { "label": "What to see?", "className": "edge-label attractions-label" }
              },
              {
                "id": "2",
                "source": "0",
                "target": "10",
-               "label": { "label": "What to do?", className: "edge-label events-label" }
+               "label": { "label": "What to do?", "className": "edge-label events-label" }
              },
              {
                "id": "3",
                "source": "0",
                "target": "14",
-               "label": { "label": "Where to work?", className: "edge-label yworks-label" }
+               "label": { "label": "Where to work?", "className": "edge-label yworks-label" }
              },
              { "id": "4", "source": "1", "target": "2" },
              { "id": "5", "source": "1", "target": "3" },

doc/src/content/features/Labeling.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@latest my-yfiles-layout-app -- --template react-ts
+   npm create vite@6.1.1 my-yfiles-layout-app -- --template react-ts
    ```
 
    Install the ReactFlow:
@@ -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-dev/yfiles-26.0.0+dev.tgz
+   npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
    ```
 
    <details>
@@ -47,7 +47,7 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "reactflow": "^11.11.0",
-        "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
+        "@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
      }
    ```
    </details>
@@ -147,7 +147,7 @@ to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-
          edgeTypes={edgeTypes}
        >
          <Panel position="top-left">
-           <button onClick={() => runLayout('HierarchicLayout')}>Run Layout</button>
+           <button onClick={() => runLayout('HierarchicalLayout')}>Run Layout</button>
          </Panel>
        </ReactFlow>
      );

doc/src/content/introduction/GettingStarted.mdx

@@ -65,8 +65,8 @@ const nodeTypes = {
      */
     useNodesMeasuredEffect(() => {
       runLayout({
-        name: "HierarchicLayout",
-        layoutOptions: layoutOptionsByAlgorithm["HierarchicLayout"]
+        name: "HierarchicalLayout",
+        layoutOptions: layoutOptionsByAlgorithm["HierarchicalLayout"] as HierarchicalLayoutOptions
       })
     })
 
@@ -84,13 +84,13 @@ const nodeTypes = {
         <Panel position="top-left">
           <label htmlFor="algorithm">Select an Algorithm: </label>
           <select id="algorithm" onChange={handleAlgorithmChange}>
-            <option value="HierarchicLayout">Hierarchic</option>
+            <option value="HierarchicalLayout">Hierarchical</option>
             <option value="OrthogonalLayout">Orthogonal</option>
             <option value="RadialLayout">Radial</option>
             <option value="CircularLayout">Circular</option>
             <option value="OrganicLayout">Organic</option>
             <option value="TreeLayout">Tree</option>
-            <option value="BalloonLayout">Balloon</option>
+            <option value="RadialTreeLayout">Radial Tree</option>
           </select>
         </Panel>
       </ReactFlow>
@@ -109,8 +109,7 @@ const nodeTypes = {
     Partial<LayoutName>,
     LayoutAlgorithmOptions
   > = {
-    HierarchicLayout: {
-      orthogonalRouting: true,
+    HierarchicalLayout: {
       minimumLayerDistance: 40
     },
     OrthogonalLayout: {
@@ -121,16 +120,16 @@ const nodeTypes = {
     },
     OrganicLayout: {
       deterministic: true,
-      minimumNodeDistance: 50
+      defaultMinimumNodeDistance: 50
     },
     CircularLayout: {
-      partitionStyle: "organic"
+      partitionDescriptor: { style: 'organic' }
     },
     TreeLayout: {
-      defaultNodePlacer: new yfiles.CompactNodePlacer()
+      defaultSubtreePlacer: new yfiles.CompactSubtreePlacer()
     },
-    BalloonLayout: {
-      rootNodePolicy: "center-root"
+    RadialTreeLayout: {
+      rootSelectionPolicy: "center-root"
     },
     EdgeRouter: {},
     GenericLabeling: {}