/
index.html
164 lines (151 loc) · 6.68 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!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>Touch Interaction [yFiles for HTML]</title>
<script type="module" src="../../resources/demo-page-init.ts" async></script>
<link rel="stylesheet" href="../../resources/style/demo.css" />
<link rel="stylesheet" href="TouchEditor.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>Touch Interaction</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>
<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>Touch Interaction</h1>
<p>This demo shows how a graph editor application can be optimized for touch devices.</p>
<h2>Things to Try</h2>
<ul>
<li>
Change the "Snap Touch Panning" behavior and see how it affects graph panning.
<dl>
<dt>Horizontal</dt>
<dd>Locks near-horizontal panning to the x-axis.</dd>
<dt>Vertical</dt>
<dd>Locks near-vertical panning to the y-axis.</dd>
<dt>Both</dt>
<dd>Snaps near-horizontal and near-vertical panning.</dd>
</dl>
</li>
<li>
Change the "Start Touch Panning" behavior and see how it affects graph panning.
<dl>
<dt>One Finger</dt>
<dd>
Starts viewport panning by dragging with one finger and edit gestures after a long
press delay.
</dd>
<dt>Two Fingers</dt>
<dd>
Starts viewport panning by dragging with at least two fingers. This allows edit
gestures (e.g. node resize) to be started immediately without a long press delay.
</dd>
</dl>
</li>
<li>Create nodes by dragging them from the palette into the canvas.</li>
<li>
Navigate the graph by dragging with either one or two fingers, depending on the "Start
Touch Panning" option. Pinch-zoom with two fingers.
</li>
<li>
Select a node by tapping it. Drag the node handles to change the node's size. Drag the
node itself to move it around.
</li>
<li>
Double Tap quickly on the empty canvas area to start the lasso selection tool. Release
the finger to complete the selection gesture.
</li>
<li>
Long Press a graph item to open its context menu or the empty canvas area to open the
background context menu.
</li>
<li>Create nodes using the background context menu.</li>
<li>Create an edge by selecting "Create Edge" from a node's context menu.</li>
</ul>
</div>
</aside>
<div class="demo-page__main">
<div class="demo-main__graph-component">
<button id="cancel-button" class="demo-button-invisible"></button>
<div id="graphComponent"></div>
</div>
<div id="dnd-panel" class="demo-dnd-panel demo-dnd-panel--right">
<div id="panning-options-div">
<p class="panning-label">Snap Touch Panning</p>
<div id="snap-panning-box" class="panning-options-box">
<select>
<option value="none">None</option>
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
<option value="both">Both</option>
</select>
</div>
<p class="panning-label">Start Touch Panning</p>
<div id="start-panning-box" class="panning-options-box">
<select>
<option value="one">One Finger</option>
<option value="two" selected="">Two Fingers</option>
</select>
</div>
</div>
</div>
</div>
<script type="module" crossorigin="anonymous" src="TouchEditorDemo.ts" async></script>
</body>
</html>