OpenSeadragonselection: Toggle selection state dynamically

Question

I am currently implementing a viewer of scanned pages using OpenSeadragon and the Selection plugin (https://github.com/picturae/openseadragonselection) to enable the user to select a portion of the page.

I have added custom controls for zoom in/out and toggling wether you can select, or if you should zoom the image. So far so good.

But I am having issues dynamically, in my code, to change the selection state.

I initialize my viewer along the lines of:

var options = {
    showNavigator: true,
    toggleButton: 'toggle-selection',
    zoomPerClick: 2.0,
    element: 'myElement',
    url: <url to image>
};

var viewer = OpenSeadragon(options);

This initialises the viewer as I expect, and everything is dandy. I can click the element with id="toggle-selection" to enable/disable the selection mode.

I want to bind an Angular ng-click handler to some element, to toggle the selection mode of my viewer. But I cant figure out how to change the option, and then have the viewer actually update the state.

Answer 1

You should initialize the selection plugin like this:

var selection = viewer.selection(options);

Then you can alter the selection state with any of these:

selection.enable();
selection.disable();
selection.toggleState();

Alternatively, if you can't save the selection object and access it where you need to, you can still get it from the viewer without passing options like this:

var selection = viewer.selection();

But you would need to be sure that the selection was initiated before that. Otherwise you would create 2 selection instances and have problems.

You can also check if the selection is enabled with the boolean property selection.isSelecting