@h21-map/yandex-drawing-manager
Advanced tools
@h21-map/yandex-drawing-manager - npm Package Compare versions
Comparing version 2.0.5 to 2.0.6
280
index.js
@@ -9,7 +9,7 @@ function DrawingManager(map, opts) { | ||
| var DRAWING_MODE_MARKER = "marker", | ||
| DRAWING_MODE_CIRCLE = "circle", | ||
| DRAWING_MODE_AREA = "area", | ||
| DRAWING_MODE_FITBOUNDS = "fitbounds"; | ||
| let DRAWING_MODE_MARKER = "marker"; | ||
| let DRAWING_MODE_CIRCLE = "circle"; | ||
| let DRAWING_MODE_AREA = "area"; | ||
| let me = this; | ||
@@ -19,3 +19,2 @@ me.map = map; | ||
| me._drawingType = null; | ||
| me._fitBounds = opts._fitBounds || true; | ||
| me.markerOptions = opts.markerOptions || {}; | ||
@@ -31,2 +30,4 @@ me.circleOptions = opts.circleOptions || {}; | ||
| let vertexPane = new ymaps.pane.MovablePane(me.map, { zIndex: 4000 }); | ||
| me.map.panes.append('vertex', vertexPane); | ||
@@ -45,7 +46,5 @@ DrawingManager.prototype.setDrawingMode = function (drawingType, opts) { | ||
| } | ||
| if (me.circleOptions) { | ||
| me.radius = me.circleOptions.radius; | ||
| } | ||
| if (me.areaOptions) { | ||
@@ -67,2 +66,5 @@ me.areaCoordinates = me.areaOptions.areaCoordinates; | ||
| break; | ||
| case DRAWING_MODE_FITBOUNDS: | ||
| me._fitBounds(); | ||
| break; | ||
| default: | ||
@@ -72,8 +74,22 @@ me._reset(); | ||
| } | ||
| this._drawingType = drawingType; | ||
| if (drawingType == DRAWING_MODE_FITBOUNDS) { return false } | ||
| me._drawingType = drawingType; | ||
| } | ||
| }; | ||
| DrawingManager.prototype._fitBounds = function () { | ||
| let me = this; | ||
| if (me._centerMarker) { | ||
| me._fitBoundsMarker(); | ||
| } | ||
| if (me._area) { | ||
| me._fitBoundsArea(); | ||
| } | ||
| if (me._circle) { | ||
| me._fitBoundsCircle(); | ||
| } | ||
| }; | ||
| DrawingManager.prototype.setPosition = function (latitude, longitude) { | ||
| let me = this; | ||
@@ -85,3 +101,2 @@ me.position = null; | ||
| DrawingManager.prototype._setPosition = function (e) { | ||
| let me = this; | ||
@@ -94,3 +109,2 @@ me.position = null; | ||
| DrawingManager.prototype.setEnableDraw = function (enabled) { | ||
| this._enableDraw = enabled; | ||
@@ -100,5 +114,3 @@ }; | ||
| DrawingManager.prototype._bindMarker = function () { | ||
| let me = this; | ||
| me._removeArea(); | ||
@@ -117,3 +129,2 @@ me._removeCenterMarker(); | ||
| if (me.position) { | ||
@@ -135,22 +146,13 @@ const geo = { | ||
| me._centerMarker = new ymaps.GeoObject(geo, options); | ||
| me.map.geoObjects.add(me._centerMarker); | ||
| if (me.map.getZoom() > 9) { | ||
| me.map.setCenter(me.position, me.map.getZoom(), { | ||
| checkZoomRange: true | ||
| }); | ||
| if (me.markerOptions.fitBounds) { | ||
| me._fitBoundsMarker(); | ||
| } | ||
| else { | ||
| me.map.setCenter(me.position, 9, { | ||
| checkZoomRange: true | ||
| }); | ||
| } | ||
| me._centerMarker.events.add('click', (event) => { | ||
| if (!me.circle) { | ||
| if (!me._circle) { | ||
| me.map.events.fire('draw:marker_click', me._getPosition()); | ||
| if (!isIconSelected) { | ||
@@ -169,7 +171,4 @@ me._setIconMarker(me.markerOptions.iconUrlSelected); | ||
| me.position = null; | ||
| me.map.events.fire('draw:marker_create', me._getPosition()); | ||
| } | ||
| } | ||
@@ -192,11 +191,7 @@ | ||
| DrawingManager.prototype._bindCircle = function () { | ||
| let me = this; | ||
| me._removeCircle(); | ||
| if (me._centerMarker) { | ||
| const position = [me._centerMarker.geometry.getCoordinates(), Math.floor(me.radius)]; | ||
| const options = { | ||
@@ -208,22 +203,17 @@ fillColor: me.circleOptions.fillColor, | ||
| strokeWidth: me.circleOptions.strokeWeight, | ||
| syncOverlayInit: true, | ||
| } | ||
| this.circle = new ymaps.Circle(position, {}, options); | ||
| me.map.geoObjects.add(this.circle); | ||
| me._circle = new ymaps.Circle(position, {}, options); | ||
| me.map.geoObjects.add(me._circle); | ||
| me.map.events.fire('draw:circle_create', me._getInfo()); | ||
| me.map.setBounds(this.circle.geometry.getBounds()); | ||
| if (me.circleOptions.fitBounds) { | ||
| me._fitBoundsCircle(); | ||
| } | ||
| me._centerMarker.options.set({ | ||
| draggable: true, | ||
| }); | ||
| me._centerMarker.options.set({ | ||
| cursor: 'move', | ||
| }); | ||
| me._centerMarker.options.set({ | ||
| zIndex: 9999, | ||
@@ -236,14 +226,9 @@ }); | ||
| me._createVertexMarkerCopy(); | ||
| me.map.container.events.remove('click'); | ||
| me.map.container.events.types.click = undefined; | ||
| } | ||
| }; | ||
| DrawingManager.prototype._bindArea = function () { | ||
| let me = this; | ||
| me.map.container.events.remove('click'); | ||
@@ -258,7 +243,6 @@ me.map.container.events.types.click = undefined; | ||
| var patch = []; | ||
| me.area = null; | ||
| me._area = null; | ||
| me._setDrawing(false); | ||
| let options = { | ||
| const options = { | ||
| fillColor: me.areaOptions.fillColor, | ||
@@ -269,17 +253,12 @@ fillOpacity: me.areaOptions.fillOpacity, | ||
| strokeWidth: me.areaOptions.strokeWeight, | ||
| syncOverlayInit: true, | ||
| } | ||
| me.area = new ymaps.Polyline([], {}, options); | ||
| me.map.geoObjects.add(me.area); | ||
| me._area = new ymaps.Polyline([], {}, options); | ||
| me.map.geoObjects.add(me._area); | ||
| me.map.container.events.add('mousemove', (event) => { | ||
| if (typeof event.get('coords') !== "undefined") { | ||
| patch.push(event.get('coords')); | ||
| me._area.geometry.setCoordinates(patch); | ||
| } | ||
| me.area.geometry.setCoordinates(patch); | ||
| }); | ||
@@ -291,14 +270,11 @@ | ||
| me.map.container.events.types.mousemove = undefined; | ||
| me.map.geoObjects.remove(me.area); | ||
| me.map.geoObjects.remove(me._area); | ||
| me._setDrawing(true); | ||
| me.area = new ymaps.Polygon([patch,], {}, options); | ||
| me.map.geoObjects.add(me.area); | ||
| me._area = new ymaps.Polygon([patch,], {}, options); | ||
| me.map.geoObjects.add(me._area); | ||
| me.map.events.fire('draw:area_create', me._convertCoordinates(patch)); | ||
| me._fitBoundsArea(); | ||
| if (me.areaOptions.fitBounds) { | ||
| me._fitBoundsArea(); | ||
| } | ||
@@ -319,7 +295,6 @@ }); | ||
| DrawingManager.prototype._redrawArea = function () { | ||
| let me = this; | ||
| let latlngs = me._convertlatlngs(); | ||
| let options = { | ||
| const options = { | ||
| fillColor: me.areaOptions.fillColor, | ||
@@ -330,12 +305,12 @@ fillOpacity: me.areaOptions.fillOpacity, | ||
| strokeWidth: me.areaOptions.strokeWeight, | ||
| syncOverlayInit: true, | ||
| } | ||
| me.area = new ymaps.Polygon([latlngs,], {}, options); | ||
| me.map.geoObjects.add(me.area); | ||
| me._area = new ymaps.Polygon([latlngs,], {}, options); | ||
| me.map.geoObjects.add(me._area); | ||
| me.map.events.fire('draw:area_create', me._convertCoordinates(latlngs)); | ||
| if (me.areaOptions.fitBounds) { | ||
| me._fitBoundsArea(); | ||
| } | ||
| me._fitBoundsArea(); | ||
| }; | ||
@@ -391,7 +366,28 @@ | ||
| DrawingManager.prototype._fitBoundsArea = function () { | ||
| let me = this; | ||
| if (me._area) { | ||
| me.map.setBounds(me._area.geometry.getBounds(), { checkZoomRange: true }); | ||
| } | ||
| }; | ||
| DrawingManager.prototype._fitBoundsCircle = function () { | ||
| let me = this; | ||
| if (me._circle) { | ||
| me.map.setBounds(me._circle.geometry.getBounds()); | ||
| } | ||
| }; | ||
| if (me.area) { | ||
| me.map.setBounds(me.area.geometry.getBounds(), { checkZoomRange: true }); | ||
| DrawingManager.prototype._fitBoundsMarker = function () { | ||
| let me = this; | ||
| if (me._centerMarker) { | ||
| if (me.map.getZoom() > 9) { | ||
| me.map.setCenter(me._centerMarker.geometry.getCoordinates(), me.map.getZoom(), { | ||
| checkZoomRange: true | ||
| }); | ||
| } | ||
| else { | ||
| me.map.setCenter(me._centerMarker.geometry.getCoordinates(), 9, { | ||
| checkZoomRange: true | ||
| }); | ||
| } | ||
| } | ||
@@ -418,7 +414,4 @@ }; | ||
| DrawingManager.prototype._createVertexMarker = function () { | ||
| let me = this; | ||
| me.to = null; | ||
@@ -435,6 +428,8 @@ me.to = me.destination(me._centerMarker.geometry.getCoordinates(), 90, me.radius); | ||
| const svg = [ | ||
| '<div style="cursor:col-resize; z-index: 3004;">', | ||
| '<?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>' | ||
| '</svg>', | ||
| '</div>' | ||
| ].join('\n'); | ||
@@ -447,2 +442,3 @@ | ||
| iconImageHref: '', | ||
| syncOverlayInit: true, | ||
| draggable: true, | ||
@@ -452,10 +448,6 @@ iconContentLayout: ymaps.templateLayoutFactory.createClass(svg), | ||
| } | ||
| me._vertexMarker = new ymaps.GeoObject(g, opt); | ||
| me.map.geoObjects.add(me._vertexMarker); | ||
| me._vertexMarker.options.set({ | ||
| cursor: 'col-resize', | ||
| }); | ||
| me._vertexMarker.options.set('pane', 'vertex'); | ||
| me.map.panes.get('vertex').getElement().style.cursor = 'col-resize'; | ||
| me._vertexMarkerAddEventListener(); | ||
@@ -468,3 +460,2 @@ | ||
| let me = this; | ||
| const svg = [ | ||
@@ -481,2 +472,3 @@ '<?xml version="1.0"?>', | ||
| iconImageOffset: [-9, -5], | ||
| syncOverlayInit: true, | ||
| iconImageHref: '', | ||
@@ -519,3 +511,3 @@ draggable: true, | ||
| }); | ||
| } | ||
| }; | ||
@@ -533,5 +525,3 @@ DrawingManager.prototype._vertexMarkerAddEventListener = function () { | ||
| if (distance >= me.circleOptions.maxRadius) { | ||
| me._vertexMarker.options.set({ | ||
@@ -554,2 +544,3 @@ visible: false, | ||
| me.isMaxDistance = true; | ||
| me.map.panes.get('events').getElement().style.cursor = 'not-allowed'; | ||
| me.map.events.fire('draw:circle_radius_max', null); | ||
@@ -559,10 +550,8 @@ return false; | ||
| me.radius = distance; | ||
| if (me.circle) { | ||
| me.circle.geometry.setRadius(distance); | ||
| if (me._circle) { | ||
| me._circle.geometry.setRadius(distance); | ||
| } | ||
| if (me._vertexMarkerCopy) { | ||
@@ -574,3 +563,2 @@ me.map.geoObjects.remove(me._vertexMarkerCopy); | ||
| me._createVertexMarkerCopy(); | ||
| } | ||
@@ -585,3 +573,2 @@ | ||
| if (me._vertexMarkerCopy) { | ||
@@ -596,4 +583,2 @@ me._vertexMarkerCopy.options.set({ | ||
| let pixel = { | ||
@@ -606,9 +591,6 @@ clientX: event.get('domEvent').get('clientX') - offset[0], | ||
| pixel, | ||
| radius: Math.floor(me.circle.geometry.getRadius()), | ||
| radius: Math.floor(me._circle.geometry.getRadius()), | ||
| } | ||
| me._vertexMarker.events.add('mouseenter', () => { | ||
| me._vertexMarkerCopy.options.set({ | ||
@@ -621,3 +603,2 @@ zIndexHover: 100, | ||
| me._vertexMarker.options.set({ | ||
@@ -638,8 +619,7 @@ visible: true, | ||
| me.map.panes.get('events').getElement().style.cursor = 'inherit'; | ||
| if (me._vertexMarkerCopy) { | ||
| if (me.isMaxDistance) { | ||
| me._vertexMarker.geometry.setCoordinates(me._vertexMarkerCopy.geometry.getCoordinates()); | ||
| me._vertexMarkerCopy.options.set({ | ||
@@ -661,16 +641,10 @@ zIndexHover: 200, | ||
| me.map.events.fire('draw:circle_radius_complete', me._getInfo()); | ||
| }); | ||
| }; | ||
| DrawingManager.prototype._centerMarkerAddEventListener = function () { | ||
| let me = this; | ||
| me._centerMarker.events.add('drag', function (event) { | ||
| if (me._vertexMarkerCopy) { | ||
| me._vertexMarkerCopy.options.set({ | ||
@@ -682,3 +656,2 @@ visible: false, | ||
| }); | ||
| } | ||
@@ -693,5 +666,10 @@ | ||
| var coords = event.get('target').geometry.getCoordinates(); | ||
| me.circle.geometry.setCoordinates(coords); | ||
| let coords = event.get('target').geometry.getCoordinates(); | ||
| event.get('target').getOverlay().then((e) => { | ||
| e.options.set('cursor', 'move') | ||
| }) | ||
| me._circle.geometry.setCoordinates(coords); | ||
| let to = me.destination(coords, 90, me.radius); | ||
@@ -706,7 +684,5 @@ | ||
| me._vertexMarkerCopy.geometry.setCoordinates(to); | ||
| }; | ||
| me.map.events.fire('draw:circle_centre_change', me._getInfo()); | ||
| }) | ||
@@ -716,3 +692,2 @@ | ||
| me.map.events.fire('draw:circle_center_complete', me._getInfo()); | ||
| }); | ||
@@ -723,20 +698,13 @@ | ||
| me.map.events.fire('draw:marker_mouseover', me._getInfo()); | ||
| }); | ||
| me._centerMarker.events.add('mouseout', () => { | ||
| me.map.events.fire('draw:marker_mouseout', me._getInfo()); | ||
| }); | ||
| }; | ||
| DrawingManager.prototype._removeCircle = function () { | ||
| let me = this; | ||
| if (me.circle) { | ||
| me.map.geoObjects.remove(me.circle); | ||
| if (me._circle) { | ||
| me.map.geoObjects.remove(me._circle); | ||
| me.map.geoObjects.remove(me._vertexMarker); | ||
@@ -747,3 +715,3 @@ if (me._vertexMarkerCopy) { | ||
| } | ||
| me.circle = null; | ||
| me._circle = null; | ||
| me._vertexMarker = null; | ||
@@ -753,8 +721,6 @@ | ||
| } | ||
| } | ||
| }; | ||
| DrawingManager.prototype._removeCenterMarker = function () { | ||
| let me = this; | ||
| if (me._centerMarker) { | ||
@@ -765,21 +731,15 @@ me.map.geoObjects.remove(me._centerMarker); | ||
| } | ||
| }; | ||
| } | ||
| DrawingManager.prototype._removeArea = function () { | ||
| let me = this; | ||
| if (me.area) { | ||
| me.map.geoObjects.remove(me.area); | ||
| me.area = null; | ||
| if (me._area) { | ||
| me.map.geoObjects.remove(me._area); | ||
| me._area = null; | ||
| me.map.events.fire('draw:area_remove', null); | ||
| } | ||
| }; | ||
| } | ||
| DrawingManager.prototype._getInfo = function () { | ||
| let me = this; | ||
| let position = { | ||
@@ -790,3 +750,3 @@ latitude: me._centerMarker.geometry.getCoordinates()[0], | ||
| let info = { | ||
| radius: me.circle.geometry.getRadius(), | ||
| radius: Math.floor(me._circle.geometry.getRadius()), | ||
| position | ||
@@ -796,8 +756,6 @@ }; | ||
| return info; | ||
| } | ||
| }; | ||
| DrawingManager.prototype._getPosition = function () { | ||
| let me = this; | ||
| let position = { | ||
@@ -807,3 +765,2 @@ latitude: me._centerMarker.geometry.getCoordinates()[0], | ||
| } | ||
| let pos = { | ||
@@ -814,8 +771,6 @@ position | ||
| return pos; | ||
| } | ||
| }; | ||
| DrawingManager.prototype._getZoom = function () { | ||
| let me = this; | ||
| let zoom = { | ||
@@ -825,6 +780,5 @@ zoom: me.map.getZoom() | ||
| return zoom; | ||
| } | ||
| }; | ||
| DrawingManager.prototype.destination = function (latlng, heading, distance) { | ||
| heading = (heading + 360) % 360; | ||
@@ -852,3 +806,2 @@ var rad = Math.PI / 180, | ||
| DrawingManager.prototype.degreeToRad = function (degree) { | ||
| return Math.PI * degree / 180; | ||
@@ -858,3 +811,2 @@ }; | ||
| DrawingManager.prototype._getRange = function (v, a, b) { | ||
| if (a != null) { | ||
@@ -870,3 +822,2 @@ v = Math.max(v, a); | ||
| DrawingManager.prototype._getLoop = function (v, a, b) { | ||
| while (v > b) { | ||
@@ -882,5 +833,3 @@ v -= b - a | ||
| DrawingManager.prototype.getDistanceTo = function (point1, point2) { | ||
| var me = this; | ||
| let me = this; | ||
| point1[1] = me._getLoop(point1[1], -180, 180); | ||
@@ -890,3 +839,2 @@ point1[0] = me._getRange(point1[0], -74, 74); | ||
| point2[0] = me._getRange(point2[0], -74, 74); | ||
| var x1, x2, y1, y2; | ||
@@ -897,10 +845,5 @@ x1 = this.degreeToRad(point1[1]); | ||
| y2 = this.degreeToRad(point2[0]); | ||
| return 6370996.81 * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1))); | ||
| }; | ||
| DrawingManager.prototype.setMap = function (map) { }; | ||
| DrawingManager.prototype.extend = function (obj1, obj2) { | ||
@@ -915,3 +858,2 @@ return (function (object) { | ||
| }; | ||
| }; | ||
@@ -918,0 +860,0 @@ |
| { | ||
| "name": "@h21-map/yandex-drawing-manager", | ||
| "scope":"@h21-map", | ||
| "version": "2.0.5", | ||
| "version": "2.0.6", | ||
| "description": "A library of Yandex Map JS API", | ||
@@ -6,0 +6,0 @@ "main": "index.js", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by5.9%
26743
- Lines of code
- increased by7.11%
663