@picturae/openseadragonselection v2.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.