Skip to content

Commit 0394b1a

Browse files
BasicPrimitivesBasicPrimitives
authored
Merge pull request #43 from BasicPrimitives/scrollborderstyle
Added scroll panel border style
2 parents 463bda6 + 0abc455 commit 0394b1a

File tree

10 files changed

+155
-133
lines changed

10 files changed

+155
-133
lines changed

‎changelog.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#### Version 5.9.1
22
* Fixed frame placeholdder size
33
#### Version 5.9.0
4-
* Add `showFrame`, `fameInnerPadding`, `frameOuterPadding` properties to `primitives.orgdiagram.Config` & `primitives.famdiagram.Config`
4+
* Added `showFrame`, `fameInnerPadding`, `frameOuterPadding` properties to `primitives.orgdiagram.Config` & `primitives.famdiagram.Config`
55
* Modified callout annotation palacement for minimized nodes placed outside view port.
66
* Fixed exception when `selectedItems` collection contains non existing items.
77
* Fixed center on cursor in AutoSize mode

‎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.9.1",
3+
"version": "5.9.2",
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": {

‎min/primitives.latest.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
.bp-scrollframe {
2+
border: 1px dotted #dddddd;
3+
}
14
.bp-item {
25
position: absolute;
36
overflow: hidden;

‎samples/SelectedItems.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
# Selected items & Check boxes
22
Selected items is collection of item id's having checked their check boxes. Chart always shows selected items in full size form. So this can be convenient for navigation as well in order to keep interesting items in full size.
33

4-
Selected items can be used for example when we need to display cross functional working group in organization hierarchy or visualize large mail recipients list in organization by groups and seniority. Usually when number of people exceeds 10 it is hard to say who is enlisted in subscription except active participants.
4+
Selected items can be used when we need to display cross functional working group in organization hierarchy or visualize large mail recipients list in organization by groups and seniority. Usually when number of people exceeds 10 it is hard to say who is enlisted in subscription except active participants.
55

6-
Collection of primitives.orgdiagram.Config.selectedItems contains item id's. Widget notifies about changes in this collection with primitives.orgdiagram.Config.onSelectionChanged event.
6+
Collection of `primitives.orgdiagram.Config.selectedItems` contains item id's. Widget notifies about changes in this collection with primitives.`orgdiagram.Config.onSelectionChanged` event.
77

88
Following example demonstrates how to programmatically select items in organizational chart and get notified about changes in selection.
99

1010
[JavaScript](javascript.controls/CaseSelectedItems.html)
1111
[JQuery](jquery.widgets/CaseSelectedItems.html)
1212

13-
![Screenshot](images/screenshots/CaseSelectedItems.png)
13+
![Screenshot](images/screenshots/CaseSelectedItems.png)
14+
15+
# Showing selected items on the frame
16+
17+
Control displays selected items placed outside control's view area on the frame around around control in form of markers. Control uses the same marker propeties defined by item templates for markers in the diagram. Markers placement on the frame indicates direction towards selected item outside control view area. Frame takes as much space as the largest marker in the diagram. Use `fameInnerPadding` and `frameOuterPadding` `Config` properties to add extra padding around frame markers.
18+
19+
[JavaScript](javascript.controls/CaseShowFrame.html)
20+
[JQuery](jquery.widgets/CaseShowFrame.html)
21+
22+
![Screenshot](images/screenshots/CaseShowFrame.png)

‎samples/images/screenshots/CaseShowFrame.png‎

11.6 KB
Loading

‎samples/javascript.controls/CaseShowFrame.html‎

Lines changed: 109 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,123 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html>
3+
34
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5-
<title>Selected Items Frame</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Selected Items Frame</title>
67

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?2106" media="screen" rel="stylesheet" type="text/css" />
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" />
1011

11-
<script type="text/javascript">
12-
var control,
13-
minimizedItemShapeTypes = [
14-
primitives.common.ShapeType.Rectangle,
15-
primitives.common.ShapeType.Oval,
16-
primitives.common.ShapeType.Triangle,
17-
primitives.common.ShapeType.CrossOut,
18-
primitives.common.ShapeType.Circle,
19-
primitives.common.ShapeType.Rhombus,
20-
primitives.common.ShapeType.Wedge,
21-
primitives.common.ShapeType.FramedOval,
22-
primitives.common.ShapeType.FramedTriangle,
23-
primitives.common.ShapeType.FramedWedge,
24-
primitives.common.ShapeType.FramedRhombus
25-
],
26-
shapeIndex = 0,
27-
itemTitleColors = [
28-
primitives.common.Colors.Red,
29-
primitives.common.Colors.Green,
30-
primitives.common.Colors.Navy,
31-
primitives.common.Colors.Cyan
32-
],
33-
colorIndex = 0;
12+
<script type="text/javascript">
13+
var control,
14+
minimizedItemShapeTypes = [
15+
primitives.common.ShapeType.Rectangle,
16+
primitives.common.ShapeType.Oval,
17+
primitives.common.ShapeType.Triangle,
18+
primitives.common.ShapeType.CrossOut,
19+
primitives.common.ShapeType.Circle,
20+
primitives.common.ShapeType.Rhombus,
21+
primitives.common.ShapeType.Wedge,
22+
primitives.common.ShapeType.FramedOval,
23+
primitives.common.ShapeType.FramedTriangle,
24+
primitives.common.ShapeType.FramedWedge,
25+
primitives.common.ShapeType.FramedRhombus
26+
],
27+
shapeIndex = 0,
28+
itemTitleColors = [
29+
primitives.common.Colors.Red,
30+
primitives.common.Colors.Green,
31+
primitives.common.Colors.Navy,
32+
primitives.common.Colors.Cyan
33+
],
34+
colorIndex = 0;
3435

35-
function getNextShapeType() {
36-
var result = minimizedItemShapeTypes[shapeIndex];
37-
shapeIndex+=1;
38-
if(shapeIndex == minimizedItemShapeTypes.length) {
39-
shapeIndex = 0;
40-
}
41-
return result;
42-
}
36+
function getNextShapeType() {
37+
var result = minimizedItemShapeTypes[shapeIndex];
38+
shapeIndex += 1;
39+
if (shapeIndex == minimizedItemShapeTypes.length) {
40+
shapeIndex = 0;
41+
}
42+
return result;
43+
}
4344

44-
function getNextColor() {
45-
var result = itemTitleColors[colorIndex];
46-
colorIndex+=1;
47-
if(colorIndex == itemTitleColors.length) {
48-
colorIndex = 0;
49-
}
50-
return result;
51-
}
45+
function getNextColor() {
46+
var result = itemTitleColors[colorIndex];
47+
colorIndex += 1;
48+
if (colorIndex == itemTitleColors.length) {
49+
colorIndex = 0;
50+
}
51+
return result;
52+
}
5253

53-
function getMarkerTemplate() {
54-
var result = new primitives.orgdiagram.TemplateConfig();
55-
result.name = "MarkerTemplate";
56-
result.minimizedItemSize = new primitives.common.Size(8, 8);
57-
result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
58-
return result;
59-
}
54+
function getMarkerTemplate() {
55+
var result = new primitives.orgdiagram.TemplateConfig();
56+
result.name = "MarkerTemplate";
57+
result.minimizedItemSize = new primitives.common.Size(8, 8);
58+
result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
59+
return result;
60+
}
6061

61-
document.addEventListener('DOMContentLoaded', function () {
62-
var options = new primitives.orgdiagram.Config();
62+
document.addEventListener('DOMContentLoaded', function () {
63+
var options = new primitives.orgdiagram.Config();
6364

64-
var rootItem = {
65-
id: 0,
66-
parent: null,
67-
title: "Title 0",
68-
description: "Description",
69-
image: "../images/photos/a.png",
70-
minimizedItemShapeType: (getNextShapeType()),
71-
itemTitleColor: (getNextColor())
72-
};
73-
var levelItems = [rootItem];
74-
var items = [rootItem];
75-
var id = 1;
76-
for(var levelIndex = 0; levelIndex < 4; levelIndex+=1) {
77-
var newLevelItems = [];
78-
for(var index = 0; index < levelItems.length; index+=1) {
79-
var parent = levelItems[index];
80-
for (var index2 = 0; index2 < 2; index2++) {
81-
var newItem = {
82-
id: ++id,
83-
parent: parent.id,
84-
title: id.toString() + " Title",
85-
description: id.toString() + " Description",
86-
image: "../images/photos/b.png",
87-
minimizedItemShapeType: (getNextShapeType()),
88-
itemTitleColor: (getNextColor())
89-
};
90-
items.push(newItem);
91-
newLevelItems.push(newItem);
92-
}
93-
}
94-
levelItems = newLevelItems;
95-
}
65+
var rootItem = {
66+
id: 0,
67+
parent: null,
68+
title: "Title 0",
69+
description: "Description",
70+
image: "../images/photos/a.png",
71+
minimizedItemShapeType: (getNextShapeType()),
72+
itemTitleColor: (getNextColor())
73+
};
74+
var levelItems = [rootItem];
75+
var items = [rootItem];
76+
var id = 1;
77+
for (var levelIndex = 0; levelIndex < 4; levelIndex += 1) {
78+
var newLevelItems = [];
79+
for (var index = 0; index < levelItems.length; index += 1) {
80+
var parent = levelItems[index];
81+
for (var index2 = 0; index2 < 2; index2++) {
82+
var newItem = {
83+
id: ++id,
84+
parent: parent.id,
85+
title: id.toString() + " Title",
86+
description: id.toString() + " Description",
87+
image: "../images/photos/b.png",
88+
minimizedItemShapeType: (getNextShapeType()),
89+
itemTitleColor: (getNextColor())
90+
};
91+
items.push(newItem);
92+
newLevelItems.push(newItem);
93+
}
94+
}
95+
levelItems = newLevelItems;
96+
}
9697

97-
/* collect all ids */
98-
var selectedItems = [];
99-
for(var index = 0; index < items.length; index+=1) {
100-
selectedItems.push(items[index].id);
101-
}
98+
/* collect all ids */
99+
var selectedItems = [];
100+
for (var index = 0; index < items.length; index += 1) {
101+
selectedItems.push(items[index].id);
102+
}
102103

103-
options.items = items;
104-
options.cursorItem = 0;
105-
options.showFrame = true;
106-
options.frameInnerPadding = 4;
107-
options.frameOuterPadding = 4;
108-
options.templates = [getMarkerTemplate()];
109-
options.defaultTemplateName = "MarkerTemplate";
110-
options.hasSelectorCheckbox = primitives.common.Enabled.True;
111-
options.pageFitMode = primitives.common.PageFitMode.None;
112-
options.selectedItems = selectedItems;
113-
control = primitives.orgdiagram.Control(document.getElementById("diagram"), options);
114-
});
115-
</script>
104+
options.items = items;
105+
options.cursorItem = 0;
106+
options.showFrame = true;
107+
options.frameInnerPadding = 4;
108+
options.frameOuterPadding = 4;
109+
options.templates = [getMarkerTemplate()];
110+
options.defaultTemplateName = "MarkerTemplate";
111+
options.hasSelectorCheckbox = primitives.common.Enabled.True;
112+
options.pageFitMode = primitives.common.PageFitMode.None;
113+
options.selectedItems = selectedItems;
114+
control = primitives.orgdiagram.Control(document.getElementById("basicdiagram"), options);
115+
});
116+
</script>
116117
</head>
118+
117119
<body>
118-
<div id="diagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
120+
<div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
119121
</body>
120-
</html>
122+
123+
</html>

‎screenshots.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ const util = require('util');
44
const exec = util.promisify(require('child_process').exec);
55

66
var screenshots = [
7+
{
8+
url: "http://localhost/primitives/samples/javascript.controls/CaseShowFrame.html",
9+
imageName: "CaseShowFrame.png"
10+
},
711
{
812
url: "http://localhost/primitives/samples/javascript.controls/CaseLoopsInFamilyChart.html",
913
imageName: "CaseLoopsInFamilyChart.png"

0 commit comments

Comments
 (0)