@2gis/markerdrawer - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

demo/index.ts

@@ -55,2 +55,5 @@ import * as DG from '2gis-maps';
 
+const activePin = new Image();
+activePin.src = 'demo/markers/' + pixelRatio + '/pin_regular_active.png';
+
 const atlas = new Atlas([{
@@ -64,2 +67,6 @@ image: pin,
     pixelDensity: pixelRatio,
+}, {
+    image: activePin,
+    anchor: [0.5, 1],
+    pixelDensity: pixelRatio,
 }]);
@@ -73,12 +80,28 @@
 
-markerDrawer.on('click', (ev: any) => {
-    // tslint:disable-next-line
-    console.log('click', ev);
+markerDrawer.on('mousedown', (ev: any) => {
+    markersData[ev.marker].iconIndex = 2;
+    markerDrawer.update();
+});
 
-    ev.markers.forEach((index) => {
-        markersData[index].iconIndex = 1;
-    });
+markerDrawer.on('mouseup', (ev: any) => {
+    markersData[ev.marker].iconIndex = 1;
     markerDrawer.update();
 });
 
+markerDrawer.on('mouseover', (ev: any) => {
+    if (!markersData[ev.marker].iconIndex) {
+        markersData[ev.marker].iconIndex = 1;
+        markerDrawer.update();
+    }
+    map.getContainer().style['cursor'] = 'pointer';
+});
+
+markerDrawer.on('mouseout', (ev: any) => {
+    if (markersData[ev.marker].iconIndex === 1) {
+        markersData[ev.marker].iconIndex = 0;
+        markerDrawer.update();
+    }
+    map.getContainer().style['cursor'] = 'default';
+});
+
 markerDrawer.addTo(map);
@@ -124,7 +147,5 @@
 
-    ev.markers.forEach((index) => {
-        markersData2[index].iconIndex = 1;
-    });
+    markersData2[ev.marker].iconIndex = 1;
 
     markerDrawer2.update();
 });

package.json

 {
   "name": "@2gis/markerdrawer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Library for fast drawing a huge amount of markers",
@@ -5,0 +5,0 @@ "author": {

src/CanvasRenderer.ts

@@ -140,2 +140,3 @@ import { Atlas } from './Atlas';
         }
+        this._currentFrame.canvas.style.display = 'none';
         this._currentFrame.ctx.clearRect(0, 0, this._size[0] * this._pixelRatio, this._size[1] * this._pixelRatio);
@@ -142,0 +143,0 @@ this._currentFrame.tree.clear();

src/MarkerDrawer.ts

@@ -20,2 +20,4 @@ import { Atlas } from './Atlas';
     private _pane: HTMLElement;
+    private _hoveredMarker?: number;
+    private _clickedMarker?: number;
 
@@ -59,2 +61,6 @@ constructor(atlas: Atlas, options: MarkerDrawerOptions = {}) {
         this._pane.addEventListener('click', this._onClick);
+        this._pane.addEventListener('mousemove', this._onMouseMove);
+        this._pane.addEventListener('mouseleave', this._onMouseLeave);
+        this._pane.addEventListener('mousedown', this._onMouseDown);
+        this._pane.addEventListener('mouseup', this._onMouseUp);
         this._pane.appendChild(this._renderer.container);
@@ -81,2 +87,6 @@ this._atlas.whenReady()
         this._pane.removeEventListener('click', this._onClick);
+        this._pane.removeEventListener('mousemove', this._onMouseMove);
+        this._pane.removeEventListener('mouseleave', this._onMouseLeave);
+        this._pane.removeEventListener('mousedown', this._onMouseDown);
+        this._pane.removeEventListener('mouseup', this._onMouseUp);
 
@@ -98,3 +108,3 @@ return this;
                 originalEvent: ev,
-                markers,
+                marker: Math.max(...markers),
             };
@@ -105,2 +115,66 @@ this.fire('click', event);
 
+    private _onMouseLeave = (ev: MouseEvent) => {
+        if (this._hoveredMarker !== undefined) {
+            const event: MarkerDrawerMouseEvent = {
+                originalEvent: ev,
+                marker: this._hoveredMarker,
+            };
+            this.fire('mouseout', event);
+            this._hoveredMarker = undefined;
+        }
+    }
+
+    private _onMouseMove = (ev: MouseEvent) => {
+        const point = this._getMousePosition(ev);
+        const markers = this._renderer.search(point);
+        const event: MarkerDrawerMouseEvent = {
+            originalEvent: ev,
+            marker: 0,
+        };
+
+        if (markers.length) {
+            const topMarker = Math.max(...markers);
+
+            if (this._hoveredMarker !== undefined) {
+                if (this._hoveredMarker === topMarker) {
+                    return;
+                }
+                event.marker = this._hoveredMarker;
+                this.fire('mouseout', event);
+            }
+            this._hoveredMarker = topMarker;
+            event.marker = this._hoveredMarker;
+            this.fire('mouseover', event);
+        } else if (this._hoveredMarker !== undefined) {
+            event.marker = this._hoveredMarker;
+            this.fire('mouseout', event);
+            this._hoveredMarker = undefined;
+        }
+    }
+
+    private _onMouseDown = (ev: MouseEvent) => {
+        const point = this._getMousePosition(ev);
+        const markers = this._renderer.search(point);
+
+        if (markers.length) {
+            this._clickedMarker = Math.max(...markers);
+            const event: MarkerDrawerMouseEvent = {
+                originalEvent: ev,
+                marker: this._clickedMarker,
+            };
+            this.fire('mousedown', event);
+        }
+    }
+
+    private _onMouseUp = (ev: MouseEvent) => {
+        if (this._clickedMarker !== undefined) {
+            const event: MarkerDrawerMouseEvent = {
+                originalEvent: ev,
+                marker: this._clickedMarker,
+            };
+            this.fire('mouseup', event);
+            this._clickedMarker = undefined;
+        }
+    }
+
     private _getMousePosition(ev: MouseEvent): Vec2 {
@@ -107,0 +181,0 @@ const map = this._map as L.Map;

src/types.ts

@@ -22,4 +22,4 @@ export type Vec2 = [number, number] | Float64Array;
 export interface MarkerDrawerMouseEvent {
-    markers: number[];
+    marker: number;
     originalEvent: MouseEvent;
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

134188

decreased by-51.44%

Number of package files

27

decreased by-20.59%

Lines of code

921

decreased by-11.36%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes