npm package: @picturae/openseadragonselection
Description: An OpenSeadragon plugin to allow selecting part of the zoomable image and getting the corresponding coordinates.
Author: Petar Petrov
Latest version: 2.1.0

# OpenSeadragonSelection

An OpenSeadragon plugin that provides functionality for selecting a rectangular part of an image. Is tested for
OpenSeadragon 5.0.1.

## Demo

A demo/test page can be found in the demo directory. To run the demo first clone the project, install the dependencies
using `yarn` and then run the dev server using `yarn dev`.

## Usage

Include `dist/openseadragonselection.js` after OpenSeadragon in your html. Then after you create a viewer:

    var selection = viewer.selection(options);

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

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

## Options

    viewer.selection({
        element:                 null, // html element to use for overlay
        showSelectionControl:    true, // show button to toggle selection mode
        toggleButton:            null, // dom element to use as toggle button
        showConfirmDenyButtons:  true,
        styleConfirmDenyButtons: true,
        returnPixelCoordinates:  true,
        keyboardShortcut:        'c', // key to toggle selection mode
        rect:                    null, // initial selection as an OpenSeadragon.SelectionRect object
        allowRotation:           true, // turn selection rotation on or off as needed
        startRotated:            false, // alternative method for drawing the selection; useful for rotated crops
        startRotatedHeight:      0.1, // only used if startRotated=true; value is relative to image height
        restrictToImage:         false, // true = do not allow any part of the selection to be outside the image
        onSelection:             function(rect) {}, // Callback which is called when a selection has been made,
        onSelectionCanceled:     function(false) {}, // Callback when the selection is cancelled,
        onSelectionChange:       function(rect) {}, // Callback when the drawn selection changes,
        onSelectionToggled:      function({enabled: boolean}) {}, // Callback when selection is enabled/disabled,
        prefixUrl:               null, // overwrites OpenSeadragon's option
        navImages:               { // overwrites OpenSeadragon's options
            selection: {
                REST:   'selection_rest.png',
                GROUP:  'selection_grouphover.png',
                HOVER:  'selection_hover.png',
                DOWN:   'selection_pressed.png'
            },
            selectionConfirm: {
                REST:   'selection_confirm_rest.png',
                GROUP:  'selection_confirm_grouphover.png',
                HOVER:  'selection_confirm_hover.png',
                DOWN:   'selection_confirm_pressed.png'
            },
            selectionCancel: {
                REST:   'selection_cancel_rest.png',
                GROUP:  'selection_cancel_grouphover.png',
                HOVER:  'selection_cancel_hover.png',
                DOWN:   'selection_cancel_pressed.png'
            },
        },
        borderStyle: { // overwriteable style defaults
            width:      '1px',
            color:      '#fff'
        },
        handleStyle: {
            top:        '50%',
            left:       '50%',
            width:      '6px',
            height:     '6px',
            margin:     '-4px 0 0 -4px',
            background: '#000',
            border:     '1px solid #ccc'
        },
        cornersStyle: {
            width:      '6px',
            height:     '6px',
            background: '#000',
            border:     '1px solid #ccc'
        }
    });

## To do

    - fix behavior when the viewer itself is rotated
    - test/fix with multiple images at once

## Fixes
    - Now selection can be draw over existing selections, make selection in selection.
    To achieve that before you were forced to make a selection outside any other selection and move it over.