Skip to content

Commit f3bc38a

Browse files
BasicPrimitivesBasicPrimitives
committed
Added border line for scrollare when frame is active
1 parent 463bda6 commit f3bc38a

File tree

6 files changed

+149
-130
lines changed

6 files changed

+149
-130
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

‎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"

‎src.primitives/Controls/OrgDiagram/BaseControl.js‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -235,12 +235,15 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
235235
primitives.common.JsonML.applyStyles(layout.frameMousePanel, layoutOptions.controlSize.getCSS());
236236

237237
/* set scroll panel position */
238+
var frameThickness = new primitives.common.Thickness(layoutOptions.frameThickness);
238239
primitives.common.JsonML.applyStyles(layout.scrollPanel, primitives.common.mergeObjects({
239-
left: layoutOptions.frameThickness.left + "px",
240-
top: layoutOptions.frameThickness.top + "px"
241-
},
240+
left: frameThickness.left + "px",
241+
top: frameThickness.top + "px"
242+
},
242243
layoutOptions.viewportSize.getCSS())
243244
);
245+
246+
layout.scrollPanel.setAttribute("class", (frameThickness.isEmpty() ? name : "bp-scrollframe " + name))
244247
}
245248

246249
function createLayout(layout, name) {
@@ -276,8 +279,8 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
276279
position: "absolute",
277280
overflow: "hidden"
278281
},
279-
viewportRect.getCSS()),
280-
"name": "frameMousePanel",
282+
viewportRect.getCSS()),
283+
"name": "frameMousePanel",
281284
"class": name,
282285
"$": function (element) { layout.frameMousePanel = element; }
283286
},
@@ -287,7 +290,7 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
287290
position: "absolute",
288291
overflow: "hidden"
289292
},
290-
viewportRect.getCSS()),
293+
viewportRect.getCSS()),
291294
"name": "framePlaceholder",
292295
"class": ["frameplaceholder", name],
293296
"$": function (element) { layout.framePlaceholder = element; }
@@ -305,9 +308,9 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
305308
"width": viewportRect.width + "px",
306309
"height": viewportRect.height + "px"
307310
},
308-
viewportRect.getCSS()),
311+
viewportRect.getCSS()),
309312
"name": "scrollPanel",
310-
"class": ["bp-scrollpanel", name],
313+
"class": name,
311314
"$": function (element) { layout.scrollPanel = element; }
312315
},
313316
["div", /* mousePanel - mouse tracking events panel */
@@ -316,21 +319,21 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
316319
position: "absolute",
317320
overflow: "visible"
318321
},
319-
viewportRect.getCSS()),
320-
"name": "mousePanel",
321-
"class": name,
322-
"$": function (element) { layout.mousePanel = element; }
322+
viewportRect.getCSS()),
323+
"name": "mousePanel",
324+
"class": name,
325+
"$": function (element) { layout.mousePanel = element; }
323326
},
324327
["div", /* placeholder - contents scalable panel */
325328
{
326329
"style": primitives.common.mergeObjects({
327330
position: "absolute",
328331
overflow: "hidden"
329332
},
330-
viewportRect.getCSS()),
331-
"name": "placeholder",
332-
"class": ["placeholder", name],
333-
"$": function (element) { layout.placeholder = element; }
333+
viewportRect.getCSS()),
334+
"name": "placeholder",
335+
"class": ["placeholder", name],
336+
"$": function (element) { layout.placeholder = element; }
334337
},
335338
["div", /* calloutPlaceholder - callout panel */
336339
{
@@ -369,9 +372,9 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
369372
layout.mousePanel.addEventListener('click', onMouseClick);
370373
layout.mousePanel.addEventListener('dblclick', onMouseDblClick);
371374
layout.mousePanel.addEventListener('change', onCheckboxChange);
372-
375+
373376
layout.element.addEventListener('keydown', onKeyDown);
374-
377+
375378
layout.scrollPanel.addEventListener('scroll', onScroll);
376379

377380
if (_data.options.enablePanning && primitives.common.isChrome()) {
@@ -393,7 +396,7 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
393396
layout.mousePanel.removeEventListener("dblclick", onMouseDblClick);
394397
layout.mousePanel.removeEventListener("change", onCheckboxChange);
395398
}
396-
if(layout.element != null) {
399+
if (layout.element != null) {
397400
layout.element.removeEventListener("keydown", onKeyDown);
398401
}
399402
if (layout.scrollPanel != null) {
@@ -404,7 +407,7 @@ primitives.orgdiagram.BaseControl = function (element, options, taskManagerFacto
404407
layout.scrollPanel.removeEventListener('dragover', onDragOver);
405408
}
406409

407-
if(layout.frameMousePanel != null) {
410+
if (layout.frameMousePanel != null) {
408411
layout.frameMousePanel.removeEventListener('mousemove', onFrameMouseMove);
409412
layout.frameMousePanel.removeEventListener('click', onFrameMouseClick);
410413
}

0 commit comments

Comments
 (0)