Question

This is my imgSelectArea code:

ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
                handles: true,
                autoHide: false,
                minChars: 0,
                autoFill: true,
                selectOnly: true,
                mustMatch: true,
                instance: true,
                onInit: function (img, selection) {
                    $("#tagBox").css('display', 'none');
                },
                onSelectEnd: function (img, selection) {
                    $("#tagBox").show();
                    var x1 = selection.x1;
                    var y1 = selection.y1;
                    var x2 = selection.x2;
                    var y2 = selection.y2;
                    var position = $('#<%=imgMain.ClientID%>').position();
                }
            });

This works fine but I want to know when imgSelectArea is closed i.e when you click on overlay area, I want to get notified. I couldn’t find this in documentation.

This is the documentation link:

http://odyniec.net/projects/imgareaselect/usage.html#callback-functions

Has anybody got around this issue?

Answer 1

Ok, I haven’t got a working dev environment where I am so I can’t test this but…

In jquery.imgareaselect.js (I’m using v0.9.8) around line 421:

function cancelSelection() {
    $(document).unbind('mousemove', startSelection)
        .unbind('mouseup', cancelSelection);
    hide($box.add($outer));

    setSelection(selX(x1), selY(y1), selX(x1), selY(y1));

    if (!this instanceof $.imgAreaSelect) {
        options.onSelectChange(img, getSelection());
        options.onSelectEnd(img, getSelection());
    }
    /*ADD THIS LINE*/
    options.onCancelSelection(img);
}

Also, around line 461, add a default, empty function:

    ...
        onInit: function () {},
        onSelectStart: function () {},
        onSelectChange: function () {},
        onCancelSelection: function () {}, /* Add This line */
        onSelectEnd: function () {}
    }, options));

You should then be able to register an event handler as usual…

ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
                ...
                mustMatch: true,
                instance: true,
                onInit: function (img, selection) {
                    $("#tagBox").css('display', 'none');
                },
                onCancelSelection: function (img) {
                    /*Do something*/
                },
                ...
            });

That’s about the best I can do in notepad/ie. If it’s still an issue tomorrow, I’ll have a go with a dev env.