Skip to content

Commit 97c8e95

Browse files
BasicPrimitivesBasicPrimitives
committed
Added arrows to loops vertical segments
1 parent c49d61a commit 97c8e95

File tree

14 files changed

+1231
-764
lines changed

14 files changed

+1231
-764
lines changed

‎samples/data/famdata.js‎

Lines changed: 1 addition & 83 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/javascript.controls/CaseLoopsInFamilyChart.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
<title>Selection Path Mode</title>
7+
<!-- # include file="../../src.primitives/src.primitives.html"-->
8+
<script type="text/javascript" src="../../min/primitives.min.js?5100"></script>
9+
<link href="../../min/primitives.latest.css?5100" media="screen" rel="stylesheet" type="text/css" />
10+
11+
<script type='text/javascript'>
12+
var control;
13+
14+
document.addEventListener('DOMContentLoaded', function () {
15+
var options = new primitives.famdiagram.Config();
16+
17+
options.annotations = [
18+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 1, toItems: [3], title: "10%" },
19+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 1, toItems: [5], title: "30%" },
20+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 1, toItems: [6], title: "50%" },
21+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 1, toItems: [7], title: "10%" },
22+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 1, toItems: [3, 5], title: "40%" },
23+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 1, toItems: [3, 5, 6, 7], title: "100%" },
24+
{ annotationType: primitives.common.AnnotationType.Label, fromItem: 2, toItems: [1], title: "100%" }
25+
];
26+
options.items = [
27+
{ id: 1, parents: [3, 5, 6, 7], title: "James", label: "James", description: "James is First and he is child of Brad, Sara & Lynette", image: "../images/photos/j.png" },
28+
{ id: 2, parents: [1], title: "Brad", label: "Brad", description: "", image: "../images/photos/b.png" },
29+
{ id: 3, parents: [2], title: "Thomas", label: "Thomas", description: "", image: "../images/photos/t.png" },
30+
{ id: 4, parents: [3], title: "David", label: "David", description: "", image: "../images/photos/d.png" },
31+
{ id: 5, parents: [4], title: "Lynette", label: "Lynette", description: "", image: "../images/photos/l.png" },
32+
{ id: 6, parents: [4], title: "Sara", label: "Sara", description: "", image: "../images/photos/s.png" },
33+
{ id: 7, title: "Parent", label: "Parent", description: "Parent node of James", image: "../images/photos/j.png" }
34+
]
35+
36+
/* Connectors */
37+
options.arrowsDirection = primitives.common.GroupByType.Parents;
38+
options.showExtraArrows = true;
39+
options.extraArrowsMinimumSpace = 30;
40+
options.connectorType = primitives.common.ConnectorType.Squared;
41+
options.elbowType = primitives.common.ElbowType.Round;
42+
options.bevelSize = 4;
43+
options.elbowDotSize = 4;
44+
options.linesType = primitives.common.LineType.Solid;
45+
options.linesColor = primitives.common.Colors.Black;
46+
options.linesWidth = 1;
47+
48+
/* Intervals */
49+
options.normalLevelShift = 20;
50+
options.dotLevelShift = 20;
51+
options.lineLevelShift = 20;
52+
53+
options.normalItemsInterval = 20;
54+
options.dotItemsInterval = 10;
55+
options.lineItemsInterval = 10;
56+
57+
options.cursorItem = 1;
58+
options.pageFitMode = primitives.common.PageFitMode.None;
59+
options.hasSelectorCheckbox = primitives.common.Enabled.True;
60+
61+
control = primitives.famdiagram.Control(document.getElementById("basicdiagram"), options);
62+
63+
});
64+
65+
function Update() {
66+
var loopsLayoutMode = parseInt(getRadioValue("loopsLayoutMode"));
67+
control.setOptions({
68+
"loopsLayoutMode": loopsLayoutMode
69+
});
70+
control.update(primitives.common.UpdateMode.Refresh);
71+
}
72+
73+
function getRadioValue(name) {
74+
var radios = document.getElementsByName(name);
75+
for (var i = 0; i < radios.length; i++) {
76+
if (radios[i].checked) {
77+
return radios[i].value;
78+
}
79+
}
80+
return result;
81+
}
82+
</script>
83+
84+
85+
</head>
86+
87+
<body>
88+
<div>
89+
<p>
90+
Loops Layout Mode:
91+
<br><label><input onclick="Update()" name="loopsLayoutMode" type="radio" value="0" checked="">Optimized - 1 looped
92+
relation</label>
93+
<br><label><input onclick="Update()" name="loopsLayoutMode" type="radio" value="1">Keep Items Order - 3 looped
94+
relations</label>
95+
</p>
96+
<div id="basicdiagram" style="width: 640px; height: 400px; border-style: dotted; border-width: 1px;" />
97+
</div>
98+
</body>
99+
100+
</html>

0 commit comments

Comments
 (0)