diff --git a/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.js b/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.js
index e49982d16..d370f1c1d 100644
--- a/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.js
+++ b/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.js
@@ -30,8 +30,6 @@ import { ExteriorLabelModel, GraphComponent, License } from 'yfiles'
import { fetchLicense } from '../../resources/fetch-license.js'
-import { enableWorkarounds } from '../../utils/Workarounds.js'
-
/**
* @returns {!Promise}
*/
@@ -47,6 +45,5 @@ async function run() {
graphComponent.fitGraphBounds()
}
-enableWorkarounds()
// noinspection JSIgnoredPromiseFromCall
run()
diff --git a/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.ts b/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.ts
index ab6cd37ff..c74b197d2 100644
--- a/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.ts
+++ b/demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.ts
@@ -30,8 +30,6 @@ import { ExteriorLabelModel, GraphComponent, License } from 'yfiles'
import { fetchLicense } from '../../resources/fetch-license'
-import { enableWorkarounds } from '../../utils/Workarounds'
-
async function run(): Promise {
License.value = await fetchLicense()
@@ -44,6 +42,5 @@ async function run(): Promise {
graphComponent.fitGraphBounds()
}
-enableWorkarounds()
// noinspection JSIgnoredPromiseFromCall
run()
diff --git a/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.js b/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.js
index 56cc595d1..a232207cf 100644
--- a/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.js
+++ b/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.js
@@ -54,7 +54,7 @@ import {
ToolTipQueryEventArgs
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { fetchLicense } from '../../resources/fetch-license.js'
diff --git a/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.ts b/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.ts
index 06adf6946..4c6f13787 100644
--- a/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.ts
+++ b/demos/01-tutorial-getting-started/09-data-binding/SampleApplication.ts
@@ -54,7 +54,7 @@ import {
ToolTipQueryEventArgs
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu'
+import { ContextMenu } from '../../utils/ContextMenu'
import { bindCommand, showApp } from '../../resources/demo-app'
import { fetchLicense } from '../../resources/fetch-license'
diff --git a/demos/01-tutorial-getting-started/10-layout/SampleApplication.js b/demos/01-tutorial-getting-started/10-layout/SampleApplication.js
index 4a34b79cb..427981a32 100644
--- a/demos/01-tutorial-getting-started/10-layout/SampleApplication.js
+++ b/demos/01-tutorial-getting-started/10-layout/SampleApplication.js
@@ -57,8 +57,8 @@ import {
ToolTipQueryEventArgs
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu.js'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app.js'
import GraphBuilderData from './resources/graph.js'
import { fetchLicense } from '../../resources/fetch-license.js'
@@ -140,13 +140,7 @@ async function runLayout() {
easedAnimation: true
})
} catch (error) {
- // this is just for the purpose of the demo - usually you would employ your own
- // logging or error handling logic, here
- if (typeof window.reportError === 'function') {
- window.reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutButton.disabled = false
}
diff --git a/demos/01-tutorial-getting-started/10-layout/SampleApplication.ts b/demos/01-tutorial-getting-started/10-layout/SampleApplication.ts
index e95ea1e5e..4d1a85166 100644
--- a/demos/01-tutorial-getting-started/10-layout/SampleApplication.ts
+++ b/demos/01-tutorial-getting-started/10-layout/SampleApplication.ts
@@ -58,8 +58,8 @@ import {
ToolTipQueryEventArgs
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
+import { ContextMenu } from '../../utils/ContextMenu'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app'
import GraphBuilderData from './resources/graph'
import { fetchLicense } from '../../resources/fetch-license'
@@ -137,14 +137,7 @@ async function runLayout(): Promise {
easedAnimation: true
})
} catch (error) {
- // this is just for the purpose of the demo - usually you would employ your own
- // logging or error handling logic, here
- if (typeof (window as any).reportError === 'function') {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call
- ;(window as any).reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutButton.disabled = false
}
diff --git a/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.js b/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.js
index 1787259d5..4d3da51d8 100644
--- a/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.js
+++ b/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.js
@@ -54,7 +54,7 @@ import {
Size
} from 'yfiles'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app.js'
import GraphBuilderData from './resources/graph.js'
import { fetchLicense } from '../../resources/fetch-license.js'
@@ -137,13 +137,7 @@ async function runLayout() {
easedAnimation: true
})
} catch (error) {
- // this is just for the purpose of the demo - usually you would employ your own
- // logging or error handling logic, here
- if (typeof window.reportError === 'function') {
- window.reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutButton.disabled = false
}
diff --git a/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.ts b/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.ts
index a5abea747..dbac368ba 100644
--- a/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.ts
+++ b/demos/01-tutorial-getting-started/11-layout-data/SampleApplication.ts
@@ -55,7 +55,7 @@ import {
Size
} from 'yfiles'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app'
import GraphBuilderData from './resources/graph'
import { fetchLicense } from '../../resources/fetch-license'
@@ -134,14 +134,7 @@ async function runLayout(): Promise {
easedAnimation: true
})
} catch (error) {
- // this is just for the purpose of the demo - usually you would employ your own
- // logging or error handling logic, here
- if (typeof (window as any).reportError === 'function') {
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call
- ;(window as any).reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutButton.disabled = false
}
diff --git a/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.js b/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.js
index 5c5dd4712..948d070f4 100644
--- a/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.js
+++ b/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.js
@@ -59,7 +59,7 @@ import {
ToolTipQueryEventArgs
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
import GraphBuilderData from './resources/graph.js'
import { fetchLicense } from '../../resources/fetch-license.js'
diff --git a/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.ts b/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.ts
index 3422b0f37..89d71b595 100644
--- a/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.ts
+++ b/demos/01-tutorial-getting-started/12-graph-analysis/SampleApplication.ts
@@ -60,7 +60,7 @@ import {
ToolTipQueryEventArgs
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu'
+import { ContextMenu } from '../../utils/ContextMenu'
import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
import GraphBuilderData from './resources/graph'
import { fetchLicense } from '../../resources/fetch-license'
diff --git a/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.js
index 327fd14c7..61ecf410b 100644
--- a/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.js
@@ -41,7 +41,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.ts
index 5464174e2..2533264d3 100644
--- a/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/01-custom-node-style/MySimpleNodeStyle.ts
@@ -41,7 +41,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.js b/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.js
index 13bb46080..2520c1ed4 100644
--- a/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.ts b/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.ts
index 2d34ba6bc..4ce502eac 100644
--- a/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/01-custom-node-style/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.js
index 0c65382eb..87c739f39 100644
--- a/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.js
@@ -42,7 +42,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.ts
index ed053b93b..c622ad2d0 100644
--- a/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/02-node-color/MySimpleNodeStyle.ts
@@ -42,7 +42,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.js b/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.js
index 2d96838a4..837038e82 100644
--- a/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.ts b/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.ts
index 8cdb24df7..7508c3adb 100644
--- a/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/02-node-color/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.js
index 75e63462c..54084d17e 100644
--- a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.js
@@ -45,7 +45,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.ts
index 072cc59a9..50a3ca722 100644
--- a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/MySimpleNodeStyle.ts
@@ -46,7 +46,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.js b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.js
index 71386d26c..48fad90a7 100644
--- a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.js
@@ -45,7 +45,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.ts b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.ts
index 3ed53bbdd..6ec9d450e 100644
--- a/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/03-update-visual-and-render-data-cache/SampleApplication.ts
@@ -45,7 +45,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.js
index bd19a4730..7f7c89603 100644
--- a/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.js
@@ -45,7 +45,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.ts
index 9e96c23c3..242ed1914 100644
--- a/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/04-is-inside/MySimpleNodeStyle.ts
@@ -46,7 +46,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.js b/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.js
index e18301309..1ec819f39 100644
--- a/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.ts b/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.ts
index c865f8b80..68df95566 100644
--- a/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/04-is-inside/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.js
index f1b462f63..2f3ff4038 100644
--- a/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.js
@@ -47,7 +47,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.ts
index 667e841a7..b92e63ad7 100644
--- a/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/05-hit-test/MySimpleNodeStyle.ts
@@ -48,7 +48,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.js b/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.js
index e18301309..1ec819f39 100644
--- a/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.ts b/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.ts
index c865f8b80..68df95566 100644
--- a/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/05-hit-test/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.js
index 4af5f5bf4..2f81343f8 100644
--- a/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.js
@@ -47,7 +47,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.ts
index 8e98438b3..4490886b7 100644
--- a/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/06-get-bounds/MySimpleNodeStyle.ts
@@ -48,7 +48,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.js b/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.js
index e18301309..1ec819f39 100644
--- a/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.ts b/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.ts
index c865f8b80..68df95566 100644
--- a/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/06-get-bounds/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.js
index 8c0a78a73..64f17db4d 100644
--- a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.js
@@ -50,7 +50,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.ts
index 92b66d931..7c46eaf4e 100644
--- a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/MySimpleNodeStyle.ts
@@ -51,7 +51,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.js b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.js
index e18301309..1ec819f39 100644
--- a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.ts b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.ts
index c865f8b80..68df95566 100644
--- a/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/07-drop-shadow-performance/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.js
index a78fb3547..2dc3ab8b7 100644
--- a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.ts
index 10c24a7b7..d9c73eab6 100644
--- a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.js b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.js
index e18301309..1ec819f39 100644
--- a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.js
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.ts b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.ts
index c865f8b80..68df95566 100644
--- a/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/08-edge-from-node-to-label/SampleApplication.ts
@@ -42,7 +42,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.js
index ba58d4a1b..6f1c5c849 100644
--- a/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.ts
index 89842220a..1e71ea9a6 100644
--- a/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/09-is-visible/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.js b/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.js
index fd19d5d06..edae28c3d 100644
--- a/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.js
@@ -41,7 +41,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.ts b/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.ts
index 2cd4f2a53..2e0e11d20 100644
--- a/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/09-is-visible/SampleApplication.ts
@@ -41,7 +41,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.js
index a429d5fa4..7b21d4222 100644
--- a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.js
@@ -42,7 +42,7 @@ import {
* This class is an example for a custom style based on the {@link LabelStyleBase}.
* The font for the label text can be set. The label text is drawn with black letters inside a blue rounded rectangle.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.ts
index 4e4b9408a..d2cfb051a 100644
--- a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleLabelStyle.ts
@@ -43,7 +43,7 @@ import {
* This class is an example for a custom style based on the {@link LabelStyleBase}.
* The font for the label text can be set. The label text is drawn with black letters inside a blue rounded rectangle.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.js
index abc71707f..fc16eaa90 100644
--- a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.ts
index ce6661827..a0542d9d1 100644
--- a/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/10-custom-label-style/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.js b/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.js
index 43d61f717..3584436ab 100644
--- a/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.js
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.ts b/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.ts
index 390528644..f70b71a1b 100644
--- a/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/10-custom-label-style/SampleApplication.ts
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.js
index 442e32063..ae7d23688 100644
--- a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.js
@@ -45,7 +45,7 @@ const VERTICAL_INSET = 2
* This class is an example for a custom style based on the {@link LabelStyleBase}.
* The font for the label text can be set. The label text is drawn with black letters inside a blue rounded rectangle.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.ts
index cea16c9f4..4194b9274 100644
--- a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleLabelStyle.ts
@@ -46,7 +46,7 @@ const VERTICAL_INSET = 2
* This class is an example for a custom style based on the {@link LabelStyleBase}.
* The font for the label text can be set. The label text is drawn with black letters inside a blue rounded rectangle.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.js
index abc71707f..fc16eaa90 100644
--- a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.ts
index ce6661827..a0542d9d1 100644
--- a/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/11-label-preferred-size/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.js b/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.js
index 43d61f717..3584436ab 100644
--- a/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.js
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.ts b/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.ts
index 390528644..f70b71a1b 100644
--- a/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/11-label-preferred-size/SampleApplication.ts
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.js
index 5a6c8d7e7..82ac82c22 100644
--- a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.js
@@ -45,7 +45,7 @@ const VERTICAL_INSET = 2
* This class is an example for a custom style based on the {@link LabelStyleBase}.
* The font for the label text can be set. The label text is drawn with black letters inside a blue rounded rectangle.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.ts
index 39ffc387e..ce803930c 100644
--- a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleLabelStyle.ts
@@ -46,7 +46,7 @@ const VERTICAL_INSET = 2
* This class is an example for a custom style based on the {@link LabelStyleBase}.
* The font for the label text can be set. The label text is drawn with black letters inside a blue rounded rectangle.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.js
index abc71707f..fc16eaa90 100644
--- a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.ts
index ce6661827..a0542d9d1 100644
--- a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.js b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.js
index 43d61f717..3584436ab 100644
--- a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.js
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.ts b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.ts
index 390528644..f70b71a1b 100644
--- a/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/12-high-performance-label-rendering/SampleApplication.ts
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.js
index ccbbbd669..51d4d588f 100644
--- a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.ts
index 3adb491db..9f08c9e67 100644
--- a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.js
index abc71707f..fc16eaa90 100644
--- a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.ts
index ce6661827..a0542d9d1 100644
--- a/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/13-label-edit-button/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.js b/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.js
index 43d61f717..3584436ab 100644
--- a/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.js
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.ts b/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.ts
index 390528644..f70b71a1b 100644
--- a/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/13-label-edit-button/SampleApplication.ts
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.js
index 34b78f8a3..d1dae1156 100644
--- a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.ts
index 0d6efcef3..0ae46079c 100644
--- a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.js
index abc71707f..fc16eaa90 100644
--- a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.ts
index ce6661827..a0542d9d1 100644
--- a/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/14-button-visibility/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.js b/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.js
index 43d61f717..3584436ab 100644
--- a/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.js
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.ts b/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.ts
index 390528644..f70b71a1b 100644
--- a/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/14-button-visibility/SampleApplication.ts
@@ -41,8 +41,8 @@ import {
Size
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.js
index abc71707f..fc16eaa90 100644
--- a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.js
@@ -55,7 +55,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.ts
index ce6661827..a0542d9d1 100644
--- a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/MySimpleNodeStyle.ts
@@ -56,7 +56,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.js b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.js
index 0c0541bcd..2e7dc7419 100644
--- a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.js
@@ -44,7 +44,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { BusinessObject, MySimpleLabelStyle } from './MySimpleLabelStyle.js'
diff --git a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.ts b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.ts
index 6caf04841..324cf965f 100644
--- a/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/15-using-data-in-label-tag/SampleApplication.ts
@@ -44,7 +44,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { BusinessObject, MySimpleLabelStyle } from './MySimpleLabelStyle'
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.js
index 6970da90e..125734b37 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.js
@@ -44,12 +44,11 @@ import {
Stroke,
SvgVisual
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.ts
index 27ce68548..7eda77dc7 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleEdgeStyle.ts
@@ -45,12 +45,12 @@ import {
Stroke,
SvgVisual
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: IArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.js
index e68913e6f..a21c41083 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.ts
index cdcdc2b7c..07a96866c 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.js b/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.js
index c8deb7f4b..c86b8f7b0 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.js
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.ts b/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.ts
index 88883cf5d..e61a7d7b7 100644
--- a/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/16-custom-edge-style/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.js
index 2a64ba41d..9d07138c3 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.js
@@ -46,12 +46,11 @@ import {
Stroke,
SvgVisual
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.ts
index 63a7540b4..bd5cdbc9a 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleEdgeStyle.ts
@@ -47,12 +47,12 @@ import {
Stroke,
SvgVisual
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: IArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.ts
index 4ac68bdef..a921ca0a0 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.js
index 58d7a0f42..a95562fe2 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.js
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.ts
index 39405caf1..b78b7e9e7 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/MySimpleNodeStyle.ts
@@ -52,14 +52,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.js b/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.js
index d67ceead7..0e12f8f5d 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.js
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.ts b/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.ts
index 13c7fcc7e..a3aac25f5 100644
--- a/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/17-edge-hit-test/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.js
index efd4889b3..8054f9752 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.js
@@ -46,12 +46,11 @@ import {
Stroke,
SvgVisual
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.ts
index 98d9934ae..7a963c12d 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleEdgeStyle.ts
@@ -47,12 +47,12 @@ import {
Stroke,
SvgVisual
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: IArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.js
index 08a2a7a69..3b86c1f64 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.js
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.ts
index 45af4cdc9..17cce5d29 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/MySimpleNodeStyle.ts
@@ -52,14 +52,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.js b/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.js
index aa449ec56..0d87ce6e5 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.js
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.ts b/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.ts
index 56de33372..532971a6f 100644
--- a/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/18-edge-cropping/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.js
index 846232bb8..54210023b 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.js
@@ -49,12 +49,11 @@ import {
} from 'yfiles'
import AnimatedLinearGradientFill from './AnimatedLinearGradientFill.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.ts
index 38a3b0343..e0e23ffb0 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleEdgeStyle.ts
@@ -50,12 +50,12 @@ import {
} from 'yfiles'
import AnimatedLinearGradientFill from './AnimatedLinearGradientFill'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: IArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.js
index f9676eac5..b489c2d61 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.ts
index 28b9e83a5..01cf8d54c 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.js
index 58d7a0f42..a95562fe2 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.js
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.ts
index aba710269..77b7d036f 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/MySimpleNodeStyle.ts
@@ -52,14 +52,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.js b/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.js
index f7d2d861d..6ff68ccfd 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.js
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.ts b/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.ts
index 3b1c11611..b7e863732 100644
--- a/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/19-animated-edge-selection/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.js b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.js
index 6a5731301..8f74c55e2 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.js
@@ -47,7 +47,7 @@ import {
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.ts
index fc0fd6acb..5eb8d85ed 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleArrow.ts
@@ -47,7 +47,7 @@ import {
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $arrowFigure: GeneralPath | null
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.js
index 1e7f257ae..bfc8a9e21 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.js
@@ -48,13 +48,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.ts
index a5289ed9f..7048d72e1 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleEdgeStyle.ts
@@ -49,13 +49,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.js
index 1ea3b1cd7..32e53f71e 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.ts
index b0ac1bdff..53280e3fb 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.js b/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.js
index aa449ec56..0d87ce6e5 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.js
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.ts b/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.ts
index 56de33372..532971a6f 100644
--- a/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/20-custom-arrow/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.js b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.js
index 3ac0561eb..9d0c1c121 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.js
@@ -48,7 +48,7 @@ import {
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.ts
index b2f4b3154..cda1a3906 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleArrow.ts
@@ -48,7 +48,7 @@ import {
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $arrowFigure: GeneralPath | null
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.js
index 821b88ee8..21fa228f0 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.js
@@ -48,13 +48,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.ts
index 7f5a301de..cf1df8da4 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleEdgeStyle.ts
@@ -49,13 +49,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.js
index 70a4fbc50..22caf1824 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.ts
index daba0072c..7f84c67f2 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.js b/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.js
index aa449ec56..0d87ce6e5 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.js
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.ts b/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.ts
index 56de33372..532971a6f 100644
--- a/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/21-edge-performance/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.js b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.js
index 3034092f4..1a3d4c281 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.ts
index ee0b1afb5..8371952cd 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.js
index 647baf8f7..a9385329d 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.js
@@ -48,13 +48,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.ts
index 839c3570c..3bc01e06e 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleEdgeStyle.ts
@@ -49,13 +49,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.js
index bb10ad7d7..f0488b14b 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.ts
index df4806f74..445d38de4 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.js b/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.js
index 718f1ff3b..b944d332d 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.js
@@ -38,9 +38,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.ts b/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.ts
index 7bb5dd1d8..2ca89e597 100644
--- a/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/22-arrow-thickness/SampleApplication.ts
@@ -38,9 +38,9 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.js b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.js
index 579971de6..6eb755d48 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.ts
index 2639011bc..7e202c5b2 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.js
index 5b2a6f73d..4489dcb11 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.js
@@ -48,13 +48,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.ts
index 2c2d2d304..1c18c9cf3 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleEdgeStyle.ts
@@ -49,13 +49,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.js
index 22c63043f..28a33fb7e 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.ts
index 2e1f458a2..ee4034a9e 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.js
index bb10ad7d7..f0488b14b 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.ts
index df4806f74..445d38de4 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.js b/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.js
index 4beb546f2..d55b9b889 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.js
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.js
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
/**
* @param {!IRenderContext} context
* @param {!IPort} port
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.ts b/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.ts
index 83f3f7d89..24f8ce03e 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.ts
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/MySimplePortStyle.ts
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
createVisual(context: IRenderContext, port: IPort): SvgVisual {
// create the ellipse
const ellipse = window.document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.js b/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.js
index 10824a303..67289d003 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.js
@@ -39,10 +39,10 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
-import MySimplePortStyle from './MySimplePortStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
+import { MySimplePortStyle } from './MySimplePortStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.ts b/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.ts
index dc585f851..9b5a17f8c 100644
--- a/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/23-custom-ports/SampleApplication.ts
@@ -39,10 +39,10 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
-import MySimplePortStyle from './MySimplePortStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
+import { MySimplePortStyle } from './MySimplePortStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.js b/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.js
index 1376f4626..f72badc37 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.js
@@ -49,7 +49,7 @@ import {
SvgVisualGroup
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A simple node style wrapper that takes a given node style and adds label edge rendering
@@ -63,7 +63,7 @@ import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
* {@link EdgeStyleBase}, {@link LabelStyleBase} and
* {@link PortStyleBase}.
*/
-export default class MyNodeStyleDecorator extends NodeStyleBase {
+export class MyNodeStyleDecorator extends NodeStyleBase {
/**
* Creates a new instance of this style using the given wrapped style.
* @param {!INodeStyle} wrappedStyle The style that is decorated by this instance.
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.ts b/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.ts
index 34283d6e6..5c0f6cc16 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MyNodeStyleDecorator.ts
@@ -50,7 +50,7 @@ import {
SvgVisualGroup
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple node style wrapper that takes a given node style and adds label edge rendering
@@ -64,7 +64,7 @@ import MySimpleEdgeStyle from './MySimpleEdgeStyle'
* {@link EdgeStyleBase}, {@link LabelStyleBase} and
* {@link PortStyleBase}.
*/
-export default class MyNodeStyleDecorator extends NodeStyleBase {
+export class MyNodeStyleDecorator extends NodeStyleBase {
wrapped: INodeStyle
/**
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.js b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.js
index 579971de6..6eb755d48 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.ts
index 8523bdde0..1f603afd6 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.js
index be6e44e88..02273a444 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.js
@@ -48,14 +48,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
-import MyNodeStyleDecorator from './MyNodeStyleDecorator.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
+import { MyNodeStyleDecorator } from './MyNodeStyleDecorator.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.ts
index f82849f8c..35d2cdefa 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleEdgeStyle.ts
@@ -49,14 +49,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
-import MyNodeStyleDecorator from './MyNodeStyleDecorator'
+import { MySimpleArrow } from './MySimpleArrow'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
+import { MyNodeStyleDecorator } from './MyNodeStyleDecorator'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.js
index 5872e9579..0ee567a05 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.js
@@ -51,7 +51,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.ts
index 0d8d9aba3..e80501adb 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimpleNodeStyle.ts
@@ -52,7 +52,7 @@ import {
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.js b/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.js
index 4beb546f2..d55b9b889 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.js
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
/**
* @param {!IRenderContext} context
* @param {!IPort} port
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.ts b/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.ts
index 83f3f7d89..24f8ce03e 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/MySimplePortStyle.ts
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
createVisual(context: IRenderContext, port: IPort): SvgVisual {
// create the ellipse
const ellipse = window.document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.js b/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.js
index 824758997..fa4c86ccc 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.js
@@ -39,11 +39,11 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
-import MyNodeStyleDecorator from './MyNodeStyleDecorator.js'
-import MySimplePortStyle from './MySimplePortStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
+import { MyNodeStyleDecorator } from './MyNodeStyleDecorator.js'
+import { MySimplePortStyle } from './MySimplePortStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.ts b/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.ts
index bfb21823c..807af432d 100644
--- a/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/24-style-decorator/SampleApplication.ts
@@ -39,11 +39,11 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
-import MyNodeStyleDecorator from './MyNodeStyleDecorator'
-import MySimplePortStyle from './MySimplePortStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
+import { MyNodeStyleDecorator } from './MyNodeStyleDecorator'
+import { MySimplePortStyle } from './MySimplePortStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.js
index d6341cb4f..728a7202f 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.js
@@ -45,7 +45,7 @@ import {
* group node. This implementation delegates the actual rendering of each
* state to a node style.
*/
-export default class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
+export class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
/**
* @param {!Size} size
*/
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.ts
index 3a679e857..b05ea06bf 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MyCollapsibleNodeStyleDecoratorRenderer.ts
@@ -45,7 +45,7 @@ import {
* group node. This implementation delegates the actual rendering of each
* state to a node style.
*/
-export default class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
+export class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
size: Size
expandedButtonStyle: ImageNodeStyle
collapsedButtonStyle: ImageNodeStyle
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.js
index fa9c5e1bb..a8cca719d 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.js
@@ -62,7 +62,7 @@ const INSET = 2
* this makes customizations easy. Additionally, it uses a couple of inner
* classes to customize certain aspects of the user interaction behavior.
*/
-export default class MyGroupNodeStyle extends NodeStyleBase {
+export class MyGroupNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0, 130, 180, 1)'
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.ts
index b07815f25..4effcf934 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MyGroupNodeStyle.ts
@@ -63,7 +63,7 @@ const INSET = 2
* this makes customizations easy. Additionally, it uses a couple of inner
* classes to customize certain aspects of the user interaction behavior.
*/
-export default class MyGroupNodeStyle extends NodeStyleBase {
+export class MyGroupNodeStyle extends NodeStyleBase {
private $nodeColor: string
constructor() {
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.js
index 579971de6..6eb755d48 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.ts
index 2639011bc..7e202c5b2 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.js
index c2412ccf7..609962acf 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.js
@@ -48,13 +48,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.ts
index 8f1781936..b3da9bf3c 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleEdgeStyle.ts
@@ -49,13 +49,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.js
index bb902e31c..bf1834c40 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.ts
index 5a0fbe1e7..0c00a8184 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.js b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.js
index 4beb546f2..d55b9b889 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.js
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
/**
* @param {!IRenderContext} context
* @param {!IPort} port
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.ts
index 83f3f7d89..24f8ce03e 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/MySimplePortStyle.ts
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
createVisual(context: IRenderContext, port: IPort): SvgVisual {
// create the ellipse
const ellipse = window.document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.js b/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.js
index 1724e7edf..81d441ce8 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.js
@@ -43,12 +43,12 @@ import {
Size
} from 'yfiles'
-import MyCollapsibleNodeStyleDecoratorRenderer from './MyCollapsibleNodeStyleDecoratorRenderer.js'
-import MyGroupNodeStyle from './MyGroupNodeStyle.js'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
-import MySimplePortStyle from './MySimplePortStyle.js'
+import { MyCollapsibleNodeStyleDecoratorRenderer } from './MyCollapsibleNodeStyleDecoratorRenderer.js'
+import { MyGroupNodeStyle } from './MyGroupNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
+import { MySimplePortStyle } from './MySimplePortStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.ts b/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.ts
index ebced8636..7590a1fa6 100644
--- a/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/25-custom-group-style/SampleApplication.ts
@@ -43,12 +43,12 @@ import {
Size
} from 'yfiles'
-import MyCollapsibleNodeStyleDecoratorRenderer from './MyCollapsibleNodeStyleDecoratorRenderer'
-import MyGroupNodeStyle from './MyGroupNodeStyle'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
-import MySimplePortStyle from './MySimplePortStyle'
+import { MyCollapsibleNodeStyleDecoratorRenderer } from './MyCollapsibleNodeStyleDecoratorRenderer'
+import { MyGroupNodeStyle } from './MyGroupNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
+import { MySimplePortStyle } from './MySimplePortStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.js
index d6341cb4f..728a7202f 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.js
@@ -45,7 +45,7 @@ import {
* group node. This implementation delegates the actual rendering of each
* state to a node style.
*/
-export default class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
+export class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
/**
* @param {!Size} size
*/
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.ts
index 3a679e857..b05ea06bf 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyCollapsibleNodeStyleDecoratorRenderer.ts
@@ -45,7 +45,7 @@ import {
* group node. This implementation delegates the actual rendering of each
* state to a node style.
*/
-export default class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
+export class MyCollapsibleNodeStyleDecoratorRenderer extends CollapsibleNodeStyleDecoratorRenderer {
size: Size
expandedButtonStyle: ImageNodeStyle
collapsedButtonStyle: ImageNodeStyle
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.js
index 41493fb26..86872ef80 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.js
@@ -67,7 +67,7 @@ const BUTTON_SIZE = 14
* this makes customizations easy. Additionally, it uses a couple of inner
* classes to customize certain aspects of the user interaction behavior.
*/
-export default class MyGroupNodeStyle extends NodeStyleBase {
+export class MyGroupNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0, 130, 180, 1)'
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.ts
index db153e698..844df82d9 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MyGroupNodeStyle.ts
@@ -68,7 +68,7 @@ const BUTTON_SIZE = 14
* this makes customizations easy. Additionally, it uses a couple of inner
* classes to customize certain aspects of the user interaction behavior.
*/
-export default class MyGroupNodeStyle extends NodeStyleBase {
+export class MyGroupNodeStyle extends NodeStyleBase {
private $nodeColor: string
constructor() {
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.js
index 579971de6..6eb755d48 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.ts
index 2639011bc..7e202c5b2 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.js
index 93287e591..a9f09db29 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.js
@@ -49,13 +49,12 @@ import {
} from 'yfiles'
import AnimatedLinearGradient from './AnimatedLinearGradient.js'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.ts
index f48cfc12c..16fba5b61 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleEdgeStyle.ts
@@ -50,13 +50,13 @@ import {
} from 'yfiles'
import AnimatedLinearGradient from './AnimatedLinearGradient'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.js
index a7a66e6d0..274ea2605 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.js
@@ -52,7 +52,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.ts
index 38443d683..6c94099f8 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleLabelStyle.ts
@@ -53,7 +53,7 @@ const BUTTON_SIZE = 16
* Also there is a customized button displayed in the label at certain zoom levels that enables editing of the label
* text.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
/**
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.js
index bb902e31c..bf1834c40 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.ts
index 5a0fbe1e7..0c00a8184 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.js
index 4beb546f2..d55b9b889 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.js
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
/**
* @param {!IRenderContext} context
* @param {!IPort} port
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.ts
index 83f3f7d89..24f8ce03e 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/MySimplePortStyle.ts
@@ -36,7 +36,7 @@ const HEIGHT = 4
* This class is an example of a custom port style based on the {@link PortStyleBase} class.
* The port is rendered as a circle.
*/
-export default class MySimplePortStyle extends PortStyleBase {
+export class MySimplePortStyle extends PortStyleBase {
createVisual(context: IRenderContext, port: IPort): SvgVisual {
// create the ellipse
const ellipse = window.document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.js b/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.js
index 6f6f56545..d0893b2ac 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.js
@@ -47,12 +47,12 @@ import {
Size
} from 'yfiles'
-import MyCollapsibleNodeStyleDecoratorRenderer from './MyCollapsibleNodeStyleDecoratorRenderer.js'
-import MyGroupNodeStyle from './MyGroupNodeStyle.js'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
-import MySimplePortStyle from './MySimplePortStyle.js'
+import { MyCollapsibleNodeStyleDecoratorRenderer } from './MyCollapsibleNodeStyleDecoratorRenderer.js'
+import { MyGroupNodeStyle } from './MyGroupNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
+import { MySimplePortStyle } from './MySimplePortStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.ts b/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.ts
index e587b43fd..bed57a72b 100644
--- a/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/26-custom-group-bounds/SampleApplication.ts
@@ -47,12 +47,12 @@ import {
Size
} from 'yfiles'
-import MyCollapsibleNodeStyleDecoratorRenderer from './MyCollapsibleNodeStyleDecoratorRenderer'
-import MyGroupNodeStyle from './MyGroupNodeStyle'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
-import MySimplePortStyle from './MySimplePortStyle'
+import { MyCollapsibleNodeStyleDecoratorRenderer } from './MyCollapsibleNodeStyleDecoratorRenderer'
+import { MyGroupNodeStyle } from './MyGroupNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
+import { MySimplePortStyle } from './MySimplePortStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.js b/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.js
index 3f32e11dc..71ed1db1f 100644
--- a/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.js
+++ b/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.js
@@ -31,7 +31,7 @@ import { CanvasComponent, HtmlCanvasVisual, IRectangle, IRenderContext } from 'y
/**
* Renders a circle with the given layout and color on a HTML5 Canvas.
*/
-export default class CircleVisual extends HtmlCanvasVisual {
+export class CircleVisual extends HtmlCanvasVisual {
/**
* Creates a new instance.
* @param {!IRectangle} layout The layout of the node to render.
diff --git a/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.ts b/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.ts
index effe329b8..bf258006d 100644
--- a/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.ts
+++ b/demos/02-tutorial-custom-styles/27-canvas-painting/CircleVisual.ts
@@ -31,7 +31,7 @@ import { CanvasComponent, HtmlCanvasVisual, IRectangle, IRenderContext } from 'y
/**
* Renders a circle with the given layout and color on a HTML5 Canvas.
*/
-export default class CircleVisual extends HtmlCanvasVisual {
+export class CircleVisual extends HtmlCanvasVisual {
layout: IRectangle
color: string
diff --git a/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.js
index e9ee0d607..28da6ecd6 100644
--- a/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.js
@@ -52,7 +52,7 @@ import {
Visual
} from 'yfiles'
-import CircleVisual from './CircleVisual.js'
+import { CircleVisual } from './CircleVisual.js'
const ZOOM_THRESHOLD = 0.8
@@ -61,7 +61,7 @@ const ZOOM_THRESHOLD = 0.8
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.ts
index 87a9b0716..dfb39ea07 100644
--- a/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/27-canvas-painting/MySimpleNodeStyle.ts
@@ -53,7 +53,7 @@ import {
Visual
} from 'yfiles'
-import CircleVisual from './CircleVisual'
+import { CircleVisual } from './CircleVisual'
const ZOOM_THRESHOLD = 0.8
@@ -62,7 +62,7 @@ const ZOOM_THRESHOLD = 0.8
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.js b/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.js
index 6dff6ff54..4db4a44b9 100644
--- a/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.js
@@ -39,7 +39,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.ts b/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.ts
index 7bbb6875f..730989d39 100644
--- a/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/27-canvas-painting/SampleApplication.ts
@@ -39,7 +39,7 @@ import {
Size
} from 'yfiles'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.js b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.js
index 579971de6..6eb755d48 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.ts
index 2750468f7..1a440ce93 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.js
index 55b89164b..1445831f0 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.js
@@ -51,13 +51,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.ts
index bd181151b..184218027 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleEdgeStyle.ts
@@ -52,13 +52,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.js
index 0ce794f93..b4913c4ee 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.ts
index ea08bc0fd..369d01809 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.js b/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.js
index 7e500173c..42b4461e5 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.js
@@ -37,8 +37,8 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.ts b/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.ts
index 80cf9f637..cd7a1e782 100644
--- a/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/28-bridge-support/SampleApplication.ts
@@ -37,8 +37,8 @@ import {
Size
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.js b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.js
index 579971de6..6eb755d48 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.js
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.js
@@ -44,12 +44,11 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
/**
* Initializes a new instance of the {@link MySimpleArrow} class.
*/
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.ts b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.ts
index 2639011bc..7e202c5b2 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.ts
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleArrow.ts
@@ -45,12 +45,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import type { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A simple IArrow implementation that renders the arrow as a custom filled shape.
*/
-export default class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
+export class MySimpleArrow extends BaseClass(IArrow, IVisualCreator, IBoundsProvider) {
anchor: Point
direction: Point
private $thickness: number
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.js b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.js
index fd65c5c59..455df07d6 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.js
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.js
@@ -48,13 +48,12 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleArrow } from './MySimpleArrow.js'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
/**
* Initializes a new instance of the {@link MySimpleEdgeStyle} class.
*/
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.ts b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.ts
index c6958648e..b7b6c71ed 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.ts
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleEdgeStyle.ts
@@ -49,13 +49,13 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleArrow from './MySimpleArrow'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleArrow } from './MySimpleArrow'
+import type { MySimpleNodeStyle } from './MySimpleNodeStyle'
/**
* This class is an example for a custom edge style based on {@link EdgeStyleBase}.
*/
-export default class MySimpleEdgeStyle extends EdgeStyleBase {
+export class MySimpleEdgeStyle extends EdgeStyleBase {
private $arrows: MySimpleArrow
private $pathThickness: number
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.js b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.js
index fe51160b2..37a5788a3 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.js
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.js
@@ -49,7 +49,7 @@ const VERTICAL_INSET = 2
* This implementation returns a fixed desired size without taking the actual text size into account.
* This is done to showcase the built-in line wrapping (trimming) feature of this style.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
/**
* Initializes a new instance of the {@link MySimpleLabelStyle} class using the "Arial" font.
*/
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.ts b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.ts
index d8518d15d..6f9cad794 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.ts
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleLabelStyle.ts
@@ -50,7 +50,7 @@ const VERTICAL_INSET = 2
* This implementation returns a fixed desired size without taking the actual text size into account.
* This is done to showcase the built-in line wrapping (trimming) feature of this style.
*/
-export default class MySimpleLabelStyle extends LabelStyleBase {
+export class MySimpleLabelStyle extends LabelStyleBase {
private $font: Font
private $wrapping: TextWrapping
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.js b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.js
index 0ce794f93..b4913c4ee 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.js
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.js
@@ -50,14 +50,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
constructor() {
super()
this.$nodeColor = 'rgba(0,130,180,1)'
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.ts b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.ts
index 0807b3eee..f685f6a48 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.ts
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/MySimpleNodeStyle.ts
@@ -51,14 +51,14 @@ import {
SvgVisual
} from 'yfiles'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
/**
* A very simple implementation of an {@link INodeStyle}
* that uses the convenience class {@link NodeStyleBase}
* as the base class.
*/
-export default class MySimpleNodeStyle extends NodeStyleBase {
+export class MySimpleNodeStyle extends NodeStyleBase {
private static $fillCounter: number
private $nodeColor: string
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.js b/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.js
index 37e165bb1..188a39414 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.js
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.js
@@ -39,9 +39,9 @@ import {
TextWrapping
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle.js'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle.js'
-import MySimpleNodeStyle from './MySimpleNodeStyle.js'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle.js'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle.js'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle.js'
import { bindCommand, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
diff --git a/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.ts b/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.ts
index 5a3eb84d1..8d24f022b 100644
--- a/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.ts
+++ b/demos/02-tutorial-custom-styles/29-label-line-wrapping/SampleApplication.ts
@@ -39,9 +39,9 @@ import {
TextWrapping
} from 'yfiles'
-import MySimpleLabelStyle from './MySimpleLabelStyle'
-import MySimpleEdgeStyle from './MySimpleEdgeStyle'
-import MySimpleNodeStyle from './MySimpleNodeStyle'
+import { MySimpleLabelStyle } from './MySimpleLabelStyle'
+import { MySimpleEdgeStyle } from './MySimpleEdgeStyle'
+import { MySimpleNodeStyle } from './MySimpleNodeStyle'
import { bindCommand, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
diff --git a/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.js b/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.js
index ec4fda307..29722ffdf 100644
--- a/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.js
+++ b/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.js
@@ -59,7 +59,7 @@ import {
removeClass,
showApp
} from '../../resources/demo-app.js'
-import { passiveSupported, pointerEventsSupported } from '../../utils/Workarounds.js'
+import { BrowserDetection } from '../../utils/BrowserDetection.js'
import {
applyDemoTheme,
createDemoShapeNodeStyle,
@@ -169,7 +169,7 @@ function addNodeVisual(style, panel) {
simpleNode, // The node that is dragged. This is used to provide a preview within the GC during the drag.
DragDropEffects.ALL, // The allowed actions for this drag.
true, // Whether to the cursor during the drag.
- pointerEventsSupported ? dragPreview : null // The optional preview element that is shown outside of the GC during the drag.
+ BrowserDetection.pointerEvents ? dragPreview : null // The optional preview element that is shown outside of the GC during the drag.
)
// Within the GraphComponent, it draws its own preview node. Therefore, we need to hide the additional
@@ -198,7 +198,7 @@ function addNodeVisual(style, panel) {
startDrag()
event.preventDefault()
},
- passiveSupported ? { passive: false } : false
+ BrowserDetection.passiveEventListeners ? { passive: false } : false
)
div.appendChild(img)
panel.appendChild(div)
diff --git a/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.ts b/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.ts
index 11796df16..6f4c91ff6 100644
--- a/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.ts
+++ b/demos/03-tutorial-application-features/drag-and-drop/SampleApplication.ts
@@ -53,7 +53,7 @@ import {
} from 'yfiles'
import { addClass, bindAction, bindCommand, removeClass, showApp } from '../../resources/demo-app'
-import { passiveSupported, pointerEventsSupported } from '../../utils/Workarounds'
+import { BrowserDetection } from '../../utils/BrowserDetection'
import {
applyDemoTheme,
createDemoShapeNodeStyle,
@@ -159,7 +159,7 @@ function addNodeVisual(style: INodeStyle, panel: Element): void {
simpleNode, // The node that is dragged. This is used to provide a preview within the GC during the drag.
DragDropEffects.ALL, // The allowed actions for this drag.
true, // Whether to the cursor during the drag.
- pointerEventsSupported ? dragPreview : null // The optional preview element that is shown outside of the GC during the drag.
+ BrowserDetection.pointerEvents ? dragPreview : null // The optional preview element that is shown outside of the GC during the drag.
)
// Within the GraphComponent, it draws its own preview node. Therefore, we need to hide the additional
@@ -190,7 +190,7 @@ function addNodeVisual(style: INodeStyle, panel: Element): void {
startDrag()
event.preventDefault()
},
- passiveSupported ? { passive: false } : false
+ BrowserDetection.passiveEventListeners ? { passive: false } : false
)
div.appendChild(img)
panel.appendChild(div)
diff --git a/demos/03-tutorial-application-features/grid-snapping/SampleApplication.js b/demos/03-tutorial-application-features/grid-snapping/SampleApplication.js
index 16186eb78..a3ef32623 100644
--- a/demos/03-tutorial-application-features/grid-snapping/SampleApplication.js
+++ b/demos/03-tutorial-application-features/grid-snapping/SampleApplication.js
@@ -60,9 +60,9 @@ import {
removeClass,
showApp
} from '../../resources/demo-app.js'
-import { isWebGlSupported } from '../../utils/Workarounds.js'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles.js'
import { fetchLicense } from '../../resources/fetch-license.js'
+import { BrowserDetection } from '../../utils/BrowserDetection.js'
/** @type {GraphComponent} */
let graphComponent
@@ -168,7 +168,7 @@ function initializeGrid() {
gridRenderModes.set('Canvas', RenderModes.CANVAS)
gridRenderModes.set('Svg', RenderModes.SVG)
// add WebGL only if the browser supports WebGL rendering
- if (isWebGlSupported()) {
+ if (BrowserDetection.webGL) {
gridRenderModes.set('WebGL', RenderModes.WEB_GL)
}
@@ -445,9 +445,6 @@ function registerCommands() {
grid.visible = document.querySelector('#grid-button').checked
graphComponent.invalidate() // triggers repaint
})
- bindChangeListener("select[data-command='GridSnapTypeChanged']", updateSnapType)
- bindChangeListener("select[data-command='GridRenderModeChanged']", updateRenderMode)
- bindChangeListener("select[data-command='GridColorChanged']", updateGridColor)
bindChangeListener('#thickness', updateGridThickness)
}
diff --git a/demos/03-tutorial-application-features/grid-snapping/SampleApplication.ts b/demos/03-tutorial-application-features/grid-snapping/SampleApplication.ts
index 664588910..2aef909b7 100644
--- a/demos/03-tutorial-application-features/grid-snapping/SampleApplication.ts
+++ b/demos/03-tutorial-application-features/grid-snapping/SampleApplication.ts
@@ -61,9 +61,9 @@ import {
removeClass,
showApp
} from '../../resources/demo-app'
-import { isWebGlSupported } from '../../utils/Workarounds'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles'
import { fetchLicense } from '../../resources/fetch-license'
+import { BrowserDetection } from '../../utils/BrowserDetection'
let graphComponent: GraphComponent
@@ -166,7 +166,7 @@ function initializeGrid(): void {
gridRenderModes.set('Canvas', RenderModes.CANVAS)
gridRenderModes.set('Svg', RenderModes.SVG)
// add WebGL only if the browser supports WebGL rendering
- if (isWebGlSupported()) {
+ if (BrowserDetection.webGL) {
gridRenderModes.set('WebGL', RenderModes.WEB_GL)
}
@@ -439,9 +439,6 @@ function registerCommands(): void {
grid.visible = (document.querySelector('#grid-button') as HTMLInputElement).checked
graphComponent.invalidate() // triggers repaint
})
- bindChangeListener("select[data-command='GridSnapTypeChanged']", updateSnapType)
- bindChangeListener("select[data-command='GridRenderModeChanged']", updateRenderMode)
- bindChangeListener("select[data-command='GridColorChanged']", updateGridColor)
bindChangeListener('#thickness', updateGridThickness)
}
diff --git a/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.js b/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.js
index 4a9e1081f..9a64dfe95 100644
--- a/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.js
+++ b/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.js
@@ -48,8 +48,7 @@ import {
Workarounds
} from 'yfiles'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
-import { isWebGl2Supported } from '../../utils/Workarounds.js'
+import { bindAction, bindCommand, checkWebGL2Support, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles.js'
import { fetchLicense } from '../../resources/fetch-license.js'
@@ -61,9 +60,7 @@ let graphComponent
* @returns {!Promise}
*/
async function run() {
- if (!isWebGl2Supported()) {
- // show message if the browsers does not support WebGL2
- document.getElementById('no-webgl-support').removeAttribute('style')
+ if (!checkWebGL2Support()) {
showApp()
return
}
diff --git a/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.ts b/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.ts
index a9a591a7e..5938045c8 100644
--- a/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.ts
+++ b/demos/03-tutorial-application-features/webgl-rendering/WebGLRenderingDemo.ts
@@ -48,8 +48,7 @@ import {
Workarounds
} from 'yfiles'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
-import { isWebGl2Supported } from '../../utils/Workarounds'
+import { bindAction, bindCommand, checkWebGL2Support, showApp } from '../../resources/demo-app'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles'
import { fetchLicense } from '../../resources/fetch-license'
@@ -59,9 +58,7 @@ let graphComponent: GraphComponent
* Bootstraps the demo.
*/
async function run(): Promise {
- if (!isWebGl2Supported()) {
- // show message if the browsers does not support WebGL2
- document.getElementById('no-webgl-support')!.removeAttribute('style')
+ if (!checkWebGL2Support()) {
showApp()
return
}
diff --git a/demos/03-tutorial-application-features/webgl-rendering/index.html b/demos/03-tutorial-application-features/webgl-rendering/index.html
index de83e825f..367d26e74 100644
--- a/demos/03-tutorial-application-features/webgl-rendering/index.html
+++ b/demos/03-tutorial-application-features/webgl-rendering/index.html
@@ -40,18 +40,6 @@
-
-
The following gestures have been adjusted:
-
Moving The Viewport
-
- Moving the viewport may begin when Ctrl is pressed while hovering on an empty
- location on the canvas. Its valid beginning is indicated by
- Cursor.GRAB.
-
-
-
Starting Lasso Selection
-
- Lasso selection may begin when Shift is pressed while hovering on an empty
- location on the canvas. Its valid beginning is indicated by a custom lasso cursor.
-
-
-
Starting Marquee Selection
-
- Marquee selection may begin when neither Shift nor Ctrl is pressed
- while hovering on an empty location on the canvas. Its valid beginning is indicated by
- Cursor.CROSSHAIR.
-
-
-
Creating Edges
-
- Edge creation may begin when Ctrl is pressed while hovering on an unselected
- node. Its valid beginning is indicated by a custom create-edge cursor.
-
-
-
Moving Nodes
-
- Moving a node may begin when Ctrl is not pressed while hovering on a
- selected or unselected node. Its valid beginning is indicated by
- Cursor.MOVE.
-
-
-
Show Tooltip
-
- Tooltips are displayed when hovering on an edge for a second. Hovering over a location
- where a tooltip may be displayed is indicated by
- Cursor.HELP.
-
+
Things to try
+
+
+ Move the viewport by pressing Ctrl while hovering on an empty location
+ on the canvas. Its valid beginning is indicated by
+ Cursor.GRAB
+
+
+ Start lasso selection by pressing Shift while hovering on an empty
+ location on the canvas. Its valid beginning is indicated by a custom lasso cursor.
+
+
+ Start marquee selection when neither Shift nor Ctrl is
+ pressed while hovering on an empty location on the canvas. Its valid beginning is
+ indicated by Cursor.CROSSHAIR.
+
+
+ Create a new edge by pressing Ctrl while hovering on an unselected
+ node. Its valid beginning is indicated by a custom create-edge cursor.
+
+
+ Move a node when Ctrl is not pressed while hovering on a
+ selected or unselected node. Its valid beginning is indicated by
+ Cursor.MOVE.
+
+
+ Show tooltips when hovering on an edge for a second. Hovering over a location
+ where a tooltip may be displayed is indicated by
+ Cursor.HELP.
+
+
diff --git a/demos/layout/arc-diagram/ArcDiagramDemo.js b/demos/layout/arc-diagram/ArcDiagramDemo.js
index 27f2f8dc5..add95167f 100644
--- a/demos/layout/arc-diagram/ArcDiagramDemo.js
+++ b/demos/layout/arc-diagram/ArcDiagramDemo.js
@@ -63,7 +63,6 @@ Class.ensure(LayoutExecutor)
/**
* Bootstraps this demo.
- * @param licenseData The yFiles license information.
* @returns {!Promise}
*/
async function run() {
diff --git a/demos/layout/arc-diagram/ArcDiagramDemo.ts b/demos/layout/arc-diagram/ArcDiagramDemo.ts
index a4fe00c5c..c8a1b0231 100644
--- a/demos/layout/arc-diagram/ArcDiagramDemo.ts
+++ b/demos/layout/arc-diagram/ArcDiagramDemo.ts
@@ -63,7 +63,6 @@ Class.ensure(LayoutExecutor)
/**
* Bootstraps this demo.
- * @param licenseData The yFiles license information.
*/
async function run(): Promise {
License.value = await fetchLicense()
diff --git a/demos/layout/busrouting/BusRoutingDemo.js b/demos/layout/busrouting/BusRoutingDemo.js
index 2c346a1ee..d99f46980 100644
--- a/demos/layout/busrouting/BusRoutingDemo.js
+++ b/demos/layout/busrouting/BusRoutingDemo.js
@@ -48,7 +48,7 @@ import {
SolidColorFill,
Stroke
} from 'yfiles'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app.js'
import SampleData from './resources/SampleData.js'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles.js'
import { fetchLicense } from '../../resources/fetch-license.js'
@@ -129,7 +129,6 @@ const colorUtil = new ColorUtil()
/**
* Runs the demo.
- * @param licenseData The yFiles license information.
* @returns {!Promise}
*/
async function run() {
@@ -246,12 +245,7 @@ async function routeEdges(edgesToRoute = null) {
try {
await routeEdgesCore(edgesToRoute)
} catch (error) {
- const reporter = window.reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutRunning = false
disableUI(false)
diff --git a/demos/layout/busrouting/BusRoutingDemo.ts b/demos/layout/busrouting/BusRoutingDemo.ts
index faf02802d..a3cf91aed 100644
--- a/demos/layout/busrouting/BusRoutingDemo.ts
+++ b/demos/layout/busrouting/BusRoutingDemo.ts
@@ -48,7 +48,7 @@ import {
SolidColorFill,
Stroke
} from 'yfiles'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app'
import SampleData from './resources/SampleData'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles'
import { fetchLicense } from '../../resources/fetch-license'
@@ -122,7 +122,6 @@ const colorUtil = new ColorUtil()
/**
* Runs the demo.
- * @param licenseData The yFiles license information.
*/
async function run(): Promise {
License.value = await fetchLicense()
@@ -235,12 +234,7 @@ async function routeEdges(edgesToRoute: IEdge[] | null = null): Promise {
try {
await routeEdgesCore(edgesToRoute)
} catch (error) {
- const reporter = (window as any).reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutRunning = false
disableUI(false)
diff --git a/demos/layout/busstructures/BusStructuresDemo.js b/demos/layout/busstructures/BusStructuresDemo.js
index 27794ae3b..4b60e9e77 100644
--- a/demos/layout/busstructures/BusStructuresDemo.js
+++ b/demos/layout/busstructures/BusStructuresDemo.js
@@ -50,6 +50,7 @@ import {
bindAction,
bindChangeListener,
bindCommand,
+ reportDemoError,
showApp
} from '../../resources/demo-app.js'
import { applyDemoTheme, colorSets, initDemoStyles } from '../../resources/demo-styles.js'
@@ -94,7 +95,6 @@ const colors = [
/**
* Bootstraps the demo.
- * @param licenseData The yFiles license information.
* @returns {!Promise}
*/
async function run() {
@@ -154,12 +154,7 @@ async function runLayout() {
// apply the layout
await graphComponent.morphLayout({ layout, layoutData, morphDuration: '700ms' })
} catch (error) {
- const reporter = window.reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutRunning = false
disableUI(false)
diff --git a/demos/layout/busstructures/BusStructuresDemo.ts b/demos/layout/busstructures/BusStructuresDemo.ts
index eebab2d31..09dae6e78 100644
--- a/demos/layout/busstructures/BusStructuresDemo.ts
+++ b/demos/layout/busstructures/BusStructuresDemo.ts
@@ -50,6 +50,7 @@ import {
bindAction,
bindChangeListener,
bindCommand,
+ reportDemoError,
showApp
} from '../../resources/demo-app'
import { applyDemoTheme, colorSets, initDemoStyles } from '../../resources/demo-styles'
@@ -92,7 +93,6 @@ const colors = [
/**
* Bootstraps the demo.
- * @param licenseData The yFiles license information.
*/
async function run(): Promise {
License.value = await fetchLicense()
@@ -150,12 +150,7 @@ async function runLayout(): Promise {
// apply the layout
await graphComponent.morphLayout({ layout, layoutData, morphDuration: '700ms' })
} catch (error) {
- const reporter = (window as any).reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layoutRunning = false
disableUI(false)
diff --git a/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.js b/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.js
index 9f37e55c0..8643b0c1a 100644
--- a/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.js
+++ b/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.js
@@ -47,8 +47,6 @@ import {
Rect
} from 'yfiles'
-import { LayoutOptions } from './LayoutOptions.js'
-
/**
* Performs layout and animation while dragging the marquee rectangle.
*/
diff --git a/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.ts b/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.ts
index 296152a6e..101f23bb3 100644
--- a/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.ts
+++ b/demos/layout/clearrectanglearea/ClearAreaLayoutHelper.ts
@@ -47,7 +47,7 @@ import {
Rect
} from 'yfiles'
-import { LayoutOptions } from './LayoutOptions'
+import type { LayoutOptions } from './LayoutOptions'
/**
* Performs layout and animation while dragging the marquee rectangle.
diff --git a/demos/layout/clearrectanglearea/LayoutOptions.js b/demos/layout/clearrectanglearea/LayoutOptions.js
index 8de39bcf0..365340c0c 100644
--- a/demos/layout/clearrectanglearea/LayoutOptions.js
+++ b/demos/layout/clearrectanglearea/LayoutOptions.js
@@ -26,8 +26,6 @@
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
**
***************************************************************************/
-import { ClearAreaStrategy, ComponentAssignmentStrategy } from 'yfiles'
-
/**
* Options to control the layout behavior.
*/
diff --git a/demos/layout/clearrectanglearea/LayoutOptions.ts b/demos/layout/clearrectanglearea/LayoutOptions.ts
index 83d5d574a..dd3e418a4 100644
--- a/demos/layout/clearrectanglearea/LayoutOptions.ts
+++ b/demos/layout/clearrectanglearea/LayoutOptions.ts
@@ -26,7 +26,7 @@
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
**
***************************************************************************/
-import { ClearAreaStrategy, ComponentAssignmentStrategy } from 'yfiles'
+import type { ClearAreaStrategy, ComponentAssignmentStrategy } from 'yfiles'
/**
* Options to control the layout behavior.
diff --git a/demos/layout/edgebundling/EdgeBundlingDemo.js b/demos/layout/edgebundling/EdgeBundlingDemo.js
index e5ca9600d..d31ec19b9 100644
--- a/demos/layout/edgebundling/EdgeBundlingDemo.js
+++ b/demos/layout/edgebundling/EdgeBundlingDemo.js
@@ -68,7 +68,7 @@ import {
} from 'yfiles'
import { DemoEdgeStyle, DemoNodeStyle, HighlightManager } from './DemoStyles.js'
-import ContextMenu from '../../utils/ContextMenu.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
import {
addClass,
addNavigationButtons,
diff --git a/demos/layout/edgebundling/EdgeBundlingDemo.ts b/demos/layout/edgebundling/EdgeBundlingDemo.ts
index 8dc5c705c..7f5b835a3 100644
--- a/demos/layout/edgebundling/EdgeBundlingDemo.ts
+++ b/demos/layout/edgebundling/EdgeBundlingDemo.ts
@@ -68,7 +68,7 @@ import {
} from 'yfiles'
import { DemoEdgeStyle, DemoNodeStyle, HighlightManager } from './DemoStyles'
-import ContextMenu from '../../utils/ContextMenu'
+import { ContextMenu } from '../../utils/ContextMenu'
import {
addClass,
addNavigationButtons,
diff --git a/demos/layout/edgegrouping/EdgeGroupingDemo.js b/demos/layout/edgegrouping/EdgeGroupingDemo.js
index 7dd4c7586..88f534d50 100644
--- a/demos/layout/edgegrouping/EdgeGroupingDemo.js
+++ b/demos/layout/edgegrouping/EdgeGroupingDemo.js
@@ -64,7 +64,7 @@ import {
VoidPortStyle
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
import SampleData from './resources/SampleData.js'
import {
addClass,
diff --git a/demos/layout/edgegrouping/EdgeGroupingDemo.ts b/demos/layout/edgegrouping/EdgeGroupingDemo.ts
index 839ca3101..c3957147c 100644
--- a/demos/layout/edgegrouping/EdgeGroupingDemo.ts
+++ b/demos/layout/edgegrouping/EdgeGroupingDemo.ts
@@ -64,7 +64,7 @@ import {
VoidPortStyle
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu'
+import { ContextMenu } from '../../utils/ContextMenu'
import SampleData from './resources/SampleData'
import {
addClass,
diff --git a/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.js b/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.js
index a9f5b91ae..371da64e1 100644
--- a/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.js
+++ b/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.js
@@ -70,6 +70,7 @@ import {
bindAction,
bindChangeListener,
bindCommand,
+ reportDemoError,
showApp
} from '../../resources/demo-app.js'
import { fetchLicense } from '../../resources/fetch-license.js'
@@ -185,11 +186,7 @@ async function doLayout(fitViewToContent) {
try {
await layoutExecutor.start()
} catch (error) {
- if (typeof window.reportError === 'function') {
- window.reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layouting = false
setUIDisabled(false)
diff --git a/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.ts b/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.ts
index bbe46b870..8a28784f3 100644
--- a/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.ts
+++ b/demos/layout/edgelabelplacement/EdgeLabelPlacementDemo.ts
@@ -70,6 +70,7 @@ import {
bindAction,
bindChangeListener,
bindCommand,
+ reportDemoError,
showApp
} from '../../resources/demo-app'
import { fetchLicense } from '../../resources/fetch-license'
@@ -196,11 +197,7 @@ async function doLayout(fitViewToContent: boolean) {
try {
await layoutExecutor.start()
} catch (error) {
- if (typeof (window as any).reportError === 'function') {
- ;(window as any).reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layouting = false
setUIDisabled(false)
diff --git a/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.js b/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.js
index a947c03c1..048f55821 100644
--- a/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.js
+++ b/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.js
@@ -63,7 +63,7 @@ import {
VoidPortStyle
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
import SampleData from './resources/SampleData.js'
import { applyDemoTheme, createDemoNodeStyle, initDemoStyles } from '../../resources/demo-styles.js'
import {
diff --git a/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.ts b/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.ts
index 9173c0ac3..5a63a7e7e 100644
--- a/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.ts
+++ b/demos/layout/edgeroutergrouping/EdgeRouterGroupingDemo.ts
@@ -63,7 +63,7 @@ import {
VoidPortStyle
} from 'yfiles'
-import ContextMenu from '../../utils/ContextMenu'
+import { ContextMenu } from '../../utils/ContextMenu'
import SampleData from './resources/SampleData'
import { applyDemoTheme, createDemoNodeStyle, initDemoStyles } from '../../resources/demo-styles'
import {
diff --git a/demos/layout/familytree/FamilyTreeDemo.js b/demos/layout/familytree/FamilyTreeDemo.js
index a7a226d14..692f64dbe 100644
--- a/demos/layout/familytree/FamilyTreeDemo.js
+++ b/demos/layout/familytree/FamilyTreeDemo.js
@@ -46,7 +46,7 @@ import {
ShapeNodeStyle
} from 'yfiles'
-import { bindCommand, showApp } from '../../resources/demo-app.js'
+import { bindCommand, reportDemoError, showApp } from '../../resources/demo-app.js'
import GraphBuilderData from './resources/kennedy-family.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
@@ -103,12 +103,7 @@ function runLayout(graphComponent) {
}
})
graphComponent.morphLayout(familyTreeLayout, '1s', familyTreeLayoutData).catch(error => {
- const reporter = window.reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
})
}
diff --git a/demos/layout/familytree/FamilyTreeDemo.ts b/demos/layout/familytree/FamilyTreeDemo.ts
index 6009650eb..4a0fba9bc 100644
--- a/demos/layout/familytree/FamilyTreeDemo.ts
+++ b/demos/layout/familytree/FamilyTreeDemo.ts
@@ -46,7 +46,7 @@ import {
ShapeNodeStyle
} from 'yfiles'
-import { bindCommand, showApp } from '../../resources/demo-app'
+import { bindCommand, reportDemoError, showApp } from '../../resources/demo-app'
import GraphBuilderData from './resources/kennedy-family'
import { applyDemoTheme } from '../../resources/demo-styles'
@@ -99,12 +99,7 @@ function runLayout(graphComponent: GraphComponent): void {
}
})
graphComponent.morphLayout(familyTreeLayout, '1s', familyTreeLayoutData).catch(error => {
- const reporter = (window as any).reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
})
}
diff --git a/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.js b/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.js
index 68f7556ca..30478f5e3 100644
--- a/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.js
+++ b/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.js
@@ -50,12 +50,12 @@ import {
Size
} from 'yfiles'
-import PortConstraintBendHandle from './PortConstraintBendHandle.js'
-import LayerPositionHandler from './LayerPositionHandler.js'
+import { PortConstraintBendHandle } from './PortConstraintBendHandle.js'
+import { LayerPositionHandler } from './LayerPositionHandler.js'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles.js'
-import ContextMenu from '../../utils/ContextMenu.js'
-import { bindCommand, showApp } from '../../resources/demo-app.js'
-import LayerVisual from './LayerVisual.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
+import { bindCommand, reportDemoError, showApp } from '../../resources/demo-app.js'
+import { LayerVisual } from './LayerVisual.js'
import { fetchLicense } from '../../resources/fetch-license.js'
/**
@@ -264,11 +264,7 @@ async function updateLayout() {
await graphComponent.morphLayout(new MinimumNodeSizeStage(layout), '1s', layoutData)
layerVisual.updateLayers(graph, layerMapper)
} catch (error) {
- if (typeof window.reportError === 'function') {
- window.reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layouting = false
graphComponent.inputMode.enabled = true
diff --git a/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.ts b/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.ts
index 351afed89..1c681fa5c 100644
--- a/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.ts
+++ b/demos/layout/incrementalhierarchic/IncrementalHierarchicDemo.ts
@@ -50,12 +50,12 @@ import {
Size
} from 'yfiles'
-import PortConstraintBendHandle from './PortConstraintBendHandle'
-import LayerPositionHandler from './LayerPositionHandler'
+import { PortConstraintBendHandle } from './PortConstraintBendHandle'
+import { LayerPositionHandler } from './LayerPositionHandler'
import { applyDemoTheme, initDemoStyles } from '../../resources/demo-styles'
-import ContextMenu from '../../utils/ContextMenu'
-import { bindCommand, showApp } from '../../resources/demo-app'
-import LayerVisual from './LayerVisual'
+import { ContextMenu } from '../../utils/ContextMenu'
+import { bindCommand, reportDemoError, showApp } from '../../resources/demo-app'
+import { LayerVisual } from './LayerVisual'
import { fetchLicense } from '../../resources/fetch-license'
/**
@@ -261,11 +261,7 @@ async function updateLayout() {
await graphComponent.morphLayout(new MinimumNodeSizeStage(layout), '1s', layoutData)
layerVisual.updateLayers(graph, layerMapper)
} catch (error) {
- if (typeof (window as any).reportError === 'function') {
- ;(window as any).reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
layouting = false
;(graphComponent.inputMode as GraphEditorInputMode).enabled = true
diff --git a/demos/layout/incrementalhierarchic/LayerPositionHandler.js b/demos/layout/incrementalhierarchic/LayerPositionHandler.js
index 81ea5a0c7..b93eaad62 100644
--- a/demos/layout/incrementalhierarchic/LayerPositionHandler.js
+++ b/demos/layout/incrementalhierarchic/LayerPositionHandler.js
@@ -42,13 +42,12 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import LayerVisual from './LayerVisual.js'
/**
* Helper class that moves a node and uses the location of the mouse
* to determine the layer where the nodes should be moved to.
*/
-export default class LayerPositionHandler extends ConstrainedPositionHandler {
+export class LayerPositionHandler extends ConstrainedPositionHandler {
/**
* Creates a new instance that wraps the base handler
* @param {!IPositionHandler} baseHandler
diff --git a/demos/layout/incrementalhierarchic/LayerPositionHandler.ts b/demos/layout/incrementalhierarchic/LayerPositionHandler.ts
index c66787d82..6f08768fc 100644
--- a/demos/layout/incrementalhierarchic/LayerPositionHandler.ts
+++ b/demos/layout/incrementalhierarchic/LayerPositionHandler.ts
@@ -42,13 +42,13 @@ import {
SvgVisual,
Visual
} from 'yfiles'
-import LayerVisual from './LayerVisual'
+import type { LayerVisual } from './LayerVisual'
/**
* Helper class that moves a node and uses the location of the mouse
* to determine the layer where the nodes should be moved to.
*/
-export default class LayerPositionHandler extends ConstrainedPositionHandler {
+export class LayerPositionHandler extends ConstrainedPositionHandler {
private canvasObject: ICanvasObject = null!
/**
diff --git a/demos/layout/incrementalhierarchic/LayerVisual.js b/demos/layout/incrementalhierarchic/LayerVisual.js
index 75212d09b..d5dde0c24 100644
--- a/demos/layout/incrementalhierarchic/LayerVisual.js
+++ b/demos/layout/incrementalhierarchic/LayerVisual.js
@@ -44,7 +44,7 @@ import {
/**
* Manages and renders the layers.
*/
-export default class LayerVisual extends BaseClass(IVisualCreator) {
+export class LayerVisual extends BaseClass(IVisualCreator) {
constructor() {
super()
diff --git a/demos/layout/incrementalhierarchic/LayerVisual.ts b/demos/layout/incrementalhierarchic/LayerVisual.ts
index 77e66a283..895964d52 100644
--- a/demos/layout/incrementalhierarchic/LayerVisual.ts
+++ b/demos/layout/incrementalhierarchic/LayerVisual.ts
@@ -44,7 +44,7 @@ import {
/**
* Manages and renders the layers.
*/
-export default class LayerVisual
+export class LayerVisual
extends BaseClass(IVisualCreator)
implements IVisualCreator
{
diff --git a/demos/layout/incrementalhierarchic/PortConstraintBendHandle.js b/demos/layout/incrementalhierarchic/PortConstraintBendHandle.js
index 51128218e..4ff63ab6a 100644
--- a/demos/layout/incrementalhierarchic/PortConstraintBendHandle.js
+++ b/demos/layout/incrementalhierarchic/PortConstraintBendHandle.js
@@ -51,7 +51,7 @@ import {
* Helper class that provides a handle for the first and last bend of an edge
* that interactively determines the port constraint.
*/
-export default class PortConstraintBendHandle extends BaseClass(ConstrainedHandle, IVisualCreator) {
+export class PortConstraintBendHandle extends BaseClass(ConstrainedHandle, IVisualCreator) {
/**
* Creates a new handle that wraps the base handle.
* @param {!IHandle} baseHandle
diff --git a/demos/layout/incrementalhierarchic/PortConstraintBendHandle.ts b/demos/layout/incrementalhierarchic/PortConstraintBendHandle.ts
index ef670efbe..b7376b19a 100644
--- a/demos/layout/incrementalhierarchic/PortConstraintBendHandle.ts
+++ b/demos/layout/incrementalhierarchic/PortConstraintBendHandle.ts
@@ -51,7 +51,7 @@ import {
* Helper class that provides a handle for the first and last bend of an edge
* that interactively determines the port constraint.
*/
-export default class PortConstraintBendHandle
+export class PortConstraintBendHandle
extends BaseClass(ConstrainedHandle, IVisualCreator)
implements ConstrainedHandle, IVisualCreator
{
diff --git a/demos/layout/layerconstraints/LayerConstraintsDemo.js b/demos/layout/layerconstraints/LayerConstraintsDemo.js
index bbe8c4f4f..e49694c68 100644
--- a/demos/layout/layerconstraints/LayerConstraintsDemo.js
+++ b/demos/layout/layerconstraints/LayerConstraintsDemo.js
@@ -50,7 +50,7 @@ import {
} from 'yfiles'
import RandomGraphGenerator from '../../utils/RandomGraphGenerator.js'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app.js'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app.js'
import { applyDemoTheme } from '../../resources/demo-styles.js'
import { fetchLicense } from '../../resources/fetch-license.js'
@@ -117,12 +117,7 @@ async function runLayout(graphComponent) {
try {
await graphComponent.morphLayout(hierarchicLayout, '1s', hierarchicLayoutData)
} catch (error) {
- const reporter = window.reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
setUIDisabled(false)
}
diff --git a/demos/layout/layerconstraints/LayerConstraintsDemo.ts b/demos/layout/layerconstraints/LayerConstraintsDemo.ts
index 8641be0e7..9f0b8b0e4 100644
--- a/demos/layout/layerconstraints/LayerConstraintsDemo.ts
+++ b/demos/layout/layerconstraints/LayerConstraintsDemo.ts
@@ -50,7 +50,7 @@ import {
} from 'yfiles'
import RandomGraphGenerator from '../../utils/RandomGraphGenerator'
-import { bindAction, bindCommand, showApp } from '../../resources/demo-app'
+import { bindAction, bindCommand, reportDemoError, showApp } from '../../resources/demo-app'
import { applyDemoTheme } from '../../resources/demo-styles'
import { fetchLicense } from '../../resources/fetch-license'
@@ -110,12 +110,7 @@ async function runLayout(graphComponent: GraphComponent): Promise {
try {
await graphComponent.morphLayout(hierarchicLayout, '1s', hierarchicLayoutData)
} catch (error) {
- const reporter = (window as any).reportError
- if (typeof reporter === 'function') {
- reporter(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
setUIDisabled(false)
}
diff --git a/demos/layout/layoutstyles/LayoutConfiguration.js b/demos/layout/layoutstyles/LayoutConfiguration.js
index a8d531076..cd8d2b70b 100644
--- a/demos/layout/layoutstyles/LayoutConfiguration.js
+++ b/demos/layout/layoutstyles/LayoutConfiguration.js
@@ -43,6 +43,7 @@ import {
PreferredPlacementDescriptor,
TimeSpan
} from 'yfiles'
+import { reportDemoError } from '../../resources/demo-app.js'
/**
* @typedef {Object} LayoutConfigurationType
@@ -123,10 +124,7 @@ const LayoutConfiguration = Class('LayoutConfiguration', {
'The layout computation was canceled because the maximum configured runtime of 20 seconds was exceeded.'
)
} else {
- const reporter = window.reportError
- if (typeof reporter === 'function') {
- reporter(err)
- }
+ reportDemoError(err)
}
} finally {
this.$layoutRunning = false
diff --git a/demos/layout/layoutstyles/LayoutConfiguration.ts b/demos/layout/layoutstyles/LayoutConfiguration.ts
index c23c481ce..953089008 100644
--- a/demos/layout/layoutstyles/LayoutConfiguration.ts
+++ b/demos/layout/layoutstyles/LayoutConfiguration.ts
@@ -43,6 +43,7 @@ import {
PreferredPlacementDescriptor,
TimeSpan
} from 'yfiles'
+import { reportDemoError } from '../../resources/demo-app'
export type LayoutConfigurationType = {
collapsedInitialization: boolean
@@ -129,10 +130,7 @@ const LayoutConfiguration = (Class as any)('LayoutConfiguration', {
'The layout computation was canceled because the maximum configured runtime of 20 seconds was exceeded.'
)
} else {
- const reporter = (window as any).reportError
- if (typeof reporter === 'function') {
- reporter(err)
- }
+ reportDemoError(err)
}
} finally {
this.$layoutRunning = false
diff --git a/demos/layout/layoutstyles/LayoutStylesDemo.js b/demos/layout/layoutstyles/LayoutStylesDemo.js
index 83561c8bf..e5de4b30d 100644
--- a/demos/layout/layoutstyles/LayoutStylesDemo.js
+++ b/demos/layout/layoutstyles/LayoutStylesDemo.js
@@ -84,7 +84,7 @@ import PartialLayoutConfig from './PartialLayoutConfig.js'
import GraphTransformerConfig from './GraphTransformerConfig.js'
import CompactDiskLayoutConfig from './CompactDiskLayoutConfig.js'
import { PresetsUiBuilder } from './PresetsUiBuilder.js'
-import ContextMenu from '../../utils/ContextMenu.js'
+import { ContextMenu } from '../../utils/ContextMenu.js'
import {
addClass,
addNavigationButtons,
@@ -95,8 +95,7 @@ import {
removeClass,
showApp
} from '../../resources/demo-app.js'
-import { isWebGlSupported } from '../../utils/Workarounds.js'
-import { createConfiguredGraphMLIOHandler } from './FaultTolerantGraphMLIOHandler.js'
+import { createConfiguredGraphMLIOHandler } from '../../utils/FaultTolerantGraphMLIOHandler.js'
import { isSeparator, LayoutStyles, Presets } from './resources/LayoutSamples.js'
import { LoremIpsum } from './resources/LoremIpsum.js'
import {
@@ -107,6 +106,7 @@ import {
initDemoStyles
} from '../../resources/demo-styles.js'
import { fetchLicense } from '../../resources/fetch-license.js'
+import { BrowserDetection } from '../../utils/BrowserDetection.js'
// We need to load the 'styles-other' module explicitly to prevent tree-shaking
// tools from removing this dependency which is needed for loading all library styles.
@@ -1057,7 +1057,7 @@ function createEditorMode() {
mode.createBendInputMode.priority = mode.moveInputMode.priority - 1
// use WebGL rendering for handles if possible, otherwise the handles are rendered using SVG
- if (isWebGlSupported()) {
+ if (BrowserDetection.webGL) {
mode.handleInputMode.renderMode = RenderModes.WEB_GL
}
@@ -1228,8 +1228,8 @@ function registerCommands() {
bindAction("button[data-command='LayoutCommand']", () => {
applyLayout(false)
})
- bindChangeListener("select[data-command='LayoutSelectionChanged']", onLayoutChanged)
- bindChangeListener("select[data-command='SampleSelectionChanged']", onSampleChanged)
+ bindChangeListener("select[data-command='LayoutSelectionChanged']", () => onLayoutChanged())
+ bindChangeListener("select[data-command='SampleSelectionChanged']", () => onSampleChanged())
bindAction("button[data-command='GenerateNodeLabels']", () => {
onGenerateItemLabels(graphComponent.graph.nodes)
diff --git a/demos/layout/layoutstyles/LayoutStylesDemo.ts b/demos/layout/layoutstyles/LayoutStylesDemo.ts
index 2bdda2c96..25ca8d3d3 100644
--- a/demos/layout/layoutstyles/LayoutStylesDemo.ts
+++ b/demos/layout/layoutstyles/LayoutStylesDemo.ts
@@ -84,7 +84,7 @@ import PartialLayoutConfig from './PartialLayoutConfig'
import GraphTransformerConfig from './GraphTransformerConfig'
import CompactDiskLayoutConfig from './CompactDiskLayoutConfig'
import { PresetsUiBuilder } from './PresetsUiBuilder'
-import ContextMenu from '../../utils/ContextMenu'
+import { ContextMenu } from '../../utils/ContextMenu'
import {
addClass,
addNavigationButtons,
@@ -95,8 +95,7 @@ import {
removeClass,
showApp
} from '../../resources/demo-app'
-import { isWebGlSupported } from '../../utils/Workarounds'
-import { createConfiguredGraphMLIOHandler } from './FaultTolerantGraphMLIOHandler'
+import { createConfiguredGraphMLIOHandler } from '../../utils/FaultTolerantGraphMLIOHandler'
import type { LayoutSample } from './resources/LayoutSamples'
import { isSeparator, LayoutStyles, Presets } from './resources/LayoutSamples'
import { LoremIpsum } from './resources/LoremIpsum'
@@ -109,6 +108,7 @@ import {
initDemoStyles
} from '../../resources/demo-styles'
import { fetchLicense } from '../../resources/fetch-license'
+import { BrowserDetection } from '../../utils/BrowserDetection'
// We need to load the 'styles-other' module explicitly to prevent tree-shaking
// tools from removing this dependency which is needed for loading all library styles.
@@ -993,7 +993,7 @@ function createEditorMode(): IInputMode {
mode.createBendInputMode.priority = mode.moveInputMode.priority - 1
// use WebGL rendering for handles if possible, otherwise the handles are rendered using SVG
- if (isWebGlSupported()) {
+ if (BrowserDetection.webGL) {
mode.handleInputMode.renderMode = RenderModes.WEB_GL
}
@@ -1164,8 +1164,8 @@ function registerCommands(): void {
bindAction("button[data-command='LayoutCommand']", () => {
applyLayout(false)
})
- bindChangeListener("select[data-command='LayoutSelectionChanged']", onLayoutChanged)
- bindChangeListener("select[data-command='SampleSelectionChanged']", onSampleChanged)
+ bindChangeListener("select[data-command='LayoutSelectionChanged']", () => onLayoutChanged())
+ bindChangeListener("select[data-command='SampleSelectionChanged']", () => onSampleChanged())
bindAction("button[data-command='GenerateNodeLabels']", () => {
onGenerateItemLabels(graphComponent.graph.nodes)
diff --git a/demos/layout/layoutstyles/PresetsUiBuilder.js b/demos/layout/layoutstyles/PresetsUiBuilder.js
index bcf3f566e..d33a505f2 100644
--- a/demos/layout/layoutstyles/PresetsUiBuilder.js
+++ b/demos/layout/layoutstyles/PresetsUiBuilder.js
@@ -27,7 +27,6 @@
**
***************************************************************************/
import { addClass, hasClass, removeClass } from '../../resources/demo-app.js'
-import { OptionEditor } from '../../resources/demo-option-editor.js'
import { Tooltip } from './Tooltip.js'
const CSS_CLASS_BUTTON_GRID = 'option-presets-button-grid'
diff --git a/demos/layout/layoutstyles/PresetsUiBuilder.ts b/demos/layout/layoutstyles/PresetsUiBuilder.ts
index 1d1102aa0..20033f74f 100644
--- a/demos/layout/layoutstyles/PresetsUiBuilder.ts
+++ b/demos/layout/layoutstyles/PresetsUiBuilder.ts
@@ -27,7 +27,7 @@
**
***************************************************************************/
import { addClass, hasClass, removeClass } from '../../resources/demo-app'
-import { OptionEditor } from '../../resources/demo-option-editor'
+import type { OptionEditor } from '../../resources/demo-option-editor'
import { Tooltip } from './Tooltip'
import type { Preset } from './resources/LayoutSamples'
diff --git a/demos/layout/layoutstyles/resources/edge-labels.graphml b/demos/layout/layoutstyles/resources/edge-labels.graphml
index 8f9badff3..165bceb58 100644
--- a/demos/layout/layoutstyles/resources/edge-labels.graphml
+++ b/demos/layout/layoutstyles/resources/edge-labels.graphml
@@ -28,7 +28,7 @@
//
////////////////////////////////////////////////////////////////////////-->
-
+
diff --git a/demos/layout/mazerouting/MazeRoutingDemo.js b/demos/layout/mazerouting/MazeRoutingDemo.js
index d673b1d14..2d8e8512e 100644
--- a/demos/layout/mazerouting/MazeRoutingDemo.js
+++ b/demos/layout/mazerouting/MazeRoutingDemo.js
@@ -109,7 +109,7 @@ async function run() {
createMazeVisual()
// route all edges
- routeAll()
+ await routeAll()
// initialize undo and redo for the demo's graph
initializeUndoEngine(graphComponent.graph)
diff --git a/demos/layout/mazerouting/MazeRoutingDemo.ts b/demos/layout/mazerouting/MazeRoutingDemo.ts
index e1a148fe7..08f3858e0 100644
--- a/demos/layout/mazerouting/MazeRoutingDemo.ts
+++ b/demos/layout/mazerouting/MazeRoutingDemo.ts
@@ -104,7 +104,7 @@ async function run(): Promise {
createMazeVisual()
// route all edges
- routeAll()
+ await routeAll()
// initialize undo and redo for the demo's graph
initializeUndoEngine(graphComponent.graph)
diff --git a/demos/layout/mazerouting/PolylineEdgeRouterConfig.js b/demos/layout/mazerouting/PolylineEdgeRouterConfig.js
index ab285edb2..8a3ebe8d6 100644
--- a/demos/layout/mazerouting/PolylineEdgeRouterConfig.js
+++ b/demos/layout/mazerouting/PolylineEdgeRouterConfig.js
@@ -64,6 +64,7 @@ import {
OptionGroupAttribute,
TypeAttribute
} from '../../resources/demo-option-editor.js'
+import { reportDemoError } from '../../resources/demo-app.js'
/**
* Configuration options for the the polyline edge router.
@@ -153,10 +154,7 @@ const PolylineEdgeRouterConfig = Class('PolylineEdgeRouterConfig', {
'The layout computation was canceled because the maximum configured runtime of 20 seconds was exceeded.'
)
} else {
- const reporter = window.reportError
- if (typeof reporter === 'function') {
- reporter(err)
- }
+ reportDemoError(err)
}
} finally {
this.$layoutRunning = false
diff --git a/demos/layout/mazerouting/PolylineEdgeRouterConfig.ts b/demos/layout/mazerouting/PolylineEdgeRouterConfig.ts
index 388915c2e..b43437930 100644
--- a/demos/layout/mazerouting/PolylineEdgeRouterConfig.ts
+++ b/demos/layout/mazerouting/PolylineEdgeRouterConfig.ts
@@ -64,6 +64,7 @@ import {
OptionGroupAttribute,
TypeAttribute
} from '../../resources/demo-option-editor'
+import { reportDemoError } from '../../resources/demo-app'
/**
* Configuration options for the the polyline edge router.
@@ -153,10 +154,7 @@ const PolylineEdgeRouterConfig = (Class as any)('PolylineEdgeRouterConfig', {
'The layout computation was canceled because the maximum configured runtime of 20 seconds was exceeded.'
)
} else {
- const reporter = (window as any).reportError
- if (typeof reporter === 'function') {
- reporter(err)
- }
+ reportDemoError(err)
}
} finally {
this.$layoutRunning = false
diff --git a/demos/layout/multipage/MultiPageDemo.js b/demos/layout/multipage/MultiPageDemo.js
index 5ce360526..87a09bfb0 100644
--- a/demos/layout/multipage/MultiPageDemo.js
+++ b/demos/layout/multipage/MultiPageDemo.js
@@ -71,10 +71,10 @@ import {
showApp,
showLoadingIndicator
} from '../../resources/demo-app.js'
-import { passiveSupported } from '../../utils/Workarounds.js'
import MultiPageIGraphBuilder from './MultiPageIGraphBuilder.js'
import PageBoundsVisualCreator from './PageBoundsVisualCreator.js'
import { fetchLicense } from '../../resources/fetch-license.js'
+import { BrowserDetection } from '../../utils/BrowserDetection.js'
/**
* This demo demonstrates how the result of a multi-page layout calculation
@@ -410,7 +410,7 @@ function initializeCoreLayouts() {
() => {
additionalParentCount.disabled = coreLayoutComboBox.value !== 'Tree'
},
- passiveSupported ? { passive: false } : false
+ BrowserDetection.passiveEventListeners ? { passive: false } : false
)
}
diff --git a/demos/layout/multipage/MultiPageDemo.ts b/demos/layout/multipage/MultiPageDemo.ts
index fa5b7e887..7a2d28ced 100644
--- a/demos/layout/multipage/MultiPageDemo.ts
+++ b/demos/layout/multipage/MultiPageDemo.ts
@@ -71,10 +71,10 @@ import {
showApp,
showLoadingIndicator
} from '../../resources/demo-app'
-import { passiveSupported } from '../../utils/Workarounds'
import MultiPageIGraphBuilder from './MultiPageIGraphBuilder'
import PageBoundsVisualCreator from './PageBoundsVisualCreator'
import { fetchLicense } from '../../resources/fetch-license'
+import { BrowserDetection } from '../../utils/BrowserDetection'
/**
* This demo demonstrates how the result of a multi-page layout calculation
@@ -352,7 +352,7 @@ function registerCommands(): void {
}
})
bindChangeListener("input[data-command='PageNumberTextBox']", page => {
- const pageNo = parseInt(page) - 1
+ const pageNo = parseInt(page as string) - 1
if (!isNaN(pageNo) && checkPageNumber(pageNo)) {
setPageNumber(pageNo)
}
@@ -405,7 +405,7 @@ function initializeCoreLayouts(): void {
() => {
additionalParentCount.disabled = coreLayoutComboBox.value !== 'Tree'
},
- passiveSupported ? { passive: false } : false
+ BrowserDetection.passiveEventListeners ? { passive: false } : false
)
}
diff --git a/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.js b/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.js
index 3f216b3af..d985b716d 100644
--- a/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.js
+++ b/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.js
@@ -61,6 +61,7 @@ import {
bindAction,
bindChangeListener,
bindCommand,
+ reportDemoError,
showApp
} from '../../resources/demo-app.js'
import {
@@ -276,12 +277,7 @@ async function placeLabels() {
easedAnimation: true
}).start()
} catch (error) {
- const reportError = window.reportError
- if (typeof reportError === 'function') {
- reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
setUIDisabled(false)
}
diff --git a/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.ts b/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.ts
index fe19a6478..859243f54 100644
--- a/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.ts
+++ b/demos/layout/nodelabelplacement/NodeLabelPlacementDemo.ts
@@ -61,6 +61,7 @@ import {
bindAction,
bindChangeListener,
bindCommand,
+ reportDemoError,
showApp
} from '../../resources/demo-app'
import {
@@ -271,12 +272,7 @@ async function placeLabels(): Promise {
easedAnimation: true
}).start()
} catch (error) {
- const reportError = (window as any).reportError
- if (typeof reportError === 'function') {
- reportError(error)
- } else {
- throw error
- }
+ reportDemoError(error)
} finally {
setUIDisabled(false)
}
diff --git a/demos/layout/nodetypes/NodeTypesDemo.js b/demos/layout/nodetypes/NodeTypesDemo.js
index 1b8a9e647..e3cf68a70 100644
--- a/demos/layout/nodetypes/NodeTypesDemo.js
+++ b/demos/layout/nodetypes/NodeTypesDemo.js
@@ -293,30 +293,28 @@ function createCompactDiskSample() {
/**
* Applies the current layout style to the current graph.
* @param {boolean} animate
+ * @param {boolean} considerTypes
* @returns {!Promise}
*/
-async function applyCurrentLayout(animate) {
- setUIDisabled(true)
+async function applyCurrentLayout(animate, considerTypes) {
const sampleComboBox = document.querySelector('#sample-combo-box')
const { layout, layoutData } = samples[sampleComboBox.selectedIndex]
- const considerTypes = document.getElementById('consider-types').checked
const data = considerTypes ? layoutData : null
if (animate) {
- await graphComponent.morphLayout(layout, '700ms', data)
+ await graphComponent.morphLayout(layout, '1000ms', data)
} else {
graphComponent.graph.applyLayout(layout, data)
}
-
- setUIDisabled(false)
}
/**
* Loads the sample currently selected in the combo box, populates the graph and applies
* the respective layout algorithm.
+ * @param {boolean} [previewWithoutNodeTypes=false]
* @returns {!Promise}
*/
-async function loadSample() {
+async function loadSample(previewWithoutNodeTypes = false) {
const sampleComboBox = document.querySelector('#sample-combo-box')
const sample = samples[sampleComboBox.selectedIndex]
graphComponent.graph.clear()
@@ -348,17 +346,42 @@ async function loadSample() {
edgesSource.edgeCreator.defaults.style = defaultEdgeStyle
builder.buildGraph()
- // Apply the current layout that is associated with the newly loaded sample
- await applyCurrentLayout(false)
-
graphComponent.graph.edgeDefaults.style = defaultEdgeStyle
- graphComponent.fitGraphBounds()
+ await arrangeGraph(false, previewWithoutNodeTypes)
// Make the sample change non-undoable
graphComponent.graph.undoEngine.clear()
}
+/**
+ * Arranges the graph with an optional preview arrangement that shows the layout result when
+ * ignoring the node types.
+ * @param {boolean} animate whether the layout should be animated
+ * @param {boolean} previewWithoutNodeTypes whether the layout should first run ignoring the node types to make
+ * the difference easily visible
+ */
+async function arrangeGraph(animate, previewWithoutNodeTypes) {
+ setUIDisabled(true)
+ // Run a layout without considering the node types
+ if (previewWithoutNodeTypes) {
+ updateLayoutPopup(true, 'Node types are not considered')
+ // Apply the current layout that is associated with the newly loaded sample
+ await applyCurrentLayout(animate, false)
+ graphComponent.fitGraphBounds()
+ // Add some delay
+ await new Promise(resolve => setTimeout(resolve, 2000))
+ updateLayoutPopup(true, 'Node types are considered')
+ }
+
+ // Run a layout when considering the node types
+ await applyCurrentLayout(true, true)
+
+ graphComponent.fitGraphBounds()
+ updateLayoutPopup(false)
+ setUIDisabled(false)
+}
+
/**
* Sets up a {@link GraphEditorInputMode} and configures the defaults for the graph component.
*/
@@ -402,11 +425,8 @@ function initializeTypePanel() {
graphComponent.selection.clear()
}
- typePanel.typeChanged = () => {
- const considerTypes = document.getElementById('consider-types').checked
- if (considerTypes) {
- applyCurrentLayout(true)
- }
+ typePanel.typeChanged = async () => {
+ await arrangeGraph(true, false)
}
graphComponent.selection.addItemSelectionChangedListener(
@@ -438,12 +458,11 @@ function registerCommands() {
bindCommand("button[data-command='ZoomOriginal']", ICommand.ZOOM, graphComponent, 1.0)
bindCommand("button[data-command='Undo']", ICommand.UNDO, graphComponent)
bindCommand("button[data-command='Redo']", ICommand.REDO, graphComponent)
- bindAction("button[data-command='Layout']", () => applyCurrentLayout(true))
- bindAction("button[data-command='Reset']", loadSample)
- bindAction('#consider-types', () => applyCurrentLayout(true))
+ bindAction("button[data-command='Layout']", () => arrangeGraph(true, true))
+ bindAction("button[data-command='Reset']", () => loadSample(true))
const sampleComboBox = document.querySelector('#sample-combo-box')
- sampleComboBox.addEventListener('change', loadSample)
+ sampleComboBox.addEventListener('change', () => loadSample(true))
addNavigationButtons(sampleComboBox)
}
@@ -454,10 +473,23 @@ function registerCommands() {
function setUIDisabled(disabled) {
document.querySelector("button[data-command='Reset']").disabled = disabled
document.querySelector("button[data-command='Layout']").disabled = disabled
- document.querySelector('#consider-types').disabled = disabled
document.querySelector('#sample-combo-box').disabled = disabled
graphComponent.inputMode.enabled = !disabled
}
+/**
+ * Updates the layout popup visibility and text.
+ * @param {boolean} visible true if the popup should be visible, false otherwise
+ * @param text the desired text
+ * @param {!string} [text]
+ */
+function updateLayoutPopup(visible, text) {
+ const popup = document.querySelector('#loadingPopup')
+ popup.className = visible ? 'visible' : ''
+ if (text) {
+ popup.innerHTML = text
+ }
+}
+
// noinspection JSIgnoredPromiseFromCall
run()
diff --git a/demos/layout/nodetypes/NodeTypesDemo.ts b/demos/layout/nodetypes/NodeTypesDemo.ts
index 2d970a519..bdc4563dc 100644
--- a/demos/layout/nodetypes/NodeTypesDemo.ts
+++ b/demos/layout/nodetypes/NodeTypesDemo.ts
@@ -285,27 +285,23 @@ function createCompactDiskSample(): Sample {
/**
* Applies the current layout style to the current graph.
*/
-async function applyCurrentLayout(animate: boolean): Promise {
- setUIDisabled(true)
+async function applyCurrentLayout(animate: boolean, considerTypes: boolean): Promise {
const sampleComboBox = document.querySelector('#sample-combo-box')!
const { layout, layoutData } = samples[sampleComboBox.selectedIndex]
- const considerTypes = (document.getElementById('consider-types') as HTMLInputElement).checked
const data = considerTypes ? layoutData : null
if (animate) {
- await graphComponent.morphLayout(layout, '700ms', data)
+ await graphComponent.morphLayout(layout, '1000ms', data)
} else {
graphComponent.graph.applyLayout(layout, data)
}
-
- setUIDisabled(false)
}
/**
* Loads the sample currently selected in the combo box, populates the graph and applies
* the respective layout algorithm.
*/
-async function loadSample(): Promise {
+async function loadSample(previewWithoutNodeTypes = false): Promise {
const sampleComboBox = document.querySelector('#sample-combo-box')!
const sample = samples[sampleComboBox.selectedIndex]
graphComponent.graph.clear()
@@ -337,17 +333,42 @@ async function loadSample(): Promise {
edgesSource.edgeCreator.defaults.style = defaultEdgeStyle
builder.buildGraph()
- // Apply the current layout that is associated with the newly loaded sample
- await applyCurrentLayout(false)
-
graphComponent.graph.edgeDefaults.style = defaultEdgeStyle
- graphComponent.fitGraphBounds()
+ await arrangeGraph(false, previewWithoutNodeTypes)
// Make the sample change non-undoable
graphComponent.graph.undoEngine!.clear()
}
+/**
+ * Arranges the graph with an optional preview arrangement that shows the layout result when
+ * ignoring the node types.
+ * @param animate whether the layout should be animated
+ * @param previewWithoutNodeTypes whether the layout should first run ignoring the node types to make
+ * the difference easily visible
+ */
+async function arrangeGraph(animate: boolean, previewWithoutNodeTypes: boolean) {
+ setUIDisabled(true)
+ // Run a layout without considering the node types
+ if (previewWithoutNodeTypes) {
+ updateLayoutPopup(true, 'Node types are not considered')
+ // Apply the current layout that is associated with the newly loaded sample
+ await applyCurrentLayout(animate, false)
+ graphComponent.fitGraphBounds()
+ // Add some delay
+ await new Promise(resolve => setTimeout(resolve, 2000))
+ updateLayoutPopup(true, 'Node types are considered')
+ }
+
+ // Run a layout when considering the node types
+ await applyCurrentLayout(true, true)
+
+ graphComponent.fitGraphBounds()
+ updateLayoutPopup(false)
+ setUIDisabled(false)
+}
+
/**
* Sets up a {@link GraphEditorInputMode} and configures the defaults for the graph component.
*/
@@ -389,11 +410,8 @@ function initializeTypePanel(): void {
graphComponent.selection.clear()
}
- typePanel.typeChanged = () => {
- const considerTypes = (document.getElementById('consider-types') as HTMLInputElement).checked
- if (considerTypes) {
- applyCurrentLayout(true)
- }
+ typePanel.typeChanged = async () => {
+ await arrangeGraph(true, false)
}
graphComponent.selection.addItemSelectionChangedListener(
@@ -425,12 +443,11 @@ function registerCommands(): void {
bindCommand("button[data-command='ZoomOriginal']", ICommand.ZOOM, graphComponent, 1.0)
bindCommand("button[data-command='Undo']", ICommand.UNDO, graphComponent)
bindCommand("button[data-command='Redo']", ICommand.REDO, graphComponent)
- bindAction("button[data-command='Layout']", () => applyCurrentLayout(true))
- bindAction("button[data-command='Reset']", loadSample)
- bindAction('#consider-types', () => applyCurrentLayout(true))
+ bindAction("button[data-command='Layout']", () => arrangeGraph(true, true))
+ bindAction("button[data-command='Reset']", () => loadSample(true))
const sampleComboBox = document.querySelector('#sample-combo-box')!
- sampleComboBox.addEventListener('change', loadSample)
+ sampleComboBox.addEventListener('change', () => loadSample(true))
addNavigationButtons(sampleComboBox)
}
@@ -441,10 +458,22 @@ function registerCommands(): void {
function setUIDisabled(disabled: boolean): void {
document.querySelector("button[data-command='Reset']")!.disabled = disabled
document.querySelector("button[data-command='Layout']")!.disabled = disabled
- document.querySelector('#consider-types')!.disabled = disabled
document.querySelector('#sample-combo-box')!.disabled = disabled
;(graphComponent.inputMode as GraphEditorInputMode).enabled = !disabled
}
+/**
+ * Updates the layout popup visibility and text.
+ * @param visible true if the popup should be visible, false otherwise
+ * @param text the desired text
+ */
+function updateLayoutPopup(visible: boolean, text?: string) {
+ const popup = document.querySelector('#loadingPopup')!
+ popup.className = visible ? 'visible' : ''
+ if (text) {
+ popup.innerHTML = text
+ }
+}
+
// noinspection JSIgnoredPromiseFromCall
run()
diff --git a/demos/layout/nodetypes/README.md b/demos/layout/nodetypes/README.md
index ed04209bc..726d34d45 100644
--- a/demos/layout/nodetypes/README.md
+++ b/demos/layout/nodetypes/README.md
@@ -12,6 +12,5 @@ The type is generally treated as a secondary, subordinate optimization criterion
## Things to Try
-- Use the combo box to choose a specific layout algorithm. This automatically loads a suitable example graph.
-- Compare the results with and without considering node types. Use the 'Consider Types' toggle button to change the setting.
+- Use the combo box to choose a specific layout algorithm. This automatically loads a suitable example graph. The graph is arranged twice with and without considering node types to show how different the algorithm behaves when node types are considered.
- Modify the graph by adding new elements or changing the type of existing nodes via the context menu and observe the effect on the layout. The context menu can be accessed by clicking on a node.
diff --git a/demos/layout/nodetypes/index.html b/demos/layout/nodetypes/index.html
index 190541501..f706feb65 100644
--- a/demos/layout/nodetypes/index.html
+++ b/demos/layout/nodetypes/index.html
@@ -74,6 +74,29 @@
.current-type {
border: thick solid darkseagreen;
}
+
+ #loadingPopup {
+ position: absolute;
+ bottom: 10%;
+ left: 0;
+ right: 0;
+ height: 80px;
+ margin-top: -40px;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ padding-top: 10px;
+ text-align: center;
+ font-size: 32pt;
+ opacity: 0;
+ transition: opacity 1s ease-out;
+ }
+
+ #loadingPopup.visible {
+ opacity: 100;
+ transition: opacity 0.3s ease-in;
+ }
@@ -102,11 +125,8 @@