jsl-ui 9.14.6 → 9.15.1

package/lib/grid/plugins/ext.overlay.js

@@ -130,6 +130,9 @@ export function Overlays(options) {
         });
         selectionOverlay.handle.style.left = (position.left + position.width - 4) + "px";
         selectionOverlay.handle.style.top = (position.top + position.height - 4) + "px";
+        // console.log("row: " + activeCell.row + " - cell: "+ activeCell.cell);
+        // console.log("container: " + grid.getCanvasNode(activeCell.row, activeCell.cell).className);
+        selectionOverlay.moveToContainer(grid.getCanvasNode(activeCell.cell, activeCell.row));
     }
     var dd_range;
     function handleOverlayDragStart(e) {
@@ -150,7 +153,7 @@ export function Overlays(options) {
             return;
         }
         var end = {
-            cell: dd_range.start.cell, row: grid.getCellFromPoint(0, e.y).row - 1
+            cell: dd_range.start.cell, row: grid.getCellFromPoint(0, e.y /* + grid.getCanvasNode().scrollTop*/).row - 1
         };
         if (!grid.canCellBeSelected(end.row, end.cell)) {
             e.cancelEvent(); // ?
@@ -189,21 +192,36 @@ export function Overlays(options) {
             this.handle = document.createElement("div");
             this.handle.classList.add("handle-overlay");
             target.appendChild(this.handle);
-            Moveable(target, {
-                selector: ".handle-overlay",
-                direction: "y",
-                gridY: grid.getOptions().rowHeight,
-                onStart: EventHandler.Create(function (e) {
-                    handleOverlayDragStart(e);
-                }),
-                onMove: EventHandler.Create(function (e) {
-                    handleOverlayDrag(e);
-                }),
-                onStop: EventHandler.Create(function (e) {
-                    handleOverlayDragEnd(e);
-                })
-            });
+            var gridContainer = target.closest(".slickgrid");
+            var viewports = gridContainer.querySelectorAll(".grid-canvas");
+            for (var idx = 0; idx < viewports.length; idx++) {
+                console.log(idx);
+                Moveable(viewports[idx], {
+                    selector: ".handle-overlay",
+                    direction: "y",
+                    gridY: grid.getOptions().rowHeight,
+                    containInParent: false,
+                    onStart: EventHandler.Create(function (e) {
+                        handleOverlayDragStart(e);
+                    }),
+                    onMove: EventHandler.Create(function (e) {
+                        handleOverlayDrag(e);
+                    }),
+                    onStop: EventHandler.Create(function (e) {
+                        handleOverlayDragEnd(e);
+                    })
+                });
+            }
         }
+        this.moveToContainer = function (container) {
+            this.$left.appendTo(container);
+            this.$right.appendTo(container);
+            this.$top.appendTo(container);
+            this.$bottom.appendTo(container);
+            if (this.handle) {
+                $(this.handle).appendTo(container);
+            }
+        };
         this.toggle = function (showOrHide) {
             this.$left.css("display", showOrHide ? "" : "none");
             this.$right.css("display", showOrHide ? "" : "none");
@@ -220,7 +238,7 @@ export function Overlays(options) {
         function show(range) {
             r = range;
             if (!decorator) {
-                decorator = new Overlay(grid.getCanvasNode(), false, 'selection-');
+                decorator = new Overlay(grid.getCanvasNode(range.fromCell, range.fromRow), false, 'selection-');
             }
             var from = targetGrid.getCellNodeBox(range.fromRow, range.fromCell);
             var to = targetGrid.getCellNodeBox(range.toRow, range.toCell);

package/lib/grid/slick.grid.d.ts

@@ -250,7 +250,7 @@ export interface ISlickGrid<T> {
         cancelCurrentEdit: () => boolean;
     };
     "invalidateRow": (row: number) => void;
-    "getCanvasNode": () => HTMLElement;
+    "getCanvasNode": (columnIdOrIdx?: number, rowIndex?: number) => HTMLElement;
     "focus": () => void;
     "getActiveCellPosition": () => {
         top: number;