@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
138 lines (137 loc) • 5.13 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
import { isPresent } from '../common/util';
/**
* @hidden
*/
let idx = 0;
/**
* @hidden
*/
export const getId = (prefix) => {
return `${prefix}-${++idx}`;
};
/**
* @hidden
*/
export const normalizeValue = (value) => {
return value ? +value : undefined;
};
/**
* @hidden
*/
export const isRowItemPresent = (items) => {
return items.some(item => isPresent(item.row));
};
/**
* @hidden
*/
export const propsChanged = (initialProps, newProps) => {
for (let i = 0; i < initialProps.length; i++) {
if (initialProps[i] !== newProps[i]) {
return true;
}
}
return false;
};
/**
* @hidden
*
* Extracts the event target from the viewport coords. Required for touch devices
* where the `event.target` of a `pointermove` event is always the initially dragged item.
*/
export const getDropTarget = (event) => {
if (!(isDocumentAvailable() && isPresent(document.elementsFromPoint))) {
return [event.target];
}
return document.elementsFromPoint(event.clientX, event.clientY)
.filter(item => item.classList && (item.classList.contains('k-tilelayout-item') || item.classList.contains('k-layout-item-hint')));
};
/**
* @hidden
*/
export const setElementStyles = (renderer, elem, styles) => {
const props = Object.keys(styles);
props.forEach(p => {
renderer.setStyle(elem, p, styles[p]);
});
};
/**
* @hidden
*/
export const calculateCellFromPosition = (coordinates, tileLayoutElement, gap, cellSize, columns, rtl = false) => {
const tileLayoutRect = tileLayoutElement.getBoundingClientRect();
const totalRows = (tileLayoutRect.height - gap.rows) / (cellSize.height + gap.rows);
const distanceFromTop = coordinates.y - tileLayoutRect.y;
const distanceFromLeft = coordinates.x - tileLayoutRect.x;
const distanceFromRight = tileLayoutRect.right - coordinates.x;
const distanceToCellWidthRatio = Math.floor((rtl ? distanceFromRight : distanceFromLeft) / (gap.columns + cellSize.width));
const cappedColumnPosition = Math.min(distanceToCellWidthRatio + 1, columns);
const distanceToCellHeightRatio = Math.floor(distanceFromTop / (gap.rows + cellSize.height));
const cappedRowPosition = Math.min(distanceToCellHeightRatio + 1, totalRows);
const col = Math.max(cappedColumnPosition, 0);
const row = Math.max(cappedRowPosition, 0);
return {
row, col
};
};
/**
* @hidden
*/
export const calculateOrderFromCell = (row, col, items, draggedItem, tileLayoutElement, gap, cellSize, columns) => {
let order = 0;
items.forEach(item => {
const rect = item.elem.nativeElement.getBoundingClientRect();
const start = calculateCellFromPosition({
x: rect.x,
y: rect.y
}, tileLayoutElement, gap, cellSize, columns);
if (item !== draggedItem && ((start.row === row && start.col < col) || start.row < row)) {
order++;
}
});
return order;
};
/**
* @hidden
*/
export const shouldResize = (keyCode, col, selectedTile, settings) => {
const resizeRight = keyCode === Keys.ArrowRight && col + selectedTile.colSpan <= settings.columns;
const resizeLeft = keyCode === Keys.ArrowLeft && selectedTile.colSpan > 1;
const resizeDown = keyCode === Keys.ArrowDown;
const resizeUp = keyCode === Keys.ArrowUp && selectedTile.rowSpan > 1;
return { resizeRight, resizeLeft, resizeDown, resizeUp };
};
/**
* @hidden
*/
export const shouldReorder = (keyCode, col, selectedTile, settings) => {
let reorderRight;
let reorderLeft;
if (selectedTile.col) {
reorderRight = keyCode === Keys.ArrowRight && selectedTile.colSpan + col <= settings.columns;
reorderLeft = keyCode === Keys.ArrowLeft && col > 1;
}
else {
reorderRight = keyCode === Keys.ArrowRight && selectedTile.colSpan + selectedTile.order < settings.items.length;
reorderLeft = keyCode === Keys.ArrowLeft && selectedTile.order > 0;
}
return { reorderLeft, reorderRight };
};
/**
* @hidden
*/
export const getCurrentCol = (selectedTile, settings, rtl) => {
const rects = selectedTile.elem.nativeElement.getBoundingClientRect();
const targetSize = {
rowSpan: selectedTile.rowSpan,
colSpan: selectedTile.colSpan
};
const width = (rects.width - ((targetSize.colSpan - 1) * settings.gap.columns)) / targetSize.colSpan;
const height = (rects.height - ((targetSize.rowSpan - 1) * settings.gap.rows)) / targetSize.rowSpan;
const { col } = calculateCellFromPosition({ x: rects.x, y: rects.y }, settings.tileLayoutElement, settings.gap, { width: width, height: height }, settings.columns, rtl);
return col;
};