{"action":"created","issue":{"url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1158","repository_url":"https://api.github.com/repos/adazzle/react-data-grid","labels_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1158/labels{/name}","comments_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1158/comments","events_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1158/events","html_url":"https://github.com/adazzle/react-data-grid/pull/1158","id":310329190,"number":1158,"title":"Rectangular selection range support","user":{"login":"rowanhill","id":2607287,"avatar_url":"https://avatars0.githubusercontent.com/u/2607287?v=4","gravatar_id":"","url":"https://api.github.com/users/rowanhill","html_url":"https://github.com/rowanhill","followers_url":"https://api.github.com/users/rowanhill/followers","following_url":"https://api.github.com/users/rowanhill/following{/other_user}","gists_url":"https://api.github.com/users/rowanhill/gists{/gist_id}","starred_url":"https://api.github.com/users/rowanhill/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rowanhill/subscriptions","organizations_url":"https://api.github.com/users/rowanhill/orgs","repos_url":"https://api.github.com/users/rowanhill/repos","events_url":"https://api.github.com/users/rowanhill/events{/privacy}","received_events_url":"https://api.github.com/users/rowanhill/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-04-01T14:52:01Z","updated_at":"2018-05-26T23:00:59Z","closed_at":"2018-05-26T23:00:59Z","author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/adazzle/react-data-grid/pulls/1158","html_url":"https://github.com/adazzle/react-data-grid/pull/1158","diff_url":"https://github.com/adazzle/react-data-grid/pull/1158.diff","patch_url":"https://github.com/adazzle/react-data-grid/pull/1158.patch"},"body":"## Description\r\nAs per my feature request and rough outline in #1133, this PR allows users to select rectangular ranges with both the mouse and keyboard (and to subscribe to events about such ranges, so that their application can react appropriately).\r\n\r\n**Please check if the PR fulfills these requirements**\r\n```\r\n- [x] The commit message follows our guidelines: https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md\r\n- [x] Tests for the changes have been added (for bug fixes / features)\r\n- [ ] Docs have been added / updated (for bug fixes / features)\r\n```\r\n\r\nI don't (yet) understand what the approach to documentation is on this project. If someone could let me know what they'd expect to see, how docs are generated, etc, I'll by happy to add a commit to this PR.\r\n\r\n**What kind of change does this PR introduce?** (check one with \"x\")\r\n```\r\n[ ] Bugfix\r\n[x] Feature\r\n[ ] Code style update (formatting, local variables)\r\n[ ] Refactoring (no functional changes, no api changes)\r\n[ ] Build related changes\r\n[ ] CI related changes\r\n[ ] Other... Please describe:\r\n```\r\n\r\n**What is the current behavior?** (You can also link to an open issue here)\r\nClicking & dragging selects the text in the cells / shift+arrows just moves the selected cell.\r\n\r\n\r\n**What is the new behaviour?**\r\nClicking & dragging selects a rectangular range, with the selected/\"cursor\" cell following the mouse. The range is displayed with a thin border; the selected cell retains a (slightly thicker) border. When the range is greater than 1x1, the selected cells also have a semi-transparent overlay. Text in the grid is no longer selectable except when editing content (in modern browsers; this behaviour won't be supported by IE9 or lower).\r\n\r\nThe selected range can also be manipulated by holding shift and using the arrow keys. (An existing range is updated by keeping the same start point and moving the \"cursor\" cell)\r\n\r\nClicking in the window but not on a cell clears the selection.\r\n\r\nNew callbacks (onCellRangeSelectionStarted, onCellRangeSelectionUpdated, and onCellRangeSelectionCompleted) are called (if they're present) when starting a drag, moving whilst dragging, and ending a drag. Modifying the range via the keyboard calls only the latter two callbacks.\r\n\r\nThere were a few questions I asked in #1133. I've taken the below approaches:\r\n- Text selection is prevented in browsers other than IE9 and below. For now, I'm just assuming that's okay, and that this project doesn't support IE9 or lower; I can't see anything official on what's supported, but shout if that's not true.\r\n- onViewportDoubleClick remains. I don't understand how it's ever actually invoked by a user (given if you click a cell, it stops the event from propagating), but leaving it in doesn't seem like a problem for this PR.\r\n- I've removed onViewportClick, but I believe the behaviour is preserved: if you click in the viewport but outside a cell, when you mouseup the window's event handler will see that but also see there's no selection drag in process, and so call deselect. As with onViewportDoubleClick, I don't actually understand how you trigger this as a user, but I've tried to preserve behaviour regardless.\r\n- I haven't done anything about onCellDeSelect not being called in some situations when a cell is, in fact, deselected. I do think that's probably a bug, but I thought it was best left for a different PR.\r\n- Clicking outside the grid calls deselect() now. Previously the cell just lost focus (so it looked deselected, because the CSS relied on :focus, but the selected state remained). Now the actual selected state is changed. I'm not sure this is an externally observable difference, though, because of the point above about onCellDeSelect not being fired when you might expect it to.\r\n- This feature is always on - i.e. I haven't provided any setting to disable it. I considered providing one, or tying it to enableCellSelect, but as far as I can tell enableCellSelect doesn't actually prevent cell selection, but merely stops there being a cell selected by default when the grid is first rendered.\r\n\r\n**Does this PR introduce a breaking change?** (check one with \"x\")\r\n```\r\n[ ] Yes\r\n[x] No\r\n```\r\nOkay, so there are a few small differences noted above, but I don't believe they're \"breaking.\" The part I'm most concerned by is preventing text selection, but I strongly suspect that's not behaviour that anyone would be relying on.\r\n\r\n**Other information**\r\n\r\nThe first commit in this PR is essentially unrelated to this feature - it's tidying up and isolating various tests. It's a prerequisite of the next commit, though: without doing that tidy up, some state was leaking between tests (such that something at some point triggered a render of Canvas, which had fewer rows than specified, so ultimately generated an exception that killed the test runner)."},"comment":{"url":"https://api.github.com/repos/adazzle/react-data-grid/issues/comments/392293281","html_url":"https://github.com/adazzle/react-data-grid/pull/1158#issuecomment-392293281","issue_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1158","id":392293281,"user":{"login":"rowanhill","id":2607287,"avatar_url":"https://avatars0.githubusercontent.com/u/2607287?v=4","gravatar_id":"","url":"https://api.github.com/users/rowanhill","html_url":"https://github.com/rowanhill","followers_url":"https://api.github.com/users/rowanhill/followers","following_url":"https://api.github.com/users/rowanhill/following{/other_user}","gists_url":"https://api.github.com/users/rowanhill/gists{/gist_id}","starred_url":"https://api.github.com/users/rowanhill/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rowanhill/subscriptions","organizations_url":"https://api.github.com/users/rowanhill/orgs","repos_url":"https://api.github.com/users/rowanhill/repos","events_url":"https://api.github.com/users/rowanhill/events{/privacy}","received_events_url":"https://api.github.com/users/rowanhill/received_events","type":"User","site_admin":false},"created_at":"2018-05-26T23:00:59Z","updated_at":"2018-05-26T23:00:59Z","author_association":"NONE","body":"I think this PR is now obsolete - see my new PR at #1210 which adds the same functionality, but on top of next (including the refactoring from #1123)."}}
{"actor":{"display_login":"rowanhill"}}