@h21-map/google-zoom-box - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

index.js

@@ -1,6 +0,4 @@
-let GMAP_ZOOM_IN = 0;
-var ZoomBox = function (map) {
-    this._map = map;
-    this.mousem;
-    this.mouseup;
+
+var ZoomBox = function () {
+
     try {
@@ -11,21 +9,25 @@ google;
     }
-    if (!map) {
-        return;
-    }
 
-    this._opts = {
-        zoomType: GMAP_ZOOM_IN,
-        strokeWeight: 2,
-        strokeColor: "#4476de",
-        style: "solid",
-        fillColor: "#e1e6f2",
-        opacity: 0.8,
-        cursor: "crosshair",
-        autoClose: true,
+    this.extend(ZoomBox, google.maps.OverlayView);
+
+    this.opts = {
+        zoomType: 0,
+        strokeWeight: 1,
     };
 
-    this._isOpen = false;
+    this._isOpen = true;
     this._fDiv = null;
+    this._div = null;
 }
 
+ZoomBox.prototype.extend = function (obj1, obj2) {
+    return (function (object) {
+        var property;
+        for (property in object.prototype) {
+            this.prototype[property] = object.prototype[property];
+        }
+        return this;
+    }).apply(obj1, [obj2]);
+};
+
 ZoomBox.prototype._bind = function () {
@@ -38,7 +40,26 @@ var me = this;
 
-ZoomBox.prototype.open = function () {
+ZoomBox.prototype.onAdd = function () {
+    
     var me = this;
-    var map = this._map;
+    me._map = this.getMap();
+    me.mousem = null;
+    me.mouseup = null;
     this._isOpen = true;
-    var beginDrawRect = function (e) {
+
+    if (!this._div) {
+        let div = this.container = document.createElement('div');
+        div.style.borderStyle = 'none';
+        div.style.borderWidth = '0px';
+        div.style.position = 'absolute';
+        let size = {}
+        size.width = me._map.getDiv().offsetWidth;
+        size.height = me._map.getDiv().offsetHeight;
+        div.style.cssText = "z-index: 3;  position:absolute; width:" + size.width + "px;height:" + size.height + "px";
+        this.getPanes().overlayMouseTarget.appendChild(div);
+        this._div = div;
+    }
+
+
+    let beginDrawRect = function (e) {
+
         e = window.event || e;
@@ -49,4 +70,3 @@ if (e.button != 2) { return; }
         me._bind.isZooming = true;
-        me.mousem = google.maps.event.addDomListener(me._map.getDiv(), "mousemove", drawingRect);
-        me.mouseup = google.maps.event.addDomListener(me._map.getDiv(), "mouseup", endDrawRect);
+        this._isBeginDrawBinded = true;
 
@@ -59,13 +79,26 @@ me._bind.mx = e.layerX || e.offsetX || 0;
         if (!me._fDiv) {
-            insertHTML(OperationMask.getDom(map), "beforeBegin", me._generateHTML());
-            me._fDiv = OperationMask.getDom(map).previousSibling;
+            me._fDiv = document.createElement("div");
+            me._fDiv.style.opacity = 0.66;
+            me._fDiv.style.backgroundColor = "#0044d68c";
+            me._fDiv.style.cursor = "crosshair";
+            me._fDiv.style.zIndex = 999999;
+            me._fDiv.style.position = 'absolute';
+            me._fDiv.style.width = 0;
+            me._fDiv.style.height = 0;
+            me._fDiv.style.border = " 1px solid #0044d6";
+            me._map.getDiv().appendChild(me._fDiv);
+
+            me._fDiv.style.width = "0";
+            me._fDiv.style.height = "0";
+            me._fDiv.style.left = me._bind.mx + "px";
+            me._fDiv.style.top = me._bind.my + "px";
+
+            me.mousem = google.maps.event.addDomListener(me._map.getDiv(), "mousemove", drawingRect);
+            me.mouseup = google.maps.event.addDomListener(me._map.getDiv(), "mouseup", endDrawRect);
         }
 
-        me._fDiv.style.width = "0";
-        me._fDiv.style.height = "0";
-        me._fDiv.style.left = me._bind.mx + "px";
-        me._fDiv.style.top = me._bind.my + "px";
     };
 
-    var drawingRect = function (e) {
+    let drawingRect = function (e) {
+
         if (me._isOpen == true && me._bind.isZooming == true) {
@@ -77,4 +110,4 @@ var e = window.event || e;
             var dy = me._bind.dy = curY - me._bind.iy;
-            var tw = Math.abs(dx) - me._opts.strokeWeight;
-            var th = Math.abs(dy) - me._opts.strokeWeight;
+            var tw = Math.abs(dx) - me.opts.strokeWeight;
+            var th = Math.abs(dy) - me.opts.strokeWeight;
             me._fDiv.style.width = (tw < 0 ? 0 : tw) + "px";
@@ -86,4 +119,4 @@ me._fDiv.style.height = (th < 0 ? 0 : th) + "px";
                 me._fDiv.style.left = me._bind.mx + "px";
-                if (me._bind.mx + dx >= mapSize[0] - 2 * me._opts.strokeWeight) {
-                    me._fDiv.style.width = mapSize[0] - me._bind.mx - 2 * me._opts.strokeWeight + "px";
+                if (me._bind.mx + dx >= mapSize[0] - 2 * me.opts.strokeWeight) {
+                    me._fDiv.style.width = mapSize[0] - me._bind.mx - 2 * me.opts.strokeWeight + "px";
                 }
@@ -93,4 +126,4 @@ } else {
                 me._fDiv.style.right = mapSize[0] - me._bind.mx + "px";
-                if (me._bind.mx + dx <= 2 * me._opts.strokeWeight) {
-                    me._fDiv.style.width = me._bind.mx - 2 * me._opts.strokeWeight + "px";
+                if (me._bind.mx + dx <= 2 * me.opts.strokeWeight) {
+                    me._fDiv.style.width = me._bind.mx - 2 * me.opts.strokeWeight + "px";
                 }
@@ -101,4 +134,4 @@ }
                 me._fDiv.style.top = me._bind.my + "px";
-                if (me._bind.my + dy >= mapSize[1] - 2 * me._opts.strokeWeight) {
-                    me._fDiv.style.height = mapSize[1] - me._bind.my - 2 * me._opts.strokeWeight + "px";
+                if (me._bind.my + dy >= mapSize[1] - 2 * me.opts.strokeWeight) {
+                    me._fDiv.style.height = mapSize[1] - me._bind.my - 2 * me.opts.strokeWeight + "px";
                 }
@@ -108,4 +141,4 @@ } else {
                 me._fDiv.style.bottom = mapSize[1] - me._bind.my + "px";
-                if (me._bind.my + dy <= 2 * me._opts.strokeWeight) {
-                    me._fDiv.style.height = me._bind.my - 2 * me._opts.strokeWeight + "px";
+                if (me._bind.my + dy <= 2 * me.opts.strokeWeight) {
+                    me._fDiv.style.height = me._bind.my - 2 * me.opts.strokeWeight + "px";
                 }
@@ -116,3 +149,4 @@ }
 
-    var endDrawRect = function (e) {
+    let endDrawRect = function () {
+
         if (me._isOpen == true) {
@@ -140,26 +174,26 @@ google.maps.event.removeListener(me.mousem);
             if (!isNaN(ratio)) {
-                if (me._opts.zoomType == GMAP_ZOOM_IN) {
-                    targetZoomLv = Math.round(map.getZoom() + (Math.log(ratio) / Math.log(2)));
-                    if (targetZoomLv < map.getZoom()) {
-                        targetZoomLv = map.getZoom();
-                    }
+                targetZoomLv = Math.round(me._map.getZoom() + (Math.log(ratio) / Math.log(2)));
+                if (targetZoomLv < me._map.getZoom()) {
+                    targetZoomLv = me._map.getZoom();
                 }
+
             } else {
-                targetZoomLv = map.getZoom() + (me._opts.zoomType == GMAP_ZOOM_IN ? 1 : -1);
+                targetZoomLv = me._map.getZoom() + (me.opts.zoomType == 0 ? 1 : -1);
             }
 
-            var ne = map.getBounds().getNorthEast();
-            var sw = map.getBounds().getSouthWest();
-            var projection = map.getProjection();
+            var ne = me._map.getBounds().getNorthEast();
+            var sw = me._map.getBounds().getSouthWest();
+            var projection = me._map.getProjection();
             var topRight = projection.fromLatLngToPoint(ne);
             var bottomLeft = projection.fromLatLngToPoint(sw);
-            var scale = 1 << map.getZoom();
+            var scale = 1 << me._map.getZoom();
             var newLatlng = projection.fromPointToLatLng(new google.maps.Point(centerX / scale + bottomLeft.x, centerY / scale + topRight.y));
 
-            map.setCenter(newLatlng);
-            map.setZoom(targetZoomLv);
+            me._map.setCenter(newLatlng);
+            me._map.setZoom(targetZoomLv);
 
             me._bind.isZooming = false;
-            map.setOptions({
+            me._map.setOptions({
                 draggable: true,
+                draggableCursor: 'default',
             });
@@ -174,104 +208,43 @@ me._fDiv.parentNode.removeChild(me._fDiv);
     if (!this._isBeginDrawBinded) {
-        google.maps.event.addDomListener(me._map.getDiv(), "mousedown", (e) => {
-            this._isBeginDrawBinded = true;
-            document.oncontextmenu = function () { return false };
-            google.maps.event.clearListeners(me, 'mousemove');
+
+        google.maps.event.addDomListener(me._div, "mousedown", (e) => {
             if (e.which === 3) {
-                map.setOptions({
+                this._isBeginDrawBinded = true;
+                document.oncontextmenu = function () { return false };
+                google.maps.event.clearListeners(me._map.getDiv(), 'mousemove');
+
+                me._map.setOptions({
                     draggable: false,
+                    draggableCursor: 'crosshair'
                 });
 
                 beginDrawRect(e);
-            };
+            }
         });
     }
-}
-
-ZoomBox.prototype.close = function () {
-    if (!this._isOpen) {
-        return;
-    }
-    this._isOpen = false;
 };
 
-ZoomBox.prototype._generateHTML = function () {
-    return ["<div style='position:absolute;z-index:300;border:",
-        this._opts.strokeWeight,
-        "px ",
-        this._opts.style,
-        " ",
-        this._opts.strokeColor,
-        "; opacity:",
-        this._opts.opacity,
-        "; background: ",
-        this._opts.fillColor,
-        "; filter:alpha(opacity=",
-        Math.round(this._opts.opacity * 100),
-        "); width:0; height:0; font-size:0'></div>"].join("");
-};
+ZoomBox.prototype.draw = function () {
 
-function insertHTML(element, position, html) {
-    var range, begin;
-    if (element.insertAdjacentHTML) {
-        element.insertAdjacentHTML(position, html);
-    } else {
-        range = element.ownerDocument.createRange();
-        position = position.toUpperCase();
-        if (position == 'AFTERBEGIN' || position == 'BEFOREEND') {
-            range.selectNodeContents(element);
-            range.collapse(position == 'AFTERBEGIN');
-        } else {
-            begin = position == 'BEFOREBEGIN';
-            range[begin ? 'setStartBefore' : 'setEndAfter'](element);
-            range.collapse(begin);
-        }
-        range.insertNode(range.createContextualFragment(html));
-    }
-    return element;
-}
+    const bounds = this.getMap().getBounds();
+    const projection = this.getProjection();
+    const topRight = projection.fromLatLngToDivPixel(bounds.getNorthEast());
+    const bottomLeft = projection.fromLatLngToDivPixel(bounds.getSouthWest());
+    this.container.width = Math.round(topRight.x - bottomLeft.x) + "px";
+    this.container.style.height = Math.round(bottomLeft.y - topRight.y) + "px";
+    this.container.style.left = bottomLeft.x + "px";
+    this.container.style.top = topRight.y + "px";
 
-function beforeEndHTML(parent, chlidHTML) {
-    insertHTML(parent, "beforeEnd", chlidHTML);
-    return parent.lastChild;
-}
+};
 
-var OperationMask = {
-    _map: null,
-    _html: "<div style='background:transparent;position:absolute;left:0;top:0;width:100%;height:100%;display: none;z-index:3;cursor:inherit;'unselectable='on'></div>",
-    _maskElement: null,
-    _cursor: 'inherit',
-    _inUse: false,
-    show: function (map) {
-        if (!this._map) {
-            this._map = map;
-        }
-        this._inUse = true;
-        if (!this._maskElement) {
-            this._createMask(map);
-        }
-        this._maskElement.style.display = 'block';
-    },
+ZoomBox.prototype.onRemove = function () {
 
-    _createMask: function (map) {
-        this._map = map;
-        if (!this._map) {
-            return;
-        }
-        this._maskElement = beforeEndHTML(this._map.getDiv(), this._html);
-    },
-    hide: function () {
-        if (!this._map) {
-            return;
-        }
-        this._inUse = false;
-        if (this._maskElement) {
-            this._maskElement.style.display = 'none';
-        }
-    },
-    getDom: function (map) {
-        if (!this._maskElement) {
-            this._createMask(map);
-        }
-        return this._maskElement;
-    },
+    me = this;
+    if (!this._isOpen) {
+        return;
+    }
+    me._div.parentNode.removeChild(me._div);
+    me._div = null;
+    google.maps.event.clearListeners(me._map.getDiv(), 'mousemove');
+    google.maps.event.clearListeners(me._map.getDiv(), 'mousedown');
 
@@ -282,4 +255,2 @@ };
     module.exports = { default: ZoomBox, ZoomBox: ZoomBox };
-}
-
-
+};

package.json

 {
   "name": "@h21-map/google-zoom-box",
   "scope":"@h21-map",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A library of Google Map JS API",
@@ -6,0 +6,0 @@ "main": "index.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

9523

decreased by-5.8%

Lines of code

200

decreased by-17.7%

No dependency changes