@progress/kendo-angular-utils 15.0.1 → 15.0.2-develop.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/drag-and-drop/drag-state.service.d.ts +2 -0
- package/drag-and-drop/droptarget-container.directive.d.ts +0 -1
- package/esm2020/drag-and-drop/drag-state.service.mjs +7 -0
- package/esm2020/drag-and-drop/droptarget-container.directive.mjs +16 -17
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-utils.mjs +26 -19
- package/fesm2020/progress-kendo-angular-utils.mjs +119 -113
- package/package.json +3 -3
|
@@ -48,6 +48,8 @@ export declare class DragStateService implements OnDestroy {
|
|
|
48
48
|
setInitialClientOffset(initialClientOffset: Coordinates): void;
|
|
49
49
|
setScrollOffset(scrollOffset: Coordinates): void;
|
|
50
50
|
setInitialScrollOffset(initialScrollOffset: Coordinates): void;
|
|
51
|
+
get dragTargetPresent(): boolean;
|
|
52
|
+
get dropTargetPresent(): boolean;
|
|
51
53
|
private updateState;
|
|
52
54
|
private setCallbacks;
|
|
53
55
|
ngOnDestroy(): void;
|
|
@@ -56,7 +56,6 @@ export declare class DropTargetContainerDirective implements AfterViewInit {
|
|
|
56
56
|
*/
|
|
57
57
|
notify(): void;
|
|
58
58
|
constructor(service: DragStateService, element: ElementRef, ngZone: NgZone, cdr: ChangeDetectorRef);
|
|
59
|
-
private currentDropTarget;
|
|
60
59
|
private currentDropTargetElement;
|
|
61
60
|
private previousDropTargets;
|
|
62
61
|
private _dropTargetFilter;
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Injectable } from '@angular/core';
|
|
6
6
|
import { dispatchDragAndDrop, getScrollableParent, autoScroll } from '@progress/kendo-draggable-common';
|
|
7
|
+
import { isPresent } from './util';
|
|
7
8
|
import * as i0 from "@angular/core";
|
|
8
9
|
/**
|
|
9
10
|
* @hidden
|
|
@@ -77,6 +78,12 @@ export class DragStateService {
|
|
|
77
78
|
setInitialScrollOffset(initialScrollOffset) {
|
|
78
79
|
this.initialScrollOffset = initialScrollOffset;
|
|
79
80
|
}
|
|
81
|
+
get dragTargetPresent() {
|
|
82
|
+
return isPresent(this.dragTarget?.element);
|
|
83
|
+
}
|
|
84
|
+
get dropTargetPresent() {
|
|
85
|
+
return isPresent(this.dropTarget?.element);
|
|
86
|
+
}
|
|
80
87
|
updateState() {
|
|
81
88
|
this.state = {
|
|
82
89
|
drag: this.dragTarget,
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, Input, NgZone, Output } from '@angular/core';
|
|
6
|
-
import { contains } from '@progress/kendo-angular-common';
|
|
7
6
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
7
|
import { packageMetadata } from '../package-metadata';
|
|
9
8
|
import { DragStateService } from './drag-state.service';
|
|
@@ -44,7 +43,6 @@ export class DropTargetContainerDirective {
|
|
|
44
43
|
* Fires when a DragTarget element is dropped over the DropTarget.
|
|
45
44
|
*/
|
|
46
45
|
this.onDrop = new EventEmitter();
|
|
47
|
-
this.currentDropTarget = null;
|
|
48
46
|
this.currentDropTargetElement = null;
|
|
49
47
|
this.previousDropTargets = [];
|
|
50
48
|
this._dropTargetFilter = null;
|
|
@@ -102,13 +100,17 @@ export class DropTargetContainerDirective {
|
|
|
102
100
|
* @hidden
|
|
103
101
|
*/
|
|
104
102
|
handleDragEnter(event) {
|
|
105
|
-
if (!this.service.
|
|
103
|
+
if (!this.service.dragTargetPresent || this.service.dropTargetPresent) {
|
|
106
104
|
return;
|
|
107
105
|
}
|
|
108
106
|
const eventTarget = event.originalEvent.target;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
107
|
+
const currDropTargetElem = intersect(eventTarget, this.allDropTargets);
|
|
108
|
+
const currDropTarget = this.service.dropTargets.find(dt => dt.element === currDropTargetElem);
|
|
109
|
+
if (!isPresent(currDropTargetElem) || !isPresent(currDropTarget)) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
this.currentDropTargetElement = currDropTargetElem;
|
|
113
|
+
this.service.dropTarget = currDropTarget;
|
|
112
114
|
this.service.dropIndex = this.getDropIndex();
|
|
113
115
|
this.emitZoneAwareEvent('onDragEnter', event);
|
|
114
116
|
}
|
|
@@ -116,21 +118,19 @@ export class DropTargetContainerDirective {
|
|
|
116
118
|
* @hidden
|
|
117
119
|
*/
|
|
118
120
|
handleDragLeave(event) {
|
|
119
|
-
|
|
120
|
-
if (containsEventTarget) {
|
|
121
|
-
return;
|
|
122
|
-
}
|
|
123
|
-
this.service.dropTarget = null;
|
|
124
|
-
if (!this.service.dragTarget) {
|
|
121
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
125
122
|
return;
|
|
126
123
|
}
|
|
127
124
|
this.emitZoneAwareEvent('onDragLeave', event);
|
|
125
|
+
this.currentDropTargetElement = null;
|
|
126
|
+
this.service.dropTarget = null;
|
|
127
|
+
this.service.dropIndex = null;
|
|
128
128
|
}
|
|
129
129
|
/**
|
|
130
130
|
* @hidden
|
|
131
131
|
*/
|
|
132
132
|
handleDragOver(event) {
|
|
133
|
-
if (!this.service.
|
|
133
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
134
134
|
return;
|
|
135
135
|
}
|
|
136
136
|
this.emitZoneAwareEvent('onDragOver', event);
|
|
@@ -139,12 +139,12 @@ export class DropTargetContainerDirective {
|
|
|
139
139
|
* @hidden
|
|
140
140
|
*/
|
|
141
141
|
handleDrop(event) {
|
|
142
|
-
if (!this.service.
|
|
142
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
145
|
this.emitZoneAwareEvent('onDrop', event);
|
|
146
|
-
this.currentDropTarget = null;
|
|
147
146
|
this.currentDropTargetElement = null;
|
|
147
|
+
this.service.dropTarget = null;
|
|
148
148
|
this.service.dropIndex = null;
|
|
149
149
|
}
|
|
150
150
|
initializeDropTargets() {
|
|
@@ -194,8 +194,7 @@ export class DropTargetContainerDirective {
|
|
|
194
194
|
});
|
|
195
195
|
}
|
|
196
196
|
getDropIndex() {
|
|
197
|
-
|
|
198
|
-
return Array.from(allTargets).indexOf(this.currentDropTargetElement);
|
|
197
|
+
return this.allDropTargets.indexOf(this.currentDropTargetElement);
|
|
199
198
|
}
|
|
200
199
|
clearPreviousTargets() {
|
|
201
200
|
this.previousDropTargets.forEach(dropTarget => {
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-utils',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '15.0.
|
|
12
|
+
publishDate: 1707215365,
|
|
13
|
+
version: '15.0.2-develop.2',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -19,8 +19,8 @@ const packageMetadata = {
|
|
|
19
19
|
name: '@progress/kendo-angular-utils',
|
|
20
20
|
productName: 'Kendo UI for Angular',
|
|
21
21
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
22
|
-
publishDate:
|
|
23
|
-
version: '15.0.
|
|
22
|
+
publishDate: 1707215365,
|
|
23
|
+
version: '15.0.2-develop.2',
|
|
24
24
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
25
25
|
};
|
|
26
26
|
|
|
@@ -394,6 +394,14 @@ class DragStateService {
|
|
|
394
394
|
setInitialScrollOffset(initialScrollOffset) {
|
|
395
395
|
this.initialScrollOffset = initialScrollOffset;
|
|
396
396
|
}
|
|
397
|
+
get dragTargetPresent() {
|
|
398
|
+
var _a;
|
|
399
|
+
return isPresent((_a = this.dragTarget) === null || _a === void 0 ? void 0 : _a.element);
|
|
400
|
+
}
|
|
401
|
+
get dropTargetPresent() {
|
|
402
|
+
var _a;
|
|
403
|
+
return isPresent((_a = this.dropTarget) === null || _a === void 0 ? void 0 : _a.element);
|
|
404
|
+
}
|
|
397
405
|
updateState() {
|
|
398
406
|
this.state = {
|
|
399
407
|
drag: this.dragTarget,
|
|
@@ -1716,7 +1724,6 @@ class DropTargetContainerDirective {
|
|
|
1716
1724
|
* Fires when a DragTarget element is dropped over the DropTarget.
|
|
1717
1725
|
*/
|
|
1718
1726
|
this.onDrop = new EventEmitter();
|
|
1719
|
-
this.currentDropTarget = null;
|
|
1720
1727
|
this.currentDropTargetElement = null;
|
|
1721
1728
|
this.previousDropTargets = [];
|
|
1722
1729
|
this._dropTargetFilter = null;
|
|
@@ -1774,13 +1781,17 @@ class DropTargetContainerDirective {
|
|
|
1774
1781
|
* @hidden
|
|
1775
1782
|
*/
|
|
1776
1783
|
handleDragEnter(event) {
|
|
1777
|
-
if (!this.service.
|
|
1784
|
+
if (!this.service.dragTargetPresent || this.service.dropTargetPresent) {
|
|
1778
1785
|
return;
|
|
1779
1786
|
}
|
|
1780
1787
|
const eventTarget = event.originalEvent.target;
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1788
|
+
const currDropTargetElem = intersect(eventTarget, this.allDropTargets);
|
|
1789
|
+
const currDropTarget = this.service.dropTargets.find(dt => dt.element === currDropTargetElem);
|
|
1790
|
+
if (!isPresent(currDropTargetElem) || !isPresent(currDropTarget)) {
|
|
1791
|
+
return;
|
|
1792
|
+
}
|
|
1793
|
+
this.currentDropTargetElement = currDropTargetElem;
|
|
1794
|
+
this.service.dropTarget = currDropTarget;
|
|
1784
1795
|
this.service.dropIndex = this.getDropIndex();
|
|
1785
1796
|
this.emitZoneAwareEvent('onDragEnter', event);
|
|
1786
1797
|
}
|
|
@@ -1788,22 +1799,19 @@ class DropTargetContainerDirective {
|
|
|
1788
1799
|
* @hidden
|
|
1789
1800
|
*/
|
|
1790
1801
|
handleDragLeave(event) {
|
|
1791
|
-
|
|
1792
|
-
const containsEventTarget = isPresent(this.service.dropTarget) && contains((_a = this.service.dropTarget) === null || _a === void 0 ? void 0 : _a.element, event.originalEvent.target, false);
|
|
1793
|
-
if (containsEventTarget) {
|
|
1794
|
-
return;
|
|
1795
|
-
}
|
|
1796
|
-
this.service.dropTarget = null;
|
|
1797
|
-
if (!this.service.dragTarget) {
|
|
1802
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
1798
1803
|
return;
|
|
1799
1804
|
}
|
|
1800
1805
|
this.emitZoneAwareEvent('onDragLeave', event);
|
|
1806
|
+
this.currentDropTargetElement = null;
|
|
1807
|
+
this.service.dropTarget = null;
|
|
1808
|
+
this.service.dropIndex = null;
|
|
1801
1809
|
}
|
|
1802
1810
|
/**
|
|
1803
1811
|
* @hidden
|
|
1804
1812
|
*/
|
|
1805
1813
|
handleDragOver(event) {
|
|
1806
|
-
if (!this.service.
|
|
1814
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
1807
1815
|
return;
|
|
1808
1816
|
}
|
|
1809
1817
|
this.emitZoneAwareEvent('onDragOver', event);
|
|
@@ -1812,12 +1820,12 @@ class DropTargetContainerDirective {
|
|
|
1812
1820
|
* @hidden
|
|
1813
1821
|
*/
|
|
1814
1822
|
handleDrop(event) {
|
|
1815
|
-
if (!this.service.
|
|
1823
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
1816
1824
|
return;
|
|
1817
1825
|
}
|
|
1818
1826
|
this.emitZoneAwareEvent('onDrop', event);
|
|
1819
|
-
this.currentDropTarget = null;
|
|
1820
1827
|
this.currentDropTargetElement = null;
|
|
1828
|
+
this.service.dropTarget = null;
|
|
1821
1829
|
this.service.dropIndex = null;
|
|
1822
1830
|
}
|
|
1823
1831
|
initializeDropTargets() {
|
|
@@ -1868,8 +1876,7 @@ class DropTargetContainerDirective {
|
|
|
1868
1876
|
});
|
|
1869
1877
|
}
|
|
1870
1878
|
getDropIndex() {
|
|
1871
|
-
|
|
1872
|
-
return Array.from(allTargets).indexOf(this.currentDropTargetElement);
|
|
1879
|
+
return this.allDropTargets.indexOf(this.currentDropTargetElement);
|
|
1873
1880
|
}
|
|
1874
1881
|
clearPreviousTargets() {
|
|
1875
1882
|
this.previousDropTargets.forEach(dropTarget => {
|
|
@@ -19,8 +19,8 @@ const packageMetadata = {
|
|
|
19
19
|
name: '@progress/kendo-angular-utils',
|
|
20
20
|
productName: 'Kendo UI for Angular',
|
|
21
21
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
22
|
-
publishDate:
|
|
23
|
-
version: '15.0.
|
|
22
|
+
publishDate: 1707215365,
|
|
23
|
+
version: '15.0.2-develop.2',
|
|
24
24
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
25
25
|
};
|
|
26
26
|
|
|
@@ -47,6 +47,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
47
47
|
args: ['style.cursor']
|
|
48
48
|
}] } });
|
|
49
49
|
|
|
50
|
+
function isDocumentNode(container) {
|
|
51
|
+
return container.nodeType === 9;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* @hidden
|
|
55
|
+
*/
|
|
56
|
+
const getAction = (event, draggable) => {
|
|
57
|
+
return {
|
|
58
|
+
event: event,
|
|
59
|
+
payload: draggable
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* @hidden
|
|
64
|
+
*/
|
|
65
|
+
const dragTargetTransition = 'transform .3s ease-in-out';
|
|
66
|
+
/**
|
|
67
|
+
* @hidden
|
|
68
|
+
*/
|
|
69
|
+
const isPresent = (value) => value !== null && value !== undefined;
|
|
70
|
+
/**
|
|
71
|
+
* @hidden
|
|
72
|
+
*/
|
|
73
|
+
function closestBySelector(element, selector) {
|
|
74
|
+
if (element.closest) {
|
|
75
|
+
return element.closest(selector);
|
|
76
|
+
}
|
|
77
|
+
const matches = Element.prototype.matches ?
|
|
78
|
+
(el, sel) => el.matches(sel)
|
|
79
|
+
: (el, sel) => el.msMatchesSelector(sel);
|
|
80
|
+
let node = element;
|
|
81
|
+
while (node && !isDocumentNode(node)) {
|
|
82
|
+
if (matches(node, selector)) {
|
|
83
|
+
return node;
|
|
84
|
+
}
|
|
85
|
+
node = node.parentNode;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* @hidden
|
|
90
|
+
*/
|
|
91
|
+
const intersect = (element, candidates) => {
|
|
92
|
+
let max = 0;
|
|
93
|
+
let result = null;
|
|
94
|
+
candidates.forEach((candidate) => {
|
|
95
|
+
if (candidate && element) {
|
|
96
|
+
const ration = getRatio(element, candidate);
|
|
97
|
+
if (ration > max) {
|
|
98
|
+
max = ration;
|
|
99
|
+
result = candidate;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
return result;
|
|
104
|
+
};
|
|
105
|
+
const getRatio = (element, target) => {
|
|
106
|
+
const elementRect = element.getBoundingClientRect();
|
|
107
|
+
const targetRect = target.getBoundingClientRect();
|
|
108
|
+
const top = Math.max(targetRect.top, elementRect.top);
|
|
109
|
+
const left = Math.max(targetRect.left, elementRect.left);
|
|
110
|
+
const right = Math.min(targetRect.left + targetRect.width, elementRect.left + elementRect.width);
|
|
111
|
+
const bottom = Math.min(targetRect.top + targetRect.height, elementRect.top + elementRect.height);
|
|
112
|
+
const width = right - left;
|
|
113
|
+
const height = bottom - top;
|
|
114
|
+
if (left < right && top < bottom) {
|
|
115
|
+
const targetArea = targetRect.width * targetRect.height;
|
|
116
|
+
const entryArea = elementRect.width * elementRect.height;
|
|
117
|
+
const intersectionArea = width * height;
|
|
118
|
+
const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
|
|
119
|
+
return Number(intersectionRatio.toFixed(4));
|
|
120
|
+
}
|
|
121
|
+
return 0;
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* @hidden
|
|
125
|
+
*/
|
|
126
|
+
const setElementStyles = (renderer, elem, styles) => {
|
|
127
|
+
const props = Object.keys(styles);
|
|
128
|
+
props.forEach(p => {
|
|
129
|
+
renderer.setStyle(elem, p, styles[p]);
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
/**
|
|
133
|
+
* @hidden
|
|
134
|
+
*/
|
|
135
|
+
const allPointerDownEvents = ['pointerdown', 'mousedown', 'touchstart'];
|
|
136
|
+
/**
|
|
137
|
+
* @hidden
|
|
138
|
+
*/
|
|
139
|
+
const allPointerMoveEvents = ['pointermove', 'mousemove', 'touchmove'];
|
|
140
|
+
/**
|
|
141
|
+
* @hidden
|
|
142
|
+
*/
|
|
143
|
+
const allPointerUpEvents = ['pointerup', 'pointercancel', 'mouseup', 'contextmenu', 'touchend', 'touchcancel'];
|
|
144
|
+
|
|
50
145
|
/**
|
|
51
146
|
* @hidden
|
|
52
147
|
*/
|
|
@@ -119,6 +214,12 @@ class DragStateService {
|
|
|
119
214
|
setInitialScrollOffset(initialScrollOffset) {
|
|
120
215
|
this.initialScrollOffset = initialScrollOffset;
|
|
121
216
|
}
|
|
217
|
+
get dragTargetPresent() {
|
|
218
|
+
return isPresent(this.dragTarget?.element);
|
|
219
|
+
}
|
|
220
|
+
get dropTargetPresent() {
|
|
221
|
+
return isPresent(this.dropTarget?.element);
|
|
222
|
+
}
|
|
122
223
|
updateState() {
|
|
123
224
|
this.state = {
|
|
124
225
|
drag: this.dragTarget,
|
|
@@ -169,101 +270,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
169
270
|
}]
|
|
170
271
|
}], ctorParameters: function () { return []; } });
|
|
171
272
|
|
|
172
|
-
function isDocumentNode(container) {
|
|
173
|
-
return container.nodeType === 9;
|
|
174
|
-
}
|
|
175
|
-
/**
|
|
176
|
-
* @hidden
|
|
177
|
-
*/
|
|
178
|
-
const getAction = (event, draggable) => {
|
|
179
|
-
return {
|
|
180
|
-
event: event,
|
|
181
|
-
payload: draggable
|
|
182
|
-
};
|
|
183
|
-
};
|
|
184
|
-
/**
|
|
185
|
-
* @hidden
|
|
186
|
-
*/
|
|
187
|
-
const dragTargetTransition = 'transform .3s ease-in-out';
|
|
188
|
-
/**
|
|
189
|
-
* @hidden
|
|
190
|
-
*/
|
|
191
|
-
const isPresent = (value) => value !== null && value !== undefined;
|
|
192
|
-
/**
|
|
193
|
-
* @hidden
|
|
194
|
-
*/
|
|
195
|
-
function closestBySelector(element, selector) {
|
|
196
|
-
if (element.closest) {
|
|
197
|
-
return element.closest(selector);
|
|
198
|
-
}
|
|
199
|
-
const matches = Element.prototype.matches ?
|
|
200
|
-
(el, sel) => el.matches(sel)
|
|
201
|
-
: (el, sel) => el.msMatchesSelector(sel);
|
|
202
|
-
let node = element;
|
|
203
|
-
while (node && !isDocumentNode(node)) {
|
|
204
|
-
if (matches(node, selector)) {
|
|
205
|
-
return node;
|
|
206
|
-
}
|
|
207
|
-
node = node.parentNode;
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
/**
|
|
211
|
-
* @hidden
|
|
212
|
-
*/
|
|
213
|
-
const intersect = (element, candidates) => {
|
|
214
|
-
let max = 0;
|
|
215
|
-
let result = null;
|
|
216
|
-
candidates.forEach((candidate) => {
|
|
217
|
-
if (candidate && element) {
|
|
218
|
-
const ration = getRatio(element, candidate);
|
|
219
|
-
if (ration > max) {
|
|
220
|
-
max = ration;
|
|
221
|
-
result = candidate;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
});
|
|
225
|
-
return result;
|
|
226
|
-
};
|
|
227
|
-
const getRatio = (element, target) => {
|
|
228
|
-
const elementRect = element.getBoundingClientRect();
|
|
229
|
-
const targetRect = target.getBoundingClientRect();
|
|
230
|
-
const top = Math.max(targetRect.top, elementRect.top);
|
|
231
|
-
const left = Math.max(targetRect.left, elementRect.left);
|
|
232
|
-
const right = Math.min(targetRect.left + targetRect.width, elementRect.left + elementRect.width);
|
|
233
|
-
const bottom = Math.min(targetRect.top + targetRect.height, elementRect.top + elementRect.height);
|
|
234
|
-
const width = right - left;
|
|
235
|
-
const height = bottom - top;
|
|
236
|
-
if (left < right && top < bottom) {
|
|
237
|
-
const targetArea = targetRect.width * targetRect.height;
|
|
238
|
-
const entryArea = elementRect.width * elementRect.height;
|
|
239
|
-
const intersectionArea = width * height;
|
|
240
|
-
const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
|
|
241
|
-
return Number(intersectionRatio.toFixed(4));
|
|
242
|
-
}
|
|
243
|
-
return 0;
|
|
244
|
-
};
|
|
245
|
-
/**
|
|
246
|
-
* @hidden
|
|
247
|
-
*/
|
|
248
|
-
const setElementStyles = (renderer, elem, styles) => {
|
|
249
|
-
const props = Object.keys(styles);
|
|
250
|
-
props.forEach(p => {
|
|
251
|
-
renderer.setStyle(elem, p, styles[p]);
|
|
252
|
-
});
|
|
253
|
-
};
|
|
254
|
-
/**
|
|
255
|
-
* @hidden
|
|
256
|
-
*/
|
|
257
|
-
const allPointerDownEvents = ['pointerdown', 'mousedown', 'touchstart'];
|
|
258
|
-
/**
|
|
259
|
-
* @hidden
|
|
260
|
-
*/
|
|
261
|
-
const allPointerMoveEvents = ['pointermove', 'mousemove', 'touchmove'];
|
|
262
|
-
/**
|
|
263
|
-
* @hidden
|
|
264
|
-
*/
|
|
265
|
-
const allPointerUpEvents = ['pointerup', 'pointercancel', 'mouseup', 'contextmenu', 'touchend', 'touchcancel'];
|
|
266
|
-
|
|
267
273
|
/**
|
|
268
274
|
* @hidden
|
|
269
275
|
*/
|
|
@@ -1713,7 +1719,6 @@ class DropTargetContainerDirective {
|
|
|
1713
1719
|
* Fires when a DragTarget element is dropped over the DropTarget.
|
|
1714
1720
|
*/
|
|
1715
1721
|
this.onDrop = new EventEmitter();
|
|
1716
|
-
this.currentDropTarget = null;
|
|
1717
1722
|
this.currentDropTargetElement = null;
|
|
1718
1723
|
this.previousDropTargets = [];
|
|
1719
1724
|
this._dropTargetFilter = null;
|
|
@@ -1771,13 +1776,17 @@ class DropTargetContainerDirective {
|
|
|
1771
1776
|
* @hidden
|
|
1772
1777
|
*/
|
|
1773
1778
|
handleDragEnter(event) {
|
|
1774
|
-
if (!this.service.
|
|
1779
|
+
if (!this.service.dragTargetPresent || this.service.dropTargetPresent) {
|
|
1775
1780
|
return;
|
|
1776
1781
|
}
|
|
1777
1782
|
const eventTarget = event.originalEvent.target;
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1783
|
+
const currDropTargetElem = intersect(eventTarget, this.allDropTargets);
|
|
1784
|
+
const currDropTarget = this.service.dropTargets.find(dt => dt.element === currDropTargetElem);
|
|
1785
|
+
if (!isPresent(currDropTargetElem) || !isPresent(currDropTarget)) {
|
|
1786
|
+
return;
|
|
1787
|
+
}
|
|
1788
|
+
this.currentDropTargetElement = currDropTargetElem;
|
|
1789
|
+
this.service.dropTarget = currDropTarget;
|
|
1781
1790
|
this.service.dropIndex = this.getDropIndex();
|
|
1782
1791
|
this.emitZoneAwareEvent('onDragEnter', event);
|
|
1783
1792
|
}
|
|
@@ -1785,21 +1794,19 @@ class DropTargetContainerDirective {
|
|
|
1785
1794
|
* @hidden
|
|
1786
1795
|
*/
|
|
1787
1796
|
handleDragLeave(event) {
|
|
1788
|
-
|
|
1789
|
-
if (containsEventTarget) {
|
|
1790
|
-
return;
|
|
1791
|
-
}
|
|
1792
|
-
this.service.dropTarget = null;
|
|
1793
|
-
if (!this.service.dragTarget) {
|
|
1797
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
1794
1798
|
return;
|
|
1795
1799
|
}
|
|
1796
1800
|
this.emitZoneAwareEvent('onDragLeave', event);
|
|
1801
|
+
this.currentDropTargetElement = null;
|
|
1802
|
+
this.service.dropTarget = null;
|
|
1803
|
+
this.service.dropIndex = null;
|
|
1797
1804
|
}
|
|
1798
1805
|
/**
|
|
1799
1806
|
* @hidden
|
|
1800
1807
|
*/
|
|
1801
1808
|
handleDragOver(event) {
|
|
1802
|
-
if (!this.service.
|
|
1809
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
1803
1810
|
return;
|
|
1804
1811
|
}
|
|
1805
1812
|
this.emitZoneAwareEvent('onDragOver', event);
|
|
@@ -1808,12 +1815,12 @@ class DropTargetContainerDirective {
|
|
|
1808
1815
|
* @hidden
|
|
1809
1816
|
*/
|
|
1810
1817
|
handleDrop(event) {
|
|
1811
|
-
if (!this.service.
|
|
1818
|
+
if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
|
|
1812
1819
|
return;
|
|
1813
1820
|
}
|
|
1814
1821
|
this.emitZoneAwareEvent('onDrop', event);
|
|
1815
|
-
this.currentDropTarget = null;
|
|
1816
1822
|
this.currentDropTargetElement = null;
|
|
1823
|
+
this.service.dropTarget = null;
|
|
1817
1824
|
this.service.dropIndex = null;
|
|
1818
1825
|
}
|
|
1819
1826
|
initializeDropTargets() {
|
|
@@ -1863,8 +1870,7 @@ class DropTargetContainerDirective {
|
|
|
1863
1870
|
});
|
|
1864
1871
|
}
|
|
1865
1872
|
getDropIndex() {
|
|
1866
|
-
|
|
1867
|
-
return Array.from(allTargets).indexOf(this.currentDropTargetElement);
|
|
1873
|
+
return this.allDropTargets.indexOf(this.currentDropTargetElement);
|
|
1868
1874
|
}
|
|
1869
1875
|
clearPreviousTargets() {
|
|
1870
1876
|
this.previousDropTargets.forEach(dropTarget => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-utils",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.2-develop.2",
|
|
4
4
|
"description": "Kendo UI Angular utils component",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
"@angular/core": "13 - 17",
|
|
24
24
|
"@angular/platform-browser": "13 - 17",
|
|
25
25
|
"@progress/kendo-licensing": "^1.0.2",
|
|
26
|
-
"@progress/kendo-angular-common": "15.0.
|
|
26
|
+
"@progress/kendo-angular-common": "15.0.2-develop.2",
|
|
27
27
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"tslib": "^2.3.1",
|
|
31
|
-
"@progress/kendo-angular-schematics": "15.0.
|
|
31
|
+
"@progress/kendo-angular-schematics": "15.0.2-develop.2",
|
|
32
32
|
"@progress/kendo-draggable-common": "^0.2.3"
|
|
33
33
|
},
|
|
34
34
|
"schematics": "./schematics/collection.json",
|