Skip to content

Commit a86700a

Browse files
BasicPrimitivesBasicPrimitives
committed
Fixed center on cursor in AutoSize mode
Added Selected Items Frame Sample
1 parent d86bf12 commit a86700a

13 files changed

Lines changed: 191 additions & 70 deletions

File tree

‎changelog.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* Add `showFrame`, `fameInnerPadding`, `frameOuterPadding` properties to `primitives.orgdiagram.Config` & `primitives.famdiagram.Config`
33
* Modified callout annotation palacement for minimized nodes placed outside view port.
44
* Fixed exception when `selectedItems` collection contains non existing items.
5+
* Fixed center on cursor in AutoSize mode
56
#### Version 5.8.2
67
* Fixed `selectionPathMode` in Family Diagram.
78
#### Version 5.8.1

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@
266266
}
267267
},
268268
{
269-
label: "Selected Items Frame",
269+
label: "Frame",
270270
frameworks: {
271271
javascript: "samples/javascript.controls/CaseShowFrame.html",
272272
jquery: "samples/jquery.widgets/CaseShowFrame.html"

‎samples/javascript.controls/CaseAutoSize.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,18 @@
5656
options.pageFitMode = primitives.common.PageFitMode.AutoSize;
5757
options.autoSizeMinimum = sizes[getRadioValue("autoSizeMinimum")];
5858
options.autoSizeMaximum = sizes[getRadioValue("autoSizeMaximum")];
59+
options.showFrame = false;
5960
control = primitives.orgdiagram.Control(document.getElementById("diagram"), options);
6061
});
6162

6263
function Update() {
6364
var autoSizeMinimum = sizes[getRadioValue("autoSizeMinimum")];
6465
var autoSizeMaximum = sizes[getRadioValue("autoSizeMaximum")];
66+
var showFrame = (getRadioValue("showFrame") == "1" ? true : false);
6567
control.setOptions({
6668
autoSizeMinimum: autoSizeMinimum,
67-
autoSizeMaximum: autoSizeMaximum
69+
autoSizeMaximum: autoSizeMaximum,
70+
showFrame: showFrame
6871
});
6972
control.update(primitives.common.UpdateMode.Refresh);
7073
}
@@ -81,6 +84,11 @@
8184
</script>
8285
</head>
8386
<body>
87+
<p>
88+
Show Selected Items on the frame:
89+
<label><input onclick="Update()" name="showFrame" type="radio" value="1">Yes</label>
90+
<label><input onclick="Update()" name="showFrame" type="radio" value="0" checked="">No</label>
91+
</p>
8492
<p id="autoSizeMinimum">Minimum Auto Size:
8593
<br><label><input onclick="Update()" name="autoSizeMinimum" type="radio" value="640*480" checked="">640*480</label>
8694
<label><input onclick="Update()" name="autoSizeMinimum" type="radio" value="800*600">800*600</label>

‎samples/javascript.controls/CaseShowFrame.html‎

Lines changed: 62 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,67 @@
99
<link href="../../min/primitives.latest.css?2106" media="screen" rel="stylesheet" type="text/css" />
1010

1111
<script type="text/javascript">
12-
var control;
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;
34+
35+
function getNextShapeType() {
36+
var result = minimizedItemShapeTypes[shapeIndex];
37+
shapeIndex+=1;
38+
if(shapeIndex == minimizedItemShapeTypes.length) {
39+
shapeIndex = 0;
40+
}
41+
return result;
42+
}
43+
44+
function getNextColor() {
45+
var result = itemTitleColors[colorIndex];
46+
colorIndex+=1;
47+
if(colorIndex == itemTitleColors.length) {
48+
colorIndex = 0;
49+
}
50+
return result;
51+
}
52+
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+
}
1360

1461
document.addEventListener('DOMContentLoaded', function () {
1562
var options = new primitives.orgdiagram.Config();
1663

17-
var rootItem = new primitives.orgdiagram.ItemConfig({
64+
var rootItem = {
1865
id: 0,
1966
parent: null,
2067
title: "Title 0",
2168
description: "Description",
22-
image: "../images/photos/a.png"
23-
});
69+
image: "../images/photos/a.png",
70+
minimizedItemShapeType: (getNextShapeType()),
71+
itemTitleColor: (getNextColor())
72+
};
2473
var levelItems = [rootItem];
2574
var items = [rootItem];
2675
var id = 1;
@@ -29,13 +78,15 @@
2978
for(var index = 0; index < levelItems.length; index+=1) {
3079
var parent = levelItems[index];
3180
for (var index2 = 0; index2 < 2; index2++) {
32-
var newItem = new primitives.orgdiagram.ItemConfig({
81+
var newItem = {
3382
id: ++id,
3483
parent: parent.id,
3584
title: id.toString() + " Title",
3685
description: id.toString() + " Description",
37-
image: "../images/photos/b.png"
38-
});
86+
image: "../images/photos/b.png",
87+
minimizedItemShapeType: (getNextShapeType()),
88+
itemTitleColor: (getNextColor())
89+
};
3990
items.push(newItem);
4091
newLevelItems.push(newItem);
4192
}
@@ -52,6 +103,10 @@
52103
options.items = items;
53104
options.cursorItem = 0;
54105
options.showFrame = true;
106+
options.frameInnerPadding = 4;
107+
options.frameOuterPadding = 4;
108+
options.templates = [getMarkerTemplate()];
109+
options.defaultTemplateName = "MarkerTemplate";
55110
options.hasSelectorCheckbox = primitives.common.Enabled.True;
56111
options.pageFitMode = primitives.common.PageFitMode.None;
57112
options.selectedItems = selectedItems;

‎samples/jquery.widgets/CaseAutoSize.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
Update(primitives.common.UpdateMode.Refresh);
5959
});
6060

61+
jQuery("input:radio[name=showFrame]").change(function () {
62+
Update(primitives.common.UpdateMode.Refresh);
63+
});
64+
6165
var options = new primitives.orgdiagram.Config();
6266

6367
var items = [
@@ -96,17 +100,20 @@
96100
options.pageFitMode = parseInt(jQuery("input:radio[name=pageFitMode]:checked").val(), 10);
97101
options.autoSizeMinimum = sizes[jQuery("input:radio[name=autoSizeMinimum]:checked").val()];
98102
options.autoSizeMaximum = sizes[jQuery("input:radio[name=autoSizeMaximum]:checked").val()];
103+
options.showFrame = (parseInt(jQuery("input:radio[name=showFrame]:checked").val()) == 1 ? true : false);
99104
jQuery("#diagram").orgDiagram(options);
100105
});
101106

102107
function Update(updateMode) {
103108
var pageFitMode = parseInt(jQuery("input:radio[name=pageFitMode]:checked").val(), 10);
104109
var autoSizeMinimum = sizes[jQuery("input:radio[name=autoSizeMinimum]:checked").val()];
105110
var autoSizeMaximum = sizes[jQuery("input:radio[name=autoSizeMaximum]:checked").val()];
111+
var showFrame = (parseInt(jQuery("input:radio[name=showFrame]:checked").val()) == 1 ? true : false);
106112
jQuery("#diagram").orgDiagram("option", {
107113
pageFitMode: pageFitMode,
108114
autoSizeMinimum: autoSizeMinimum,
109-
autoSizeMaximum: autoSizeMaximum
115+
autoSizeMaximum: autoSizeMaximum,
116+
showFrame: showFrame
110117
});
111118
jQuery("#diagram").orgDiagram("update", updateMode);
112119
}
@@ -117,6 +124,9 @@
117124
<p id="pageFitMode">Page Fit Mode: </p>
118125
<p id="autoSizeMinimum">Minimum Auto Size: </p>
119126
<p id="autoSizeMaximum">Maximum Auto Size: </p>
127+
Show selected items on the control's frame: &nbsp;
128+
<label><input name='showFrame' type='radio' value="1" />Yes</label>
129+
<label><input name='showFrame' type='radio' value="0" checked=""/>No</label>
120130
<div id="diagram" style="border-style: dotted; border-width: 1px;"></div>
121131
</body>
122132

‎samples/jquery.widgets/CaseShowFrame.html‎

Lines changed: 96 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,59 +15,115 @@
1515
<link href="../../min/primitives.latest.css?5100" media="screen" rel="stylesheet" type="text/css" />
1616

1717
<script type='text/javascript'>
18+
var minimizedItemShapeTypes = [
19+
primitives.common.ShapeType.Rectangle,
20+
primitives.common.ShapeType.Oval,
21+
primitives.common.ShapeType.Triangle,
22+
primitives.common.ShapeType.CrossOut,
23+
primitives.common.ShapeType.Circle,
24+
primitives.common.ShapeType.Rhombus,
25+
primitives.common.ShapeType.Wedge,
26+
primitives.common.ShapeType.FramedOval,
27+
primitives.common.ShapeType.FramedTriangle,
28+
primitives.common.ShapeType.FramedWedge,
29+
primitives.common.ShapeType.FramedRhombus
30+
],
31+
shapeIndex = 0,
32+
itemTitleColors = [
33+
primitives.common.Colors.Red,
34+
primitives.common.Colors.Green,
35+
primitives.common.Colors.Navy,
36+
primitives.common.Colors.Cyan
37+
],
38+
colorIndex = 0;
39+
40+
function getNextShapeType() {
41+
var result = minimizedItemShapeTypes[shapeIndex];
42+
shapeIndex+=1;
43+
if(shapeIndex == minimizedItemShapeTypes.length) {
44+
shapeIndex = 0;
45+
}
46+
return result;
47+
}
48+
49+
function getNextColor() {
50+
var result = itemTitleColors[colorIndex];
51+
colorIndex+=1;
52+
if(colorIndex == itemTitleColors.length) {
53+
colorIndex = 0;
54+
}
55+
return result;
56+
}
57+
58+
function getMarkerTemplate() {
59+
var result = new primitives.orgdiagram.TemplateConfig();
60+
result.name = "MarkerTemplate";
61+
result.minimizedItemSize = new primitives.common.Size(8, 8);
62+
result.highlightPadding = new primitives.common.Thickness(4, 4, 4, 4);
63+
return result;
64+
}
65+
1866
$(document).ready(function () {
19-
var options = new primitives.orgdiagram.Config();
67+
var options = new primitives.orgdiagram.Config();
2068

21-
var rootItem = new primitives.orgdiagram.ItemConfig({
22-
id: 0,
23-
parent: null,
24-
title: "Title 0",
25-
description: "Description",
26-
image: "../images/photos/a.png"
27-
});
28-
var levelItems = [rootItem];
29-
var items = [rootItem];
30-
var id = 1;
31-
for(var levelIndex = 0; levelIndex < 4; levelIndex+=1) {
32-
var newLevelItems = [];
33-
for(var index = 0; index < levelItems.length; index+=1) {
34-
var parent = levelItems[index];
35-
for (var index2 = 0; index2 < 2; index2++) {
36-
var newItem = new primitives.orgdiagram.ItemConfig({
37-
id: ++id,
38-
parent: parent.id,
39-
title: id.toString() + " Title",
40-
description: id.toString() + " Description",
41-
image: "../images/photos/b.png"
42-
});
43-
items.push(newItem);
44-
newLevelItems.push(newItem);
45-
}
69+
var rootItem = {
70+
id: 0,
71+
parent: null,
72+
title: "Title 0",
73+
description: "Description",
74+
image: "../images/photos/a.png",
75+
minimizedItemShapeType: (getNextShapeType()),
76+
itemTitleColor: (getNextColor())
77+
};
78+
var levelItems = [rootItem];
79+
var items = [rootItem];
80+
var id = 1;
81+
for(var levelIndex = 0; levelIndex < 4; levelIndex+=1) {
82+
var newLevelItems = [];
83+
for(var index = 0; index < levelItems.length; index+=1) {
84+
var parent = levelItems[index];
85+
for (var index2 = 0; index2 < 2; index2++) {
86+
var newItem = {
87+
id: ++id,
88+
parent: parent.id,
89+
title: id.toString() + " Title",
90+
description: id.toString() + " Description",
91+
image: "../images/photos/b.png",
92+
minimizedItemShapeType: (getNextShapeType()),
93+
itemTitleColor: (getNextColor())
94+
};
95+
items.push(newItem);
96+
newLevelItems.push(newItem);
4697
}
47-
levelItems = newLevelItems;
4898
}
99+
levelItems = newLevelItems;
100+
}
49101

50-
/* collect all ids */
51-
var selectedItems = [];
52-
for(var index = 0; index < items.length; index+=1) {
53-
selectedItems.push(items[index].id);
54-
}
102+
/* collect all ids */
103+
var selectedItems = [];
104+
for(var index = 0; index < items.length; index+=1) {
105+
selectedItems.push(items[index].id);
106+
}
55107

56-
options.items = items;
57-
options.cursorItem = 0;
58-
options.showFrame = true;
59-
options.hasSelectorCheckbox = primitives.common.Enabled.True;
60-
options.pageFitMode = primitives.common.PageFitMode.None;
61-
options.selectedItems = selectedItems;
108+
options.items = items;
109+
options.cursorItem = 0;
110+
options.showFrame = true;
111+
options.frameInnerPadding = 4;
112+
options.frameOuterPadding = 4;
113+
options.templates = [getMarkerTemplate()];
114+
options.defaultTemplateName = "MarkerTemplate";
115+
options.hasSelectorCheckbox = primitives.common.Enabled.True;
116+
options.pageFitMode = primitives.common.PageFitMode.None;
117+
options.selectedItems = selectedItems;
62118

63-
jQuery("#basicdiagram").orgDiagram(options);
119+
jQuery("#basicdiagram").orgDiagram(options);
64120
});
65121

66122
</script>
67123
</head>
68124

69125
<body>
70-
<div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;" />
126+
<div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;" />
71127
</body>
72128

73129
</html>

‎src.primitives/Controls/FamDiagram/TaskManagerFactory.js‎

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

‎src.primitives/Controls/FamDiagram/Tasks/Options/ItemsOptionTask.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,11 @@ primitives.famdiagram.ItemsOptionTask = function (optionsTask, defaultItemConfig
2323
var context = {
2424
isChanged: false,
2525
hash: _hash,
26-
sourceHash: {}
26+
sourceHash: _sourceHash
2727
};
2828

2929
_data = _dataTemplate.read(_data, optionsTask.getOptions(), "options", context);
3030

31-
_sourceHash = context.sourceHash["options-items"];
32-
3331
return context.isChanged;
3432
}
3533

@@ -38,7 +36,7 @@ primitives.famdiagram.ItemsOptionTask = function (optionsTask, defaultItemConfig
3836
}
3937

4038
function getConfig(itemId) {
41-
return _sourceHash[itemId];
39+
return _sourceHash["options-items"][itemId];
4240
}
4341

4442
return {

0 commit comments

Comments
 (0)