Refactor Area Mouse Selection, update area clipboard and test suite

examples/area_mouse_selection.md

@@ -73,14 +73,18 @@ const getMousedownListener = (table) => (event) => {
 ```
 The `EventListener` returned for `"mouseover"` first checks that a valid `CURRENT_MOUSEDOWN_COORDINATES`
 is set and then reapplies the cell selection with the `event.target`'s coordinates
- as the final coordinate pair - rendering the current potential selection.
+ used to calculate the `potentialSelection`.
 ```javascript
 const getMouseoverListener = (table) => (event) => {
-    if (CURRENT_MOUSEDOWN_COORDINATES.x !== undefined) {
+    if (CURRENT_MOUSEDOWN_COORDINATES && CURRENT_MOUSEDOWN_COORDINATES.x !== undefined) {
         const meta = table.getMeta(event.target);
         if (meta && meta.x !== undefined && meta.y !== undefined) {
-            const overCoord = {x: meta.x, y: meta.y};
-            const potentialSelection = [CURRENT_MOUSEDOWN_COORDINATES, overCoord];
+            const potentialSelection = {
+                x0: Math.min(meta.x, CURRENT_MOUSEDOWN_COORDINATES.x),
+                x1: Math.max(meta.x, CURRENT_MOUSEDOWN_COORDINATES.x),
+                y0: Math.min(meta.y, CURRENT_MOUSEDOWN_COORDINATES.y),
+                y1: Math.max(meta.y, CURRENT_MOUSEDOWN_COORDINATES.y),
+            };
             reapplyMouseAreaSelections(table, MOUSE_SELECTED_AREAS.concat([potentialSelection]));
         }
     }
@@ -92,9 +96,14 @@ With our `MOUSE_SELECTED_AREAS` up to date, we will reapply the selection then c
 ```javascript
 const getMouseupListener = (table) => (event) => {
     const meta = table.getMeta(event.target);
-    if (CURRENT_MOUSEDOWN_COORDINATES.x !== undefined && meta.x !== undefined && meta.y !== undefined) {
-        const upCoord = {x: meta.x, y: meta.y};
-        MOUSE_SELECTED_AREAS.push([CURRENT_MOUSEDOWN_COORDINATES, upCoord]);
+    if (CURRENT_MOUSEDOWN_COORDINATES && CURRENT_MOUSEDOWN_COORDINATES.x !== undefined && meta.x !== undefined && meta.y !== undefined) {
+        const selection = {
+            x0: Math.min(meta.x, CURRENT_MOUSEDOWN_COORDINATES.x),
+            x1: Math.max(meta.x, CURRENT_MOUSEDOWN_COORDINATES.x),
+            y0: Math.min(meta.y, CURRENT_MOUSEDOWN_COORDINATES.y),
+            y1: Math.max(meta.y, CURRENT_MOUSEDOWN_COORDINATES.y),
+        };
+        MOUSE_SELECTED_AREAS.push(selection);
         reapplyMouseAreaSelections(table);
     }
     CURRENT_MOUSEDOWN_COORDINATES = {};
@@ -113,27 +122,18 @@ const reapplyMouseAreaSelections = (table, areaSelections = MOUSE_SELECTED_AREAS
     }
 
     for (const as of areaSelections) {
-        applyMouseAreaSelection(table, as[0], as[1]);
+        applyMouseAreaSelection(table, as);
     }
 };
 ```
 Much like our `MetaData` `object`, we will use `x0` and `y0` to describe the upper
 left corner and `x1` and `y1` for the lower right corner in the body of `applyMouseAreaSelection()`.
-We need to select the `min()` `.x` between both up and down coordinates for our `x0` in 
-case the user made their selection in reverse - applying similar logic for defining
-`x1`, `y0` and `y1`. Then we can iterate through the `td`s in the `table` adding 
-the `MOUSE_SELECTED_AREA_CLASS` if the `td`'s metadata falls within the rectangular region
-defined by those coordinates.
+We can iterate through the `td`s in the `table` adding the `MOUSE_SELECTED_AREA_CLASS`
+if the `td`'s metadata falls within the rectangular region defined by those coordinates.
 ```javascript
-
-const applyMouseAreaSelection = (table, mousedownCoord, mouseupCoord) => {
+const applyMouseAreaSelection = (table, {x0, x1, y0, y1}) => {
     const tds = table.querySelectorAll("tbody td");
-    if (mousedownCoord.x !== undefined && mousedownCoord.y !== undefined && mouseupCoord.x !== undefined && mouseupCoord.y !== undefined) {
-        const x0 = Math.min(mousedownCoord.x, mouseupCoord.x);
-        const x1 = Math.max(mousedownCoord.x, mouseupCoord.x);
-        const y0 = Math.min(mousedownCoord.y, mouseupCoord.y);
-        const y1 = Math.max(mousedownCoord.y, mouseupCoord.y);
-
+    if (x0 !== undefined && y0 !== undefined && x1 !== undefined && y1 !== undefined) {
         for (const td of tds) {
             const meta = table.getMeta(td);
             if (x0 <= meta.x && meta.x <= x1) {

test/examples/column_mouse_selection/selecting_column_headers.test.js

@@ -0,0 +1,75 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2020, the Regular Table Authors.
+ *
+ * This file is part of the Regular Table library, distributed under the terms
+ * of the Apache License 2.0.  The full license can be found in the LICENSE
+ * file.
+ *
+ */
+
+describe("column_mouse_selection.html", () => {
+    const selectedColumns = async () => {
+        const selectedCells = await page.$$("regular-table thead th.mouse-selected-column");
+        const selectedValues = [];
+        for (const td of selectedCells) {
+            selectedValues.push(await page.evaluate((td) => td.innerHTML.trim().split(" ").slice(0, 2).join(" "), td));
+        }
+        return selectedValues;
+    };
+
+    beforeAll(async () => {
+        await page.setViewport({width: 2500, height: 2500});
+        await page.goto("http://localhost:8081/dist/examples/column_mouse_selection.html");
+        await page.waitFor("regular-table table tbody tr td");
+    });
+
+    describe("initial view", () => {
+        test("includes no selection", async () => {
+            expect(await selectedColumns()).toEqual([]);
+        });
+    });
+
+    describe("column selection", () => {
+        describe("selecting the origin header", () => {
+            test("includes no selection", async () => {
+                const ths = await page.$$("regular-table thead th");
+
+                await page.evaluate(async (th) => {
+                    const event = new MouseEvent("click", {bubbles: true});
+                    th.dispatchEvent(event);
+                }, ths[0]);
+
+                expect(await selectedColumns()).toEqual([]);
+            });
+        });
+
+        describe("selecting the first column group", () => {
+            let ths;
+
+            beforeAll(async () => {
+                ths = await page.$$("regular-table thead th");
+            });
+
+            test("includes the group and the columns", async () => {
+                await page.evaluate(async (th) => {
+                    const event = new MouseEvent("click", {bubbles: true});
+                    th.dispatchEvent(event);
+                }, ths[1]);
+
+                expect(await selectedColumns()).toEqual(["Group 0", "Column 0", "Column 1", "Column 2", "Column 3", "Column 4", "Column 5", "Column 6", "Column 7", "Column 8", "Column 9"]);
+            });
+
+            test("splitting the group with ctrl", async () => {
+                expect(await selectedColumns()).toEqual(["Group 0", "Column 0", "Column 1", "Column 2", "Column 3", "Column 4", "Column 5", "Column 6", "Column 7", "Column 8", "Column 9"]);
+
+                await page.evaluate(async (th) => {
+                    const event = new MouseEvent("click", {bubbles: true, ctrlKey: true});
+                    th.dispatchEvent(event);
+                }, ths[9]);
+
+                expect(await selectedColumns()).toEqual(["Column 0", "Column 1", "Column 3", "Column 4", "Column 5", "Column 6", "Column 7", "Column 8", "Column 9"]);
+            });
+        });
+    });
+});

test/examples/column_mouse_selection/selecting_one_column.test.js

@@ -0,0 +1,48 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2020, the Regular Table Authors.
+ *
+ * This file is part of the Regular Table library, distributed under the terms
+ * of the Apache License 2.0.  The full license can be found in the LICENSE
+ * file.
+ *
+ */
+
+describe("column_mouse_selection.html", () => {
+    const selectedColumns = async () => {
+        const selectedCells = await page.$$("regular-table thead th.mouse-selected-column");
+        const selectedValues = [];
+        for (const td of selectedCells) {
+            selectedValues.push(await page.evaluate((td) => td.innerHTML.trim().split(" ").slice(0, 2).join(" "), td));
+        }
+        return selectedValues;
+    };
+
+    beforeAll(async () => {
+        await page.setViewport({width: 2500, height: 2500});
+        await page.goto("http://localhost:8081/dist/examples/column_mouse_selection.html");
+        await page.waitFor("regular-table table tbody tr td");
+    });
+
+    describe("selecting one column", () => {
+        beforeAll(async () => {
+            const ths = await page.$$("regular-table thead tr:nth-of-type(2) th");
+
+            await page.evaluate(async (th) => {
+                const event = new MouseEvent("click", {bubbles: true});
+                th.dispatchEvent(event);
+            }, ths[4]);
+        });
+
+        test("selects the cells", async () => {
+            expect(await selectedColumns()).toEqual(["Column 2"]);
+
+            const selectedCells = await page.$$("regular-table tbody tr td.mouse-selected-column");
+            const selectedValues = [];
+            for (const td of selectedCells) {
+                selectedValues.push(await page.evaluate((td) => td.innerHTML.trim().split(" ").slice(0, 2).join(" "), td));
+            }
+            expect(selectedValues.length).toEqual(131);
+        });
+    });
+});