fix CanvasOverlay mocking

example.ts

@@ -25,6 +25,15 @@ Promise.all([
 
       console.log("clicked on Shape", feature, e);
     },
+    contextMenu: (e, feature): void => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      L.popup()
+        .setLatLng(e.latlng)
+        .setContent(`You right clicked on ${feature.properties.NAZKR_ENG}`)
+        .openOn(map);
+
+      console.log("clicked on Shape", feature, e);
+    },
     hover: (e: LeafletMouseEvent, feature) => {
       console.log("hovered on Shape", feature, e);
     },
@@ -45,6 +54,14 @@ Promise.all([
 
       console.log("clicked on Line", feature, e);
     },
+    contextMenu: (e: LeafletMouseEvent, feature) => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      //set up a standalone popup (use a popup as a layer)
+      L.popup()
+        .setLatLng(e.latlng)
+        .setContent(`right clicked on Line ${feature.properties.name}`)
+        .openOn(map);
+    },
     hover: (e: LeafletMouseEvent, feature) => {
       console.log("hovered on Line", feature, e);
     },
@@ -73,6 +90,16 @@ Promise.all([
 
       console.log("clicked on Point", feature, e);
     },
+    contextMenu: (e: LeafletMouseEvent, feature) => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      //set up a standalone popup (use a popup as a layer)
+      L.popup()
+        .setLatLng(feature)
+        .setContent(
+          `You right clicked the point at longitude:${e.latlng.lng}, latitude:${e.latlng.lat}`
+        )
+        .openOn(map);
+    },
     data: points,
   });
 
@@ -99,6 +126,18 @@ Promise.all([
 
       console.log("clicked on Point", feature, e);
     },
+    contextMenu: (e: LeafletMouseEvent, feature) => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      //set up a standalone popup (use a popup as a layer)
+      L.popup()
+        .setLatLng(feature)
+        .setContent(
+          `You right clicked the point at longitude:${e.latlng.lng}, latitude:${e.latlng.lat}`
+        )
+        .openOn(map);
+
+      console.log("clicked on Point", feature, e);
+    },
     hover: (e: LeafletMouseEvent, feature) => {
       console.log("hovered on Point", feature, e);
     },
@@ -130,6 +169,16 @@ Promise.all([
 
       console.log("clicked on Point", feature, e);
     },
+    contextMenu: (e, feature) => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      //set up a standalone popup (use a popup as a layer)
+      L.popup()
+        .setLatLng(feature.geometry.coordinates)
+        .setContent("You right clicked on:" + feature.properties.name)
+        .openOn(map);
+
+      console.log("clicked on Point", feature, e);
+    },
     data: {
       //geojson
       type: "FeatureCollection",
@@ -172,6 +221,15 @@ Promise.all([
 
       console.log("clicked on Shape", feature, e);
     },
+    contextMenu: (e, feature) => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      L.popup()
+        .setLatLng(e.latlng)
+        .setContent(`You right clicked on ${feature.properties.name}`)
+        .openOn(map);
+
+      console.log("clicked on Shape", feature, e);
+    },
     hover: (e, feature) => {
       console.log("hovered on Shape", feature, e);
     },

src/base-gl-layer.ts

@@ -1,7 +1,7 @@
 import { LeafletMouseEvent, Map } from "leaflet";
 
 import { IColor } from "./color";
-import { IPixel } from "./pixel"
+import { IPixel } from "./pixel";
 import { CanvasOverlay, ICanvasOverlayDrawEvent } from "./canvas-overlay";
 import { notProperlyDefined } from "./errors";
 import { MapMatrix } from "./map-matrix";
@@ -34,13 +34,15 @@ export interface IBaseGlLayerSettings {
     [name: string]: IShaderVariable;
   };
   setupClick?: (map: Map) => void;
+  setupContextMenu?: (map: Map) => void;
   setupHover?: SetupHoverCallback;
   sensitivity?: number;
   sensitivityHover?: number;
   vertexShaderSource?: (() => string) | string;
   fragmentShaderSource?: (() => string) | string;
   canvas?: HTMLCanvasElement;
   click?: EventCallback;
+  contextMenu?: EventCallback;
   hover?: EventCallback;
   hoverOff?: EventCallback;
   color?: ColorCallback | IColor | null;
@@ -59,7 +61,7 @@ export const defaults: Partial<IBaseGlLayerSettings> = {
 export type ColorCallback = (featureIndex: number, feature: any) => IColor;
 
 export abstract class BaseGlLayer<
-  T extends IBaseGlLayerSettings = IBaseGlLayerSettings
+  T extends IBaseGlLayerSettings = IBaseGlLayerSettings,
 > {
   bytes = 0;
   active: boolean;
@@ -160,10 +162,10 @@ export abstract class BaseGlLayer<
     this.matrix = null;
     this.vertices = null;
     this.vertexLines = null;
-    try{
-      this.mapCenterPixels =  this.map.project(this.map.getCenter(), 0)
-    } catch(err){
-      this.mapCenterPixels = {x:-0,y:-0}
+    try {
+      this.mapCenterPixels = this.map.project(this.map.getCenter(), 0);
+    } catch (err) {
+      this.mapCenterPixels = { x: -0, y: -0 };
     }
     const preserveDrawingBuffer = Boolean(settings.preserveDrawingBuffer);
     const layer = (this.layer = new CanvasOverlay(
@@ -235,6 +237,9 @@ export abstract class BaseGlLayer<
     if (settings.click && settings.setupClick) {
       settings.setupClick(this.map);
     }
+    if (settings.contextMenu && settings.setupContextMenu) {
+      settings.setupContextMenu(this.map);
+    }
     if (settings.hover && settings.setupHover) {
       settings.setupHover(this.map, this.hoverWait);
     }
@@ -417,6 +422,14 @@ export abstract class BaseGlLayer<
     }
   }
 
+  contextMenu(e: LeafletMouseEvent, feature: any): boolean | undefined {
+    if (!this.settings.contextMenu) return;
+    const result = this.settings.contextMenu(e, feature);
+    if (result !== undefined) {
+      return result;
+    }
+  }
+
   hover(e: LeafletMouseEvent, feature: any): boolean | undefined {
     if (!this.settings.hover) return;
     const result = this.settings.hover(e, feature);

src/canvas-overlay.ts

@@ -48,6 +48,14 @@ export class CanvasOverlay extends Layer {
   _leaflet_id?: number;
   options: LayerOptions;
 
+  get map(): Map {
+    return this._map;
+  }
+
+  set map(map: Map) {
+    this._map = map;
+  }
+
   constructor(userDrawFunc: IUserDrawFunc, pane: string) {
     super();
     this._userDrawFunc = userDrawFunc;
@@ -78,11 +86,11 @@ export class CanvasOverlay extends Layer {
   }
 
   isAnimated(): boolean {
-    return Boolean(this._map.options.zoomAnimation && Browser.any3d);
+    return Boolean(this.map.options.zoomAnimation && Browser.any3d);
   }
 
   onAdd(map: Map): this {
-    this._map = map;
+    this.map = map;
     const canvas = (this.canvas =
       this.canvas ?? document.createElement("canvas"));
 
@@ -136,18 +144,14 @@ export class CanvasOverlay extends Layer {
   }
 
   addTo(map: Map): this {
+    if (!this.canvas) {
+      //Resolves an issue where the canvas is not added to the map, discovered in a jsdom testing environment
+      this.canvas = document.createElement("canvas");
+    }
     map.addLayer(this);
     return this;
   }
 
-  get map(): Map {
-    return this._map;
-  }
-
-  set map(map: Map) {
-    this._map = map;
-  }
-
   _resize(resizeEvent: ResizeEvent): void {
     if (this.canvas) {
       this.canvas.width = resizeEvent.newSize.x;
@@ -157,19 +161,19 @@ export class CanvasOverlay extends Layer {
 
   _reset(): void {
     if (this.canvas) {
-      const topLeft = this._map.containerPointToLayerPoint([0, 0]);
+      const topLeft = this.map.containerPointToLayerPoint([0, 0]);
       DomUtil.setPosition(this.canvas, topLeft);
     }
     this._redraw();
   }
 
   _redraw(): void {
-    const { _map, canvas } = this;
-    const size = _map.getSize();
-    const bounds = _map.getBounds();
+    const { map, canvas } = this;
+    const size = map.getSize();
+    const bounds = map.getBounds();
     const zoomScale =
       (size.x * 180) / (20037508.34 * (bounds.getEast() - bounds.getWest())); // resolution = 1/zoomScale
-    const zoom = _map.getZoom();
+    const zoom = map.getZoom();
     const topLeft = new LatLng(bounds.getNorth(), bounds.getWest());
     const offset = this._unclampedProject(topLeft, 0);
     if (canvas) {
@@ -195,10 +199,10 @@ export class CanvasOverlay extends Layer {
   }
 
   _animateZoom(e: ZoomAnimEvent): void {
-    const { _map, canvas } = this;
-    const scale = _map.getZoomScale(e.zoom, _map.getZoom());
+    const { map, canvas } = this;
+    const scale = map.getZoomScale(e.zoom, map.getZoom());
     const offset = this._unclampedLatLngBoundsToNewLayerBounds(
-      _map.getBounds(),
+      map.getBounds(),
       e.zoom,
       e.center
     ).min;
@@ -208,23 +212,23 @@ export class CanvasOverlay extends Layer {
   }
 
   _animateZoomNoLayer(e: ZoomAnimEvent): void {
-    const { _map, canvas } = this;
+    const { map, canvas } = this;
     if (canvas) {
-      const scale = _map.getZoomScale(e.zoom, _map.getZoom());
-      const offset = _map
+      const scale = map.getZoomScale(e.zoom, map.getZoom());
+      const offset = map
         // @ts-expect-error experimental
         ._getCenterOffset(e.center)
         ._multiplyBy(-scale)
         // @ts-expect-error  experimental
-        .subtract(_map._getMapPanePos());
+        .subtract(map._getMapPanePos());
       DomUtil.setTransform(canvas, offset, scale);
     }
   }
 
   _unclampedProject(latlng: LatLng, zoom: number): Point {
     // imported partly from https://github.com/Leaflet/Leaflet/blob/1ae785b73092fdb4b97e30f8789345e9f7c7c912/src/geo/projection/Projection.SphericalMercator.js#L21
     // used because they clamp the latitude
-    const { crs } = this._map.options;
+    const { crs } = this.map.options;
     // @ts-expect-error experimental
     const { R } = crs.projection;
     const d = Math.PI / 180;
@@ -247,7 +251,7 @@ export class CanvasOverlay extends Layer {
     // imported party from https://github.com/Leaflet/Leaflet/blob/84bc05bbb6e4acc41e6f89ff7421dd7c6520d256/src/map/Map.js#L1500
     // used because it uses crs.projection.project, which clamp the latitude
     // @ts-expect-error experimental
-    const topLeft = this._map._getNewPixelOrigin(center, zoom);
+    const topLeft = this.map._getNewPixelOrigin(center, zoom);
     return new Bounds([
       this._unclampedProject(latLngBounds.getSouthWest(), zoom).subtract(
         topLeft

src/index.ts

@@ -29,6 +29,7 @@ export class Glify {
   longitudeKey = 1;
   latitudeKey = 0;
   clickSetupMaps: Map[] = [];
+  contextMenuSetupMaps: Map[] = [];
   hoverSetupMaps: Map[] = [];
   shader = shader;
 
@@ -63,6 +64,7 @@ export class Glify {
   points(settings: Partial<IPointsSettings>): Points {
     const points = new this.Points({
       setupClick: this.setupClick.bind(this),
+      setupContextMenu: this.setupContextMenu.bind(this),
       setupHover: this.setupHover.bind(this),
       latitudeKey: glify.latitudeKey,
       longitudeKey: glify.longitudeKey,
@@ -81,6 +83,7 @@ export class Glify {
   lines(settings: Partial<ILinesSettings>): Lines {
     const lines = new this.Lines({
       setupClick: this.setupClick.bind(this),
+      setupContextMenu: this.setupContextMenu.bind(this),
       setupHover: this.setupHover.bind(this),
       latitudeKey: this.latitudeKey,
       longitudeKey: this.longitudeKey,
@@ -99,6 +102,7 @@ export class Glify {
   shapes(settings: Partial<IShapesSettings>): Shapes {
     const shapes = new this.Shapes({
       setupClick: this.setupClick.bind(this),
+      setupContextMenu: this.setupContextMenu.bind(this),
       setupHover: this.setupHover.bind(this),
       latitudeKey: this.latitudeKey,
       longitudeKey: this.longitudeKey,
@@ -130,6 +134,23 @@ export class Glify {
     });
   }
 
+  setupContextMenu(map: Map): void {
+    if (this.contextMenuSetupMaps.includes(map)) return;
+    this.clickSetupMaps.push(map);
+    map.on("contextmenu", (e: LeafletMouseEvent) => {
+      e.originalEvent.preventDefault(); // Prevent the default context menu from showing
+      let hit;
+      hit = this.Points.tryContextMenu(e, map, this.pointsInstances);
+      if (hit !== undefined) return hit;
+
+      hit = this.Lines.tryContextMenu(e, map, this.linesInstances);
+      if (hit !== undefined) return hit;
+
+      hit = this.Shapes.tryContextMenu(e, map, this.shapesInstances);
+      if (hit !== undefined) return hit;
+    });
+  }
+
   setupHover(map: Map, hoverWait?: number, immediate?: false): void {
     if (this.hoverSetupMaps.includes(map)) return;
     this.hoverSetupMaps.push(map);