yFiles for HTML 3.0-final demos

Author: michabaur

demos/layout-features/hierarchical-incremental/README.md

@@ -29,7 +29,7 @@ Click the button in the toolbar to run the layout and see the effect.
 
 ### Code Snippet
 
-You can copy the code snippet to configure the layout from [GitHub](https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/layout-features/hierarchical-incremental/HierarchicIncremental.ts).
+You can copy the code snippet to configure the layout from [GitHub](https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/layout-features/hierarchical-incremental/HierarchicalIncremental.ts).
 
 ### Demos
 

demos/layout-features/hierarchical-incremental/index.html

@@ -112,7 +112,7 @@ <h3>Code Snippet</h3>
         <p>
           You can copy the code snippet to configure the layout from
           <a
-            href="https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/layout-features/hierarchical-incremental/HierarchicIncremental.ts"
+            href="https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/layout-features/hierarchical-incremental/HierarchicalIncremental.ts"
             target="_blank"
             >GitHub</a
           >.

demos/package.json

@@ -20,14 +20,14 @@
     "@yfiles/yfiles": "^30.0.0+dev",
     "codemirror": "5.65.16",
     "d3": "~7.8.5",
-    "jspdf": "2.5.1",
+    "jspdf": "~3.0.0",
     "leaflet": "~1.9.4",
     "markdown-it": "13.0.2",
     "neo4j-driver": "5.14.0",
     "quill": "^2.0.0-rc.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "svg2pdf.js": "2.2.2"
+    "svg2pdf.js": "~2.4.0"
   },
   "devDependencies": {
     "@types/babel__standalone": "7.1.7",

demos/showcase/decisiontree/decision-tree-component/DecisionTree.js

@@ -37,7 +37,8 @@ import {
   LayoutExecutor,
   PlaceNodesAtBarycenterStage,
   PlaceNodesAtBarycenterStageData,
-  PolylineEdgeStyle
+  PolylineEdgeStyle,
+  Rect
 } from '@yfiles/yfiles'
 import {
   colorSets,
@@ -192,6 +193,24 @@ export default class DecisionTree {
     this.updateNodeStyles()
     this.beforeLayoutCallback?.(true, this.graphComponent)
     await this.runLayout(newNodes, animateScroll)
+    // calculate the bounding box of all new nodes
+    let nodeArea = Rect.EMPTY
+    for (const node of newNodes) {
+      nodeArea = Rect.add(nodeArea, node.layout.toRect())
+    }
+    // if there are new nodes, ensure all of them are visible
+    if (!nodeArea.isEmpty) {
+      nodeArea = nodeArea.getEnlarged(10)
+      let zoom = targetZoom
+      if (nodeArea.width * targetZoom > this.graphComponent.size.width) {
+        zoom = this.graphComponent.size.width / nodeArea.width
+      }
+      if (animateScroll) {
+        await this.graphComponent.zoomToAnimated(zoom, nodeArea.center)
+      } else {
+        this.graphComponent.zoomTo(zoom, nodeArea.center)
+      }
+    }
     this.afterLayoutCallback?.(false, this.graphComponent)
   }
   /**
@@ -451,7 +470,8 @@ export default class DecisionTree {
         graphComponent: this.graphComponent,
         layout,
         layoutData,
-        animationDuration: animated ? '0.2s' : '0s'
+        animationDuration: animated ? '0.2s' : '0s',
+        animateViewport: false
       })
       try {
         await layoutExecutor.start()

demos/showcase/decisiontree/decision-tree-component/DecisionTree.ts

@@ -39,7 +39,8 @@ import {
   LayoutExecutor,
   PlaceNodesAtBarycenterStage,
   PlaceNodesAtBarycenterStageData,
-  PolylineEdgeStyle
+  PolylineEdgeStyle,
+  Rect
 } from '@yfiles/yfiles'
 
 import {
@@ -213,7 +214,26 @@ export default class DecisionTree {
     this.beforeLayoutCallback?.(true, this.graphComponent)
 
     await this.runLayout(newNodes, animateScroll)
+    // calculate the bounding box of all new nodes
+    let nodeArea = Rect.EMPTY
+    for (const node of newNodes) {
+      nodeArea = Rect.add(nodeArea, node.layout.toRect())
+    }
+
+    // if there are new nodes, ensure all of them are visible
+    if (!nodeArea.isEmpty) {
+      nodeArea = nodeArea.getEnlarged(10)
 
+      let zoom = targetZoom
+      if (nodeArea.width * targetZoom > this.graphComponent.size.width) {
+        zoom = this.graphComponent.size.width / nodeArea.width
+      }
+      if (animateScroll) {
+        await this.graphComponent.zoomToAnimated(zoom, nodeArea.center)
+      } else {
+        this.graphComponent.zoomTo(zoom, nodeArea.center)
+      }
+    }
     this.afterLayoutCallback?.(false, this.graphComponent)
   }
 
@@ -493,7 +513,8 @@ export default class DecisionTree {
         graphComponent: this.graphComponent,
         layout,
         layoutData,
-        animationDuration: animated ? '0.2s' : '0s'
+        animationDuration: animated ? '0.2s' : '0s',
+        animateViewport: false
       })
       try {
         await layoutExecutor.start()

demos/toolkit/vue/src/composables/useContextMenu.ts

@@ -31,6 +31,7 @@ import {
   Command,
   GraphComponent,
   GraphEditorInputMode,
+  type GraphInputMode,
   GraphViewerInputMode,
   IEdge,
   IModelItem,
@@ -67,7 +68,7 @@ export function useContextMenu(getGraphComponent: () => GraphComponent) {
   /**
    * Registers the context menu on the current input mode.
    */
-  function register(inputMode: GraphEditorInputMode | GraphViewerInputMode): void {
+  function register(inputMode: GraphInputMode): void {
     inputMode.addEventListener(
       'populate-item-context-menu',
       (evt: PopulateItemContextMenuEventArgs<IModelItem>) => {

demos/toolkit/vue/src/composables/useTooltips.ts

@@ -30,13 +30,14 @@ import { createApp, defineComponent, onMounted } from 'vue'
 import {
   GraphComponent,
   GraphEditorInputMode,
+  type GraphInputMode,
   GraphItemTypes,
   GraphViewerInputMode,
   IEdge,
   IModelItem,
   INode,
-  QueryItemToolTipEventArgs,
   Point,
+  QueryItemToolTipEventArgs,
   TimeSpan
 } from '@yfiles/yfiles'
 import Tooltip from '@/components/Tooltip.vue'
@@ -57,7 +58,7 @@ export function useTooltips(getGraphComponent: () => GraphComponent) {
    * {@link QueryItemToolTipEventArgs.queryLocation} property contains the mouse position for the query in world coordinates.
    * The {@link QueryItemToolTipEventArgs.toolTip} is set by setting the ToolTip property.
    */
-  function register(inputMode: GraphEditorInputMode | GraphViewerInputMode): void {
+  function register(inputMode: GraphInputMode): void {
     // show tooltips only for nodes and edges
     inputMode.toolTipItems = GraphItemTypes.NODE | GraphItemTypes.EDGE