workingCursor Property (ImageViewerInteractiveMode)

Summary

Mouse cursor to use for the working state of this ImageViewerInteractiveMode.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewerInteractiveMode.prototype, 'workingCursor', 
	get: function(), 
	set: function(value) 
)

TypeScript Syntax

workingCursor: string;

Property Value

The mouse cursor to use for the working state of this ImageViewerInteractiveMode. The default value is null.

Remarks

IdleCursor and WorkingCursor are only used when this ImageViewerInteractiveMode is attached to the left mouse button and is enabled. It will not be used if this mode is attached to any other button or to touch. Mouse cursors are only supported by desktop browsers.

The values are standard HTML cursor strings. You can use a value like "crosshair" or "move". They will be set into the CSS style.cursor property of the HTML element. A value of null, means "do not change the cursor".

The cursors are set into the ImageViewer main div (ImageViewer.MainDiv) and foreground canvas (ImageViewer.ForeCanvas) elements when this interactive mode is assigned to the left mouse button. Also, the cursors will be set in any elements added by the user to the InteractiveService.UserControls collection.

IdleCursor will be set when the interactive mode is started (after Start is called) and remove when the mode is stopped (when Stop is called).

WorkingCursor will be set when the interactive mode is working (when OnWorkStarted is called) and removed (or set back to idle) when the interactive mode has stopped working (when OnWorkCompleted) is called).

These cursors can be used to provide visual clue into the current interactive mode operations. For instance, when using the ImageViewerPanZoomInteractiveMode interactive mode, you can set the IdleCursor to "crosshair" and the WorkingCursor to "move".

Example

Run the example. The cursor changes to a "crosshair" when it is on the surface of the viewer. When you click and drag, the cursor changes to "move".

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

JavaScript Example

this._imageViewer.interactiveModes.beginUpdate(); 
var panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
panZoom.isEnabled = false; 
this._imageViewer.interactiveModes.add(panZoom); 
panZoom.workingCursor = "Hand"; 
this._imageViewer.interactiveModes.endUpdate();