Fix box dragging glitch

src/gui/gui-box-tool.mjs

@@ -10,7 +10,7 @@ import { getBBoxCoords } from './gui-display-utils';
 //
 export function BoxTool(gui, ext, nav) {
   var self = new EventDispatcher();
-  var box = new HighlightBox(gui, {persistent: true, handles: true});
+  var box = new HighlightBox(gui, {name: 'box-tool', persistent: true, handles: true, draggable: true});
   var popup = gui.container.findChild('.box-tool-options');
   var coords = popup.findChild('.box-coords');
   var _on = false;
@@ -57,7 +57,7 @@ export function BoxTool(gui, ext, nav) {
     }
   });
 
-  gui.on('box_drag_start', function() {
+  gui.on('shift_drag_start', function() {
     // box.classed('zooming', inZoomMode());
     hideCoords();
   });

src/gui/gui-highlight-box.mjs

@@ -5,13 +5,19 @@ import { internal } from './gui-core';
 
 export function HighlightBox(gui, optsArg) {
   var el = El('div').addClass('zoom-box').appendTo('body'),
-      opts = Object.assign({handles: false, persistent: false}, optsArg),
+      opts = Object.assign({
+        name: 'box',
+        handles: false,
+        persistent: false,
+        draggable: false  // does dragging the map draw a box
+      }, optsArg),
       box = new EventDispatcher(),
       stroke = 2,
       activeHandle = null,
       prevXY = null,
       boxCoords = null,
       _on = false,
+      _visible = false,
       handles;
 
   if (opts.classname) {
@@ -21,19 +27,20 @@ export function HighlightBox(gui, optsArg) {
   el.hide();
 
   gui.on('map_rendered', function() {
-    if (!_on) return;
+    if (!_on || !_visible) return;
     redraw();
   });
 
-  gui.on('box_drag', function(e) {
+  gui.on('shift_drag', function(e) {
     if (!_on) return;
+    if (!opts.draggable) return;
     boxCoords = getBoxCoords(e.data);
     redraw();
     box.dispatchEvent('drag');
   });
 
-  gui.on('box_drag_end', function(e) {
-    if (!_on) return;
+  gui.on('shift_drag_end', function(e) {
+    if (!_on || !_visible || !opts.draggable) return;
     boxCoords = getBoxCoords(e.data);
     var pix = coordsToPix(boxCoords, gui.map.getExtent());
     box.dispatchEvent('dragend', {map_bbox: pix});
@@ -55,7 +62,7 @@ export function HighlightBox(gui, optsArg) {
     });
 
     document.addEventListener('mousemove', function(e) {
-      if (!_on || !activeHandle || !prevXY || !boxCoords) return;
+      if (!_on || !activeHandle || !prevXY || !boxCoords || !_visible) return;
       var xy = {x: e.pageX, y: e.pageY};
       var scale = gui.map.getExtent().getPixelSize();
       var dx = (xy.x - prevXY.x) * scale;
@@ -120,9 +127,11 @@ export function HighlightBox(gui, optsArg) {
   box.hide = function() {
     el.hide();
     boxCoords = null;
+    _visible = false;
   };
 
   box.show = function(x1, y1, x2, y2) {
+    _visible = true;
     var w = Math.abs(x1 - x2),
         h = Math.abs(y1 - y2),
         props = {

src/gui/gui-hit-control.mjs

@@ -199,7 +199,7 @@ export function HitControl(gui, ext, mouse) {
     self.clearSelection();
   });
 
-  gui.on('box_drag_start', function() {
+  gui.on('shift_drag_start', function() {
     self.clearHover();
   });
 

src/gui/gui-map-nav.mjs

@@ -7,8 +7,8 @@ import { HighlightBox } from './gui-highlight-box';
 export function MapNav(gui, ext, mouse) {
   var wheel = new MouseWheel(mouse),
       zoomTween = new Tween(Tween.sineInOut),
-      zoomBox = new HighlightBox(gui), // .addClass('zooming'),
-      boxDrag = false,
+      zoomBox = new HighlightBox(gui, {draggable: true, name: 'zoom-box'}), // .addClass('zooming'),
+      shiftDrag = false,
       zoomScaleMultiplier = 1,
       inBtn, outBtn,
       dragStartEvt,
@@ -59,18 +59,18 @@ export function MapNav(gui, ext, mouse) {
     if (disabled()) return;
     if (!internal.layerHasGeometry(gui.model.getActiveLayer().layer)) return;
     // zoomDrag = !!e.metaKey || !!e.ctrlKey; // meta is command on mac, windows key on windows
-    boxDrag = !!e.shiftKey;
-    if (boxDrag) {
+    shiftDrag = !!e.shiftKey;
+    if (shiftDrag) {
       if (useBoxZoom()) zoomBox.turnOn();
       dragStartEvt = e;
-      gui.dispatchEvent('box_drag_start');
+      gui.dispatchEvent('shift_drag_start');
     }
   });
 
   mouse.on('drag', function(e) {
     if (disabled()) return;
-    if (boxDrag) {
-      gui.dispatchEvent('box_drag', getBoxData(e));
+    if (shiftDrag) {
+      gui.dispatchEvent('shift_drag', getBoxData(e));
     } else {
       ext.pan(e.dx, e.dy);
     }
@@ -79,9 +79,9 @@ export function MapNav(gui, ext, mouse) {
   mouse.on('dragend', function(e) {
     var bbox;
     if (disabled()) return;
-    if (boxDrag) {
-      boxDrag = false;
-      gui.dispatchEvent('box_drag_end', getBoxData(e));
+    if (shiftDrag) {
+      shiftDrag = false;
+      gui.dispatchEvent('shift_drag_end', getBoxData(e));
       zoomBox.turnOff();
     }
   });
@@ -99,7 +99,9 @@ export function MapNav(gui, ext, mouse) {
   });
 
   function useBoxZoom() {
-    return gui.getMode() != 'selection_tool' && gui.getMode() != 'box_tool';
+    var mode = gui.getMode();
+    var disabled = ['selection_tool', 'box_tool', 'rectangle_tool'].includes(mode);
+    return !disabled;
   }
 
   function getBoxData(e) {

src/gui/gui-rectangle-control.mjs

@@ -3,7 +3,7 @@ import { internal } from './gui-core';
 import { setRectangleCoords } from './gui-display-utils';
 
 export function RectangleControl(gui, hit) {
-  var box = new HighlightBox(gui, {persistent: true, handles: true, classname: 'rectangles'});
+  var box = new HighlightBox(gui, {name: 'rectangle-tool', persistent: true, handles: true, classname: 'rectangles', draggable: false});
   var _on = false;
   var dragInfo;
 

src/gui/gui-selection-tool.mjs

@@ -8,7 +8,7 @@ import { GUI } from './gui-lib';
 
 export function SelectionTool(gui, ext, hit) {
   var popup = gui.container.findChild('.selection-tool-options');
-  var box = new HighlightBox(gui);
+  var box = new HighlightBox(gui, {draggable: true});
   var coords = popup.findChild('.box-coords').hide();
   var _on = false;