Skip to content

Commit bf1cf40

Browse files
jogibear9988jogibear9988
committed
work on arrangement
1 parent 9c9c37d commit bf1cf40

File tree

1 file changed

+69
-33
lines changed

1 file changed

+69
-33
lines changed

‎packages/web-component-designer/src/elements/helper/ArrangeHelper.ts‎

Lines changed: 69 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,73 +9,103 @@ export abstract class ArrangeHelper {
99
case Orientation.TOP: {
1010
const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas);
1111
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
12+
const targetY = primaryCoordinates.y;
1213

13-
for (let elem of arrangeElements) {
14+
for (let elem of arrangeElements) {
1415
let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
15-
if(primaryCoordinates.y != selectedCoordinates.y) {
16+
if (targetY != selectedCoordinates.y) {
1617
let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
17-
let top = primaryCoordinates.y - parent.y;
18-
this.arrange(elem, 'top', top + "px" );
18+
if (elem.hasStyle('bottom') && !elem.hasStyle('top')) {
19+
let bottom = parent.y + parent.height - targetY - selectedCoordinates.height;
20+
this.arrange(elem, 'bottom', bottom + "px");
21+
} else {
22+
let top = targetY - parent.y;
23+
this.arrange(elem, 'top', top + "px");
24+
}
1925
}
2026
}
2127
grp.commit();
2228
break;
2329
}
24-
case Orientation.RIGHT: {
25-
const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
30+
case Orientation.BOTTOM: {
31+
const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
2632
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
33+
const targetBottom = primaryCoordinates.y + primaryCoordinates.height;
2734

28-
for (let elem of arrangeElements) {
35+
for (let elem of arrangeElements) {
2936
let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
30-
if(primaryCoordinates.x != selectedCoordinates.x) {
37+
if (targetBottom != selectedCoordinates.y + selectedCoordinates.height) {
3138
let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
32-
let right = primaryCoordinates.x - parent.x;
33-
this.arrange(elem, 'left', right + "px" );
39+
if (elem.hasStyle('bottom') && !elem.hasStyle('top')) {
40+
let bottom = parent.y + parent.height - targetBottom;
41+
this.arrange(elem, 'bottom', bottom + "px");
42+
} else {
43+
let top = targetBottom - selectedCoordinates.height - parent.y;
44+
this.arrange(elem, 'top', top + "px");
45+
}
3446
}
3547
}
3648
grp.commit();
3749
break;
3850
}
39-
case Orientation.BOTTOM:
40-
const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
51+
case Orientation.LEFT: {
52+
const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
4153
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
54+
const targetX = primaryCoordinates.x;
4255

43-
for (let elem of arrangeElements) {
56+
for (let elem of arrangeElements) {
4457
let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
45-
if(primaryCoordinates.y != selectedCoordinates.y) {
58+
if (targetX != selectedCoordinates.x) {
4659
let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
47-
let bottom = primaryCoordinates.y - parent.y;
48-
this.arrange(elem, 'top', bottom + "px" );
60+
if (elem.hasStyle('right') && !elem.hasStyle('left')) {
61+
let right = parent.x + parent.width - targetX - selectedCoordinates.width;
62+
this.arrange(elem, 'right', right + "px");
63+
} else {
64+
let left = targetX - parent.x;
65+
this.arrange(elem, 'left', left + "px");
66+
}
4967
}
5068
}
5169
grp.commit();
5270
break;
53-
54-
case Orientation.LEFT: {
55-
const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
71+
}
72+
case Orientation.RIGHT: {
73+
const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
5674
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
75+
const targetRight = primaryCoordinates.x + primaryCoordinates.width;
5776

58-
for (let elem of arrangeElements) {
77+
for (let elem of arrangeElements) {
5978
let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
60-
if(primaryCoordinates.x != selectedCoordinates.x){
79+
if (targetRight != selectedCoordinates.x + selectedCoordinates.width) {
6180
let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
62-
let left = primaryCoordinates.x - parent.x;
63-
this.arrange(elem, 'left', left + "px" );
81+
if (elem.hasStyle('right') && !elem.hasStyle('left')) {
82+
let right = parent.x + parent.width - targetRight;
83+
this.arrange(elem, 'right', right + "px");
84+
} else {
85+
let left = targetRight - selectedCoordinates.width - parent.x;
86+
this.arrange(elem, 'left', left + "px");
87+
}
6488
}
6589
}
6690
grp.commit();
6791
break;
6892
}
6993
case Orientation.VERTICAL_CENTER: {
7094
const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas);
71-
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
95+
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
96+
const targetCenterY = primaryCoordinates.y + primaryCoordinates.height / 2;
7297

73-
for (let elem of arrangeElements) {
98+
for (let elem of arrangeElements) {
7499
let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
75-
if(primaryCoordinates.y != selectedCoordinates.y) {
100+
if (targetCenterY != selectedCoordinates.y + selectedCoordinates.height / 2) {
76101
let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
77-
let center = primaryCoordinates.y - parent.y + (primaryCoordinates.height / 2) - (selectedCoordinates.height / 2);
78-
this.arrange(elem, 'top', center + "px" );
102+
if (elem.hasStyle('bottom') && !elem.hasStyle('top')) {
103+
let bottom = parent.y + parent.height - targetCenterY - selectedCoordinates.height / 2;
104+
this.arrange(elem, 'bottom', bottom + "px");
105+
} else {
106+
let top = targetCenterY - selectedCoordinates.height / 2 - parent.y;
107+
this.arrange(elem, 'top', top + "px");
108+
}
79109
}
80110
}
81111
grp.commit();
@@ -85,13 +115,19 @@ export abstract class ArrangeHelper {
85115
case Orientation.HORIZONTAL_CENTER: {
86116
const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas);
87117
const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element);
118+
const targetCenterX = primaryCoordinates.x + primaryCoordinates.width / 2;
88119

89-
for (let elem of arrangeElements) {
120+
for (let elem of arrangeElements) {
90121
let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element);
91-
if(primaryCoordinates.x != selectedCoordinates.x) {
122+
if (targetCenterX != selectedCoordinates.x + selectedCoordinates.width / 2) {
92123
let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element);
93-
let center = primaryCoordinates.x - parent.x + (primaryCoordinates.width / 2) - (selectedCoordinates.width / 2);
94-
this.arrange(elem, 'left', center + "px" );
124+
if (elem.hasStyle('right') && !elem.hasStyle('left')) {
125+
let right = parent.x + parent.width - targetCenterX - selectedCoordinates.width / 2;
126+
this.arrange(elem, 'right', right + "px");
127+
} else {
128+
let left = targetCenterX - selectedCoordinates.width / 2 - parent.x;
129+
this.arrange(elem, 'left', left + "px");
130+
}
95131
}
96132
}
97133
grp.commit();
@@ -116,4 +152,4 @@ enum ArrangeDirection {
116152
LEFT = 'arrangeLeft',
117153
HORIZONTAL_CENTER = 'arrangeHorizontalCenter',
118154
VERTICAL_CENTER = 'arrangeVerticalCenter',
119-
}
155+
}

0 commit comments

Comments
 (0)