Custom "rubber band" view in Sproutcore

Question

I'm scratching a long time itch and have started coding a simple browser-based image editor in Sproutcore.

70% of my image editing needs consist of cropping pictures. For the task of selecting which part of the image should remain visible, I would like to use the interface every image editor uses: the rubber band (?) selection box.

I'm pretty new to SC and I'm not sure how to go about implementing this. Is there a component available for what I want to do or will I need to write my own?

If I do need to write my own how would I go about doing it? Should I extend SC.ImageView and store the position of the selection box in there?

Thanks.

Answer 1

There might be a better way to do this, but my first guess would be to tinker with the mouse-down and mouse-up in your view. The mouse-down defines one corner of a rectangle (and perhaps creates a new, empty, transparent view with the bounding box as its border?) and then the mouse-up defines the other corner. I'm not sure how you'd do the shading of the underlying view in that case, though.