import Handler from 'handler/Handler';
import Map from '../Map';
import DrawTool from '../tool/DrawTool';

class MapBoxZoomHander extends Handler {
    constructor(target) {
        super(target);
        this.drawTool = new DrawTool({
            'mode'   : 'Rectangle'
        });
    }

    addHooks() {
        this.target.on('_mousedown', this._onMouseDown, this);
    }

    removeHooks() {
        this.target.off('_mousedown', this._onMouseDown, this);
        if (this.drawTool.isEnabled()) {
            this.drawTool.remove();
        }
    }

    _onMouseDown(param) {
        if (!this.target.options['boxZoom']) {
            return;
        }
        if (param.domEvent.shiftKey) {
            this.drawTool.setSymbol(this.target.options['boxZoomSymbol']);
            this.drawTool.addTo(this.target);
            this.drawTool.on('drawend', this._boxZoom, this);
        }
    }

    _boxZoom(param) {
        const extent = param.geometry.getExtent();
        this.target.fitExtent(extent);
        this.drawTool.remove();
    }
}

Map.mergeOptions({
    'boxZoom' : true,
    'boxZoomSymbol': {
        'lineWidth' : 2,
        'lineColor' : '#000',
        'polygonOpacity' : 0
    }
});

Map.addOnLoadHook('addHandler', 'boxZoom', MapBoxZoomHander);

export default MapBoxZoomHander;

@@ -904,32 +904,64 @@
 oxZoom(param) %7B%0A
+        this.drawTool.remove();%0A
         const ex
@@ -994,32 +994,45 @@
 xtent();%0A       
+ const zoom =
  this.target.fit
@@ -1032,17 +1032,18 @@
 get.
-fitExtent
+getFitZoom
 (ext
@@ -1061,32 +1061,109 @@
    this.
-drawTool.remove(
+target.animateTo(%7B%0A            center : extent.getCenter(),%0A            zoom : zoom%0A        %7D
 );%0A    %7D

change to animateTo in BoxZoom