Skip to content

feat: improve no compact mode without collision prevent #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: improve no compact mode without collision prevent #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions projects/angular-grid-layout/src/lib/grid.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { KtdGridItemComponent } from './grid-item/grid-item.component';
import { combineLatest, empty, merge, NEVER, Observable, Observer, of, Subscription } from 'rxjs';
import { exhaustMap, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
import { ktdGetGridItemRowHeight, ktdGridItemDragging, ktdGridItemLayoutItemAreEqual, ktdGridItemResizing } from './utils/grid.utils';
import { compact } from './utils/react-grid-layout.utils';
import { cloneLayoutItem, compact } from './utils/react-grid-layout.utils';
import {
GRID_ITEM_GET_RENDER_DATA_TOKEN, KtdGridBackgroundCfg, KtdGridCfg, KtdGridCompactType, KtdGridItemRenderData, KtdGridLayout, KtdGridLayoutItem
} from './grid.definitions';
Expand Down Expand Up @@ -541,9 +541,11 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
* Set the new layout to be the layout in which the calcNewStateFunc would be executed.
* NOTE: using the mutated layout is the way to go by 'react-grid-layout' utils. If we don't use the previous layout,
* some utilities from 'react-grid-layout' would not work as expected.
*
* In non-compact mode it is best to use copy of original layout, to prevent items from spreading on the grid
*/
const currentLayout: KtdGridLayout = newLayout || this.layout;

const isCompactLayout = (['horizontal', 'vertical'] as KtdGridCompactType[]).includes(this.compactType)
const currentLayout: KtdGridLayout = isCompactLayout ? (newLayout || this.layout) : this.layout.map((l) => cloneLayoutItem(l));
// Get the correct newStateFunc depending on if we are dragging or resizing
const calcNewStateFunc = type === 'drag' ? ktdGridItemDragging : ktdGridItemResizing;

Expand Down
17 changes: 14 additions & 3 deletions projects/angular-grid-layout/src/lib/utils/grid.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,9 +225,20 @@ export function ktdGridItemResizing(gridItem: KtdGridItemComponent, config: KtdG

}

const newLayoutItems: LayoutItem[] = config.layout.map((item) => {
return item.id === gridItemId ? layoutItem : item;
});
const layoutItems: LayoutItem[] = config.layout;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid added complexity, we think it’s better to leave the resize behavior as it was.

const resizedLayoutItem: LayoutItem = layoutItems.find(item => item.id === gridItemId)!;
let newLayoutItems: LayoutItem[] = moveElement(
layoutItems,
resizedLayoutItem,
undefined,
undefined,
true,
config.preventCollision,
compactionType,
config.cols,
layoutItem.w,
layoutItem.h,
);

return {
layout: compact(newLayoutItems, compactionType, config.cols),
Expand Down
43 changes: 31 additions & 12 deletions projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,8 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
* @param {LayoutItem} l element to move.
* @param {Number} [x] X position in grid units.
* @param {Number} [y] Y position in grid units.
* @param {Number} [w] width in grid units.
* @param {Number} [h] height in grid units.
*/
export function moveElement(
layout: Layout,
Expand All @@ -393,6 +395,8 @@ export function moveElement(
preventCollision: boolean | null | undefined,
compactType: CompactType,
cols: number,
w: number | null | undefined = undefined,
h: number | null | undefined = undefined,
): Layout {
// If this is static and not explicitly enabled as draggable,
// no move is possible, so we can short-circuit this immediately.
Expand All @@ -401,17 +405,24 @@ export function moveElement(
}

// Short-circuit if nothing to do.
if (l.y === y && l.x === x) {
if ((l.y === y || y === undefined) && (l.x === x || x === undefined) && (l.w === w || w === undefined) && (l.h === h || h === undefined)) {
return layout;
}

log(
`Moving element ${l.id} to [${String(x)},${String(y)}] from [${l.x},${
l.y
}]`,
);
if ((l.y !== y && y !== undefined) || (l.x !== x && x !== undefined)) {
log(
`Moving element ${l.id} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`,
);
}
if ((l.w !== w && w !== undefined) || (l.h !== h && h !== undefined)) {
log(
`Resizing element ${l.id} to ${String(w)} x ${String(h)} from ${l.w} x ${l.h}`,
);
}
const oldX = l.x;
const oldY = l.y;
const oldW = l.w;
const oldH = l.h;

// This is quite a bit faster than extending the object
if (typeof x === 'number') {
Expand All @@ -420,6 +431,12 @@ export function moveElement(
if (typeof y === 'number') {
l.y = y;
}
if (typeof w === 'number') {
l.w = w;
}
if (typeof h === 'number') {
l.h = h;
}
l.moved = true;

// If this collides with anything, move it.
Expand All @@ -443,6 +460,8 @@ export function moveElement(
log(`Collision prevented on ${l.id}, reverting.`);
l.x = oldX;
l.y = oldY;
l.w = oldW;
l.h = oldH;
l.moved = false;
return layout;
}
Expand Down Expand Up @@ -503,8 +522,8 @@ export function moveElementAwayFromCollision(
cols: number,
): Layout {
const compactH = compactType === 'horizontal';
// Compact vertically if not set to horizontal
const compactV = compactType !== 'horizontal';
const compactV = compactType === 'vertical';
const noCompact = !compactH && !compactV;
const preventCollision = collidesWith.static; // we're already colliding (not for static items)

// If there is enough space above the collision to put this element, move it there.
Expand All @@ -519,12 +538,12 @@ export function moveElementAwayFromCollision(
x: compactH
? Math.max(collidesWith.x - itemToMove.w, 0)
: itemToMove.x,
y: compactV
y: (compactV || (noCompact && collidesWith.y + collidesWith.h / 2 >= itemToMove.y + itemToMove.h / 2))
? Math.max(collidesWith.y - itemToMove.h, 0)
: itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
id: '-1',
id: itemToMove.id, // do not compare with itself
};

// No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
Expand All @@ -538,7 +557,7 @@ export function moveElementAwayFromCollision(
layout,
itemToMove,
compactH ? fakeItem.x : undefined,
compactV ? fakeItem.y : undefined,
(compactV || noCompact) ? fakeItem.y : undefined,
isUserAction,
preventCollision,
compactType,
Expand All @@ -551,7 +570,7 @@ export function moveElementAwayFromCollision(
layout,
itemToMove,
compactH ? itemToMove.x + 1 : undefined,
compactV ? itemToMove.y + 1 : undefined,
compactV ? itemToMove.y + 1 : (noCompact ? Math.max(itemToMove.y + 1, collidesWith.y + 1) : undefined),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better mantain compactV ? itemToMove.y + 1 : undefined, and let the compact function handle it

isUserAction,
preventCollision,
compactType,
Expand Down