yFiles for HTML 2.5 demos

Author: michabaur

demos/.prettierignore

@@ -2,7 +2,9 @@
 **/dist/
 **/node_modules/
 /03-tutorial-application-features/webgl-rendering/resources/*.json
+/complete/tree-of-life/resources/TreeOfLifeData.json
 /internal/webgl-performance-tests/resources/*.json
+/resources/style/demo.css
 /starter-kits/**
 /view/large-graphs/resources/*.json
 /view/rendering-optimizations/resources/*.json

demos/01-tutorial-getting-started/01-graphcomponent/README.md

@@ -10,7 +10,7 @@ Getting Started Tutorial - Step 1
 
 How to create a basic view.
 
-This step introduces class [GraphComponent](https://docs.yworks.com/yfileshtml/#/api/GraphComponent), which is the central UI element for working with graphs. The application does not provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely meant as a very basic example of how to display a GraphComponent within a web page.
+This step introduces class [GraphComponent](https://docs.yworks.com/yfileshtml/#/api/GraphComponent), which is the [central UI element for working with graphs](https://docs.yworks.com/yfileshtml/#/dguide/getting_started-application). The application does not provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely meant as a very basic example of how to display a GraphComponent within a web page.
 
 See the sources for details.
 

demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.js

@@ -1,6 +1,6 @@
 /****************************************************************************
  ** @license
- ** This demo file is part of yFiles for HTML 2.4.
+ ** This demo file is part of yFiles for HTML 2.5.
  ** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
  ** 72070 Tuebingen, Germany. All rights reserved.
  **
@@ -28,15 +28,15 @@
  ***************************************************************************/
 import { ExteriorLabelModel, GraphComponent, License } from 'yfiles'
 
-import loadJson from '../../resources/load-json.js'
+import { fetchLicense } from '../../resources/fetch-license.js'
 
 import { enableWorkarounds } from '../../utils/Workarounds.js'
 
 /**
- * @param {!object} licenseData
+ * @returns {!Promise}
  */
-function run(licenseData) {
-  License.value = licenseData
+async function run() {
+  License.value = await fetchLicense()
 
   const graphComponent = new GraphComponent('#graphComponent')
   // create one simple node as an example
@@ -48,4 +48,5 @@ function run(licenseData) {
 }
 
 enableWorkarounds()
-loadJson().then(run)
+// noinspection JSIgnoredPromiseFromCall
+run()

demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.ts

@@ -1,6 +1,6 @@
 /****************************************************************************
  ** @license
- ** This demo file is part of yFiles for HTML 2.4.
+ ** This demo file is part of yFiles for HTML 2.5.
  ** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
  ** 72070 Tuebingen, Germany. All rights reserved.
  **
@@ -28,12 +28,12 @@
  ***************************************************************************/
 import { ExteriorLabelModel, GraphComponent, License } from 'yfiles'
 
-import loadJson from '../../resources/load-json'
+import { fetchLicense } from '../../resources/fetch-license'
 
 import { enableWorkarounds } from '../../utils/Workarounds'
 
-function run(licenseData: object): void {
-  License.value = licenseData
+async function run(): Promise<void> {
+  License.value = await fetchLicense()
 
   const graphComponent = new GraphComponent('#graphComponent')
   // create one simple node as an example
@@ -45,4 +45,5 @@ function run(licenseData: object): void {
 }
 
 enableWorkarounds()
-loadJson().then(run)
+// noinspection JSIgnoredPromiseFromCall
+run()

demos/01-tutorial-getting-started/01-graphcomponent/index.html

@@ -10,7 +10,7 @@
 
 <!-- ////////////////////////////////////////////////////////////////////////
      // @license
-     // This demo file is part of yFiles for HTML 2.4.
+     // This demo file is part of yFiles for HTML 2.5.
      // Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
      // 72070 Tuebingen, Germany. All rights reserved.
      //
@@ -81,9 +81,7 @@ <h1>Creating the View</h1>
 
       <p>
         This step introduces class <a href="https://docs.yworks.com/yfileshtml/#/api/GraphComponent" target="_blank">GraphComponent</a>, which is the
-        <dguide section="getting_started-application"
-          >central UI element for working with graphs</dguide
-        >. The application does not provide any interactive features except mouse wheel zooming,
+        <a href="https://docs.yworks.com/yfileshtml/#/dguide/getting_started-application" target="_blank">central UI element for working with graphs</a>. The application does not provide any interactive features except mouse wheel zooming,
         which is enabled by default. It is merely meant as a very basic example of how to display a
         GraphComponent within a web page.
       </p>

demos/01-tutorial-getting-started/02-graph-element-creation/README.md

@@ -10,6 +10,6 @@ Getting Started Tutorial - Step 2
 
 How to create a graph programmatically.
 
-This step shows how to create the basic graph elements.
+This step shows how to [create the basic graph elements](https://docs.yworks.com/yfileshtml/#/dguide/getting_started-creating_graph_elements).
 
 See the sources for details.

demos/01-tutorial-getting-started/02-graph-element-creation/SampleApplication.js

@@ -1,6 +1,6 @@
 /****************************************************************************
  ** @license
- ** This demo file is part of yFiles for HTML 2.4.
+ ** This demo file is part of yFiles for HTML 2.5.
  ** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
  ** 72070 Tuebingen, Germany. All rights reserved.
  **
@@ -27,17 +27,17 @@
  **
  ***************************************************************************/
 import { FreeNodePortLocationModel, GraphComponent, License, Point, Rect } from 'yfiles'
-import { checkLicense, showApp } from '../../resources/demo-app.js'
-import loadJson from '../../resources/load-json.js'
+import { showApp } from '../../resources/demo-app.js'
+import { fetchLicense } from '../../resources/fetch-license.js'
 
 /** @type {GraphComponent} */
 let graphComponent = null
 
 /**
- * @param {!object} licenseData
+ * @returns {!Promise}
  */
-function run(licenseData) {
-  License.value = licenseData
+async function run() {
+  License.value = await fetchLicense()
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
   graphComponent = new GraphComponent('#graphComponent')
 
@@ -120,5 +120,5 @@ function populateGraph() {
 
 // ////////////////////////////////////////////////////
 
-// start tutorial
-loadJson().then(checkLicense).then(run)
+// noinspection JSIgnoredPromiseFromCall
+run()

demos/01-tutorial-getting-started/02-graph-element-creation/SampleApplication.ts

@@ -1,6 +1,6 @@
 /****************************************************************************
  ** @license
- ** This demo file is part of yFiles for HTML 2.4.
+ ** This demo file is part of yFiles for HTML 2.5.
  ** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
  ** 72070 Tuebingen, Germany. All rights reserved.
  **
@@ -27,14 +27,14 @@
  **
  ***************************************************************************/
 import { FreeNodePortLocationModel, GraphComponent, License, Point, Rect } from 'yfiles'
-import { checkLicense, showApp } from '../../resources/demo-app'
-import loadJson from '../../resources/load-json'
+import { showApp } from '../../resources/demo-app'
+import { fetchLicense } from '../../resources/fetch-license'
 
 // @ts-ignore
 let graphComponent: GraphComponent = null
 
-function run(licenseData: object): void {
-  License.value = licenseData
+async function run(): Promise<void> {
+  License.value = await fetchLicense()
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
   graphComponent = new GraphComponent('#graphComponent')
 
@@ -117,5 +117,5 @@ function populateGraph(): void {
 
 // ////////////////////////////////////////////////////
 
-// start tutorial
-loadJson().then(checkLicense).then(run)
+// noinspection JSIgnoredPromiseFromCall
+run()

demos/01-tutorial-getting-started/02-graph-element-creation/index.html

@@ -7,7 +7,7 @@
 
 <!-- ////////////////////////////////////////////////////////////////////////
      // @license
-     // This demo file is part of yFiles for HTML 2.4.
+     // This demo file is part of yFiles for HTML 2.5.
      // Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
      // 72070 Tuebingen, Germany. All rights reserved.
      //
@@ -41,9 +41,6 @@
     <script src="../../resources/filesystem-warning.js"></script>
   </head>
   <body class="demo-has-left">
-    <!--
-  The sidebar for the overview and description text
-  -->
     <aside class="demo-sidebar demo-left">
       <div class="demo-sidebar-header">
         <a href="https://www.yworks.com/products/yfiles" class="demo-left-logo"></a>
@@ -57,9 +54,7 @@ <h1>Creating Graph Elements</h1>
 
         <p>
           This step shows how to
-          <dguide section="getting_started-creating_graph_elements"
-            >create the basic graph elements</dguide
-          >.
+          <a href="https://docs.yworks.com/yfileshtml/#/dguide/getting_started-creating_graph_elements" target="_blank">create the basic graph elements</a>.
         </p>
 
         <p>See the sources for details.</p>

demos/01-tutorial-getting-started/03-managing-viewport/SampleApplication.js

@@ -1,6 +1,6 @@
 /****************************************************************************
  ** @license
- ** This demo file is part of yFiles for HTML 2.4.
+ ** This demo file is part of yFiles for HTML 2.5.
  ** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
  ** 72070 Tuebingen, Germany. All rights reserved.
  **
@@ -37,17 +37,17 @@ import {
   Rect
 } from 'yfiles'
 
-import { bindCommand, checkLicense, showApp } from '../../resources/demo-app.js'
-import loadJson from '../../resources/load-json.js'
+import { bindCommand, showApp } from '../../resources/demo-app.js'
+import { fetchLicense } from '../../resources/fetch-license.js'
 
 /** @type {GraphComponent} */
 let graphComponent = null
 
 /**
- * @param {!object} licenseData
+ * @returns {!Promise}
  */
-function run(licenseData) {
-  License.value = licenseData
+async function run() {
+  License.value = await fetchLicense()
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
   graphComponent = new GraphComponent('#graphComponent')
 
@@ -141,8 +141,8 @@ function populateGraph() {
 /**
  * Updates the content rectangle to encompass all existing graph elements.
  * If you create your graph elements programmatically, the content rectangle
- * (i.e. the rectangle in <b>world coordinates</b>
- * that encloses the graph) is <b>not</b> updated automatically to enclose these elements.
+ * (i.e. the rectangle in __world coordinates__
+ * that encloses the graph) is __not__ updated automatically to enclose these elements.
  * Typically, this manifests in wrong/missing scrollbars, incorrect {@link GraphOverviewComponent}
  * behavior and the like.
  *
@@ -154,7 +154,7 @@ function populateGraph() {
  *
  * Uncomment various combinations of lines in this method and observe the different effects.
  *
- * The following demos in this tutorial will assume that you've called <code>GraphComponent.fitGraphBounds()</code>
+ * The following demos in this tutorial will assume that you've called {@link GraphComponent.fitGraphBounds}
  * in this method.
  */
 function updateViewport() {
@@ -187,5 +187,5 @@ function registerCommands() {
   bindCommand("button[data-command='ZoomOriginal']", ICommand.ZOOM, graphComponent, 1.0)
 }
 
-// start tutorial
-loadJson().then(checkLicense).then(run)
+// noinspection JSIgnoredPromiseFromCall
+run()

demos/01-tutorial-getting-started/03-managing-viewport/SampleApplication.ts

@@ -1,6 +1,6 @@
 /****************************************************************************
  ** @license
- ** This demo file is part of yFiles for HTML 2.4.
+ ** This demo file is part of yFiles for HTML 2.5.
  ** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
  ** 72070 Tuebingen, Germany. All rights reserved.
  **
@@ -37,14 +37,14 @@ import {
   Rect
 } from 'yfiles'
 
-import { bindCommand, checkLicense, showApp } from '../../resources/demo-app'
-import loadJson from '../../resources/load-json'
+import { bindCommand, showApp } from '../../resources/demo-app'
+import { fetchLicense } from '../../resources/fetch-license'
 
 // @ts-ignore
 let graphComponent: GraphComponent = null
 
-function run(licenseData: object): void {
-  License.value = licenseData
+async function run(): Promise<void> {
+  License.value = await fetchLicense()
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
   graphComponent = new GraphComponent('#graphComponent')
 
@@ -138,8 +138,8 @@ function populateGraph(): void {
 /**
  * Updates the content rectangle to encompass all existing graph elements.
  * If you create your graph elements programmatically, the content rectangle
- * (i.e. the rectangle in <b>world coordinates</b>
- * that encloses the graph) is <b>not</b> updated automatically to enclose these elements.
+ * (i.e. the rectangle in __world coordinates__
+ * that encloses the graph) is __not__ updated automatically to enclose these elements.
  * Typically, this manifests in wrong/missing scrollbars, incorrect {@link GraphOverviewComponent}
  * behavior and the like.
  *
@@ -151,7 +151,7 @@ function populateGraph(): void {
  *
  * Uncomment various combinations of lines in this method and observe the different effects.
  *
- * The following demos in this tutorial will assume that you've called <code>GraphComponent.fitGraphBounds()</code>
+ * The following demos in this tutorial will assume that you've called {@link GraphComponent.fitGraphBounds}
  * in this method.
  */
 function updateViewport(): void {
@@ -184,5 +184,5 @@ function registerCommands(): void {
   bindCommand("button[data-command='ZoomOriginal']", ICommand.ZOOM, graphComponent, 1.0)
 }
 
-// start tutorial
-loadJson().then(checkLicense).then(run)
+// noinspection JSIgnoredPromiseFromCall
+run()

demos/01-tutorial-getting-started/03-managing-viewport/index.html

@@ -7,7 +7,7 @@
 
 <!-- ////////////////////////////////////////////////////////////////////////
      // @license
-     // This demo file is part of yFiles for HTML 2.4.
+     // This demo file is part of yFiles for HTML 2.5.
      // Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
      // 72070 Tuebingen, Germany. All rights reserved.
      //
@@ -41,9 +41,6 @@
     <script src="../../resources/filesystem-warning.js"></script>
   </head>
   <body class="demo-has-left">
-    <!--
-  The sidebar for the overview and description text
-  -->
     <aside class="demo-sidebar demo-left">
       <div class="demo-sidebar-header">
         <a href="https://www.yworks.com/products/yfiles" class="demo-left-logo"></a>

demos/01-tutorial-getting-started/04-setting-styles/README.md

@@ -10,7 +10,7 @@ Getting Started Tutorial - Step 4
 
 How to influence visual appearance.
 
-This step shows how to configure the visual appearance of graph elements using styles.
+This step shows how to [configure the visual appearance of graph elements](https://docs.yworks.com/yfileshtml/#/dguide/getting_started-setting_styles) using styles.
 
 yFiles for HTML offers a set of predefined and configurable item styles for various use-cases. The tutorial [02 Custom Styles](../../README.html#tutorial-custom-styles) shows in detail how to create a custom style from scratch.