@refinitiv-ui/efx-grid 6.0.30 → 6.0.32
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/lib/core/dist/core.js +310 -117
- package/lib/core/dist/core.min.js +1 -1
- package/lib/core/es6/grid/Core.js +53 -28
- package/lib/core/es6/grid/ILayoutGrid.js +3 -3
- package/lib/core/es6/grid/LayoutGrid.js +67 -23
- package/lib/core/es6/grid/VirtualizedLayoutGrid.js +92 -55
- package/lib/core/es6/grid/components/Scrollbar.js +19 -1
- package/lib/core/es6/grid/util/SelectionList.d.ts +6 -2
- package/lib/core/es6/grid/util/SelectionList.js +76 -7
- package/lib/filter-dialog/lib/filter-dialog.js +11 -8
- package/lib/filter-dialog/themes/base.less +7 -3
- package/lib/filter-dialog/themes/elemental/dark/es5/all-elements.js +1 -1
- package/lib/filter-dialog/themes/elemental/dark/filter-dialog.js +1 -1
- package/lib/filter-dialog/themes/elemental/light/es5/all-elements.js +1 -1
- package/lib/filter-dialog/themes/elemental/light/filter-dialog.js +1 -1
- package/lib/filter-dialog/themes/halo/dark/es5/all-elements.js +1 -1
- package/lib/filter-dialog/themes/halo/dark/filter-dialog.js +1 -1
- package/lib/filter-dialog/themes/halo/light/es5/all-elements.js +1 -1
- package/lib/filter-dialog/themes/halo/light/filter-dialog.js +1 -1
- package/lib/filter-dialog/themes/solar/charcoal/es5/all-elements.js +1 -1
- package/lib/filter-dialog/themes/solar/charcoal/filter-dialog.js +1 -1
- package/lib/filter-dialog/themes/solar/pearl/es5/all-elements.js +1 -1
- package/lib/filter-dialog/themes/solar/pearl/filter-dialog.js +1 -1
- package/lib/grid/index.js +1 -1
- package/lib/statistics-row/es6/StatisticsRow.d.ts +25 -25
- package/lib/statistics-row/es6/StatisticsRow.js +9 -4
- package/lib/tr-grid-column-selection/es6/ColumnSelection.d.ts +2 -0
- package/lib/tr-grid-column-selection/es6/ColumnSelection.js +14 -0
- package/lib/tr-grid-content-wrap/es6/ContentWrap.d.ts +4 -4
- package/lib/tr-grid-content-wrap/es6/ContentWrap.js +116 -70
- package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts +23 -1
- package/lib/tr-grid-row-dragging/es6/RowDragging.js +339 -40
- package/lib/tr-grid-util/es6/DragUI.d.ts +2 -0
- package/lib/tr-grid-util/es6/DragUI.js +39 -9
- package/lib/tr-grid-util/es6/Popup.d.ts +3 -1
- package/lib/tr-grid-util/es6/Popup.js +57 -23
- package/lib/types/es6/ContentWrap.d.ts +4 -4
- package/lib/types/es6/RealtimeGrid/ColumnDefinition.d.ts +2 -0
- package/lib/types/es6/RealtimeGrid/FieldDefinition.d.ts +4 -0
- package/lib/types/es6/RealtimeGrid/Grid.d.ts +1 -0
- package/lib/versions.json +6 -6
- package/package.json +1 -1
@@ -75,6 +75,10 @@ var RowDraggingPlugin = function (options) {
|
|
75
75
|
t._onDragEnd = t._onDragEnd.bind(t);
|
76
76
|
t._onThemeLoaded = t._onThemeLoaded.bind(t);
|
77
77
|
|
78
|
+
t._onJETDrop = t._onJETDrop.bind(t);
|
79
|
+
t._onJETDragOver = t._onJETDragOver.bind(t);
|
80
|
+
t._delayStart = t._delayStart.bind(t);
|
81
|
+
|
78
82
|
t._hosts = [];
|
79
83
|
|
80
84
|
t._guideline = document.createElement("div"); // Test IE mouse event, guildline close mouse event
|
@@ -198,6 +202,30 @@ RowDraggingPlugin.prototype._autoScroll = true;
|
|
198
202
|
* @private
|
199
203
|
*/
|
200
204
|
RowDraggingPlugin.prototype._dragUI = null;
|
205
|
+
/** @type {number}
|
206
|
+
* @private
|
207
|
+
*/
|
208
|
+
RowDraggingPlugin.prototype._timerId = -1;
|
209
|
+
/** @type {boolean}
|
210
|
+
* @private
|
211
|
+
*/
|
212
|
+
RowDraggingPlugin.prototype._jetDnD = false;
|
213
|
+
/** @type {Object}
|
214
|
+
* @private
|
215
|
+
*/
|
216
|
+
RowDraggingPlugin.prototype._jetDragContent = null;
|
217
|
+
/** @type {boolean}
|
218
|
+
* @private
|
219
|
+
*/
|
220
|
+
RowDraggingPlugin.prototype._jetContentHasRic = false;
|
221
|
+
/** @type {boolean}
|
222
|
+
* @private
|
223
|
+
*/
|
224
|
+
RowDraggingPlugin.prototype._jetContentHasField = false;
|
225
|
+
/** @type {string}
|
226
|
+
* @private
|
227
|
+
*/
|
228
|
+
RowDraggingPlugin.prototype._entryPoint = "";
|
201
229
|
|
202
230
|
/** @private Applied theme color in row dragging and dragUI
|
203
231
|
* @param {Object} host core grid instance
|
@@ -337,7 +365,11 @@ RowDraggingPlugin.prototype.config = function (options) {
|
|
337
365
|
|
338
366
|
if (typeof extOptions["dragBoxRenderer"] === "function") {
|
339
367
|
this._dragBoxRenderer = extOptions["dragBoxRenderer"];
|
340
|
-
|
368
|
+
var className = "drag-box";
|
369
|
+
if (ElfUtil.getElfVersion() < 3) {
|
370
|
+
className = "tr-dragbox content-dragging"; // Keep backward compatibility
|
371
|
+
}
|
372
|
+
this._dragBox.className = className;
|
341
373
|
} else {
|
342
374
|
this._dragBox.className = "drag-box-disabled"; // set disable drag-box
|
343
375
|
}
|
@@ -389,38 +421,10 @@ RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
|
|
389
421
|
};
|
390
422
|
|
391
423
|
/** @public
|
392
|
-
* @param {
|
393
|
-
* @param {boolean=} opt_suppressEvent
|
424
|
+
* @param {*=} startRef
|
394
425
|
*/
|
395
426
|
RowDraggingPlugin.prototype.startDrag = function (startRef) {
|
396
|
-
|
397
|
-
if (this._disabled) {
|
398
|
-
return;
|
399
|
-
}
|
400
|
-
|
401
|
-
var pos;
|
402
|
-
if (startRef) {
|
403
|
-
if (startRef.type === "dragstart") {
|
404
|
-
if(startRef["preventDefault"]) {
|
405
|
-
Dom.preventDefault(startRef);
|
406
|
-
}
|
407
|
-
var host = this.getRelativeGrid(startRef);
|
408
|
-
if (host) {
|
409
|
-
pos = host.getRelativePosition(this._dragTarget);
|
410
|
-
}
|
411
|
-
} else {
|
412
|
-
pos = this._hitTest(startRef);
|
413
|
-
}
|
414
|
-
} else {
|
415
|
-
var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
|
416
|
-
pos = this._hitTest(target);
|
417
|
-
}
|
418
|
-
|
419
|
-
if (_isInContentSection(pos)) {
|
420
|
-
this._clearCache();
|
421
|
-
this._pos = pos;
|
422
|
-
this._onDragStart(startRef);
|
423
|
-
}
|
427
|
+
this._startDrag(false, startRef); // Start without delay start
|
424
428
|
};
|
425
429
|
/** @public */
|
426
430
|
RowDraggingPlugin.prototype.stopDrag = function () {
|
@@ -469,6 +473,114 @@ RowDraggingPlugin.prototype.disableUIs = function (disabled) {
|
|
469
473
|
this._uiDisabled = disabled !== false;
|
470
474
|
};
|
471
475
|
|
476
|
+
/** @public
|
477
|
+
* @param {boolean=} allowed
|
478
|
+
*/
|
479
|
+
RowDraggingPlugin.prototype.allowDrag = function (allowed) {
|
480
|
+
if(this._pos) {// WARNING: Please note that this method is intent to be used by client, and not for internal use
|
481
|
+
this._pos["invalidTarget"] = (allowed === false);
|
482
|
+
}
|
483
|
+
};
|
484
|
+
|
485
|
+
/** @public
|
486
|
+
* @function
|
487
|
+
* @param {boolean=} allowed
|
488
|
+
*/
|
489
|
+
RowDraggingPlugin.prototype.allowDrop = RowDraggingPlugin.prototype.allowDrag;
|
490
|
+
|
491
|
+
/** @public
|
492
|
+
* @param {*} content Element, Node, string, number, or everything else.
|
493
|
+
*/
|
494
|
+
RowDraggingPlugin.prototype.setDragContent = function (content) {
|
495
|
+
this._dragUI.setContent(content);
|
496
|
+
};
|
497
|
+
|
498
|
+
/** @public
|
499
|
+
* @return {Element}
|
500
|
+
*/
|
501
|
+
RowDraggingPlugin.prototype.getDragBox = function () {
|
502
|
+
return this._dragBox;
|
503
|
+
};
|
504
|
+
|
505
|
+
/** @public
|
506
|
+
* @return {string}
|
507
|
+
*/
|
508
|
+
RowDraggingPlugin.prototype.getDragSource = function () {
|
509
|
+
return this._entryPoint;
|
510
|
+
};
|
511
|
+
|
512
|
+
/** @public
|
513
|
+
* @return {boolean}
|
514
|
+
*/
|
515
|
+
RowDraggingPlugin.prototype.isDragging = function () {
|
516
|
+
return this._dragging;
|
517
|
+
};
|
518
|
+
|
519
|
+
/** @public
|
520
|
+
* @param {boolean=} disabled
|
521
|
+
*/
|
522
|
+
RowDraggingPlugin.prototype.disableDragging = function (disabled) {
|
523
|
+
this._disabled = disabled !== false;
|
524
|
+
};
|
525
|
+
|
526
|
+
/** @public
|
527
|
+
* @param {boolean=} enabled
|
528
|
+
*/
|
529
|
+
RowDraggingPlugin.prototype.enableJETDragAndDrop = function (enabled) {
|
530
|
+
var val = enabled !== false;
|
531
|
+
if(this._jetDnD === val) { return; }
|
532
|
+
|
533
|
+
this._jetDnD = val;
|
534
|
+
|
535
|
+
var jet = window["JET"];
|
536
|
+
if (jet) {
|
537
|
+
//If ContainerDescription is undefined, that means JET is not initalized. Mostlikely the app
|
538
|
+
//is running the local development mode without container. Disable dnd in this case
|
539
|
+
if (jet["ContainerDescription"] && (jet["ContainerDescription"]["name"] !== "EikonNowContainer")) {
|
540
|
+
if (this._jetDnD) {
|
541
|
+
jet["onDrop"](this._onJETDrop);
|
542
|
+
jet["onDragOver"](this._onJETDragOver);
|
543
|
+
jet["onDragLeave"](this.stopDrag);
|
544
|
+
} else {
|
545
|
+
jet["onDrop"](null);
|
546
|
+
jet["onDragOver"](null);
|
547
|
+
jet["onDragLeave"](null);
|
548
|
+
}
|
549
|
+
} else {
|
550
|
+
this._jetDnD = false;
|
551
|
+
}
|
552
|
+
}
|
553
|
+
};
|
554
|
+
|
555
|
+
/** @public
|
556
|
+
* @return {Object}
|
557
|
+
*/
|
558
|
+
RowDraggingPlugin.prototype.getJETDragContent = function () {
|
559
|
+
return this._jetDragContent;
|
560
|
+
};
|
561
|
+
|
562
|
+
/** @public
|
563
|
+
* @param {Object} content
|
564
|
+
*/
|
565
|
+
RowDraggingPlugin.prototype.setJETDragContent = function (content) {
|
566
|
+
this._jetDragContent = content;
|
567
|
+
|
568
|
+
var tr = window["tr"];
|
569
|
+
var grid = (tr) ? tr["grid"] : null;
|
570
|
+
var JetDragContent = (grid) ? grid["JetDragContent"] : null;
|
571
|
+
if (content && JetDragContent) {
|
572
|
+
var jetDragContentMgr = new JetDragContent(content);
|
573
|
+
var rics = jetDragContentMgr["getRicsToDrop"]();
|
574
|
+
var fields = jetDragContentMgr["getFieldsToDrop"]();
|
575
|
+
|
576
|
+
this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
|
577
|
+
this._jetContentHasField = (fields && fields.length > 0) ? true : false;
|
578
|
+
} else {
|
579
|
+
this._jetContentHasRic = false;
|
580
|
+
this._jetContentHasField = false;
|
581
|
+
}
|
582
|
+
};
|
583
|
+
|
472
584
|
/** @private
|
473
585
|
* @param {*} e
|
474
586
|
* @return {!Object}
|
@@ -503,25 +615,41 @@ RowDraggingPlugin.prototype._onMouseDown = function (e) {
|
|
503
615
|
this._touchMode = true;
|
504
616
|
}
|
505
617
|
this._dragTarget = /** @type{Element} */(e.target);
|
618
|
+
this._setEntryPoint("grid");
|
506
619
|
};
|
507
620
|
/** @private
|
508
621
|
* @param {*=} e
|
622
|
+
* @param {boolean=} fromJET
|
509
623
|
*/
|
510
|
-
RowDraggingPlugin.prototype._onDragStart = function (e) {
|
624
|
+
RowDraggingPlugin.prototype._onDragStart = function (e, fromJET) {
|
511
625
|
if (this._dragging) { return; }
|
512
626
|
if (!this._pos) { return; }
|
513
627
|
|
514
|
-
this.
|
515
|
-
|
516
|
-
|
628
|
+
this._listenAbortActions(false); // Unlisen abort action
|
629
|
+
|
630
|
+
var useJetDragStart = false;
|
631
|
+
var jet = window["JET"];
|
632
|
+
if (fromJET) {
|
633
|
+
useJetDragStart = true;
|
634
|
+
} else {
|
635
|
+
this._dispatch("dragStart", /** @type{!Object} */(this._pos));
|
636
|
+
if(this._isDragCancelled()) {
|
637
|
+
return; // User does not allow this drag to happen
|
638
|
+
}
|
639
|
+
if (jet && this._jetDnD && this._jetDragContent) {
|
640
|
+
useJetDragStart = true;
|
641
|
+
jet["dragStart"](this._jetDragContent);
|
642
|
+
}
|
517
643
|
}
|
518
644
|
|
519
645
|
this._dragging = true;
|
520
646
|
// Event listeners
|
521
647
|
document.body.classList.add("tr-dragging"); // Prevent text selection
|
522
648
|
|
523
|
-
|
524
|
-
|
649
|
+
if (!useJetDragStart) { // WARNING: JET wrongly intercepts all mouse events without app's consent
|
650
|
+
window.addEventListener("mousemove", this._onMouseMove, false);
|
651
|
+
window.addEventListener("touchmove", this._onMouseMove, false);
|
652
|
+
}
|
525
653
|
window.addEventListener("mouseup", this._onDragEnd, false);
|
526
654
|
window.addEventListener("touchend", this._onDragEnd, false);
|
527
655
|
window.addEventListener("touchcancel", this._onDragEnd, false);
|
@@ -601,12 +729,20 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
|
|
601
729
|
|
602
730
|
this._pos = this._hitTest(e); // A new object is created
|
603
731
|
|
604
|
-
|
732
|
+
var dropable = true;
|
733
|
+
if(this._entryPoint === 'JET' && !this._jetContentHasRic) {
|
734
|
+
dropable = false;
|
735
|
+
}
|
736
|
+
|
737
|
+
if(dropable) {
|
738
|
+
this._updateGuidePosition(e);
|
739
|
+
}
|
740
|
+
|
605
741
|
this._pos.dragBox = this._dragBox; // assign dragBox for user determine valid target
|
606
742
|
|
607
743
|
// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
|
608
744
|
this._dispatch("drag", this._pos);
|
609
|
-
if(!this._uiDisabled) {
|
745
|
+
if(!this._uiDisabled && dropable) {
|
610
746
|
e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
|
611
747
|
var drop = this._dragUI.renderDragBox(e, this._startingGrid);
|
612
748
|
if(!drop) { // can not be drop or not allow to drop or insertion
|
@@ -655,7 +791,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
|
|
655
791
|
// WARNING: dropTarget is not correct for element in a shadow root
|
656
792
|
destPos["dropTarget"] = e ? e.target : null;
|
657
793
|
|
658
|
-
if (this._dataTransfer && _isInContentSection(this._pos)) {
|
794
|
+
if (!this._jetDnD && this._dataTransfer && _isInContentSection(this._pos)) {
|
659
795
|
var destGrid = destPos["grid"] || srcGrid;
|
660
796
|
var destRowIndex = destPos["rowIndex"];
|
661
797
|
|
@@ -668,10 +804,26 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
|
|
668
804
|
|
669
805
|
this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, destPos);
|
670
806
|
}
|
807
|
+
|
808
|
+
// Extend event property
|
809
|
+
var cellElement = destPos["cellElement"];
|
810
|
+
var isRight = 0;
|
811
|
+
|
812
|
+
if (e && cellElement) {
|
813
|
+
var rect = cellElement.getBoundingClientRect();
|
814
|
+
var offsetX = (e["clientX"] - rect["left"]) / destPos["zoomFactor"];
|
815
|
+
isRight = Math.round(offsetX / cellElement.offsetWidth);
|
816
|
+
}
|
817
|
+
|
818
|
+
destPos["colIndex"] += isRight;
|
819
|
+
destPos["currentPosition"] = destPos; // To support JET requirement
|
820
|
+
destPos["data"] = this._jetDragContent;
|
821
|
+
destPos["dropTarget"] = e.target;
|
671
822
|
}
|
672
823
|
|
673
824
|
this._dispatch("dragEnd", destPos || {}); // Always fire drag end for client to clean up its resource
|
674
825
|
this._clearCache();
|
826
|
+
this._jetDragContent = null;
|
675
827
|
};
|
676
828
|
/** @private
|
677
829
|
* @param {Array.<number>|string} srcRowRef
|
@@ -840,6 +992,153 @@ RowDraggingPlugin.prototype._onDragPulse = function () {
|
|
840
992
|
}
|
841
993
|
};
|
842
994
|
|
995
|
+
/** @public
|
996
|
+
* @param {Object} content
|
997
|
+
*/
|
998
|
+
RowDraggingPlugin.prototype.setJETDragContent = function (content) {
|
999
|
+
this._jetDragContent = content;
|
1000
|
+
|
1001
|
+
var t = window["tr"];
|
1002
|
+
var g = (t) ? t["grid"] : null;
|
1003
|
+
var jdc = (g) ? g["JetDragContent"] : null;
|
1004
|
+
if (content && jdc) {
|
1005
|
+
var jetDragContentMgr = new jdc(content);
|
1006
|
+
var rics = jetDragContentMgr["getRicsToDrop"]();
|
1007
|
+
var fields = jetDragContentMgr["getFieldsToDrop"]();
|
1008
|
+
|
1009
|
+
this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
|
1010
|
+
this._jetContentHasField = (fields && fields.length > 0) ? true : false;
|
1011
|
+
} else {
|
1012
|
+
this._jetContentHasRic = false;
|
1013
|
+
this._jetContentHasField = false;
|
1014
|
+
}
|
1015
|
+
};
|
1016
|
+
/** @private
|
1017
|
+
* @param {string} str
|
1018
|
+
*/
|
1019
|
+
RowDraggingPlugin.prototype._setEntryPoint = function (str) {
|
1020
|
+
this._entryPoint = str;
|
1021
|
+
this.setDragContent(null); // Clear original content
|
1022
|
+
};
|
1023
|
+
|
1024
|
+
/** @private
|
1025
|
+
* @param {Object} e
|
1026
|
+
*/
|
1027
|
+
RowDraggingPlugin.prototype._onMouseOut = function (e) {
|
1028
|
+
e = e ? e : window.event;
|
1029
|
+
var from = e.relatedTarget || e.toElement;
|
1030
|
+
if (!from || from.nodeName == "HTML") {
|
1031
|
+
// window.console.warn("Left window");
|
1032
|
+
|
1033
|
+
/*
|
1034
|
+
* TRGRID-1493
|
1035
|
+
* The DragStart is delayed using a timer (_timerId created by _delayStart )
|
1036
|
+
* The mouse may left the window before the drag start
|
1037
|
+
* In this case we should force the stopDrag to stop the drag on the source
|
1038
|
+
* Because the mouse up will not be handled by the source
|
1039
|
+
*/
|
1040
|
+
|
1041
|
+
// cancel the timer - _onDragStart will not be called by the timer
|
1042
|
+
if(this._timerId >= 0) {
|
1043
|
+
clearTimeout(this._timerId);
|
1044
|
+
this._timerId = -1;
|
1045
|
+
}
|
1046
|
+
|
1047
|
+
this._onDragStart();
|
1048
|
+
this.stopDrag();
|
1049
|
+
}
|
1050
|
+
};
|
1051
|
+
|
1052
|
+
/** @private
|
1053
|
+
* @param {Object} e
|
1054
|
+
*/
|
1055
|
+
RowDraggingPlugin.prototype._delayStart = function (e) {
|
1056
|
+
this._startingGrid.unlisten("mousemove", this._delayStart);
|
1057
|
+
|
1058
|
+
if (this._timerId < 0) {
|
1059
|
+
this._timerId = window.setTimeout(this._onDragStart, 200);
|
1060
|
+
}
|
1061
|
+
if (this._jetDnD) {
|
1062
|
+
document.addEventListener("mouseout", this._onMouseOut, false);
|
1063
|
+
}
|
1064
|
+
};
|
1065
|
+
/** @private
|
1066
|
+
* @param {boolean=} bool
|
1067
|
+
*/
|
1068
|
+
RowDraggingPlugin.prototype._listenAbortActions = function (bool) {
|
1069
|
+
if (bool !== false) {
|
1070
|
+
window.addEventListener("mouseup", this._clearCache, false);
|
1071
|
+
} else {
|
1072
|
+
window.removeEventListener("mouseup", this._clearCache, false);
|
1073
|
+
}
|
1074
|
+
};
|
1075
|
+
/** @private
|
1076
|
+
* @param {boolean=} delayStart
|
1077
|
+
* @param {*=} startRef
|
1078
|
+
* @param {boolean=} fromJET
|
1079
|
+
*/
|
1080
|
+
RowDraggingPlugin.prototype._startDrag = function (delayStart, startRef, fromJET) {
|
1081
|
+
if (this._dragging || this._hosts.length <= 0) { return; }
|
1082
|
+
if (this._disabled) { return; }
|
1083
|
+
|
1084
|
+
var pos;
|
1085
|
+
if (startRef) {
|
1086
|
+
if (startRef.type === "dragstart") {
|
1087
|
+
if (startRef["preventDefault"]) {
|
1088
|
+
Dom.preventDefault(startRef);
|
1089
|
+
}
|
1090
|
+
var host = this.getRelativeGrid(startRef);
|
1091
|
+
if (host) {
|
1092
|
+
pos = host.getRelativePosition(this._dragTarget);
|
1093
|
+
}
|
1094
|
+
} else {
|
1095
|
+
pos = this._hitTest(startRef);
|
1096
|
+
}
|
1097
|
+
} else {
|
1098
|
+
var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
|
1099
|
+
pos = this._hitTest(target);
|
1100
|
+
}
|
1101
|
+
|
1102
|
+
if (_isInContentSection(pos)) {
|
1103
|
+
this._clearCache();
|
1104
|
+
this._pos = pos;
|
1105
|
+
this._startingGrid = pos["grid"];
|
1106
|
+
|
1107
|
+
if (delayStart) {
|
1108
|
+
this._startingGrid.listen("mousemove", this._delayStart);
|
1109
|
+
this._listenAbortActions();
|
1110
|
+
} else { // Start immediately
|
1111
|
+
this._onDragStart(startRef, fromJET);
|
1112
|
+
}
|
1113
|
+
}
|
1114
|
+
};
|
1115
|
+
/** @private
|
1116
|
+
* @param {Object} clientPos
|
1117
|
+
*/
|
1118
|
+
RowDraggingPlugin.prototype._onJETDragOver = function (clientPos) {
|
1119
|
+
if (!clientPos) { return; }
|
1120
|
+
|
1121
|
+
if (!this._dragging) {
|
1122
|
+
if (!clientPos["dropData"]) { return; }
|
1123
|
+
this._setEntryPoint("JET");
|
1124
|
+
this.setJETDragContent(clientPos["dropData"]); // WARNING: We have no way to distinguish between dropData from grid and other apps
|
1125
|
+
this._startDrag(false, clientPos["e"], true); // Event is suppressed
|
1126
|
+
} else {
|
1127
|
+
this._onDrag(clientPos["e"]);
|
1128
|
+
}
|
1129
|
+
};
|
1130
|
+
/** @private
|
1131
|
+
* @param {Object} jetObj
|
1132
|
+
*/
|
1133
|
+
RowDraggingPlugin.prototype._onJETDrop = function (jetObj) {
|
1134
|
+
if (!this._dragging) { return; }
|
1135
|
+
|
1136
|
+
if (!this._jetDragContent) {
|
1137
|
+
this._jetDragContent = jetObj; // To maintain original client signature
|
1138
|
+
}
|
1139
|
+
this._onDragEnd(jetObj["mouse"]["srcEvent"]);
|
1140
|
+
};
|
1141
|
+
|
843
1142
|
|
844
1143
|
|
845
1144
|
export default RowDraggingPlugin;
|
@@ -9,7 +9,9 @@ import ElfUtil from "./ElfUtil.js";
|
|
9
9
|
var DragUI = function(options) {
|
10
10
|
this._dragBox = options.dragBox;
|
11
11
|
this._dragBoxIcon = options.dragBoxIcon;
|
12
|
-
|
12
|
+
this._dragBoxContent = document.createElement("div");
|
13
|
+
this._dragBoxContent.className = "drag-box-content";
|
14
|
+
this._dragBox.appendChild(this._dragBoxContent);
|
13
15
|
};
|
14
16
|
|
15
17
|
/** @type {string}
|
@@ -60,6 +62,10 @@ DragUI.applyThemeColor = function(grid) {
|
|
60
62
|
*/
|
61
63
|
DragUI.prototype.onThemeLoaded = function(colors) {
|
62
64
|
if(!DragUI._styles) {
|
65
|
+
var cursor = "grabbing";
|
66
|
+
if (ElfUtil.getElfVersion() < 3) {
|
67
|
+
cursor = "move";
|
68
|
+
}
|
63
69
|
var styles = [ // Main Styles without theme
|
64
70
|
".tr-row-guideline", [ // Backward compatability of row dragging
|
65
71
|
"position: absolute;",
|
@@ -104,6 +110,10 @@ DragUI.prototype.onThemeLoaded = function(colors) {
|
|
104
110
|
"top: 0;",
|
105
111
|
"position: absolute;"
|
106
112
|
],
|
113
|
+
".drag-box-content", [
|
114
|
+
"overflow-x: clip;",
|
115
|
+
"text-overflow: ellipsis;"
|
116
|
+
],
|
107
117
|
".drag-box-icon", [
|
108
118
|
"top: -4px;",
|
109
119
|
"left: 12px;",
|
@@ -128,7 +138,7 @@ DragUI.prototype.onThemeLoaded = function(colors) {
|
|
128
138
|
"--grid-void-icon-color: #FFFFFF;"
|
129
139
|
],
|
130
140
|
".mouse-dragging .cell:hover", [ // for change mouse cursor when hover header while dragging
|
131
|
-
"cursor:
|
141
|
+
"cursor: " + cursor + " !important;"
|
132
142
|
],
|
133
143
|
".tr-grid .column .cell.drag-indicator", [ // --grid-drag-indicator defualt is "none"
|
134
144
|
"border-top: var(--grid-drag-indicator) !important;",
|
@@ -175,27 +185,31 @@ DragUI.prototype.renderDragBox = function (e, grid) {
|
|
175
185
|
}
|
176
186
|
|
177
187
|
var gridElem = grid.getElement();
|
188
|
+
var dragBoxHost = gridElem;
|
178
189
|
var gridParent = grid.getParent().parentNode;
|
179
|
-
|
180
|
-
|
181
|
-
gridParent.appendChild(this._dragBox);
|
190
|
+
if (gridParent.nodeType === 11) {
|
191
|
+
dragBoxHost = gridParent;
|
182
192
|
}
|
183
193
|
|
184
|
-
var
|
194
|
+
var parent = this._dragBox.parentNode;
|
195
|
+
if(!parent) {
|
196
|
+
dragBoxHost.appendChild(this._dragBox);
|
197
|
+
}
|
185
198
|
|
186
|
-
var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon;
|
199
|
+
var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon; // The user-supplied icon
|
187
200
|
this._dragBoxIcon.style.visibility = "visible";
|
201
|
+
parent = this._dragBoxIcon.parentNode;
|
188
202
|
var drop = true;
|
189
203
|
if(dragBoxIcon === "insertion") {
|
190
204
|
drop = false;
|
191
205
|
this._dragBoxIcon.icon = "add";
|
192
|
-
if(!
|
206
|
+
if(!parent) {
|
193
207
|
this._dragBox.appendChild(this._dragBoxIcon);
|
194
208
|
}
|
195
209
|
} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
|
196
210
|
drop = false;
|
197
211
|
this._dragBoxIcon.icon = "void";
|
198
|
-
if(!
|
212
|
+
if(!parent) {
|
199
213
|
this._dragBox.appendChild(this._dragBoxIcon);
|
200
214
|
}
|
201
215
|
} else {
|
@@ -213,5 +227,21 @@ DragUI.prototype.renderDragBox = function (e, grid) {
|
|
213
227
|
return drop;
|
214
228
|
};
|
215
229
|
|
230
|
+
/** @public
|
231
|
+
* @param {*} content Element, Node, string, number, or everything else.
|
232
|
+
*/
|
233
|
+
DragUI.prototype.setContent = function(content) {
|
234
|
+
if (content && content["getElement"]) {
|
235
|
+
content = content["getElement"]();
|
236
|
+
}
|
237
|
+
|
238
|
+
var dragBoxContent = this._dragBoxContent;
|
239
|
+
var currentContent = dragBoxContent._content;
|
240
|
+
if (content !== currentContent) {
|
241
|
+
dragBoxContent._content = content;
|
242
|
+
Dom.setContent(dragBoxContent, content);
|
243
|
+
}
|
244
|
+
};
|
245
|
+
|
216
246
|
export default DragUI;
|
217
247
|
export {DragUI};
|
@@ -69,11 +69,13 @@ declare class Popup extends EventDispatcher {
|
|
69
69
|
|
70
70
|
public disableAutoHiding(opt_disabled?: boolean|null): void;
|
71
71
|
|
72
|
+
public disableAutoRepositioning(opt_disabled?: boolean|null): void;
|
73
|
+
|
72
74
|
public disableAutoClipping(opt_disabled?: boolean|null): void;
|
73
75
|
|
74
76
|
public disableHideOnScroll(opt_disabled?: boolean|null): void;
|
75
77
|
|
76
|
-
public updatePosition(): void;
|
78
|
+
public updatePosition(fallback?: boolean|null): void;
|
77
79
|
|
78
80
|
public enableUIBlocking(bool?: boolean|null): boolean;
|
79
81
|
|