@qrvey/utils 1.15.0-11 → 1.15.0-13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/elements/helpers/fixed.d.ts +48 -0
- package/dist/cjs/elements/helpers/fixed.js +131 -0
- package/dist/cjs/elements/helpers/gridStrategy.d.ts +19 -0
- package/dist/cjs/elements/helpers/gridStrategy.js +57 -0
- package/dist/cjs/elements/helpers/index.d.ts +1 -0
- package/dist/cjs/elements/helpers/index.js +17 -0
- package/dist/cjs/elements/helpers/responsive.d.ts +41 -0
- package/dist/cjs/elements/helpers/responsive.js +102 -0
- package/dist/cjs/elements/index.d.ts +2 -0
- package/dist/cjs/elements/index.js +18 -0
- package/dist/cjs/elements/interfaces/ICanvasGrid.d.ts +5 -0
- package/dist/cjs/elements/interfaces/ICanvasGrid.js +9 -0
- package/dist/cjs/elements/interfaces/IFixedPosition.d.ts +5 -0
- package/dist/cjs/elements/interfaces/IFixedPosition.js +2 -0
- package/dist/cjs/elements/interfaces/IVemCore.d.ts +29 -0
- package/dist/cjs/elements/interfaces/IVemCore.js +3 -0
- package/dist/cjs/elements/interfaces/IVemPosition.d.ts +44 -0
- package/dist/cjs/elements/interfaces/IVemPosition.js +8 -0
- package/dist/cjs/elements/interfaces/index.d.ts +4 -0
- package/dist/cjs/elements/interfaces/index.js +20 -0
- package/dist/cjs/elements/utils/element.d.ts +4 -0
- package/dist/cjs/elements/utils/element.js +17 -0
- package/dist/cjs/elements/utils/overlap.d.ts +63 -0
- package/dist/cjs/elements/utils/overlap.js +99 -0
- package/dist/cjs/elements/utils/position.d.ts +4 -0
- package/dist/cjs/elements/utils/position.js +5 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +1 -0
- package/dist/elements/helpers/fixed.d.ts +48 -0
- package/dist/elements/helpers/fixed.js +123 -0
- package/dist/elements/helpers/gridStrategy.d.ts +19 -0
- package/dist/elements/helpers/gridStrategy.js +52 -0
- package/dist/elements/helpers/index.d.ts +1 -0
- package/dist/elements/helpers/index.js +1 -0
- package/dist/elements/helpers/responsive.d.ts +41 -0
- package/dist/elements/helpers/responsive.js +94 -0
- package/dist/elements/index.d.ts +2 -0
- package/dist/elements/index.js +2 -0
- package/dist/elements/interfaces/ICanvasGrid.d.ts +5 -0
- package/dist/elements/interfaces/ICanvasGrid.js +6 -0
- package/dist/elements/interfaces/IFixedPosition.d.ts +5 -0
- package/dist/elements/interfaces/IFixedPosition.js +1 -0
- package/dist/elements/interfaces/IVemCore.d.ts +29 -0
- package/dist/elements/interfaces/IVemCore.js +1 -0
- package/dist/elements/interfaces/IVemPosition.d.ts +44 -0
- package/dist/elements/interfaces/IVemPosition.js +5 -0
- package/dist/elements/interfaces/index.d.ts +4 -0
- package/dist/elements/interfaces/index.js +4 -0
- package/dist/elements/utils/element.d.ts +4 -0
- package/dist/elements/utils/element.js +13 -0
- package/dist/elements/utils/overlap.d.ts +63 -0
- package/dist/elements/utils/overlap.js +95 -0
- package/dist/elements/utils/position.d.ts +4 -0
- package/dist/elements/utils/position.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { CanvasDevice } from "../interfaces/ICanvasGrid";
|
|
2
|
+
import { FindAvailablePositionOptions } from "../interfaces/IFixedPosition";
|
|
3
|
+
import { VemFixed } from "../interfaces/IVemCore";
|
|
4
|
+
import { VemPositionFixed } from "../interfaces/IVemPosition";
|
|
5
|
+
/**
|
|
6
|
+
* update the position for a specific device
|
|
7
|
+
* @param element element to be updated
|
|
8
|
+
* @param newDevicePosition new position attributes for the element
|
|
9
|
+
* @param device device for the update
|
|
10
|
+
* @returns new element with its position updated
|
|
11
|
+
*/
|
|
12
|
+
export declare function updateFixedPosition(element: VemFixed, newDevicePosition: Partial<VemPositionFixed>, device: CanvasDevice): VemFixed;
|
|
13
|
+
/**
|
|
14
|
+
* Finds the first available position within a canvas where a new element can be placed without overlapping existing elements.
|
|
15
|
+
* @param canvasWidth - The width of the canvas in pixels.
|
|
16
|
+
* @param newElement - The new element to be placed, with fixed position properties.
|
|
17
|
+
* @param elements - The list of existing elements on the canvas.
|
|
18
|
+
* @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
|
|
19
|
+
* @param [options] - Additional options for position finding.
|
|
20
|
+
* @param [options.canvasHeight] - The maximum height of the canvas in pixels. Defaults to `Infinity`.
|
|
21
|
+
* @param [options.findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
|
|
22
|
+
* @param [options.initialY] - The initial Y-coordinate to start the search. Defaults to `0`.
|
|
23
|
+
* @returns - The x and y coordinates of the first available position.
|
|
24
|
+
* @throws {Error} - Throws an error if no valid position is found and `canvasHeight` is not specified.
|
|
25
|
+
*/
|
|
26
|
+
export declare function findAvailablePosition(canvasWidth: number, newElement: VemFixed, elements: VemFixed[], device: CanvasDevice, options?: FindAvailablePositionOptions): {
|
|
27
|
+
x: number;
|
|
28
|
+
y: number;
|
|
29
|
+
};
|
|
30
|
+
export declare const getFixedPositionByDevice: (item: VemFixed, device: CanvasDevice) => VemPositionFixed | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* Finds available positions for multiple new elements within a canvas, ensuring they do not overlap with existing elements.
|
|
33
|
+
* @param canvasWidth - The width of the canvas in pixels.
|
|
34
|
+
* @param newElements - The list of new elements to be positioned, each with fixed position properties.
|
|
35
|
+
* @param elements - The list of existing elements on the canvas.
|
|
36
|
+
* @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
|
|
37
|
+
* @param [startWithPositionY] - Whether to start the position search for each new element based on its initial Y-coordinate. Defaults to `false`.
|
|
38
|
+
* @param [findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
|
|
39
|
+
* @param [canvasHeight] - The maximum height of the canvas in pixels. If not provided, the search height is unlimited.
|
|
40
|
+
* @returns
|
|
41
|
+
*/
|
|
42
|
+
export declare function findFixedAvailablePositions(canvasWidth: number, newElements: VemFixed[], elements: VemFixed[], device: CanvasDevice, startWithPositionY?: boolean, findRightToLeft?: boolean, canvasHeight?: number): VemFixed[];
|
|
43
|
+
/**
|
|
44
|
+
* @param elements elements to calculate
|
|
45
|
+
* @param device current device
|
|
46
|
+
* @returns height
|
|
47
|
+
*/
|
|
48
|
+
export declare const getFixedGridElementsBottomLimit: (elements: VemFixed[], device: CanvasDevice) => number;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getFixedGridElementsBottomLimit = exports.findFixedAvailablePositions = exports.getFixedPositionByDevice = exports.findAvailablePosition = exports.updateFixedPosition = void 0;
|
|
4
|
+
const overlap_1 = require("../utils/overlap");
|
|
5
|
+
const SPACE_DELTA = 10;
|
|
6
|
+
/**
|
|
7
|
+
* update the position for a specific device
|
|
8
|
+
* @param element element to be updated
|
|
9
|
+
* @param newDevicePosition new position attributes for the element
|
|
10
|
+
* @param device device for the update
|
|
11
|
+
* @returns new element with its position updated
|
|
12
|
+
*/
|
|
13
|
+
function updateFixedPosition(element, newDevicePosition, device) {
|
|
14
|
+
var _a;
|
|
15
|
+
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) }) }) });
|
|
16
|
+
}
|
|
17
|
+
exports.updateFixedPosition = updateFixedPosition;
|
|
18
|
+
/**
|
|
19
|
+
* Finds the first available position within a canvas where a new element can be placed without overlapping existing elements.
|
|
20
|
+
* @param canvasWidth - The width of the canvas in pixels.
|
|
21
|
+
* @param newElement - The new element to be placed, with fixed position properties.
|
|
22
|
+
* @param elements - The list of existing elements on the canvas.
|
|
23
|
+
* @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
|
|
24
|
+
* @param [options] - Additional options for position finding.
|
|
25
|
+
* @param [options.canvasHeight] - The maximum height of the canvas in pixels. Defaults to `Infinity`.
|
|
26
|
+
* @param [options.findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
|
|
27
|
+
* @param [options.initialY] - The initial Y-coordinate to start the search. Defaults to `0`.
|
|
28
|
+
* @returns - The x and y coordinates of the first available position.
|
|
29
|
+
* @throws {Error} - Throws an error if no valid position is found and `canvasHeight` is not specified.
|
|
30
|
+
*/
|
|
31
|
+
function findAvailablePosition(canvasWidth, newElement, elements, device, options = {}) {
|
|
32
|
+
var _a, _b;
|
|
33
|
+
const { width: newWidth, height: newHeight } = (0, exports.getFixedPositionByDevice)(newElement, device);
|
|
34
|
+
const canvasHeight = (_a = options.canvasHeight) !== null && _a !== void 0 ? _a : Infinity;
|
|
35
|
+
const sortedElements = options.findRightToLeft
|
|
36
|
+
? elements
|
|
37
|
+
.slice()
|
|
38
|
+
.sort((b, a) => b.position.fixed[device].x - a.position.fixed[device].x)
|
|
39
|
+
: elements
|
|
40
|
+
.slice()
|
|
41
|
+
.sort((a, b) => a.position.fixed[device].y - b.position.fixed[device].y);
|
|
42
|
+
const intervalTree = new overlap_1.OverlapIntervalTree();
|
|
43
|
+
for (const element of sortedElements) {
|
|
44
|
+
const elemPosition = element.position.fixed[device];
|
|
45
|
+
intervalTree.insert(elemPosition.x, elemPosition.x + elemPosition.width, elemPosition.y, elemPosition.y + elemPosition.height);
|
|
46
|
+
}
|
|
47
|
+
let startX = options.findRightToLeft ? canvasWidth - newWidth : 0;
|
|
48
|
+
const initialY = (_b = options.initialY) !== null && _b !== void 0 ? _b : 0;
|
|
49
|
+
let increment = options.findRightToLeft ? -SPACE_DELTA : SPACE_DELTA;
|
|
50
|
+
for (let y = initialY; y <= canvasHeight - newHeight; y += SPACE_DELTA) {
|
|
51
|
+
let x = startX;
|
|
52
|
+
while (x >= 0 && x <= canvasWidth - newWidth) {
|
|
53
|
+
if (!intervalTree.overlaps(x, x + newWidth, y, y + newHeight)) {
|
|
54
|
+
return { x, y };
|
|
55
|
+
}
|
|
56
|
+
x += increment;
|
|
57
|
+
}
|
|
58
|
+
if (options.findRightToLeft) {
|
|
59
|
+
startX = 0;
|
|
60
|
+
increment = SPACE_DELTA;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if (options.canvasHeight)
|
|
64
|
+
return { x: 0, y: 0 };
|
|
65
|
+
throw new Error("No valid position found");
|
|
66
|
+
}
|
|
67
|
+
exports.findAvailablePosition = findAvailablePosition;
|
|
68
|
+
const getFixedPositionByDevice = (item, device) => {
|
|
69
|
+
const fixedPosition = item.position.fixed;
|
|
70
|
+
const devicePosition = fixedPosition[device];
|
|
71
|
+
return isValidPosition(devicePosition) ? devicePosition : undefined;
|
|
72
|
+
};
|
|
73
|
+
exports.getFixedPositionByDevice = getFixedPositionByDevice;
|
|
74
|
+
const isValidPosition = (position) => {
|
|
75
|
+
return ((position === null || position === void 0 ? void 0 : position.y) !== undefined &&
|
|
76
|
+
position.x !== undefined &&
|
|
77
|
+
position.z !== undefined &&
|
|
78
|
+
position.height !== undefined &&
|
|
79
|
+
position.width !== undefined);
|
|
80
|
+
};
|
|
81
|
+
/**
|
|
82
|
+
* Finds available positions for multiple new elements within a canvas, ensuring they do not overlap with existing elements.
|
|
83
|
+
* @param canvasWidth - The width of the canvas in pixels.
|
|
84
|
+
* @param newElements - The list of new elements to be positioned, each with fixed position properties.
|
|
85
|
+
* @param elements - The list of existing elements on the canvas.
|
|
86
|
+
* @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
|
|
87
|
+
* @param [startWithPositionY] - Whether to start the position search for each new element based on its initial Y-coordinate. Defaults to `false`.
|
|
88
|
+
* @param [findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
|
|
89
|
+
* @param [canvasHeight] - The maximum height of the canvas in pixels. If not provided, the search height is unlimited.
|
|
90
|
+
* @returns
|
|
91
|
+
*/
|
|
92
|
+
function findFixedAvailablePositions(canvasWidth, newElements, elements, device, startWithPositionY = false, findRightToLeft = false, canvasHeight) {
|
|
93
|
+
const processedElements = elements.slice();
|
|
94
|
+
const resultElems = [];
|
|
95
|
+
newElements.forEach((nElement) => {
|
|
96
|
+
const initialY = startWithPositionY
|
|
97
|
+
? nElement.position.fixed[device].y
|
|
98
|
+
: 0;
|
|
99
|
+
const availablePosition = findAvailablePosition(canvasWidth, nElement, processedElements, device, { initialY, findRightToLeft, canvasHeight });
|
|
100
|
+
const newElemWithPosition = updateFixedPosition(nElement, availablePosition, device);
|
|
101
|
+
resultElems.push(newElemWithPosition);
|
|
102
|
+
processedElements.push(newElemWithPosition);
|
|
103
|
+
});
|
|
104
|
+
return resultElems;
|
|
105
|
+
}
|
|
106
|
+
exports.findFixedAvailablePositions = findFixedAvailablePositions;
|
|
107
|
+
const getFixedGridElementY = (element, device, allowNegative = false) => {
|
|
108
|
+
var _a;
|
|
109
|
+
const position = element.position.fixed[device];
|
|
110
|
+
const itemY = (_a = position === null || position === void 0 ? void 0 : position.y) !== null && _a !== void 0 ? _a : 0;
|
|
111
|
+
if (!allowNegative) {
|
|
112
|
+
return itemY >= 0 ? itemY : 0;
|
|
113
|
+
}
|
|
114
|
+
return itemY;
|
|
115
|
+
};
|
|
116
|
+
const getFixedGridElementHeight = (element, device) => {
|
|
117
|
+
const position = element.position.fixed[device];
|
|
118
|
+
return position === null || position === void 0 ? void 0 : position.height;
|
|
119
|
+
};
|
|
120
|
+
/**
|
|
121
|
+
* @param elements elements to calculate
|
|
122
|
+
* @param device current device
|
|
123
|
+
* @returns height
|
|
124
|
+
*/
|
|
125
|
+
const getFixedGridElementsBottomLimit = (elements, device) => {
|
|
126
|
+
if (!elements.length)
|
|
127
|
+
return 0;
|
|
128
|
+
return Math.max(...elements.map((element) => getFixedGridElementY(element, device) +
|
|
129
|
+
getFixedGridElementHeight(element, device)));
|
|
130
|
+
};
|
|
131
|
+
exports.getFixedGridElementsBottomLimit = getFixedGridElementsBottomLimit;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CanvasDevice, Vem } from "../interfaces";
|
|
2
|
+
/**
|
|
3
|
+
* Recalculates the positions of elements on a canvas based on the canvas type.
|
|
4
|
+
* @param elements - The list of elements to be recalculated. Each element has properties based on its type.
|
|
5
|
+
* @param canvasWidth - The width of the canvas in pixels.
|
|
6
|
+
* @param canvasType - The type of canvas (e.g., "fixed") that determines how positions are recalculated.
|
|
7
|
+
* @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
|
|
8
|
+
* @returns - A list of elements with updated positions if the canvas type is "fixed" or "responsive".
|
|
9
|
+
*/
|
|
10
|
+
export declare function recalculateElements(elements: Vem[], canvasWidth: number, canvasType: string, device: CanvasDevice): Vem[];
|
|
11
|
+
/**
|
|
12
|
+
* The calculation is delegated to a specific strategy based on the `canvasType`.
|
|
13
|
+
* @param elements - The list of elements in the canvas.
|
|
14
|
+
* @param canvasType - The type of canvas (e.g., "fixed", "responsive").
|
|
15
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile).
|
|
16
|
+
* @param [rowGap] - The optional gap (in pixels) between rows in the canvas.
|
|
17
|
+
* @returns - The calculated canvas height based on the selected strategy. Returns an empty array if no strategy is found.
|
|
18
|
+
*/
|
|
19
|
+
export declare function calculateCanvasHeight(elements: Vem[], canvasType: string, device: CanvasDevice, rowGap?: number): number;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.calculateCanvasHeight = exports.recalculateElements = void 0;
|
|
4
|
+
const fixed_1 = require("./fixed");
|
|
5
|
+
const responsive_1 = require("./responsive");
|
|
6
|
+
const interfaces_1 = require("../interfaces");
|
|
7
|
+
const element_1 = require("../utils/element");
|
|
8
|
+
const recalculateStrategies = {
|
|
9
|
+
fixed: (elements, canvasWidth, device) => {
|
|
10
|
+
const changedElements = (0, element_1.copyDesktopPositionToDevice)(elements, device, interfaces_1.VemPositionType.FIXED);
|
|
11
|
+
return (0, fixed_1.findFixedAvailablePositions)(canvasWidth, changedElements, [], device);
|
|
12
|
+
},
|
|
13
|
+
responsive: (elements, canvasWidth, device) => {
|
|
14
|
+
const changedElements = (0, element_1.copyDesktopPositionToDevice)(elements, device, interfaces_1.VemPositionType.RESPONSIVE);
|
|
15
|
+
return (0, responsive_1.findResponsiveAvailablePositions)(canvasWidth, changedElements, [], device);
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
const calculateCanvasHeightStrategies = {
|
|
19
|
+
fixed: (elements, device) => {
|
|
20
|
+
return (0, fixed_1.getFixedGridElementsBottomLimit)(elements, device);
|
|
21
|
+
},
|
|
22
|
+
responsive: (elements, device, rowGap) => {
|
|
23
|
+
return (0, responsive_1.getResponsiveGridElementsBottomLimit)(elements, device, rowGap);
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Recalculates the positions of elements on a canvas based on the canvas type.
|
|
28
|
+
* @param elements - The list of elements to be recalculated. Each element has properties based on its type.
|
|
29
|
+
* @param canvasWidth - The width of the canvas in pixels.
|
|
30
|
+
* @param canvasType - The type of canvas (e.g., "fixed") that determines how positions are recalculated.
|
|
31
|
+
* @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
|
|
32
|
+
* @returns - A list of elements with updated positions if the canvas type is "fixed" or "responsive".
|
|
33
|
+
*/
|
|
34
|
+
function recalculateElements(elements, canvasWidth, canvasType, device) {
|
|
35
|
+
const strategy = recalculateStrategies[canvasType];
|
|
36
|
+
if (!strategy) {
|
|
37
|
+
return [];
|
|
38
|
+
}
|
|
39
|
+
return strategy(elements, canvasWidth, device);
|
|
40
|
+
}
|
|
41
|
+
exports.recalculateElements = recalculateElements;
|
|
42
|
+
/**
|
|
43
|
+
* The calculation is delegated to a specific strategy based on the `canvasType`.
|
|
44
|
+
* @param elements - The list of elements in the canvas.
|
|
45
|
+
* @param canvasType - The type of canvas (e.g., "fixed", "responsive").
|
|
46
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile).
|
|
47
|
+
* @param [rowGap] - The optional gap (in pixels) between rows in the canvas.
|
|
48
|
+
* @returns - The calculated canvas height based on the selected strategy. Returns an empty array if no strategy is found.
|
|
49
|
+
*/
|
|
50
|
+
function calculateCanvasHeight(elements, canvasType, device, rowGap) {
|
|
51
|
+
const strategy = calculateCanvasHeightStrategies[canvasType];
|
|
52
|
+
if (!strategy) {
|
|
53
|
+
return 0;
|
|
54
|
+
}
|
|
55
|
+
return strategy(elements, device, rowGap);
|
|
56
|
+
}
|
|
57
|
+
exports.calculateCanvasHeight = calculateCanvasHeight;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./gridStrategy";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./gridStrategy"), exports);
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { CanvasDevice } from "../interfaces/ICanvasGrid";
|
|
2
|
+
import { VemResponsive } from "../interfaces/IVemCore";
|
|
3
|
+
import { VemPositionResponsive } from "../interfaces/IVemPosition";
|
|
4
|
+
/**
|
|
5
|
+
* Finds the first available position for a new responsive element within a canvas.
|
|
6
|
+
* @param canvasWidth - The width of the canvas in terms of columns.
|
|
7
|
+
* @param newElement - The new responsive element to place on the canvas.
|
|
8
|
+
* @param elements - The existing elements on the canvas.
|
|
9
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile) to calculate responsive positions.
|
|
10
|
+
* @returns - The column and row start positions for the new element, or `undefined` if no valid position is found.
|
|
11
|
+
*/
|
|
12
|
+
export declare function findAvailablePosition(canvasWidth: number, newElement: VemResponsive, elements: VemResponsive[], device: CanvasDevice): {
|
|
13
|
+
colStart: number;
|
|
14
|
+
rowStart: number;
|
|
15
|
+
} | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* Updates the responsive position of a given element for a specified device.
|
|
18
|
+
* @param element - The responsive element to update.
|
|
19
|
+
* @param newPosition - The new position values to update for the element.
|
|
20
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile) for which the position is updated.
|
|
21
|
+
* @returns - A new `VemResponsive` object with the updated responsive position for the specified device.
|
|
22
|
+
*/
|
|
23
|
+
export declare function updateResponsivePosition(element: VemResponsive, newPosition: Partial<VemPositionResponsive>, device: CanvasDevice): VemResponsive;
|
|
24
|
+
/**
|
|
25
|
+
* Finds available positions for a list of responsive elements on a canvas and updates their positions.
|
|
26
|
+
* @param canvasWidth - The width of the canvas in grid columns.
|
|
27
|
+
* @param newElements - The list of new responsive elements to position.
|
|
28
|
+
* @param elements - The list of existing responsive elements already positioned on the canvas.
|
|
29
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile) for which positions are calculated.
|
|
30
|
+
* @returns - A list of responsive elements with updated positions for the specified device.
|
|
31
|
+
*/
|
|
32
|
+
export declare function findResponsiveAvailablePositions(canvasWidth: number, newElements: VemResponsive[], elements: VemResponsive[], device: CanvasDevice): VemResponsive[];
|
|
33
|
+
/**
|
|
34
|
+
* Adjusts the `colSpan` of a responsive element to fit within the specified canvas width and updates its position.
|
|
35
|
+
* @param element - The responsive element to adjust.
|
|
36
|
+
* @param canvasWidth - The width of the canvas in grid columns.
|
|
37
|
+
* @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
|
|
38
|
+
* @returns - The updated responsive element with an adjusted `colSpan`.
|
|
39
|
+
*/
|
|
40
|
+
export declare function calculateColSpan(element: VemResponsive, canvasWidth: number, canvasDevice: CanvasDevice): VemResponsive;
|
|
41
|
+
export declare const getResponsiveGridElementsBottomLimit: (elements: VemResponsive[], device: CanvasDevice, rowGap: number) => number;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getResponsiveGridElementsBottomLimit = exports.calculateColSpan = exports.findResponsiveAvailablePositions = exports.updateResponsivePosition = exports.findAvailablePosition = void 0;
|
|
4
|
+
const IVemPosition_1 = require("../interfaces/IVemPosition");
|
|
5
|
+
const overlap_1 = require("../utils/overlap");
|
|
6
|
+
const position_1 = require("../utils/position");
|
|
7
|
+
const SPACE_DELTA = 1;
|
|
8
|
+
const HEIGHT_DELTA = 32;
|
|
9
|
+
/**
|
|
10
|
+
* Finds the first available position for a new responsive element within a canvas.
|
|
11
|
+
* @param canvasWidth - The width of the canvas in terms of columns.
|
|
12
|
+
* @param newElement - The new responsive element to place on the canvas.
|
|
13
|
+
* @param elements - The existing elements on the canvas.
|
|
14
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile) to calculate responsive positions.
|
|
15
|
+
* @returns - The column and row start positions for the new element, or `undefined` if no valid position is found.
|
|
16
|
+
*/
|
|
17
|
+
function findAvailablePosition(canvasWidth, newElement, elements, device) {
|
|
18
|
+
const { colSpan: newWidth, rowSpan: newHeight } = newElement.position.responsive[device];
|
|
19
|
+
const sortedElements = elements
|
|
20
|
+
.slice()
|
|
21
|
+
.sort((a, b) => a.position.responsive[device].rowStart -
|
|
22
|
+
b.position.responsive[device].rowStart);
|
|
23
|
+
const intervalTree = new overlap_1.OverlapIntervalTree();
|
|
24
|
+
for (const element of sortedElements) {
|
|
25
|
+
const elemPosition = element.position.responsive[device];
|
|
26
|
+
const colEnd = elemPosition.colStart + (elemPosition.colSpan - 1);
|
|
27
|
+
const rowEnd = elemPosition.rowStart + elemPosition.rowSpan - 1;
|
|
28
|
+
if (!intervalTree.overlaps(elemPosition.colStart, colEnd, elemPosition.rowStart, rowEnd)) {
|
|
29
|
+
intervalTree.insert(elemPosition.colStart, colEnd, elemPosition.rowStart, rowEnd);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
for (let rowStart = 1; rowStart <= Infinity - newHeight; rowStart += SPACE_DELTA) {
|
|
33
|
+
// height iteration will be until it finds a result
|
|
34
|
+
for (let colStart = 1; colStart <= canvasWidth - newWidth + 1; colStart += SPACE_DELTA) {
|
|
35
|
+
if (!intervalTree.overlaps(colStart, colStart + newWidth - 1, rowStart, rowStart + newHeight - 1)) {
|
|
36
|
+
const col = colStart === 0 ? 1 : colStart;
|
|
37
|
+
const row = rowStart === 0 ? 1 : rowStart;
|
|
38
|
+
return { colStart: col, rowStart: row };
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return undefined;
|
|
43
|
+
}
|
|
44
|
+
exports.findAvailablePosition = findAvailablePosition;
|
|
45
|
+
/**
|
|
46
|
+
* Updates the responsive position of a given element for a specified device.
|
|
47
|
+
* @param element - The responsive element to update.
|
|
48
|
+
* @param newPosition - The new position values to update for the element.
|
|
49
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile) for which the position is updated.
|
|
50
|
+
* @returns - A new `VemResponsive` object with the updated responsive position for the specified device.
|
|
51
|
+
*/
|
|
52
|
+
function updateResponsivePosition(element, newPosition, device) {
|
|
53
|
+
var _a;
|
|
54
|
+
return Object.assign(Object.assign({}, element), { position: Object.assign(Object.assign({}, element.position), { responsive: Object.assign(Object.assign({}, element.position.responsive), { [device]: Object.assign(Object.assign({}, (_a = element.position.responsive) === null || _a === void 0 ? void 0 : _a[device]), newPosition) }) }) });
|
|
55
|
+
}
|
|
56
|
+
exports.updateResponsivePosition = updateResponsivePosition;
|
|
57
|
+
/**
|
|
58
|
+
* Finds available positions for a list of responsive elements on a canvas and updates their positions.
|
|
59
|
+
* @param canvasWidth - The width of the canvas in grid columns.
|
|
60
|
+
* @param newElements - The list of new responsive elements to position.
|
|
61
|
+
* @param elements - The list of existing responsive elements already positioned on the canvas.
|
|
62
|
+
* @param device - The target device type (e.g., desktop, tablet, mobile) for which positions are calculated.
|
|
63
|
+
* @returns - A list of responsive elements with updated positions for the specified device.
|
|
64
|
+
*/
|
|
65
|
+
function findResponsiveAvailablePositions(canvasWidth, newElements, elements, device) {
|
|
66
|
+
const processedElements = elements.slice();
|
|
67
|
+
const resultElems = [];
|
|
68
|
+
newElements.forEach((nElement) => {
|
|
69
|
+
const newElement = calculateColSpan(nElement, canvasWidth, device);
|
|
70
|
+
const availablePosition = findAvailablePosition(canvasWidth, newElement, processedElements, device);
|
|
71
|
+
const newElemWithPosition = updateResponsivePosition(newElement, availablePosition, device);
|
|
72
|
+
resultElems.push(newElemWithPosition);
|
|
73
|
+
processedElements.push(newElemWithPosition);
|
|
74
|
+
});
|
|
75
|
+
return resultElems;
|
|
76
|
+
}
|
|
77
|
+
exports.findResponsiveAvailablePositions = findResponsiveAvailablePositions;
|
|
78
|
+
/**
|
|
79
|
+
* Adjusts the `colSpan` of a responsive element to fit within the specified canvas width and updates its position.
|
|
80
|
+
* @param element - The responsive element to adjust.
|
|
81
|
+
* @param canvasWidth - The width of the canvas in grid columns.
|
|
82
|
+
* @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
|
|
83
|
+
* @returns - The updated responsive element with an adjusted `colSpan`.
|
|
84
|
+
*/
|
|
85
|
+
function calculateColSpan(element, canvasWidth, canvasDevice) {
|
|
86
|
+
const currentPosition = element.position.responsive[canvasDevice];
|
|
87
|
+
const fixedColSpan = Math.min(currentPosition.colSpan, canvasWidth);
|
|
88
|
+
const position = Object.assign(Object.assign({}, currentPosition), { colSpan: fixedColSpan });
|
|
89
|
+
return (0, position_1.setElementPosition)(element, IVemPosition_1.VemPositionType.RESPONSIVE, canvasDevice, position);
|
|
90
|
+
}
|
|
91
|
+
exports.calculateColSpan = calculateColSpan;
|
|
92
|
+
const getResponsiveGridElementsBottomLimit = (elements, device, rowGap) => {
|
|
93
|
+
if (!elements.length)
|
|
94
|
+
return 0;
|
|
95
|
+
const mappedElements = elements.map((element) => {
|
|
96
|
+
const elementPosition = element.position.responsive;
|
|
97
|
+
const maxRows = elementPosition[device].rowStart + elementPosition[device].rowSpan;
|
|
98
|
+
return maxRows * HEIGHT_DELTA + (maxRows - 1) * rowGap;
|
|
99
|
+
});
|
|
100
|
+
return Math.max(...mappedElements);
|
|
101
|
+
};
|
|
102
|
+
exports.getResponsiveGridElementsBottomLimit = getResponsiveGridElementsBottomLimit;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./helpers/index"), exports);
|
|
18
|
+
__exportStar(require("./interfaces/index"), exports);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CanvasDevice = void 0;
|
|
4
|
+
var CanvasDevice;
|
|
5
|
+
(function (CanvasDevice) {
|
|
6
|
+
CanvasDevice["DESKTOP"] = "desktop";
|
|
7
|
+
CanvasDevice["TABLET"] = "tablet";
|
|
8
|
+
CanvasDevice["MOBILE"] = "mobile";
|
|
9
|
+
})(CanvasDevice || (exports.CanvasDevice = CanvasDevice = {}));
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { VemPositionConfigFixed, VemPositionConfigMap, VemPositionConfigResponsive, VemPositionType } from "./IVemPosition";
|
|
2
|
+
interface VemBase {
|
|
3
|
+
elementId: string;
|
|
4
|
+
type: string;
|
|
5
|
+
contentId?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface VemCorePosition {
|
|
8
|
+
fixed?: VemPositionConfigFixed;
|
|
9
|
+
responsive?: VemPositionConfigResponsive;
|
|
10
|
+
}
|
|
11
|
+
interface VemCore<TPosition extends VemPositionType | unknown, TItemData = unknown> extends VemBase {
|
|
12
|
+
itemData: TItemData;
|
|
13
|
+
/** Indicates if its a personalized Vem */
|
|
14
|
+
isEup?: boolean;
|
|
15
|
+
/** Data to be saved in the client chart when it's saved by EUP (Only applies for VemAnalytics) */
|
|
16
|
+
chartBody?: unknown;
|
|
17
|
+
/** Dashboard Actions in the element */
|
|
18
|
+
actions?: unknown[];
|
|
19
|
+
position: TPosition extends VemPositionType ? VemCorePosition & Record<TPosition, VemPositionConfigMap[TPosition]> : VemCorePosition;
|
|
20
|
+
}
|
|
21
|
+
export type Vem<T = unknown, TPosition extends VemPositionType = VemPositionType> = VemCore<TPosition, T>;
|
|
22
|
+
export type VemPos<TPosition extends VemPositionType> = VemCore<TPosition>;
|
|
23
|
+
export type VemResponsive<T = unknown> = VemCore<VemPositionType.RESPONSIVE, T>;
|
|
24
|
+
export type VemFixed<T = unknown> = VemCore<VemPositionType.FIXED, T>;
|
|
25
|
+
export interface VemElementMap<T = unknown> {
|
|
26
|
+
[VemPositionType.FIXED]: VemFixed<T>;
|
|
27
|
+
[VemPositionType.RESPONSIVE]: VemResponsive<T>;
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export interface VemSizeFixed {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
}
|
|
5
|
+
export interface VemSizeResponsive {
|
|
6
|
+
colSpan: number;
|
|
7
|
+
rowSpan: number;
|
|
8
|
+
}
|
|
9
|
+
export interface VemPositionFixed extends VemSizeFixed {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
z: number;
|
|
13
|
+
}
|
|
14
|
+
export interface VemPositionResponsive extends VemSizeResponsive {
|
|
15
|
+
colStart: number;
|
|
16
|
+
rowStart: number;
|
|
17
|
+
}
|
|
18
|
+
export type VemPosition = VemPositionFixed | VemPositionResponsive;
|
|
19
|
+
export interface VemPositionMap {
|
|
20
|
+
[VemPositionType.FIXED]: VemPositionFixed;
|
|
21
|
+
[VemPositionType.RESPONSIVE]: VemPositionResponsive;
|
|
22
|
+
}
|
|
23
|
+
export declare enum VemPositionType {
|
|
24
|
+
FIXED = "fixed",
|
|
25
|
+
RESPONSIVE = "responsive"
|
|
26
|
+
}
|
|
27
|
+
interface VemPositionBase<TPosition extends VemPosition> {
|
|
28
|
+
desktop: TPosition;
|
|
29
|
+
tablet?: TPosition;
|
|
30
|
+
mobile?: TPosition;
|
|
31
|
+
}
|
|
32
|
+
export type VemPositionConfigFixed = VemPositionBase<VemPositionFixed>;
|
|
33
|
+
export type VemPositionConfigResponsive = VemPositionBase<VemPositionResponsive>;
|
|
34
|
+
export type VemPositionConfig = VemPositionConfigFixed | VemPositionConfigResponsive;
|
|
35
|
+
export interface VemPositionConfigMap {
|
|
36
|
+
[VemPositionType.FIXED]: VemPositionConfigFixed;
|
|
37
|
+
[VemPositionType.RESPONSIVE]: VemPositionConfigResponsive;
|
|
38
|
+
}
|
|
39
|
+
export type VemSize = VemSizeFixed | VemSizeResponsive;
|
|
40
|
+
export interface VemSizeConfig {
|
|
41
|
+
[VemPositionType.FIXED]: VemSizeFixed;
|
|
42
|
+
[VemPositionType.RESPONSIVE]: VemSizeResponsive;
|
|
43
|
+
}
|
|
44
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.VemPositionType = void 0;
|
|
4
|
+
var VemPositionType;
|
|
5
|
+
(function (VemPositionType) {
|
|
6
|
+
VemPositionType["FIXED"] = "fixed";
|
|
7
|
+
VemPositionType["RESPONSIVE"] = "responsive";
|
|
8
|
+
})(VemPositionType || (exports.VemPositionType = VemPositionType = {}));
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./ICanvasGrid"), exports);
|
|
18
|
+
__exportStar(require("./IFixedPosition"), exports);
|
|
19
|
+
__exportStar(require("./IVemCore"), exports);
|
|
20
|
+
__exportStar(require("./IVemPosition"), exports);
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { CanvasDevice } from "../interfaces/ICanvasGrid";
|
|
2
|
+
import { Vem } from "../interfaces/IVemCore";
|
|
3
|
+
import { VemPositionType } from "../interfaces/IVemPosition";
|
|
4
|
+
export declare const copyDesktopPositionToDevice: (elements: Vem[], newCanvasDevice: CanvasDevice, canvasType: VemPositionType) => Vem[];
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.copyDesktopPositionToDevice = void 0;
|
|
4
|
+
const position_1 = require("./position");
|
|
5
|
+
const ICanvasGrid_1 = require("../interfaces/ICanvasGrid");
|
|
6
|
+
const copyDesktopPositionToDevice = (elements, newCanvasDevice, canvasType) => {
|
|
7
|
+
return elements.map((element) => {
|
|
8
|
+
var _a;
|
|
9
|
+
if (!((_a = element.position[canvasType]) === null || _a === void 0 ? void 0 : _a[newCanvasDevice])) {
|
|
10
|
+
const desktopViewPosition = element.position[canvasType][ICanvasGrid_1.CanvasDevice.DESKTOP];
|
|
11
|
+
const newDevicePosition = Object.assign(Object.assign({}, desktopViewPosition), { x: 0, y: 0 });
|
|
12
|
+
return (0, position_1.setElementPosition)(element, canvasType, newCanvasDevice, newDevicePosition);
|
|
13
|
+
}
|
|
14
|
+
return element;
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
exports.copyDesktopPositionToDevice = copyDesktopPositionToDevice;
|