Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Boxselector is resizable #192

Merged
merged 4 commits into from

2 participants

@ansis
Owner

The boxselector can be adjusted by clicking and dragging on edges and corners. Mouseup behavior is the same as when drawing an original box. Weird behavior when dragging over an edge should also be fixed by this.

Fixes #141
and mapbox/tilemill#889

@ansis
Owner

Note: its broken with the current stamen/modestmaps-js master, but works with the DragHandler changes in modestmaps/modestmaps-js where shift-mousedown is ignored.

@tmcw tmcw merged commit 5ca8e4b into mapbox:master
@tmcw
Owner

Cool, will try to catch up stamen/ to modestmaps/ or kill stamen/

@tmcw tmcw referenced this pull request
Closed

Resizeable boxselector #141

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 28, 2012
  1. @ansis

    Split boxselecter adjustments

    ansis authored
  2. @ansis

    Boxselector now resizable

    ansis authored
Commits on Apr 29, 2012
  1. @ansis
  2. @ansis

    Some boxselector simplification

    ansis authored
This page is out of date. Refresh to see the latest.
Showing with 89 additions and 22 deletions.
  1. +89 −22 control/mm/boxselector.js
View
111 control/mm/boxselector.js
@@ -4,11 +4,17 @@ wax.mm = wax.mm || {};
// Box Selector
// ------------
wax.mm.boxselector = function(map, tilejson, opts) {
- var mouseDownPoint = null,
+ var corner = null,
+ nearCorner = null,
callback = ((typeof opts === 'function') ?
opts :
opts.callback),
boxDiv,
+ style,
+ borderWidth = 0,
+ horizontal = false, // Whether the resize is horizontal
+ vertical = false,
+ edge = 5, // Distance from border sensitive to resizing
addEvent = MM.addEvent,
removeEvent = MM.removeEvent,
box,
@@ -32,42 +38,73 @@ wax.mm.boxselector = function(map, tilejson, opts) {
function mouseDown(e) {
if (!e.shiftKey) return;
- mouseDownPoint = getMousePoint(e);
+ corner = nearCorner = getMousePoint(e);
+ horizontal = vertical = true;
- boxDiv.style.left = mouseDownPoint.x + 'px';
- boxDiv.style.top = mouseDownPoint.y + 'px';
+ style.left = corner.x + 'px';
+ style.top = corner.y + 'px';
+ style.width = style.height = 0;
- addEvent(map.parent, 'mousemove', mouseMove);
- addEvent(map.parent, 'mouseup', mouseUp);
+ addEvent(document, 'mousemove', mouseMove);
+ addEvent(document, 'mouseup', mouseUp);
map.parent.style.cursor = 'crosshair';
return MM.cancelEvent(e);
}
+ // Resize existing box
+ function mouseDownResize(e) {
+ var point = getMousePoint(e),
+ TL = {
+ x: parseInt(boxDiv.offsetLeft),
+ y: parseInt(boxDiv.offsetTop)
+ },
+ BR = {
+ x: TL.x + parseInt(boxDiv.offsetWidth),
+ y: TL.y + parseInt(boxDiv.offsetHeight)
+ };
+
+ // Determine whether resize is horizontal, vertical or both
+ horizontal = point.x - TL.x <= edge || BR.x - point.x <= edge;
+ vertical = point.y - TL.y <= edge || BR.y - point.y <= edge;
+
+ if (vertical || horizontal) {
+ corner = {
+ x: (point.x - TL.x < BR.x - point.x) ? BR.x : TL.x,
+ y: (point.y - TL.y < BR.y - point.y) ? BR.y : TL.y
+ };
+ nearCorner = {
+ x: (point.x - TL.x < BR.x - point.x) ? TL.x : BR.x,
+ y: (point.y - TL.y < BR.y - point.y) ? TL.y : BR.y
+ }
+ addEvent(document, 'mousemove', mouseMove);
+ addEvent(document, 'mouseup', mouseUp);
+ return MM.cancelEvent(e);
+ }
+ }
function mouseMove(e) {
- var point = getMousePoint(e),
- style = boxDiv.style;
+ var point = getMousePoint(e);
style.display = 'block';
- if (point.x < mouseDownPoint.x) {
- style.left = point.x + 'px';
- } else {
- style.left = mouseDownPoint.x + 'px';
+ if (horizontal) {
+ style.left = (point.x < corner.x ? point.x : corner.x) + 'px';
+ style.width = Math.abs(point.x - corner.x) - 2 * borderWidth + 'px';
}
- if (point.y < mouseDownPoint.y) {
- style.top = point.y + 'px';
- } else {
- style.top = mouseDownPoint.y + 'px';
+ if (vertical) {
+ style.top = (point.y < corner.y ? point.y : corner.y) + 'px';
+ style.height = Math.abs(point.y - corner.y) - 2 * borderWidth + 'px';
}
- style.width = Math.abs(point.x - mouseDownPoint.x) + 'px';
- style.height = Math.abs(point.y - mouseDownPoint.y) + 'px';
+ changeCursor(point, map.parent);
return MM.cancelEvent(e);
}
function mouseUp(e) {
var point = getMousePoint(e),
- l1 = map.pointLocation(point),
- l2 = map.pointLocation(mouseDownPoint);
+ l1 = map.pointLocation( new MM.Point(
+ horizontal ? point.x : nearCorner.x,
+ vertical? point.y : nearCorner.y
+ ));
+ l2 = map.pointLocation(corner);
// Format coordinates like mm.map.getExtent().
boxselector.extent([
@@ -79,12 +116,36 @@ wax.mm.boxselector = function(map, tilejson, opts) {
Math.max(l1.lon, l2.lon))
]);
- removeEvent(map.parent, 'mousemove', mouseMove);
- removeEvent(map.parent, 'mouseup', mouseUp);
+ removeEvent(document, 'mousemove', mouseMove);
+ removeEvent(document, 'mouseup', mouseUp);
map.parent.style.cursor = 'auto';
}
+ function mouseMoveCursor(e) {
+ changeCursor(getMousePoint(e), boxDiv);
+ }
+
+ // Set resize cursor if mouse is on edge
+ function changeCursor(point, elem) {
+ var TL = {
+ x: parseInt(boxDiv.offsetLeft),
+ y: parseInt(boxDiv.offsetTop)
+ },
+ BR = {
+ x: TL.x + parseInt(boxDiv.offsetWidth),
+ y: TL.y + parseInt(boxDiv.offsetHeight)
+ };
+ // Build cursor style string
+ var prefix = '';
+ if (point.y - TL.y <= edge) prefix = 'n';
+ else if (BR.y - point.y <= edge) prefix = 's';
+ if (point.x - TL.x <= edge) prefix += 'w';
+ else if (BR.x - point.x <= edge) prefix += 'e';
+ if (prefix != '') prefix += '-resize';
+ elem.style.cursor = prefix;
+ }
+
function drawbox(map, e) {
if (!boxDiv || !box) return;
var br = map.locationPoint(box[1]),
@@ -122,8 +183,12 @@ wax.mm.boxselector = function(map, tilejson, opts) {
boxDiv.id = map.parent.id + '-boxselector-box';
boxDiv.className = 'boxselector-box';
map.parent.appendChild(boxDiv);
+ style = boxDiv.style;
+ borderWidth = parseInt(window.getComputedStyle(boxDiv).borderWidth);
addEvent(map.parent, 'mousedown', mouseDown);
+ addEvent(boxDiv, 'mousedown', mouseDownResize);
+ addEvent(map.parent, 'mousemove', mouseMoveCursor);
map.addCallback('drawn', drawbox);
return this;
};
@@ -131,6 +196,8 @@ wax.mm.boxselector = function(map, tilejson, opts) {
boxselector.remove = function() {
map.parent.removeChild(boxDiv);
removeEvent(map.parent, 'mousedown', mouseDown);
+ removeEvent(boxDiv, 'mousedown', mouseDownResize);
+ removeEvent(map.parent, 'mousemove', mouseMoveCursor);
map.removeCallback('drawn', drawbox);
};
Something went wrong with that request. Please try again.