yFiles for HTML 2.4.0.6 demos

Author: michabaur

demos/01-tutorial-getting-started/10-layout/SampleApplication.js

@@ -74,6 +74,7 @@ let dateMapper = null
  */
 function run(licenseData) {
   License.value = licenseData
+
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
   graphComponent = new GraphComponent('#graphComponent')
 
@@ -119,14 +120,15 @@ function run(licenseData) {
 
 // /////////////// New in this Sample /////////////////
 
-// We need to load the 'view-layout-bridge' module explicitly to prevent tree-shaking
-// tools it from removing this dependency which is needed for 'morphLayout'.
-Class.ensure(LayoutExecutor)
-
 /**
+ * Applies a hierarchic layout.
  * @returns {!Promise}
  */
 async function runLayout() {
+  // We need to load the 'view-layout-bridge' module explicitly to prevent tree-shaking
+  // tools it from removing this dependency which is needed for 'morphLayout'.
+  Class.ensure(LayoutExecutor)
+
   const layoutButton = document.getElementById('layout-btn')
   layoutButton.disabled = true
   // Uses the morphLayout method to perform the layout, animate it, manage undo and adjust the content rectangle in

demos/01-tutorial-getting-started/10-layout/SampleApplication.ts

@@ -72,6 +72,7 @@ let dateMapper: Mapper<IModelItem, Date> = null
 
 function run(licenseData: object): void {
   License.value = licenseData
+
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
   graphComponent = new GraphComponent('#graphComponent')
 
@@ -117,11 +118,14 @@ function run(licenseData: object): void {
 
 // /////////////// New in this Sample /////////////////
 
-// We need to load the 'view-layout-bridge' module explicitly to prevent tree-shaking
-// tools it from removing this dependency which is needed for 'morphLayout'.
-Class.ensure(LayoutExecutor)
-
+/**
+ * Applies a hierarchic layout.
+ */
 async function runLayout(): Promise<void> {
+  // We need to load the 'view-layout-bridge' module explicitly to prevent tree-shaking
+  // tools it from removing this dependency which is needed for 'morphLayout'.
+  Class.ensure(LayoutExecutor)
+
   const layoutButton = document.getElementById('layout-btn') as HTMLButtonElement
   layoutButton.disabled = true
   // Uses the morphLayout method to perform the layout, animate it, manage undo and adjust the content rectangle in

demos/01-tutorial-getting-started/11-layout-data/SampleApplication.js

@@ -27,6 +27,7 @@
  **
  ***************************************************************************/
 import {
+  Class,
   DefaultLabelStyle,
   EdgePathLabelModel,
   EdgeSides,
@@ -45,6 +46,7 @@ import {
   Insets,
   InteriorStretchLabelModel,
   LabelEventArgs,
+  LayoutExecutor,
   License,
   MinimumNodeSizeStage,
   Point,
@@ -62,8 +64,9 @@ let graphComponent = null
 
 /**
  * @param {!object} licenseData
+ * @returns {!Promise}
  */
-function run(licenseData) {
+async function run(licenseData) {
   License.value = licenseData
 
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
@@ -95,16 +98,24 @@ function run(licenseData) {
 
   // Initialize the demo application's CSS and Javascript for the description
   showApp(graphComponent)
+
+  await runLayout()
 }
 
 /**
  * Applies a hierarchic layout and uses the data of the layout from the tags of the nodes.
  * @returns {!Promise}
  */
 async function runLayout() {
-  const hierarchicLayout = new HierarchicLayout()
+  // We need to load the 'view-layout-bridge' module explicitly to prevent tree-shaking
+  // tools it from removing this dependency which is needed for 'morphLayout'.
+  Class.ensure(LayoutExecutor)
+
+  const layoutButton = document.getElementById('layout-btn')
+  layoutButton.disabled = true
 
   // /////////////// New in this Sample /////////////////
+  const hierarchicLayout = new HierarchicLayout()
 
   // Configures the layout data from the data that exits in the tags of the nodes
   const hierarchicLayoutData = new HierarchicLayoutData({
@@ -135,6 +146,8 @@ async function runLayout() {
     } else {
       throw error
     }
+  } finally {
+    layoutButton.disabled = false
   }
 }
 
@@ -179,9 +192,6 @@ function createSampleGraph() {
   builder.createEdgesSource(GraphBuilderData.edges, 'source', 'target', 'id')
 
   builder.buildGraph()
-
-  // Runs the layout
-  runLayout()
 }
 
 /**

demos/01-tutorial-getting-started/11-layout-data/SampleApplication.ts

@@ -28,6 +28,7 @@
  ***************************************************************************/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
+  Class,
   DefaultLabelStyle,
   EdgePathLabelModel,
   EdgeSides,
@@ -46,6 +47,7 @@ import {
   Insets,
   InteriorStretchLabelModel,
   LabelEventArgs,
+  LayoutExecutor,
   License,
   MinimumNodeSizeStage,
   Point,
@@ -61,7 +63,7 @@ import GraphBuilderData from './resources/graph'
 // @ts-ignore
 let graphComponent: GraphComponent = null
 
-function run(licenseData: object): void {
+async function run(licenseData: object): Promise<void> {
   License.value = licenseData
 
   // Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
@@ -93,15 +95,23 @@ function run(licenseData: object): void {
 
   // Initialize the demo application's CSS and Javascript for the description
   showApp(graphComponent)
+
+  await runLayout()
 }
 
 /**
  * Applies a hierarchic layout and uses the data of the layout from the tags of the nodes.
  */
 async function runLayout(): Promise<void> {
-  const hierarchicLayout = new HierarchicLayout()
+  // We need to load the 'view-layout-bridge' module explicitly to prevent tree-shaking
+  // tools it from removing this dependency which is needed for 'morphLayout'.
+  Class.ensure(LayoutExecutor)
+
+  const layoutButton = document.getElementById('layout-btn') as HTMLButtonElement
+  layoutButton.disabled = true
 
   // /////////////// New in this Sample /////////////////
+  const hierarchicLayout = new HierarchicLayout()
 
   // Configures the layout data from the data that exits in the tags of the nodes
   const hierarchicLayoutData = new HierarchicLayoutData({
@@ -133,6 +143,8 @@ async function runLayout(): Promise<void> {
     } else {
       throw error
     }
+  } finally {
+    layoutButton.disabled = false
   }
 }
 
@@ -176,9 +188,6 @@ function createSampleGraph(): void {
   builder.createEdgesSource(GraphBuilderData.edges, 'source', 'target', 'id')
 
   builder.buildGraph()
-
-  // Runs the layout
-  runLayout()
 }
 
 /**

demos/01-tutorial-getting-started/11-layout-data/index.html

@@ -120,7 +120,12 @@ <h1>Layout Data</h1>
           class="demo-icon-yIconUngroup"
         ></button>
         <span class="demo-separator"></span>
-        <button data-command="Layout" title="Layout" class="demo-icon-yIconLayout labeled">
+        <button
+          id="layout-btn"
+          data-command="Layout"
+          title="Layout"
+          class="demo-icon-yIconLayout labeled"
+        >
           Layout
         </button>
       </div>

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.4.0.5</a> demo applications are available in both JavaScript and
+              The <a href='https://www.yworks.com/products/yfiles-for-html'>yFiles for HTML 2.4.0.6</a> demo applications are available in both JavaScript and
               TypeScript, with only a few exceptions.
             </p>
             <div class="js-only">

demos/analysis/graphanalysis/resources/substructures.graphml

@@ -28,7 +28,7 @@
      // 
      ////////////////////////////////////////////////////////////////////////-->
 
-<!--Created by yFiles for HTML 2.4.0.5-->
+<!--Created by yFiles for HTML 2.4.0.6-->
 <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/complete/networkmonitoring/Device.js

@@ -35,12 +35,12 @@ export /**
  */
 const DeviceKind = {
   WORKSTATION: 1,
-  LAPTOP: 1,
-  SMARTPHONE: 2,
-  SWITCH: 3,
-  WLAN: 4,
-  SERVER: 5,
-  DATABASE: 6
+  LAPTOP: 2,
+  SMARTPHONE: 3,
+  SWITCH: 4,
+  WLAN: 5,
+  SERVER: 6,
+  DATABASE: 7
 }
 
 /**

demos/complete/networkmonitoring/Device.ts

@@ -31,12 +31,12 @@
  */
 export enum DeviceKind {
   WORKSTATION = 1,
-  LAPTOP,
-  SMARTPHONE,
-  SWITCH,
-  WLAN,
-  SERVER,
-  DATABASE
+  LAPTOP = 2,
+  SMARTPHONE = 3,
+  SWITCH = 4,
+  WLAN = 5,
+  SERVER = 6,
+  DATABASE = 7
 }
 
 /**

demos/complete/networkmonitoring/NetworkMonitoringDemo.js

@@ -61,7 +61,7 @@ import HTMLPopupSupport from './HTMLPopupSupport.js'
 import loadJson from '../../resources/load-json.js'
 import { passiveSupported } from '../../utils/Workarounds.js'
 import Network from './Network.js'
-import SampleData from './resources/sample.js'
+import { networkData } from './resources/network-sample.js'
 
 // This demo creates a network monitoring tool for dynamic data.
 // The mock-up model is created and updated by class Simulator.
@@ -254,7 +254,7 @@ function toggleLabels(event) {
 function loadNetwork() {
   return new Promise(resolve =>
     setTimeout(() => {
-      loadGraph(SampleData)
+      loadGraph(networkData)
       populateModel(graphComponent.graph)
       resolve()
     }, 0)

demos/complete/networkmonitoring/NetworkMonitoringDemo.ts

@@ -61,8 +61,8 @@ import HTMLPopupSupport from './HTMLPopupSupport'
 import loadJson from '../../resources/load-json'
 import { passiveSupported } from '../../utils/Workarounds'
 import Network from './Network'
-import SampleData from './resources/sample'
-import type { NetworkSample } from './resources/sample'
+import { networkData } from './resources/network-sample'
+import type { NetworkSample } from './resources/network-sample'
 
 // This demo creates a network monitoring tool for dynamic data.
 // The mock-up model is created and updated by class Simulator.
@@ -239,7 +239,7 @@ function toggleLabels(event: Event): void {
 function loadNetwork(): Promise<void> {
   return new Promise<void>(resolve =>
     setTimeout(() => {
-      loadGraph(SampleData)
+      loadGraph(networkData)
       populateModel(graphComponent.graph)
       resolve()
     }, 0)