Skip to content

Latest commit

 

History

History
110 lines (85 loc) · 3.61 KB

row_column_area_selection.md

File metadata and controls

110 lines (85 loc) · 3.61 KB

Row, Column and Area Mouse Selection

We're going to create a composite example with all of our selection behaviors mixed in to one <regular-table>.

Lets make a <regular-table> with a way-to-specific id that will be accessible on the window object using window.${id}.

<regular-table id="allTheMouseSelectionRegularTable"></regular-table>

Our example has two primary responsibilities - adding the behaviors via the addAreaMouseSelection(), addRowMouseSelection() and addColumnMouseSelection() functions and making the overlapping selections obvious with some css.

Styling

Lets start by adding some css for all combinations of the selection classes - .mouse-selected-row, .mouse-selected-column and .mouse-selected-area. Here we've chosen light complementary colors so, for instance, our yellow row selection and blue column selection intersect with a light green color.

Primary colors for no intersection.

regular-table tbody tr td.mouse-selected-row,
regular-table tr th.mouse-selected-row {
    background-color: rgb(255, 255, 0, 0.25); /* yellow */
}

regular-table tbody tr td.mouse-selected-column,
regular-table tr th.mouse-selected-column {
    background-color: rgb(0, 0, 255, 0.15); /* blue */
}

regular-table tbody tr td.mouse-selected-area {
    background-color: rgb(255, 0, 0, 0.25); /* red */
}

Secondary colors for a single intersection.

regular-table tbody tr td.mouse-selected-row.mouse-selected-column,
regular-table tr th.mouse-selected-row.mouse-selected-column {
    background-color: rgb(50, 205, 50, 0.33); /* green */
}

regular-table tbody tr td.mouse-selected-area.mouse-selected-row {
    background-color: rgb(255, 165, 0, 0.33); /* orange */
}

regular-table tbody tr td.mouse-selected-area.mouse-selected-column {
    background-color: rgb(128, 0, 128, 0.33); /* violet */
}

...and a rusty brown color for all selection types intersecting.

regular-table tbody tr td.mouse-selected-area.mouse-selected-column.mouse-selected-row {
    background-color: rgb(183, 65, 14, 0.33); /* rust */
}

Lets turn off the user-select style for this example too.

regular-table tbody tr td {
    user-select: none;
}
regular-table tbody tr th {
    user-select: none;
}
regular-table thead tr th {
    user-select: none;
}

Adding the Behaviors

On "load", we can add each of our behaviors from the row_mouse_selection, column_mouse_selection and area_mouse_selection examples. Let's add them here. We'll need to set our table's DataListener and make the initial draw() call as well.

<script type="module">
    import { addRowMouseSelection } from "/dist/features/row_mouse_selection.js";
    import { addColumnMouseSelection } from "/dist/features/column_mouse_selection.js";
    import { addAreaMouseSelection } from "/dist/features/area_mouse_selection.js";
    import { dataListener } from "/dist/examples/two_billion_rows.js";

    window.addEventListener("load", () => {
        const table = window.allTheMouseSelectionRegularTable;
        if (table) {
            const dl = dataListener(1000, 50);
            addAreaMouseSelection(table);
            addRowMouseSelection(table, dl);
            addColumnMouseSelection(table, dl);
            table.setDataListener(dl);
            table.draw();
        }
    });
</script>

Appendix (Dependencies)

Our Libraries.

<script src="/dist/esm/regular-table.js"></script>
<link rel="stylesheet" href="/dist/css/material.css" />