jsl-ui 9.28.2 → 9.28.3

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

@@ -1,295 +1,295 @@
-import "./ext.overlay.css";
-import { jQueryReplacement } from "../../core/jq";
-import { Slick } from "../slick.core";
-import { Moveable } from "../../interaction/moveable";
-import { EventHandler } from "../../interaction/eventhandler";
-var selectinOverlayWidth = 1;
-var $ = jQueryReplacement;
-// register namespace
-$.deepExtend(window, {
-    "Ext": {
-        "Plugins": {
-            "Overlays": Overlays
-        }
-    }
-});
-export function Overlays(options) {
-    var $headerOverlay;
-    var $rowOverlay;
-    var selectionOverlay;
-    var currentColumn;
-    var handleDragging;
-    var grid;
-    var self = this;
-    var handler = new Slick.EventHandler();
-    var dragDecorator;
-    var defaults = {
-        buttonCssClass: null,
-        buttonImage: "../images/down.gif",
-        decoratorWidth: 2
-    };
-    function init(g) {
-        options = $.deepExtend({}, defaults, options);
-        grid = g;
-        dragDecorator = overlayRangeDecorator(grid);
-        $headerOverlay = createRowHeaderOverlay(10);
-        $rowOverlay = createRowHeaderOverlay(10);
-        selectionOverlay = createSelectionOverlay();
-        handler.subscribe(grid.onActiveCellChanged, activeCellChanged)
-            .subscribe(grid.onColumnsResized, columnResized)
-            .subscribe(grid.onScroll, gridScrolled);
-    }
-    function destroy() {
-        handler.unsubscribeAll();
-    }
-    function createRowHeaderOverlay(zIndex) {
-        return $(document.createElement("div"))
-            .addClass("header-overlay")
-            .css("position", "absolute")
-            .css("z-index", zIndex)
-            .appendTo(grid.getContainerNode());
-    }
-    function createSelectionOverlay() {
-        var canvas = grid.getCanvasNode();
-        var overlay = new Overlay(canvas, true);
-        return overlay;
-    }
-    function activeCellChanged(e, args) {
-        dragDecorator.hide();
-        moveSelectionOverlay(e, args);
-        moveHeaderRowOverlays(e, args);
-    }
-    function columnResized(e, args) {
-        moveHeaderRowOverlays(e, args);
-        moveSelectionOverlay(e, args);
-    }
-    function gridScrolled(e, args) {
-        moveHeaderRowOverlays(e, args);
-        moveSelectionOverlay(e, args);
-    }
-    function moveHeaderRowOverlays(e, args) {
-        if (typeof args.cell != 'undefined') {
-            currentColumn = args.cell;
-        }
-        else {
-            if (!currentColumn) {
-                return;
-            }
-        }
-        if (!grid.getActiveCell()) {
-            $rowOverlay.css("display", "none");
-            return;
-        }
-        $rowOverlay.css("display", "");
-        var headerHeight = grid.getContainerNode().querySelector('.slick-header').getBoundingClientRect().height;
-        var cellPosition = grid.getActiveCellPosition();
-        var gridPosition = grid.getGridPosition();
-        $rowOverlay.css("display", cellPosition.visible ? "" : "none");
-        $headerOverlay.css("display", cellPosition.visible ? "" : "none");
-        var headerWidth = cellPosition.width;
-        $headerOverlay.css("left", (cellPosition.left - gridPosition.left) + "px").css("top", (headerHeight - 2) + "px").css("width", headerWidth + "px").css("height", "2px");
-        $rowOverlay.css("left", "0px").css("top", (cellPosition.top - gridPosition.top) + "px").css("width", "2px").css("height", cellPosition.height + "px");
-    }
-    function moveSelectionOverlay(e, args) {
-        var activeCell = grid.getActiveCell();
-        if (!activeCell) {
-            selectionOverlay.toggle(false);
-            return;
-        }
-        var column = grid.getColumns()[activeCell.cell];
-        selectionOverlay.toggle(true);
-        // Only show the handle if the cell is editable
-        selectionOverlay.handle.style.display = (column.editor != null && !column.readonly && grid.getOptions().editable) ? "" : "none";
-        var position = grid.getCellNodeBox(activeCell.row, activeCell.cell);
-        // Not coming through on the property so re-calculated
-        position.height = position.bottom - position.top;
-        position.width = position.right - position.left;
-        selectionOverlay.$left.css({
-            left: (position.left - selectinOverlayWidth) + "px",
-            top: position.top + "px",
-            width: selectinOverlayWidth + "px",
-            height: position.height + "px"
-        });
-        selectionOverlay.$right.css({
-            left: (position.left + position.width) + "px",
-            top: position.top + "px",
-            width: selectinOverlayWidth + "px",
-            height: position.height + "px"
-        });
-        selectionOverlay.$top.css({
-            left: (position.left - selectinOverlayWidth) + "px",
-            top: (position.top - selectinOverlayWidth) + "px",
-            width: (position.width + selectinOverlayWidth + 1) + "px",
-            height: selectinOverlayWidth + "px"
-        });
-        selectionOverlay.$bottom.css({
-            left: (position.left - selectinOverlayWidth) + "px",
-            top: (position.top + position.height) + "px",
-            width: (position.width + selectinOverlayWidth + 1) + "px",
-            height: selectinOverlayWidth + "px"
-        });
-        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) {
-        var cell = grid.getActiveCell();
-        if (grid.canCellBeSelected(cell.row, cell.cell)) {
-            handleDragging = true;
-        }
-        var column = grid.getColumns()[cell.cell];
-        if (column.editor == null || column.readonly || !grid.getOptions().editable) {
-            handleDragging = false;
-        }
-        if (!handleDragging) {
-            e.cancelEvent();
-            return null;
-        }
-        grid.focus();
-        dd_range = { start: cell, end: {} };
-        return dragDecorator.show(new Slick.Range(cell.row, cell.cell));
-    }
-    function handleOverlayDrag(e) {
-        if (!handleDragging) {
-            return;
-        }
-        var end = {
-            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(); // ?
-            return;
-        }
-        dd_range.end = end;
-        dragDecorator.show(new Slick.Range(dd_range.start.row, dd_range.start.cell, end.row, dd_range.start.cell));
-    }
-    function handleOverlayDragEnd(e) {
-        if (!handleDragging) {
-            return;
-        }
-        handleDragging = false;
-        selectionOverlay.handle.style.display = "none";
-        self.onFillUpDown.notify({ "grid": grid, "range": dragDecorator.getSelectedRange(), direction: dd_range.end.row >= dd_range.start.row ? "down" : "up" }, e, self);
-    }
-    function Overlay(target, withHandel, prefix) {
-        var className = (prefix || '') + 'cell-overlay';
-        this.$left = $(document.createElement("div"))
-            .addClass(className)
-            .addClass('left')
-            .appendTo(target);
-        this.$right = $(document.createElement("div"))
-            .addClass(className)
-            .addClass('right')
-            .appendTo(target);
-        this.$top = $(document.createElement("div"))
-            .addClass(className)
-            .addClass('top')
-            .appendTo(target);
-        this.$bottom = $(document.createElement("div"))
-            .addClass(className)
-            .addClass('bottom')
-            .appendTo(target);
-        if (withHandel) {
-            this.handle = document.createElement("div");
-            this.handle.classList.add("handle-overlay");
-            target.appendChild(this.handle);
-            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");
-            this.$top.css("display", showOrHide ? "" : "none");
-            this.$bottom.css("display", showOrHide ? "" : "none");
-            if (this.handle) {
-                this.handle.style.display = showOrHide ? "" : "none";
-            }
-        };
-    }
-    function overlayRangeDecorator(targetGrid) {
-        var decorator;
-        var r;
-        function show(range) {
-            r = range;
-            if (!decorator) {
-                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);
-            decorator.$left.css({
-                top: from.top - 2,
-                left: from.left - 2,
-                height: to.bottom - from.top + 2,
-                width: options.decoratorWidth
-            });
-            decorator.$right.css({
-                top: from.top - 2,
-                left: to.right - 1,
-                height: to.bottom - from.top + 2,
-                width: options.decoratorWidth
-            });
-            decorator.$top.css({
-                top: from.top - 2,
-                left: to.left - 1,
-                height: options.decoratorWidth,
-                width: to.right - from.left + 2
-            });
-            decorator.$bottom.css({
-                top: to.bottom - 1,
-                left: from.left - 2,
-                height: options.decoratorWidth,
-                width: to.right - from.left + 3
-            });
-            return decorator;
-        }
-        function getSelectedRange() {
-            return r;
-        }
-        function hide() {
-            if (decorator) {
-                decorator.toggle(false);
-                decorator = null;
-            }
-        }
-        return {
-            hide: hide,
-            show: show,
-            getSelectedRange: getSelectedRange
-        };
-    }
-    $.shallowExtend(this, {
-        "init": init,
-        "destroy": destroy,
-        "onFillUpDown": new Slick.Event()
-    });
-}
+import "./ext.overlay.css";
+import { jQueryReplacement } from "../../core/jq";
+import { Slick } from "../slick.core";
+import { Moveable } from "../../interaction/moveable";
+import { EventHandler } from "../../interaction/eventhandler";
+const selectinOverlayWidth = 1;
+let $ = jQueryReplacement;
+// register namespace
+$.deepExtend(window, {
+    "Ext": {
+        "Plugins": {
+            "Overlays": Overlays
+        }
+    }
+});
+export function Overlays(options) {
+    var $headerOverlay;
+    var $rowOverlay;
+    var selectionOverlay;
+    var currentColumn;
+    var handleDragging;
+    var grid;
+    var self = this;
+    var handler = new Slick.EventHandler();
+    var dragDecorator;
+    var defaults = {
+        buttonCssClass: null,
+        buttonImage: "../images/down.gif",
+        decoratorWidth: 2
+    };
+    function init(g) {
+        options = $.deepExtend({}, defaults, options);
+        grid = g;
+        dragDecorator = overlayRangeDecorator(grid);
+        $headerOverlay = createRowHeaderOverlay(10);
+        $rowOverlay = createRowHeaderOverlay(10);
+        selectionOverlay = createSelectionOverlay();
+        handler.subscribe(grid.onActiveCellChanged, activeCellChanged)
+            .subscribe(grid.onColumnsResized, columnResized)
+            .subscribe(grid.onScroll, gridScrolled);
+    }
+    function destroy() {
+        handler.unsubscribeAll();
+    }
+    function createRowHeaderOverlay(zIndex) {
+        return $(document.createElement("div"))
+            .addClass("header-overlay")
+            .css("position", "absolute")
+            .css("z-index", zIndex)
+            .appendTo(grid.getContainerNode());
+    }
+    function createSelectionOverlay() {
+        var canvas = grid.getCanvasNode();
+        var overlay = new Overlay(canvas, true);
+        return overlay;
+    }
+    function activeCellChanged(e, args) {
+        dragDecorator.hide();
+        moveSelectionOverlay(e, args);
+        moveHeaderRowOverlays(e, args);
+    }
+    function columnResized(e, args) {
+        moveHeaderRowOverlays(e, args);
+        moveSelectionOverlay(e, args);
+    }
+    function gridScrolled(e, args) {
+        moveHeaderRowOverlays(e, args);
+        moveSelectionOverlay(e, args);
+    }
+    function moveHeaderRowOverlays(e, args) {
+        if (typeof args.cell != 'undefined') {
+            currentColumn = args.cell;
+        }
+        else {
+            if (!currentColumn) {
+                return;
+            }
+        }
+        if (!grid.getActiveCell()) {
+            $rowOverlay.css("display", "none");
+            return;
+        }
+        $rowOverlay.css("display", "");
+        var headerHeight = grid.getContainerNode().querySelector('.slick-header').getBoundingClientRect().height;
+        var cellPosition = grid.getActiveCellPosition();
+        var gridPosition = grid.getGridPosition();
+        $rowOverlay.css("display", cellPosition.visible ? "" : "none");
+        $headerOverlay.css("display", cellPosition.visible ? "" : "none");
+        var headerWidth = cellPosition.width;
+        $headerOverlay.css("left", (cellPosition.left - gridPosition.left) + "px").css("top", (headerHeight - 2) + "px").css("width", headerWidth + "px").css("height", "2px");
+        $rowOverlay.css("left", "0px").css("top", (cellPosition.top - gridPosition.top) + "px").css("width", "2px").css("height", cellPosition.height + "px");
+    }
+    function moveSelectionOverlay(e, args) {
+        var activeCell = grid.getActiveCell();
+        if (!activeCell) {
+            selectionOverlay.toggle(false);
+            return;
+        }
+        var column = grid.getColumns()[activeCell.cell];
+        selectionOverlay.toggle(true);
+        // Only show the handle if the cell is editable
+        selectionOverlay.handle.style.display = (column.editor != null && !column.readonly && grid.getOptions().editable) ? "" : "none";
+        var position = grid.getCellNodeBox(activeCell.row, activeCell.cell);
+        // Not coming through on the property so re-calculated
+        position.height = position.bottom - position.top;
+        position.width = position.right - position.left;
+        selectionOverlay.$left.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: position.top + "px",
+            width: selectinOverlayWidth + "px",
+            height: position.height + "px"
+        });
+        selectionOverlay.$right.css({
+            left: (position.left + position.width) + "px",
+            top: position.top + "px",
+            width: selectinOverlayWidth + "px",
+            height: position.height + "px"
+        });
+        selectionOverlay.$top.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: (position.top - selectinOverlayWidth) + "px",
+            width: (position.width + selectinOverlayWidth + 1) + "px",
+            height: selectinOverlayWidth + "px"
+        });
+        selectionOverlay.$bottom.css({
+            left: (position.left - selectinOverlayWidth) + "px",
+            top: (position.top + position.height) + "px",
+            width: (position.width + selectinOverlayWidth + 1) + "px",
+            height: selectinOverlayWidth + "px"
+        });
+        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) {
+        var cell = grid.getActiveCell();
+        if (grid.canCellBeSelected(cell.row, cell.cell)) {
+            handleDragging = true;
+        }
+        const column = grid.getColumns()[cell.cell];
+        if (column.editor == null || column.readonly || !grid.getOptions().editable) {
+            handleDragging = false;
+        }
+        if (!handleDragging) {
+            e.cancelEvent();
+            return null;
+        }
+        grid.focus();
+        dd_range = { start: cell, end: {} };
+        return dragDecorator.show(new Slick.Range(cell.row, cell.cell));
+    }
+    function handleOverlayDrag(e) {
+        if (!handleDragging) {
+            return;
+        }
+        var end = {
+            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(); // ?
+            return;
+        }
+        dd_range.end = end;
+        dragDecorator.show(new Slick.Range(dd_range.start.row, dd_range.start.cell, end.row, dd_range.start.cell));
+    }
+    function handleOverlayDragEnd(e) {
+        if (!handleDragging) {
+            return;
+        }
+        handleDragging = false;
+        selectionOverlay.handle.style.display = "none";
+        self.onFillUpDown.notify({ "grid": grid, "range": dragDecorator.getSelectedRange(), direction: dd_range.end.row >= dd_range.start.row ? "down" : "up" }, e, self);
+    }
+    function Overlay(target, withHandel, prefix) {
+        var className = (prefix || '') + 'cell-overlay';
+        this.$left = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('left')
+            .appendTo(target);
+        this.$right = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('right')
+            .appendTo(target);
+        this.$top = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('top')
+            .appendTo(target);
+        this.$bottom = $(document.createElement("div"))
+            .addClass(className)
+            .addClass('bottom')
+            .appendTo(target);
+        if (withHandel) {
+            this.handle = document.createElement("div");
+            this.handle.classList.add("handle-overlay");
+            target.appendChild(this.handle);
+            const gridContainer = target.closest(".slickgrid");
+            const viewports = gridContainer.querySelectorAll(".grid-canvas");
+            for (let 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((e) => {
+                        handleOverlayDragStart(e);
+                    }),
+                    onMove: EventHandler.Create((e) => {
+                        handleOverlayDrag(e);
+                    }),
+                    onStop: EventHandler.Create((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");
+            this.$top.css("display", showOrHide ? "" : "none");
+            this.$bottom.css("display", showOrHide ? "" : "none");
+            if (this.handle) {
+                this.handle.style.display = showOrHide ? "" : "none";
+            }
+        };
+    }
+    function overlayRangeDecorator(targetGrid) {
+        var decorator;
+        var r;
+        function show(range) {
+            r = range;
+            if (!decorator) {
+                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);
+            decorator.$left.css({
+                top: from.top - 2,
+                left: from.left - 2,
+                height: to.bottom - from.top + 2,
+                width: options.decoratorWidth
+            });
+            decorator.$right.css({
+                top: from.top - 2,
+                left: to.right - 1,
+                height: to.bottom - from.top + 2,
+                width: options.decoratorWidth
+            });
+            decorator.$top.css({
+                top: from.top - 2,
+                left: to.left - 1,
+                height: options.decoratorWidth,
+                width: to.right - from.left + 2
+            });
+            decorator.$bottom.css({
+                top: to.bottom - 1,
+                left: from.left - 2,
+                height: options.decoratorWidth,
+                width: to.right - from.left + 3
+            });
+            return decorator;
+        }
+        function getSelectedRange() {
+            return r;
+        }
+        function hide() {
+            if (decorator) {
+                decorator.toggle(false);
+                decorator = null;
+            }
+        }
+        return {
+            hide: hide,
+            show: show,
+            getSelectedRange: getSelectedRange
+        };
+    }
+    $.shallowExtend(this, {
+        "init": init,
+        "destroy": destroy,
+        "onFillUpDown": new Slick.Event()
+    });
+}

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

@@ -1,12 +1,12 @@
-/***
- * Displays an overlay on top of a given cell range.
- *
- * TODO:
- * Currently, it blocks mouse events to DOM nodes behind it.
- * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
- * Could also construct the borders separately using 4 individual DIVs.
- *
- * @param {Grid} grid
- * @param {Object} options
- */
-export declare function CellRangeDecorator(grid: any, options: any): void;
+/***
+ * Displays an overlay on top of a given cell range.
+ *
+ * TODO:
+ * Currently, it blocks mouse events to DOM nodes behind it.
+ * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
+ * Could also construct the borders separately using 4 individual DIVs.
+ *
+ * @param {Grid} grid
+ * @param {Object} options
+ */
+export declare function CellRangeDecorator(grid: any, options: any): void;