yFiles for HTML 2.4.0.3 demos

Author: michabaur

demos/README.html

@@ -97,7 +97,7 @@ <h2>Your browser does not support modern CSS</h2>
     <div class="content-wide">
       <div id="general-intro">
         <p class="first-paragraph">
-          All <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.4.0.2</a> demo applications are available in JavaScript, and demos
+          All <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.4.0.3</a> demo applications are available in JavaScript, and demos
           that are additionally available in TypeScript are labeled with <span class="ts-badge">TS</span>.
         </p>
         <div class="js-only">

demos/analysis/clustering/ClusteringDemo.js

@@ -49,8 +49,9 @@ import {
   IEnumerable,
   IGraph,
   INode,
-  IRectangle,
   Insets,
+  IRectangle,
+  IVisualCreator,
   KMeansClustering,
   KMeansClusteringResult,
   LabelPropagationClustering,
@@ -63,8 +64,7 @@ import {
   Point,
   PolylineEdgeStyle,
   Rect,
-  ShapeNodeStyle,
-  IVisualCreator
+  ShapeNodeStyle
 } from 'yfiles'
 
 import * as ClusteringData from './resources/ClusteringData.js'
@@ -572,8 +572,7 @@ function onAlgorithmChanged() {
   selectedAlgorithm = algorithmsComboBox.selectedIndex
 
   // determine the file name that will be used for loading the graph
-  const key = algorithmsComboBox[selectedAlgorithm].value
-  const fileName = key.replace(' ', '').replace('-', '')
+  const fileName = algorithmsComboBox.value
 
   // Adjusts the window appearance. This method is needed since when the selected clustering algorithm is
   // HIERARCHICAL, the window has to be split to visualize the dendrogram.

demos/analysis/clustering/ClusteringDemo.ts

@@ -49,8 +49,9 @@ import {
   IEnumerable,
   IGraph,
   INode,
-  IRectangle,
   Insets,
+  IRectangle,
+  IVisualCreator,
   KMeansClustering,
   KMeansClusteringResult,
   LabelPropagationClustering,
@@ -63,8 +64,7 @@ import {
   Point,
   PolylineEdgeStyle,
   Rect,
-  ShapeNodeStyle,
-  IVisualCreator
+  ShapeNodeStyle
 } from 'yfiles'
 
 import * as ClusteringData from './resources/ClusteringData'
@@ -563,8 +563,7 @@ function onAlgorithmChanged() {
   selectedAlgorithm = algorithmsComboBox.selectedIndex
 
   // determine the file name that will be used for loading the graph
-  const key = (algorithmsComboBox[selectedAlgorithm] as HTMLOptionElement).value
-  const fileName = key.replace(' ', '').replace('-', '')
+  const fileName = algorithmsComboBox.value
 
   // Adjusts the window appearance. This method is needed since when the selected clustering algorithm is
   // HIERARCHICAL, the window has to be split to visualize the dendrogram.

demos/analysis/clustering/index.html

@@ -135,12 +135,12 @@ <h3>Things to Try</h3>
         class="demo-icon-yIconPrevious" disabled></button>
     <select data-command="AlgorithmSelectionChanged"
       title="Select a clustering algorithm graph" id="algorithmsComboBox">
-    <option>Edge Betweenness</option>
-    <option>k-Means</option>
-    <option>Hierarchical</option>
-    <option>Biconnected Components</option>
-    <option>Louvain Modularity</option>
-    <option>Label Propagation</option>
+    <option value="EdgeBetweenness">Edge Betweenness</option>
+    <option value="kMeans">k-Means</option>
+    <option value="Hierarchical">Hierarchical</option>
+    <option value="BiconnectedComponents">Biconnected Components</option>
+    <option value="LouvainModularity">Louvain Modularity</option>
+    <option value="LabelPropagation">Label Propagation</option>
   </select>
 
     <button data-command="NextFile" title="Open next graph" id="nextButton"

demos/analysis/graphanalysis/resources/substructures.graphml

@@ -28,7 +28,7 @@
      // 
      ////////////////////////////////////////////////////////////////////////-->
 
-<!--Created by yFiles for HTML 2.4.0.2-->
+<!--Created by yFiles for HTML 2.4.0.3-->
 <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/1.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/bpmn/BpmnEditorDemo.js

@@ -125,8 +125,6 @@ import loadJson from '../../resources/load-json.js'
 import { BpmnDiParser } from './bpmn-di.js'
 import { pointerEventsSupported } from '../../utils/Workarounds.js'
 
-const numberOfDiSamples = 1
-
 /** @type {GraphComponent} */
 let graphComponent
 
@@ -438,9 +436,10 @@ async function onGraphChooserBoxSelectionChanged() {
   setUIDisabled(true)
 
   // now derive the file name
-  const selectedItem = graphChooserBox.options[graphChooserBox.selectedIndex].value
-  const graphName = selectedItem.toLowerCase().replace(/ /g, '_')
-  if (graphChooserBox.selectedIndex >= graphChooserBox.options.length - numberOfDiSamples) {
+  const selectedItem = graphChooserBox.options[graphChooserBox.selectedIndex]
+  const graphName = selectedItem.value
+  const isBpmnDi = selectedItem.getAttribute('data-type') === 'bpmn-di'
+  if (isBpmnDi) {
     const content = await loadBpmnDiSample(graphName)
     if (content !== null) {
       const bpmnDiParser = new BpmnDiParser()

demos/complete/bpmn/BpmnEditorDemo.ts

@@ -125,8 +125,6 @@ import loadJson from '../../resources/load-json'
 import { BpmnDiParser } from './bpmn-di'
 import { pointerEventsSupported } from '../../utils/Workarounds'
 
-const numberOfDiSamples = 1
-
 let graphComponent: GraphComponent
 
 /**
@@ -430,9 +428,10 @@ async function onGraphChooserBoxSelectionChanged(): Promise<void> {
   setUIDisabled(true)
 
   // now derive the file name
-  const selectedItem = graphChooserBox.options[graphChooserBox.selectedIndex].value
-  const graphName = selectedItem.toLowerCase().replace(/ /g, '_')
-  if (graphChooserBox.selectedIndex >= graphChooserBox.options.length - numberOfDiSamples) {
+  const selectedItem = graphChooserBox.options[graphChooserBox.selectedIndex]
+  const graphName = selectedItem.value
+  const isBpmnDi = selectedItem.getAttribute('data-type') === 'bpmn-di'
+  if (isBpmnDi) {
     const content = await loadBpmnDiSample(graphName)
     if (content !== null) {
       const bpmnDiParser = new BpmnDiParser()

demos/complete/bpmn/BpmnPopupSupport.js

@@ -48,7 +48,6 @@ import {
   INodeStyle,
   IPort,
   IPortStyle,
-  List,
   NinePositionsEdgeLabelModel,
   Point,
   Rect,
@@ -840,26 +839,24 @@ export default class BpmnPopupSupport {
  * @param {!Class} enumType
  */
 function populateComboBox(comboBox, enumType) {
-  getEnumNames(enumType).forEach(name => {
+  Enum.getValueNames(enumType).forEach(name => {
     const option = document.createElement('option')
-    option.innerHTML = name
+    option.innerText = getFriendlyName(name)
+    option.value = name
     comboBox.options.add(option)
   })
 }
 
 /**
- * Returns a list containing all values of the given enum type.
- * @param {!Class} enumType
- * @returns {!IEnumerable.<string>}
+ * Returns a readable name for all-caps enum constants.
+ * @param {!string} name
  */
-function getEnumNames(enumType) {
-  // get all numeric values of the enum type...
-  const values = Enum.getValues(enumType)
-  const nameList = new List()
-  for (let i = 0; i < values.length; i++) {
-    const value = values[i]
-    // ... convert the numeric value in the enum value name and add it to the list of enum value names
-    nameList.insert(0, Enum.getName(enumType, value))
-  }
-  return nameList
+function getFriendlyName(name) {
+  // First character in uppercase
+  let result = name.substring(0, 1) + name.substring(1).toLowerCase()
+  // Dashes where necessary
+  result = result.replace(/(sub|non)_/g, '$1-')
+  // Replace underscores with spaces
+  result = result.replace(/_/g, ' ')
+  return result
 }

demos/complete/bpmn/BpmnPopupSupport.ts

@@ -48,7 +48,6 @@ import {
   INodeStyle,
   IPort,
   IPortStyle,
-  List,
   NinePositionsEdgeLabelModel,
   Point,
   Rect,
@@ -832,25 +831,21 @@ export default class BpmnPopupSupport {
  * Adds options to the given combo box for the content of the enum type.
  */
 function populateComboBox(comboBox: HTMLSelectElement, enumType: Class): void {
-  getEnumNames(enumType).forEach(name => {
+  Enum.getValueNames(enumType).forEach(name => {
     const option = document.createElement('option')
-    option.innerHTML = name
+    option.innerText = getFriendlyName(name)
+    option.value = name
     comboBox.options.add(option)
   })
 }
 
-/**
- * Returns a list containing all values of the given enum type.
- */
-function getEnumNames(enumType: Class): IEnumerable<string> {
-  // get all numeric values of the enum type...
-  const values = Enum.getValues(enumType)
-  const nameList = new List<string>()
-  for (let i = 0; i < values.length; i++) {
-    const value = values[i]
-    // ... convert the numeric value in the enum value name and add it to the list of enum value names
-    // @ts-ignore
-    nameList.insert(0, Enum.getName(enumType, value))
-  }
-  return nameList
+/** Returns a readable name for all-caps enum constants. */
+function getFriendlyName(name: string) {
+  // First character in uppercase
+  let result = name.substring(0, 1) + name.substring(1).toLowerCase()
+  // Dashes where necessary
+  result = result.replace(/(sub|non)_/g, '$1-')
+  // Replace underscores with spaces
+  result = result.replace(/_/g, ' ')
+  return result
 }

demos/complete/bpmn/index.html

@@ -199,18 +199,18 @@ <h2>Things to Try</h2>
     <button data-command="PreviousSample" title="Open previous sample" id="previousButton"
         class="demo-icon-yIconPrevious" disabled></button>
     <select data-command="SampleSelectionChanged" title="Select a sample graph" id="SampleComboBox">
-      <option>Business</option>
-      <option>Collaboration</option>
-      <option>Different Exception Flows</option>
-      <option>Expanded Subprocess</option>
-      <option>Lanes Segment</option>
-      <option>Lanes With Information Systems</option>
-      <option>Matrix Lanes</option>
-      <option>Process Normal Flow</option>
-      <option>Project Application</option>
-      <option>Simple BPMN Model</option>
-      <option>Vertical Swimlanes</option>
-      <option>BPMN DI Sample</option>
+      <option value="business">Business</option>
+      <option value="collaboration">Collaboration</option>
+      <option value="different_exception_flows">Different Exception Flows</option>
+      <option value="expanded_subprocess">Expanded Subprocess</option>
+      <option value="lanes_segment">Lanes Segment</option>
+      <option value="lanes_with_information_systems">Lanes With Information Systems</option>
+      <option value="matrix_lanes">Matrix Lanes</option>
+      <option value="process_normal_flow">Process Normal Flow</option>
+      <option value="project_application">Project Application</option>
+      <option value="simple_bpmn_model">Simple BPMN Model</option>
+      <option value="vertical_swimlanes">Vertical Swimlanes</option>
+      <option value="bpmn_di_sample" data-type="bpmn-di">BPMN DI Sample</option>
     </select>
     <button data-command="NextSample" title="Open next sample" id="nextButton"
         class="demo-icon-yIconNext"></button>

demos/complete/collapse/CollapseDemo.js

@@ -232,16 +232,16 @@ function newHierarchicLayout() {
 function newLayoutAlgorithm(algorithmName) {
   let algorithm
   switch (algorithmName) {
-    case 'Tree':
+    case 'tree':
       algorithm = newTreeLayout()
       break
-    case 'Balloon':
+    case 'balloon':
       algorithm = newBalloonLayout()
       break
-    case 'Organic':
+    case 'organic':
       algorithm = newOrganicLayout()
       break
-    case 'Hierarchic':
+    case 'hierarchic':
       algorithm = newHierarchicLayout()
       break
     default:

demos/complete/collapse/CollapseDemo.ts

@@ -223,16 +223,16 @@ function newHierarchicLayout(): HierarchicLayout {
 function newLayoutAlgorithm(algorithmName: string): ILayoutAlgorithm {
   let algorithm: MultiStageLayout
   switch (algorithmName) {
-    case 'Tree':
+    case 'tree':
       algorithm = newTreeLayout()
       break
-    case 'Balloon':
+    case 'balloon':
       algorithm = newBalloonLayout()
       break
-    case 'Organic':
+    case 'organic':
       algorithm = newOrganicLayout()
       break
-    case 'Hierarchic':
+    case 'hierarchic':
       algorithm = newHierarchicLayout()
       break
     default:

demos/complete/collapse/index.html

@@ -133,10 +133,10 @@ <h2>Things to Try</h2>
     <span class="demo-separator"></span>
 
     <select data-command="SelectLayout" title="Choose a Layout" id="layoutComboBox">
-      <option>Tree</option>
-      <option>Balloon</option>
-      <option>Organic</option>
-      <option>Hierarchic</option>
+      <option value="tree">Tree</option>
+      <option value="balloon">Balloon</option>
+      <option value="organic">Organic</option>
+      <option value="hierarchic">Hierarchic</option>
     </select>
 
   </div>

demos/complete/flowchart/FlowchartDemo.js

@@ -279,9 +279,7 @@ function initializeGraphDefaults() {
  * @returns {!Promise}
  */
 async function loadGraph(sampleName) {
-  const sample =
-    FlowchartData[sampleName.replace('Sample: ', '').replace(' ', '')] ||
-    FlowchartData.ProblemSolving
+  const sample = FlowchartData[sampleName] || FlowchartData.ProblemSolving
 
   // clear the graph
   graphComponent.graph.clear()
@@ -375,33 +373,33 @@ async function updateGraph() {
   switch (select.selectedIndex) {
     default:
     case 0:
-      setComboboxValue('select-positive-branch-direction', 'Undefined')
-      setComboboxValue('select-negative-branch-direction', 'Undefined')
-      setComboboxValue('select-in-edge-grouping', 'Optimized')
+      setComboboxValue('select-positive-branch-direction', 'undefined')
+      setComboboxValue('select-negative-branch-direction', 'undefined')
+      setComboboxValue('select-in-edge-grouping', 'optimized')
       allowFlatwiseEdges.checked = true
       break
     case 1:
-      setComboboxValue('select-positive-branch-direction', 'Same As Flow')
-      setComboboxValue('select-negative-branch-direction', 'Left In Flow')
-      setComboboxValue('select-in-edge-grouping', 'Optimized')
+      setComboboxValue('select-positive-branch-direction', 'same-as-flow')
+      setComboboxValue('select-negative-branch-direction', 'left-in-flow')
+      setComboboxValue('select-in-edge-grouping', 'optimized')
       allowFlatwiseEdges.checked = true
       break
     case 2:
-      setComboboxValue('select-positive-branch-direction', 'Same As Flow')
-      setComboboxValue('select-negative-branch-direction', 'Flatwise')
-      setComboboxValue('select-in-edge-grouping', 'Optimized')
+      setComboboxValue('select-positive-branch-direction', 'same-as-flow')
+      setComboboxValue('select-negative-branch-direction', 'flatwise')
+      setComboboxValue('select-in-edge-grouping', 'optimized')
       allowFlatwiseEdges.checked = true
       break
     case 3:
-      setComboboxValue('select-positive-branch-direction', 'Same As Flow')
-      setComboboxValue('select-negative-branch-direction', 'Flatwise')
-      setComboboxValue('select-in-edge-grouping', 'Optimized')
+      setComboboxValue('select-positive-branch-direction', 'same-as-flow')
+      setComboboxValue('select-negative-branch-direction', 'flatwise')
+      setComboboxValue('select-in-edge-grouping', 'optimized')
       allowFlatwiseEdges.checked = true
       break
     case 4:
-      setComboboxValue('select-positive-branch-direction', 'Flatwise')
-      setComboboxValue('select-negative-branch-direction', 'Flatwise')
-      setComboboxValue('select-in-edge-grouping', 'None')
+      setComboboxValue('select-positive-branch-direction', 'flatwise')
+      setComboboxValue('select-negative-branch-direction', 'flatwise')
+      setComboboxValue('select-in-edge-grouping', 'none')
       allowFlatwiseEdges.checked = false
       break
   }