Skip to content

Commit 74496df

Browse files
author
Basic Primitives
committed
Version 5.1.1
1 parent 4be3624 commit 74496df

File tree

494 files changed

+63545
-35689
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

494 files changed

+63545
-35689
lines changed

‎.jshintrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"globals": {
3+
"$": false,
4+
"jQuery": false,
5+
"ko": false
6+
}
7+
}

‎ReferenceControlsProcessingDiagram.html‎

Lines changed: 155 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -3,97 +3,67 @@
33
<head>
44
<title>Controls Processing Reference Diagram</title>
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6-
<script type="text/javascript" src="packages/jquery/jquery-3.3.1.min.js"></script>
7-
<script type="text/javascript" src="packages/jquery-ui/jquery-ui.min.js"></script>
8-
<link href="packages/jquery-ui/jquery-ui.min.css" media="screen" rel="stylesheet" type="text/css" />
9-
10-
<!-- jQuery UI Layout -->
11-
<script type="text/javascript" src="packages/jquerylayout/jquery.layout-latest.min.js"></script>
12-
<link rel="stylesheet" type="text/css" href="packages/jquerylayout/layout-default-latest.css" />
13-
14-
<script type="text/javascript">
15-
jQuery(document).ready( function () {
16-
jQuery('body').layout(
17-
{
18-
center__paneSelector: "#contentpanel"
19-
});
20-
});
21-
</script>
226

237
<!-- header -->
24-
25-
<link href="min/primitives.latest.css?4300" media="screen" rel="stylesheet" type="text/css" />
26-
<script type="text/javascript" src="min/primitives.min.js?4300"></script>
27-
<script type="text/javascript" src="min/bporgeditor.min.js?4300"></script>
8+
<!-- # include file="src.primitives/src.primitives.html"-->
9+
<link href="min/primitives.latest.css?5100" media="screen" rel="stylesheet" type="text/css" />
10+
<script type="text/javascript" src="min/primitives.min.js?5100"></script>
11+
<script type="text/javascript" src="samples/javascript.controls/common/helpers.js"></script>
2812

2913
<script type="text/javascript">
14+
var control;
15+
var timer = null;
16+
var treeItems = {};
3017
var optionsRender = new primitives.helpers.controls.Render([
3118
new primitives.helpers.controls.PanelConfig("Options", [
32-
new primitives.helpers.controls.RadioBoxConfig("diagramType", 1, "Select Control", { FamilyDiagram: 1, OrganizationalDiagram: 2 }, primitives.helpers.controls.ValueType.Integer, onUpdate),
19+
new primitives.helpers.controls.RadioBoxConfig("diagramType2", 1, "Select Control", { FamilyDiagram: 1, OrganizationalDiagram: 2 }, primitives.helpers.controls.ValueType.Integer, onUpdate),
3320
new primitives.helpers.controls.CaptionConfig("Page Fit Mode defines rule of fitting chart into available screen space. Set it to None if you want to disable it.", false),
3421
new primitives.helpers.controls.RadioBoxConfig("pageFitMode", primitives.common.PageFitMode.FitToPage, "Page Fit Mode", { None: 0, PageWidth: 1, PageHeight: 2, FitToPage: 3, SelectionOnly: 6 }, primitives.helpers.controls.ValueType.Integer, onUpdate),
3522
new primitives.helpers.controls.RadioBoxConfig("neighboursSelectionMode", primitives.common.NeighboursSelectionMode.ParentsAndChildren, "Cursor Neighbours Selection Mode", primitives.common.NeighboursSelectionMode, primitives.helpers.controls.ValueType.Integer, onUpdate),
36-
new primitives.helpers.controls.DropDownBoxConfig("hideGrandParentsConnectors", "true", "This option hides direct connectors to grand parents. It helps to reduce diagrams connectors layout complexity. This option should be used together with dynamic highlighting of connectors to grandparents via immidiate parents, so information is not lost.", ["true", "false"], primitives.helpers.controls.ValueType.Boolean, onUpdate)
23+
new primitives.helpers.controls.DropDownBoxConfig("hideGrandParentsConnectors", true, "This option hides direct connectors to grand parents. It helps to reduce diagrams connectors layout complexity. This option should be used together with dynamic highlighting of connectors to grandparents via immidiate parents, so information is not lost.", [true, false], primitives.helpers.controls.ValueType.Boolean, onUpdate)
3724
])
3825
], {
39-
diagramType: 1,
26+
diagramType2: 1,
4027
pageFitMode: primitives.common.PageFitMode.None,
4128
neighboursSelectionMode: primitives.common.NeighboursSelectionMode.ParentsAndChildren,
4229
hideGrandParentsConnectors: true
4330
});
44-
var famDiagram = null;
45-
var treeItems = {};
46-
47-
jQuery(document).ready( function () {
48-
jQuery.ajaxSetup({
49-
cache: false
50-
});
5131

52-
jQuery('#contentpanel').layout(
53-
{
54-
center__paneSelector: "#centerpanel"
55-
, south__paneSelector: "#southpanel"
56-
, south__resizable: false
57-
, south__closable: false
58-
, south__spacing_open: 0
59-
, south__size: 50
60-
, west__size: 400
61-
, west__paneSelector: "#westpanel"
62-
, west__resizable: true
63-
, center__onresize: function () {
64-
if (famDiagram != null) {
65-
jQuery("#centerpanel").famDiagram("update", primitives.common.UpdateMode.Refresh);
66-
}
67-
}
68-
});
32+
function onUpdate() {
33+
if (control != null) {
34+
control.setOptions(getOptions());
35+
control.update(primitives.common.UpdateMode.Recreate);
36+
}
37+
}
6938

70-
optionsRender.render(jQuery("#westpanel"));
39+
document.addEventListener('DOMContentLoaded', function () {
40+
optionsRender.render(document.getElementById("westpanel"));
41+
control = primitives.famdiagram.Control(document.getElementById("centerpanel"),
42+
getOptions()
43+
);
7144

72-
Update(jQuery("#centerpanel"));
45+
window.addEventListener('resize', function (event) {
46+
onWindowResize();
47+
});
7348
});
7449

75-
function onUpdate() {
76-
Update(jQuery("#centerpanel"));
77-
}
78-
79-
function Update(selector) {
50+
function getOptions() {
8051
var options = optionsRender.getValues();
8152

82-
var control;
83-
switch (options.diagramType) {
84-
case 1:
85-
control = primitives.famdiagram.Control(jQuery("<div></div>"), new primitives.famdiagram.Config());
86-
break;
53+
var controlOptions;
54+
switch (options.diagramType2) {
8755
case 2:
88-
control = primitives.orgdiagram.Control(jQuery("<div></div>"), new primitives.orgdiagram.Config());
56+
controlOptions = primitives.orgdiagram.getProcessDiagramConfig();
57+
break;
58+
default:
59+
controlOptions = primitives.famdiagram.getProcessDiagramConfig();
8960
break;
90-
}
9161

92-
var controlOptions = control.getProcessDiagramConfig();
93-
jQuery.extend(controlOptions, options);
62+
}
63+
primitives.common.mergeObjects(controlOptions, options);
9464
options = controlOptions;
9565

96-
jQuery.extend(options, {
66+
primitives.common.mergeObjects(options, {
9767
linesPalette: [
9868
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#C6C6C6", lineWidth: 1, lineType: primitives.common.LineType.Solid }), //1
9969
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#A5A5A5", lineWidth: 1, lineType: primitives.common.LineType.Dashed }), //4
@@ -122,52 +92,31 @@
12292
onHighlightChanging: onHighlightChanging
12393
});
12494

125-
famDiagram = selector.famDiagram(options);
126-
selector.famDiagram("update");
95+
return options;
12796
}
12897

12998
function onTemplateRender(event, data) {
130-
var itemConfig = data.context;
99+
var itemConfig = data.context,
100+
element = data.element;
131101

132-
if (data.templateName == "ShapeTemplate") {
133-
switch (data.renderingMode) {
134-
case primitives.common.RenderingMode.Create:
135-
/* Initialize widgets here */
136-
data.element.find("[name=shape]").bpShape({
137-
graphicsType: primitives.common.GraphicsType.SVG,
138-
shapeType: itemConfig["shapeType"],
139-
lineType: primitives.common.LineType.Solid,
140-
position: new primitives.common.Rect(0, 0, 100, 100),
141-
borderColor: "Navy",
142-
offset: -3,
143-
lineWidth: 3,
144-
fillColor: null,
145-
cornerRadius: 0
146-
});
102+
if (data.templateName == "UnitTemplate") {
103+
var titleBackground = element.firstChild;
104+
titleBackground.style.backgroundColor = itemConfig.itemTitleColor || primitives.common.Colors.RoyalBlue;
147105

148-
break;
149-
case primitives.common.RenderingMode.Update:
150-
/* Update widgets here */
151-
data.element.find("[name=shape]").bpShape("option", {
152-
shapeType: itemConfig["shapeType"]
153-
});
154-
data.element.find("[name=shape]").bpShape("update", primitives.common.UpdateMode.Refresh);
155-
break;
156-
}
106+
var title = element.childNodes[1];
107+
title.textContent = itemConfig.title;
157108
}
158109

159-
data.element.find("[name=titleBackground]").css({ "background": itemConfig.itemTitleColor });
110+
if (data.templateName == "CalloutUnitTemplate") {
111+
var titleBackground = element.firstChild;
112+
titleBackground.style.backgroundColor = itemConfig.itemTitleColor || primitives.common.Colors.RoyalBlue;
160113

161-
var fields = ["title", "description", "phone", "email"];
162-
for (var index = 0; index < fields.length; index++) {
163-
var field = fields[index];
114+
var title = element.childNodes[1];
115+
title.textContent = itemConfig.title;
164116

165-
var element = data.element.find("[name=" + field + "]");
166-
if (element.text() != itemConfig[field]) {
167-
element.text(itemConfig[field]);
168-
}
117+
var description = element.childNodes[2];
118+
description.textContent = itemConfig.description;
169119
}
170-
171120
}
172121

173122
function getUnitTemplate() {
@@ -185,17 +134,40 @@
185134
result.highlightPadding = new primitives.common.Thickness(2, 2, 2, 2);
186135

187136

188-
var itemTemplate = jQuery(
189-
'<div class="bp-item bp-corner-all bt-item-frame">'
190-
+ '<div name="titleBackground" class="bp-item bp-corner-all bp-title-frame" style="top: 2px; left: 2px; width: 160px; height: 4px;">'
191-
+ '</div>'
192-
+ '<div name="title" class="bp-item" style="top: 8px; left: 2px; width: 160px; height: 24px; font-size: 10px;"></div>'
193-
+ '</div>'
194-
).css({
195-
width: result.itemSize.width + "px",
196-
height: result.itemSize.height + "px"
197-
}).addClass("bp-item bp-corner-all bt-item-frame");
198-
result.itemTemplate = itemTemplate.wrap('<div>').parent().html();
137+
result.itemTemplate = ["div",
138+
{
139+
"style": {
140+
width: result.itemSize.width + "px",
141+
height: result.itemSize.height + "px"
142+
},
143+
"class": ["bp-item", "bp-corner-all", "bt-item-frame"]
144+
},
145+
["div",
146+
{
147+
"name": "titleBackground",
148+
"class": ["bp-item", "bp-corner-all", "bp-title-frame"],
149+
"style": {
150+
top: "2px",
151+
left: "2px",
152+
width: "160px",
153+
height: "4px"
154+
}
155+
}
156+
],
157+
["div",
158+
{
159+
"name": "title",
160+
"class": "bp-item",
161+
"style": {
162+
top: "8px",
163+
left: "2px",
164+
width: "160px",
165+
height: "24px",
166+
fontSize: "10px"
167+
}
168+
}
169+
]
170+
];
199171

200172
return result;
201173
}
@@ -215,18 +187,55 @@
215187
result.highlightPadding = new primitives.common.Thickness(2, 2, 2, 2);
216188

217189

218-
var itemTemplate = jQuery(
219-
'<div class="bp-item bp-corner-all bt-item-frame">'
220-
+ '<div name="titleBackground" class="bp-item bp-corner-all bp-title-frame" style="top: 2px; left: 2px; width: 316px; height: 4px;">'
221-
+ '</div>'
222-
+ '<div name="title" class="bp-item" style="top: 8px; left: 2px; width: 312px; height: 24px; font-size: 12px;"></div>'
223-
+ '<div name="description" class="bp-item" style="top: 36px; left: 4px; width: 312px; height: 36px; font-size: 10px;"></div>'
224-
+ '</div>'
225-
).css({
226-
width: result.itemSize.width + "px",
227-
height: result.itemSize.height + "px"
228-
}).addClass("bp-item bp-corner-all bt-item-frame");
229-
result.itemTemplate = itemTemplate.wrap('<div>').parent().html();
190+
result.itemTemplate = ["div",
191+
{
192+
"style": {
193+
top: "2px",
194+
left: "2px",
195+
width: result.itemSize.width + "px",
196+
height: result.itemSize.height + "px"
197+
},
198+
"class": ["bp-item", "bp-corner-all", "bt-item-frame"]
199+
},
200+
["div",
201+
{
202+
"name": "titleBackground",
203+
"style": {
204+
top: "2px",
205+
left: "2px",
206+
width: "316px",
207+
height: "4px"
208+
},
209+
"class": ["bp-item", "bp-corner-all", "bp-title-frame"]
210+
}
211+
],
212+
["div",
213+
{
214+
name: "title",
215+
"class": "bp-item",
216+
"style": {
217+
top: "8px",
218+
left: "2px",
219+
width: "312px",
220+
height: "24px",
221+
fontSize: "12px"
222+
}
223+
}
224+
],
225+
["div",
226+
{
227+
name: "description",
228+
"class": "bp-item",
229+
"style": {
230+
top: "36px",
231+
left: "4px",
232+
width: "312px",
233+
height: "36px",
234+
fontSize: "10px"
235+
}
236+
}
237+
]
238+
];
230239

231240
return result;
232241
}
@@ -236,8 +245,7 @@
236245
}
237246

238247
function updateHighlightPathAnnotations(data) {
239-
var selector = jQuery("#centerpanel");
240-
var annotations = selector.famDiagram("option", "annotations");
248+
var annotations = control.getOption("annotations");
241249

242250
var newAnnotations = [];
243251
for (var index = 0, len = annotations.length; index < len; index += 1) {
@@ -263,28 +271,38 @@
263271
});
264272
newAnnotations.push(annotation);
265273
}
266-
selector.famDiagram("option", { annotations: newAnnotations });
274+
control.setOptions({ annotations: newAnnotations });
275+
}
276+
277+
function onWindowResize() {
278+
if (timer == null) {
279+
timer = window.setTimeout(function () {
280+
control.update(primitives.orgdiagram.UpdateMode.Refresh);
281+
window.clearTimeout(timer);
282+
timer = null;
283+
}, 300);
284+
}
267285
}
268286
</script>
269287
<!-- /header -->
270288
</head>
271-
<body style="font-size: 12px">
272-
<div id="contentpanel" style="padding: 0px;">
273-
<!--bpcontent-->
274-
<div id="westpanel" style="visibility:hidden;padding: 5px; margin: 0px; border-style: solid; font-size: 12px; border-color: grey; border-width: 1px; overflow: scroll; -webkit-overflow-scrolling: touch;">
289+
<body>
290+
<!--bpcontent-->
291+
<div style="position: absolute; width: 400px; left: 0px; top: 0px; bottom: 50px; padding: 0px; margin: 0px; border-style: none; font-size: 14px; overflow: scroll; -webkit-overflow-scrolling: touch;">
292+
<div id="westpanel" style="padding: 5px; margin: 5px; font: normal 12px verdana, areal;">
275293
<h2>Control Rendering Process Diagram</h2>
276294
<p>This diagram will be helpfull to understand how changes in options force chart processing and rendering. This diagram is going to be helpfull to find right task for modification as well.</p>
277-
<p>Diagram rendering staged into options readers, transformation and rendering tasks. Option readers are statefull and force dependent tasks processing only if any changes found on widgets API.
278-
All other tasks i.e. transformation and rendering are stateless that means, they don't keep any internal intermediate variables between processing cycles.</p>
295+
<p>
296+
Diagram rendering staged into options readers, transformation and rendering tasks. Option readers are statefull and force dependent tasks processing only if any changes found on widgets API.
297+
All other tasks i.e. transformation and rendering are stateless that means, they don't keep any internal intermediate variables between processing cycles.
298+
</p>
279299
<p>Tasks share only layout elements and graphics object, which is responsible for canvas specific drawing functionality. Rendering tasks dont share layers, so every type of visual element is drawn on seperate layer. Layers are reset and redrawn only inside of the task responsible for specified layer.</p>
280300
<p>Take into account that any data required for task processing is taken only from source tasks and cannot be modified inside of the task itself.</p>
281301
<p id="diagramType">Select Control</p>
282302
</div>
283-
<div id="centerpanel" style="overflow: hidden; padding: 0px; margin: 0px; border: 0px;">
284-
</div>
285-
<div id="southpanel">
286-
</div>
287-
<!--/bpcontent-->
288303
</div>
304+
<div id="centerpanel" style="position: absolute; border-style: dotted; border-width: 0px; top: 0; right: 0; bottom: 50px; left: 400px;"></div>
305+
<div id="southpanel" style="position: absolute; border-style: dotted; border-width: 0px; height: 50px; right: 0; bottom: 0; left: 0;"></div>
306+
<!--/bpcontent-->
289307
</body>
290308
</html>

0 commit comments

Comments
 (0)