Skip to content

Commit 68d0204

Browse files
yGuyyGuy
committed
Committed yFiles for HTML 2.1.0.3 demos
1 parent 98af5ba commit 68d0204

File tree

1,285 files changed

+477833
-3
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,285 files changed

+477833
-3
lines changed

‎LICENSE

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
These demo files are part of yFiles for HTML 2.1.
2+
https://www.yworks.com/yfileshtml
3+
Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
4+
72070 Tuebingen, Germany. All rights reserved.
5+
6+
yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
7+
of demo files in source code or other form, with or without
8+
modification, is not permitted. The creation of derivative works is prohibited,
9+
unless otherwise explicitly permitted.
10+
11+
Owners of a valid software license for a yFiles for HTML version
12+
are allowed to use these demo sources as basis
13+
for their own yFiles for HTML powered applications. Use of such programs is
14+
governed by the rights and conditions as set out in the yFiles for HTML
15+
license agreement.
16+
17+
THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
18+
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
19+
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
20+
NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
22+
TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
23+
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
24+
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
25+
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
26+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
# yFiles for HTML Demo Sources
22

3-
This repository contains source code demos that use the commercial [yFiles for HTML](https://www.yworks.com/yfileshtml) software programming library for the visualization of graphs, diagrams, and networks. The library itself is *not* part of this repository.
3+
This repository contains source code demos that use the commercial [yFiles for HTML](https://www.yworks.com/yfileshtml) software programming library for the visualization of graphs, diagrams, and networks. The library itself is __*not*__ part of this repository.
44

55
# Running the Demos
66

7-
Most of the demos are hosted [online here](http://live.yworks.com/yfiles-for-html) for everyone to play with. Developers should [evaluate the library](https://www.yworks.com/products/yfiles-for-html/evaluate), instead. The evaluation version contains most of the demos and the necessary library to execute the code.
7+
![yFiles for HTML Demos](./demo-grid.png)
8+
9+
Most of the demos are hosted [online here](https://live.yworks.com/yfiles-for-html) for everyone to play with. Developers should [evaluate the library](https://www.yworks.com/products/yfiles-for-html/evaluate), instead.
10+
The evaluation version also contains these demos and the necessary library to execute the code.
811

912
# License
1013

11-
Use of the software hosted in this repository is subject to the license terms of either the corresponding yFiles for HTML license. As an evaluator or licensee of the library you may use the code hosted in this repository for your yFiles for HTML powered applications.
14+
Use of the software hosted in this repository is subject to the license terms of the corresponding yFiles for HTML license.
15+
Owners of a valid software license for a yFiles for HTML version that these
16+
demos are shipped with are allowed to use the demo source code as basis
17+
for their own yFiles for HTML powered applications. Use of such programs is
18+
governed by the rights and conditions as set out in the yFiles for HTML
19+
license agreement.

‎demo-grid.png

641 KB
Loading

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/****************************************************************************
2+
** @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,
5+
** 72070 Tuebingen, Germany. All rights reserved.
6+
**
7+
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
8+
** of demo files in source code or binary form, with or without
9+
** modification, is not permitted.
10+
**
11+
** Owners of a valid software license for a yFiles for HTML version that this
12+
** demo is shipped with are allowed to use the demo source code as basis
13+
** for their own yFiles for HTML powered applications. Use of such programs is
14+
** governed by the rights and conditions as set out in the yFiles for HTML
15+
** license agreement.
16+
**
17+
** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
18+
** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
19+
** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
20+
** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
22+
** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
23+
** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
24+
** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
25+
** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
26+
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
**
28+
***************************************************************************/
29+
'use strict'
30+
31+
// configure AMD loading
32+
// tell it where to resolve the module paths
33+
require.config({
34+
baseUrl: '../../../lib/umd/'
35+
})
36+
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+
}
52+
53+
init()
54+
})

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
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."/>
8+
9+
<!-- ////////////////////////////////////////////////////////////////////////
10+
// @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,
13+
// 72070 Tuebingen, Germany. All rights reserved.
14+
//
15+
// yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
16+
// of demo files in source code or binary form, with or without
17+
// modification, is not permitted.
18+
//
19+
// Owners of a valid software license for a yFiles for HTML version that this
20+
// demo is shipped with are allowed to use the demo source code as basis
21+
// for their own yFiles for HTML powered applications. Use of such programs is
22+
// governed by the rights and conditions as set out in the yFiles for HTML
23+
// license agreement.
24+
//
25+
// THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
26+
// WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
27+
// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
28+
// NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
29+
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
30+
// TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
31+
// PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
32+
// LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33+
// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
34+
// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
35+
//
36+
////////////////////////////////////////////////////////////////////////-->
37+
38+
<title>Creating the View - Getting Started Tutorial [yFiles for HTML]</title>
39+
<link type="text/css" rel="stylesheet" href="../../../lib/yfiles.css">
40+
41+
<style>
42+
html {
43+
font-family: Myriad, Tahoma, Verdana, sans-serif;
44+
font-size: 12px;
45+
}
46+
html, body, #graphComponent {
47+
width: 100%;
48+
height: 100%;
49+
padding: 0;
50+
margin: 0;
51+
}
52+
.descriptionPanel {
53+
box-sizing: border-box;
54+
-moz-box-sizing: border-box;
55+
border-right: 1px solid black;
56+
padding: 5px;
57+
}
58+
</style>
59+
60+
<!-- enable debugging -->
61+
<script src="../../../ide-support/yfiles-typeinfo.js"></script>
62+
63+
</head>
64+
<body>
65+
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
66+
<h3>How to create a basic view.</h3>
67+
68+
<p>This step introduces class <a href="https://docs.yworks.com/yfileshtml/#/api/yfiles.view.GraphComponent">yfiles.view.GraphComponent</a>, which is the
69+
<a href="https://docs.yworks.com/yfileshtml/#/dguide/getting_started-application">
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>
73+
74+
<p>See the sources for details.</p>
75+
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>
79+
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>
90+
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>
96+
</body>
97+
</html>

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

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/****************************************************************************
2+
** @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,
5+
** 72070 Tuebingen, Germany. All rights reserved.
6+
**
7+
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
8+
** of demo files in source code or binary form, with or without
9+
** modification, is not permitted.
10+
**
11+
** Owners of a valid software license for a yFiles for HTML version that this
12+
** demo is shipped with are allowed to use the demo source code as basis
13+
** for their own yFiles for HTML powered applications. Use of such programs is
14+
** governed by the rights and conditions as set out in the yFiles for HTML
15+
** license agreement.
16+
**
17+
** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
18+
** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
19+
** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
20+
** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
21+
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
22+
** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
23+
** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
24+
** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
25+
** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
26+
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27+
**
28+
***************************************************************************/
29+
'use strict'
30+
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 /////////////////
61+
62+
// Populates the graph and overrides some styles and label models
63+
populateGraph()
64+
65+
// ////////////////////////////////////////////////////
66+
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+
}
72+
73+
// /////////////// New in this Sample /////////////////
74+
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 ///////////////////
81+
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))
90+
91+
// ///////////////////////////////////////////////////
92+
93+
// ////////// Sample edge creation ///////////////////
94+
95+
// Creates some edges between the nodes
96+
graph.createEdge(node1, node2)
97+
const edge = graph.createEdge(node2, node3)
98+
99+
// ///////////////////////////////////////////////////
100+
101+
// ////////// Using Bends ////////////////////////////
102+
103+
// Creates the first bend for edge at (260, 30)
104+
graph.addBend(edge, new yfiles.geometry.Point(260, 30))
105+
106+
// ///////////////////////////////////////////////////
107+
108+
// ////////// Using Ports ////////////////////////////
109+
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+
)
118+
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+
)
125+
126+
// Creates an edge that connects these specific ports
127+
const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)
128+
129+
// ///////////////////////////////////////////////////
130+
131+
// ////////// Sample label creation ///////////////////
132+
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')
138+
139+
// ///////////////////////////////////////////////////
140+
}
141+
142+
// ////////////////////////////////////////////////////
143+
144+
// start tutorial
145+
run()
146+
})

0 commit comments

Comments
 (0)