yFiles for HTML 2.6.0.2 demos

Author: michabaur

demos/README.html

@@ -107,7 +107,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.6.0.1</a> demo applications are available in
+              The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.6.0.2</a> demo applications are available in
               both JavaScript and TypeScript.
               <span class="js-only"
                 >Show <a href="../demos-ts/README.html">TypeScript Demos</a>.</span
@@ -126,9 +126,7 @@ <h2>Your browser does not support modern CSS</h2>
 
           <p id="online-notice">
             All of these demos are also hosted at the
-            <a href="https://live.yworks.com/demos/" target="_blank"
-              >yFiles for HTML Online Demos page</a
-            >.
+            <a href="https://www.yworks.com/demos" target="_blank">yWorks homepage</a>.
           </p>
 
           <div class="important" id="no-ecmascript6" style="display: none">
@@ -194,7 +192,7 @@ <h2>Your browser does not support modern CSS</h2>
               </div>
             </div>
             <div id="non-tutorial-grid"></div>
-            <div class="tutorial-header" id="tutorial-basic-features-header">
+            <div class="tutorial-header hidden" id="tutorial-basic-features-header">
               Tutorial: Basic Features
             </div>
             <div id="tutorial-basic-features" class="hidden">
@@ -217,7 +215,7 @@ <h2>Your browser does not support modern CSS</h2>
               </p>
             </div>
             <div id="tutorial-basic-features-grid"></div>
-            <div class="tutorial-header" id="tutorial-node-style-implementation-header">
+            <div class="tutorial-header hidden" id="tutorial-node-style-implementation-header">
               Tutorial: Node Style Implementation
             </div>
             <div id="tutorial-node-style-implementation" class="hidden">
@@ -236,7 +234,7 @@ <h2>Your browser does not support modern CSS</h2>
               </p>
             </div>
             <div id="tutorial-node-style-implementation-grid"></div>
-            <div class="tutorial-header" id="tutorial-label-style-implementation-header">
+            <div class="tutorial-header hidden" id="tutorial-label-style-implementation-header">
               Tutorial: Label Style Implementation
             </div>
             <div id="tutorial-label-style-implementation" class="hidden">
@@ -257,7 +255,7 @@ <h2>Your browser does not support modern CSS</h2>
               </p>
             </div>
             <div id="tutorial-label-style-implementation-grid"></div>
-            <div class="tutorial-header" id="tutorial-edge-style-implementation-header">
+            <div class="tutorial-header hidden" id="tutorial-edge-style-implementation-header">
               Tutorial: Edge Style Implementation
             </div>
             <div id="tutorial-edge-style-implementation" class="hidden">
@@ -278,7 +276,7 @@ <h2>Your browser does not support modern CSS</h2>
               </p>
             </div>
             <div id="tutorial-edge-style-implementation-grid"></div>
-            <div class="tutorial-header" id="tutorial-port-style-implementation-header">
+            <div class="tutorial-header hidden" id="tutorial-port-style-implementation-header">
               Tutorial: Port Style Implementation
             </div>
             <div id="tutorial-port-style-implementation" class="hidden">
@@ -299,7 +297,7 @@ <h2>Your browser does not support modern CSS</h2>
               </p>
             </div>
             <div id="tutorial-port-style-implementation-grid"></div>
-            <div class="tutorial-header" id="tutorial-graph-builder-header">
+            <div class="tutorial-header hidden" id="tutorial-graph-builder-header">
               Tutorial: Graph Builder
             </div>
             <div id="tutorial-graph-builder" class="hidden">
@@ -316,7 +314,7 @@ <h2>Your browser does not support modern CSS</h2>
               </p>
             </div>
             <div id="tutorial-graph-builder-grid"></div>
-            <div class="tutorial-header" id="unavailable-header" style="display: none">
+            <div class="tutorial-header hidden" id="unavailable-header" style="display: none">
               Demos Available in Complete Package
             </div>
 

demos/analysis/clustering/ClusteringDemo.js

@@ -211,12 +211,12 @@ function configureUserInteraction(graphComponent) {
 
   // when an edge is created, run the algorithm again except for the k-means and hierarchical
   // because these two are independent of the edges of the graph
-  mode.createEdgeInputMode.addEdgeCreatedListener((_, args) => {
+  mode.createEdgeInputMode.addEdgeCreatedListener((_, evt) => {
     if (
       selectedAlgorithm === ClusteringAlgorithm.EDGE_BETWEENNESS &&
       document.querySelector(`#directed`).checked
     ) {
-      graphComponent.graph.setStyle(args.item, directedEdgeStyle)
+      graphComponent.graph.setStyle(evt.item, directedEdgeStyle)
     }
     if (
       selectedAlgorithm != ClusteringAlgorithm.kMEANS &&
@@ -247,10 +247,10 @@ function configureUserInteraction(graphComponent) {
   // add the hover listener
   mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
   mode.itemHoverInputMode.discardInvalidItems = false
-  mode.itemHoverInputMode.addHoveredItemChangedListener((_, event) => {
+  mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
     // if a node is hovered and the algorithm is HIERARCHICAL clustering, hover the corresponding dendrogram node
     if (selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL) {
-      const node = event.item
+      const node = evt.item
       graphComponent.highlightIndicatorManager.clearHighlights()
       if (node && result) {
         graphComponent.highlightIndicatorManager.addHighlight(node)

demos/analysis/clustering/ClusteringDemo.ts

@@ -204,12 +204,12 @@ function configureUserInteraction(graphComponent: GraphComponent): void {
 
   // when an edge is created, run the algorithm again except for the k-means and hierarchical
   // because these two are independent of the edges of the graph
-  mode.createEdgeInputMode.addEdgeCreatedListener((_, args) => {
+  mode.createEdgeInputMode.addEdgeCreatedListener((_, evt) => {
     if (
       selectedAlgorithm === ClusteringAlgorithm.EDGE_BETWEENNESS &&
       document.querySelector<HTMLInputElement>(`#directed`)!.checked
     ) {
-      graphComponent.graph.setStyle(args.item, directedEdgeStyle)
+      graphComponent.graph.setStyle(evt.item, directedEdgeStyle)
     }
     if (
       selectedAlgorithm != ClusteringAlgorithm.kMEANS &&
@@ -240,10 +240,10 @@ function configureUserInteraction(graphComponent: GraphComponent): void {
   // add the hover listener
   mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
   mode.itemHoverInputMode.discardInvalidItems = false
-  mode.itemHoverInputMode.addHoveredItemChangedListener((_, event) => {
+  mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
     // if a node is hovered and the algorithm is HIERARCHICAL clustering, hover the corresponding dendrogram node
     if (selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL) {
-      const node = event.item
+      const node = evt.item
       graphComponent.highlightIndicatorManager.clearHighlights()
       if (node && result) {
         graphComponent.highlightIndicatorManager.addHighlight(node)

demos/analysis/clustering/DendrogramSupport.js

@@ -144,7 +144,7 @@ export class DendrogramComponent {
     })
     mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
     mode.itemHoverInputMode.discardInvalidItems = false
-    mode.itemHoverInputMode.addHoveredItemChangedListener((sender, evt) =>
+    mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) =>
       this.onHoveredItemChanged(evt.item)
     )
     mode.marqueeSelectionInputMode.enabled = false

demos/analysis/clustering/DendrogramSupport.ts

@@ -143,7 +143,7 @@ export class DendrogramComponent {
     })
     mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
     mode.itemHoverInputMode.discardInvalidItems = false
-    mode.itemHoverInputMode.addHoveredItemChangedListener((sender, evt) =>
+    mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) =>
       this.onHoveredItemChanged(evt.item)
     )
     mode.marqueeSelectionInputMode.enabled = false

demos/analysis/clustering/index.html

@@ -34,11 +34,10 @@
      ////////////////////////////////////////////////////////////////////////-->
 
     <title>Clustering Demo [yFiles for HTML]</title>
+    <script type="module" src="../../resources/demo-page-init.ts" async></script>
 
     <link rel="stylesheet" href="../../resources/style/demo.css" />
 
-    <script type="module" src="../../resources/demo-page-init.ts" async></script>
-
     <style>
       .vertical-stack {
         width: 100%;

demos/analysis/criticalpathanalysis/index.html

@@ -34,10 +34,10 @@
      ////////////////////////////////////////////////////////////////////////-->
 
     <title>Critical Path Analysis (CPA) Demo [yFiles for HTML]</title>
+    <script type="module" src="../../resources/demo-page-init.ts" async></script>
 
     <link rel="stylesheet" href="../../resources/style/demo.css" />
 
-    <script type="module" src="../../resources/demo-page-init.ts" async></script>
     <style>
       .critical-node-style {
         fill: #c1c1c1;

demos/analysis/intersection-detection/IntersectionDetectionDemo.js

@@ -79,23 +79,23 @@ let graphComponent
  */
 let intersectionVisualCreator
 
-const considerSourceTargetIntersectionsBox = document.getElementById(
-  'consider-source-target-node-intersections'
+const considerSourceTargetIntersectionsBox = document.querySelector(
+  '#consider-source-target-node-intersections'
 )
-const considerGroupContentIntersectionsBox = document.getElementById(
-  'consider-group-content-intersections'
+const considerGroupContentIntersectionsBox = document.querySelector(
+  '#consider-group-content-intersections'
 )
-const considerLabelOwnerIntersectionsBox = document.getElementById(
-  'consider-label-owner-intersections'
+const considerLabelOwnerIntersectionsBox = document.querySelector(
+  '#consider-label-owner-intersections'
 )
-const considerItemGeometryBox = document.getElementById('consider-item-geometry')
-const considerSelectionBox = document.getElementById('consider-only-selection')
-const intersectionCountLabel = document.getElementById('intersection-count')
-const nodeNodeCountLabel = document.getElementById('node-node-count')
-const nodeEdgeCountLabel = document.getElementById('node-edge-count')
-const edgeEdgeCountLabel = document.getElementById('edge-edge-count')
-const labelCountLabel = document.getElementById('label-count')
-const consideredItemsSelect = document.getElementById('considered-items-select')
+const considerItemGeometryBox = document.querySelector('#consider-item-geometry')
+const considerSelectionBox = document.querySelector('#consider-only-selection')
+const intersectionCountLabel = document.querySelector('#intersection-count')
+const nodeNodeCountLabel = document.querySelector('#node-node-count')
+const nodeEdgeCountLabel = document.querySelector('#node-edge-count')
+const edgeEdgeCountLabel = document.querySelector('#edge-edge-count')
+const labelCountLabel = document.querySelector('#label-count')
+const consideredItemsSelect = document.querySelector('#considered-items-select')
 /** @type {Array} */
 let intersectionInfoArray = []
 
@@ -255,7 +255,7 @@ function loadSampleGraph(graph) {
     layout: 'layout',
     parentId: dataItem => dataItem.parent
   })
-  ns.nodeCreator.addNodeCreatedListener((sender, evt) => {
+  ns.nodeCreator.addNodeCreatedListener((_, evt) => {
     if (evt.dataItem.isEllipse) {
       const defaultStyle = graph.nodeDefaults.style
       graph.setStyle(
@@ -270,7 +270,7 @@ function loadSampleGraph(graph) {
   })
   const nodeLabelCreator = ns.nodeCreator.createLabelsSource(data => data.labels || []).labelCreator
   nodeLabelCreator.textProvider = data => data.text || ''
-  nodeLabelCreator.addLabelAddedListener((sender, evt) => {
+  nodeLabelCreator.addLabelAddedListener((_, evt) => {
     const label = evt.item
     const data = evt.dataItem
     graph.setLabelLayoutParameter(
@@ -302,7 +302,7 @@ function loadSampleGraph(graph) {
   })
   const edgeLabelCreator = es.edgeCreator.createLabelsSource(data => data.labels || []).labelCreator
   edgeLabelCreator.textProvider = data => data.text || ''
-  edgeLabelCreator.addLabelAddedListener((sender, evt) => {
+  edgeLabelCreator.addLabelAddedListener((_, evt) => {
     const label = evt.item
     const data = evt.dataItem
     graph.setLabelLayoutParameter(
@@ -425,8 +425,8 @@ function initializeInputMode() {
 
   inputMode.itemHoverInputMode.hoverItems =
     GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.LABEL
-  inputMode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
-    const item = args.item
+  inputMode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
+    const item = evt.item
     const highlightIndicatorManager = graphComponent.highlightIndicatorManager
     highlightIndicatorManager.clearHighlights()
 
@@ -486,16 +486,16 @@ function configureToolTips(inputMode) {
   mouseHoverInputMode.duration = TimeSpan.fromSeconds(10)
 
   // Register a listener for when a tool tip should be shown.
-  inputMode.addQueryItemToolTipListener((src, eventArgs) => {
-    if (eventArgs.handled) {
+  inputMode.addQueryItemToolTipListener((_, evt) => {
+    if (evt.handled) {
       // Tool tip content has already been assigned -> nothing to do.
       return
     }
 
     // Use a rich HTML element as tool tip content. Alternatively, a plain string would do as well.
-    eventArgs.toolTip = createToolTipContent(eventArgs.item, intersectionInfoArray)
+    evt.toolTip = createToolTipContent(evt.item, intersectionInfoArray)
     // Indicate that the tool tip content has been set.
-    eventArgs.handled = true
+    evt.handled = true
   })
 }
 

demos/analysis/intersection-detection/IntersectionDetectionDemo.ts

@@ -77,27 +77,23 @@ let graphComponent: GraphComponent
  */
 let intersectionVisualCreator: IntersectionVisualCreator
 
-const considerSourceTargetIntersectionsBox = document.getElementById(
-  'consider-source-target-node-intersections'
-) as HTMLInputElement
-const considerGroupContentIntersectionsBox = document.getElementById(
-  'consider-group-content-intersections'
-) as HTMLInputElement
-const considerLabelOwnerIntersectionsBox = document.getElementById(
-  'consider-label-owner-intersections'
-) as HTMLInputElement
-const considerItemGeometryBox = document.getElementById(
-  'consider-item-geometry'
-) as HTMLInputElement
-const considerSelectionBox = document.getElementById('consider-only-selection') as HTMLInputElement
-const intersectionCountLabel = document.getElementById('intersection-count') as HTMLLabelElement
-const nodeNodeCountLabel = document.getElementById('node-node-count') as HTMLLabelElement
-const nodeEdgeCountLabel = document.getElementById('node-edge-count') as HTMLLabelElement
-const edgeEdgeCountLabel = document.getElementById('edge-edge-count') as HTMLLabelElement
-const labelCountLabel = document.getElementById('label-count') as HTMLLabelElement
-const consideredItemsSelect = document.getElementById(
-  'considered-items-select'
-) as HTMLSelectElement
+const considerSourceTargetIntersectionsBox = document.querySelector<HTMLInputElement>(
+  '#consider-source-target-node-intersections'
+)!
+const considerGroupContentIntersectionsBox = document.querySelector<HTMLInputElement>(
+  '#consider-group-content-intersections'
+)!
+const considerLabelOwnerIntersectionsBox = document.querySelector<HTMLInputElement>(
+  '#consider-label-owner-intersections'
+)!
+const considerItemGeometryBox = document.querySelector<HTMLInputElement>('#consider-item-geometry')!
+const considerSelectionBox = document.querySelector<HTMLInputElement>('#consider-only-selection')!
+const intersectionCountLabel = document.querySelector<HTMLInputElement>('#intersection-count')!
+const nodeNodeCountLabel = document.querySelector<HTMLInputElement>('#node-node-count')!
+const nodeEdgeCountLabel = document.querySelector<HTMLInputElement>('#node-edge-count')!
+const edgeEdgeCountLabel = document.querySelector<HTMLInputElement>('#edge-edge-count')!
+const labelCountLabel = document.querySelector<HTMLInputElement>('#label-count')!
+const consideredItemsSelect = document.querySelector<HTMLInputElement>('#considered-items-select')!
 let intersectionInfoArray: Intersection[] = []
 
 /**
@@ -252,7 +248,7 @@ function loadSampleGraph(graph: IGraph): void {
     layout: 'layout',
     parentId: dataItem => dataItem.parent
   })
-  ns.nodeCreator.addNodeCreatedListener((sender, evt) => {
+  ns.nodeCreator.addNodeCreatedListener((_, evt) => {
     if (evt.dataItem.isEllipse) {
       const defaultStyle = graph.nodeDefaults.style as ShapeNodeStyle
       graph.setStyle(
@@ -267,7 +263,7 @@ function loadSampleGraph(graph: IGraph): void {
   })
   const nodeLabelCreator = ns.nodeCreator.createLabelsSource(data => data.labels || []).labelCreator
   nodeLabelCreator.textProvider = data => data.text || ''
-  nodeLabelCreator.addLabelAddedListener((sender, evt) => {
+  nodeLabelCreator.addLabelAddedListener((_, evt) => {
     const label = evt.item
     const data = evt.dataItem
     graph.setLabelLayoutParameter(
@@ -299,7 +295,7 @@ function loadSampleGraph(graph: IGraph): void {
   })
   const edgeLabelCreator = es.edgeCreator.createLabelsSource(data => data.labels || []).labelCreator
   edgeLabelCreator.textProvider = data => data.text || ''
-  edgeLabelCreator.addLabelAddedListener((sender, evt) => {
+  edgeLabelCreator.addLabelAddedListener((_, evt) => {
     const label = evt.item
     const data = evt.dataItem
     graph.setLabelLayoutParameter(
@@ -421,8 +417,8 @@ function initializeInputMode(): void {
 
   inputMode.itemHoverInputMode.hoverItems =
     GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.LABEL
-  inputMode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
-    const item = args.item
+  inputMode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
+    const item = evt.item
     const highlightIndicatorManager = graphComponent.highlightIndicatorManager
     highlightIndicatorManager.clearHighlights()
 
@@ -481,19 +477,17 @@ function configureToolTips(inputMode: GraphEditorInputMode): void {
   mouseHoverInputMode.duration = TimeSpan.fromSeconds(10)
 
   // Register a listener for when a tool tip should be shown.
-  inputMode.addQueryItemToolTipListener(
-    (src: object, eventArgs: QueryItemToolTipEventArgs<IModelItem>): void => {
-      if (eventArgs.handled) {
-        // Tool tip content has already been assigned -> nothing to do.
-        return
-      }
-
-      // Use a rich HTML element as tool tip content. Alternatively, a plain string would do as well.
-      eventArgs.toolTip = createToolTipContent(eventArgs.item!, intersectionInfoArray)
-      // Indicate that the tool tip content has been set.
-      eventArgs.handled = true
+  inputMode.addQueryItemToolTipListener((_, evt): void => {
+    if (evt.handled) {
+      // Tool tip content has already been assigned -> nothing to do.
+      return
     }
-  )
+
+    // Use a rich HTML element as tool tip content. Alternatively, a plain string would do as well.
+    evt.toolTip = createToolTipContent(evt.item!, intersectionInfoArray)
+    // Indicate that the tool tip content has been set.
+    evt.handled = true
+  })
 }
 
 run().then(finishLoading)