/
index.html
107 lines (98 loc) · 4.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- ////////////////////////////////////////////////////////////////////////
// @license
// This demo file is part of yFiles for HTML 2.6.
// Copyright (c) 2000-2024 by yWorks GmbH, Vor dem Kreuzberg 28,
// 72070 Tuebingen, Germany. All rights reserved.
//
// yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
// of demo files in source code or binary form, with or without
// modification, is not permitted.
//
// Owners of a valid software license for a yFiles for HTML version that this
// demo is shipped with are allowed to use the demo source code as basis
// for their own yFiles for HTML powered applications. Use of such programs is
// governed by the rights and conditions as set out in the yFiles for HTML
// license agreement.
//
// THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
// WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
// NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
// TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
// PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
// LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
////////////////////////////////////////////////////////////////////////-->
<title>Folding With Layout Demo [yFiles for HTML]</title>
<script type="module" src="../../resources/demo-page-init.ts" async></script>
<link rel="stylesheet" href="../../resources/style/demo.css" />
<script src="../../resources/filesystem-warning.js"></script>
</head>
<body>
<header class="demo-header">
<a
href="https://www.yworks.com/products/yfiles"
class="demo-header__y-logo"
title="Visit yFiles product details"
target="_blank"
></a>
<div class="demo-header__breadcrumb-wrapper">
<a href="https://www.yworks.com/products/yfiles">yFiles for HTML</a>
<a href="../../README.html">Demos</a>
<span>Folding With Layout</span>
<a href="../../README.html" class="demo-header__mobile-back">yFiles Demos</a>
</div>
<div class="demo-header__right">
<show-source-button></show-source-button>
<fullscreen-button></fullscreen-button>
</div>
</header>
<div class="demo-page__toolbar">
<button data-command="INCREASE_ZOOM"></button>
<button data-command="ZOOM_ORIGINAL"></button>
<button data-command="DECREASE_ZOOM"></button>
<button data-command="FIT_GRAPH_BOUNDS"></button>
</div>
<aside class="demo-page__description">
<div class="demo-description__header">
<a
href="https://www.yworks.com/products/yfiles"
class="demo-description__logo"
title="Visit yFiles product details"
target="_blank"
></a>
</div>
<div class="demo-description__toggle-button" title="Toggle description"></div>
<div class="demo-description__play-button">Start here</div>
<div class="demo-description__content">
<h1>Folding With Layout Demo</h1>
<p>
This demo shows how to automatically trigger a layout that clears or fills the space when
opening or closing groups.
</p>
<p>
Every time a group node is expanded interactively,
<a href="https://docs.yworks.com/yfileshtml/#/api/ClearAreaLayout" target="_blank">ClearAreaLayout</a>
will push away the other nodes so there is a free area for the expanded node and its
(currently visible) children.
</p>
<h2>Things to Try</h2>
<p>Open and close the various group nodes.</p>
</div>
</aside>
<div class="demo-page__main">
<div class="demo-main__graph-component">
<div id="graphComponent"></div>
</div>
</div>
<script type="module" crossorigin="anonymous" src="FoldingWithLayoutDemo.ts" async></script>
</body>
</html>