Skip to content

Commit fa8f724

Browse files
BasicPrimitivesBasicPrimitives
committed
Fixed label annotations placement for nodes having matrix layout.
Fixed horizontal arrows for assistants and adviser item types. Removed `loopsLayoutMode` property from `FamConfig`. Refactored layout autofit functionality out of family layout Removed recursive calls from nested layouts
1 parent 7d2c9cb commit fa8f724

35 files changed

+1014
-739
lines changed

‎changelog.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
#### Version 6.3.0
2-
* Added matrixId and addToMatrix properties to FamItemConfig
3-
* Removed spouses property from FamItemConfig
2+
* Added `matrixId` and `addToMatrix` properties to `FamItemConfig`.
3+
* Fixed label annotations placement for nodes having matrix layout.
4+
* Fixed horizontal arrows for assistants and adviser item types.
5+
* Removed `spouses` property from `FamItemConfig`.
6+
* Removed `loopsLayoutMode` property from `FamConfig`.
47
#### Version 6.2.2
58
* Fixed Family Relations Optimizer
69
#### Version 6.2.1

‎samples/LoopsInFamily.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
# Optimization of loops in layered graph visualization
22

3-
If relations between nodes form loops, the control tries to find a layout minimizing the number of links going in the opposite direction.
4-
This optimization is optional and can be disabled. For example, if you have two nodes A and B, referencing each other, it is unclear which node will be above the other one in the diagram. To match node order in the diagram layers to their order in items collection, set option `loopsLayoutMode` to `primitives.LoopsLayoutMode.KeepItemsOrder`.
3+
If relations between nodes form loops, the control tries to find a layout minimizing the number of links going in the opposite direction.
54

65
[JavaScript](javascript.controls/CaseLoopsInFamilyChart.html)
76
[PDFKit](pdfkit.plugins/LoopsInFamilyChart.html)

‎samples/data/famdata.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -831,9 +831,6 @@ var matrixGroups = {
831831
var matrixNLabels = {
832832
cursorItem: 1,
833833
enableMatrixLayout: true,
834-
//normalItemsInterval: 30,
835-
//dotItemsInterval: 20,
836-
//lineItemsInterval: 10,
837834
annotations: [
838835
{ annotationType: primitives.AnnotationType.Label, fromItem: 1, toItems: [2], title: "1->2" },
839836
{ annotationType: primitives.AnnotationType.Label, fromItem: 1, toItems: [3], title: "1->3" },
@@ -847,8 +844,8 @@ var matrixNLabels = {
847844
{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [4], title: "33->4" },
848845
{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [6], title: "33->6" },
849846
{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [7], title: "33->7" },
850-
{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [8], title: "33->8" },
851-
{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [10], title: "33->10" }
847+
{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [8], title: "33->8" }
848+
//{ annotationType: primitives.AnnotationType.Label, fromItem: 33, toItems: [10], title: "33->10" }
852849
],
853850
items: [
854851
{ id: 1, parents: [], title: "1", label: "1", description: "", image: "../images/photos/z.png", itemTitleColor: "#ff0000" },
@@ -886,4 +883,4 @@ var dataSetNames = {
886883
"Matrix and Labels": "matrixNLabels"
887884
};
888885

889-
var defaultDataSetName = dataSetNames["Splitting Matrixes"];
886+
var defaultDataSetName = dataSetNames["2 Cross Relations"];

‎samples/javascript.controls/CaseLoopsInFamilyChart.html‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6-
<title>Selection Path Mode</title>
6+
<title>Loops in family diagram references</title>
77

88
<script type="text/javascript" src="../../primitives.js"></script>
99
<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
@@ -24,12 +24,12 @@
2424
{ annotationType: primitives.AnnotationType.Label, fromItem: 2, toItems: [1], title: "100%" }
2525
];
2626
options.items = [
27+
{ id: 5, parents: [4], title: "Lynette", label: "Lynette", description: "", image: "../images/photos/l.png" },
28+
{ id: 6, parents: [4], title: "Sara", label: "Sara", description: "", image: "../images/photos/s.png" },
2729
{ id: 1, parents: [3, 5, 6, 7], title: "James", label: "James", description: "James is First and he is child of Brad, Sara & Lynette", image: "../images/photos/j.png" },
2830
{ id: 2, parents: [1], title: "Brad", label: "Brad", description: "", image: "../images/photos/b.png" },
2931
{ id: 3, parents: [2], title: "Thomas", label: "Thomas", description: "", image: "../images/photos/t.png" },
3032
{ id: 4, parents: [3], title: "David", label: "David", description: "", image: "../images/photos/d.png" },
31-
{ id: 5, parents: [4], title: "Lynette", label: "Lynette", description: "", image: "../images/photos/l.png" },
32-
{ id: 6, parents: [4], title: "Sara", label: "Sara", description: "", image: "../images/photos/s.png" },
3333
{ id: 7, title: "Parent", label: "Parent", description: "Parent node of James", image: "../images/photos/j.png" }
3434
]
3535

@@ -63,38 +63,13 @@
6363
control = primitives.FamDiagram(document.getElementById("basicdiagram"), options);
6464

6565
});
66-
67-
function Update() {
68-
var loopsLayoutMode = parseInt(getRadioValue("loopsLayoutMode"));
69-
control.setOptions({
70-
"loopsLayoutMode": loopsLayoutMode
71-
});
72-
control.update(primitives.UpdateMode.Refresh);
73-
}
74-
75-
function getRadioValue(name) {
76-
var radios = document.getElementsByName(name);
77-
for (var i = 0; i < radios.length; i++) {
78-
if (radios[i].checked) {
79-
return radios[i].value;
80-
}
81-
}
82-
return result;
83-
}
8466
</script>
8567

8668

8769
</head>
8870

8971
<body>
9072
<div>
91-
<p>
92-
Loops Layout Mode:
93-
<br><label><input onclick="Update()" name="loopsLayoutMode" type="radio" value="0" checked="">Optimized - 1 looped
94-
relation</label>
95-
<br><label><input onclick="Update()" name="loopsLayoutMode" type="radio" value="1">Keep Items Order - 3 looped
96-
relations</label>
97-
</p>
9873
<div id="basicdiagram" style="width: 800px; height: 800px; border-style: dotted; border-width: 1px;"></div>
9974
</div>
10075
</body>

‎samples/javascript.controls/DemoFamily.html‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,10 @@
188188
var options = optionsRender.getValues();
189189

190190
primitives.mergeObjects(options, {
191-
templates: [getDefaultTemplate(options)],
192-
defaultTemplateName: "defaultTemplate"
191+
templates: [getDefaultTemplate(options), getLabelAnnotationTemplate()],
192+
defaultTemplateName: "defaultTemplate",
193+
defaultLabelAnnotationTemplate: "LabelAnnotationTemplate",
194+
onItemRender: onTemplateRender
193195
})
194196

195197
primitives.mergeObjects(options, {
@@ -263,6 +265,50 @@
263265
return result;
264266
}
265267

268+
function onTemplateRender(event, data) {
269+
var itemConfig = data.context,
270+
element = data.element;
271+
272+
if (data.templateName == "LabelAnnotationTemplate") {
273+
var title = element.firstChild;
274+
title.textContent = itemConfig.title;
275+
}
276+
}
277+
278+
function getLabelAnnotationTemplate() {
279+
var result = new primitives.TemplateConfig();
280+
result.name = "LabelAnnotationTemplate";
281+
282+
result.itemSize = new primitives.Size(60, 20);
283+
result.minimizedItemSize = new primitives.Size(3, 3);
284+
285+
result.itemTemplate = ["div",
286+
{
287+
"style": {
288+
width: result.itemSize.width + "px",
289+
height: result.itemSize.height + "px"
290+
},
291+
"class": "bp-item"
292+
},
293+
["div",
294+
{
295+
"name": "title",
296+
"style": {
297+
top: "0px",
298+
left: "0px",
299+
width: "60px",
300+
height: "20px",
301+
fontSize: "16px",
302+
textAlign: "center"
303+
},
304+
"class": ["bp-item"]
305+
}
306+
]
307+
];
308+
309+
return result;
310+
}
311+
266312
function getParentsList(data) {
267313
var message = "",
268314
index, len;

‎samples/javascript.controls/DemoMutualFinancialOwnership.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,10 @@
2222
new javascriptsamples.CaptionConfig("Page Fit Mode defines rule of fitting chart into available screen space. Set it to None if you want to disable it.", false),
2323
new javascriptsamples.RadioBoxConfig("pageFitMode", primitives.PageFitMode.FitToPage, "Page Fit Mode", { None: 0, PageWidth: 1, PageHeight: 2, FitToPage: 3, SelectionOnly: 6 }, javascriptsamples.ValueType.Integer, onUpdate),
2424
new javascriptsamples.CaptionConfig("Loops layout optimization finds parent/child items order having minimul number of loops between level. Control renders loops with extra arrows along vertical segments.", false),
25-
new javascriptsamples.RadioBoxConfig("loopsLayoutMode", primitives.LoopsLayoutMode.Optimized, "Loops Layout Mode", primitives.LoopsLayoutMode, javascriptsamples.ValueType.Integer, onUpdate),
2625
new javascriptsamples.RadioBoxConfig("hideGrandParentsConnectors", true, "The hideGrandParentsConnectors 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.", { Hide: true, Show: false }, javascriptsamples.ValueType.Boolean, onUpdate),
2726
])
2827
], {
2928
pageFitMode: primitives.PageFitMode.FitToPage,
30-
loopsLayoutMode: primitives.LoopsLayoutMode.Optimized,
3129
hideGrandParentsConnectors: true
3230
});
3331

@@ -141,7 +139,6 @@
141139
options.onItemRender = onTemplateRender;
142140

143141
options.pageFitMode = primitives.PageFitMode.FitToPage;
144-
options.loopsLayoutMode = primitives.LoopsLayoutMode.Optimized;
145142
options.hideGrandParentsConnectors = true;
146143

147144
options.arrowsDirection = primitives.GroupByType.Children;

‎samples/javascript.controls/TestProcessingDiagram.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@
8888
break;
8989
default:
9090
primitives.mergeObjects(viewOptions, {
91-
'RemoveLoopsOptionTask': { relativeItem: 'ItemsOptionTask', placementType: primitives.AdviserPlacementType.Right, position: 1 },
9291
'RemoveLoopsTask': { primaryParent: 'AddLabelAnnotationsTask' },
9392
'AddLabelAnnotationsTask': { primaryParent: 'LogicalFamilyTask' },
9493
'HideGrandParentsConnectorsTask': { primaryParent: 'RemoveLoopsTask' },

‎src/FamPdfkitTaskManagerFactory.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,9 @@ import DrawLevelAnnotationBackgroundTask from './tasks/renders/DrawLevelAnnotati
7777

7878
// family diagram specific tasks
7979
import OptionsTask from './tasks/options/OptionsTask';
80-
import RemoveLoopsOptionTask from './tasks/options/RemoveLoopsOptionTask';
8180
import VisualTreeOptionTask from './tasks/options/FamVisualTreeOptionTask';
8281
import HideGrandParentsConnectorsOptionTask from './tasks/options/HideGrandParentsConnectorsOptionTask';
82+
import ExtractNestedLayoutsOptionTask from './tasks/options/ExtractNestedLayoutsOptionTask';
8383
import NormalizeOptionTask from './tasks/options/NormalizeOptionTask';
8484
import OrderFamilyNodesOptionTask from './tasks/options/OrderFamilyNodesOptionTask';
8585
import LinePaletteOptionTask from './tasks/options/LinePaletteOptionTask';
@@ -92,6 +92,7 @@ import LabelAnnotationPlacementOptionTask from './tasks/options/annotations/Labe
9292

9393
import AddLabelAnnotationsTask from './tasks/transformations/AddLabelAnnotationsTask';
9494
import HideGrandParentsConnectorsTask from './tasks/transformations/HideGrandParentsConnectorsTask';
95+
import ExtractNestedLayoutsTask from './tasks/transformations/ExtractNestedLayoutsTask';
9596
import NormalizeLogicalFamilyTask from './tasks/transformations/NormalizeLogicalFamilyTask';
9697
import OrderFamilyNodesTask from './tasks/transformations/OrderFamilyNodesTask';
9798
import LabelAnnotationTemplateParamsTask from './tasks/templates/LabelAnnotationTemplateParamsTask';
@@ -135,12 +136,12 @@ export default function FamPdfkitTaskManagerFactory(getOptions, getGraphics, set
135136
tasks.addTask('CalloutOptionTask', ['OptionsTask', 'defaultConfig', 'defaultItemConfig'], CalloutOptionTask, Colors.Navy);
136137
tasks.addTask('ConnectorsOptionTask', ['OptionsTask', 'defaultConfig'], ConnectorsOptionTask, Colors.Navy);
137138
tasks.addTask('ItemsOptionTask', ['OptionsTask', 'defaultItemConfig'], FamItemsOptionTask, Colors.Navy);
138-
tasks.addTask('RemoveLoopsOptionTask', ['OptionsTask', 'defaultConfig'], RemoveLoopsOptionTask, Colors.Navy);
139139
tasks.addTask('ItemsSizesOptionTask', ['OptionsTask', 'defaultConfig', 'defaultItemConfig'], ItemsSizesOptionTask, Colors.Navy);
140140
tasks.addTask('TemplatesOptionTask', ['OptionsTask', 'defaultConfig', 'defaultTemplateConfig'], TemplatesOptionTask, Colors.Navy);
141141
tasks.addTask('OrientationOptionTask', ['OptionsTask', 'defaultConfig'], OrientationOptionTask, Colors.Navy);
142142
tasks.addTask('VisualTreeOptionTask', ['OptionsTask', 'defaultConfig'], VisualTreeOptionTask, Colors.Navy);
143143
tasks.addTask('HideGrandParentsConnectorsOptionTask', ['OptionsTask', 'defaultConfig'], HideGrandParentsConnectorsOptionTask, Colors.Navy);
144+
tasks.addTask('ExtractNestedLayoutsOptionTask', ['OptionsTask', 'defaultConfig', 'defaultItemConfig'], ExtractNestedLayoutsOptionTask, Colors.Navy)
144145
tasks.addTask('NormalizeOptionTask', ['OptionsTask', 'defaultConfig'], NormalizeOptionTask, Colors.Navy);
145146
tasks.addTask('OrderFamilyNodesOptionTask', ['OptionsTask', 'defaultConfig', 'defaultItemConfig'], OrderFamilyNodesOptionTask, Colors.Navy);
146147
tasks.addTask('LinePaletteOptionTask', ['OptionsTask', 'defaultPaletteItemConfig'], LinePaletteOptionTask, Colors.Navy);
@@ -177,9 +178,10 @@ export default function FamPdfkitTaskManagerFactory(getOptions, getGraphics, set
177178
tasks.addTask('CombinedContextsTask', ['ItemsOptionTask', 'LabelAnnotationOptionTask'], CombinedContextsTask, Colors.Cyan);
178179

179180
tasks.addTask('AddLabelAnnotationsTask', ['LabelAnnotationPlacementOptionTask', 'LogicalFamilyTask'], AddLabelAnnotationsTask, Colors.Red);
180-
tasks.addTask('RemoveLoopsTask', ['ItemsOptionTask', 'RemoveLoopsOptionTask', 'AddLabelAnnotationsTask'], RemoveLoopsTask, Colors.Red);
181+
tasks.addTask('RemoveLoopsTask', ['ItemsOptionTask', 'AddLabelAnnotationsTask'], RemoveLoopsTask, Colors.Red);
181182
tasks.addTask('HideGrandParentsConnectorsTask', ['HideGrandParentsConnectorsOptionTask', 'RemoveLoopsTask'], HideGrandParentsConnectorsTask, Colors.Red);
182-
tasks.addTask('NormalizeLogicalFamilyTask', ['NormalizeOptionTask', 'HideGrandParentsConnectorsTask'], NormalizeLogicalFamilyTask, Colors.Red);
183+
tasks.addTask('ExtractNestedLayoutsTask', ['ExtractNestedLayoutsOptionTask', 'HideGrandParentsConnectorsTask'], ExtractNestedLayoutsTask, Colors.Red);
184+
tasks.addTask('NormalizeLogicalFamilyTask', ['NormalizeOptionTask', 'ExtractNestedLayoutsTask'], NormalizeLogicalFamilyTask, Colors.Red);
183185
tasks.addTask('OrderFamilyNodesTask', ['OrderFamilyNodesOptionTask', 'UserDefinedNodesOrderTask', 'NormalizeLogicalFamilyTask'], OrderFamilyNodesTask, Colors.Red);
184186

185187
// Transformations / Templates
@@ -195,8 +197,8 @@ export default function FamPdfkitTaskManagerFactory(getOptions, getGraphics, set
195197
tasks.addTask('AnnotationLabelTemplateTask', ['ItemsOptionTask', 'templates'], AnnotationLabelTemplateTask, Colors.Cyan);
196198
tasks.addTask('LevelAnnotationTemplateTask', ['OrientationOptionTask', 'LevelTitleTemplateOptionTask', 'templates'], LevelAnnotationTemplateTask, Colors.Cyan);
197199

198-
tasks.addTask('ConnectionsGraphTask', ['graphics', 'CreateTransformTask', 'ConnectorsOptionTask', 'OrderFamilyNodesTask', 'AlignDiagramTask', 'RemoveLoopsTask'], ConnectionsGraphTask, Colors.Cyan);
199-
200+
tasks.addTask('ConnectionsGraphTask', ['graphics', 'CreateTransformTask', 'ConnectorsOptionTask', 'OrderFamilyNodesTask', 'ExtractNestedLayoutsTask', 'AlignDiagramTask', 'RemoveLoopsTask'], ConnectionsGraphTask, Colors.Cyan);
201+
200202
// Transformations/Selections
201203
tasks.addTask('HighlightItemTask', ['HighlightItemOptionTask', 'null'], HighlightItemTask, Colors.Cyan);
202204

@@ -210,7 +212,7 @@ export default function FamPdfkitTaskManagerFactory(getOptions, getGraphics, set
210212
tasks.addTask('CurrentControlSizeTask', ['OptionsTask'], DummyCurrentControlSizeTask, Colors.Cyan);
211213

212214
tasks.addTask('ItemsPositionsTask', ['CurrentControlSizeTask', 'ScaleOptionTask', 'OrientationOptionTask', 'ItemsSizesOptionTask', 'ConnectorsOptionTask',
213-
'OrderFamilyNodesOptionTask', 'OrderFamilyNodesTask',
215+
'OrderFamilyNodesOptionTask', 'OrderFamilyNodesTask', 'ExtractNestedLayoutsTask',
214216
'CombinedTemplateParamsTask',
215217
'CursorItemTask', 'CombinedNormalVisibilityItemsTask'], ItemsPositionsTask, Colors.Red);
216218

0 commit comments

Comments
 (0)