yFiles for HTML 2.5.0.4 demos

Author: michabaur

demos/README.html

@@ -109,7 +109,7 @@ <h2>Your browser does not support modern CSS</h2>
         <div class="content-wide">
           <div id="general-intro">
             <p class="first-paragraph">
-              The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.5.0.3</a> demo applications are available in
+              The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.5.0.4</a> demo applications are available in
               both JavaScript and TypeScript, with only a few exceptions.
             </p>
             <div class="js-only">

demos/README.md

@@ -261,7 +261,7 @@ This folder and its subfolders contain demo applications which illustrate the di
 <img src="resources/image/nodejs.png" alt="Node.js screenshot" width="128" height="96" /> | [Node.js](loading/nodejs) | Shows how to run a yFiles layout algorithm in a <a href='https://nodejs.org/' target='_blank'>Node.js&reg;</a> environment.
 <img src="resources/image/amdloading.png" alt="AMD Loading screenshot" width="128" height="96" /> | [AMD Loading](loading/amdloading) | Loads the yFiles library modules with the AMD loading standard (require.js).
 <img src="resources/image/esmodules.png" alt="ES Module Loading screenshot" width="128" height="96" /> | [ES Module Loading](loading/esmodules) | Loads the yFiles module resources using ES module imports.
-<img src="resources/image/browserify.png" alt="Browserify screenshot" width="128" height="96" /> | [Browserify](loading/browserify/README.html) | Shows how to bundle the yFiles library in a <a href="http://browserify.org" target="_blank">Browserify</a> project.
+<img src="resources/image/browserify.png" alt="Browserify screenshot" width="128" height="96" /> | [Browserify](loading/browserify/README.html) | Shows how to bundle the yFiles library in a <a href="https://browserify.org" target="_blank">Browserify</a> project.
 <img src="resources/image/rollupjs.png" alt="Rollup.js screenshot" width="128" height="96" /> | [Rollup.js](loading/rollupjs/README.html) | Shows how to bundle the yFiles library in a <a href="https://rollupjs.org" target="_blank">rollup</a> project.
 <img src="resources/image/scriptloading.png" alt="Script Loading screenshot" width="128" height="96" /> | [Script Loading](loading/scriptloading) | Loads the yFiles modules using plain old &lt;script&gt; tags.
 <img src="resources/image/webworker.png" alt="Web Worker Webpack screenshot" width="128" height="96" /> | [Web Worker Webpack](loading/webworker-webpack/README.html) | Shows how to run a yFiles layout algorithm in a Web Worker task using Webpack.

demos/analysis/graphanalysis/resources/substructures.graphml

@@ -28,7 +28,7 @@
      // 
      ////////////////////////////////////////////////////////////////////////-->
 
-<!--Created by yFiles for HTML 2.5.0.3-->
+<!--Created by yFiles for HTML 2.5.0.4-->
 <graphml xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://www.yworks.com/xml/schema/graphml.html/2.0/ygraphml.xsd " xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:y="http://www.yworks.com/xml/yfiles-common/3.0" xmlns:x="http://www.yworks.com/xml/yfiles-common/markup/3.0" xmlns:yjs="http://www.yworks.com/xml/yfiles-for-html/2.0/xaml" xmlns:x0="http://www.yworks.com/yFilesHTML/demos/FlatDemoStyle/2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 			<yjs:Stroke x:Key="8" fill="{y:GraphMLReference 9}"/>
 	<graph id="G" edgedefault="directed">

demos/demo-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demo-server-for-yfiles-for-html",
-  "version": "25.0.3",
+  "version": "25.0.4",
   "description": "A Node.js Express server for the yFiles for HTML demos and tutorials.",
   "author": "yWorks GmbH <yfileshtml@yworks.com>",
   "license": "https://www.yworks.com/products/yfiles-for-html/sla",

demos/input/button-input-mode/ButtonInputMode.js

@@ -281,20 +281,19 @@ export class ButtonInputMode extends InputModeBase {
    * @type {!ILabelStyle}
    */
   get focusedButtonStyle() {
-    return (this.buttonLabelManager?.descriptor).focusedButtonStyle
+    return this.buttonLabelManager.descriptor.focusedButtonStyle
   }
 
   /**
    * @type {!ILabelStyle}
    */
   set focusedButtonStyle(style) {
-    ;(this.buttonLabelManager?.descriptor).focusedButtonStyle = style
+    this.buttonLabelManager.descriptor.focusedButtonStyle = style
   }
 
   constructor() {
     super()
     this.buttons = null
-    this.buttonLabelManager = null
     this.queryButtonsListener = null
     this.itemRemovedListener = this.onItemRemoved.bind(this)
     this.onMouseMoveListener = this.onMouseMove.bind(this)
@@ -327,22 +326,23 @@ export class ButtonInputMode extends InputModeBase {
     this.clearPending = false
     this.priority = 0
     this.exclusive = true
-    this.createButtonLabelCollectionModel()
+    this.buttonLabelManager = this.createButtonLabelCollectionModel()
     this._cursor = Cursor.POINTER
     this.tooltipMode.duration = TimeSpan.fromSeconds(5)
   }
 
   createButtonLabelCollectionModel() {
-    this.buttonLabelManager = new CollectionModelManager(Button.$class)
-    this.buttonLabelManager.descriptor = new ButtonDescriptor()
-    this.buttonLabelManager.model = new ObservableCollection()
+    const buttonLabelManager = new CollectionModelManager(Button.$class)
+    buttonLabelManager.descriptor = new ButtonDescriptor()
+    buttonLabelManager.model = new ObservableCollection()
+    return buttonLabelManager
   }
 
   /**
    * @type {!ObservableCollection.<Button>}
    */
   get buttonLabels() {
-    return this.buttonLabelManager?.model
+    return this.buttonLabelManager.model
   }
 
   /**
@@ -678,7 +678,7 @@ export class ButtonInputMode extends InputModeBase {
    * @param {!Point} location
    */
   updateHoveredItem(location) {
-    const hitItem = this.getHitItem(this.inputModeContext?.canvasComponent, location)
+    const hitItem = this.getHitItem(location)
     if (hitItem != this.hoveredOwner) {
       // hovered model item has changed
       if (hitItem) {
@@ -726,10 +726,10 @@ export class ButtonInputMode extends InputModeBase {
    * @type {?Button}
    */
   set focusedButton(focusedButton) {
-    ;(this.buttonLabelManager?.descriptor).focusedButton = focusedButton
+    this.buttonLabelManager.descriptor.focusedButton = focusedButton
     this._focusedButton = focusedButton
     if (focusedButton) {
-      this.buttonLabelManager?.update(focusedButton)
+      this.buttonLabelManager.update(focusedButton)
     }
     this.inputModeContext?.canvasComponent?.invalidate()
   }
@@ -755,7 +755,7 @@ export class ButtonInputMode extends InputModeBase {
         this.triggerAction(hitButton)
       }
     } else if (rightClick && this.buttonTrigger === ButtonTrigger.RIGHT_CLICK) {
-      const hitItem = this.getHitItem(sender, evt.location)
+      const hitItem = this.getHitItem(evt.location)
       if (hitItem && hitItem != this.buttonOwner) {
         this.showButtons(hitItem)
       } else {
@@ -822,10 +822,9 @@ export class ButtonInputMode extends InputModeBase {
   }
 
   /**
-   * @param {!GraphComponent} graphComponent
    * @param {!Point} location
    */
-  getHitItem(graphComponent, location) {
+  getHitItem(location) {
     const context = this.inputModeContext
     const hitTester = context.lookup(IHitTester.$class)
     let hitItem = hitTester

demos/input/button-input-mode/ButtonInputMode.ts

@@ -160,7 +160,7 @@ export enum ButtonTrigger {
  */
 export class ButtonInputMode extends InputModeBase {
   private buttons: Button[] | null = null
-  private buttonLabelManager: CollectionModelManager<Button> | null = null
+  private buttonLabelManager: CollectionModelManager<Button>
   private queryButtonsListener: QueryButtonsListener | null = null
   private itemRemovedListener = this.onItemRemoved.bind(this)
   private onMouseMoveListener = this.onMouseMove.bind(this)
@@ -295,30 +295,31 @@ export class ButtonInputMode extends InputModeBase {
    * Using the {@link Key.TAB} the focus can be moved to the next button.
    */
   get focusedButtonStyle(): ILabelStyle {
-    return (this.buttonLabelManager?.descriptor as ButtonDescriptor).focusedButtonStyle
+    return (this.buttonLabelManager.descriptor as ButtonDescriptor).focusedButtonStyle
   }
 
   set focusedButtonStyle(style: ILabelStyle) {
-    ;(this.buttonLabelManager?.descriptor as ButtonDescriptor).focusedButtonStyle = style
+    ;(this.buttonLabelManager.descriptor as ButtonDescriptor).focusedButtonStyle = style
   }
 
   constructor() {
     super()
     this.priority = 0
     this.exclusive = true
-    this.createButtonLabelCollectionModel()
+    this.buttonLabelManager = this.createButtonLabelCollectionModel()
     this._cursor = Cursor.POINTER
     this.tooltipMode.duration = TimeSpan.fromSeconds(5)
   }
 
   private createButtonLabelCollectionModel() {
-    this.buttonLabelManager = new CollectionModelManager<Button>(Button.$class)
-    this.buttonLabelManager.descriptor = new ButtonDescriptor()
-    this.buttonLabelManager.model = new ObservableCollection<Button>()
+    const buttonLabelManager = new CollectionModelManager<Button>(Button.$class)
+    buttonLabelManager.descriptor = new ButtonDescriptor()
+    buttonLabelManager.model = new ObservableCollection<Button>()
+    return buttonLabelManager
   }
 
   private get buttonLabels(): ObservableCollection<Button> {
-    return this.buttonLabelManager?.model as ObservableCollection<Button>
+    return this.buttonLabelManager.model as ObservableCollection<Button>
   }
 
   /**
@@ -358,7 +359,7 @@ export class ButtonInputMode extends InputModeBase {
           // get the bounding rectangle around all the buttons in this set
           const wholeBounds = this.buttons.reduce((previousValue, currentValue) => {
             const boundsProvider =
-              this.buttonLabelManager!.descriptor!.getBoundsProvider(currentValue)
+              this.buttonLabelManager.descriptor!.getBoundsProvider(currentValue)
             return Rect.add(previousValue, boundsProvider.getBounds(canvasContext))
           }, Rect.EMPTY)
           // get the bounds for the owner of the buttons
@@ -442,7 +443,7 @@ export class ButtonInputMode extends InputModeBase {
 
   private getHitButtons(context: IInputModeContext, location: Point) {
     return context
-      .canvasComponent!.hitElementsAt(context, location, this.buttonLabelManager!.canvasObjectGroup)
+      .canvasComponent!.hitElementsAt(context, location, this.buttonLabelManager.canvasObjectGroup)
       .map(canvasObject => canvasObject.userObject as Button)
   }
 
@@ -453,7 +454,7 @@ export class ButtonInputMode extends InputModeBase {
   install(context: IInputModeContext, controller: ConcurrencyController) {
     super.install(context, controller)
     const graphComponent = context.canvasComponent as GraphComponent
-    this.buttonLabelManager!.canvasObjectGroup = graphComponent.inputModeGroup.addGroup()
+    this.buttonLabelManager.canvasObjectGroup = graphComponent.inputModeGroup.addGroup()
     graphComponent.addMouseMoveListener(this.onMouseMoveListener)
     graphComponent.addMouseDragListener(this.onMouseDragListener)
     graphComponent.addMouseLeaveListener(this.onMouseMoveListener)
@@ -493,7 +494,7 @@ export class ButtonInputMode extends InputModeBase {
     graphComponent.removeMouseDragListener(this.onMouseDragListener)
     graphComponent.removeMouseLeaveListener(this.onMouseMoveListener)
     this.updateHoveredButton(null)
-    this.buttonLabelManager!.canvasObjectGroup!.remove()
+    this.buttonLabelManager.canvasObjectGroup!.remove()
     super.uninstall(context)
   }
 
@@ -573,9 +574,9 @@ export class ButtonInputMode extends InputModeBase {
     const tooltipWorldSize = this.calculateTooltipWorldSize(button.tooltip)
 
     // get the bounds of the button using the ButtonDescriptor
-    const buttonBounds = this.buttonLabelManager!.descriptor!.getBoundsProvider(button).getBounds(
-      this.inputModeContext!.canvasComponent!.canvasContext
-    )
+    const buttonBounds = this.buttonLabelManager
+      .descriptor!.getBoundsProvider(button)
+      .getBounds(this.inputModeContext!.canvasComponent!.canvasContext)
 
     // horizontally the tooltip is centered with the button center
     const x = buttonBounds.centerX - tooltipWorldSize.width / 2
@@ -618,10 +619,7 @@ export class ButtonInputMode extends InputModeBase {
   }
 
   private updateHoveredItem(location: Point) {
-    const hitItem = this.getHitItem(
-      this.inputModeContext?.canvasComponent as GraphComponent,
-      location
-    )
+    const hitItem = this.getHitItem(location)
     if (hitItem != this.hoveredOwner) {
       // hovered model item has changed
       if (hitItem) {
@@ -665,10 +663,10 @@ export class ButtonInputMode extends InputModeBase {
    * @param focusedButton The button to focus or `null` if no button shall be focused.
    */
   public set focusedButton(focusedButton: Button | null) {
-    ;(this.buttonLabelManager?.descriptor as ButtonDescriptor).focusedButton = focusedButton
+    ;(this.buttonLabelManager.descriptor as ButtonDescriptor).focusedButton = focusedButton
     this._focusedButton = focusedButton
     if (focusedButton) {
-      this.buttonLabelManager?.update(focusedButton)
+      this.buttonLabelManager.update(focusedButton)
     }
     this.inputModeContext?.canvasComponent?.invalidate()
   }
@@ -687,7 +685,7 @@ export class ButtonInputMode extends InputModeBase {
         this.triggerAction(hitButton)
       }
     } else if (rightClick && this.buttonTrigger === ButtonTrigger.RIGHT_CLICK) {
-      const hitItem = this.getHitItem(sender as GraphComponent, evt.location)
+      const hitItem = this.getHitItem(evt.location)
       if (hitItem && hitItem != this.buttonOwner) {
         this.showButtons(hitItem)
       } else {
@@ -738,7 +736,7 @@ export class ButtonInputMode extends InputModeBase {
     button.onAction(button)
   }
 
-  private getHitItem(graphComponent: GraphComponent, location: Point) {
+  private getHitItem(location: Point) {
     const context = this.inputModeContext!
     const hitTester = context.lookup(IHitTester.$class) as IHitTester<IModelItem>
     let hitItem: IModelItem | null = hitTester

demos/layout/custom-layout-stage/MoveNodesAsideStage.js

@@ -76,15 +76,17 @@ export default class MoveNodesAsideStage extends LayoutStageBase {
 
     const asideNodes = []
 
-    for (const node of graph.nodes) {
-      // For each node, get the original node and see whether the tag specifies that it
-      // should be handled specially.
-      const iNode = originalNodeDp?.get(node)
-      if (iNode?.tag?.moveAside) {
-        // If so, hide the node for now ...
-        hider.hide(node)
-        // ... and remember it for later use
-        asideNodes.push(node)
+    if (originalNodeDp) {
+      for (const node of graph.nodes) {
+        // For each node, get the original node and see whether the tag specifies that it
+        // should be handled specially.
+        const iNode = originalNodeDp.get(node)
+        if (iNode?.tag?.moveAside) {
+          // If so, hide the node for now ...
+          hider.hide(node)
+          // ... and remember it for later use
+          asideNodes.push(node)
+        }
       }
     }
 

demos/layout/custom-layout-stage/MoveNodesAsideStage.ts

@@ -73,15 +73,17 @@ export default class MoveNodesAsideStage extends LayoutStageBase {
 
     const asideNodes: YNode[] = []
 
-    for (const node of graph.nodes) {
-      // For each node, get the original node and see whether the tag specifies that it
-      // should be handled specially.
-      const iNode = originalNodeDp?.get(node) as INode
-      if (iNode?.tag?.moveAside) {
-        // If so, hide the node for now ...
-        hider.hide(node)
-        // ... and remember it for later use
-        asideNodes.push(node)
+    if (originalNodeDp) {
+      for (const node of graph.nodes) {
+        // For each node, get the original node and see whether the tag specifies that it
+        // should be handled specially.
+        const iNode = originalNodeDp.get(node) as INode | null
+        if (iNode?.tag?.moveAside) {
+          // If so, hide the node for now ...
+          hider.hide(node)
+          // ... and remember it for later use
+          asideNodes.push(node)
+        }
       }
     }
 

demos/layout/layoutstyles/resources/edge-labels.graphml

@@ -28,7 +28,7 @@
      // 
      ////////////////////////////////////////////////////////////////////////-->
 
-<!--Created by yFiles for HTML 2.5.0.3-->
+<!--Created by yFiles for HTML 2.5.0.4-->
 <graphml xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://www.yworks.com/xml/schema/graphml.html/2.0/ygraphml.xsd " xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:y="http://www.yworks.com/xml/yfiles-common/3.0" xmlns:x="http://www.yworks.com/xml/yfiles-common/markup/3.0" xmlns:yjs="http://www.yworks.com/xml/yfiles-for-html/2.0/xaml" xmlns:x0="http://www.yworks.com/yFilesHTML/demos/FlatDemoStyle/2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 	<key id="d0" for="node" attr.name="NodeLabels" y:attr.uri="http://www.yworks.com/xml/yfiles-common/2.0/NodeLabels"/>
 	<key id="d1" for="node" attr.name="NodeGeometry" y:attr.uri="http://www.yworks.com/xml/yfiles-common/2.0/NodeGeometry"/>

demos/layout/organicsubstructures/resources/parallel.graphml

@@ -27,7 +27,7 @@
      // SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
      // 
      ////////////////////////////////////////////////////////////////////////-->
-<!--Created by yFiles for HTML 2.5.0.3-->
+<!--Created by yFiles for HTML 2.5.0.4-->
 <graphml
   xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://www.yworks.com/xml/schema/graphml.html/2.0/ygraphml.xsd "
   xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:y="http://www.yworks.com/xml/yfiles-common/3.0"