Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 90797dc

Browse files
New files
1 parent 946710a commit 90797dc

File tree

85 files changed

+15341
-0
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

+15341
-0
lines changed

‎Anchors.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>MindFusion JsDiagram Sample - Anchors</title>
5+
<link href="common/jquery-ui.min.css" rel="stylesheet" />
6+
<link href="common/samples.css" rel="stylesheet" />
7+
<script type="text/javascript" src="common/jquery.min.js"></script>
8+
<script type="text/javascript" src="common/jquery-ui.min.js"></script>
9+
<script type="text/javascript" src="common/samples.js"></script>
10+
</head>
11+
<body>
12+
<div id="header" style="height: 49px;">
13+
<div style="float: left; margin-right: 5px; margin-top: 4px;">
14+
<input type="radio" name="group1" value="Decision" onclick="rBtnSelectNode()" checked="checked" />
15+
Node
16+
<br />
17+
<input type="radio" name="group1" value="Butter" onclick="rBtnSelectDecision()" />
18+
Decision
19+
</div>
20+
<div style="float: right; margin-right: 5px; margin-top: 17px;">
21+
<a href="Anchors.js" style="margin-right: 10px;">View source</a>
22+
<button id="expandButton" onclick="onExpandCollapse()">
23+
&gt;</button>
24+
</div>
25+
</div>
26+
<div id="info" style="top: 60px; bottom: 24px;">
27+
<div id="infoTab" style="padding: 10px;">
28+
<h1>
29+
About this sample</h1>
30+
<p>
31+
This sample shows how to define custom anchor-point patterns and assign them to
32+
boxes. There are also several predefined anchor patterns to choose from. One of
33+
them, DecisionBox, is used with the decision boxes in the sample diagram on the
34+
left. Link several boxes with arrows to get an idea how anchor points work.</p>
35+
</div>
36+
</div>
37+
<div id="content" style="top: 60px; bottom: 24px;">
38+
<!-- The Diagram component is bound to the canvas element below -->
39+
<div style="width: 100%; height: 100%; overflow: auto;">
40+
<canvas id="diagram" width="2100" height="2100">
41+
This page requires a browser that supports HTML 5 Canvas element.
42+
</canvas>
43+
</div>
44+
</div>
45+
<div id="footer" style="height: 24px;">
46+
<span id="copyright"></span>
47+
</div>
48+
<script src="MindFusion.Common.js" type="text/javascript"></script>
49+
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>
50+
<script src="Anchors.js" type="text/javascript"></script>
51+
</body>
52+
</html>

‎Anchors.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
var Events = MindFusion.Diagramming.Events;
2+
var Diagram = MindFusion.Diagramming.Diagram;
3+
var DiagramLink = MindFusion.Diagramming.DiagramLink;
4+
var ShapeNode = MindFusion.Diagramming.ShapeNode;
5+
var AnchorPattern = MindFusion.Diagramming.AnchorPattern;
6+
var AnchorPoint = MindFusion.Diagramming.AnchorPoint;
7+
var MarkStyle = MindFusion.Diagramming.MarkStyle;
8+
var GlassEffect = MindFusion.Diagramming.GlassEffect;
9+
10+
var Rect = MindFusion.Drawing.Rect;
11+
12+
var diagram = null;
13+
var bounds = new Rect(0, 0, 30, 6);
14+
var brush = "LightBlue";
15+
16+
var decision1In3Out, apat2;
17+
18+
$(document).ready(function (sender, args)
19+
{
20+
// create a Diagram component that wraps the "diagram" canvas
21+
diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]);
22+
23+
// register event handlers
24+
diagram.addEventListener(Events.nodeCreated, onNodeCreated);
25+
26+
//
27+
diagram.setLinkHeadShapeSize(2);
28+
diagram.setDefaultShape("Rectangle");
29+
diagram.setBackBrush("#E0E0E0");
30+
diagram.setRouteLinks(true);
31+
diagram.setRoundedLinks(true);
32+
diagram.setShowGrid(false);
33+
diagram.setShapeBrush("#ADFF32");
34+
diagram.getNodeEffects().push(new GlassEffect());
35+
36+
var blue = "#0000FF";
37+
var green = "#00FF00";
38+
var red = "#FF0000";
39+
40+
diagram.setDefaultShape("Rectangle");
41+
42+
apat1 = new AnchorPattern([
43+
new AnchorPoint(50, 0, true, true),
44+
new AnchorPoint(100, 50, true, true),
45+
new AnchorPoint(50, 100, true, true),
46+
new AnchorPoint(0, 50, true, true)
47+
]);
48+
apat2 = new AnchorPattern(
49+
[
50+
new AnchorPoint(10, 0, true, false, MarkStyle.Circle, green),
51+
new AnchorPoint(50, 0, true, false, MarkStyle.Circle, blue),
52+
new AnchorPoint(90, 0, true, false, MarkStyle.Circle, red),
53+
new AnchorPoint(10, 100, false, true, MarkStyle.Rectangle),
54+
new AnchorPoint(50, 100, false, true, MarkStyle.Rectangle),
55+
new AnchorPoint(90, 100, false, true, MarkStyle.Rectangle),
56+
new AnchorPoint(0, 50, true, true, MarkStyle.X)
57+
]);
58+
var pb1 = diagram.getFactory().createShapeNode(new Rect(10, 7, 25, 18));
59+
pb1.setShape("Ellipse");
60+
pb1.setText("Start");
61+
pb1.setAnchorPattern(apat1);
62+
63+
pb2 = diagram.getFactory().createShapeNode(new Rect(20, 78, 25, 18));
64+
pb2.setText("node 1");
65+
pb2.setAnchorPattern(apat2);
66+
67+
pb3 = diagram.getFactory().createShapeNode(new Rect(70, 73, 25, 18));
68+
pb3.setText("node 2");
69+
pb3.setAnchorPattern(apat2);
70+
71+
pb4 = diagram.getFactory().createShapeNode(new Rect(80, 110, 25, 18));
72+
pb4.setShape("Ellipse");
73+
pb4.setText("End");
74+
pb4.setAnchorPattern(apat1);
75+
76+
decision1In3Out = MindFusion.Diagramming.AnchorPattern.fromId("Decision1In3Out");
77+
78+
decb1 = diagram.getFactory().createShapeNode(new Rect(20, 35, 30, 20));
79+
decb1.setShape("Decision");
80+
decb1.setText("check 1");
81+
decb1.setAnchorPattern(decision1In3Out);
82+
83+
var decision2In2Out = MindFusion.Diagramming.AnchorPattern.fromId("Decision2In2Out");
84+
85+
decb2 = diagram.getFactory().createShapeNode(new Rect(70, 30, 30, 20));
86+
decb2.setShape("Decision");
87+
decb2.setText("check 2");
88+
decb2.setAnchorPattern(decision2In2Out);
89+
90+
var link = diagram.getFactory().createDiagramLink(decb1, decb2);
91+
link.route();
92+
});
93+
94+
function onNodeCreated(sender, args)
95+
{
96+
var node = args.getNode();
97+
if (diagram.getDefaultShape().id == "Rectangle")
98+
node.setAnchorPattern(apat2);
99+
else
100+
node.setAnchorPattern(decision1In3Out);
101+
}
102+
103+
function rBtnSelectNode()
104+
{
105+
diagram.setDefaultShape("Rectangle");
106+
}
107+
108+
function rBtnSelectDecision()
109+
{
110+
diagram.setDefaultShape("Decision");
111+
}

‎Animations.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>MindFusion JsDiagram Sample - Animations</title>
5+
<link href="common/jquery-ui.min.css" rel="stylesheet" />
6+
<link href="common/samples.css" rel="stylesheet" />
7+
<script type="text/javascript" src="common/jquery.min.js"></script>
8+
<script type="text/javascript" src="common/jquery-ui.min.js"></script>
9+
<script type="text/javascript" src="common/samples.js"></script>
10+
</head>
11+
<body>
12+
<div id="header" style="height: 49px;">
13+
<div style="float: left" id="animationControls">
14+
<div style="float: left; margin-right: 5px;">
15+
<span class="label">Animation type:</span>
16+
<select id="animationType">
17+
<option value="0">Linear</option>
18+
<option value="1">Power</option>
19+
<option value="2">Exponential</option>
20+
<option value="3">Circular</option>
21+
<option value="4">BackBow</option>
22+
<option value="5">Bounce</option>
23+
<option value="6">Elastic</option>
24+
</select>
25+
</div>
26+
<div style="float: left;">
27+
<span class="label">Easing type:</span>
28+
<select id="easingType">
29+
<option value="0">EaseIn</option>
30+
<option value="1">EaseOut</option>
31+
<option value="2">EaseInOut</option>
32+
<option value="3">EaseOutIn</option>
33+
</select>
34+
</div>
35+
</div>
36+
<div style="float: right; margin-right: 5px; margin-top: 17px;">
37+
<a href="Animations.js" style="margin-right: 10px;">View source</a>
38+
<button id="expandButton" onclick="onExpandCollapse()">
39+
&gt;</button>
40+
</div>
41+
</div>
42+
<div id="info" style="top: 60px; bottom: 24px;">
43+
<div id="infoTab" style="padding: 10px;">
44+
<h1>
45+
About this sample</h1>
46+
<p>
47+
In this sample the JsDiagram control is used to display an interactive decision-making
48+
diagram with animated nodes and links. You can adjust the animation type through
49+
the combo boxes at the top. To start, click on the pulsating red node.</p>
50+
</div>
51+
</div>
52+
<div id="content" style="top: 60px; bottom: 24px;">
53+
<!-- The Diagram component is bound to the canvas element below -->
54+
<div style="width: 100%; height: 100%; overflow: auto;">
55+
<canvas id="diagram" width="2100" height="2100">
56+
This page requires a browser that supports HTML 5 Canvas element.
57+
</canvas>
58+
</div>
59+
</div>
60+
<div id="footer" style="height: 24px;">
61+
<span id="copyright"></span>
62+
</div>
63+
<script src="MindFusion.Common.js" type="text/javascript"></script>
64+
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>
65+
<script src="Animations.js" type="text/javascript"></script>
66+
</body>
67+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /