ImageViewerSelectItemsInteractiveMode Object

Allows selection of items using the mouse, touch or keyboard.

Object Model

Syntax

JavaScript

function Leadtools.Controls.ImageViewerSelectItemsInteractiveMode()

Remarks

ImageViewerSelectItemsInteractiveMode derives from ImageViewerRubberBandInteractiveMode and subscribe to these extra events:

Move
KeyDown if IsKeyboardEnabled is true

This mode allows you to use the mouse, touch or keyboard to select items in the image viewer. Use this interactive mode to create an image viewer that acts like a Windows Explorer view in thumbnail modes.

The SelectionMode property determine if a single or multiple items can be selected. Items are selected by modifying the ImageViewerItem.IsSelected property (refer to Image Viewer Items).

If the viewer was setup with a different style for selected items, then the UI will be updated accordingly. Refer to Image Viewer Appearance for more information.

If SelectionMode is Single, then this mode will work as follows:

Clicking on an item will select it. Previously selected item if any will be de-selected.
When IsKeyboardEnabled is true, using the cursor, page up/down, home and end keys will move the selection in the items in a grid fashion inside the current ViewLayout. For example, pressing the left key will select the item to the left of the currently selected one while pressing up will select the item above, and so forth. Previously selected item if any will be de-selected.
Clicking on an area outside any item will be ignored.

If SelectionMode is Multi, then this mode will work as follows:

Clicking on an item will select it, if the current MultiSelectKeyModifier is pressed (by default it is CTRL), then the previously selected item(s) state will not change. If the key was not pressed, the previously selected item(s) will be de-selected.
When IsKeyboardEnabled is true, using the keys mentioned above will work in the same manner except that MultiSelectKeyModifier is also used to keep or remove the selection state of the previously selected items.
Clicking on an area outside any item and dragging with the mouse will start drawing a rubber band selection rectangle, when this is done, all the items that intersect with this rectangle will be selected. MultiSelectKeyModifier is also used as before. If no items intersect with the rubber band rectangle and MultiSelectKeyModifier was not pressed, then all the items are de-selected.

If SelectionMode is None, then this interactive mode does not change the items selection state (hover still works though).

ImageViewerSelectItemsInteractiveMode will also update the hover state of the items in platforms where a mouse is supported. When the mouse is over an item, the ImageViewerItem.IsHovered will be set to true and if the viewer was setup with different styles for hovered items, the UI is updated. Moving out of an item area will set ImageViewerItem.IsHovered back to false.

CanSelectDisabledItems and CanHoverDisabledItems controls how the mode treats items that are disabled (the value of ImageViewerItem.IsEnabled is false). By default, these items selection and hovered state cannot be changed. Buy setting CanSelectDisabledItems or CanHoverDisabledItems to true, disabled items can be selected/deselected or hovered/unhovered accordingly.

The mode sets the value of ImageViewerInteractiveMode.WorkOnBounds to false and AutoItemMode to ImageViewerAutoItemMode.Never since it does not work on any specific items. IsDragMouseWheelEnabled is set to false as well to disable firing drag events using the mouse wheel.

Note: For optimization purposes, this mode will use ImageViewerItems.Select to select and unselect items in a bulk instead of setting the ImageViewerItem.IsSelected property directly.

For more information, refer to Image Viewer Interactive Modes, Image Viewer Items and Image Viewer Appearance.

Example

JavaScript

this._imageViewer.interactiveModes.beginUpdate();
var interactiveMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode();
interactiveMode.isEnabled = false;
this._imageViewer.interactiveModes.add(interactiveMode);
this._imageViewer.interactiveModes.endUpdate();

for (var i = 0; i < this._imageViewer.interactiveModes.count; i++) {
   var interactiveMode = this._imageViewer.interactiveModes.item(i);
   if (interactiveMode instanceof lt.Controls.ImageViewerSelectItemsInteractiveMode) {
      var selectionMode = interactiveMode;
      selectionMode.selectionMode = lt.Controls.ImageViewerSelectionMode.multi;
   }
}

ImageViewerSelectItemsInteractiveMode Object

Reference