yFiles for HTML 2.5.0.1 demos

demos/03-tutorial-application-features/markup-labels/SampleApplication.js

@@ -160,8 +160,8 @@ function createGraph(graph) {
       '<p><strong><code>&lt;u&gt;</code></strong>: <u>Underline text</u></p>\n' +
       '<p><strong><code>&lt;h1&gt;-&lt;h6&gt;</code></strong>: Heading 1-6</p>\n' +
       '<p><strong><code>&lt;p&gt;</code></strong>: A paragraph element.</p>\n' +
-      '<p><strong><code>&lt;pre&gt;</code></strong>: A preformatted element which preserves newlines.</p>\n' +
-      '<p><strong><code>&lt;code&gt;</code></strong>: A code element.</p>\n' +
+      '<p><strong><code>&lt;pre&gt;</code></strong>:</p><pre>A preformatted element\n    which preserves newlines and whitespaces.</pre>\n' +
+      '<p><strong><code>&lt;code&gt;</code></strong>: <code>A code element</code></p>\n' +
       '<p><strong><code>&lt;small&gt;</code></strong>: <small>Small font-size</small></p>\n' +
       '<p><strong><code>&lt;large&gt;</code></strong>: <large>Large font-size</large></p>\n' +
       '<p><strong><code>&lt;[html color name]&gt;</code></strong>: Colored text, e.g. <blue>&lt;blue&gt;</blue></p>'

demos/03-tutorial-application-features/markup-labels/SampleApplication.ts

@@ -158,8 +158,8 @@ function createGraph(graph: IGraph): void {
       '<p><strong><code>&lt;u&gt;</code></strong>: <u>Underline text</u></p>\n' +
       '<p><strong><code>&lt;h1&gt;-&lt;h6&gt;</code></strong>: Heading 1-6</p>\n' +
       '<p><strong><code>&lt;p&gt;</code></strong>: A paragraph element.</p>\n' +
-      '<p><strong><code>&lt;pre&gt;</code></strong>: A preformatted element which preserves newlines.</p>\n' +
-      '<p><strong><code>&lt;code&gt;</code></strong>: A code element.</p>\n' +
+      '<p><strong><code>&lt;pre&gt;</code></strong>:</p><pre>A preformatted element\n    which preserves newlines and whitespaces.</pre>\n' +
+      '<p><strong><code>&lt;code&gt;</code></strong>: <code>A code element</code></p>\n' +
       '<p><strong><code>&lt;small&gt;</code></strong>: <small>Small font-size</small></p>\n' +
       '<p><strong><code>&lt;large&gt;</code></strong>: <large>Large font-size</large></p>\n' +
       '<p><strong><code>&lt;[html color name]&gt;</code></strong>: Colored text, e.g. <blue>&lt;blue&gt;</blue></p>'

demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.js

@@ -44,7 +44,8 @@ import {
   Size,
   WebGL2FocusIndicatorManager,
   WebGL2GraphModelManager,
-  WebGL2SelectionIndicatorManager
+  WebGL2SelectionIndicatorManager,
+  Workarounds
 } from 'yfiles'
 
 import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
@@ -101,6 +102,11 @@ function enableWebGLRendering(graphComponent) {
   graphComponent.graphModelManager = new WebGL2GraphModelManager()
   graphComponent.selectionIndicatorManager = new WebGL2SelectionIndicatorManager()
   graphComponent.focusIndicatorManager = new WebGL2FocusIndicatorManager()
+
+  // Optional: precompile the selection shaders
+  // This has the effect that the selection is not rendered with a simple fallback style
+  // the first time an element is selected, at the cost of initial load time
+  Workarounds.precompileWebGLSelectionShaders = true
 }
 
 /**

demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.ts

@@ -44,7 +44,8 @@ import {
   Size,
   WebGL2FocusIndicatorManager,
   WebGL2GraphModelManager,
-  WebGL2SelectionIndicatorManager
+  WebGL2SelectionIndicatorManager,
+  Workarounds
 } from 'yfiles'
 
 import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
@@ -99,6 +100,11 @@ function enableWebGLRendering(graphComponent: GraphComponent) {
   graphComponent.graphModelManager = new WebGL2GraphModelManager()
   graphComponent.selectionIndicatorManager = new WebGL2SelectionIndicatorManager()
   graphComponent.focusIndicatorManager = new WebGL2FocusIndicatorManager()
+
+  // Optional: precompile the selection shaders
+  // This has the effect that the selection is not rendered with a simple fallback style
+  // the first time an element is selected, at the cost of initial load time
+  Workarounds.precompileWebGLSelectionShaders = true
 }
 
 /**

demos/04-tutorial-layout-features/compact-disk-groups/README.md

@@ -18,7 +18,7 @@ The content of each group is arranged in a compact, circular way by [CompactDisk
 
 ### Code Snippet
 
-You can copy the code snippet to configure the layout from [GitHub](https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/04-tutorial-layout-features/compact-disk/CompactDiskGroups.ts).
+You can copy the code snippet to configure the layout from [GitHub](https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/04-tutorial-layout-features/compact-disk-groups/CompactDiskGroups.ts).
 
 ### Documentation
 

demos/04-tutorial-layout-features/compact-disk-groups/index.html

@@ -75,7 +75,7 @@ <h3>Code Snippet</h3>
         <p>
           You can copy the code snippet to configure the layout from
           <a
-            href="https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/04-tutorial-layout-features/compact-disk/CompactDiskGroups.ts"
+            href="https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/04-tutorial-layout-features/compact-disk-groups/CompactDiskGroups.ts"
             target="_blank"
             >GitHub</a
           >.

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.5</a> demo applications are available in
+              The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.5.0.1</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.5-->
+<!--Created by yFiles for HTML 2.5.0.1-->
 <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/bpmn/bpmn-view.js

@@ -10744,60 +10744,59 @@ export class EventPortStyle extends BaseClass(IPortStyle) {
    */
   constructor() {
     super()
-    this._nodeStyle = new EventNodeStyle()
-    this._nodeStyle.characteristic = EventCharacteristic.BOUNDARY_INTERRUPTING
-    this._nodeStyle.type = EventType.COMPENSATION
-    const nodeStylePortStyleAdapter = new NodeStylePortStyleAdapter(this._nodeStyle)
-    nodeStylePortStyleAdapter.renderSize = BPMN_CONSTANTS_SIZES_EVENT_PORT
-    this._adapter = nodeStylePortStyleAdapter
+    const eventNodeStyle = new EventNodeStyle()
+    eventNodeStyle.characteristic = EventCharacteristic.BOUNDARY_INTERRUPTING
+    eventNodeStyle.type = EventType.COMPENSATION
+    this._nodeStyle = eventNodeStyle
+    this._renderSize = BPMN_CONSTANTS_SIZES_EVENT_PORT
   }
 
   /**
    * Gets the event type for this style.
    * @type {number}
    */
   get type() {
-    return this.eventNodeStyle.type
+    return this._nodeStyle.type
   }
 
   /**
    * Sets the event type for this style.
    * @type {number}
    */
   set type(value) {
-    this.eventNodeStyle.type = value
+    this._nodeStyle.type = value
   }
 
   /**
    * Gets the event characteristic for this style.
    * @type {number}
    */
   get characteristic() {
-    return this.eventNodeStyle.characteristic
+    return this._nodeStyle.characteristic
   }
 
   /**
    * Sets the event characteristic for this style.
    * @type {number}
    */
   set characteristic(value) {
-    this.eventNodeStyle.characteristic = value
+    this._nodeStyle.characteristic = value
   }
 
   /**
    * Gets the size the port style is rendered with.
    * @type {!Size}
    */
   get renderSize() {
-    return this._adapter.renderSize
+    return this._renderSize
   }
 
   /**
    * Sets the size the port style is rendered with.
    * @type {!Size}
    */
   set renderSize(value) {
-    this._adapter.renderSize = value
+    this._renderSize = value
   }
 
   /**
@@ -10860,14 +10859,7 @@ export class EventPortStyle extends BaseClass(IPortStyle) {
    * @type {!EventNodeStyle}
    */
   get eventNodeStyle() {
-    return this._adapter.nodeStyle
-  }
-
-  /**
-   * @type {!NodeStylePortStyleAdapter}
-   */
-  get adapter() {
-    return this._adapter
+    return this._nodeStyle
   }
 
   /**
@@ -10876,7 +10868,9 @@ export class EventPortStyle extends BaseClass(IPortStyle) {
    * @see Specified by {@link ICloneable.clone}.
    */
   clone() {
-    return this.memberwiseClone()
+    const clone = this.memberwiseClone()
+    clone._nodeStyle = this._nodeStyle.clone()
+    return clone
   }
 
   /**
@@ -10898,6 +10892,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
   constructor() {
     super()
     this.fallbackLookup = null
+    this._adapter = new NodeStylePortStyleAdapter()
   }
 
   /**
@@ -10914,7 +10909,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
    * @see Specified by {@link IPortStyleRenderer.getVisualCreator}.
    */
   getVisualCreator(port, style) {
-    const adapter = style.adapter
+    const adapter = this.getConfiguredAdapter(style)
     return adapter.renderer.getVisualCreator(port, adapter)
   }
 
@@ -10930,7 +10925,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
    * @see Specified by {@link IPortStyleRenderer.getBoundsProvider}.
    */
   getBoundsProvider(port, style) {
-    const adapter = style.adapter
+    const adapter = this.getConfiguredAdapter(style)
     return adapter.renderer.getBoundsProvider(port, adapter)
   }
 
@@ -10946,7 +10941,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
    * @see Specified by {@link IPortStyleRenderer.getVisibilityTestable}.
    */
   getVisibilityTestable(port, style) {
-    const adapter = style.adapter
+    const adapter = this.getConfiguredAdapter(style)
     return adapter.renderer.getVisibilityTestable(port, adapter)
   }
 
@@ -10963,7 +10958,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
    * @see Specified by {@link IPortStyleRenderer.getHitTestable}.
    */
   getHitTestable(port, style) {
-    const adapter = style.adapter
+    const adapter = this.getConfiguredAdapter(style)
     return adapter.renderer.getHitTestable(port, adapter)
   }
 
@@ -10979,7 +10974,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
    * @see Specified by {@link IPortStyleRenderer.getMarqueeTestable}.
    */
   getMarqueeTestable(port, style) {
-    const adapter = style.adapter
+    const adapter = this.getConfiguredAdapter(style)
     return adapter.renderer.getMarqueeTestable(port, adapter)
   }
 
@@ -10994,7 +10989,7 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
    * @see Specified by {@link IPortStyleRenderer.getContext}.
    */
   getContext(port, style) {
-    const adapter = style.adapter
+    const adapter = this.getConfiguredAdapter(style)
     this.fallbackLookup = adapter.renderer.getContext(port, adapter)
     return this
   }
@@ -11021,6 +11016,17 @@ class EventPortStyleRenderer extends BaseClass(IPortStyleRenderer, ILookup) {
     return this.fallbackLookup ? this.fallbackLookup.lookup(type) : null
   }
 
+  /**
+   * @param {!EventPortStyle} style
+   * @returns {!IPortStyle}
+   */
+  getConfiguredAdapter(style) {
+    const adapter = this._adapter
+    adapter.nodeStyle = style.eventNodeStyle
+    adapter.renderSize = style.renderSize
+    return adapter
+  }
+
   /**
    * @type {!EventPortStyleRenderer}
    */