From 9d49a3ab863dd6444f99ca963b17a695d8a949b7 Mon Sep 17 00:00:00 2001 From: Jun Tan Date: Wed, 8 Jan 2020 17:18:26 -0500 Subject: [PATCH 1/2] Fix scrolling on tree grids --- .../src/js/PerspectiveDataModel.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js b/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js index 3c045a65d1..feda09bd58 100644 --- a/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js +++ b/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js @@ -92,10 +92,10 @@ export default require("datasaur-local").extend("PerspectiveDataModel", { return; } if (nrows !== this._nrows) { - this._grid.renderer.computeCellsBounds(); + this._nrows = nrows; + this._grid.synchronizeScrollingBoundaries(); } this._dirty = true; - this._nrows = nrows; }, // Called when clicking on a row group expand @@ -124,6 +124,7 @@ export default require("datasaur-local").extend("PerspectiveDataModel", { } } let nrows = await this._view.num_rows(); + console.log(this._nrows, nrows); this.setDirty(nrows); this._grid.canvas.paintNow(); } From d8046805b57d10d8244daf7e5408f4353634be66 Mon Sep 17 00:00:00 2001 From: Jun Tan Date: Wed, 8 Jan 2020 17:32:43 -0500 Subject: [PATCH 2/2] test scrolling on expanded tree grid --- .../src/js/PerspectiveDataModel.js | 1 - .../test/js/superstore.spec.js | 104 ++++++++++++++++++ .../test/js/utils.js | 19 ++++ .../test/results/results.json | 5 + 4 files changed, 128 insertions(+), 1 deletion(-) diff --git a/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js b/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js index feda09bd58..190570db9b 100644 --- a/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js +++ b/packages/perspective-viewer-hypergrid/src/js/PerspectiveDataModel.js @@ -124,7 +124,6 @@ export default require("datasaur-local").extend("PerspectiveDataModel", { } } let nrows = await this._view.num_rows(); - console.log(this._nrows, nrows); this.setDirty(nrows); this._grid.canvas.paintNow(); } diff --git a/packages/perspective-viewer-hypergrid/test/js/superstore.spec.js b/packages/perspective-viewer-hypergrid/test/js/superstore.spec.js index b9f5508751..aed229a2b9 100644 --- a/packages/perspective-viewer-hypergrid/test/js/superstore.spec.js +++ b/packages/perspective-viewer-hypergrid/test/js/superstore.spec.js @@ -9,6 +9,7 @@ const utils = require("@finos/perspective-test"); const path = require("path"); +const {scroll} = require("./utils"); const simple_tests = require("@finos/perspective-viewer/test/js/simple_tests.js"); @@ -46,6 +47,109 @@ utils.with_server({}, () => { await page.waitForSelector("perspective-viewer:not([updating])"); }); + test.capture("should not scroll vertically when collapsed smaller than viewport", async page => { + const viewer = await page.$("perspective-viewer"); + await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer); + await page.waitForSelector("perspective-viewer:not([updating])"); + + await page.evaluate(async element => { + element.view.set_depth(0); + await element.notifyResize(); + }, viewer); + + await scroll(page, 0, 1000); + + await page.waitForSelector("perspective-viewer:not([updating])"); + }); + + test.capture("should not scroll horizontally when collapsed smaller than viewport", async page => { + const viewer = await page.$("perspective-viewer"); + + await page.evaluate(element => element.setAttribute("row-pivots", '["Category", "State", "City"]'), viewer); + await page.waitForSelector("perspective-viewer:not([updating])"); + + await page.evaluate(element => element.setAttribute("columns", '["Row ID", "Order ID"]'), viewer); + await page.waitForSelector("perspective-viewer:not([updating])"); + + await page.evaluate(async element => { + element.view.set_depth(0); + await element.notifyResize(); + }, viewer); + + await scroll(page, 1000, 0); + + await page.waitForSelector("perspective-viewer:not([updating])"); + }); + + test.capture("should scroll vertically when expanded from inside viewport to taller than viewport", async page => { + const viewer = await page.$("perspective-viewer"); + await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer); + await page.waitForSelector("perspective-viewer:not([updating])"); + + await page.evaluate(async element => { + element.view.set_depth(0); + await element.notifyResize(); + }, viewer); + + await scroll(page, 0, 30); // Hide the scrollbar from the page, as hypergrid sees no off-viewport rows + + await page.evaluate(async element => { + element.view.set_depth(3); + await element.notifyResize(); + }, viewer); + + // Should be able to scroll down + await scroll(page, 0, 1000); + + await page.waitForSelector("perspective-viewer:not([updating])"); + }); + + test.capture("should scroll horizontally when expanded from inside viewport to taller than viewport", async page => { + const viewer = await page.$("perspective-viewer"); + await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer); + await page.waitForSelector("perspective-viewer:not([updating])"); + + await page.evaluate(async element => { + element.view.set_depth(0); + await element.notifyResize(); + }, viewer); + + await scroll(page, 0, 30); // Hide the scrollbar from the page, as hypergrid sees no off-viewport rows + + await page.evaluate(async element => { + element.view.set_depth(3); + await element.notifyResize(); + }, viewer); + + // Should be able to scroll right + await scroll(page, 500, 0); + + await page.waitForSelector("perspective-viewer:not([updating])"); + }); + + test.capture("should scroll horizontally and vertically when expanded from inside viewport to taller than viewport", async page => { + const viewer = await page.$("perspective-viewer"); + await page.evaluate(element => element.setAttribute("row-pivots", '["Category","State", "City"]'), viewer); + await page.waitForSelector("perspective-viewer:not([updating])"); + + await page.evaluate(async element => { + element.view.set_depth(0); + await element.notifyResize(); + }, viewer); + + await scroll(page, 0, 30); // Hide the scrollbar from the page, as hypergrid sees no off-viewport rows + + await page.evaluate(async element => { + element.view.set_depth(3); + await element.notifyResize(); + }, viewer); + + // Should be able to scroll right + await scroll(page, 500, 1000); + + await page.waitForSelector("perspective-viewer:not([updating])"); + }); + test.capture("handles flush", async page => { const viewer = await page.$("perspective-viewer"); await page.shadow_click("perspective-viewer", "#config_button"); diff --git a/packages/perspective-viewer-hypergrid/test/js/utils.js b/packages/perspective-viewer-hypergrid/test/js/utils.js index 1f24d227ba..40e610e692 100644 --- a/packages/perspective-viewer-hypergrid/test/js/utils.js +++ b/packages/perspective-viewer-hypergrid/test/js/utils.js @@ -7,6 +7,25 @@ * */ +exports.scroll = async (page, x = 0, y = 100) => { + await page.evaluate( + ({x, y}) => { + const grid = document + .querySelector("perspective-viewer") + .shadowRoot.querySelector("perspective-hypergrid") + .shadowRoot.querySelector("canvas"); + const wheel_event = new WheelEvent("wheel", { + bubbles: true, + cancelable: true, + deltaX: x, + deltaY: y + }); + grid.dispatchEvent(wheel_event); + }, + {x, y} + ); +}; + exports.dblclick = async (page, x = 310, y = 300) => { await page.evaluate( ({x, y}) => { diff --git a/packages/perspective-viewer-hypergrid/test/results/results.json b/packages/perspective-viewer-hypergrid/test/results/results.json index 54348a2693..bc3c7cd5a0 100644 --- a/packages/perspective-viewer-hypergrid/test/results/results.json +++ b/packages/perspective-viewer-hypergrid/test/results/results.json @@ -20,6 +20,11 @@ "superstore.html/resets viewable area when the logical size expands.": "1bc04ce4ebdbbb8c59d8a04cea43c901", "superstore.html/resets viewable area when the physical size expands.": "13d3164f406bf6a7d053c21dd506a0d5", "superstore.html/replaces all rows.": "9cd0751b14f8ba6c857bf9b92f1d366b", + "superstore.html/should not scroll vertically when collapsed smaller than viewport": "85561e31002028b42b342306a644d8ae", + "superstore.html/should not scroll horizontally when collapsed smaller than viewport": "6a78d9493d600f7fe902060b26b0d734", + "superstore.html/should scroll vertically when expanded from inside viewport to taller than viewport": "386fc92a9ef4001e516250c8ba20400e", + "superstore.html/should scroll horizontally when expanded from inside viewport to taller than viewport": "988784a8b71df95ec8e34b9a029a0090", + "superstore.html/should scroll horizontally and vertically when expanded from inside viewport to taller than viewport": "1b88cc0c670a8e1a54cba9245f90938c", "hypergrid.html/perspective dispatches perspective-click event with correct properties.": "13d3164f406bf6a7d053c21dd506a0d5", "hypergrid.html/perspective dispatches perspective-click event with one filter.": "b66684328af5084134b0d3ed8d095eaf", "hypergrid.html/perspective dispatches perspective-click event with filters.": "44186397ec3d65a3390a0dbd80f08c76",