Skip to content

Commit 58aa22c

Browse files
fskpffskpf
committed
yFiles for HTML 2.2 demos
1 parent eeea3aa commit 58aa22c

File tree

1,195 files changed

+214361
-206458
lines changed

Some content is hidden

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

1,195 files changed

+214361
-206458
lines changed

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

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/****************************************************************************
22
** @license
3-
** This demo file is part of yFiles for HTML 2.1.
4-
** Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
3+
** This demo file is part of yFiles for HTML 2.2.
4+
** Copyright (c) 2000-2019 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,29 +26,20 @@
2626
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
2727
**
2828
***************************************************************************/
29-
'use strict'
29+
import { GraphComponent, License } from 'yfiles'
3030

31-
// configure AMD loading
32-
// tell it where to resolve the module paths
33-
require.config({
34-
baseUrl: '../../../lib/umd/'
35-
})
31+
import loadJson from '../../resources/load-json.js'
3632

37-
// we load the basic component module and the license file
38-
require([
39-
'yfiles/view-component',
40-
'../../resources/license.js'
41-
], /** @type {yfiles_namespace} */ /** typeof yfiles */ yfiles => {
42-
function init() {
43-
// instantiate the graph component in the existing div specified by the CSS selector
44-
const graphComponent = new yfiles.view.GraphComponent('#graphComponent')
45-
// create one simple node as an example
46-
const node = graphComponent.graph.createNode()
47-
// and add a label to it
48-
graphComponent.graph.addLabel(node, '1')
49-
// then center the graph in the component
50-
graphComponent.fitGraphBounds()
51-
}
33+
function run(licenseData) {
34+
License.value = licenseData
5235

53-
init()
54-
})
36+
const graphComponent = new GraphComponent('#graphComponent')
37+
// create one simple node as an example
38+
const node = graphComponent.graph.createNode()
39+
// and add a label to it
40+
graphComponent.graph.addLabel(node, '1')
41+
// then center the graph in the component
42+
graphComponent.fitGraphBounds()
43+
}
44+
45+
loadJson().then(run)

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

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="demodescription"
7-
content="This step introduces class GraphComponent, which is the central UI element for working with graphs."/>
7+
content="This step introduces class GraphComponent, which is the central UI element for working with graphs."/>
88

99
<!-- ////////////////////////////////////////////////////////////////////////
1010
// @license
11-
// This demo file is part of yFiles for HTML 2.1.
12-
// Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
11+
// This demo file is part of yFiles for HTML 2.2.
12+
// Copyright (c) 2000-2019 by yWorks GmbH, Vor dem Kreuzberg 28,
1313
// 72070 Tuebingen, Germany. All rights reserved.
1414
//
1515
// yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
@@ -36,19 +36,21 @@
3636
////////////////////////////////////////////////////////////////////////-->
3737

3838
<title>Creating the View - Getting Started Tutorial [yFiles for HTML]</title>
39-
<link type="text/css" rel="stylesheet" href="../../../lib/yfiles.css">
39+
<link type="text/css" rel="stylesheet" href="../../node_modules/yfiles/yfiles.css">
4040

4141
<style>
4242
html {
4343
font-family: Myriad, Tahoma, Verdana, sans-serif;
4444
font-size: 12px;
4545
}
46+
4647
html, body, #graphComponent {
4748
width: 100%;
4849
height: 100%;
4950
padding: 0;
5051
margin: 0;
5152
}
53+
5254
.descriptionPanel {
5355
box-sizing: border-box;
5456
-moz-box-sizing: border-box;
@@ -59,39 +61,35 @@
5961

6062
<!-- enable debugging -->
6163
<script src="../../../ide-support/yfiles-typeinfo.js"></script>
64+
<script src="../../resources/filesystem-warning.js"></script>
6265

6366
</head>
6467
<body>
65-
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
66-
<h3>How to create a basic view.</h3>
68+
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
69+
<h3>How to create a basic view.</h3>
6770

68-
<p>This step introduces class <a href="https://docs.yworks.com/yfileshtml/#/api/yfiles.view.GraphComponent" target="_blank">yfiles.view.GraphComponent</a>, which is the
69-
<a href="https://docs.yworks.com/yfileshtml/#/dguide/getting_started-application" target="_blank">
70-
central UI element for working with graphs</a>. The application
71-
does not provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely
72-
meant as a very basic example of how to display a GraphComponent within a web page.</p>
71+
<p>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
72+
provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely meant as a
73+
very basic example of how to display a GraphComponent within a web page.</p>
7374

74-
<p>See the sources for details.</p>
75+
<p>See the sources for details.</p>
7576

76-
<p>Please note that the subsequent tutorial steps use a web component framework (demo-utils) to reduce the
77-
amount of code that is needed to demonstrate the relevant features. All of the code samples included in this
78-
distribution are also feasible using plain HTML and JavaScript together with yFiles HTML. </p>
77+
<p>Please note that the subsequent tutorial steps use a web component framework (demo-utils) to reduce the amount of
78+
code that is needed to demonstrate the relevant features. All of the code samples included in this distribution are
79+
also feasible using plain HTML and JavaScript together with yFiles HTML. </p>
7980

80-
<h4>Important Note</h4>
81-
<p>
82-
yFiles provides <a href="https://docs.yworks.com/yfileshtml/index.html#/kb/article/704/Browser_issues_and_included_workarounds"
83-
target="_blank">workarounds</a> which address several bugs in current browsers. Find <code>demos/resources/demo-util.js</code>
84-
as a reference on how several of them are enabled for most of the demos and how to enable them for this demo, too.
85-
</p>
86-
</div>
87-
<div style="width:80%; height: 100%; padding-left: 20%">
88-
<div id="graphComponent"></div>
89-
</div>
81+
<h4>Important Note</h4>
82+
<p>
83+
yFiles provides <a
84+
href="https://docs.yworks.com/yfileshtml/index.html#/kb/article/704/Browser_issues_and_included_workarounds"
85+
target="_blank">workarounds</a> which address several bugs in current browsers. Find <code>demos/resources/demo-util.js</code>
86+
as a reference on how several of them are enabled for most of the demos and how to enable them for this demo, too.
87+
</p>
88+
</div>
89+
<div style="width:80%; height: 100%; padding-left: 20%">
90+
<div id="graphComponent"></div>
91+
</div>
9092

91-
<!-- You can use any AMD compatible "require" implementation to load the JavaScript resources.
92-
See the "AMD Loading Demo" for more examples on module loading and alternative loading techhniques in the
93-
"loading" demo directory. -->
94-
<script src="../../resources/require.js"></script>
95-
<script src="SampleApplication.js"></script>
93+
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
9694
</body>
9795
</html>

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

Lines changed: 74 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/****************************************************************************
22
** @license
3-
** This demo file is part of yFiles for HTML 2.1.
4-
** Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
3+
** This demo file is part of yFiles for HTML 2.2.
4+
** Copyright (c) 2000-2019 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,121 +26,99 @@
2626
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
2727
**
2828
***************************************************************************/
29-
'use strict'
29+
import { FreeNodePortLocationModel, GraphComponent, IGraph, License, Point, Rect } from 'yfiles'
30+
import { showApp } from '../../resources/demo-app.js'
31+
import loadJson from '../../resources/load-json.js'
32+
/** @type {GraphComponent} */
33+
let graphComponent = null
34+
35+
/** @type {IGraph} */
36+
let graph = null
37+
38+
function run(licenseData) {
39+
License.value = licenseData
40+
// Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
41+
graphComponent = new GraphComponent('#graphComponent')
42+
// conveniently store a reference to the graph that is displayed in the closure variable
43+
graph = graphComponent.graph
3044

31-
require.config({
32-
paths: {
33-
yfiles: '../../../lib/umd/yfiles/',
34-
utils: '../../utils/',
35-
resources: '../../resources/'
36-
}
37-
})
38-
39-
/**
40-
* Getting Started - 02 Creating Graph Elements
41-
* This demo shows how to create the basic graph elements in yFiles for HTML:
42-
* nodes, edges, bends, ports, and labels.
43-
*/
44-
require(['yfiles/view-editor', 'resources/demo-app', 'resources/license'], (
45-
/** @type {yfiles_namespace} */ /** typeof yfiles */ yfiles,
46-
app
47-
) => {
48-
/** @type {yfiles.view.GraphComponent} */
49-
let graphComponent = null
50-
51-
/** @type {yfiles.graph.IGraph} */
52-
let graph = null
53-
54-
function run() {
55-
// Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
56-
graphComponent = new yfiles.view.GraphComponent('#graphComponent')
57-
// conveniently store a reference to the graph that is displayed in the closure variable
58-
graph = graphComponent.graph
59-
60-
// /////////////// New in this Sample /////////////////
45+
// /////////////// New in this Sample /////////////////
6146

62-
// Populates the graph and overrides some styles and label models
63-
populateGraph()
47+
// Populates the graph and overrides some styles and label models
48+
populateGraph()
6449

65-
// ////////////////////////////////////////////////////
50+
// ////////////////////////////////////////////////////
6651

67-
// Initialize the demo application's CSS and Javascript for the description
68-
// this is specific for the tiny little demo framework we are using
69-
// and not relevant in other applications.
70-
app.show(graphComponent)
71-
}
52+
// Initialize the demo application's CSS and Javascript for the description
53+
// this is specific for the tiny little demo framework we are using
54+
// and not relevant in other applications.
55+
showApp(graphComponent)
56+
}
7257

73-
// /////////////// New in this Sample /////////////////
58+
// /////////////// New in this Sample /////////////////
7459

75-
/**
76-
* Creates a sample graph and introduces all important graph elements present in
77-
* yFiles for HTML. Additionally, this method now overrides the label placement for some specific labels.
78-
*/
79-
function populateGraph() {
80-
// ////////// Sample node creation ///////////////////
60+
/**
61+
* Creates a sample graph and introduces all important graph elements present in
62+
* yFiles for HTML. Additionally, this method now overrides the label placement for some specific labels.
63+
*/
64+
function populateGraph() {
65+
// ////////// Sample node creation ///////////////////
8166

82-
// Creates two nodes with the default node size
83-
// The location is specified for the _center_
84-
const node1 = graph.createNodeAt(new yfiles.geometry.Point(30, 30))
85-
const node2 = graph.createNodeAt(new yfiles.geometry.Point(150, 30))
86-
// Creates a third node with a different size of 60x30
87-
// In this case, the location of (400,400) describes the _upper left_
88-
// corner of the node bounds
89-
const node3 = graph.createNode(new yfiles.geometry.Rect(230, 200, 60, 30))
67+
// Creates two nodes with the default node size
68+
// The location is specified for the _center_
69+
const node1 = graph.createNodeAt(new Point(30, 30))
70+
const node2 = graph.createNodeAt(new Point(150, 30))
71+
// Creates a third node with a different size of 60x30
72+
// In this case, the location of (400,400) describes the _upper left_
73+
// corner of the node bounds
74+
const node3 = graph.createNode(new Rect(230, 200, 60, 30))
9075

91-
// ///////////////////////////////////////////////////
76+
// ///////////////////////////////////////////////////
9277

93-
// ////////// Sample edge creation ///////////////////
78+
// ////////// Sample edge creation ///////////////////
9479

95-
// Creates some edges between the nodes
96-
graph.createEdge(node1, node2)
97-
const edge = graph.createEdge(node2, node3)
80+
// Creates some edges between the nodes
81+
graph.createEdge(node1, node2)
82+
const edge = graph.createEdge(node2, node3)
9883

99-
// ///////////////////////////////////////////////////
84+
// ///////////////////////////////////////////////////
10085

101-
// ////////// Using Bends ////////////////////////////
86+
// ////////// Using Bends ////////////////////////////
10287

103-
// Creates the first bend for edge at (260, 30)
104-
graph.addBend(edge, new yfiles.geometry.Point(260, 30))
88+
// Creates the first bend for edge at (260, 30)
89+
graph.addBend(edge, new Point(260, 30))
10590

106-
// ///////////////////////////////////////////////////
91+
// ///////////////////////////////////////////////////
10792

108-
// ////////// Using Ports ////////////////////////////
93+
// ////////// Using Ports ////////////////////////////
10994

110-
// Actually, edges connect "ports", not nodes directly.
111-
// If necessary, you can manually create ports at nodes
112-
// and let the edges connect to these.
113-
// Creates a port in the center of the node layout
114-
const port1AtNode1 = graph.addPort(
115-
node1,
116-
yfiles.graph.FreeNodePortLocationModel.NODE_CENTER_ANCHORED
117-
)
95+
// Actually, edges connect "ports", not nodes directly.
96+
// If necessary, you can manually create ports at nodes
97+
// and let the edges connect to these.
98+
// Creates a port in the center of the node layout
99+
const port1AtNode1 = graph.addPort(node1, FreeNodePortLocationModel.NODE_CENTER_ANCHORED)
118100

119-
// Creates a port at the middle of the left border
120-
// Note to use absolute locations when placing ports using PointD.
121-
const port1AtNode3 = graph.addPortAt(
122-
node3,
123-
new yfiles.geometry.Point(node3.layout.x, node3.layout.center.y)
124-
)
101+
// Creates a port at the middle of the left border
102+
// Note to use absolute locations when placing ports using PointD.
103+
const port1AtNode3 = graph.addPortAt(node3, new Point(node3.layout.x, node3.layout.center.y))
125104

126-
// Creates an edge that connects these specific ports
127-
const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)
105+
// Creates an edge that connects these specific ports
106+
const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)
128107

129-
// ///////////////////////////////////////////////////
108+
// ///////////////////////////////////////////////////
130109

131-
// ////////// Sample label creation ///////////////////
110+
// ////////// Sample label creation ///////////////////
132111

133-
// Adds labels to several graph elements
134-
graph.addLabel(node1, 'n1')
135-
graph.addLabel(node2, 'n2')
136-
graph.addLabel(node3, 'n3')
137-
graph.addLabel(edgeAtPorts, 'Edge at Ports')
112+
// Adds labels to several graph elements
113+
graph.addLabel(node1, 'n1')
114+
graph.addLabel(node2, 'n2')
115+
graph.addLabel(node3, 'n3')
116+
graph.addLabel(edgeAtPorts, 'Edge at Ports')
138117

139-
// ///////////////////////////////////////////////////
140-
}
118+
// ///////////////////////////////////////////////////
119+
}
141120

142-
// ////////////////////////////////////////////////////
121+
// ////////////////////////////////////////////////////
143122

144-
// start tutorial
145-
run()
146-
})
123+
// start tutorial
124+
loadJson().then(run)

‎demos/01-tutorial-getting-started/02-graph-element-creation/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
<!-- ////////////////////////////////////////////////////////////////////////
99
// @license
10-
// This demo file is part of yFiles for HTML 2.1.
11-
// Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
10+
// This demo file is part of yFiles for HTML 2.2.
11+
// Copyright (c) 2000-2019 by yWorks GmbH, Vor dem Kreuzberg 28,
1212
// 72070 Tuebingen, Germany. All rights reserved.
1313
//
1414
// yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
@@ -36,10 +36,12 @@
3636

3737
<title>Creating Graph Elements - Getting Started Tutorial [yFiles for HTML]</title>
3838

39-
<link rel="stylesheet" href="../../../lib/yfiles.css">
39+
<link rel="stylesheet" href="../../node_modules/yfiles/yfiles.css">
4040
<link rel="stylesheet" href="../../resources/style/demo.css">
4141

42-
<script src="../../../ide-support/yfiles-typeinfo.js"></script><!-- enable debugging -->
42+
<script src="../../../ide-support/yfiles-typeinfo.js"></script>
43+
44+
<script src="../../resources/filesystem-warning.js"></script><!-- enable debugging -->
4345
</head>
4446
<body class="demo-has-left">
4547
<!--
@@ -59,10 +61,9 @@ <h3>How to create a graph programmatically.</h3>
5961
</aside>
6062

6163
<div class="demo-content">
62-
<div id="graphComponent" style="top: 60px;"></div>
64+
<div id="graphComponent"></div>
6365
</div>
6466

65-
<script src="../../resources/require.js"></script>
66-
<script src="SampleApplication.js"></script>
67+
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
6768
</body>
6869
</html>

0 commit comments

Comments
 (0)