@qrvey/utils 1.15.0-8 → 1.15.0

package/dist/columns/constants/COLUMN_ICON.js

@@ -3,36 +3,36 @@ import { COMPLEX_COLUMN } from "./COMPLEX_COLUMN";
 import { COMPOUND_COLUMN } from "./COMPOUND_COLUMN";
 import { NUMERICAL_COLUMN } from "./NUMERICAL_COLUMN";
 export const COLUMN_ICON = {
-    [NUMERICAL_COLUMN.RATING]: "q-icon-star",
-    [COMPLEX_COLUMN.TEXTFIELD]: "q-icon-short-text",
-    [COMPLEX_COLUMN.LONGTEXT]: "q-icon-long-text",
-    [COLUMN.TEXT_LABEL]: "q-icon-text-left",
-    [COLUMN.TEXT_CATEGORY]: "q-icon-text-left",
-    [COLUMN.YES_NO]: "q-icon-yes-no",
-    [COLUMN.RANKING]: "q-icon-ranking",
-    [COLUMN.DATE]: "q-icon-date",
-    [COLUMN.TIME]: "q-icon-time",
-    [NUMERICAL_COLUMN.SLIDEBAR]: "q-icon-slidebar",
-    [COMPLEX_COLUMN.IMAGEUPLOAD]: "q-icon-image-upload",
-    [COLUMN.SIGNATURE]: "q-icon-signature",
-    [COMPLEX_COLUMN.EXPRESSION]: "q-icon-expression",
-    [NUMERICAL_COLUMN.NUMERIC]: "q-icon-numeric",
-    [COLUMN.IMAGE]: "q-icon-image",
-    [COMPOUND_COLUMN.NAME]: "q-icon-name",
-    [COLUMN.EMAIL_FORM]: "q-icon-email",
-    [COLUMN.PHONE]: "q-icon-phone",
-    [COMPOUND_COLUMN.USADDRESS]: "q-icon-us-address",
-    [COMPOUND_COLUMN.ADDRESS]: "q-icon-address",
-    [COLUMN.PASSWORD]: "q-icon-password",
-    [COLUMN.DROPDOWN]: "q-icon-dropdown",
-    [COLUMN.LOOKUP]: "q-icon-Lookup",
-    [COLUMN.SINGLE_CHOICE]: "q-icon-multiple-choice",
-    [COLUMN.MULTIPLE_CHOICE]: "q-icon-multiple-choice",
-    [COLUMN.BUCKET]: "q-icon-bucket",
-    [COLUMN.FORMULA]: "q-icon-formula",
-    [COLUMN.TEXT_FORMULA]: "q-icon-formula",
-    [COLUMN.DATE_FORMULA]: "q-icon-formula",
-    [COLUMN.NUMERIC_FORMULA]: "q-icon-formula",
-    [COMPLEX_COLUMN.FILEUPLOAD]: "q-icon-file_upload",
-    [COLUMN.AGGREGATED_FORMULA]: "q-icon-an-aggcb",
+    [NUMERICAL_COLUMN.RATING]: "new-q-icon-wf-rating",
+    [COMPLEX_COLUMN.TEXTFIELD]: "new-q-icon-wf-short-text",
+    [COMPLEX_COLUMN.LONGTEXT]: "new-q-icon-wf-long-text",
+    [COLUMN.TEXT_LABEL]: "new-q-icon-qv-justify-left",
+    [COLUMN.TEXT_CATEGORY]: "new-q-icon-qv-justify-left",
+    [COLUMN.YES_NO]: "new-q-icon-wf-yes-no",
+    [COLUMN.RANKING]: "new-q-icon-wf-ranking",
+    [COLUMN.DATE]: "new-q-icon-wf-date",
+    [COLUMN.TIME]: "new-q-icon-wf-dt-time",
+    [NUMERICAL_COLUMN.SLIDEBAR]: "new-q-icon-wf-slide-bar",
+    [COMPLEX_COLUMN.IMAGEUPLOAD]: "new-q-icon-wf-image-upload",
+    [COLUMN.SIGNATURE]: "new-q-icon-wf-signature",
+    [COMPLEX_COLUMN.EXPRESSION]: "new-q-icon-wf-expression",
+    [NUMERICAL_COLUMN.NUMERIC]: "new-q-icon-wf-numeric",
+    [COLUMN.IMAGE]: "new-q-icon-wf-image",
+    [COMPOUND_COLUMN.NAME]: "new-q-icon-wf-name",
+    [COLUMN.EMAIL_FORM]: "new-q-icon-wf-email",
+    [COLUMN.PHONE]: "new-q-icon-wf-phone-number",
+    [COMPOUND_COLUMN.USADDRESS]: "new-q-icon-wf-us-address",
+    [COMPOUND_COLUMN.ADDRESS]: "new-q-icon-wf-address",
+    [COLUMN.PASSWORD]: "new-q-icon-wf-password",
+    [COLUMN.DROPDOWN]: "new-q-icon-wf-dropdown",
+    [COLUMN.LOOKUP]: "new-q-icon-wf-lookup",
+    [COLUMN.SINGLE_CHOICE]: "new-q-icon-wf-multiple-choice",
+    [COLUMN.MULTIPLE_CHOICE]: "new-q-icon-wf-multiple-choice",
+    [COLUMN.BUCKET]: "new-q-icon-an-buckets",
+    [COLUMN.FORMULA]: "new-q-icon-an-formula",
+    [COLUMN.TEXT_FORMULA]: "new-q-icon-an-formula",
+    [COLUMN.DATE_FORMULA]: "new-q-icon-an-formula",
+    [COLUMN.NUMERIC_FORMULA]: "new-q-icon-an-formula",
+    [COMPLEX_COLUMN.FILEUPLOAD]: "new-q-icon-wf-file-upload",
+    [COLUMN.AGGREGATED_FORMULA]: "new-q-icon-wf-dt-array-aggregate",
 };

package/dist/columns/helpers/index.d.ts

@@ -6,3 +6,4 @@ export * from "./isComplexColumn";
 export * from "./isCompoundColumn";
 export * from "./isDateColumn";
 export * from "./isNumericalColumn";
+export * from "./isStringColumn";

package/dist/columns/helpers/index.js

@@ -6,3 +6,4 @@ export * from "./isComplexColumn";
 export * from "./isCompoundColumn";
 export * from "./isDateColumn";
 export * from "./isNumericalColumn";
+export * from "./isStringColumn";

package/dist/columns/helpers/isNumericalColumn.d.ts

@@ -1,7 +1,7 @@
 import { IColumn } from "../interfaces/IColumn";
 /**
  * Validates if the given column is numerical type
- * @param {IColumn} column the column info
+ * @param column the column info
  * @returns true: the column is numerical type
  */
 export declare const isNumericalColumn: (column: IColumn) => boolean;

package/dist/columns/helpers/isNumericalColumn.js

@@ -5,7 +5,7 @@ import { COLUMN } from "../constants/COLUMN";
 import { NUMERICAL_COLUMNS } from "../constants/NUMERICAL_COLUMNS";
 /**
  * Validates if the given column is numerical type
- * @param {IColumn} column the column info
+ * @param column the column info
  * @returns true: the column is numerical type
  */
 export const isNumericalColumn = (column) => !isEmpty(column) &&

package/dist/columns/helpers/isStringColumn.d.ts

@@ -0,0 +1,7 @@
+import { IColumn } from "../interfaces/IColumn";
+/**
+ * Validates if the given column is text type
+ * @param column the column info
+ * @returns true: the column is numerical type
+ */
+export declare const isStringColumn: (column: IColumn) => boolean;

package/dist/columns/helpers/isStringColumn.js

@@ -0,0 +1,15 @@
+import { FORMULA } from "../../formulas/constants/FORMULA";
+import { isEmpty } from "../../general/mix/isEmpty";
+import { isObject } from "../../general/object/isObject";
+import { COLUMN } from "../constants/COLUMN";
+/**
+ * Validates if the given column is text type
+ * @param column the column info
+ * @returns true: the column is numerical type
+ */
+export const isStringColumn = (column) => !isEmpty(column) &&
+    isObject(column) &&
+    ([COLUMN.TEXT_LABEL, COLUMN.LONGTEXT, COLUMN.TEXT_FORMULA].includes(column.type) ||
+        (column.type === COLUMN.FORMULA && column.formulaType === FORMULA.TEXT) ||
+        (column.type === COLUMN.AGGREGATED_FORMULA &&
+            column.formulaType === FORMULA.TEXT));

package/dist/dates/relative/RelativeStatementAdapter.js

@@ -6,6 +6,7 @@ import { getStatementCase } from "./helpers/getStatementCase";
 import { DATE_GROUPING_PROPERTY } from "../constants/DATE_GROUPING_PROPERTY";
 import { parseDate } from "./helpers/parseDate";
 import { DATETIME_FORMAT } from "./constants/DATE_FORMATS";
+import { isEmpty } from "../../general";
 export class RelativeStatementAdapter {
     constructor(statement, now = new Date()) {
         this.statement =
@@ -19,7 +20,7 @@ export class RelativeStatementAdapter {
         return this.get("unit");
     }
     get anchor() {
-        return this.get("anchor");
+        return isEmpty(this.get("anchor")) ? undefined : this.get("anchor");
     }
     get number() {
         return this.get("number");

package/dist/elements/helpers/fixed.d.ts

@@ -0,0 +1,96 @@
+import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { FindAvailablePositionOptions } from "../interfaces/IFixedPosition";
+import { VemFixed } from "../interfaces/IVemCore";
+import { VemPositionFixed } from "../interfaces/IVemPosition";
+/**
+ * update the position for a specific device
+ * @param element element to be updated
+ * @param newDevicePosition new position attributes for the element
+ * @param device device for the update
+ * @returns new element with its position updated
+ */
+export declare function updateFixedPosition(element: VemFixed, newDevicePosition: Partial<VemPositionFixed>, device: CanvasDevice): VemFixed;
+/**
+ * Finds the first available position within a canvas where a new element can be placed without overlapping existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElement - The new element to be placed, with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [options] - Additional options for position finding.
+ * @param [options.canvasHeight] - The maximum height of the canvas in pixels. Defaults to `Infinity`.
+ * @param [options.findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [options.initialY] - The initial Y-coordinate to start the search. Defaults to `0`.
+ * @returns - The x and y coordinates of the first available position.
+ * @throws {Error} - Throws an error if no valid position is found and `canvasHeight` is not specified.
+ */
+export declare function findAvailablePosition(canvasWidth: number, newElement: VemFixed, elements: VemFixed[], device: CanvasDevice, options?: FindAvailablePositionOptions): {
+    x: number;
+    y: number;
+};
+export declare const getFixedPositionByDevice: (item: VemFixed, device: CanvasDevice) => VemPositionFixed | undefined;
+/**
+ * Finds available positions for multiple new elements within a canvas, ensuring they do not overlap with existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElements - The list of new elements to be positioned, each with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [startWithPositionY] - Whether to start the position search for each new element based on its initial Y-coordinate. Defaults to `false`.
+ * @param [findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [canvasHeight] - The maximum height of the canvas in pixels. If not provided, the search height is unlimited.
+ * @returns List of elements with their recalculated positions.
+ */
+export declare function findFixedAvailablePositions(canvasWidth: number, newElements: VemFixed[], elements: VemFixed[], device: CanvasDevice, startWithPositionY?: boolean, findRightToLeft?: boolean, canvasHeight?: number): VemFixed[];
+/**
+ * Recalculates the positions of elements on the canvas, preserving the position of those
+ * that meet certain conditions (no overflow or overlap). Elements that do not meet these
+ * conditions are recalculated to find a new valid position.
+ * @param elements - List of elements to recalculate.
+ * @param device - The device on which the canvas is being rendered.
+ * @param resolution - The resolution of the canvas.
+ * @param [canvasHeight] - Optional height of the canvas.
+ * @returns - List of elements with their recalculated positions.
+ */
+export declare const recalculatePreservingPositions: (elements: VemFixed[], device: CanvasDevice, resolution: number, canvasHeight?: number) => VemFixed[];
+/**
+ * Adjusts the `width` of a fixed element to fit within the specified canvas width and updates its position.
+ * @param element - The fixed element to adjust.
+ * @param canvasWidth - The width of the canvas in grid columns.
+ * @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
+ * @returns - The updated responsive element with an adjusted `width`.
+ */
+export declare function updateFixedElementWidth(element: VemFixed, canvasWidth: number, canvasDevice: CanvasDevice): VemFixed;
+/**
+ * @param elements elements to calculate
+ * @param device  current device
+ * @returns height
+ */
+export declare const getFixedGridElementsBottomLimit: (elements: VemFixed[], device: CanvasDevice) => number;
+/**
+ * Calculates distances of elements from a given reference point on the canvas device.
+ * @param elements - Array of `VemFixed` elements to calculate distances for.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of objects containing the original elements and their calculated distances from the reference point.
+ */
+export declare const calculateDistancesToReferencePoint: (elements: VemFixed[], device: CanvasDevice, referencePoint: {
+    x: number;
+    y: number;
+}) => {
+    distance: number;
+    element: VemFixed;
+}[];
+/**
+ * Sorts elements based on their distance from a reference point on the canvas.
+ * @param elements - Array of `VemFixed` elements to be sorted.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of `VemFixed` elements sorted by their distance from the reference point (0, 0).
+ */
+export declare const sortElementsFromReferencePoint: (elements: VemFixed<unknown>[], device: CanvasDevice, referencePoint: {
+    x: number;
+    y: number;
+}) => VemFixed<unknown>[];

package/dist/elements/helpers/fixed.js

@@ -0,0 +1,236 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { VemPositionType } from "../interfaces/IVemPosition";
+import { dxGetFixedGridItemDevice, hasOverflow, hasOverlap, } from "../utils/fixed.position";
+import { sortByDistanceFunction } from "../utils/general";
+import { OverlapIntervalTree } from "../utils/overlap";
+import { setElementPosition } from "../utils/position";
+const SPACE_DELTA = 10;
+/**
+ * update the position for a specific device
+ * @param element element to be updated
+ * @param newDevicePosition new position attributes for the element
+ * @param device device for the update
+ * @returns new element with its position updated
+ */
+export function updateFixedPosition(element, newDevicePosition, device) {
+    var _a;
+    return Object.assign(Object.assign({}, element), { position: Object.assign(Object.assign({}, element.position), { fixed: Object.assign(Object.assign({}, element.position.fixed), { [device]: Object.assign(Object.assign({}, (_a = element.position.fixed) === null || _a === void 0 ? void 0 : _a[device]), newDevicePosition) }) }) });
+}
+/**
+ * Finds the first available position within a canvas where a new element can be placed without overlapping existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElement - The new element to be placed, with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [options] - Additional options for position finding.
+ * @param [options.canvasHeight] - The maximum height of the canvas in pixels. Defaults to `Infinity`.
+ * @param [options.findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [options.initialY] - The initial Y-coordinate to start the search. Defaults to `0`.
+ * @returns - The x and y coordinates of the first available position.
+ * @throws {Error} - Throws an error if no valid position is found and `canvasHeight` is not specified.
+ */
+export function findAvailablePosition(canvasWidth, newElement, elements, device, options = {}) {
+    var _a, _b;
+    const { width: newWidth, height: newHeight } = getFixedPositionByDevice(newElement, device);
+    const canvasHeight = (_a = options.canvasHeight) !== null && _a !== void 0 ? _a : Infinity;
+    const sortedElements = options.findRightToLeft
+        ? elements
+            .slice()
+            .sort((b, a) => b.position.fixed[device].x - a.position.fixed[device].x)
+        : elements
+            .slice()
+            .sort((a, b) => a.position.fixed[device].y - b.position.fixed[device].y);
+    const intervalTree = new OverlapIntervalTree();
+    for (const element of sortedElements) {
+        const elemPosition = element.position.fixed[device];
+        intervalTree.insert(elemPosition.x, elemPosition.x + elemPosition.width, elemPosition.y, elemPosition.y + elemPosition.height);
+    }
+    let startX = options.findRightToLeft ? canvasWidth - newWidth : 0;
+    const initialY = (_b = options.initialY) !== null && _b !== void 0 ? _b : 0;
+    let increment = options.findRightToLeft ? -SPACE_DELTA : SPACE_DELTA;
+    for (let y = initialY; y <= canvasHeight - newHeight; y += SPACE_DELTA) {
+        let x = startX;
+        while (x >= 0 && x <= canvasWidth - newWidth) {
+            if (!intervalTree.overlaps(x, x + newWidth, y, y + newHeight)) {
+                return { x, y };
+            }
+            x += increment;
+        }
+        if (options.findRightToLeft) {
+            startX = 0;
+            increment = SPACE_DELTA;
+        }
+    }
+    if (options.canvasHeight)
+        return { x: 0, y: 0 };
+    throw new Error("No valid position found");
+}
+export const getFixedPositionByDevice = (item, device) => {
+    const fixedPosition = item.position.fixed;
+    const devicePosition = fixedPosition[device];
+    return isValidPosition(devicePosition) ? devicePosition : undefined;
+};
+const isValidPosition = (position) => {
+    return ((position === null || position === void 0 ? void 0 : position.y) !== undefined &&
+        position.x !== undefined &&
+        position.z !== undefined &&
+        position.height !== undefined &&
+        position.width !== undefined);
+};
+/**
+ * Finds available positions for multiple new elements within a canvas, ensuring they do not overlap with existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElements - The list of new elements to be positioned, each with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [startWithPositionY] - Whether to start the position search for each new element based on its initial Y-coordinate. Defaults to `false`.
+ * @param [findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [canvasHeight] - The maximum height of the canvas in pixels. If not provided, the search height is unlimited.
+ * @returns List of elements with their recalculated positions.
+ */
+export function findFixedAvailablePositions(canvasWidth, newElements, elements, device, startWithPositionY = false, findRightToLeft = false, canvasHeight) {
+    const processedElements = elements.slice();
+    const resultElems = [];
+    newElements.forEach((nElement) => {
+        const initialY = startWithPositionY
+            ? nElement.position.fixed[device].y
+            : 0;
+        const newElement = updateFixedElementWidth(nElement, canvasWidth, device);
+        const availablePosition = findAvailablePosition(canvasWidth, newElement, processedElements, device, { initialY, findRightToLeft, canvasHeight });
+        const newElemWithPosition = updateFixedPosition(newElement, availablePosition, device);
+        resultElems.push(newElemWithPosition);
+        processedElements.push(newElemWithPosition);
+    });
+    return resultElems;
+}
+/**
+ * Recalculates the positions of elements on the canvas, preserving the position of those
+ * that meet certain conditions (no overflow or overlap). Elements that do not meet these
+ * conditions are recalculated to find a new valid position.
+ * @param elements - List of elements to recalculate.
+ * @param device - The device on which the canvas is being rendered.
+ * @param resolution - The resolution of the canvas.
+ * @param [canvasHeight] - Optional height of the canvas.
+ * @returns - List of elements with their recalculated positions.
+ */
+export const recalculatePreservingPositions = (elements, device, resolution, canvasHeight) => {
+    const keepElementPositions = getElementsWithKeepPosition([...elements], device, resolution, canvasHeight);
+    const elementIds = keepElementPositions.map((element) => element.elementId);
+    const elementsToCalculate = elements.filter((cElement) => !elementIds.includes(cElement.elementId));
+    const defaultElements = keepElementPositions.length
+        ? keepElementPositions
+        : [];
+    const currentElements = canvasHeight ? defaultElements : elements;
+    const newElements = findFixedAvailablePositions(resolution, elementsToCalculate, currentElements, device, false, false, canvasHeight);
+    return [...keepElementPositions, ...newElements];
+};
+/**
+ * Filters elements that should retain their current position on the canvas by checking
+ * that they do not have overflow (spilling outside the canvas) or overlap (colliding with other elements).
+ * @param elements - List of elements to check.
+ * @param device - The device on which the canvas is being rendered.
+ * @param resolution - The resolution of the canvas.
+ * @param [canvasHeight] - Optional height of the canvas.
+ * @returns - List of elements that can retain their current position.
+ */
+const getElementsWithKeepPosition = (elements, device, resolution, canvasHeight) => {
+    const calculatedElements = elements.map((mElement) => {
+        const desktopPosition = dxGetFixedGridItemDevice(mElement, CanvasDevice.DESKTOP);
+        return updateFixedPosition(mElement, desktopPosition, device);
+    });
+    return calculatedElements.filter((cElement) => {
+        const currentElements = calculatedElements.filter((fElement) => fElement.elementId !== cElement.elementId);
+        const overflow = hasOverflow(cElement, device, resolution, canvasHeight);
+        const overlap = hasOverlap(cElement, currentElements, device);
+        return !overflow && !overlap;
+    });
+};
+/**
+ * Adjusts the `width` of a fixed element to fit within the specified canvas width and updates its position.
+ * @param element - The fixed element to adjust.
+ * @param canvasWidth - The width of the canvas in grid columns.
+ * @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
+ * @returns - The updated responsive element with an adjusted `width`.
+ */
+export function updateFixedElementWidth(element, canvasWidth, canvasDevice) {
+    const currentPosition = element.position.fixed[canvasDevice];
+    const fixedWidth = Math.min(currentPosition === null || currentPosition === void 0 ? void 0 : currentPosition.width, canvasWidth);
+    const position = Object.assign(Object.assign({}, currentPosition), { width: fixedWidth });
+    return setElementPosition(element, VemPositionType.FIXED, canvasDevice, position);
+}
+/**
+ * Retrieves the Y-coordinate of a fixed grid element for a specific device.
+ * If `allowNegative` is false (default), the function ensures the Y-coordinate is non-negative.
+ * @param element - The element to retrieve the Y-coordinate from.
+ * @param device - The device for which the Y-coordinate is calculated.
+ * @param [allowNegative] - Whether to allow negative Y-coordinates.
+ * @returns - The Y-coordinate of the element.
+ */
+const getFixedGridElementY = (element, device, allowNegative = false) => {
+    var _a;
+    const position = element.position.fixed[device];
+    const itemY = (_a = position === null || position === void 0 ? void 0 : position.y) !== null && _a !== void 0 ? _a : 0;
+    if (!allowNegative) {
+        return itemY >= 0 ? itemY : 0;
+    }
+    return itemY;
+};
+/**
+ * Retrieves the height of a fixed grid element for a specific device.
+ * @param element - The element to retrieve the height from.
+ * @param device - The device for which the height is calculated.
+ * @returns - The height of the element, or undefined if not defined.
+ */
+const getFixedGridElementHeight = (element, device) => {
+    const position = element.position.fixed[device];
+    return position === null || position === void 0 ? void 0 : position.height;
+};
+/**
+ * @param elements elements to calculate
+ * @param device  current device
+ * @returns height
+ */
+export const getFixedGridElementsBottomLimit = (elements, device) => {
+    if (!elements.length)
+        return 0;
+    return Math.max(...elements.map((element) => getFixedGridElementY(element, device) +
+        getFixedGridElementHeight(element, device)));
+};
+/**
+ * Calculates distances of elements from a given reference point on the canvas device.
+ * @param elements - Array of `VemFixed` elements to calculate distances for.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of objects containing the original elements and their calculated distances from the reference point.
+ */
+export const calculateDistancesToReferencePoint = (elements, device, referencePoint) => {
+    return elements.map((element) => {
+        const elementPosition = getFixedPositionByDevice(element, device);
+        if (!elementPosition) {
+            throw new Error(`Position for device ${device} is undefined for element with Id ${element.elementId}.`);
+        }
+        const distance = Math.pow(referencePoint.x - elementPosition.x, 2) +
+            Math.pow(referencePoint.y - elementPosition.y, 2);
+        return {
+            distance,
+            element,
+        };
+    });
+};
+/**
+ * Sorts elements based on their distance from a reference point on the canvas.
+ * @param elements - Array of `VemFixed` elements to be sorted.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of `VemFixed` elements sorted by their distance from the reference point (0, 0).
+ */
+export const sortElementsFromReferencePoint = (elements, device, referencePoint) => {
+    const calculatedElements = calculateDistancesToReferencePoint(elements, device, referencePoint);
+    const sortedElements = [...calculatedElements].sort(sortByDistanceFunction);
+    return sortedElements.map((element) => element.element);
+};

package/dist/elements/helpers/gridStrategy.d.ts

@@ -0,0 +1,29 @@
+import { CanvasDevice, Vem } from "../interfaces";
+interface RecalculateOptions {
+    canvasHeight?: number;
+    sort?: CanvasDevice;
+    allowCopy?: boolean;
+    keepPosition?: boolean;
+}
+/**
+ * Recalculates the positions of elements on a canvas based on the canvas type.
+ * @param newElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param currentElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param canvasType - The type of canvas (e.g., "fixed") that determines how positions are recalculated.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param canvasHeight -  variable for the canvas with header component
+ * @param options
+ * @returns - A list of elements with updated positions if the canvas type is "fixed" or "responsive".
+ */
+export declare function recalculateElements(newElements: Vem[], currentElements: Vem[], canvasWidth: number, canvasType: string, device: CanvasDevice, options?: RecalculateOptions): Vem[];
+/**
+ * The calculation is delegated to a specific strategy based on the `canvasType`.
+ * @param elements - The list of elements in the canvas.
+ * @param canvasType - The type of canvas (e.g., "fixed", "responsive").
+ * @param device - The target device type (e.g., desktop, tablet, mobile).
+ * @param [rowGap] - The optional gap (in pixels) between rows in the canvas.
+ * @returns - The calculated canvas height based on the selected strategy. Returns an empty array if no strategy is found.
+ */
+export declare function calculateCanvasHeight(elements: Vem[], canvasType: string, device: CanvasDevice, rowGap?: number): number;
+export {};

package/dist/elements/helpers/gridStrategy.js

@@ -0,0 +1,78 @@
+import { findFixedAvailablePositions, getFixedGridElementsBottomLimit, recalculatePreservingPositions, sortElementsFromReferencePoint, } from "./fixed";
+import { findResponsiveAvailablePositions, getResponsiveGridElementsBottomLimit, sortResponsiveElements, } from "./responsive";
+import { CanvasDevice, VemPositionType, } from "../interfaces";
+import { copyDesktopPositionToDevice } from "../utils/element";
+const recalculateStrategies = {
+    fixed: (elements, currentElements, canvasWidth, device, options) => {
+        const isSorted = !currentElements.length;
+        const changedElements = (options.allowCopy
+            ? copyDesktopPositionToDevice(elements, device, VemPositionType.FIXED)
+            : elements);
+        // sort elements
+        const orderedElements = isSorted
+            ? sortElementsFromReferencePoint(changedElements, options.sort, {
+                x: 0,
+                y: 0,
+            })
+            : changedElements;
+        return options.canvasHeight
+            ? recalculatePreservingPositions(orderedElements, device, canvasWidth, options.canvasHeight)
+            : findFixedAvailablePositions(canvasWidth, orderedElements, currentElements, device, false, false, options === null || options === void 0 ? void 0 : options.canvasHeight);
+    },
+    responsive: (elements, currentElements, canvasWidth, device, options) => {
+        const isSorted = !currentElements.length;
+        const changedElements = (options.allowCopy
+            ? copyDesktopPositionToDevice(elements, device, VemPositionType.RESPONSIVE)
+            : elements);
+        const orderedElements = isSorted
+            ? sortResponsiveElements(changedElements, options.sort)
+            : changedElements;
+        return findResponsiveAvailablePositions(canvasWidth, orderedElements, currentElements, device);
+    },
+};
+const calculateCanvasHeightStrategies = {
+    fixed: (elements, device) => {
+        return getFixedGridElementsBottomLimit(elements, device);
+    },
+    responsive: (elements, device, rowGap) => {
+        return getResponsiveGridElementsBottomLimit(elements, device, rowGap);
+    },
+};
+/**
+ * Recalculates the positions of elements on a canvas based on the canvas type.
+ * @param newElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param currentElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param canvasType - The type of canvas (e.g., "fixed") that determines how positions are recalculated.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param canvasHeight -  variable for the canvas with header component
+ * @param options
+ * @returns - A list of elements with updated positions if the canvas type is "fixed" or "responsive".
+ */
+export function recalculateElements(newElements, currentElements, canvasWidth, canvasType, device, options) {
+    const strategy = recalculateStrategies[canvasType];
+    if (!strategy) {
+        return [];
+    }
+    const defaultOptions = {
+        sort: CanvasDevice.DESKTOP,
+        allowCopy: true,
+    };
+    const calculatedOptions = Object.assign(Object.assign({}, defaultOptions), options);
+    return strategy(newElements, currentElements, canvasWidth, device, calculatedOptions);
+}
+/**
+ * The calculation is delegated to a specific strategy based on the `canvasType`.
+ * @param elements - The list of elements in the canvas.
+ * @param canvasType - The type of canvas (e.g., "fixed", "responsive").
+ * @param device - The target device type (e.g., desktop, tablet, mobile).
+ * @param [rowGap] - The optional gap (in pixels) between rows in the canvas.
+ * @returns - The calculated canvas height based on the selected strategy. Returns an empty array if no strategy is found.
+ */
+export function calculateCanvasHeight(elements, canvasType, device, rowGap) {
+    const strategy = calculateCanvasHeightStrategies[canvasType];
+    if (!strategy) {
+        return 0;
+    }
+    return strategy(elements, device, rowGap);
+}

package/dist/elements/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./gridStrategy";
+export { updateFixedElementWidth } from "./fixed";
+export { updateResponsiveElementColSpan } from "./responsive";

package/dist/elements/helpers/index.js

@@ -0,0 +1,3 @@
+export * from "./gridStrategy";
+export { updateFixedElementWidth } from "./fixed";
+export { updateResponsiveElementColSpan } from "./responsive";