Skip to content

Commit ef01988

Browse files
BasicPrimitivesBasicPrimitives
committed
Added placeAdvisersAboveChildren, placeAssistantsAboveChildren, levelOffset properties
Added extra options validation for annotations
1 parent 041b341 commit ef01988

21 files changed

+2762
-1679
lines changed

‎changelog.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
#### Version 5.6.0
2+
* Added `placeAssistantsAboveChildren` and `placeAdvisersAboveChildren` properties to `primitives.orgdiagram.Config` & `primitives.orgdiagram.ItemConfig`.
3+
* Added `levelOffset` property to `primitives.orgdiagram.ItemConfig`.
4+
* Added extra validation for annotations properties.
15
#### Version 5.5.0
26
* Added IntelliSense API annotations to code
3-
* Added API annotations conversion into markdown
7+
* Added API annotations conversion into markdown
48
#### Version 5.4.15
5-
* Fixed minimised items highlight alignment in React
9+
* Fixed minimised items highlight alignment in React
610
#### Version 5.4.14
711
* Fixed objects comparison for React JSX
812
#### Version 5.4.12
@@ -33,7 +37,7 @@
3337
* Published React Demo & Tutorial to Github
3438
#### Version 5.1.0
3539

36-
<span style="color:red">**Warning**</span>: Extracted jQuery UI Widgets into separate `file primitives.jquery.latest.js` !
40+
**Warning**: Extracted jQuery UI Widgets into separate `file primitives.jquery.latest.js` !
3741
* Added npm package header and published library to [www.npmjs.com](https://www.npmjs.com/package/basicprimitives)
3842
* Added pagination for nodes in page fit mode set to None.
3943
#### Version 5.0.4
@@ -46,7 +50,7 @@
4650
#### Version 5.0.1
4751
* Fixed fit to page mode in primitives.famdigram.Control.
4852
#### Version 5.0.0
49-
<span style="color:red">**Warning**</span>: Non-backward compatible API changes!
53+
**Warning**: Non-backward compatible API changes!
5054
* Removed dependency on jQuery.
5155
* Added pure JavaScript Controls `primitives.orgdiagram.Control` and `primitives.famdiagram.Control`
5256
* Added JSON ML support for HTML templates
@@ -245,7 +249,7 @@
245249
#### Version 1.1.1
246250
* Added extra constructors to HighlightPathAnnotationConfig, ShapeAnnotationConfig and ConnectorAnnotationConfig.
247251
#### Version 1.1.0
248-
<span style="color:red">**Warning**</span>: **Non-backward compatible API changes!**
252+
**Warning**: **Non-backward compatible API changes!**
249253
* Added Shape & Connector helper widgets: bpShape & bpConnector.
250254
* Added Shape, Connector & Highlight path annotations to orgDiagram. Added ConnectorAnnotationConfig, ShapeAnnotationConfig & HighlightPathAnnotationConfig classes to orgDiagram. Added annotations collection property to orgdiagram.Config.
251255
* Added connection lines styling options: linesType, highlightLinesColor, highlightLinesWidth, highlightLinesType to orgdiagram.Config.

‎index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,13 @@
279279
jquery: "samples/jquery.widgets/CaseChildrenPlacementType.html"
280280
}
281281
},
282+
{
283+
label: "Children & Assitants Levels",
284+
frameworks: {
285+
javascript: "samples/javascript.controls/CaseChildrenAndAssitantsLevelOffset.html",
286+
jquery: "samples/jquery.widgets/CaseChildrenAndAssitantsLevelOffset.html"
287+
}
288+
},
282289
{
283290
label: "Adviser and Assistant item types",
284291
frameworks: {
@@ -355,6 +362,20 @@
355362
javascript: "samples/javascript.controls/CaseSkippedLevels.html",
356363
jquery: "samples/jquery.widgets/CaseSkippedLevels.html"
357364
}
365+
},
366+
{
367+
label: "Advisers children placement",
368+
frameworks: {
369+
javascript: "samples/javascript.controls/CasePlaceAdvisersAboveChildren.html",
370+
jquery: "samples/jquery.widgets/CasePlaceAdvisersAboveChildren.html"
371+
}
372+
},
373+
{
374+
label: "Assistants children placement",
375+
frameworks: {
376+
javascript: "samples/javascript.controls/CasePlaceAssistantsAboveChildren.html",
377+
jquery: "samples/jquery.widgets/CasePlaceAssistantsAboveChildren.html"
378+
}
358379
}
359380
]
360381
},

‎min/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "basicprimitives",
3-
"version": "5.5.0",
3+
"version": "5.6.0",
44
"description": "Basic Primitives Diagrams for JavaScript - data visualization components library that implements organizational chart and multi-parent dependency diagrams, contains implementations of JavaScript Controls and PDF rendering plugins.",
55
"main": "primitives.latest.js",
66
"scripts": {

‎samples/AdviserAndAssistantItemTypes.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ The chart is able to represent the following child positions in diagram layout r
1919
All of them affect child placement relative to its parent in hierarchy. The following example demonstrates Adviser and Assistant types. Adviser item placed at the same level as its parent and connected to it horizontally. Assistant item is placed at level between parent and its regular children and horizontally connected to connection line between parent and its children as well.
2020

2121
Use `ItemConfig.adviserPlacementType` option to place adviser or assistant on the left or right side of hierarchy;
22+
Use `ItemConfig.levelOffset` option to place assitants into multiple rows. See children layout samples.
2223

2324
[JavaScript](javascript.controls/CaseAdviserAndAssistantItemTypes.html)
2425
[JQuery](jquery.widgets/CaseAdviserAndAssistantItemTypes.html)
@@ -34,4 +35,18 @@ Use `ItemConfig.adviserPlacementType` option to place them on the left or right
3435
[JavaScript](javascript.controls/CaseSubAdviserAndSubAssistantItemTypes.html)
3536
[JQuery](jquery.widgets/CaseSubAdviserAndSubAssistantItemTypes.html)
3637

37-
![Screenshot](images/screenshots/CaseSubAdviserAndSubAssistantItemTypes.png)
38+
![Screenshot](images/screenshots/CaseSubAdviserAndSubAssistantItemTypes.png)
39+
40+
## Adviser child nodes placement above parent's node children
41+
42+
If adviser node has its own children then control adds extra levels, so advisers children are placed above level of the regular children. This behavior can be altered with `placeAdvisersAboveChildren` property. So parent's node and advisers node children would be rendered side by side at the same level.
43+
44+
[JavaScript](javascript.controls/CasePlaceAdvisersAboveChildren.html)
45+
[JQuery](jquery.widgets/CasePlaceAdvisersAboveChildren.html)
46+
47+
## Assitamt child nodes placement above parent's node children
48+
49+
If assitant node has its own children then control adds extra levels, so assitants children are placed above level of the regular children. This behavior can be altered with `placeAssistantsAboveChildren` property. So parent's node and assitants node children would be rendered side by side at the same level.
50+
51+
[JavaScript](javascript.controls/CasePlaceAssistantsAboveChildren.html)
52+
[JQuery](jquery.widgets/CasePlaceAssistantsAboveChildren.html)

‎samples/ChildrenLayout.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
# Children Layout
22
Children Placement Layout can be defined individually per item or globally for all chart items. Following chart and item config properties are used to define layout of children:
33

4-
* childrenPlacementType - this property is available for chart and for individual items, it defines shape of children with enumeration `primitives.common.ChildrenPlacementType` it provides following options Vertical, Horizontal & Matrix
5-
* leavesPlacementType - this option is available only at global chart level and it is used to control children layout having no sub children, so it is only for children of the last level in hierarchy.
6-
* maximumColumnsInMatrix - by default children in matrix are shaped into square, in order to form them into rectangular shape you have to limit maximum number of columns in matrix, so rectangular shape would grow vertically.
4+
* `childrenPlacementType` - this property is available for chart and for individual items, it defines shape of children with enumeration `primitives.common.ChildrenPlacementType` it provides following options `Vertical`, `Horizontal` & `Matrix`
5+
* `leavesPlacementType` - this option is available only at global chart level and it is used to control children layout having no sub children, so it is only for children of the last level in hierarchy.
6+
* `maximumColumnsInMatrix` - by default children in matrix are shaped into square, in order to form them into rectangular shape you have to limit maximum number of columns in matrix, so rectangular shape would grow vertically.
77

88
[JavaScript](javascript.controls/CaseChildrenPlacementType.html)
99
[JQuery](jquery.widgets/CaseChildrenPlacementType.html)
1010

11-
![Screenshot](images/screenshots/CaseChildrenPlacementType.png)
11+
![Screenshot](images/screenshots/CaseChildrenPlacementType.png)
12+
13+
# Placing children into multiple horizontal levels
14+
Children nodes can be placed into multiple rows with `levelOffset` property. Child nodes would be grouped by that property and placed in rows. Only the last row of children is effected by `childrenPlacementType` property setting their formation.
15+
16+
[JavaScript](javascript.controls/CaseChildNodeLevelOffset.html)
17+
[JQuery](jquery.widgets/CaseChildNodeLevelOffset.html)

‎samples/javascript.controls/CaseChildrenAndAssitantsLevelOffset.html‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Children and Assistants Levels</title>
7+
8+
<!-- # include file="../../src.primitives/src.primitives.html"-->
9+
<script type="text/javascript" src="../../min/primitives.min.js?5100"></script>
10+
<link href="../../min/primitives.latest.css?2106" media="screen" rel="stylesheet" type="text/css" />
11+
12+
<script type="text/javascript">
13+
var control;
14+
var timer = null;
15+
document.addEventListener('DOMContentLoaded', function () {
16+
var options = new primitives.orgdiagram.Config();
17+
18+
var items = [];
19+
20+
var rootItem = new primitives.orgdiagram.ItemConfig();
21+
rootItem.id = 0;
22+
rootItem.parent = null;
23+
rootItem.title = "Title A";
24+
rootItem.description = "Description A";
25+
rootItem.image = "../images/photos/a.png";
26+
rootItem.childrenPlacementType = primitives.common.ChildrenPlacementType.Matrix;
27+
items.push(rootItem);
28+
29+
items.push({
30+
id: 1,
31+
parent: 0,
32+
title: "Assistant 1",
33+
description: "Assistant Description",
34+
image: "../images/photos/a.png",
35+
itemType: primitives.orgdiagram.ItemType.Assistant,
36+
adviserPlacementType: primitives.common.AdviserPlacementType.Right,
37+
groupTitle: "Audit",
38+
groupTitleColor: primitives.common.Colors.Olive,
39+
levelOffset: 0
40+
});
41+
42+
items.push({
43+
id: 2,
44+
parent: 0,
45+
title: "Assistant 2",
46+
description: "Assistant Description",
47+
image: "../images/photos/b.png",
48+
itemType: primitives.orgdiagram.ItemType.Assistant,
49+
adviserPlacementType: primitives.common.AdviserPlacementType.Left,
50+
groupTitle: "Audit",
51+
groupTitleColor: primitives.common.Colors.Olive,
52+
levelOffset: 0
53+
});
54+
55+
for (var index = 3; index <= 10; index += 2) {
56+
items.push({
57+
id: index,
58+
parent: 1,
59+
title: "Sub Adviser",
60+
description: "Sub Adviser Description",
61+
image: "../images/photos/s.png",
62+
itemType: primitives.orgdiagram.ItemType.SubAdviser,
63+
adviserPlacementType: primitives.common.AdviserPlacementType.Left,
64+
groupTitle: "Sub Adviser",
65+
groupTitleColor: primitives.common.Colors.Red
66+
});
67+
items.push({
68+
id: (index + 1),
69+
parent: 2,
70+
title: "Sub Adviser",
71+
description: "Sub Adviser Description",
72+
image: "../images/photos/s.png",
73+
itemType: primitives.orgdiagram.ItemType.SubAdviser,
74+
adviserPlacementType: primitives.common.AdviserPlacementType.Right,
75+
groupTitle: "Sub Adviser",
76+
groupTitleColor: primitives.common.Colors.Red
77+
});
78+
}
79+
80+
items.push({
81+
id: 13,
82+
parent: 0,
83+
title: "Assistant 3",
84+
description: "Assistant Description",
85+
image: "../images/photos/c.png",
86+
itemType: primitives.orgdiagram.ItemType.Assistant,
87+
adviserPlacementType: primitives.common.AdviserPlacementType.Right,
88+
groupTitle: "Audit",
89+
groupTitleColor: primitives.common.Colors.Olive,
90+
levelOffset: 1
91+
});
92+
93+
94+
items.push({
95+
id: 14,
96+
parent: 0,
97+
title: "Assistant 4",
98+
description: "Assistant Description",
99+
image: "../images/photos/d.png",
100+
itemType: primitives.orgdiagram.ItemType.Assistant,
101+
adviserPlacementType: primitives.common.AdviserPlacementType.Left,
102+
groupTitle: "Audit",
103+
groupTitleColor: primitives.common.Colors.Olive,
104+
levelOffset: 1
105+
});
106+
107+
for (var index = 100; index <= 107; index += 1) {
108+
items.push({
109+
id: index,
110+
parent: 0,
111+
title: index.toString() + " Contract",
112+
description: index.toString() + " Description",
113+
image: "../images/photos/f.png",
114+
groupTitleColor: primitives.common.Colors.Red,
115+
groupTitle: "Contract",
116+
levelOffset: 0
117+
});
118+
}
119+
120+
for (var index = 15; index <= 20; index += 1) {
121+
items.push({
122+
id: index,
123+
parent: 0,
124+
title: index.toString() + " Full Time",
125+
description: index.toString() + " Description",
126+
image: "../images/photos/f.png",
127+
groupTitle: "Full Time",
128+
levelOffset: 1
129+
});
130+
}
131+
132+
for (var index = 21; index <= 32; index += 1) {
133+
items.push({
134+
id: index,
135+
parent: 0,
136+
title: index.toString() + " Part Time",
137+
description: index.toString() + " Description",
138+
image: "../images/photos/p.png",
139+
groupTitle: "Part Time",
140+
groupTitleColor: primitives.common.Colors.Green,
141+
levelOffset: 2
142+
});
143+
};
144+
145+
items.push({
146+
id: 1003,
147+
parent: 103,
148+
title: "Assistant",
149+
description: "Assistant Description",
150+
image: "../images/photos/b.png",
151+
itemType: primitives.orgdiagram.ItemType.Assistant,
152+
adviserPlacementType: primitives.common.AdviserPlacementType.Left,
153+
groupTitle: "Audit",
154+
groupTitleColor: primitives.common.Colors.Olive,
155+
levelOffset: 0
156+
});
157+
158+
items.push({
159+
id: 1004,
160+
parent: 17,
161+
title: "Assistant",
162+
description: "Assistant Description",
163+
image: "../images/photos/b.png",
164+
itemType: primitives.orgdiagram.ItemType.Assistant,
165+
adviserPlacementType: primitives.common.AdviserPlacementType.Right,
166+
groupTitle: "Audit",
167+
groupTitleColor: primitives.common.Colors.Olive,
168+
levelOffset: 0
169+
});
170+
171+
items.push({
172+
id: 1005,
173+
parent: 16,
174+
title: "Assistant",
175+
description: "Assistant Description",
176+
image: "../images/photos/b.png",
177+
itemType: primitives.orgdiagram.ItemType.Adviser,
178+
adviserPlacementType: primitives.common.AdviserPlacementType.Right,
179+
groupTitle: "Audit",
180+
groupTitleColor: primitives.common.Colors.Olive,
181+
levelOffset: 0
182+
});
183+
184+
options.items = items;
185+
186+
options.cursorItem = 0;
187+
options.normalLevelShift = 20;
188+
options.dotLevelShift = 10;
189+
options.lineLevelShift = 10;
190+
options.normalItemsInterval = 20;
191+
options.dotItemsInterval = 10;
192+
options.lineItemsInterval = 5;
193+
options.buttonsPanelSize = 48;
194+
195+
options.horizontalAlignment = primitives.common.HorizontalAlignmentType.Center;
196+
197+
options.itemTitleSecondFontColor = primitives.common.Colors.White;
198+
199+
options.pageFitMode = primitives.common.PageFitMode.Auto;
200+
options.graphicsType = primitives.common.GraphicsType.Auto;
201+
options.hasSelectorCheckbox = primitives.common.Enabled.True;
202+
options.hasButtons = primitives.common.Enabled.True;
203+
options.leavesPlacementType = primitives.common.ChildrenPlacementType.Matrix;
204+
205+
options.arrowsDirection = primitives.common.GroupByType.Children;
206+
207+
control = primitives.orgdiagram.Control(document.getElementById("basicdiagram"), options);
208+
209+
window.addEventListener('resize', function (event) {
210+
onWindowResize();
211+
});
212+
});
213+
214+
function onWindowResize() {
215+
if (timer == null) {
216+
timer = window.setTimeout(function () {
217+
control.update(primitives.orgdiagram.UpdateMode.Refresh);
218+
window.clearTimeout(timer);
219+
timer = null;
220+
}, 300);
221+
}
222+
}
223+
</script>
224+
</head>
225+
226+
<body style="overflow:hidden;">
227+
<div id="basicdiagram"
228+
style="position: absolute; border-style: dotted; border-width: 0px; top: 0; right: 0; bottom: 0; left: 0;">
229+
</div>
230+
</body>
231+
232+
</html>

0 commit comments

Comments
 (0)