Skip to content

Commit

Permalink
yFiles for HTML 2.2 demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@fskpf
fskpf committed Apr 11, 2019
1 parent eeea3aa commit 58aa22c
Show file tree
Hide file tree
Showing 1,195 changed files with 214,361 additions and 206,458 deletions.
41 changes: 16 additions & 25 deletions demos/01-tutorial-getting-started/01-graphcomponent/SampleApplication.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/****************************************************************************
** @license
** This demo file is part of yFiles for HTML 2.1.
** Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
** This demo file is part of yFiles for HTML 2.2.
** Copyright (c) 2000-2019 by yWorks GmbH, Vor dem Kreuzberg 28,
** 72070 Tuebingen, Germany. All rights reserved.
**
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
Expand All @@ -26,29 +26,20 @@
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
**
***************************************************************************/
'use strict'
import { GraphComponent, License } from 'yfiles'

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

// we load the basic component module and the license file
require([
'yfiles/view-component',
'../../resources/license.js'
], /** @type {yfiles_namespace} */ /** typeof yfiles */ yfiles => {
function init() {
// instantiate the graph component in the existing div specified by the CSS selector
const graphComponent = new yfiles.view.GraphComponent('#graphComponent')
// create one simple node as an example
const node = graphComponent.graph.createNode()
// and add a label to it
graphComponent.graph.addLabel(node, '1')
// then center the graph in the component
graphComponent.fitGraphBounds()
}
function run(licenseData) {
License.value = licenseData

init()
})
const graphComponent = new GraphComponent('#graphComponent')
// create one simple node as an example
const node = graphComponent.graph.createNode()
// and add a label to it
graphComponent.graph.addLabel(node, '1')
// then center the graph in the component
graphComponent.fitGraphBounds()
}

loadJson().then(run)
58 changes: 28 additions & 30 deletions demos/01-tutorial-getting-started/01-graphcomponent/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="demodescription"
content="This step introduces class GraphComponent, which is the central UI element for working with graphs."/>
content="This step introduces class GraphComponent, which is the central UI element for working with graphs."/>

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

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

<style>
html {
font-family: Myriad, Tahoma, Verdana, sans-serif;
font-size: 12px;
}

html, body, #graphComponent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.descriptionPanel {
box-sizing: border-box;
-moz-box-sizing: border-box;
Expand All @@ -59,39 +61,35 @@

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

</head>
<body>
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
<h3>How to create a basic view.</h3>
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
<h3>How to create a basic view.</h3>

<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
<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 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.</p>
<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
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.</p>

<p>See the sources for details.</p>
<p>See the sources for details.</p>

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

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

<!-- You can use any AMD compatible "require" implementation to load the JavaScript resources.
See the "AMD Loading Demo" for more examples on module loading and alternative loading techhniques in the
"loading" demo directory. -->
<script src="../../resources/require.js"></script>
<script src="SampleApplication.js"></script>
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
</body>
</html>
170 changes: 74 additions & 96 deletions demos/01-tutorial-getting-started/02-graph-element-creation/SampleApplication.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/****************************************************************************
** @license
** This demo file is part of yFiles for HTML 2.1.
** Copyright (c) 2000-2018 by yWorks GmbH, Vor dem Kreuzberg 28,
** This demo file is part of yFiles for HTML 2.2.
** Copyright (c) 2000-2019 by yWorks GmbH, Vor dem Kreuzberg 28,
** 72070 Tuebingen, Germany. All rights reserved.
**
** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
Expand All @@ -26,121 +26,99 @@
** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
**
***************************************************************************/
'use strict'
import { FreeNodePortLocationModel, GraphComponent, IGraph, License, Point, Rect } from 'yfiles'
import { showApp } from '../../resources/demo-app.js'
import loadJson from '../../resources/load-json.js'
/** @type {GraphComponent} */
let graphComponent = null

/** @type {IGraph} */
let graph = null

function run(licenseData) {
License.value = licenseData
// Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
graphComponent = new GraphComponent('#graphComponent')
// conveniently store a reference to the graph that is displayed in the closure variable
graph = graphComponent.graph

require.config({
paths: {
yfiles: '../../../lib/umd/yfiles/',
utils: '../../utils/',
resources: '../../resources/'
}
})

/**
* Getting Started - 02 Creating Graph Elements
* This demo shows how to create the basic graph elements in yFiles for HTML:
* nodes, edges, bends, ports, and labels.
*/
require(['yfiles/view-editor', 'resources/demo-app', 'resources/license'], (
/** @type {yfiles_namespace} */ /** typeof yfiles */ yfiles,
app
) => {
/** @type {yfiles.view.GraphComponent} */
let graphComponent = null

/** @type {yfiles.graph.IGraph} */
let graph = null

function run() {
// Initialize the GraphComponent and place it in the div with CSS selector #graphComponent
graphComponent = new yfiles.view.GraphComponent('#graphComponent')
// conveniently store a reference to the graph that is displayed in the closure variable
graph = graphComponent.graph

// /////////////// New in this Sample /////////////////
// /////////////// New in this Sample /////////////////

// Populates the graph and overrides some styles and label models
populateGraph()
// Populates the graph and overrides some styles and label models
populateGraph()

// ////////////////////////////////////////////////////
// ////////////////////////////////////////////////////

// Initialize the demo application's CSS and Javascript for the description
// this is specific for the tiny little demo framework we are using
// and not relevant in other applications.
app.show(graphComponent)
}
// Initialize the demo application's CSS and Javascript for the description
// this is specific for the tiny little demo framework we are using
// and not relevant in other applications.
showApp(graphComponent)
}

// /////////////// New in this Sample /////////////////
// /////////////// New in this Sample /////////////////

/**
* Creates a sample graph and introduces all important graph elements present in
* yFiles for HTML. Additionally, this method now overrides the label placement for some specific labels.
*/
function populateGraph() {
// ////////// Sample node creation ///////////////////
/**
* Creates a sample graph and introduces all important graph elements present in
* yFiles for HTML. Additionally, this method now overrides the label placement for some specific labels.
*/
function populateGraph() {
// ////////// Sample node creation ///////////////////

// Creates two nodes with the default node size
// The location is specified for the _center_
const node1 = graph.createNodeAt(new yfiles.geometry.Point(30, 30))
const node2 = graph.createNodeAt(new yfiles.geometry.Point(150, 30))
// Creates a third node with a different size of 60x30
// In this case, the location of (400,400) describes the _upper left_
// corner of the node bounds
const node3 = graph.createNode(new yfiles.geometry.Rect(230, 200, 60, 30))
// Creates two nodes with the default node size
// The location is specified for the _center_
const node1 = graph.createNodeAt(new Point(30, 30))
const node2 = graph.createNodeAt(new Point(150, 30))
// Creates a third node with a different size of 60x30
// In this case, the location of (400,400) describes the _upper left_
// corner of the node bounds
const node3 = graph.createNode(new Rect(230, 200, 60, 30))

// ///////////////////////////////////////////////////
// ///////////////////////////////////////////////////

// ////////// Sample edge creation ///////////////////
// ////////// Sample edge creation ///////////////////

// Creates some edges between the nodes
graph.createEdge(node1, node2)
const edge = graph.createEdge(node2, node3)
// Creates some edges between the nodes
graph.createEdge(node1, node2)
const edge = graph.createEdge(node2, node3)

// ///////////////////////////////////////////////////
// ///////////////////////////////////////////////////

// ////////// Using Bends ////////////////////////////
// ////////// Using Bends ////////////////////////////

// Creates the first bend for edge at (260, 30)
graph.addBend(edge, new yfiles.geometry.Point(260, 30))
// Creates the first bend for edge at (260, 30)
graph.addBend(edge, new Point(260, 30))

// ///////////////////////////////////////////////////
// ///////////////////////////////////////////////////

// ////////// Using Ports ////////////////////////////
// ////////// Using Ports ////////////////////////////

// Actually, edges connect "ports", not nodes directly.
// If necessary, you can manually create ports at nodes
// and let the edges connect to these.
// Creates a port in the center of the node layout
const port1AtNode1 = graph.addPort(
node1,
yfiles.graph.FreeNodePortLocationModel.NODE_CENTER_ANCHORED
)
// Actually, edges connect "ports", not nodes directly.
// If necessary, you can manually create ports at nodes
// and let the edges connect to these.
// Creates a port in the center of the node layout
const port1AtNode1 = graph.addPort(node1, FreeNodePortLocationModel.NODE_CENTER_ANCHORED)

// Creates a port at the middle of the left border
// Note to use absolute locations when placing ports using PointD.
const port1AtNode3 = graph.addPortAt(
node3,
new yfiles.geometry.Point(node3.layout.x, node3.layout.center.y)
)
// Creates a port at the middle of the left border
// Note to use absolute locations when placing ports using PointD.
const port1AtNode3 = graph.addPortAt(node3, new Point(node3.layout.x, node3.layout.center.y))

// Creates an edge that connects these specific ports
const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)
// Creates an edge that connects these specific ports
const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)

// ///////////////////////////////////////////////////
// ///////////////////////////////////////////////////

// ////////// Sample label creation ///////////////////
// ////////// Sample label creation ///////////////////

// Adds labels to several graph elements
graph.addLabel(node1, 'n1')
graph.addLabel(node2, 'n2')
graph.addLabel(node3, 'n3')
graph.addLabel(edgeAtPorts, 'Edge at Ports')
// Adds labels to several graph elements
graph.addLabel(node1, 'n1')
graph.addLabel(node2, 'n2')
graph.addLabel(node3, 'n3')
graph.addLabel(edgeAtPorts, 'Edge at Ports')

// ///////////////////////////////////////////////////
}
// ///////////////////////////////////////////////////
}

// ////////////////////////////////////////////////////
// ////////////////////////////////////////////////////

// start tutorial
run()
})
// start tutorial
loadJson().then(run)
15 changes: 8 additions & 7 deletions demos/01-tutorial-getting-started/02-graph-element-creation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

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

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

<link rel="stylesheet" href="../../../lib/yfiles.css">
<link rel="stylesheet" href="../../node_modules/yfiles/yfiles.css">
<link rel="stylesheet" href="../../resources/style/demo.css">

<script src="../../../ide-support/yfiles-typeinfo.js"></script><!-- enable debugging -->
<script src="../../../ide-support/yfiles-typeinfo.js"></script>

<script src="../../resources/filesystem-warning.js"></script><!-- enable debugging -->
</head>
<body class="demo-has-left">
<!--
Expand All @@ -59,10 +61,9 @@ <h3>How to create a graph programmatically.</h3>
</aside>

<div class="demo-content">
<div id="graphComponent" style="top: 60px;"></div>
<div id="graphComponent"></div>
</div>

<script src="../../resources/require.js"></script>
<script src="SampleApplication.js"></script>
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
</body>
</html>
Loading

0 comments on commit 58aa22c

Please sign in to comment.