@qrvey/utils 1.16.0-12 → 1.16.0-13

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

@@ -26,9 +26,10 @@ export declare function recalculateElements(newElements: Vem[], currentElements:
  * @param scopeElements A list of elements to consider in the update strategy
  * @param device The device context (e.g., desktop, tablet, mobile) used to retrieve device-specific properties
  * @param canvasType The type of canvas that determines which strategy to use.
+ * @param gap The type of canvas that determines which strategy to use.
  * @returns  - The updated element with modified dimensions, or `undefined` if no strategy is found.
  */
-export declare function updateElementDimensions(containerItem: Vem, scopeElements: Vem[], device: CanvasDevice, canvasType: string): Vem | undefined;
+export declare function applyDynamicSize(containerItem: Vem, scopeElements: Vem[], device: CanvasDevice, canvasType: string, gap?: number): Vem | undefined;
 /**
  * The calculation is delegated to a specific strategy based on the `canvasType`.
  * @param elements - The list of elements in the canvas.

package/dist/cjs/elements/helpers/gridStrategy.js

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateCanvasHeight = exports.updateElementDimensions = exports.recalculateElements = void 0;
+exports.calculateCanvasHeight = exports.applyDynamicSize = exports.recalculateElements = void 0;
 const fixed_1 = require("./fixed");
 const responsive_1 = require("./responsive");
 const interfaces_1 = require("../interfaces");
 const element_1 = require("../utils/element");
-const updateDimensionStrategies = {
+const applyDynamicSizeStrategies = {
     fixed: (containerItem, scopeElements, device) => {
         return (0, fixed_1.updateFixedElementDimensions)(containerItem, device, scopeElements);
     },
+    responsive: (containerItem, scopeElements, device, gap) => {
+        return (0, responsive_1.updateResponsiveElementDimensions)(containerItem, device, scopeElements, gap);
+    },
 };
 const recalculateStrategies = {
     fixed: (elements, currentElements, canvasWidth, device, options) => {
@@ -79,16 +82,17 @@ exports.recalculateElements = recalculateElements;
  * @param scopeElements A list of elements to consider in the update strategy
  * @param device The device context (e.g., desktop, tablet, mobile) used to retrieve device-specific properties
  * @param canvasType The type of canvas that determines which strategy to use.
+ * @param gap The type of canvas that determines which strategy to use.
  * @returns  - The updated element with modified dimensions, or `undefined` if no strategy is found.
  */
-function updateElementDimensions(containerItem, scopeElements, device, canvasType) {
-    const strategy = updateDimensionStrategies[canvasType];
+function applyDynamicSize(containerItem, scopeElements, device, canvasType, gap = 0) {
+    const strategy = applyDynamicSizeStrategies[canvasType];
     if (!strategy) {
         return;
     }
-    return strategy(containerItem, scopeElements, device);
+    return strategy(containerItem, scopeElements, device, gap);
 }
-exports.updateElementDimensions = updateElementDimensions;
+exports.applyDynamicSize = applyDynamicSize;
 /**
  * The calculation is delegated to a specific strategy based on the `canvasType`.
  * @param elements - The list of elements in the canvas.

package/dist/cjs/elements/helpers/responsive.d.ts

@@ -1,5 +1,5 @@
 import { CanvasDevice } from "../interfaces/ICanvasGrid";
-import { VemResponsive } from "../interfaces/IVemCore";
+import { VemFixed, VemResponsive } from "../interfaces/IVemCore";
 import { VemPositionResponsive } from "../interfaces/IVemPosition";
 /**
  * Finds the first available position for a new responsive element within a canvas.
@@ -85,3 +85,13 @@ export declare const sortByDistanceInResponsiveFunction: (a: {
     element: VemResponsive;
 }, _device: CanvasDevice) => number;
 export declare const sortResponsiveElements: (elements: VemResponsive<unknown>[], sortByDevice?: CanvasDevice) => VemResponsive<unknown>[];
+/**
+ * Updates the height (`rowSpan`) of a fixed container element based on the positions.
+ * of the fixed elements it contains, ensuring it is tall enough to encompass all child elements.
+ * @param containerItem - The container element whose height needs to be updated.
+ * @param device - The target device (used to retrieve responsive dimensions).
+ * @param scopeElements - The list of fixed elements that are scoped to the container.
+ * @param rowGapSize - row gap
+ * @returns A new container element with the updated responsive `rowSpan` height for the given device.
+ */
+export declare const updateResponsiveElementDimensions: (containerItem: VemResponsive<unknown>, device: CanvasDevice, scopeElements: VemFixed<unknown>[], rowGapSize: number) => VemResponsive<unknown>;

package/dist/cjs/elements/helpers/responsive.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortResponsiveElements = exports.sortByDistanceInResponsiveFunction = exports.calculateDistancesToReferencePoint = exports.getResponsiveGridElementsBottomLimit = exports.updateResponsiveElementColSpan = exports.findResponsiveAvailablePositions = exports.updateResponsivePosition = exports.findAvailablePosition = void 0;
+exports.updateResponsiveElementDimensions = exports.sortResponsiveElements = exports.sortByDistanceInResponsiveFunction = exports.calculateDistancesToReferencePoint = exports.getResponsiveGridElementsBottomLimit = exports.updateResponsiveElementColSpan = exports.findResponsiveAvailablePositions = exports.updateResponsivePosition = exports.findAvailablePosition = void 0;
+const general_1 = require("../../general");
 const ICanvasGrid_1 = require("../interfaces/ICanvasGrid");
 const IVemPosition_1 = require("../interfaces/IVemPosition");
+const fixed_position_1 = require("../utils/fixed.position");
 const overlap_1 = require("../utils/overlap");
 const position_1 = require("../utils/position");
 const SPACE_DELTA = 1;
 const HEIGHT_DELTA = 32;
+const CANVAS_EXTRA_ROW = 1;
 /**
  * Finds the first available position for a new responsive element within a canvas.
  * @param canvasWidth - The width of the canvas in terms of columns.
@@ -164,3 +167,26 @@ const sortResponsiveElements = (elements, sortByDevice) => {
     return sortedElements.map((element) => element.element);
 };
 exports.sortResponsiveElements = sortResponsiveElements;
+/**
+ * Updates the height (`rowSpan`) of a fixed container element based on the positions.
+ * of the fixed elements it contains, ensuring it is tall enough to encompass all child elements.
+ * @param containerItem - The container element whose height needs to be updated.
+ * @param device - The target device (used to retrieve responsive dimensions).
+ * @param scopeElements - The list of fixed elements that are scoped to the container.
+ * @param rowGapSize - row gap
+ * @returns A new container element with the updated responsive `rowSpan` height for the given device.
+ */
+const updateResponsiveElementDimensions = (containerItem, device, scopeElements, rowGapSize) => {
+    let currentElement = (0, general_1.objectCopy)(containerItem);
+    const currentHeight = currentElement.position.responsive[device].rowSpan;
+    const delta = HEIGHT_DELTA + rowGapSize;
+    // height in px
+    const calculatedHeight = (0, fixed_position_1.dxGetFixedGridItemsBottomLimit)(scopeElements, device);
+    // convert to rows
+    const transformToRows = Math.round(calculatedHeight / delta);
+    currentElement = updateResponsivePosition(currentElement, {
+        rowSpan: Math.max(currentHeight, transformToRows) + CANVAS_EXTRA_ROW,
+    }, device);
+    return Object.assign({}, currentElement);
+};
+exports.updateResponsiveElementDimensions = updateResponsiveElementDimensions;

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

@@ -26,9 +26,10 @@ export declare function recalculateElements(newElements: Vem[], currentElements:
  * @param scopeElements A list of elements to consider in the update strategy
  * @param device The device context (e.g., desktop, tablet, mobile) used to retrieve device-specific properties
  * @param canvasType The type of canvas that determines which strategy to use.
+ * @param gap The type of canvas that determines which strategy to use.
  * @returns  - The updated element with modified dimensions, or `undefined` if no strategy is found.
  */
-export declare function updateElementDimensions(containerItem: Vem, scopeElements: Vem[], device: CanvasDevice, canvasType: string): Vem | undefined;
+export declare function applyDynamicSize(containerItem: Vem, scopeElements: Vem[], device: CanvasDevice, canvasType: string, gap?: number): Vem | undefined;
 /**
  * The calculation is delegated to a specific strategy based on the `canvasType`.
  * @param elements - The list of elements in the canvas.

package/dist/elements/helpers/gridStrategy.js

@@ -1,11 +1,14 @@
 import { findFixedAvailablePositions, getFixedGridElementsBottomLimit, recalculatePreservingPositions, sortElementsFromReferencePoint, updateFixedElementDimensions, } from "./fixed";
-import { findResponsiveAvailablePositions, getResponsiveGridElementsBottomLimit, sortResponsiveElements, } from "./responsive";
+import { findResponsiveAvailablePositions, getResponsiveGridElementsBottomLimit, sortResponsiveElements, updateResponsiveElementDimensions, } from "./responsive";
 import { CanvasDevice, VemPositionType, } from "../interfaces";
 import { copyDesktopPositionToDevice } from "../utils/element";
-const updateDimensionStrategies = {
+const applyDynamicSizeStrategies = {
     fixed: (containerItem, scopeElements, device) => {
         return updateFixedElementDimensions(containerItem, device, scopeElements);
     },
+    responsive: (containerItem, scopeElements, device, gap) => {
+        return updateResponsiveElementDimensions(containerItem, device, scopeElements, gap);
+    },
 };
 const recalculateStrategies = {
     fixed: (elements, currentElements, canvasWidth, device, options) => {
@@ -75,14 +78,15 @@ export function recalculateElements(newElements, currentElements, canvasWidth, c
  * @param scopeElements A list of elements to consider in the update strategy
  * @param device The device context (e.g., desktop, tablet, mobile) used to retrieve device-specific properties
  * @param canvasType The type of canvas that determines which strategy to use.
+ * @param gap The type of canvas that determines which strategy to use.
  * @returns  - The updated element with modified dimensions, or `undefined` if no strategy is found.
  */
-export function updateElementDimensions(containerItem, scopeElements, device, canvasType) {
-    const strategy = updateDimensionStrategies[canvasType];
+export function applyDynamicSize(containerItem, scopeElements, device, canvasType, gap = 0) {
+    const strategy = applyDynamicSizeStrategies[canvasType];
     if (!strategy) {
         return;
     }
-    return strategy(containerItem, scopeElements, device);
+    return strategy(containerItem, scopeElements, device, gap);
 }
 /**
  * The calculation is delegated to a specific strategy based on the `canvasType`.

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

@@ -1,5 +1,5 @@
 import { CanvasDevice } from "../interfaces/ICanvasGrid";
-import { VemResponsive } from "../interfaces/IVemCore";
+import { VemFixed, VemResponsive } from "../interfaces/IVemCore";
 import { VemPositionResponsive } from "../interfaces/IVemPosition";
 /**
  * Finds the first available position for a new responsive element within a canvas.
@@ -85,3 +85,13 @@ export declare const sortByDistanceInResponsiveFunction: (a: {
     element: VemResponsive;
 }, _device: CanvasDevice) => number;
 export declare const sortResponsiveElements: (elements: VemResponsive<unknown>[], sortByDevice?: CanvasDevice) => VemResponsive<unknown>[];
+/**
+ * Updates the height (`rowSpan`) of a fixed container element based on the positions.
+ * of the fixed elements it contains, ensuring it is tall enough to encompass all child elements.
+ * @param containerItem - The container element whose height needs to be updated.
+ * @param device - The target device (used to retrieve responsive dimensions).
+ * @param scopeElements - The list of fixed elements that are scoped to the container.
+ * @param rowGapSize - row gap
+ * @returns A new container element with the updated responsive `rowSpan` height for the given device.
+ */
+export declare const updateResponsiveElementDimensions: (containerItem: VemResponsive<unknown>, device: CanvasDevice, scopeElements: VemFixed<unknown>[], rowGapSize: number) => VemResponsive<unknown>;

package/dist/elements/helpers/responsive.js

@@ -1,9 +1,12 @@
+import { objectCopy } from "../../general";
 import { CanvasDevice } from "../interfaces/ICanvasGrid";
 import { VemPositionType, } from "../interfaces/IVemPosition";
+import { dxGetFixedGridItemsBottomLimit } from "../utils/fixed.position";
 import { OverlapIntervalTree } from "../utils/overlap";
 import { setElementPosition } from "../utils/position";
 const SPACE_DELTA = 1;
 const HEIGHT_DELTA = 32;
+const CANVAS_EXTRA_ROW = 1;
 /**
  * Finds the first available position for a new responsive element within a canvas.
  * @param canvasWidth - The width of the canvas in terms of columns.
@@ -153,3 +156,25 @@ export const sortResponsiveElements = (elements, sortByDevice) => {
     }).sort((a, b) => sortByDistanceInResponsiveFunction(a, b, sortByDevice));
     return sortedElements.map((element) => element.element);
 };
+/**
+ * Updates the height (`rowSpan`) of a fixed container element based on the positions.
+ * of the fixed elements it contains, ensuring it is tall enough to encompass all child elements.
+ * @param containerItem - The container element whose height needs to be updated.
+ * @param device - The target device (used to retrieve responsive dimensions).
+ * @param scopeElements - The list of fixed elements that are scoped to the container.
+ * @param rowGapSize - row gap
+ * @returns A new container element with the updated responsive `rowSpan` height for the given device.
+ */
+export const updateResponsiveElementDimensions = (containerItem, device, scopeElements, rowGapSize) => {
+    let currentElement = objectCopy(containerItem);
+    const currentHeight = currentElement.position.responsive[device].rowSpan;
+    const delta = HEIGHT_DELTA + rowGapSize;
+    // height in px
+    const calculatedHeight = dxGetFixedGridItemsBottomLimit(scopeElements, device);
+    // convert to rows
+    const transformToRows = Math.round(calculatedHeight / delta);
+    currentElement = updateResponsivePosition(currentElement, {
+        rowSpan: Math.max(currentHeight, transformToRows) + CANVAS_EXTRA_ROW,
+    }, device);
+    return Object.assign({}, currentElement);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrvey/utils",
-  "version": "1.16.0-12",
+  "version": "1.16.0-13",
   "description": "Helper, Utils for all Qrvey Projects",
   "homepage": "https://bitbucket.org/qrvey/qrvey_utils/wiki/Home",
   "main": "dist/index.js",