Skip to content

Commit a394ae5

Browse files
paras89paras89
committed
PB-108 improvements to moving columns between column lines
1 parent 605b102 commit a394ae5

File tree

7 files changed

+230
-123
lines changed

7 files changed

+230
-123
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/column.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</breakpoint>
2323
</breakpoints>
2424
<parents default_policy="deny">
25-
<parent name="column-group" policy="allow"/>
25+
<parent name="column-line" policy="allow"/>
2626
</parents>
2727
<children default_policy="allow">
2828
<child name="row" policy="deny"/>

‎app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/column_group.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<parent name="tab-item" policy="allow"/>
2424
</parents>
2525
<children default_policy="deny">
26-
<child name="column" policy="allow"/>
26+
<child name="column-line" policy="allow"/>
2727
</children>
2828
<appearances>
2929
<appearance default="true"

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/preview.js

Lines changed: 2 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-line/preview.js

Lines changed: 123 additions & 74 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column-line/default/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<!-- @todo move styles to style sheet -->
88
<div class="pagebuilder-column-line" style="width:100%; position:relative;">
99
<div class="column-drop-placeholder" afterRender="function (element) { bindColumnLineDropPlaceholder.call($data, element); }"
10-
style="background: rgba(142, 0, 6, 0.3); height:30px; position:relative; top:45px; display:none; z-index:26;" ></div>
10+
style="background: rgba(142, 0, 6, 0.3); height:30px; top:45px; display:none; z-index:26;" ></div>
1111
<div class="resize-ghost" afterRender="function (element) { bindGhost.call($data, element); }"></div>
1212
<div class="drop-placeholder" afterRender="function (element) { bindDropPlaceholder.call($data, element); }"></div>
1313
<div class="move-placeholder" afterRender="function (element) { bindMovePlaceholder.call($data, element); }"></div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-group/preview.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -231,10 +231,9 @@ export default class Preview extends PreviewCollection {
231231
this.contentType,
232232
this.contentType.stageId,
233233
).then((columnLine) => {
234-
const contentType = this.contentType;
235-
contentType.addChild(columnLine);
234+
this.contentType.addChild(columnLine, 0);
236235
events.trigger(columnLine.config.name + ":dropAfter", {id: columnLine.id, columnLine});
237-
this.fireMountEvent(contentType, columnLine);
236+
this.fireMountEvent(this.contentType, columnLine);
238237
});
239238
}
240239

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-line/preview.ts

Lines changed: 100 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,7 @@ export default class Preview extends PreviewCollection {
275275
this.dropPlaceholder.removeClass("left right");
276276

277277
this.movePlaceholder.removeClass("active");
278+
this.movePosition = null;
278279
this.startDragEvent = null;
279280

280281
events.trigger("column:dragStop", {
@@ -328,7 +329,7 @@ export default class Preview extends PreviewCollection {
328329
}
329330

330331
/**
331-
* Handle an existing column being dropped into a new column group
332+
* Handle an existing column being dropped into a different column line
332333
*
333334
* @param {DropPosition} movePosition
334335
*/
@@ -349,26 +350,49 @@ export default class Preview extends PreviewCollection {
349350

350351
// Set the column to it's smallest column width
351352
updateColumnWidth(column, this.resizeUtils.getSmallestColumnWidth());
352-
353-
// Move the content type
354-
moveContentType(column, movePosition.insertIndex, this.contentType);
355-
356353
// Modify the old neighbour
354+
let oldNeighbourWidth = 100;
357355
if (modifyOldNeighbour) {
358-
const oldNeighbourWidth = sourceLinePreview.getResizeUtils().getAcceptedColumnWidth(
356+
oldNeighbourWidth = sourceLinePreview.getResizeUtils().getAcceptedColumnWidth(
359357
(oldWidth + sourceLinePreview.getResizeUtils().getColumnWidth(modifyOldNeighbour)).toString(),
360358
);
361-
updateColumnWidth(modifyOldNeighbour, oldNeighbourWidth);
359+
362360
}
363361

364-
// Modify the columns new neighbour
365-
const newNeighbourWidth = this.resizeUtils.getAcceptedColumnWidth(
366-
(this.resizeUtils.getColumnWidth(movePosition.affectedColumn) -
367-
this.resizeUtils.getSmallestColumnWidth()).toString(),
368-
);
362+
// Move the content type
363+
if (this.columnLineDropPlaceholder.hasClass('active')
364+
|| this.columnLineBottomDropPlaceholder.hasClass('active')) {
365+
// if new column line placeholders are visible, add new column line and move column there
366+
createColumnLine(
367+
this.contentType.parentContentType,
368+
this.resizeUtils.getSmallestColumnWidth(),
369+
this.getNewColumnLineIndex(),
370+
).then((columnLine) => {
371+
372+
moveContentType(column, 0, columnLine);
373+
updateColumnWidth(column, 100);
374+
if (modifyOldNeighbour) {
375+
updateColumnWidth(modifyOldNeighbour, oldNeighbourWidth);
376+
}
377+
this.fireMountEvent(this.contentType, column);
378+
379+
});
380+
} else {
381+
//@todo evaluate if this else is needed
382+
moveContentType(column, movePosition.insertIndex, this.contentType);
383+
if (modifyOldNeighbour) {
384+
updateColumnWidth(modifyOldNeighbour, oldNeighbourWidth);
385+
}
386+
const newNeighbourWidth = this.resizeUtils.getAcceptedColumnWidth(
387+
(this.resizeUtils.getColumnWidth(movePosition.affectedColumn) -
388+
this.resizeUtils.getSmallestColumnWidth()).toString(),
389+
);
390+
391+
// Reduce the affected columns width by the smallest column width
392+
updateColumnWidth(movePosition.affectedColumn, newNeighbourWidth);
393+
394+
}
369395

370-
// Reduce the affected columns width by the smallest column width
371-
updateColumnWidth(movePosition.affectedColumn, newNeighbourWidth);
372396
}
373397

374398
/**
@@ -469,23 +493,16 @@ export default class Preview extends PreviewCollection {
469493

470494
let index = -1;
471495
const self = this;
472-
if (this.columnLineDropPlaceholder.hasClass("active")
473-
|| this.columnLineBottomDropPlaceholder.hasClass("active")) {
496+
const dragColumn = getDragColumn();
497+
if ((this.columnLineDropPlaceholder.hasClass("active")
498+
|| this.columnLineBottomDropPlaceholder.hasClass("active"))
499+
&& !dragColumn) {
500+
474501

475-
for (const child of this.contentType.parentContentType.children()) {
476-
index++;
477-
if (child.id == self.contentType.id) {
478-
break;
479-
}
480-
}
481-
if (this.columnLineBottomDropPlaceholder.hasClass("active")) {
482-
// show the bottom drop placeholder
483-
index++;
484-
}
485502
createColumnLine(
486503
this.contentType.parentContentType,
487504
this.resizeUtils.getSmallestColumnWidth(),
488-
index,
505+
this.getNewColumnLineIndex(),
489506
).then((columnLine) => {
490507
events.trigger(
491508
columnLine.config.name + ":dropAfter",
@@ -509,9 +526,10 @@ export default class Preview extends PreviewCollection {
509526

510527
const column = getDragColumn();
511528

512-
if (this.movePosition && column && column.parentContentType !== this.contentType) {
529+
if (this.isColumnBeingMovedToAnotherColumnLine()) {
513530
this.onExistingColumnDrop(this.movePosition);
514531
}
532+
515533
}
516534

517535
/**
@@ -564,7 +582,9 @@ export default class Preview extends PreviewCollection {
564582
this.movePosition = null;
565583
}
566584

567-
if (this.movePosition) {
585+
if (this.movePosition &&
586+
(!this.isNewLinePlaceDropPlaceholderVisible(event, linePosition)
587+
&& !this.isNewLineBottomPlaceDropPlaceholderVisible(event, linePosition))) {
568588
this.dropPlaceholder.removeClass("left right");
569589
this.movePlaceholder.css({
570590
left: (this.movePosition.placement === "left" ? this.movePosition.left : ""),
@@ -724,16 +744,11 @@ export default class Preview extends PreviewCollection {
724744

725745
const siblings = this.contentType.parentContentType.children();
726746
const id = this.contentType.id;
727-
let index = 0;
728-
siblings.forEach((columnLine) => {
729-
if (columnLine.id === id){
730-
return false;
731-
}
732-
index++;
733-
});
747+
const firstLine = siblings.shift();
734748
// show column line drop placeholder only for top column line in a group
749+
const draggedColumn = getDragColumn();
735750

736-
return index === 0 && this.dropOverElement &&
751+
return (this.dropOverElement || draggedColumn) &&
737752
event.pageY > linePosition.top &&
738753
event.pageY < linePosition.top + this.lineDropperHeight;
739754
}
@@ -749,7 +764,8 @@ export default class Preview extends PreviewCollection {
749764
linePosition: LinePositionCache,
750765
): boolean {
751766

752-
return this.dropOverElement &&
767+
const draggedColumn = getDragColumn();
768+
return (this.dropOverElement || draggedColumn) &&
753769
(event.pageY < linePosition.top + this.element.outerHeight() &&
754770
event.pageY > linePosition.top + this.element.outerHeight() - this.lineDropperHeight);
755771

@@ -763,7 +779,8 @@ export default class Preview extends PreviewCollection {
763779
*/
764780
private isNewColumnDropPlaceholderVisible(event: JQueryEventObject, linePosition: LinePositionCache): boolean {
765781

766-
return this.dropOverElement &&
782+
const draggedColumn = getDragColumn();
783+
return (this.dropOverElement || draggedColumn) &&
767784
event.pageY > linePosition.top + this.lineDropperHeight &&
768785
event.pageY < linePosition.top + linePosition.outerHeight - this.lineDropperHeight;
769786
}
@@ -945,7 +962,8 @@ export default class Preview extends PreviewCollection {
945962
},
946963
over() {
947964
// Is the element currently being dragged a column group?
948-
if (getDraggedContentTypeConfig() === Config.getContentTypeConfig("column-group")) {
965+
if (getDraggedContentTypeConfig() === Config.getContentTypeConfig("column-group") ||
966+
getDraggedContentTypeConfig() === Config.getContentTypeConfig("column")) {
949967
// Always calculate drop positions when an element is dragged over
950968
const ownContentType = self.contentType as ContentTypeCollectionInterface<ColumnLinePreview>;
951969
self.dropPositions = calculateDropPositions(ownContentType);
@@ -1164,4 +1182,46 @@ export default class Preview extends PreviewCollection {
11641182
return;
11651183
}
11661184
}
1185+
1186+
private getNewColumnLineIndex(): number {
1187+
let index = -1;
1188+
const self = this;
1189+
alert(this.contentType.parentContentType.getChildren()().length);
1190+
for (const child of this.contentType.parentContentType.children()) {
1191+
index++;
1192+
if (child.id == self.contentType.id) {
1193+
break;
1194+
}
1195+
}
1196+
if (this.columnLineBottomDropPlaceholder.hasClass("active")) {
1197+
// show the bottom drop placeholder
1198+
index++;
1199+
}
1200+
return index;
1201+
}
1202+
1203+
1204+
private isColumnBeingMovedToAnotherColumnLine(): boolean {
1205+
let column = getDragColumn();
1206+
if (!column) {
1207+
//if no move position, column is not being moved.
1208+
return false;
1209+
}
1210+
1211+
if (column.parentContentType !== this.contentType) {
1212+
//if the parent content type is not same as this column line, column is being moved to new column line
1213+
return true;
1214+
}
1215+
1216+
if (column.parentContentType === this.contentType
1217+
&& (this.columnLineDropPlaceholder.hasClass('active')
1218+
|| this.columnLineBottomDropPlaceholder.hasClass('active'))) {
1219+
//since new column line drop placeholder is visible, column move will introduce a new column line
1220+
return true;
1221+
}
1222+
1223+
return false;
1224+
}
1225+
1226+
11671227
}

0 commit comments

Comments
 (0)