Rectangular Selection in ListView

[LarsJ]

This example is about implementing Rectangular Selection in a listview with mouse and keyboard. By default, listviews only supports selection of entire rows. Either a single row or multiple rows. The purpose of this UDF is also to support selection of a rectangular group of cells. Either a single rectangular group of cells or multiple rectangular groups of cells.

The UDF supports all four types of listviews: The conventional (all examples in the help file), virtual (includes the $LVS_OWNERDATA style), ownerdrawn (includes the $LVS_OWNERDRAWFIXED style) and ownerdrawn+virtual listview.

The examples are all about virtual listviews to verify that the code still works with a large number of additional WM_NOTIFY messages needed to populate a virtual listview. One additional message per cell for all cells visible on a listview page. If a page shows 40 rows and 15 columns, this means 600 additional messages to fill the page with data.

The first post here is about selecting a single rectangular group of cells. The next post is about selecting multiple rectangular groups of cells.
 

Single selection
Selecting a single rectangular group of cells forming a rectangular selection can be performed by selecting the first corner cell of the rectangle as a fixed starting cell and then selecting the opposite corner cell of the rectangle based on the Single Cell Navigation technique.

The technique of creating a single rectangular selection in this post and of creating multiple rectangular selections in the next post is heavily based on the Single Cell Navigation (SCN) UDF.

The ideas in code to implement resizable GUIs and listviews and the use of multiple listviews are exactly the same in terms of Rectangular Selections as they are in terms of Single Cell Navigation.

And the requirements for a listview to implement Rectangular Selections are the same as the requirements for implementing Single Cell Navigation:

• The $LVS_EX_HEADERDRAGDROP style (drag/drop reordering of columns) is not supported.
• Zero-width columns are not supported. In the code it's checked that columns are not narrower than 10 pixels.
   

Example
This is the Virtual-SRS.au3 example. The example demonstrates the use of the pure UDF. The rectangle selection is not used in user code. Run the example in SciTE with F5. Right-click listview and select "Single rectangle selection". You should try to create a selection using all four methods described below:

The yellow cell is the active cell that is subject of keyboard navigation.

There are four ways to create a rectangle selection.

• Click and drag a selection with the mouse. Releasing the mouse button completes the selection.

The advantage of this method is that it's simple, fast and intuitive. The disadvantage is that it can only be used to make a selection on the current visible page in the listview. When using the mouse to create the selection, you cannot use the mouse on the scrollbars at the same time.

The other three ways uses the Shift key to create the selection. This allows you to continue a selection by pressing the Shift key and performing single cell navigation on the yellow active cell in one of the corners of the current selection. You can also continue a selection started with the Click and drag method above.

The ability to continue a selection allows you to create large selections that span multiple listview pages and navigate the listview with the scrollbars in between each subselection.

The three methods with the Shift key are fully integrated. You can start a selection with one method and continue with another method.

The yellow active cell is the fixed start cell in the selection rectangle. Press the Shift key and

• Use keyboard navigation to create the selection rectangle.
   
• Click the opposite corner of the selection rectangle with the mouse. Using the scrollbars, you can navigate around the listview before clicking the opposite corner.
   
• Click and drag a selection with the mouse. Releasing Shift key and mouse button temporarily completes the selection.

Since only a single rectangle selection is supported, a click of the mouse, a movement of the yellow active cell with the keyboard or starting a new selection will immediately delete the current selection.
 

The code
Single Rectangle Selection (SRS) is implemented as a UDF in Includes\GuiListViewSRS.au3. GuiListViewSRS.au3 was started as a direct copy of GuiListViewSCN.au3. The UDF contains two functions to enable and disable SRS functionality. The functions starts and stops two message handlers implemented through the subclassing technique that takes care of the actual Single Rectangle Selection. One message handler, SRS_GuiHandler(), takes care of WM_NOTIFY messages (listview and header notifications and messages) sent to the main GUI. The other message handler, SRS_ListViewHandler(), takes care of mouse and keyboard messages sent directly to the listview.
 

Examples
Run examples in SciTE with F5.

There are only two examples of single rectangle selections.

Virtual-SRS.au3 is the example shown above.

Virtual-SRS-Ex.au3 is a very simple example of using the rectangle selection in the user code. It's used to draw a corresponding rectangle in the user code. Right-click listview and select "Single rectangle selection" to switch to UDF code. Create a rectangle selection. Right-click listview and select "Default row selection" to switch back to user code. Because the UDF only supports single selections, the rectangle is passed to the user code as item/subitem (row/column) coordinates (indexes) of two opposite corner cells in the rectangle. This means that even a very large rectangle is passed instantly. You should see the rectangel in the user code.
 

7z-file
The 7z-file contains source code for UDFs and examples.

You need AutoIt 3.3.12 or later. Tested on Windows 7 and Windows 10.

Comments are welcome. Let me know if there are any issues.

RectangularSelection.7z

Edited November 23, 2020 by LarsJ
7z-file updated

[LarsJ]

Multiple selections
Creation of multiple rectangle selections can be implemented as multiple iterations of creating a single rectangle selection. And in addition maintain information to keep track of these multiple selections.

In the listview, both single and multiple rectangle selections are visually illustrated as groups of colored cells. The colors are drawn through custom draw code. But the custom draw code requires a different technique for multiple selections than for single selections.

For a single rectangle selection the rectangle can be specified as item/subitem (row/column) coordinates (indexes) of two opposite corner cells in the rectangle. In the custom draw code, it can be checked whether a listview cell is located inside this rectangle. In that case, the cell can be drawn e.g. with a blue background color.

However, this method will not work for a large number of multiple selection rectangles because it'll take too long to check if a listview cell belongs to a single rectangle out of a large number of rectangles. A method that is independent of the number of rectangles is required.

One such method is to store the selections in an array with the same number of rows and columns as the listview. The value of each array element directly indicates the background selection color of the corresponding listview cell. To fill in background color in all cells on a listview page with 40 rows and 15 columns will require 600 array element lookups. In AutoIt, array element lookups are very fast. The rule of thumb is that you can look up 1000 integer values in an array in one millisecond. Filling background color in all 600 cells on the listview page will only take a few milliseconds. And that's fast enough. And the speed is completely independent of the number of selection rectangles stored in the array.
 

Example
This is the Virtual-MRS.au3 example. The example demonstrates the use of the pure UDF. The rectangle selections are not used in user code. Run the example in SciTE with F5. Right-click listview and select "Multiple rectangle selections".

Use the following procedure to create the two selections shown in the image:

• Click and drag the selection from (2,1) to (13,7).
   
• Click and drag the selection from (4,2) to (11,6).
  Right-click in this inner selection and delete it.

If you have regretted deleting the inner selection:

• Right-click one of the blue cells in the outer selection and select "Update saved selection".

If you have updated the outer selection so that you have a completely blue rectangle, repeat the steps to delete the inner rectangle.

Complete the selections in the image:

• Click and drag the selection from (6,3) to (9,5).

The selection from (6.3) to (9.5) is the current selection and is drawn in a cyan color with the yellow active cell in the corner. Click a white cell to save the current selection after which it appears as a blue rectangle. The blue rectangle is now stored in the array discussed above. This array is named $MRS_aSubItems in code.

If you want to use a single cell as a rectangle selection, double-click the cell or press Enter key if you are using the keyboard. A single cell selection is not shown in the image.
 

Right-click
You can right-click any cell in the listview. The items that appear in the menu depends on the context of the cell.

If you right-click the outer blue rectangle in the image above, you'll get a menu containing this rectangle and a corresponding submenu.

If you right-click the inner blue rectangle, you'll get a menu that contains both rectangles and corresponding submenus.

If you right-click the middle white rectangle, you'll get the menu that was created in user code to switch between UDF code and user code.

If you right-click the yellow active cell when it's not part of a selection rectangle, as shown in the image above, the menu will contain all rectangle selections and corresponding submenus.

If you right-click the current selection (cyan background color with the yellow active cell in the corner), you'll only be able to delete the selection.

Submenu
The submenu always contains three menu items:

Make current selection is used to display the selection with the cyan background color and the yellow active cell in the corner. If you've made a lot of selections inside each other and on top of each other, it can be difficult to keep track of a specific selection. Use this submenu to show which group of cells belong to a specific selection rectangle.

Delete saved selection removes the corresponding selection rectangle after which the cells are displayed with the default white background color.

Update saved selection is used to recreate a partially deleted selection rectangle. This is demonstrated in the example above.

UDF/User code
When you right-click a white cell, you can switch between UDF and user code.

Switching from UDF code to user code preserves detail information about the individual selection rectangles. This is necessary to apply the selections in the user code. This is demonstrated in the examples below.

However, switching from user code to UDF code deletes all detail information about the individual selection rectangles.

In both situations, however, the selection rectangles are properly visually illustrated in the listview through cell background colors. The cell colors are drawn via selection rectangles stored in the $MRS_aSubItems array discussed above. These rectangles will only be deleted if you delete them manually. However, detail information about the selection rectangles is stored in $MRS_aSelections and other variables. Only these last variables are deleted when switching from user code to UDF code.
 

The code
Multiple Rectangle Selections (MRS) is implemented as a UDF in Includes\GuiListViewMRS.au3. GuiListViewMRS.au3 was started as a direct copy of GuiListViewSRS.au3. The central message handlers are MRS_GuiHandler() and MRS_ListViewHandler(). In MRS_ListViewHandler(), a large amount of code has been added to keep track of multiple selections. And a large amount of code has been added to handle right-click menus through $WM_RBUTTONDOWN messages.
 

Examples
Run examples in SciTE with F5.

Virtual-MRS.au3 is the example used above.

Virtual-MRS-Ex1.au3
Virtual-MRS-Ex1.au3 is a very simple example of using the selection rectangles in the user code. They are used to draw corresponding rectangles in the user code. Once the script has started, right-click the listview and select "Multiple rectangle selections" to run the UDF code. Create a handful of random rectangle selections. Right-click a white cell and select "Default row selection" to return to the user code. Now you can see the rectangle selections in the user code.

Switch back to the UDF code. You can still see the rectangle selections. However, if you right-click one of the blue cells, there is no detail information about the rectangles to generate the usual rectangle selection menu. This detail information is lost by switching back and forth between user code and UDF code.

But there are still many different options. You can create a new rectangle selection exactly on top of an old one. This recreates the lost information. You can create a new rectangle selection exactly on top of an old one, and then delete both the new and the old selection. You can create a new large rectangle selection that covers all the old ones, and then delete both the new and all the old ones at once. And you can create brand new rectangle selections in addition to all the old ones.

Virtual-MRS-Ex2.au3
Create a handful of random rectangle selections in the UDF code and return to user code. Now a small GUI appears where you can set the background color in the selections. The two ComboBoxes are made using functions in Implementing ComboBoxes. Add colors to the selections. Switch to UDF code to see what happens. Switch back to user code.

But there is a problem. If you select a black or dark color for a selection, you'll not see the text in the cells of the rectangle selection. Because the text is always drawn in black.

Virtual-MRS-Ex3.au3 solves the problem that texts is always drawn in black in rectangle selections.
 

Next
Over the next weeks and months, more examples will be added to show how to use both the SRS and MRS UDFs.
 

7z-file
The 7z-file at bottom of first post is updated with the new UDF and new examples.

You need AutoIt 3.3.12 or later. Tested on Windows 7 and Windows 10.

Comments are welcome. Let me know if there are any issues.

Edited November 21, 2020 by LarsJ
Post completed

[LarsJ]

Second post above has been completed. 7z-file at bottom of first post has been updated.

[mLipok]

Damn again. Such a nice article .... 
I don't know whether to go to sleep today because I probably wouldn't fall asleep anyway, without reading, analyzing, understanding, my brain would just explode.
This is so exciting.

 

Thanks will try to read your article next few days, I hope I will be able to understand all, just at first reading.

Regards,
mLipok

[LarsJ]

In the first version of the code there were a few errors.

In the $WM_RBUTTONDOWN section of GuiListViewMRS.au3 that handles right-click, there are some right-click events that are simply not included.

In the Virtual-MRS-Ex3.au3 example, a recalculation of the $MRS_aSubItems array is performed. However, the recalculation isn't performed in all cases.

Both situations result in array subscript/dimension errors with subsequent crash of the code.

I've made a quick update to correct these errors.

I've also added a new example, Conventional-MRS-Ex3.au3, which is a copy of Virtual-MRS-Ex3.au3 but implemented as a conventional listview.

7z-file at bottom of first post is updated.

Edited November 23, 2020 by LarsJ