Skip to content

Commit 42cba61

Browse files
michabaurmichabaur
committed
yFiles for HTML 2.4.0.4 demos
1 parent 790b3b6 commit 42cba61

File tree

1,564 files changed

+90812
-13551
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,564 files changed

+90812
-13551
lines changed

‎demos/01-tutorial-getting-started/01-graphcomponent/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
[You can also run this demo online](https://live.yworks.com/demos/01-tutorial-getting-started/01-graphcomponent/index.html).
66

7-
### How to create a basic view.
7+
## How to create a basic view
88

99
This step introduces class [GraphComponent](https://docs.yworks.com/yfileshtml/#/api/GraphComponent), which is the [central UI element for working with graphs](https://docs.yworks.com/yfileshtml/#/dguide/getting_started-application). 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.
1010

@@ -15,3 +15,7 @@ Please note that the subsequent tutorial steps use a web component framework (de
1515
#### Important Note
1616

1717
yFiles provides [workarounds](https://docs.yworks.com/yfileshtml/index.html#/kb/article/704/Browser_issues_and_included_workarounds) which address several bugs in current browsers. Find `demos-js/resources/demo-util.js` as a reference on how several of them are enabled for most of the demos and how to enable them for this demo, too.
18+
19+
## App Generator
20+
21+
Use the [App Generator](https://www.yworks.com/products/app-generator) to create visualization prototypes – quickly and easily.

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,25 +63,39 @@
6363
</head>
6464
<body>
6565
<div style="width:20%; height: 100%; float:left;" class="descriptionPanel">
66-
<h3>How to create a basic view.</h3>
66+
<h2>How to create a basic view</h2>
6767

68-
<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
68+
<p>
69+
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
6970
provide any interactive features except mouse wheel zooming, which is enabled by default. It is merely meant as a
70-
very basic example of how to display a GraphComponent within a web page.</p>
71+
very basic example of how to display a GraphComponent within a web page.
72+
</p>
7173

72-
<p>See the sources for details.</p>
74+
<p>
75+
See the sources for details.
76+
</p>
7377

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

7884
<h4>Important Note</h4>
85+
7986
<p>
8087
yFiles provides <a
8188
href="https://docs.yworks.com/yfileshtml/index.html#/kb/article/704/Browser_issues_and_included_workarounds"
8289
target="_blank">workarounds</a> which address several bugs in current browsers. Find <code>demos-js/resources/demo-util.js</code>
8390
as a reference on how several of them are enabled for most of the demos and how to enable them for this demo, too.
8491
</p>
92+
93+
<h2>App Generator</h2>
94+
95+
<p>
96+
Use the <a href='https://www.yworks.com/products/app-generator' target='_blank' rel='noopener noreferrer'>App
97+
Generator</a> to create visualization prototypes – quickly and easily.
98+
</p>
8599
</div>
86100
<div style="width:80%; height: 100%; padding-left: 20%">
87101
<div id="graphComponent"></div>

‎demos/01-tutorial-getting-started/04-setting-styles/SampleApplication.js

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,12 @@ function populateGraph() {
177177
// Custom node style
178178
const nodeStyle2 = new ShapeNodeStyle({
179179
shape: 'ellipse',
180-
fill: 'orange',
181-
stroke: 'red'
180+
fill: '#ff6c00',
181+
stroke: '2px red'
182182
})
183183
graph.setStyle(node2, nodeStyle2)
184184
const nodeStyle3 = new ShinyPlateNodeStyle({
185-
fill: 'orange',
185+
fill: '#ff6c00',
186186
stroke: 'white'
187187
})
188188
graph.setStyle(node3, nodeStyle3)
@@ -196,17 +196,25 @@ function populateGraph() {
196196
function setDefaultStyles() {
197197
const graph = graphComponent.graph
198198

199-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
199+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
200200
// Sets this style as the default for all nodes that don't have another
201201
// style assigned explicitly
202202
graph.nodeDefaults.style = new ShapeNodeStyle({
203-
fill: 'darkorange',
204-
stroke: 'white'
203+
shape: 'round-rectangle',
204+
fill: '#ff6c00',
205+
stroke: '1.5px #662b00'
205206
})
206207

207208
// Sets the default size for nodes explicitly to 40x40
208209
graph.nodeDefaults.size = new Size(40, 40)
209210

211+
// Creates a PolylineEdgeStyle which will be used as default for all edges
212+
// that don't have another style assigned explicitly
213+
graph.edgeDefaults.style = new PolylineEdgeStyle({
214+
stroke: '1.5px #662b00',
215+
targetArrow: '#662b00 small triangle'
216+
})
217+
210218
// Creates a label style with the label font set to Tahoma and a black text color
211219
const defaultLabelStyle = new DefaultLabelStyle({
212220
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/04-setting-styles/SampleApplication.ts

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -174,12 +174,12 @@ function populateGraph(): void {
174174
// Custom node style
175175
const nodeStyle2 = new ShapeNodeStyle({
176176
shape: 'ellipse',
177-
fill: 'orange',
178-
stroke: 'red'
177+
fill: '#ff6c00',
178+
stroke: '2px red'
179179
})
180180
graph.setStyle(node2, nodeStyle2)
181181
const nodeStyle3 = new ShinyPlateNodeStyle({
182-
fill: 'orange',
182+
fill: '#ff6c00',
183183
stroke: 'white'
184184
})
185185
graph.setStyle(node3, nodeStyle3)
@@ -193,17 +193,25 @@ function populateGraph(): void {
193193
function setDefaultStyles(): void {
194194
const graph = graphComponent.graph
195195

196-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
196+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
197197
// Sets this style as the default for all nodes that don't have another
198198
// style assigned explicitly
199199
graph.nodeDefaults.style = new ShapeNodeStyle({
200-
fill: 'darkorange',
201-
stroke: 'white'
200+
shape: 'round-rectangle',
201+
fill: '#ff6c00',
202+
stroke: '1.5px #662b00'
202203
})
203204

204205
// Sets the default size for nodes explicitly to 40x40
205206
graph.nodeDefaults.size = new Size(40, 40)
206207

208+
// Creates a PolylineEdgeStyle which will be used as default for all edges
209+
// that don't have another style assigned explicitly
210+
graph.edgeDefaults.style = new PolylineEdgeStyle({
211+
stroke: '1.5px #662b00',
212+
targetArrow: '#662b00 small triangle'
213+
})
214+
207215
// Creates a label style with the label font set to Tahoma and a black text color
208216
const defaultLabelStyle = new DefaultLabelStyle({
209217
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/05-label-placement/SampleApplication.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
InteriorStretchLabelModelPosition,
4141
License,
4242
Point,
43+
PolylineEdgeStyle,
4344
ShapeNodeStyle,
4445
Size,
4546
SmartEdgeLabelModel
@@ -187,17 +188,25 @@ function populateGraph() {
187188
function setDefaultStyles() {
188189
const graph = graphComponent.graph
189190

190-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
191+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
191192
// Sets this style as the default for all nodes that don't have another
192193
// style assigned explicitly
193194
graph.nodeDefaults.style = new ShapeNodeStyle({
194-
fill: 'darkorange',
195-
stroke: 'white'
195+
shape: 'round-rectangle',
196+
fill: '#ff6c00',
197+
stroke: '1.5px #662b00'
196198
})
197199

198200
// Sets the default size for nodes explicitly to 40x40
199201
graph.nodeDefaults.size = new Size(40, 40)
200202

203+
// Creates a PolylineEdgeStyle which will be used as default for all edges
204+
// that don't have another style assigned explicitly
205+
graph.edgeDefaults.style = new PolylineEdgeStyle({
206+
stroke: '1.5px #662b00',
207+
targetArrow: '#662b00 small triangle'
208+
})
209+
201210
// Creates a label style with the label font set to Tahoma and a black text color
202211
const defaultLabelStyle = new DefaultLabelStyle({
203212
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/05-label-placement/SampleApplication.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
InteriorStretchLabelModelPosition,
4141
License,
4242
Point,
43+
PolylineEdgeStyle,
4344
ShapeNodeStyle,
4445
Size,
4546
SmartEdgeLabelModel
@@ -184,17 +185,25 @@ function populateGraph(): void {
184185
function setDefaultStyles(): void {
185186
const graph = graphComponent.graph
186187

187-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
188+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
188189
// Sets this style as the default for all nodes that don't have another
189190
// style assigned explicitly
190191
graph.nodeDefaults.style = new ShapeNodeStyle({
191-
fill: 'darkorange',
192-
stroke: 'white'
192+
shape: 'round-rectangle',
193+
fill: '#ff6c00',
194+
stroke: '1.5px #662b00'
193195
})
194196

195197
// Sets the default size for nodes explicitly to 40x40
196198
graph.nodeDefaults.size = new Size(40, 40)
197199

200+
// Creates a PolylineEdgeStyle which will be used as default for all edges
201+
// that don't have another style assigned explicitly
202+
graph.edgeDefaults.style = new PolylineEdgeStyle({
203+
stroke: '1.5px #662b00',
204+
targetArrow: '#662b00 small triangle'
205+
})
206+
198207
// Creates a label style with the label font set to Tahoma and a black text color
199208
const defaultLabelStyle = new DefaultLabelStyle({
200209
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/06-basic-interaction/SampleApplication.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
InteriorLabelModel,
3939
License,
4040
Point,
41+
PolylineEdgeStyle,
4142
ShapeNodeStyle,
4243
Size
4344
} from 'yfiles'
@@ -184,17 +185,25 @@ function populateGraph() {
184185
function setDefaultStyles() {
185186
const graph = graphComponent.graph
186187

187-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
188+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
188189
// Sets this style as the default for all nodes that don't have another
189190
// style assigned explicitly
190191
graph.nodeDefaults.style = new ShapeNodeStyle({
191-
fill: 'darkorange',
192-
stroke: 'white'
192+
shape: 'round-rectangle',
193+
fill: '#ff6c00',
194+
stroke: '1.5px #662b00'
193195
})
194196

195197
// Sets the default size for nodes explicitly to 40x40
196198
graph.nodeDefaults.size = new Size(40, 40)
197199

200+
// Creates a PolylineEdgeStyle which will be used as default for all edges
201+
// that don't have another style assigned explicitly
202+
graph.edgeDefaults.style = new PolylineEdgeStyle({
203+
stroke: '1.5px #662b00',
204+
targetArrow: '#662b00 small triangle'
205+
})
206+
198207
// Creates a label style with the label font set to Tahoma and a black text color
199208
const defaultLabelStyle = new DefaultLabelStyle({
200209
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/06-basic-interaction/SampleApplication.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
InteriorLabelModel,
3939
License,
4040
Point,
41+
PolylineEdgeStyle,
4142
ShapeNodeStyle,
4243
Size
4344
} from 'yfiles'
@@ -181,17 +182,25 @@ function populateGraph(): void {
181182
function setDefaultStyles(): void {
182183
const graph = graphComponent.graph
183184

184-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
185+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
185186
// Sets this style as the default for all nodes that don't have another
186187
// style assigned explicitly
187188
graph.nodeDefaults.style = new ShapeNodeStyle({
188-
fill: 'darkorange',
189-
stroke: 'white'
189+
shape: 'round-rectangle',
190+
fill: '#ff6c00',
191+
stroke: '1.5px #662b00'
190192
})
191193

192194
// Sets the default size for nodes explicitly to 40x40
193195
graph.nodeDefaults.size = new Size(40, 40)
194196

197+
// Creates a PolylineEdgeStyle which will be used as default for all edges
198+
// that don't have another style assigned explicitly
199+
graph.edgeDefaults.style = new PolylineEdgeStyle({
200+
stroke: '1.5px #662b00',
201+
targetArrow: '#662b00 small triangle'
202+
})
203+
195204
// Creates a label style with the label font set to Tahoma and a black text color
196205
const defaultLabelStyle = new DefaultLabelStyle({
197206
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/07-undo-clipboard-support/SampleApplication.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
InteriorLabelModel,
3939
License,
4040
Point,
41+
PolylineEdgeStyle,
4142
ShapeNodeStyle,
4243
Size
4344
} from 'yfiles'
@@ -232,17 +233,25 @@ function populateGraph() {
232233
function setDefaultStyles() {
233234
const graph = graphComponent.graph
234235

235-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
236+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
236237
// Sets this style as the default for all nodes that don't have another
237238
// style assigned explicitly
238239
graph.nodeDefaults.style = new ShapeNodeStyle({
239-
fill: 'darkorange',
240-
stroke: 'white'
240+
shape: 'round-rectangle',
241+
fill: '#ff6c00',
242+
stroke: '1.5px #662b00'
241243
})
242244

243245
// Sets the default size for nodes explicitly to 40x40
244246
graph.nodeDefaults.size = new Size(40, 40)
245247

248+
// Creates a PolylineEdgeStyle which will be used as default for all edges
249+
// that don't have another style assigned explicitly
250+
graph.edgeDefaults.style = new PolylineEdgeStyle({
251+
stroke: '1.5px #662b00',
252+
targetArrow: '#662b00 small triangle'
253+
})
254+
246255
// Creates a label style with the label font set to Tahoma and a black text color
247256
const defaultLabelStyle = new DefaultLabelStyle({
248257
font: '12px Tahoma',

‎demos/01-tutorial-getting-started/07-undo-clipboard-support/SampleApplication.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
InteriorLabelModel,
4040
License,
4141
Point,
42+
PolylineEdgeStyle,
4243
ShapeNodeStyle,
4344
Size
4445
} from 'yfiles'
@@ -230,17 +231,25 @@ function populateGraph(): void {
230231
function setDefaultStyles(): void {
231232
const graph = graphComponent.graph
232233

233-
// Creates a nice ShinyPlateNodeStyle instance, using an orange Fill.
234+
// Creates a nice ShapeNodeStyle instance, using an orange Fill.
234235
// Sets this style as the default for all nodes that don't have another
235236
// style assigned explicitly
236237
graph.nodeDefaults.style = new ShapeNodeStyle({
237-
fill: 'darkorange',
238-
stroke: 'white'
238+
shape: 'round-rectangle',
239+
fill: '#ff6c00',
240+
stroke: '1.5px #662b00'
239241
})
240242

241243
// Sets the default size for nodes explicitly to 40x40
242244
graph.nodeDefaults.size = new Size(40, 40)
243245

246+
// Creates a PolylineEdgeStyle which will be used as default for all edges
247+
// that don't have another style assigned explicitly
248+
graph.edgeDefaults.style = new PolylineEdgeStyle({
249+
stroke: '1.5px #662b00',
250+
targetArrow: '#662b00 small triangle'
251+
})
252+
244253
// Creates a label style with the label font set to Tahoma and a black text color
245254
const defaultLabelStyle = new DefaultLabelStyle({
246255
font: '12px Tahoma',

0 commit comments

Comments
 (0)