Skip to content

Commit 996d5a3

Browse files
BasicPrimitivesBasicPrimitives
committed
Fixed vertical alignment for matrix layout
1 parent c2c2733 commit 996d5a3

7 files changed

Lines changed: 128 additions & 163 deletions

File tree

‎changelog.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Added `padding` option to `OrgConfig` and `FamConfig`
66
* Fixed `childrenPlacementType` option breaking multiple root nodes placement.
77
* Fixed mouse interactivity for scaled and rotated right or bottom diagrams.
8+
* Fixed family matrix layout for top and bottom in-row vertical alignment.
89
#### Version 6.3.1
910
* Fixed family diagram padding
1011
* Fixed `onButtonsRender` in `TemplateConfig`

‎src/connectors/MatrixConnectorBundle.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ MatrixConnectorBundle.prototype.traceChildrenLayout = function (data, params, op
6868

6969
if (leftTreeItemPosition != null) {
7070
actualPosition = leftTreeItemPosition.actualPosition;
71-
params.transform.transformPoints(actualPosition.right(), actualPosition.verticalCenter(), medianPoint.x, medianPoint.y,
71+
params.transform.transformPoints(actualPosition.right(), medianPoint.y, medianPoint.x, medianPoint.y,
7272
true, this, function (fromX, fromY, toX, toY) {
7373
var polyline = new Polyline();
7474
polyline.addSegment(new MoveSegment(fromX, fromY));
@@ -84,7 +84,7 @@ MatrixConnectorBundle.prototype.traceChildrenLayout = function (data, params, op
8484

8585
if (rightTreeItemPosition != null) {
8686
actualPosition = rightTreeItemPosition.actualPosition;
87-
params.transform.transformPoints(actualPosition.left(), actualPosition.verticalCenter(), medianPoint.x, medianPoint.y,
87+
params.transform.transformPoints(actualPosition.left(), medianPoint.y, medianPoint.x, medianPoint.y,
8888
true, this, function (fromX, fromY, toX, toY) {
8989
var polyline = new Polyline();
9090
polyline.addSegment(new MoveSegment(fromX, fromY));
@@ -181,7 +181,7 @@ MatrixConnectorBundle.prototype.traceParentsLayout = function (data, params, opt
181181

182182
if (leftTreeItemPosition != null) {
183183
actualPosition = leftTreeItemPosition.actualPosition;
184-
params.transform.transformPoints(actualPosition.right(), actualPosition.verticalCenter(), medianPoint.x, medianPoint.y,
184+
params.transform.transformPoints(actualPosition.right(), medianPoint.y, medianPoint.x, medianPoint.y,
185185
true, this, function (fromX, fromY, toX, toY) {
186186
var polyline = new Polyline();
187187
polyline.addSegment(new MoveSegment(fromX, fromY));
@@ -197,7 +197,7 @@ MatrixConnectorBundle.prototype.traceParentsLayout = function (data, params, opt
197197

198198
if (rightTreeItemPosition != null) {
199199
actualPosition = rightTreeItemPosition.actualPosition;
200-
params.transform.transformPoints(actualPosition.left(), actualPosition.verticalCenter(), medianPoint.x, medianPoint.y,
200+
params.transform.transformPoints(actualPosition.left(), medianPoint.y, medianPoint.x, medianPoint.y,
201201
true, this, function (fromX, fromY, toX, toY) {
202202
var polyline = new Polyline();
203203
polyline.addSegment(new MoveSegment(fromX, fromY));

‎src/tasks/renders/DrawTreeItemsTask.js‎

Lines changed: 107 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -57,114 +57,116 @@ export default function DrawTreeItemsTask(getGraphics, createTransformTask, appl
5757
this, function (x, y, width, height) {
5858
var nodePosition = new Rect(x, y, width, height);
5959
if (viewPortPosition == null || viewPortPosition.overlaps(nodePosition)) {
60-
var templateParams = itemTemplateParamsTask.getTemplateParams(treeItemId),
61-
template = templateParams.template;
62-
63-
uiHash = new RenderEventArgs();
64-
uiHash.id = treeItemId;
65-
uiHash.context = combinedContextsTask.getConfig(treeItemId);
66-
uiHash.isCursor = (treeItemId == cursorItemId);
67-
uiHash.isSelected = selectedItemsTask.isSelected(treeItemId);
68-
uiHash.templateName = template.templateConfig.name;
69-
70-
uiHash.template = templateParams.template;
71-
uiHash.isActive = templateParams.isActive;
72-
uiHash.hasSelectorCheckbox = templateParams.hasSelectorCheckbox;
73-
uiHash.hasButtons = templateParams.hasButtons;
74-
uiHash.hasGroupTitle = templateParams.hasGroupTitle;
75-
uiHash.onButtonsRender = templateParams.onButtonsRender;
76-
77-
_graphics.activate("placeholder", Layers.Item);
78-
element = _graphics.template(
79-
x
80-
, y
81-
, width
82-
, height
83-
, treeItemPosition.contentPosition.x
84-
, treeItemPosition.contentPosition.y
85-
, treeItemPosition.contentPosition.width
86-
, treeItemPosition.contentPosition.height
87-
, template.itemTemplate.template()
88-
, template.itemTemplate.getHashCode()
89-
, template.itemTemplate.render
90-
, uiHash
91-
, { "borderWidth": template.templateConfig.itemBorderWidth }
92-
);
93-
94-
if (templateParams.hasGroupTitle) {
95-
var groupTitlePosition = 0;
96-
switch (_itemsSizesOptions.groupTitlePlacementType) {
97-
case AdviserPlacementType.Left:
98-
case AdviserPlacementType.Auto:
99-
groupTitlePosition = 2;
100-
break;
101-
case AdviserPlacementType.Right:
102-
groupTitlePosition = width - (_itemsSizesOptions.groupTitlePanelSize - 4);
103-
break;
104-
default:
105-
}
60+
var templateParams = itemTemplateParamsTask.getTemplateParams(treeItemId);
61+
if(templateParams != null) {
62+
var template = templateParams.template;
63+
64+
uiHash = new RenderEventArgs();
65+
uiHash.id = treeItemId;
66+
uiHash.context = combinedContextsTask.getConfig(treeItemId);
67+
uiHash.isCursor = (treeItemId == cursorItemId);
68+
uiHash.isSelected = selectedItemsTask.isSelected(treeItemId);
69+
uiHash.templateName = template.templateConfig.name;
70+
71+
uiHash.template = templateParams.template;
72+
uiHash.isActive = templateParams.isActive;
73+
uiHash.hasSelectorCheckbox = templateParams.hasSelectorCheckbox;
74+
uiHash.hasButtons = templateParams.hasButtons;
75+
uiHash.hasGroupTitle = templateParams.hasGroupTitle;
76+
uiHash.onButtonsRender = templateParams.onButtonsRender;
77+
78+
_graphics.activate("placeholder", Layers.Item);
10679
element = _graphics.template(
107-
x,
108-
y,
109-
width,
110-
height,
111-
groupTitlePosition,
112-
treeItemPosition.contentPosition.y,
113-
_itemsSizesOptions.groupTitlePanelSize - 4,
114-
treeItemPosition.contentPosition.height + 2,
115-
_groupTitleTemplate.template(),
116-
_groupTitleTemplate.getHashCode(),
117-
_groupTitleTemplate.render,
118-
uiHash,
119-
null
80+
x
81+
, y
82+
, width
83+
, height
84+
, treeItemPosition.contentPosition.x
85+
, treeItemPosition.contentPosition.y
86+
, treeItemPosition.contentPosition.width
87+
, treeItemPosition.contentPosition.height
88+
, template.itemTemplate.template()
89+
, template.itemTemplate.getHashCode()
90+
, template.itemTemplate.render
91+
, uiHash
92+
, { "borderWidth": template.templateConfig.itemBorderWidth }
12093
);
121-
}
122-
if (templateParams.hasSelectorCheckbox) {
123-
_graphics.activate("placeholder", Layers.Controls);
124-
element = _graphics.template(
125-
x,
126-
y,
127-
width,
128-
height,
129-
treeItemPosition.contentPosition.x,
130-
height - (_itemsSizesOptions.checkBoxPanelSize - 4),
131-
treeItemPosition.contentPosition.width,
132-
_itemsSizesOptions.checkBoxPanelSize - 4,
133-
_checkBoxTemplate.template(),
134-
_checkBoxTemplate.getHashCode(),
135-
_checkBoxTemplate.render,
136-
uiHash,
137-
null
138-
);
139-
}
140-
if (templateParams.hasButtons) {
141-
_graphics.activate("placeholder", Layers.Controls);
142-
var buttonsPanelPosition = 0;
143-
switch (_itemsSizesOptions.groupTitlePlacementType) {
144-
case AdviserPlacementType.Left:
145-
case AdviserPlacementType.Auto:
146-
buttonsPanelPosition = width - (_itemsSizesOptions.buttonsPanelSize - 4);
147-
break;
148-
case AdviserPlacementType.Right:
149-
buttonsPanelPosition = 2;
150-
break;
151-
default:
94+
95+
if (templateParams.hasGroupTitle) {
96+
var groupTitlePosition = 0;
97+
switch (_itemsSizesOptions.groupTitlePlacementType) {
98+
case AdviserPlacementType.Left:
99+
case AdviserPlacementType.Auto:
100+
groupTitlePosition = 2;
101+
break;
102+
case AdviserPlacementType.Right:
103+
groupTitlePosition = width - (_itemsSizesOptions.groupTitlePanelSize - 4);
104+
break;
105+
default:
106+
}
107+
element = _graphics.template(
108+
x,
109+
y,
110+
width,
111+
height,
112+
groupTitlePosition,
113+
treeItemPosition.contentPosition.y,
114+
_itemsSizesOptions.groupTitlePanelSize - 4,
115+
treeItemPosition.contentPosition.height + 2,
116+
_groupTitleTemplate.template(),
117+
_groupTitleTemplate.getHashCode(),
118+
_groupTitleTemplate.render,
119+
uiHash,
120+
null
121+
);
122+
}
123+
if (templateParams.hasSelectorCheckbox) {
124+
_graphics.activate("placeholder", Layers.Controls);
125+
element = _graphics.template(
126+
x,
127+
y,
128+
width,
129+
height,
130+
treeItemPosition.contentPosition.x,
131+
height - (_itemsSizesOptions.checkBoxPanelSize - 4),
132+
treeItemPosition.contentPosition.width,
133+
_itemsSizesOptions.checkBoxPanelSize - 4,
134+
_checkBoxTemplate.template(),
135+
_checkBoxTemplate.getHashCode(),
136+
_checkBoxTemplate.render,
137+
uiHash,
138+
null
139+
);
140+
}
141+
if (templateParams.hasButtons) {
142+
_graphics.activate("placeholder", Layers.Controls);
143+
var buttonsPanelPosition = 0;
144+
switch (_itemsSizesOptions.groupTitlePlacementType) {
145+
case AdviserPlacementType.Left:
146+
case AdviserPlacementType.Auto:
147+
buttonsPanelPosition = width - (_itemsSizesOptions.buttonsPanelSize - 4);
148+
break;
149+
case AdviserPlacementType.Right:
150+
buttonsPanelPosition = 2;
151+
break;
152+
default:
153+
}
154+
element = _graphics.template(
155+
x,
156+
y,
157+
width,
158+
height,
159+
buttonsPanelPosition,
160+
treeItemPosition.contentPosition.y,
161+
_itemsSizesOptions.buttonsPanelSize - 4,
162+
Math.max(treeItemPosition.contentPosition.height, height - treeItemPosition.contentPosition.y),
163+
_buttonsTemplate.template(),
164+
template.templateConfig.name + _buttonsTemplate.getHashCode(),
165+
_buttonsTemplate.render,
166+
uiHash,
167+
null
168+
);
152169
}
153-
element = _graphics.template(
154-
x,
155-
y,
156-
width,
157-
height,
158-
buttonsPanelPosition,
159-
treeItemPosition.contentPosition.y,
160-
_itemsSizesOptions.buttonsPanelSize - 4,
161-
Math.max(treeItemPosition.contentPosition.height, height - treeItemPosition.contentPosition.y),
162-
_buttonsTemplate.template(),
163-
template.templateConfig.name + _buttonsTemplate.getHashCode(),
164-
_buttonsTemplate.render,
165-
uiHash,
166-
null
167-
);
168170
}
169171
}
170172
});//ignore jslint

‎src/tasks/transformations/layouts/FamilyLayout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ FamilyLayout.prototype.measure = function (levelVisibility, isCursor, isSelected
4545
this.shiftLevels(this.treeLevelsPositions, options.padding.top, options.shifts, options.arrowsDirection, options.linesWidth, this.getConnectorsStacksSizes);
4646

4747
var treeItemPosition = new TreeItemPosition();
48-
treeItemPosition.actualVisibility = Visibility.Invisible;
48+
treeItemPosition.actualVisibility = Visibility.Normal;
4949
treeItemPosition.actualSize = this.getLayoutSize(this.treeLevels, treeItemsPositions, this.childLayoutsPositions, this.treeLevelsPositions, options.padding);
5050
return treeItemPosition;
5151
};

‎src/tasks/transformations/layouts/HorizontalLayout.js‎

Lines changed: 13 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Rect from '../../../graphics/structs/Rect';
2-
import { VerticalAlignmentType, Visibility, GroupByType, AdviserPlacementType } from '../../../enums';
2+
import { Visibility, GroupByType, AdviserPlacementType } from '../../../enums';
33
import TreeItemPosition from '../../../models/TreeItemPosition';
44

55
export default function HorizontalLayout(items, hideParentConnection, hideChildrenConnection) {
@@ -33,7 +33,6 @@ HorizontalLayout.prototype.Column = function () {
3333
HorizontalLayout.prototype.Row = function () {
3434
this.depth = 0;
3535
this.offset = 0;
36-
this.horizontalConnectorsDepth = 0;
3736
this.minimalDepth = null;
3837
this.dotsDepth = null;
3938
};
@@ -50,7 +49,7 @@ HorizontalLayout.prototype.measure = function (levelVisibility, isCursor, isSele
5049
this.data = data;
5150

5251
var treeItemPosition = new TreeItemPosition();
53-
treeItemPosition.actualVisibility = Visibility.Invisible;
52+
treeItemPosition.actualVisibility = Visibility.Normal;
5453
treeItemPosition.actualSize = this.getLayoutSize(data);
5554
return treeItemPosition;
5655
};
@@ -105,9 +104,7 @@ HorizontalLayout.prototype.measureRow = function (data, items, treeItemsPosition
105104
var treeItem = items[index];
106105
var treeItemId = treeItem.id;
107106
var treeItemPosition = treeItemsPositions[treeItemId];
108-
109107
var verticalPadding = options.shifts[treeItemPosition.actualVisibility] / 2;
110-
111108
row.depth = Math.max(row.depth, verticalPadding + treeItemPosition.actualSize.height + verticalPadding);
112109

113110
switch (treeItemPosition.actualVisibility) {
@@ -120,28 +117,16 @@ HorizontalLayout.prototype.measureRow = function (data, items, treeItemsPosition
120117
row.minimalDepth = !row.minimalDepth ? treeItemPosition.actualSize.height : Math.min(row.minimalDepth, treeItemPosition.actualSize.height);
121118
break;
122119
}
123-
124-
row.offset = row.depth / 2;
125-
126-
if (row.minimalDepth == null) {
127-
row.minimalDepth = row.depth;
128-
}
129-
if (row.dotsDepth != null && row.dotsDepth > row.minimalDepth) {
130-
row.minimalDepth = row.dotsDepth;
131-
}
132-
133-
switch (options.verticalAlignment) {
134-
case VerticalAlignmentType.Top:
135-
row.horizontalConnectorsDepth = row.minimalDepth / 2.0;
136-
break;
137-
case VerticalAlignmentType.Middle:
138-
row.horizontalConnectorsDepth = row.depth / 2.0;
139-
break;
140-
case VerticalAlignmentType.Bottom:
141-
row.horizontalConnectorsDepth = row.depth - row.minimalDepth / 2.0;
142-
break;
143-
}
144120
};
121+
122+
row.offset = row.depth / 2;
123+
124+
if (row.minimalDepth == null) {
125+
row.minimalDepth = row.depth;
126+
}
127+
if (row.dotsDepth != null && row.dotsDepth > row.minimalDepth) {
128+
row.minimalDepth = row.dotsDepth;
129+
}
145130
};
146131

147132
HorizontalLayout.prototype.getLayoutSize = function (data) {
@@ -178,7 +163,7 @@ HorizontalLayout.prototype.arrange = function (thisArg, parentPosition, layoutDi
178163
treeItemPosition = {
179164
...treeItemPosition,
180165
actualPosition,
181-
horizontalConnectorsShift: parentPosition.y + row.offset - row.depth / 2 + row.horizontalConnectorsDepth,
166+
horizontalConnectorsShift: parentPosition.y + row.offset - row.depth / 2 + row.offset,
182167
leftMedianOffset: column.depth / 2 + (layoutDirection == AdviserPlacementType.Left ? column.childrenPadding : column.parentsPadding),
183168
rightMedianOffset: column.depth / 2 + (layoutDirection == AdviserPlacementType.Left ? column.parentsPadding : column.childrenPadding),
184169
topConnectorShift: row.depth / 2,
@@ -191,28 +176,5 @@ HorizontalLayout.prototype.arrange = function (thisArg, parentPosition, layoutDi
191176
};
192177

193178
HorizontalLayout.prototype.getItemPosition = function (visibility, offset, row, size, options) {
194-
var itemShift = 0;
195-
196-
switch (visibility) {
197-
case Visibility.Normal:
198-
switch (options.verticalAlignment) {
199-
case VerticalAlignmentType.Top:
200-
itemShift = 0;
201-
break;
202-
case VerticalAlignmentType.Middle:
203-
itemShift = (row.depth - size.height) / 2.0;
204-
break;
205-
case VerticalAlignmentType.Bottom:
206-
itemShift = row.depth - size.height;
207-
break;
208-
}
209-
break;
210-
case Visibility.Dot:
211-
case Visibility.Line:
212-
case Visibility.Invisible:
213-
itemShift = row.horizontalConnectorsDepth - size.height / 2.0;
214-
break;
215-
}
216-
217-
return new Rect(offset - size.width / 2, row.offset - row.depth / 2 + itemShift, size.width, size.height);
179+
return new Rect(offset - size.width / 2, row.offset - size.height / 2.0, size.width, size.height);
218180
};

‎src/tasks/transformations/layouts/MatrixLayout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ MatrixLayout.prototype.measure = function (levelVisibility, isCursor, isSelected
5555
this.data = data;
5656

5757
var treeItemPosition = new TreeItemPosition();
58-
treeItemPosition.actualVisibility = Visibility.Invisible;
58+
treeItemPosition.actualVisibility = Visibility.Normal;
5959
treeItemPosition.actualSize = this.getLayoutSize(data);
6060
return treeItemPosition;
6161
};

0 commit comments

Comments
 (0)