yFiles for HTML 2.6.0.3 demos

yWorks · Dec 13, 2023 · f019974 · f019974
1 parent 84208e2
commit f019974
Show file tree

Hide file tree

Showing 1,656 changed files with 17,750 additions and 9,166 deletions.
diff --git a/demos/.prettierignore b/demos/.prettierignore
@@ -2,8 +2,10 @@
 **/dist/
 **/node_modules/
 /application-features/webgl-rendering/resources/*.json
-/showcase/tree-of-life/resources/TreeOfLifeData.json
+/showcase/large-graphs/resources/*.json
 /internal/webgl-performance-tests/resources/*.json
+/showcase/tree-of-life/resources/TreeOfLifeData.json
 /starter-kits/**
 /view/large-graphs/resources/*.json
 /view/rendering-optimizations/resources/*.json
+/view/webgl-label-fading/resources/hierarchic_2000_2100.json
diff --git a/demos/.prettierrc.json b/demos/.prettierrc.json
@@ -1,13 +1,9 @@
 {
   "printWidth": 100,
-  "tabWidth": 2,
-  "endOfLine": "auto",
-  "useTabs": false,
   "semi": false,
   "singleQuote": true,
-  "bracketSpacing": true,
   "trailingComma": "none",
-  "arrowParens": "avoid",
+  "endOfLine": "auto",
   "overrides": [
     {
       "files": ["tutorial-*/**/*.ts"],

diff --git a/demos/README.html b/demos/README.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -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.2</a> demo applications are available in
+              The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.6.0.3</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

diff --git a/demos/analysis/clustering/ClusteringDemo.js b/demos/analysis/clustering/ClusteringDemo.js
@@ -276,7 +276,7 @@ function configureUserInteraction(graphComponent) {
  */
 function configureDendrogramComponent(dendrogramComponent) {
   // add a dragging listener to run the hierarchical algorithm when the dragging of the cutoff line has finished
-  dendrogramComponent.addDragFinishedListener(cutOffValue => {
+  dendrogramComponent.addDragFinishedListener((cutOffValue) => {
     removeClusterVisuals()
     runHierarchicalClustering(cutOffValue)
   })
@@ -474,7 +474,7 @@ function visualizeClusteringResult() {
 
   // creates a map the holds for each cluster id, the list of nodes that belong to the particular cluster
   const clustering = new Map()
-  graph.nodes.forEach(node => {
+  graph.nodes.forEach((node) => {
     let clusterId = result.nodeClusterIds.get(node)
     // biconnected components returns -1 as cluster id when only one node is present.
     // We change the clusterId manually here, as otherwise we'll get an exception in
@@ -592,7 +592,7 @@ function loadGraph(sampleData) {
       {
         data: sampleData.nodes,
         id: 'id',
-        layout: data => new Rect(data.x, data.y, data.w, data.h),
+        layout: (data) => new Rect(data.x, data.y, data.w, data.h),
         labels: ['label']
       }
     ],
@@ -623,10 +623,10 @@ function initializeUI() {
 
   // edge-betweenness menu
   const minInput = document.querySelector(`#ebMinClusterNumber`)
-  minInput.addEventListener('change', _ => {
+  minInput.addEventListener('change', (_) => {
     const value = parseFloat(minInput.value)
     const maximumClusterNumber = parseFloat(document.querySelector(`#ebMaxClusterNumber`).value)
-    if (isNaN(value) || value < 1) {
+    if (Number.isNaN(value) || value < 1) {
       alert('Number of clusters should be non-negative.')
       minInput.value = '1'
       return
@@ -647,10 +647,10 @@ function initializeUI() {
   })
 
   const maxInput = document.querySelector(`#ebMaxClusterNumber`)
-  maxInput.addEventListener('change', _ => {
+  maxInput.addEventListener('change', (_) => {
     const value = parseFloat(maxInput.value)
     const minimumClusterNumber = parseFloat(document.querySelector(`#ebMinClusterNumber`).value)
-    if (isNaN(value) || value < minimumClusterNumber || minimumClusterNumber < 1) {
+    if (Number.isNaN(value) || value < minimumClusterNumber || minimumClusterNumber < 1) {
       const message =
         value < minimumClusterNumber
           ? 'Desired maximum number of clusters cannot be smaller than the desired minimum number of clusters.'
@@ -665,7 +665,7 @@ function initializeUI() {
   const considerEdgeDirection = document.querySelector(`#directed`)
   considerEdgeDirection.addEventListener('click', () => {
     const isChecked = considerEdgeDirection.checked
-    graph.edges.forEach(edge => {
+    graph.edges.forEach((edge) => {
       graph.setStyle(edge, isChecked ? directedEdgeStyle : graph.edgeDefaults.style)
     })
 
@@ -674,7 +674,7 @@ function initializeUI() {
 
   const considerEdgeCosts = document.querySelector(`#edgeCosts`)
   considerEdgeCosts.addEventListener('click', () => {
-    graph.edges.forEach(edge => {
+    graph.edges.forEach((edge) => {
       if (considerEdgeCosts.checked) {
         const edgeCost = Math.floor(Math.random() * 200 + 1)
         if (edge.labels.size > 0) {
@@ -683,7 +683,7 @@ function initializeUI() {
           graph.addLabel(edge, `${edgeCost}`)
         }
       } else {
-        edge.labels.toArray().forEach(label => {
+        edge.labels.toArray().forEach((label) => {
           graph.remove(label)
         })
       }
@@ -695,19 +695,19 @@ function initializeUI() {
   const distanceCombobox = document.querySelector(`#distance-metrics`)
   distanceCombobox.addEventListener('change', runAlgorithm)
   const kMeansInput = document.querySelector(`#kMeansMaxClusterNumber`)
-  kMeansInput.addEventListener('change', _ => {
+  kMeansInput.addEventListener('change', (_) => {
     const value = parseFloat(kMeansInput.value)
-    if (isNaN(value) || value < 1) {
+    if (Number.isNaN(value) || value < 1) {
       alert('Desired maximum number of clusters should be greater than zero.')
       kMeansInput.value = '1'
       return
     }
     runAlgorithm()
   })
   const iterationInput = document.querySelector(`#iterations`)
-  iterationInput.addEventListener('change', _ => {
+  iterationInput.addEventListener('change', (_) => {
     const value = parseFloat(iterationInput.value)
-    if (isNaN(value) || value < 0) {
+    if (Number.isNaN(value) || value < 0) {
       alert('Desired maximum number of iterations should be non-negative.')
       iterationInput.value = '0'
       return
@@ -748,7 +748,7 @@ function getEdgeWeight(edge) {
   if (edge.labels.size > 0) {
     // ...try to return its value
     const edgeWeight = parseFloat(edge.labels.first().text)
-    if (!isNaN(edgeWeight)) {
+    if (!Number.isNaN(edgeWeight)) {
       return edgeWeight > 0 ? edgeWeight : 1
     }
   }

diff --git a/demos/analysis/clustering/ClusteringDemo.ts b/demos/analysis/clustering/ClusteringDemo.ts
@@ -270,7 +270,7 @@ function configureUserInteraction(graphComponent: GraphComponent): void {
  */
 function configureDendrogramComponent(dendrogramComponent: DendrogramComponent): void {
   // add a dragging listener to run the hierarchical algorithm when the dragging of the cutoff line has finished
-  dendrogramComponent.addDragFinishedListener(cutOffValue => {
+  dendrogramComponent.addDragFinishedListener((cutOffValue) => {
     removeClusterVisuals()
     runHierarchicalClustering(cutOffValue)
   })
@@ -473,7 +473,7 @@ function visualizeClusteringResult(): void {
 
   // creates a map the holds for each cluster id, the list of nodes that belong to the particular cluster
   const clustering = new Map<number, IRectangle[]>()
-  graph.nodes.forEach(node => {
+  graph.nodes.forEach((node) => {
     let clusterId: number = result.nodeClusterIds.get(node)!
     // biconnected components returns -1 as cluster id when only one node is present.
     // We change the clusterId manually here, as otherwise we'll get an exception in
@@ -622,12 +622,12 @@ function initializeUI(): void {
 
   // edge-betweenness menu
   const minInput = document.querySelector<HTMLInputElement>(`#ebMinClusterNumber`)!
-  minInput.addEventListener('change', _ => {
+  minInput.addEventListener('change', (_) => {
     const value = parseFloat(minInput.value)
     const maximumClusterNumber = parseFloat(
       document.querySelector<HTMLInputElement>(`#ebMaxClusterNumber`)!.value
     )
-    if (isNaN(value) || value < 1) {
+    if (Number.isNaN(value) || value < 1) {
       alert('Number of clusters should be non-negative.')
       minInput.value = '1'
       return
@@ -648,12 +648,12 @@ function initializeUI(): void {
   })
 
   const maxInput = document.querySelector<HTMLInputElement>(`#ebMaxClusterNumber`)!
-  maxInput.addEventListener('change', _ => {
+  maxInput.addEventListener('change', (_) => {
     const value = parseFloat(maxInput.value)
     const minimumClusterNumber = parseFloat(
       document.querySelector<HTMLInputElement>(`#ebMinClusterNumber`)!.value
     )
-    if (isNaN(value) || value < minimumClusterNumber || minimumClusterNumber < 1) {
+    if (Number.isNaN(value) || value < minimumClusterNumber || minimumClusterNumber < 1) {
       const message =
         value < minimumClusterNumber
           ? 'Desired maximum number of clusters cannot be smaller than the desired minimum number of clusters.'
@@ -668,7 +668,7 @@ function initializeUI(): void {
   const considerEdgeDirection = document.querySelector<HTMLInputElement>(`#directed`)!
   considerEdgeDirection.addEventListener('click', () => {
     const isChecked = considerEdgeDirection.checked
-    graph.edges.forEach(edge => {
+    graph.edges.forEach((edge) => {
       graph.setStyle(edge, isChecked ? directedEdgeStyle : graph.edgeDefaults.style)
     })
 
@@ -677,7 +677,7 @@ function initializeUI(): void {
 
   const considerEdgeCosts = document.querySelector<HTMLInputElement>(`#edgeCosts`)!
   considerEdgeCosts.addEventListener('click', () => {
-    graph.edges.forEach(edge => {
+    graph.edges.forEach((edge) => {
       if (considerEdgeCosts.checked) {
         const edgeCost = Math.floor(Math.random() * 200 + 1)
         if (edge.labels.size > 0) {
@@ -686,7 +686,7 @@ function initializeUI(): void {
           graph.addLabel(edge, `${edgeCost}`)
         }
       } else {
-        edge.labels.toArray().forEach(label => {
+        edge.labels.toArray().forEach((label) => {
           graph.remove(label)
         })
       }
@@ -698,19 +698,19 @@ function initializeUI(): void {
   const distanceCombobox = document.querySelector<HTMLSelectElement>(`#distance-metrics`)!
   distanceCombobox.addEventListener('change', runAlgorithm)
   const kMeansInput = document.querySelector<HTMLInputElement>(`#kMeansMaxClusterNumber`)!
-  kMeansInput.addEventListener('change', _ => {
+  kMeansInput.addEventListener('change', (_) => {
     const value = parseFloat(kMeansInput.value)
-    if (isNaN(value) || value < 1) {
+    if (Number.isNaN(value) || value < 1) {
       alert('Desired maximum number of clusters should be greater than zero.')
       kMeansInput.value = '1'
       return
     }
     runAlgorithm()
   })
   const iterationInput = document.querySelector<HTMLInputElement>(`#iterations`)!
-  iterationInput.addEventListener('change', _ => {
+  iterationInput.addEventListener('change', (_) => {
     const value = parseFloat(iterationInput.value)
-    if (isNaN(value) || value < 0) {
+    if (Number.isNaN(value) || value < 0) {
       alert('Desired maximum number of iterations should be non-negative.')
       iterationInput.value = '0'
       return
@@ -751,7 +751,7 @@ function getEdgeWeight(edge: IEdge): number {
   if (edge.labels.size > 0) {
     // ...try to return its value
     const edgeWeight = parseFloat(edge.labels.first().text)
-    if (!isNaN(edgeWeight)) {
+    if (!Number.isNaN(edgeWeight)) {
       return edgeWeight > 0 ? edgeWeight : 1
     }
   }

diff --git a/demos/analysis/clustering/DemoVisuals.js b/demos/analysis/clustering/DemoVisuals.js
@@ -99,7 +99,7 @@ export class VoronoiVisual extends BaseClass(IVisualCreator) {
       container.appendChild(svgPath)
     })
 
-    this.clusters.centroids.forEach(point => {
+    this.clusters.centroids.forEach((point) => {
       VoronoiVisual.drawClusterCenter(point, container)
     })
 
@@ -172,7 +172,7 @@ export class PolygonVisual extends BaseClass(IVisualCreator) {
       let generalPath = new GeneralPath()
       if (clusterNodeBounds.length > 1) {
         const points = new YList()
-        clusterNodeBounds.forEach(layout => {
+        clusterNodeBounds.forEach((layout) => {
           const offset = 0
           const x = layout.x
           const y = layout.y

diff --git a/demos/analysis/clustering/DemoVisuals.ts b/demos/analysis/clustering/DemoVisuals.ts
@@ -104,7 +104,7 @@ export class VoronoiVisual
       container.appendChild(svgPath)
     })
 
-    this.clusters.centroids.forEach(point => {
+    this.clusters.centroids.forEach((point) => {
       VoronoiVisual.drawClusterCenter(point, container)
     })
 
@@ -185,7 +185,7 @@ export class PolygonVisual
       let generalPath: GeneralPath = new GeneralPath()
       if (clusterNodeBounds.length > 1) {
         const points = new YList()
-        clusterNodeBounds.forEach(layout => {
+        clusterNodeBounds.forEach((layout) => {
           const offset = 0
           const x = layout.x
           const y = layout.y
@@ -254,7 +254,10 @@ export class AxisVisual
   extends BaseClass<IVisualCreator>(IVisualCreator)
   implements IVisualCreator
 {
-  constructor(private maxY: number, private rect: Rect) {
+  constructor(
+    private maxY: number,
+    private rect: Rect
+  ) {
     super()
   }
 
@@ -338,7 +341,10 @@ export class CutoffVisual
 {
   public cutOffValue: number
 
-  constructor(public rectangle: IRectangle, private readonly maxY: number) {
+  constructor(
+    public rectangle: IRectangle,
+    private readonly maxY: number
+  ) {
     super()
     this.rectangle = rectangle
     this.maxY = maxY