Skip to content

Commit eadc789

Browse files
michabaurmichabaur
committed
yFiles for HTML 2.4.0.2 demos
1 parent 4259742 commit eadc789

File tree

85 files changed

+1847
-955
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+1847
-955
lines changed

‎demos/03-tutorial-application-features/application-features-base/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ <h2>Base Application</h2>
8282
<div id="graphComponent"></div>
8383
</div>
8484

85-
8685
<script type="module" crossorigin="anonymous" src="SampleApplication.js"></script>
8786
</body>
8887
</html>

‎demos/03-tutorial-application-features/complex-highlight-decorator/NodeHighlightManager.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/****************************************************************************
2+
** @license
3+
** This demo file is part of yFiles for HTML 2.4.
4+
** Copyright (c) 2000-2021 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+
import {
30+
HighlightIndicatorManager,
31+
ICanvasObjectInstaller,
32+
IModelItem,
33+
INode,
34+
NodeStyleDecorationInstaller,
35+
ShapeNodeShape,
36+
ShapeNodeStyle
37+
} from 'yfiles'
38+
39+
/**
40+
* A highlight manager responsible for highlighting the nodes based on the information stored in their tag.
41+
*/
42+
export class NodeHighlightManager extends HighlightIndicatorManager {
43+
/**
44+
* Gets a suitable highlight installer for the given item or <code>null</code> if the given
45+
* item should not be highlighted.
46+
* @param {!IModelItem} item The item to find an installer for
47+
* @returns {?ICanvasObjectInstaller} The highlight installer
48+
*/
49+
getInstaller(item) {
50+
if (item instanceof INode) {
51+
return NodeHighlightManager.getNodeHighlightInstaller(item)
52+
} else {
53+
return super.getInstaller(item)
54+
}
55+
}
56+
57+
/**
58+
* Creates a new highlight installer for the given node.
59+
* @param {!INode} node the node to be highlighted.
60+
* @returns {!ICanvasObjectInstaller}
61+
*/
62+
static getNodeHighlightInstaller(node) {
63+
return new NodeStyleDecorationInstaller({
64+
nodeStyle: new ShapeNodeStyle({
65+
// the tag of each node contains information about the appropriate shape for the highlight
66+
shape: NodeHighlightManager.getShape(node.tag),
67+
stroke: '3px rgb(104, 176, 227)',
68+
fill: 'transparent'
69+
}),
70+
// the margin from the actual node to its highlight visualization
71+
margins: 3
72+
})
73+
}
74+
75+
/**
76+
* Determines a suitable highlight shape depending on the given tag data.
77+
* @param {*} tag the tag of the node to be highlighted.
78+
* @returns {!ShapeNodeShape}
79+
*/
80+
static getShape(tag) {
81+
if (tag === 'ellipse') {
82+
return ShapeNodeShape.ELLIPSE
83+
} else if (tag === 'triangle') {
84+
return ShapeNodeShape.TRIANGLE
85+
} else {
86+
return ShapeNodeShape.RECTANGLE
87+
}
88+
}
89+
}

‎demos/03-tutorial-application-features/complex-highlight-decorator/NodeHighlightManager.ts

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/****************************************************************************
2+
** @license
3+
** This demo file is part of yFiles for HTML 2.4.
4+
** Copyright (c) 2000-2021 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+
import {
30+
HighlightIndicatorManager,
31+
ICanvasObjectInstaller,
32+
IModelItem,
33+
INode,
34+
NodeStyleDecorationInstaller,
35+
ShapeNodeShape,
36+
ShapeNodeStyle
37+
} from 'yfiles'
38+
39+
/**
40+
* A highlight manager responsible for highlighting the nodes based on the information stored in their tag.
41+
*/
42+
export class NodeHighlightManager extends HighlightIndicatorManager<IModelItem> {
43+
/**
44+
* Gets a suitable highlight installer for the given item or <code>null</code> if the given
45+
* item should not be highlighted.
46+
* @param item The item to find an installer for
47+
* @return The highlight installer
48+
*/
49+
getInstaller(item: IModelItem): ICanvasObjectInstaller | null {
50+
if (item instanceof INode) {
51+
return NodeHighlightManager.getNodeHighlightInstaller(item)
52+
} else {
53+
return super.getInstaller(item)
54+
}
55+
}
56+
57+
/**
58+
* Creates a new highlight installer for the given node.
59+
* @param node the node to be highlighted.
60+
*/
61+
private static getNodeHighlightInstaller(node: INode): ICanvasObjectInstaller {
62+
return new NodeStyleDecorationInstaller({
63+
nodeStyle: new ShapeNodeStyle({
64+
// the tag of each node contains information about the appropriate shape for the highlight
65+
shape: NodeHighlightManager.getShape(node.tag),
66+
stroke: '3px rgb(104, 176, 227)',
67+
fill: 'transparent'
68+
}),
69+
// the margin from the actual node to its highlight visualization
70+
margins: 3
71+
})
72+
}
73+
74+
/**
75+
* Determines a suitable highlight shape depending on the given tag data.
76+
* @param tag the tag of the node to be highlighted.
77+
*/
78+
private static getShape(tag: any): ShapeNodeShape {
79+
if (tag === 'ellipse') {
80+
return ShapeNodeShape.ELLIPSE
81+
} else if (tag === 'triangle') {
82+
return ShapeNodeShape.TRIANGLE
83+
} else {
84+
return ShapeNodeShape.RECTANGLE
85+
}
86+
}
87+
}

‎demos/03-tutorial-application-features/complex-highlight-decorator/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Complex Highlight Decorator - Application Features Tutorial
2+
3+
<img src="../../resources/image/complex-highlight-decorator.png" alt="demo-thumbnail" height="320"/>
4+
5+
[You can also run this demo online](https://live.yworks.com/demos/03-tutorial-application-features/complex-highlight-decorator/index.html).
6+
7+
## Complex Highlight Decorator
8+
9+
Shows how to highlight a node when the mouse hovers over it. The shape of the highlight effect differs depending on the data stored in the node's tag.
10+
11+
## Things to Try
12+
13+
- Hover over a node to see a highlight effect.
14+
- Hover over nodes of different shapes to see the shape of the highlight effect change as well.

0 commit comments

Comments
 (0)