Skip to content

Commit 39e29b1

Browse files
michabaurmichabaur
committed
yFiles for HTML 2.4.0.5 demos
1 parent 42cba61 commit 39e29b1

File tree

2,783 files changed

+47170
-34188
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,783 files changed

+47170
-34188
lines changed

‎demos/.prettierignore

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
**/node_modules/
1+
**/build/
22
**/dist/
3-
**/*.html
4-
**/*.md
5-
/starter-kits/**
3+
**/node_modules/
64
/03-tutorial-application-features/webgl-rendering/resources/*.json
75
/internal/webgl-performance-tests/resources/*.json
6+
/starter-kits/**
87
/view/large-graphs/resources/*.json
98
/view/rendering-optimizations/resources/*.json

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@
44

55
[You can also run this demo online](https://live.yworks.com/demos/01-tutorial-getting-started/01-graphcomponent/index.html).
66

7-
## How to create a basic view
7+
Getting Started Tutorial - Step 1
88

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

1115
See the sources for details.
1216

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/****************************************************************************
22
** @license
33
** This demo file is part of yFiles for HTML 2.4.
4-
** Copyright (c) 2000-2021 by yWorks GmbH, Vor dem Kreuzberg 28,
4+
** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
55
** 72070 Tuebingen, Germany. All rights reserved.
66
**
77
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
@@ -26,10 +26,12 @@
2626
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
2727
**
2828
***************************************************************************/
29-
import { GraphComponent, License } from 'yfiles'
29+
import { ExteriorLabelModel, GraphComponent, License } from 'yfiles'
3030

3131
import loadJson from '../../resources/load-json.js'
3232

33+
import { enableWorkarounds } from '../../utils/Workarounds.js'
34+
3335
/**
3436
* @param {!object} licenseData
3537
*/
@@ -40,9 +42,10 @@ function run(licenseData) {
4042
// create one simple node as an example
4143
const node = graphComponent.graph.createNode()
4244
// and add a label to it
43-
graphComponent.graph.addLabel(node, '1')
45+
graphComponent.graph.addLabel(node, 'Node 1', ExteriorLabelModel.SOUTH)
4446
// then center the graph in the component
4547
graphComponent.fitGraphBounds()
4648
}
4749

50+
enableWorkarounds()
4851
loadJson().then(run)

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/****************************************************************************
22
** @license
33
** This demo file is part of yFiles for HTML 2.4.
4-
** Copyright (c) 2000-2021 by yWorks GmbH, Vor dem Kreuzberg 28,
4+
** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
55
** 72070 Tuebingen, Germany. All rights reserved.
66
**
77
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
@@ -26,20 +26,23 @@
2626
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
2727
**
2828
***************************************************************************/
29-
import { GraphComponent, License } from 'yfiles'
29+
import { ExteriorLabelModel, GraphComponent, License } from 'yfiles'
3030

3131
import loadJson from '../../resources/load-json'
3232

33+
import { enableWorkarounds } from '../../utils/Workarounds'
34+
3335
function run(licenseData: object): void {
3436
License.value = licenseData
3537

3638
const graphComponent = new GraphComponent('#graphComponent')
3739
// create one simple node as an example
3840
const node = graphComponent.graph.createNode()
3941
// and add a label to it
40-
graphComponent.graph.addLabel(node, '1')
42+
graphComponent.graph.addLabel(node, 'Node 1', ExteriorLabelModel.SOUTH)
4143
// then center the graph in the component
4244
graphComponent.fitGraphBounds()
4345
}
4446

47+
enableWorkarounds()
4548
loadJson().then(run)

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

Lines changed: 99 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="demodescription"
7-
content="This step introduces class GraphComponent, which is the central UI element for working with graphs."/>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="demodescription"
8+
content="This step introduces class GraphComponent, which is the central UI element for working with graphs."
9+
/>
810

911
<!-- ////////////////////////////////////////////////////////////////////////
1012
// @license
1113
// This demo file is part of yFiles for HTML 2.4.
12-
// Copyright (c) 2000-2021 by yWorks GmbH, Vor dem Kreuzberg 28,
14+
// Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
1315
// 72070 Tuebingen, Germany. All rights reserved.
1416
//
1517
// yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
@@ -35,72 +37,95 @@
3537
//
3638
////////////////////////////////////////////////////////////////////////-->
3739

38-
<title>Creating the View - Getting Started Tutorial [yFiles for HTML]</title>
39-
40-
<style>
41-
html {
42-
font-family: Myriad, Tahoma, Verdana, sans-serif;
43-
font-size: 12px;
44-
}
45-
46-
html, body, #graphComponent {
47-
width: 100%;
48-
height: 100%;
49-
padding: 0;
50-
margin: 0;
51-
}
52-
53-
.descriptionPanel {
54-
box-sizing: border-box;
55-
-moz-box-sizing: border-box;
56-
border-right: 1px solid black;
57-
padding: 5px;
58-
}
59-
</style>
60-
61-
<script src="../../resources/filesystem-warning.js"></script>
62-
63-
</head>
64-
<body>
65-
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
66-
<h2>How to create a basic view</h2>
67-
68-
<p>
69-
This step introduces class <a href="https://docs.yworks.com/yfileshtml/#/api/GraphComponent" target="_blank">GraphComponent</a>, which is the <a href="https://docs.yworks.com/yfileshtml/#/dguide/getting_started-application" target="_blank"> central UI element for working with graphs</a>. The application does not
70-
provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely meant as a
71-
very basic example of how to display a GraphComponent within a web page.
72-
</p>
73-
74-
<p>
75-
See the sources for details.
76-
</p>
77-
78-
<p>
79-
Please note that the subsequent tutorial steps use a web component framework (demo-utils) to reduce the amount of
80-
code that is needed to demonstrate the relevant features. All of the code samples included in this distribution are
81-
also feasible using plain HTML and JavaScript together with yFiles HTML.
82-
</p>
83-
84-
<h4>Important Note</h4>
85-
86-
<p>
87-
yFiles provides <a
88-
href="https://docs.yworks.com/yfileshtml/index.html#/kb/article/704/Browser_issues_and_included_workarounds"
89-
target="_blank">workarounds</a> which address several bugs in current browsers. Find <code>demos-js/resources/demo-util.js</code>
90-
as a reference on how several of them are enabled for most of the demos and how to enable them for this demo, too.
91-
</p>
92-
93-
<h2>App Generator</h2>
94-
95-
<p>
96-
Use the <a href='https://www.yworks.com/products/app-generator' target='_blank' rel='noopener noreferrer'>App
97-
Generator</a> to create visualization prototypes – quickly and easily.
98-
</p>
99-
</div>
100-
<div style="width:80%; height: 100%; padding-left: 20%">
101-
<div id="graphComponent"></div>
102-
</div>
103-
104-
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
105-
</body>
40+
<title>Creating the View - Getting Started Tutorial [yFiles for HTML]</title>
41+
42+
<style>
43+
html {
44+
font-family: Myriad, Tahoma, Verdana, sans-serif;
45+
font-size: 14px;
46+
line-height: 140%;
47+
}
48+
49+
html,
50+
body {
51+
width: 100%;
52+
height: 100%;
53+
padding: 0;
54+
margin: 0;
55+
}
56+
57+
.descriptionPanel {
58+
position: absolute;
59+
left: 20px;
60+
top: 20px;
61+
width: 20em;
62+
padding: 16px;
63+
background: #e0edf0;
64+
z-index: 100;
65+
}
66+
</style>
67+
68+
<script src="../../resources/filesystem-warning.js"></script>
69+
</head>
70+
<body>
71+
<div style="width: 100%; height: 100%" id="graphComponent"></div>
72+
73+
<div class="descriptionPanel">
74+
<div style="font-size: larger; font-weight: bold; white-space: nowrap">
75+
Getting Started Tutorial - Step&nbsp;1
76+
</div>
77+
78+
<h1>Creating the View</h1>
79+
80+
<p style="font-size: larger">How to create a basic view.</p>
81+
82+
<p>
83+
This step introduces class <a href="https://docs.yworks.com/yfileshtml/#/api/GraphComponent" target="_blank">GraphComponent</a>, which is the
84+
<dguide section="getting_started-application"
85+
>central UI element for working with graphs</dguide
86+
>. The application does not provide any interactive features except mouse wheel zooming,
87+
which is enabled by default. It is merely meant as a very basic example of how to display a
88+
GraphComponent within a web page.
89+
</p>
90+
91+
<p>See the sources for details.</p>
92+
93+
<p>
94+
Please note that the subsequent tutorial steps use a web component framework (demo-utils) to
95+
reduce the amount of code that is needed to demonstrate the relevant features. All of the
96+
code samples included in this distribution are also feasible using plain HTML and JavaScript
97+
together with yFiles HTML.
98+
</p>
99+
100+
<h4>Important Note</h4>
101+
102+
<p>
103+
yFiles provides
104+
<a
105+
href="https://docs.yworks.com/yfileshtml/index.html#/kb/article/704/Browser_issues_and_included_workarounds"
106+
target="_blank"
107+
>workarounds</a
108+
>
109+
which address several bugs in current browsers. Find
110+
<code>demos-js/resources/demo-util.js</code>
111+
as a reference on how several of them are enabled for most of the demos and how to enable
112+
them for this demo, too.
113+
</p>
114+
115+
<h2>App Generator</h2>
116+
117+
<p>
118+
Use the
119+
<a
120+
href="https://www.yworks.com/products/app-generator"
121+
target="_blank"
122+
rel="noopener noreferrer"
123+
>App Generator</a
124+
>
125+
to create visualization prototypes – quickly and easily.
126+
</p>
127+
</div>
128+
129+
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
130+
</body>
106131
</html>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44

55
[You can also run this demo online](https://live.yworks.com/demos/01-tutorial-getting-started/02-graph-element-creation/index.html).
66

7-
## Tutorial Demo 2
7+
Getting Started Tutorial - Step 2
88

9-
### How to create a graph programmatically.
9+
# Creating Graph Elements
1010

11-
This step shows how to [create the basic graph elements](https://docs.yworks.com/yfileshtml/#/dguide/getting_started-creating_graph_elements).
11+
How to create a graph programmatically.
12+
13+
This step shows how to create the basic graph elements.
1214

1315
See the sources for details.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/****************************************************************************
22
** @license
33
** This demo file is part of yFiles for HTML 2.4.
4-
** Copyright (c) 2000-2021 by yWorks GmbH, Vor dem Kreuzberg 28,
4+
** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
55
** 72070 Tuebingen, Germany. All rights reserved.
66
**
77
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/****************************************************************************
22
** @license
33
** This demo file is part of yFiles for HTML 2.4.
4-
** Copyright (c) 2000-2021 by yWorks GmbH, Vor dem Kreuzberg 28,
4+
** Copyright (c) 2000-2022 by yWorks GmbH, Vor dem Kreuzberg 28,
55
** 72070 Tuebingen, Germany. All rights reserved.
66
**
77
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution

0 commit comments

Comments
 (0)