1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | "use strict";
|
8 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
9 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
10 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
11 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
12 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
13 | };
|
14 | var __metadata = (this && this.__metadata) || function (k, v) {
|
15 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
16 | };
|
17 | var __param = (this && this.__param) || function (paramIndex, decorator) {
|
18 | return function (target, key) { decorator(target, key, paramIndex); }
|
19 | };
|
20 | Object.defineProperty(exports, "__esModule", { value: true });
|
21 | var logger_1 = require("../logger");
|
22 | var context_1 = require("../context/context");
|
23 | var utils_1 = require("../utils");
|
24 | var gridOptionsWrapper_1 = require("../gridOptionsWrapper");
|
25 | var dragService_1 = require("./dragService");
|
26 | var columnController_1 = require("../columnController/columnController");
|
27 | var environment_1 = require("../environment");
|
28 | var DragSourceType;
|
29 | (function (DragSourceType) {
|
30 | DragSourceType[DragSourceType["ToolPanel"] = 0] = "ToolPanel";
|
31 | DragSourceType[DragSourceType["HeaderCell"] = 1] = "HeaderCell";
|
32 | DragSourceType[DragSourceType["RowDrag"] = 2] = "RowDrag";
|
33 | })(DragSourceType = exports.DragSourceType || (exports.DragSourceType = {}));
|
34 | var VDirection;
|
35 | (function (VDirection) {
|
36 | VDirection[VDirection["Up"] = 0] = "Up";
|
37 | VDirection[VDirection["Down"] = 1] = "Down";
|
38 | })(VDirection = exports.VDirection || (exports.VDirection = {}));
|
39 | var HDirection;
|
40 | (function (HDirection) {
|
41 | HDirection[HDirection["Left"] = 0] = "Left";
|
42 | HDirection[HDirection["Right"] = 1] = "Right";
|
43 | })(HDirection = exports.HDirection || (exports.HDirection = {}));
|
44 | var DragAndDropService = (function () {
|
45 | function DragAndDropService() {
|
46 | this.dragSourceAndParamsList = [];
|
47 | this.dropTargets = [];
|
48 | }
|
49 | DragAndDropService_1 = DragAndDropService;
|
50 | DragAndDropService.prototype.init = function () {
|
51 | this.ePinnedIcon = utils_1.Utils.createIcon('columnMovePin', this.gridOptionsWrapper, null);
|
52 | this.ePlusIcon = utils_1.Utils.createIcon('columnMoveAdd', this.gridOptionsWrapper, null);
|
53 | this.eHiddenIcon = utils_1.Utils.createIcon('columnMoveHide', this.gridOptionsWrapper, null);
|
54 | this.eMoveIcon = utils_1.Utils.createIcon('columnMoveMove', this.gridOptionsWrapper, null);
|
55 | this.eLeftIcon = utils_1.Utils.createIcon('columnMoveLeft', this.gridOptionsWrapper, null);
|
56 | this.eRightIcon = utils_1.Utils.createIcon('columnMoveRight', this.gridOptionsWrapper, null);
|
57 | this.eGroupIcon = utils_1.Utils.createIcon('columnMoveGroup', this.gridOptionsWrapper, null);
|
58 | this.eAggregateIcon = utils_1.Utils.createIcon('columnMoveValue', this.gridOptionsWrapper, null);
|
59 | this.ePivotIcon = utils_1.Utils.createIcon('columnMovePivot', this.gridOptionsWrapper, null);
|
60 | this.eDropNotAllowedIcon = utils_1.Utils.createIcon('dropNotAllowed', this.gridOptionsWrapper, null);
|
61 | };
|
62 | DragAndDropService.prototype.setBeans = function (loggerFactory) {
|
63 | this.logger = loggerFactory.create('OldToolPanelDragAndDropService');
|
64 | };
|
65 | DragAndDropService.prototype.getStringType = function (type) {
|
66 | switch (type) {
|
67 | case DragSourceType.RowDrag: return 'row';
|
68 | case DragSourceType.HeaderCell: return 'headerCell';
|
69 | case DragSourceType.ToolPanel: return 'toolPanel';
|
70 | default:
|
71 | console.warn("ag-Grid: bug - unknown drag type " + type);
|
72 | return null;
|
73 | }
|
74 | };
|
75 | DragAndDropService.prototype.addDragSource = function (dragSource, allowTouch) {
|
76 | if (allowTouch === void 0) { allowTouch = false; }
|
77 | var params = {
|
78 | eElement: dragSource.eElement,
|
79 | dragStartPixels: dragSource.dragStartPixels,
|
80 | onDragStart: this.onDragStart.bind(this, dragSource),
|
81 | onDragStop: this.onDragStop.bind(this),
|
82 | onDragging: this.onDragging.bind(this)
|
83 | };
|
84 | this.dragSourceAndParamsList.push({ params: params, dragSource: dragSource });
|
85 | this.dragService.addDragSource(params, allowTouch);
|
86 | };
|
87 | DragAndDropService.prototype.removeDragSource = function (dragSource) {
|
88 | var sourceAndParams = utils_1.Utils.find(this.dragSourceAndParamsList, function (item) { return item.dragSource === dragSource; });
|
89 | if (sourceAndParams) {
|
90 | this.dragService.removeDragSource(sourceAndParams.params);
|
91 | utils_1.Utils.removeFromArray(this.dragSourceAndParamsList, sourceAndParams);
|
92 | }
|
93 | };
|
94 | DragAndDropService.prototype.destroy = function () {
|
95 | var _this = this;
|
96 | this.dragSourceAndParamsList.forEach(function (sourceAndParams) {
|
97 | _this.dragService.removeDragSource(sourceAndParams.params);
|
98 | });
|
99 | this.dragSourceAndParamsList.length = 0;
|
100 | };
|
101 | DragAndDropService.prototype.nudge = function () {
|
102 | if (this.dragging) {
|
103 | this.onDragging(this.eventLastTime, true);
|
104 | }
|
105 | };
|
106 | DragAndDropService.prototype.onDragStart = function (dragSource, mouseEvent) {
|
107 | this.dragging = true;
|
108 | this.dragSource = dragSource;
|
109 | this.eventLastTime = mouseEvent;
|
110 | this.dragItem = this.dragSource.dragItemCallback();
|
111 | this.lastDropTarget = this.dragSource.dragSourceDropTarget;
|
112 | if (this.dragSource.dragStarted) {
|
113 | this.dragSource.dragStarted();
|
114 | }
|
115 | this.createGhost();
|
116 | };
|
117 | DragAndDropService.prototype.onDragStop = function (mouseEvent) {
|
118 | this.eventLastTime = null;
|
119 | this.dragging = false;
|
120 | if (this.dragSource.dragStopped) {
|
121 | this.dragSource.dragStopped();
|
122 | }
|
123 | if (this.lastDropTarget && this.lastDropTarget.onDragStop) {
|
124 | var draggingEvent = this.createDropTargetEvent(this.lastDropTarget, mouseEvent, null, null, false);
|
125 | this.lastDropTarget.onDragStop(draggingEvent);
|
126 | }
|
127 | this.lastDropTarget = null;
|
128 | this.dragItem = null;
|
129 | this.removeGhost();
|
130 | };
|
131 | DragAndDropService.prototype.onDragging = function (mouseEvent, fromNudge) {
|
132 | var hDirection = this.workOutHDirection(mouseEvent);
|
133 | var vDirection = this.workOutVDirection(mouseEvent);
|
134 | this.eventLastTime = mouseEvent;
|
135 | this.positionGhost(mouseEvent);
|
136 |
|
137 | var dropTarget = utils_1.Utils.find(this.dropTargets, this.isMouseOnDropTarget.bind(this, mouseEvent));
|
138 | if (dropTarget !== this.lastDropTarget) {
|
139 | this.leaveLastTargetIfExists(mouseEvent, hDirection, vDirection, fromNudge);
|
140 | this.enterDragTargetIfExists(dropTarget, mouseEvent, hDirection, vDirection, fromNudge);
|
141 | this.lastDropTarget = dropTarget;
|
142 | }
|
143 | else if (dropTarget) {
|
144 | var draggingEvent = this.createDropTargetEvent(dropTarget, mouseEvent, hDirection, vDirection, fromNudge);
|
145 | dropTarget.onDragging(draggingEvent);
|
146 | }
|
147 | };
|
148 | DragAndDropService.prototype.enterDragTargetIfExists = function (dropTarget, mouseEvent, hDirection, vDirection, fromNudge) {
|
149 | if (!dropTarget) {
|
150 | return;
|
151 | }
|
152 | var dragEnterEvent = this.createDropTargetEvent(dropTarget, mouseEvent, hDirection, vDirection, fromNudge);
|
153 | dropTarget.onDragEnter(dragEnterEvent);
|
154 | this.setGhostIcon(dropTarget.getIconName ? dropTarget.getIconName() : null);
|
155 | };
|
156 | DragAndDropService.prototype.leaveLastTargetIfExists = function (mouseEvent, hDirection, vDirection, fromNudge) {
|
157 | if (!this.lastDropTarget) {
|
158 | return;
|
159 | }
|
160 | var dragLeaveEvent = this.createDropTargetEvent(this.lastDropTarget, mouseEvent, hDirection, vDirection, fromNudge);
|
161 | this.lastDropTarget.onDragLeave(dragLeaveEvent);
|
162 | this.setGhostIcon(null);
|
163 | };
|
164 | DragAndDropService.prototype.getAllContainersFromDropTarget = function (dropTarget) {
|
165 | var containers = [dropTarget.getContainer()];
|
166 | var secondaryContainers = dropTarget.getSecondaryContainers ? dropTarget.getSecondaryContainers() : null;
|
167 | if (secondaryContainers) {
|
168 | containers = containers.concat(secondaryContainers);
|
169 | }
|
170 | return containers;
|
171 | };
|
172 |
|
173 | DragAndDropService.prototype.isMouseOnDropTarget = function (mouseEvent, dropTarget) {
|
174 | var allContainers = this.getAllContainersFromDropTarget(dropTarget);
|
175 | var mouseOverTarget = false;
|
176 | allContainers.forEach(function (eContainer) {
|
177 | if (!eContainer) {
|
178 | return;
|
179 | }
|
180 | var rect = eContainer.getBoundingClientRect();
|
181 |
|
182 | if (rect.width === 0 || rect.height === 0) {
|
183 | return;
|
184 | }
|
185 | var horizontalFit = mouseEvent.clientX >= rect.left && mouseEvent.clientX <= rect.right;
|
186 | var verticalFit = mouseEvent.clientY >= rect.top && mouseEvent.clientY <= rect.bottom;
|
187 |
|
188 | if (horizontalFit && verticalFit) {
|
189 | mouseOverTarget = true;
|
190 | }
|
191 | });
|
192 | if (mouseOverTarget) {
|
193 | var mouseOverTargetAndInterested = dropTarget.isInterestedIn(this.dragSource.type);
|
194 | return mouseOverTargetAndInterested;
|
195 | }
|
196 | else {
|
197 | return false;
|
198 | }
|
199 | };
|
200 | DragAndDropService.prototype.addDropTarget = function (dropTarget) {
|
201 | this.dropTargets.push(dropTarget);
|
202 | };
|
203 | DragAndDropService.prototype.workOutHDirection = function (event) {
|
204 | if (this.eventLastTime.clientX > event.clientX) {
|
205 | return HDirection.Left;
|
206 | }
|
207 | else if (this.eventLastTime.clientX < event.clientX) {
|
208 | return HDirection.Right;
|
209 | }
|
210 | else {
|
211 | return null;
|
212 | }
|
213 | };
|
214 | DragAndDropService.prototype.workOutVDirection = function (event) {
|
215 | if (this.eventLastTime.clientY > event.clientY) {
|
216 | return VDirection.Up;
|
217 | }
|
218 | else if (this.eventLastTime.clientY < event.clientY) {
|
219 | return VDirection.Down;
|
220 | }
|
221 | else {
|
222 | return null;
|
223 | }
|
224 | };
|
225 | DragAndDropService.prototype.createDropTargetEvent = function (dropTarget, event, hDirection, vDirection, fromNudge) {
|
226 |
|
227 | var rect = dropTarget.getContainer().getBoundingClientRect();
|
228 | var x = event.clientX - rect.left;
|
229 | var y = event.clientY - rect.top;
|
230 | var dropTargetEvent = {
|
231 | event: event,
|
232 | x: x,
|
233 | y: y,
|
234 | vDirection: vDirection,
|
235 | hDirection: hDirection,
|
236 | dragSource: this.dragSource,
|
237 | fromNudge: fromNudge,
|
238 | dragItem: this.dragItem
|
239 | };
|
240 | return dropTargetEvent;
|
241 | };
|
242 | DragAndDropService.prototype.positionGhost = function (event) {
|
243 | var ghostRect = this.eGhost.getBoundingClientRect();
|
244 | var ghostHeight = ghostRect.height;
|
245 |
|
246 |
|
247 |
|
248 | var browserWidth = utils_1.Utils.getBodyWidth() - 2;
|
249 | var browserHeight = utils_1.Utils.getBodyHeight() - 2;
|
250 |
|
251 | var top = event.pageY - (ghostHeight / 2);
|
252 |
|
253 | var left = event.pageX - 30;
|
254 | var usrDocument = this.gridOptionsWrapper.getDocument();
|
255 | var windowScrollY = window.pageYOffset || usrDocument.documentElement.scrollTop;
|
256 | var windowScrollX = window.pageXOffset || usrDocument.documentElement.scrollLeft;
|
257 |
|
258 | if (browserWidth > 0) {
|
259 | if ((left + this.eGhost.clientWidth) > (browserWidth + windowScrollX)) {
|
260 | left = browserWidth + windowScrollX - this.eGhost.clientWidth;
|
261 | }
|
262 | }
|
263 | if (left < 0) {
|
264 | left = 0;
|
265 | }
|
266 | if (browserHeight > 0) {
|
267 | if ((top + this.eGhost.clientHeight) > (browserHeight + windowScrollY)) {
|
268 | top = browserHeight + windowScrollY - this.eGhost.clientHeight;
|
269 | }
|
270 | }
|
271 | if (top < 0) {
|
272 | top = 0;
|
273 | }
|
274 | this.eGhost.style.left = left + 'px';
|
275 | this.eGhost.style.top = top + 'px';
|
276 | };
|
277 | DragAndDropService.prototype.removeGhost = function () {
|
278 | if (this.eGhost && this.eGhostParent) {
|
279 | this.eGhostParent.removeChild(this.eGhost);
|
280 | }
|
281 | this.eGhost = null;
|
282 | };
|
283 | DragAndDropService.prototype.createGhost = function () {
|
284 | this.eGhost = utils_1.Utils.loadTemplate(DragAndDropService_1.GHOST_TEMPLATE);
|
285 | utils_1.Utils.addCssClass(this.eGhost, this.environment.getTheme());
|
286 | this.eGhostIcon = this.eGhost.querySelector('.ag-dnd-ghost-icon');
|
287 | this.setGhostIcon(null);
|
288 | var eText = this.eGhost.querySelector('.ag-dnd-ghost-label');
|
289 | eText.innerHTML = this.dragSource.dragItemName;
|
290 | this.eGhost.style.height = '25px';
|
291 | this.eGhost.style.top = '20px';
|
292 | this.eGhost.style.left = '20px';
|
293 | var usrDocument = this.gridOptionsWrapper.getDocument();
|
294 | this.eGhostParent = usrDocument.querySelector('body');
|
295 | if (!this.eGhostParent) {
|
296 | console.warn('ag-Grid: could not find document body, it is needed for dragging columns');
|
297 | }
|
298 | else {
|
299 | this.eGhostParent.appendChild(this.eGhost);
|
300 | }
|
301 | };
|
302 | DragAndDropService.prototype.setGhostIcon = function (iconName, shake) {
|
303 | if (shake === void 0) { shake = false; }
|
304 | utils_1.Utils.removeAllChildren(this.eGhostIcon);
|
305 | var eIcon;
|
306 | switch (iconName) {
|
307 | case DragAndDropService_1.ICON_ADD:
|
308 | eIcon = this.ePlusIcon;
|
309 | break;
|
310 | case DragAndDropService_1.ICON_PINNED:
|
311 | eIcon = this.ePinnedIcon;
|
312 | break;
|
313 | case DragAndDropService_1.ICON_MOVE:
|
314 | eIcon = this.eMoveIcon;
|
315 | break;
|
316 | case DragAndDropService_1.ICON_LEFT:
|
317 | eIcon = this.eLeftIcon;
|
318 | break;
|
319 | case DragAndDropService_1.ICON_RIGHT:
|
320 | eIcon = this.eRightIcon;
|
321 | break;
|
322 | case DragAndDropService_1.ICON_GROUP:
|
323 | eIcon = this.eGroupIcon;
|
324 | break;
|
325 | case DragAndDropService_1.ICON_AGGREGATE:
|
326 | eIcon = this.eAggregateIcon;
|
327 | break;
|
328 | case DragAndDropService_1.ICON_PIVOT:
|
329 | eIcon = this.ePivotIcon;
|
330 | break;
|
331 | case DragAndDropService_1.ICON_NOT_ALLOWED:
|
332 | eIcon = this.eDropNotAllowedIcon;
|
333 | break;
|
334 | default:
|
335 | eIcon = this.eHiddenIcon;
|
336 | break;
|
337 | }
|
338 | this.eGhostIcon.appendChild(eIcon);
|
339 | utils_1.Utils.addOrRemoveCssClass(this.eGhostIcon, 'ag-shake-left-to-right', shake);
|
340 | };
|
341 | DragAndDropService.ICON_PINNED = 'pinned';
|
342 | DragAndDropService.ICON_ADD = 'add';
|
343 | DragAndDropService.ICON_MOVE = 'move';
|
344 | DragAndDropService.ICON_LEFT = 'left';
|
345 | DragAndDropService.ICON_RIGHT = 'right';
|
346 | DragAndDropService.ICON_GROUP = 'group';
|
347 | DragAndDropService.ICON_AGGREGATE = 'aggregate';
|
348 | DragAndDropService.ICON_PIVOT = 'pivot';
|
349 | DragAndDropService.ICON_NOT_ALLOWED = 'notAllowed';
|
350 | DragAndDropService.GHOST_TEMPLATE = '<div class="ag-dnd-ghost">' +
|
351 | ' <span class="ag-dnd-ghost-icon ag-shake-left-to-right"></span>' +
|
352 | ' <div class="ag-dnd-ghost-label">' +
|
353 | ' </div>' +
|
354 | '</div>';
|
355 | __decorate([
|
356 | context_1.Autowired('gridOptionsWrapper'),
|
357 | __metadata("design:type", gridOptionsWrapper_1.GridOptionsWrapper)
|
358 | ], DragAndDropService.prototype, "gridOptionsWrapper", void 0);
|
359 | __decorate([
|
360 | context_1.Autowired('dragService'),
|
361 | __metadata("design:type", dragService_1.DragService)
|
362 | ], DragAndDropService.prototype, "dragService", void 0);
|
363 | __decorate([
|
364 | context_1.Autowired('environment'),
|
365 | __metadata("design:type", environment_1.Environment)
|
366 | ], DragAndDropService.prototype, "environment", void 0);
|
367 | __decorate([
|
368 | context_1.Autowired('columnController'),
|
369 | __metadata("design:type", columnController_1.ColumnController)
|
370 | ], DragAndDropService.prototype, "columnController", void 0);
|
371 | __decorate([
|
372 | context_1.PostConstruct,
|
373 | __metadata("design:type", Function),
|
374 | __metadata("design:paramtypes", []),
|
375 | __metadata("design:returntype", void 0)
|
376 | ], DragAndDropService.prototype, "init", null);
|
377 | __decorate([
|
378 | __param(0, context_1.Qualifier('loggerFactory')),
|
379 | __metadata("design:type", Function),
|
380 | __metadata("design:paramtypes", [logger_1.LoggerFactory]),
|
381 | __metadata("design:returntype", void 0)
|
382 | ], DragAndDropService.prototype, "setBeans", null);
|
383 | __decorate([
|
384 | context_1.PreDestroy,
|
385 | __metadata("design:type", Function),
|
386 | __metadata("design:paramtypes", []),
|
387 | __metadata("design:returntype", void 0)
|
388 | ], DragAndDropService.prototype, "destroy", null);
|
389 | DragAndDropService = DragAndDropService_1 = __decorate([
|
390 | context_1.Bean('dragAndDropService')
|
391 | ], DragAndDropService);
|
392 | return DragAndDropService;
|
393 | var DragAndDropService_1;
|
394 | }());
|
395 | exports.DragAndDropService = DragAndDropService;
|