@h21-map/yandex-drawing-manager - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

index.js

@@ -1,2 +0,1 @@
-
 function DrawingManager(map, opts) {
@@ -120,7 +119,6 @@
                     iconLayout: 'default#image',
-                    iconImageSize: [24, 28],
-                    iconImageOffset: [0, 0],
+                    iconImageSize: [24, 30],
+                    iconImageOffset: [-10, -24],
                     iconImageHref: me.markerOptions.iconUrl,
                     draggable: false,
-
                 }
@@ -165,4 +163,5 @@
         if (me._centerMarker) {
-            const position = [me._centerMarker.geometry.getCoordinates(), me.radius];
 
+            const position = [me._centerMarker.geometry.getCoordinates(), Math.floor(me.radius)];
+
             const options = {
@@ -199,2 +198,3 @@ fillColor: me.circleOptions.fillColor,
             me._createVertexMarker();
+            me._createVertexMarkerCopy();
 
@@ -364,45 +364,3 @@ me.map.container.events.remove('click');
 
-    DrawingManager.prototype._centerMarkerAddEventListener = function () {
 
-        let me = this;
-
-        me._centerMarker.events.add('drag', function (event) {
-
-            var coords = event.get('target').geometry.getCoordinates();
-            me.circle.geometry.setCoordinates(coords);
-
-            let to = me.destination(coords, 90, me.radius);
-
-            if (me._vertexMarker) {
-                me._vertexMarker.geometry.setCoordinates(to);
-            };
-
-            me.map.events.fire('draw:circle_centre_change', me._getInfo());
-
-        })
-
-        me._centerMarker.events.add('dragend', () => {
-            me.map.events.fire('draw:circle_center_complete', me._getInfo());
-
-        });
-
-
-        me._centerMarker.events.add('mouseover', () => {
-            me.map.events.fire('draw:marker_mouseover', me._getInfo());
-
-        });
-
-
-        me._centerMarker.events.add('mouseout', () => {
-            me.map.events.fire('draw:marker_mouseout', me._getInfo());
-
-        });
-
-        me._centerMarker.events.add('click', () => {
-            me.map.events.fire('draw:marker_click', me._getInfo());
-
-        })
-
-    };
-
     DrawingManager.prototype._createVertexMarker = function () {
@@ -450,13 +408,93 @@
 
+    DrawingManager.prototype._createVertexMarkerCopy = function () {
+
+        let me = this;
+
+        const svg = [
+            '<?xml version="1.0"?>',
+            '<svg width="15px" height="15px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
+            '<circle stroke="#003dd9" fill="white" stroke-width="10" cx="50" cy="50" r="35"/>',
+            '</svg>'
+        ].join('\n');
+
+        const opt = {
+            iconLayout: 'default#imageWithContent',
+            iconImageSize: [24, 28],
+            iconImageOffset: [-9, -5],
+            iconImageHref: '',
+            draggable: true,
+            iconContentLayout: ymaps.templateLayoutFactory.createClass(svg),
+
+        }
+
+        const g = {
+            geometry: {
+                type: "Point",
+                coordinates: me._vertexMarker.geometry.getCoordinates()
+            }
+        }
+
+        me._vertexMarkerCopy = new ymaps.GeoObject(g, opt);
+        me.map.geoObjects.add(me._vertexMarkerCopy);
+
+        me._vertexMarkerCopyAddEventListener();
+
+    };
+
+    DrawingManager.prototype._vertexMarkerCopyAddEventListener = function () {
+
+        me._vertexMarkerCopy.events.add('mouseenter', () => {
+            me._vertexMarkerCopy.options.set({
+                zIndexHover: 100,
+                zIndex: 100,
+                zIndexDrag: 100,
+                visible: false,
+            });
+
+            me._vertexMarker.options.set({
+                visible: true,
+                zIndexHover: 200,
+                zIndex: 200,
+                zIndexDrag: 200
+            });
+        });
+    }
+
     DrawingManager.prototype._vertexMarkerAddEventListener = function () {
 
         let me = this;
-
+        me.isMaxDistance = false;
         me._vertexMarker.events.add('drag', (event) => {
 
+            me.isMaxDistance = false;
             let coords = event.get('target').geometry.getCoordinates();
             let distance = me.getDistanceTo(me._centerMarker.geometry.getCoordinates(), coords);
             let offset = me.map.container.getOffset();
+
+
+            if (distance >= me.circleOptions.maxRadius) {
+
+                me._vertexMarker.options.set({
+                    visible: false,
+                    zIndexHover: 100,
+                    zIndex: 100,
+                    zIndexDrag: 100,
+                });
+
+                if (me._vertexMarkerCopy) {
+                    me._vertexMarkerCopy.options.set({
+                        visible: true,
+                        zIndexHover: 200,
+                        zIndex: 200,
+                        zIndexDrag: 200,
+                    });
+                }
+
+                me.isMaxDistance = true;
+                me.map.events.fire('draw:circle_radius_max', null);
+                return false;
+            }
+
+
             me.radius = distance;
-          
 
@@ -467,2 +505,31 @@ if (me.circle) {
 
+
+            if (me._vertexMarkerCopy) {
+                me.map.geoObjects.remove(me._vertexMarkerCopy);
+            }
+
+            if (!me.isMaxDistance) {
+                me._createVertexMarkerCopy();
+
+            }
+
+            me._vertexMarker.options.set({
+                zIndexHover: 100,
+                zIndex: 100,
+                zIndexDrag: 100,
+                visible: true,
+            });
+
+
+            if (me._vertexMarkerCopy) {
+                me._vertexMarkerCopy.options.set({
+                    visible: false,
+                    zIndexHover: 200,
+                    zIndexDrag: 200,
+                    zIndex: 200
+                });
+            }
+
+
+
             let pixel = {
@@ -475,6 +542,26 @@ clientX: event.get('domEvent').get('clientX') - offset[0],
                 pixel,
-                radius: me.circle.geometry.getRadius(),
+                radius: Math.floor(me.circle.geometry.getRadius()),
 
             }
 
+
+            me._vertexMarker.events.add('mouseenter', () => {
+
+                me._vertexMarkerCopy.options.set({
+                    zIndexHover: 100,
+                    zIndex: 100,
+                    zIndexDrag: 100,
+                    visible: false,
+                });
+
+
+                me._vertexMarker.options.set({
+                    visible: true,
+                    zIndexHover: 200,
+                    zIndex: 200,
+                    zIndexDrag: 200
+                });
+
+            });
+
             me.map.events.fire('draw:circle_radius_change', ev);
@@ -486,2 +573,23 @@
 
+            if (me._vertexMarkerCopy) {
+
+                if (me.isMaxDistance) {
+
+                    me._vertexMarker.geometry.setCoordinates(me._vertexMarkerCopy.geometry.getCoordinates());
+
+                    me._vertexMarkerCopy.options.set({
+                        zIndexHover: 200,
+                        zIndex: 200,
+                        zIndexDrag: 200,
+                        visible: true,
+                    });
+                    me._vertexMarker.options.set({
+                        zIndexHover: 100,
+                        zIndex: 100,
+                        zIndexDrag: 100,
+                        visible: false,
+                    });
+                }
+            }
+
             me.map.events.fire('draw:circle_radius_complete', me._getInfo());
@@ -493,2 +601,71 @@
 
+    DrawingManager.prototype._centerMarkerAddEventListener = function () {
+
+        let me = this;
+
+        me._centerMarker.events.add('drag', function (event) {
+
+
+            if (me._vertexMarkerCopy) {
+
+                me._vertexMarkerCopy.options.set({
+                    visible: false,
+                    zIndexHover: 100,
+                    zIndex: 100,
+                    zIndexDrag: 100
+                });
+
+            }
+
+            me._vertexMarker.options.set({
+                visible: true,
+                zIndexHover: 200,
+                zIndex: 200,
+                zIndexDrag: 200
+            });
+
+            var coords = event.get('target').geometry.getCoordinates();
+            me.circle.geometry.setCoordinates(coords);
+
+            let to = me.destination(coords, 90, me.radius);
+
+            if (me._vertexMarker) {
+                me._vertexMarker.geometry.setCoordinates(to);
+
+            };
+
+            if (me._vertexMarkerCopy) {
+                me._vertexMarkerCopy.geometry.setCoordinates(to);
+
+            };
+
+            me.map.events.fire('draw:circle_centre_change', me._getInfo());
+
+        })
+
+        me._centerMarker.events.add('dragend', () => {
+            me.map.events.fire('draw:circle_center_complete', me._getInfo());
+
+        });
+
+
+        me._centerMarker.events.add('mouseover', () => {
+            me.map.events.fire('draw:marker_mouseover', me._getInfo());
+
+        });
+
+
+        me._centerMarker.events.add('mouseout', () => {
+            me.map.events.fire('draw:marker_mouseout', me._getInfo());
+
+        });
+
+        me._centerMarker.events.add('click', () => {
+            me.map.events.fire('draw:marker_click', me._getInfo());
+
+        })
+
+    };
+
+
     DrawingManager.prototype._removeCircle = function () {
@@ -501,4 +678,9 @@
             me.map.geoObjects.remove(me._vertexMarker);
+            if (me._vertexMarkerCopy) {
+                me.map.geoObjects.remove(me._vertexMarkerCopy);
+                me._vertexMarkerCopy = null;
+            }
             me.circle = null;
             me._vertexMarker = null;
+
             me.map.events.fire('draw:circle_remove', null);
@@ -643,7 +825,5 @@ }
 
-    DrawingManager.prototype.setMap = function (map) {
+    DrawingManager.prototype.setMap = function (map) { };
 
-    };
 
-
     DrawingManager.prototype.extend = function (obj1, obj2) {
@@ -650,0 +830,0 @@ return (function (object) {

package.json

@@ -0,6 +1,7 @@
+
 {
     "name": "@h21-map/yandex-drawing-manager",
     "scope":"@h21-map",
-    "version": "2.0.2",
-    "description": "A library of Leaflet Map JS API",
+    "version": "2.0.3",
+    "description": "A library of Yandex Map JS API",
     "main": "index.js",
@@ -7,0 +8,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23962

increased by28.12%

Lines of code

589

increased by29.74%

No dependency changes