Skip to content

Commit 4be3624

Browse files
author
Basic Primitives
committed
4.3.0
0 parents  commit 4be3624

187 files changed

Lines changed: 168010 additions & 0 deletions

File tree

Some content is hidden

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

‎ReferenceControlsProcessingDiagram.html‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Controls Processing Reference Diagram</title>
5+
<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>
22+
23+
<!-- 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>
28+
29+
<script type="text/javascript">
30+
var optionsRender = new primitives.helpers.controls.Render([
31+
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),
33+
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),
34+
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),
35+
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)
37+
])
38+
], {
39+
diagramType: 1,
40+
pageFitMode: primitives.common.PageFitMode.None,
41+
neighboursSelectionMode: primitives.common.NeighboursSelectionMode.ParentsAndChildren,
42+
hideGrandParentsConnectors: true
43+
});
44+
var famDiagram = null;
45+
var treeItems = {};
46+
47+
jQuery(document).ready( function () {
48+
jQuery.ajaxSetup({
49+
cache: false
50+
});
51+
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+
});
69+
70+
optionsRender.render(jQuery("#westpanel"));
71+
72+
Update(jQuery("#centerpanel"));
73+
});
74+
75+
function onUpdate() {
76+
Update(jQuery("#centerpanel"));
77+
}
78+
79+
function Update(selector) {
80+
var options = optionsRender.getValues();
81+
82+
var control;
83+
switch (options.diagramType) {
84+
case 1:
85+
control = primitives.famdiagram.Control(jQuery("<div></div>"), new primitives.famdiagram.Config());
86+
break;
87+
case 2:
88+
control = primitives.orgdiagram.Control(jQuery("<div></div>"), new primitives.orgdiagram.Config());
89+
break;
90+
}
91+
92+
var controlOptions = control.getProcessDiagramConfig();
93+
jQuery.extend(controlOptions, options);
94+
options = controlOptions;
95+
96+
jQuery.extend(options, {
97+
linesPalette: [
98+
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#C6C6C6", lineWidth: 1, lineType: primitives.common.LineType.Solid }), //1
99+
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#A5A5A5", lineWidth: 1, lineType: primitives.common.LineType.Dashed }), //4
100+
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#848484", lineWidth: 1, lineType: primitives.common.LineType.Solid }), //7
101+
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#646464", lineWidth: 1, lineType: primitives.common.LineType.Dashed }), //10
102+
new primitives.famdiagram.PaletteItemConfig({ lineColor: "#454545", lineWidth: 1, lineType: primitives.common.LineType.Solid }) //13
103+
],
104+
orientationType: primitives.common.OrientationType.Left,
105+
cursorItem: "OptionsTask",
106+
linesWidth: 1,
107+
linesColor: "black",
108+
cousinsIntervalMultiplier: 1,
109+
normalLevelShift: 20,
110+
dotLevelShift: 20,
111+
lineLevelShift: 20,
112+
normalItemsInterval: 5,
113+
dotItemsInterval: 10,
114+
lineItemsInterval: 10,
115+
templates: [getUnitTemplate(), getCalloutUnitTemplate()],
116+
defaultTemplateName: "UnitTemplate",
117+
defaultCalloutTemplateName: "CalloutUnitTemplate",
118+
onItemRender: onTemplateRender,
119+
arrowsDirection: primitives.common.GroupByType.Parents,
120+
selectCheckBoxLabel: "Pinned",
121+
selectionPathMode: primitives.common.SelectionPathMode.None,
122+
onHighlightChanging: onHighlightChanging
123+
});
124+
125+
famDiagram = selector.famDiagram(options);
126+
selector.famDiagram("update");
127+
}
128+
129+
function onTemplateRender(event, data) {
130+
var itemConfig = data.context;
131+
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+
});
147+
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+
}
157+
}
158+
159+
data.element.find("[name=titleBackground]").css({ "background": itemConfig.itemTitleColor });
160+
161+
var fields = ["title", "description", "phone", "email"];
162+
for (var index = 0; index < fields.length; index++) {
163+
var field = fields[index];
164+
165+
var element = data.element.find("[name=" + field + "]");
166+
if (element.text() != itemConfig[field]) {
167+
element.text(itemConfig[field]);
168+
}
169+
}
170+
171+
}
172+
173+
function getUnitTemplate() {
174+
var result = new primitives.famdiagram.TemplateConfig();
175+
result.name = "UnitTemplate";
176+
177+
result.itemSize = new primitives.common.Size(164, 34);
178+
result.minimizedItemSize = new primitives.common.Size(8, 8);
179+
result.minimizedItemCornerRadius = 4;
180+
result.minimizedItemLineWidth = 1;
181+
result.minimizedItemLineType = primitives.common.LineType.Solid;
182+
result.minimizedItemBorderColor = null; // Shape border line has the same color as item title background color
183+
result.minimizedItemFillColor = null; // Shape background has the same color as item title background color
184+
result.minimizedItemOpacity = 0.7; // Shape background opacity
185+
result.highlightPadding = new primitives.common.Thickness(2, 2, 2, 2);
186+
187+
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();
199+
200+
return result;
201+
}
202+
203+
function getCalloutUnitTemplate() {
204+
var result = new primitives.famdiagram.TemplateConfig();
205+
result.name = "CalloutUnitTemplate";
206+
207+
result.itemSize = new primitives.common.Size(320, 60);
208+
result.minimizedItemSize = new primitives.common.Size(8, 8);
209+
result.minimizedItemCornerRadius = 4;
210+
result.minimizedItemLineWidth = 1;
211+
result.minimizedItemLineType = primitives.common.LineType.Solid;
212+
result.minimizedItemBorderColor = null; // Shape border line has the same color as item title background color
213+
result.minimizedItemFillColor = null; // Shape background has the same color as item title background color
214+
result.minimizedItemOpacity = 0.7; // Shape background opacity
215+
result.highlightPadding = new primitives.common.Thickness(2, 2, 2, 2);
216+
217+
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();
230+
231+
return result;
232+
}
233+
234+
function onHighlightChanging(e, data) {
235+
updateHighlightPathAnnotations(data);
236+
}
237+
238+
function updateHighlightPathAnnotations(data) {
239+
var selector = jQuery("#centerpanel");
240+
var annotations = selector.famDiagram("option", "annotations");
241+
242+
var newAnnotations = [];
243+
for (var index = 0, len = annotations.length; index < len; index += 1) {
244+
var annotation = annotations[index];
245+
if (annotation.annotationType != primitives.common.AnnotationType.HighlightPath) {
246+
newAnnotations.push(annotation);
247+
}
248+
}
249+
250+
var items = [];
251+
items = items.concat(data.parentItems);
252+
items = items.concat(data.childrenItems);
253+
for (index = 0, len = items.length; index < len; index += 1) {
254+
var parent = items[index];
255+
var highlightid = data.context.id;
256+
var annotation = new primitives.famdiagram.HighlightPathAnnotationConfig({
257+
items: [highlightid, parent.id],
258+
color: primitives.common.Colors.Navy,
259+
opacity: 0.4,
260+
lineWidth: 6,
261+
zOrderType: primitives.common.ZOrderType.Background,
262+
showArrows: false
263+
});
264+
newAnnotations.push(annotation);
265+
}
266+
selector.famDiagram("option", { annotations: newAnnotations });
267+
}
268+
</script>
269+
<!-- /header -->
270+
</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;">
275+
<h2>Control Rendering Process Diagram</h2>
276+
<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>
279+
<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>
280+
<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>
281+
<p id="diagramType">Select Control</p>
282+
</div>
283+
<div id="centerpanel" style="overflow: hidden; padding: 0px; margin: 0px; border: 0px;">
284+
</div>
285+
<div id="southpanel">
286+
</div>
287+
<!--/bpcontent-->
288+
</div>
289+
</body>
290+
</html>

‎Tests.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Basic Primitives QUnit Tests</title>
6+
7+
<!-- header -->
8+
9+
<link rel="stylesheet" href="packages/jquery-ui/jquery-ui.min.css" />
10+
<script type="text/javascript" src="packages/jquery/jquery-3.3.1.min.js"></script>
11+
<script type="text/javascript" src="packages/jquery-ui/jquery-ui.min.js"></script>
12+
13+
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-2.6.0.css">
14+
<script src="//code.jquery.com/qunit/qunit-2.6.0.js"></script>
15+
16+
<script type="text/javascript" src="samples/data/dependencies.js"></script>
17+
18+
<!-- # include file="src.primitives/src.primitives.html"-->
19+
20+
<script type="text/javascript" src="min/primitives.min.js?4300"></script>
21+
22+
<link href="min/primitives.latest.css?4300" media="screen" rel="stylesheet" type="text/css" />
23+
24+
<!-- /header -->
25+
</head>
26+
<body>
27+
<!--bpcontent-->
28+
<script>
29+
var $j = jQuery.noConflict();
30+
</script>
31+
32+
<div id="qunit"></div>
33+
<div id="qunit-fixture" style="visibility:visible"></div>
34+
35+
<!-- # include file="tests/src.tests.html"-->
36+
37+
<script type="text/javascript" src="min/primitives.tests.js?4300"></script>
38+
39+
<!--/bpcontent-->
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)