@qrvey/utils 1.17.0 → 1.17.2
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/README.md +1 -1
- package/dist/cjs/elements/helpers/fixed.js +10 -1
- package/dist/cjs/elements/helpers/gridStrategy.js +23 -9
- package/dist/cjs/elements/helpers/responsive.js +10 -1
- package/dist/cjs/elements/helpers/vem-element/constants/vem.constants.js +33 -0
- package/dist/cjs/elements/helpers/vem-element/definitions/main.definitions.js +263 -0
- package/dist/cjs/elements/helpers/vem-element/helpers/vem.helpers.js +76 -0
- package/dist/cjs/elements/helpers/vem-element/models/vem.models.js +3 -0
- package/dist/cjs/elements/interfaces/IVemCore.js +12 -0
- package/dist/cjs/elements/utils/element.js +23 -2
- package/dist/cjs/filters/services/UChartApi.js +2 -2
- package/dist/cjs/filters/services/UChartPaginationApi.js +2 -2
- package/dist/elements/helpers/fixed.d.ts +3 -2
- package/dist/elements/helpers/fixed.js +9 -1
- package/dist/elements/helpers/gridStrategy.d.ts +8 -1
- package/dist/elements/helpers/gridStrategy.js +24 -12
- package/dist/elements/helpers/responsive.d.ts +3 -2
- package/dist/elements/helpers/responsive.js +9 -1
- package/dist/elements/helpers/vem-element/constants/vem.constants.d.ts +24 -0
- package/dist/elements/helpers/vem-element/constants/vem.constants.js +30 -0
- package/dist/elements/helpers/vem-element/definitions/main.definitions.d.ts +9 -0
- package/dist/elements/helpers/vem-element/definitions/main.definitions.js +260 -0
- package/dist/elements/helpers/vem-element/helpers/vem.helpers.d.ts +8 -0
- package/dist/elements/helpers/vem-element/helpers/vem.helpers.js +70 -0
- package/dist/elements/helpers/vem-element/models/vem.models.d.ts +85 -0
- package/dist/elements/helpers/vem-element/models/vem.models.js +1 -0
- package/dist/elements/interfaces/ICanvasGrid.d.ts +24 -0
- package/dist/elements/interfaces/IVemCore.d.ts +14 -0
- package/dist/elements/interfaces/IVemCore.js +11 -0
- package/dist/elements/utils/element.d.ts +5 -1
- package/dist/elements/utils/element.js +21 -1
- package/dist/filters/services/UChartApi.js +2 -2
- package/dist/filters/services/UChartPaginationApi.js +2 -2
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.updateFixedElementDimensions = exports.sortElementsFromReferencePoint = exports.calculateDistancesToReferencePoint = exports.getFixedGridElementsBottomLimit = exports.recalculatePreservingPositions = exports.getFixedPositionByDevice = exports.CANVAS_EXTRA_HEIGHT = void 0;
|
|
3
|
+
exports.convertResponsiveElementsToFixed = exports.updateFixedElementDimensions = exports.sortElementsFromReferencePoint = exports.calculateDistancesToReferencePoint = exports.getFixedGridElementsBottomLimit = exports.recalculatePreservingPositions = exports.getFixedPositionByDevice = exports.CANVAS_EXTRA_HEIGHT = void 0;
|
|
4
4
|
exports.updateFixedPosition = updateFixedPosition;
|
|
5
5
|
exports.findAvailablePosition = findAvailablePosition;
|
|
6
6
|
exports.findFixedAvailablePositions = findFixedAvailablePositions;
|
|
7
7
|
exports.updateFixedElementWidth = updateFixedElementWidth;
|
|
8
|
+
const vem_helpers_1 = require("./vem-element/helpers/vem.helpers");
|
|
8
9
|
const general_1 = require("../../general");
|
|
9
10
|
const ICanvasGrid_1 = require("../interfaces/ICanvasGrid");
|
|
10
11
|
const IVemPosition_1 = require("../interfaces/IVemPosition");
|
|
@@ -178,3 +179,11 @@ const updateFixedElementDimensions = (containerItem, device, scopeElements) => {
|
|
|
178
179
|
return { ...currentElement };
|
|
179
180
|
};
|
|
180
181
|
exports.updateFixedElementDimensions = updateFixedElementDimensions;
|
|
182
|
+
const convertResponsiveElementsToFixed = (config, elements, canvasDevice = ICanvasGrid_1.CanvasDevice.DESKTOP) => {
|
|
183
|
+
const newElements = elements.filter((element) => !element.position?.fixed);
|
|
184
|
+
const currentFixedElements = elements.filter((element) => element.position?.fixed);
|
|
185
|
+
const recalculatedElements = newElements.map((element) => (0, vem_helpers_1.updateDimension)(element, config, IVemPosition_1.VemPositionType.FIXED));
|
|
186
|
+
const toProcessElements = findFixedAvailablePositions(config[canvasDevice].width, recalculatedElements, currentFixedElements, canvasDevice);
|
|
187
|
+
return [...currentFixedElements, ...toProcessElements];
|
|
188
|
+
};
|
|
189
|
+
exports.convertResponsiveElementsToFixed = convertResponsiveElementsToFixed;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.normalizeElementPositions = void 0;
|
|
3
4
|
exports.recalculateElements = recalculateElements;
|
|
4
5
|
exports.applyDynamicSize = applyDynamicSize;
|
|
5
6
|
exports.calculateCanvasHeight = calculateCanvasHeight;
|
|
@@ -7,6 +8,10 @@ const fixed_1 = require("./fixed");
|
|
|
7
8
|
const responsive_1 = require("./responsive");
|
|
8
9
|
const interfaces_1 = require("../interfaces");
|
|
9
10
|
const element_1 = require("../utils/element");
|
|
11
|
+
const normalizePositionStrategies = {
|
|
12
|
+
[interfaces_1.VemPositionType.FIXED]: (canvasConfig, elements, device) => (0, fixed_1.convertResponsiveElementsToFixed)(canvasConfig, elements, device),
|
|
13
|
+
[interfaces_1.VemPositionType.RESPONSIVE]: (canvasConfig, elements, device) => (0, responsive_1.convertFixedElementsToResponsive)(canvasConfig, elements, device),
|
|
14
|
+
};
|
|
10
15
|
const applyDynamicSizeStrategies = {
|
|
11
16
|
fixed: (containerItem, scopeElements, device) => {
|
|
12
17
|
return (0, fixed_1.updateFixedElementDimensions)(containerItem, device, scopeElements);
|
|
@@ -15,12 +20,19 @@ const applyDynamicSizeStrategies = {
|
|
|
15
20
|
return (0, responsive_1.updateResponsiveElementDimensions)(containerItem, device, scopeElements, gap);
|
|
16
21
|
},
|
|
17
22
|
};
|
|
23
|
+
const normalizeElementPositions = ({ elements, canvasConfig, target, canvasDevice, }) => {
|
|
24
|
+
const _canvasDevice = canvasDevice ?? interfaces_1.CanvasDevice.DESKTOP;
|
|
25
|
+
return normalizePositionStrategies[target](canvasConfig, elements, _canvasDevice);
|
|
26
|
+
};
|
|
27
|
+
exports.normalizeElementPositions = normalizeElementPositions;
|
|
18
28
|
const recalculateStrategies = {
|
|
19
29
|
fixed: (elements, currentElements, canvasWidth, device, options) => {
|
|
20
|
-
const
|
|
30
|
+
const { newElements, scopeElements } = (0, element_1.normalizeElements)(currentElements, device, interfaces_1.VemPositionType.FIXED);
|
|
31
|
+
const elementsToCalculate = [...newElements, ...elements];
|
|
32
|
+
const isSorted = !scopeElements.length;
|
|
21
33
|
const changedElements = (options.allowCopy
|
|
22
|
-
? (0, element_1.copyDesktopPositionToDevice)(
|
|
23
|
-
:
|
|
34
|
+
? (0, element_1.copyDesktopPositionToDevice)(elementsToCalculate, device, interfaces_1.VemPositionType.FIXED)
|
|
35
|
+
: elementsToCalculate);
|
|
24
36
|
const orderedElements = isSorted
|
|
25
37
|
? (0, fixed_1.sortElementsFromReferencePoint)(changedElements, options.sort, {
|
|
26
38
|
x: 0,
|
|
@@ -28,18 +40,20 @@ const recalculateStrategies = {
|
|
|
28
40
|
})
|
|
29
41
|
: changedElements;
|
|
30
42
|
return options.keepPosition
|
|
31
|
-
? (0, fixed_1.recalculatePreservingPositions)(orderedElements,
|
|
32
|
-
: (0, fixed_1.findFixedAvailablePositions)(canvasWidth, orderedElements,
|
|
43
|
+
? (0, fixed_1.recalculatePreservingPositions)(orderedElements, scopeElements, device, canvasWidth, options.canvasHeight)
|
|
44
|
+
: (0, fixed_1.findFixedAvailablePositions)(canvasWidth, orderedElements, scopeElements, device, false, false, options?.canvasHeight);
|
|
33
45
|
},
|
|
34
46
|
responsive: (elements, currentElements, canvasWidth, device, options) => {
|
|
35
|
-
const
|
|
47
|
+
const { scopeElements, newElements } = (0, element_1.normalizeElements)(currentElements, device, interfaces_1.VemPositionType.RESPONSIVE);
|
|
48
|
+
const elementsToCalculate = [...newElements, ...elements];
|
|
49
|
+
const isSorted = !scopeElements.length;
|
|
36
50
|
const changedElements = (options.allowCopy
|
|
37
|
-
? (0, element_1.copyDesktopPositionToDevice)(
|
|
38
|
-
:
|
|
51
|
+
? (0, element_1.copyDesktopPositionToDevice)(elementsToCalculate, device, interfaces_1.VemPositionType.RESPONSIVE)
|
|
52
|
+
: elementsToCalculate);
|
|
39
53
|
const orderedElements = isSorted
|
|
40
54
|
? (0, responsive_1.sortResponsiveElements)(changedElements, options.sort)
|
|
41
55
|
: changedElements;
|
|
42
|
-
return (0, responsive_1.findResponsiveAvailablePositions)(canvasWidth, orderedElements,
|
|
56
|
+
return (0, responsive_1.findResponsiveAvailablePositions)(canvasWidth, orderedElements, scopeElements, device);
|
|
43
57
|
},
|
|
44
58
|
};
|
|
45
59
|
const calculateCanvasHeightStrategies = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.updateResponsiveElementDimensions = exports.sortResponsiveElements = exports.sortByDistanceInResponsiveFunction = exports.calculateDistancesToReferencePoint = exports.getResponsiveGridElementsBottomLimit = void 0;
|
|
3
|
+
exports.convertFixedElementsToResponsive = exports.updateResponsiveElementDimensions = exports.sortResponsiveElements = exports.sortByDistanceInResponsiveFunction = exports.calculateDistancesToReferencePoint = exports.getResponsiveGridElementsBottomLimit = void 0;
|
|
4
4
|
exports.findAvailablePosition = findAvailablePosition;
|
|
5
5
|
exports.updateResponsivePosition = updateResponsivePosition;
|
|
6
6
|
exports.findResponsiveAvailablePositions = findResponsiveAvailablePositions;
|
|
@@ -11,6 +11,7 @@ const IVemPosition_1 = require("../interfaces/IVemPosition");
|
|
|
11
11
|
const fixed_position_1 = require("../utils/fixed.position");
|
|
12
12
|
const overlap_1 = require("../utils/overlap");
|
|
13
13
|
const position_1 = require("../utils/position");
|
|
14
|
+
const vem_helpers_1 = require("./vem-element/helpers/vem.helpers");
|
|
14
15
|
const SPACE_DELTA = 1;
|
|
15
16
|
const HEIGHT_DELTA = 32;
|
|
16
17
|
const CANVAS_EXTRA_ROW = 1;
|
|
@@ -131,3 +132,11 @@ const updateResponsiveElementDimensions = (containerItem, device, scopeElements,
|
|
|
131
132
|
return { ...currentElement };
|
|
132
133
|
};
|
|
133
134
|
exports.updateResponsiveElementDimensions = updateResponsiveElementDimensions;
|
|
135
|
+
const convertFixedElementsToResponsive = (config, elements, canvasDevice = ICanvasGrid_1.CanvasDevice.DESKTOP) => {
|
|
136
|
+
const newElements = elements.filter((element) => !element.position?.responsive);
|
|
137
|
+
const currentElements = elements.filter((element) => element.position?.responsive);
|
|
138
|
+
let recalculatedElements = newElements.map((baseElem) => (0, vem_helpers_1.updateDimension)(baseElem, config, IVemPosition_1.VemPositionType.RESPONSIVE));
|
|
139
|
+
recalculatedElements = findResponsiveAvailablePositions(config[canvasDevice].columns.count, recalculatedElements, currentElements, canvasDevice);
|
|
140
|
+
return [...currentElements, ...recalculatedElements];
|
|
141
|
+
};
|
|
142
|
+
exports.convertFixedElementsToResponsive = convertFixedElementsToResponsive;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DEVICE_LIST = exports.FILTER_TRIGGER_TYPE = exports.FILTER_LIST_TYPE = exports.DEFAULT_HEIGHT_IN_LIST = exports.DEFAULT_HEIGHT_IN_RESPONSIVE = exports.MIN_WIDTH_IN_RESPONSIVE = exports.DEFAULT_WIDTH_IN_RESPONSIVE = exports.DEFAULT_HEIGHT_IN_FIXED = exports.MIN_WIDTH_IN_FIXED = exports.DEFAULT_WIDTH_IN_FIXED = exports.DEFAULT_DELTA_RESIZE_IN_RESPONSIVE = exports.DEFAULT_DELTA_RESIZE_IN_FIXED = exports.DEFAULT_MIN_FONT_TO_AUTO_RESIZE = exports.DEFAULT_CUSTOM_HEIGHT_IN_RESPONSIVE = exports.DEFAULT_CUSTOM_HEIGHT_IN_FIXED = void 0;
|
|
4
|
+
const ICanvasGrid_1 = require("../../../interfaces/ICanvasGrid");
|
|
5
|
+
exports.DEFAULT_CUSTOM_HEIGHT_IN_FIXED = 30;
|
|
6
|
+
exports.DEFAULT_CUSTOM_HEIGHT_IN_RESPONSIVE = 32;
|
|
7
|
+
exports.DEFAULT_MIN_FONT_TO_AUTO_RESIZE = 18;
|
|
8
|
+
exports.DEFAULT_DELTA_RESIZE_IN_FIXED = 1.5;
|
|
9
|
+
exports.DEFAULT_DELTA_RESIZE_IN_RESPONSIVE = 2.8;
|
|
10
|
+
exports.DEFAULT_WIDTH_IN_FIXED = 415;
|
|
11
|
+
exports.MIN_WIDTH_IN_FIXED = 275;
|
|
12
|
+
exports.DEFAULT_HEIGHT_IN_FIXED = 76;
|
|
13
|
+
exports.DEFAULT_WIDTH_IN_RESPONSIVE = 4;
|
|
14
|
+
exports.MIN_WIDTH_IN_RESPONSIVE = 3;
|
|
15
|
+
exports.DEFAULT_HEIGHT_IN_RESPONSIVE = 2;
|
|
16
|
+
exports.DEFAULT_HEIGHT_IN_LIST = 245;
|
|
17
|
+
var FILTER_LIST_TYPE;
|
|
18
|
+
(function (FILTER_LIST_TYPE) {
|
|
19
|
+
FILTER_LIST_TYPE["DROPDOWN"] = "DROPDOWN";
|
|
20
|
+
FILTER_LIST_TYPE["LIST"] = "LIST";
|
|
21
|
+
})(FILTER_LIST_TYPE || (exports.FILTER_LIST_TYPE = FILTER_LIST_TYPE = {}));
|
|
22
|
+
var FILTER_TRIGGER_TYPE;
|
|
23
|
+
(function (FILTER_TRIGGER_TYPE) {
|
|
24
|
+
FILTER_TRIGGER_TYPE["AUTOMATIC"] = "AUTOMATIC";
|
|
25
|
+
FILTER_TRIGGER_TYPE["BUTTON"] = "BUTTON";
|
|
26
|
+
FILTER_TRIGGER_TYPE["DROPDOWN"] = "DROPDOWN";
|
|
27
|
+
FILTER_TRIGGER_TYPE["LIST"] = "LIST";
|
|
28
|
+
})(FILTER_TRIGGER_TYPE || (exports.FILTER_TRIGGER_TYPE = FILTER_TRIGGER_TYPE = {}));
|
|
29
|
+
exports.DEVICE_LIST = [
|
|
30
|
+
ICanvasGrid_1.CanvasDevice.DESKTOP,
|
|
31
|
+
ICanvasGrid_1.CanvasDevice.TABLET,
|
|
32
|
+
ICanvasGrid_1.CanvasDevice.MOBILE,
|
|
33
|
+
];
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CONTAINER_ITEM_DEFINITION = exports.FILTER_DATE_ITEM_DEFINITION = exports.FILTER_LIST_ITEM_DEFINITION = exports.FILTER_INPUT_ITEM_DEFINITION = exports.ANALYTICS_ITEM_DEFINITION = exports.TEXT_ITEM_DEFINITION = exports.BUTTON_ITEM_DEFINITION = exports.IMAGE_ITEM_DEFINITION = void 0;
|
|
4
|
+
const vem_constants_1 = require("../constants/vem.constants");
|
|
5
|
+
exports.IMAGE_ITEM_DEFINITION = {
|
|
6
|
+
behavior: {
|
|
7
|
+
addingConfig: {
|
|
8
|
+
defaultDimensions: {
|
|
9
|
+
responsive: {
|
|
10
|
+
colSpan: 2,
|
|
11
|
+
rowSpan: 6,
|
|
12
|
+
},
|
|
13
|
+
fixed: {
|
|
14
|
+
width: 100,
|
|
15
|
+
height: 100,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
defaultItemData: {
|
|
19
|
+
aspect: "cover",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
exports.BUTTON_ITEM_DEFINITION = {
|
|
25
|
+
behavior: {
|
|
26
|
+
addingConfig: {
|
|
27
|
+
defaultDimensions: {
|
|
28
|
+
responsive: {
|
|
29
|
+
colSpan: 1,
|
|
30
|
+
rowSpan: 1,
|
|
31
|
+
},
|
|
32
|
+
fixed: {
|
|
33
|
+
width: 100,
|
|
34
|
+
height: 30,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
defaultItemData: () => ({
|
|
38
|
+
background: "#FF5300",
|
|
39
|
+
color: "#ffffff",
|
|
40
|
+
fontFamily: "Inter, serif",
|
|
41
|
+
fontSize: "12px",
|
|
42
|
+
url: "",
|
|
43
|
+
label: "",
|
|
44
|
+
}),
|
|
45
|
+
minSize: {
|
|
46
|
+
fixed: {
|
|
47
|
+
height: 30,
|
|
48
|
+
width: 30,
|
|
49
|
+
customSize: (itemData) => {
|
|
50
|
+
const fontSizeValue = parseInt(itemData.fontSize.replace("px", ""), 10);
|
|
51
|
+
const minHeight = fontSizeValue > vem_constants_1.DEFAULT_MIN_FONT_TO_AUTO_RESIZE
|
|
52
|
+
? fontSizeValue * vem_constants_1.DEFAULT_DELTA_RESIZE_IN_FIXED
|
|
53
|
+
: 30;
|
|
54
|
+
return {
|
|
55
|
+
height: minHeight,
|
|
56
|
+
width: 30,
|
|
57
|
+
};
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
responsive: {
|
|
61
|
+
height: 1,
|
|
62
|
+
width: 1,
|
|
63
|
+
customSize: (itemData) => {
|
|
64
|
+
const fontSizeValue = parseInt(itemData.fontSize.replace("px", ""), 10);
|
|
65
|
+
const minHeightPx = fontSizeValue > vem_constants_1.DEFAULT_MIN_FONT_TO_AUTO_RESIZE
|
|
66
|
+
? fontSizeValue * vem_constants_1.DEFAULT_DELTA_RESIZE_IN_RESPONSIVE
|
|
67
|
+
: 30;
|
|
68
|
+
return {
|
|
69
|
+
height: Math.round(minHeightPx / 32),
|
|
70
|
+
width: 1,
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
exports.TEXT_ITEM_DEFINITION = {
|
|
79
|
+
behavior: {
|
|
80
|
+
addingConfig: {
|
|
81
|
+
defaultDimensions: {
|
|
82
|
+
responsive: {
|
|
83
|
+
colSpan: 2,
|
|
84
|
+
rowSpan: 6,
|
|
85
|
+
},
|
|
86
|
+
fixed: {
|
|
87
|
+
width: 200,
|
|
88
|
+
height: 100,
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
defaultItemData: {
|
|
92
|
+
backgroundColor: "rgba(0,0,0,0)",
|
|
93
|
+
borderColor: "#000000",
|
|
94
|
+
borderWidth: "1px",
|
|
95
|
+
borderStyle: "none",
|
|
96
|
+
fontFamily: "Inter, serif",
|
|
97
|
+
fontSize: "12px",
|
|
98
|
+
fontColor: "#000000",
|
|
99
|
+
paddingTop: 5,
|
|
100
|
+
paddingBottom: 5,
|
|
101
|
+
paddingLeft: 5,
|
|
102
|
+
paddingRight: 5,
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
exports.ANALYTICS_ITEM_DEFINITION = {
|
|
108
|
+
behavior: {
|
|
109
|
+
addingConfig: {
|
|
110
|
+
defaultDimensions: {
|
|
111
|
+
responsive: {
|
|
112
|
+
colSpan: 4,
|
|
113
|
+
rowSpan: 10,
|
|
114
|
+
},
|
|
115
|
+
fixed: {
|
|
116
|
+
width: 400,
|
|
117
|
+
height: 400,
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
exports.FILTER_INPUT_ITEM_DEFINITION = {
|
|
124
|
+
behavior: {
|
|
125
|
+
addingConfig: {
|
|
126
|
+
defaultDimensions: {
|
|
127
|
+
responsive: {
|
|
128
|
+
colSpan: vem_constants_1.DEFAULT_WIDTH_IN_RESPONSIVE,
|
|
129
|
+
rowSpan: vem_constants_1.DEFAULT_HEIGHT_IN_RESPONSIVE,
|
|
130
|
+
},
|
|
131
|
+
fixed: {
|
|
132
|
+
width: vem_constants_1.DEFAULT_WIDTH_IN_FIXED,
|
|
133
|
+
height: vem_constants_1.DEFAULT_HEIGHT_IN_FIXED,
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
minSize: {
|
|
137
|
+
fixed: {
|
|
138
|
+
height: 76,
|
|
139
|
+
width: 200,
|
|
140
|
+
customSize: () => {
|
|
141
|
+
return {
|
|
142
|
+
height: 76,
|
|
143
|
+
width: 200,
|
|
144
|
+
};
|
|
145
|
+
},
|
|
146
|
+
},
|
|
147
|
+
responsive: {
|
|
148
|
+
height: 1,
|
|
149
|
+
width: 1,
|
|
150
|
+
customSize: () => {
|
|
151
|
+
return {
|
|
152
|
+
height: 1,
|
|
153
|
+
width: 1,
|
|
154
|
+
};
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
};
|
|
161
|
+
exports.FILTER_LIST_ITEM_DEFINITION = {
|
|
162
|
+
behavior: {
|
|
163
|
+
addingConfig: {
|
|
164
|
+
defaultDimensions: {
|
|
165
|
+
responsive: {
|
|
166
|
+
colSpan: vem_constants_1.DEFAULT_WIDTH_IN_RESPONSIVE,
|
|
167
|
+
rowSpan: 2,
|
|
168
|
+
},
|
|
169
|
+
fixed: {
|
|
170
|
+
width: vem_constants_1.DEFAULT_WIDTH_IN_FIXED,
|
|
171
|
+
height: vem_constants_1.DEFAULT_HEIGHT_IN_FIXED,
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
minSize: {
|
|
175
|
+
fixed: {
|
|
176
|
+
height: 30,
|
|
177
|
+
width: 130,
|
|
178
|
+
customSize: (itemData) => {
|
|
179
|
+
const minHeight = itemData.type === vem_constants_1.FILTER_LIST_TYPE.LIST ? 100 : 30;
|
|
180
|
+
return {
|
|
181
|
+
height: minHeight,
|
|
182
|
+
width: 130,
|
|
183
|
+
};
|
|
184
|
+
},
|
|
185
|
+
},
|
|
186
|
+
responsive: {
|
|
187
|
+
height: 1,
|
|
188
|
+
width: 1,
|
|
189
|
+
customSize: () => {
|
|
190
|
+
return {
|
|
191
|
+
height: 1,
|
|
192
|
+
width: 1,
|
|
193
|
+
};
|
|
194
|
+
},
|
|
195
|
+
},
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
},
|
|
199
|
+
};
|
|
200
|
+
exports.FILTER_DATE_ITEM_DEFINITION = {
|
|
201
|
+
behavior: {
|
|
202
|
+
addingConfig: {
|
|
203
|
+
defaultDimensions: {
|
|
204
|
+
responsive: {
|
|
205
|
+
colSpan: vem_constants_1.DEFAULT_WIDTH_IN_RESPONSIVE,
|
|
206
|
+
rowSpan: vem_constants_1.DEFAULT_HEIGHT_IN_RESPONSIVE,
|
|
207
|
+
},
|
|
208
|
+
fixed: {
|
|
209
|
+
width: vem_constants_1.DEFAULT_WIDTH_IN_FIXED,
|
|
210
|
+
height: vem_constants_1.DEFAULT_HEIGHT_IN_FIXED,
|
|
211
|
+
},
|
|
212
|
+
},
|
|
213
|
+
defaultItemData: {
|
|
214
|
+
validators: [],
|
|
215
|
+
trigger: vem_constants_1.FILTER_TRIGGER_TYPE.BUTTON,
|
|
216
|
+
selectorColor: "#FF5300",
|
|
217
|
+
buttonBackgroundColor: "#FF5300",
|
|
218
|
+
buttonTextColor: "#ffffff",
|
|
219
|
+
buttonBorderColor: "#FF5300",
|
|
220
|
+
borderColor: "#e3e3e3",
|
|
221
|
+
fontColor: "#5F5F5F",
|
|
222
|
+
},
|
|
223
|
+
minSize: {
|
|
224
|
+
fixed: {
|
|
225
|
+
height: 30,
|
|
226
|
+
width: 100,
|
|
227
|
+
customSize: () => {
|
|
228
|
+
return {
|
|
229
|
+
height: 30,
|
|
230
|
+
width: 100,
|
|
231
|
+
};
|
|
232
|
+
},
|
|
233
|
+
},
|
|
234
|
+
responsive: {
|
|
235
|
+
height: 1,
|
|
236
|
+
width: 1,
|
|
237
|
+
customSize: () => {
|
|
238
|
+
return {
|
|
239
|
+
height: 1,
|
|
240
|
+
width: 1,
|
|
241
|
+
};
|
|
242
|
+
},
|
|
243
|
+
},
|
|
244
|
+
},
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
};
|
|
248
|
+
exports.CONTAINER_ITEM_DEFINITION = {
|
|
249
|
+
behavior: {
|
|
250
|
+
addingConfig: {
|
|
251
|
+
defaultDimensions: {
|
|
252
|
+
responsive: {
|
|
253
|
+
colSpan: 10,
|
|
254
|
+
rowSpan: 10,
|
|
255
|
+
},
|
|
256
|
+
fixed: {
|
|
257
|
+
width: 900,
|
|
258
|
+
height: 500,
|
|
259
|
+
},
|
|
260
|
+
},
|
|
261
|
+
},
|
|
262
|
+
},
|
|
263
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.validateDimension = exports.getDefaultDimensions = exports.updateDimension = exports.VEM_DEFINITIONS = void 0;
|
|
4
|
+
const ICanvasGrid_1 = require("../../../interfaces/ICanvasGrid");
|
|
5
|
+
const IVemPosition_1 = require("../../../interfaces/IVemPosition");
|
|
6
|
+
const position_1 = require("../../../utils/position");
|
|
7
|
+
const vem_constants_1 = require("../constants/vem.constants");
|
|
8
|
+
const main_definitions_1 = require("../definitions/main.definitions");
|
|
9
|
+
exports.VEM_DEFINITIONS = {
|
|
10
|
+
image: main_definitions_1.IMAGE_ITEM_DEFINITION,
|
|
11
|
+
button: main_definitions_1.BUTTON_ITEM_DEFINITION,
|
|
12
|
+
text: main_definitions_1.TEXT_ITEM_DEFINITION,
|
|
13
|
+
analytics: main_definitions_1.ANALYTICS_ITEM_DEFINITION,
|
|
14
|
+
filterInput: main_definitions_1.FILTER_INPUT_ITEM_DEFINITION,
|
|
15
|
+
filterDate: main_definitions_1.FILTER_DATE_ITEM_DEFINITION,
|
|
16
|
+
filterList: main_definitions_1.FILTER_LIST_ITEM_DEFINITION,
|
|
17
|
+
container: main_definitions_1.CONTAINER_ITEM_DEFINITION,
|
|
18
|
+
};
|
|
19
|
+
const updateDimension = (element, canvasConfig, positionType, deviceList = vem_constants_1.DEVICE_LIST) => {
|
|
20
|
+
const position = (0, exports.getDefaultDimensions)(element, positionType);
|
|
21
|
+
let newElement = element;
|
|
22
|
+
deviceList.forEach((device) => {
|
|
23
|
+
const isForceAddField = device !== ICanvasGrid_1.CanvasDevice.DESKTOP;
|
|
24
|
+
const newPosition = {
|
|
25
|
+
...position,
|
|
26
|
+
...(isForceAddField && { preCalculated: true }),
|
|
27
|
+
};
|
|
28
|
+
const updatedElement = (0, position_1.setElementPosition)(newElement, positionType, device, newPosition);
|
|
29
|
+
if (positionType === IVemPosition_1.VemPositionType.RESPONSIVE) {
|
|
30
|
+
const columns = canvasConfig[device]
|
|
31
|
+
.columns.count;
|
|
32
|
+
newElement = (0, exports.validateDimension)(updatedElement, columns, device);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
newElement = updatedElement;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
return newElement;
|
|
39
|
+
};
|
|
40
|
+
exports.updateDimension = updateDimension;
|
|
41
|
+
const normalizeSize = (item, positionType) => {
|
|
42
|
+
const vemDefinition = exports.VEM_DEFINITIONS[item.type];
|
|
43
|
+
const rawSize = vemDefinition.behavior.addingConfig.defaultDimensions[positionType];
|
|
44
|
+
const customSizeResolver = vemDefinition?.behavior.addingConfig.minSize?.[positionType]?.customSize;
|
|
45
|
+
const baseHeight = "height" in rawSize ? rawSize.height : rawSize.rowSpan;
|
|
46
|
+
const baseWidth = "width" in rawSize ? rawSize.width : rawSize.colSpan;
|
|
47
|
+
if (!customSizeResolver)
|
|
48
|
+
return { height: baseHeight, width: baseWidth };
|
|
49
|
+
const customSize = customSizeResolver(item.itemData);
|
|
50
|
+
return {
|
|
51
|
+
height: Math.max(customSize.height, baseHeight),
|
|
52
|
+
width: Math.max(customSize.width, baseWidth),
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
const getDefaultDimensions = (item, positionType) => {
|
|
56
|
+
const { height, width } = normalizeSize(item, positionType);
|
|
57
|
+
if (positionType === IVemPosition_1.VemPositionType.FIXED) {
|
|
58
|
+
return { x: 0, y: 0, height, width, z: 1 };
|
|
59
|
+
}
|
|
60
|
+
return { colSpan: width, rowSpan: height, colStart: 1, rowStart: 1 };
|
|
61
|
+
};
|
|
62
|
+
exports.getDefaultDimensions = getDefaultDimensions;
|
|
63
|
+
const validateDimension = (baseElem, columnsCount, canvasDevice) => {
|
|
64
|
+
const currentPosition = baseElem.position.responsive[canvasDevice];
|
|
65
|
+
if (!currentPosition)
|
|
66
|
+
return baseElem;
|
|
67
|
+
const fixedColSpan = currentPosition.colSpan <= columnsCount
|
|
68
|
+
? currentPosition?.colSpan
|
|
69
|
+
: columnsCount;
|
|
70
|
+
const position = {
|
|
71
|
+
...currentPosition,
|
|
72
|
+
colSpan: fixedColSpan,
|
|
73
|
+
};
|
|
74
|
+
return (0, position_1.setElementPosition)(baseElem, IVemPosition_1.VemPositionType.RESPONSIVE, canvasDevice, position);
|
|
75
|
+
};
|
|
76
|
+
exports.validateDimension = validateDimension;
|
|
@@ -1,3 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.VemType = void 0;
|
|
3
4
|
const IVemPosition_1 = require("./IVemPosition");
|
|
5
|
+
var VemType;
|
|
6
|
+
(function (VemType) {
|
|
7
|
+
VemType["IMAGE"] = "image";
|
|
8
|
+
VemType["BUTTON"] = "button";
|
|
9
|
+
VemType["TEXT"] = "text";
|
|
10
|
+
VemType["ANALYTICS"] = "analytics";
|
|
11
|
+
VemType["FILTER_INPUT"] = "filterInput";
|
|
12
|
+
VemType["FILTER_LIST"] = "filterList";
|
|
13
|
+
VemType["FILTER_DATE"] = "filterDate";
|
|
14
|
+
VemType["CONTAINER"] = "container";
|
|
15
|
+
})(VemType || (exports.VemType = VemType = {}));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.copyDesktopPositionToDevice = void 0;
|
|
3
|
+
exports.normalizeElements = exports.copyDesktopPositionToDevice = void 0;
|
|
4
4
|
const position_1 = require("./position");
|
|
5
5
|
const ICanvasGrid_1 = require("../interfaces/ICanvasGrid");
|
|
6
6
|
const IVemPosition_1 = require("../interfaces/IVemPosition");
|
|
@@ -16,7 +16,7 @@ const copyDesktopPositionToDevice = (elements, newCanvasDevice, canvasType) => {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
return elements.map((element) => {
|
|
19
|
-
if (!element
|
|
19
|
+
if (!hasPositionForDevice(element, newCanvasDevice, canvasType)) {
|
|
20
20
|
const desktopViewPosition = element.position[canvasType][ICanvasGrid_1.CanvasDevice.DESKTOP];
|
|
21
21
|
const newDevicePosition = {
|
|
22
22
|
...desktopViewPosition,
|
|
@@ -29,3 +29,24 @@ const copyDesktopPositionToDevice = (elements, newCanvasDevice, canvasType) => {
|
|
|
29
29
|
});
|
|
30
30
|
};
|
|
31
31
|
exports.copyDesktopPositionToDevice = copyDesktopPositionToDevice;
|
|
32
|
+
const normalizeElements = (elements, newCanvasDevice, canvasType) => {
|
|
33
|
+
const withPosition = [];
|
|
34
|
+
const withoutPosition = [];
|
|
35
|
+
for (const element of elements) {
|
|
36
|
+
if (hasPositionForDevice(element, newCanvasDevice, canvasType)) {
|
|
37
|
+
withPosition.push(element);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
withoutPosition.push(element);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
const newElements = (0, exports.copyDesktopPositionToDevice)(withoutPosition, newCanvasDevice, canvasType);
|
|
44
|
+
return {
|
|
45
|
+
scopeElements: withPosition,
|
|
46
|
+
newElements,
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
exports.normalizeElements = normalizeElements;
|
|
50
|
+
const hasPositionForDevice = (element, device, canvasType) => {
|
|
51
|
+
return !!element.position[canvasType]?.[device];
|
|
52
|
+
};
|
|
@@ -106,14 +106,14 @@ class UChartApi {
|
|
|
106
106
|
: 1000;
|
|
107
107
|
static _getSortOption = (column) => {
|
|
108
108
|
let sortBy = "CATEGORY";
|
|
109
|
-
let sortDirection =
|
|
109
|
+
let sortDirection = "ASC";
|
|
110
110
|
if (!(0, isEmpty_1.isEmpty)(column.sorting)) {
|
|
111
111
|
sortBy = (0, get_1._get)(column.sorting, "sortBy");
|
|
112
112
|
sortDirection = (0, get_1._get)(column.sorting, "order");
|
|
113
113
|
if (sortBy == null)
|
|
114
114
|
sortBy = "VALUE";
|
|
115
115
|
if (sortDirection == null)
|
|
116
|
-
sortDirection = "
|
|
116
|
+
sortDirection = "ASC";
|
|
117
117
|
}
|
|
118
118
|
return { by: sortBy, direction: sortDirection };
|
|
119
119
|
};
|
|
@@ -123,14 +123,14 @@ class UChartPaginationApi {
|
|
|
123
123
|
: 1000;
|
|
124
124
|
static _getSortOption = (column) => {
|
|
125
125
|
let by = "CATEGORY";
|
|
126
|
-
let direction =
|
|
126
|
+
let direction = "ASC";
|
|
127
127
|
if (!(0, isEmpty_1.isEmpty)(column.sorting)) {
|
|
128
128
|
by = (0, get_1._get)(column.sorting, "sortBy");
|
|
129
129
|
direction = (0, get_1._get)(column.sorting, "order");
|
|
130
130
|
if (by == null)
|
|
131
131
|
by = "VALUE";
|
|
132
132
|
if (direction == null)
|
|
133
|
-
direction = "
|
|
133
|
+
direction = "ASC";
|
|
134
134
|
}
|
|
135
135
|
return { by, direction };
|
|
136
136
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { CanvasDevice } from "../interfaces/ICanvasGrid";
|
|
1
|
+
import { CanvasDevice, CanvasGridConfig, CanvasGridConfigFixed } from "../interfaces/ICanvasGrid";
|
|
2
2
|
import { FindAvailablePositionOptions } from "../interfaces/IFixedPosition";
|
|
3
|
-
import { VemFixed } from "../interfaces/IVemCore";
|
|
3
|
+
import { Vem, VemFixed } from "../interfaces/IVemCore";
|
|
4
4
|
import { VemPositionFixed } from "../interfaces/IVemPosition";
|
|
5
5
|
export declare const CANVAS_EXTRA_HEIGHT = 10;
|
|
6
6
|
export declare function updateFixedPosition(element: VemFixed, newDevicePosition: Partial<VemPositionFixed>, device: CanvasDevice): VemFixed;
|
|
@@ -25,3 +25,4 @@ export declare const sortElementsFromReferencePoint: (elements: VemFixed<unknown
|
|
|
25
25
|
y: number;
|
|
26
26
|
}) => VemFixed<unknown>[];
|
|
27
27
|
export declare const updateFixedElementDimensions: (containerItem: VemFixed<unknown>, device: CanvasDevice, scopeElements: VemFixed<unknown>[]) => VemFixed<unknown>;
|
|
28
|
+
export declare const convertResponsiveElementsToFixed: (config: CanvasGridConfig<CanvasGridConfigFixed>, elements: Vem[], canvasDevice?: CanvasDevice) => VemFixed[];
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { updateDimension } from "./vem-element/helpers/vem.helpers";
|
|
1
2
|
import { objectCopy } from "../../general";
|
|
2
|
-
import { CanvasDevice } from "../interfaces/ICanvasGrid";
|
|
3
|
+
import { CanvasDevice, } from "../interfaces/ICanvasGrid";
|
|
3
4
|
import { VemPositionType } from "../interfaces/IVemPosition";
|
|
4
5
|
import { dxGetFixedGridItemDevice, dxGetFixedGridItemsBottomLimit, hasOverflow, hasOverlap, } from "../utils/fixed.position";
|
|
5
6
|
import { sortByDistanceFunction } from "../utils/general";
|
|
@@ -165,3 +166,10 @@ export const updateFixedElementDimensions = (containerItem, device, scopeElement
|
|
|
165
166
|
}, device);
|
|
166
167
|
return { ...currentElement };
|
|
167
168
|
};
|
|
169
|
+
export const convertResponsiveElementsToFixed = (config, elements, canvasDevice = CanvasDevice.DESKTOP) => {
|
|
170
|
+
const newElements = elements.filter((element) => !element.position?.fixed);
|
|
171
|
+
const currentFixedElements = elements.filter((element) => element.position?.fixed);
|
|
172
|
+
const recalculatedElements = newElements.map((element) => updateDimension(element, config, VemPositionType.FIXED));
|
|
173
|
+
const toProcessElements = findFixedAvailablePositions(config[canvasDevice].width, recalculatedElements, currentFixedElements, canvasDevice);
|
|
174
|
+
return [...currentFixedElements, ...toProcessElements];
|
|
175
|
+
};
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
import { CanvasDevice, Vem } from "../interfaces";
|
|
1
|
+
import { CanvasDevice, CanvasGridConfig, CanvasGridConfigFixed, CanvasGridConfigResponsive, Vem, VemPositionType } from "../interfaces";
|
|
2
2
|
interface RecalculateOptions {
|
|
3
3
|
canvasHeight?: number;
|
|
4
4
|
sort?: CanvasDevice;
|
|
5
5
|
allowCopy?: boolean;
|
|
6
6
|
keepPosition?: boolean;
|
|
7
7
|
}
|
|
8
|
+
type NormalizeElementDimensionFunction = {
|
|
9
|
+
elements: Vem[];
|
|
10
|
+
canvasConfig: CanvasGridConfig<CanvasGridConfigResponsive | CanvasGridConfigFixed>;
|
|
11
|
+
target: VemPositionType;
|
|
12
|
+
canvasDevice?: CanvasDevice;
|
|
13
|
+
};
|
|
14
|
+
export declare const normalizeElementPositions: ({ elements, canvasConfig, target, canvasDevice, }: NormalizeElementDimensionFunction) => Vem[];
|
|
8
15
|
export declare function recalculateElements(newElements: Vem[], currentElements: Vem[], canvasWidth: number, canvasType: string, device: CanvasDevice, options?: RecalculateOptions): Vem[];
|
|
9
16
|
export declare function applyDynamicSize(containerItem: Vem, scopeElements: Vem[], device: CanvasDevice, canvasType: string, gap?: number): Vem | undefined;
|
|
10
17
|
export declare function calculateCanvasHeight(elements: Vem[], canvasType: string, device: CanvasDevice, rowGap?: number): number;
|