Skip to content

Commit

Permalink
Merge pull request #169 from Agriculture-Intelligence/fix/canvas-over…
Browse files Browse the repository at this point in the history 
…lay-mocking

fix CanvasOverlay mocking
  • Loading branch information
@charlieforward9
charlieforward9 authored Dec 12, 2024
2 parents adae379 + a8d8ebd commit 291eabe
Show file tree
Hide file tree
Showing 13 changed files with 524 additions and 118 deletions.
58 changes: 58 additions & 0 deletions example.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
Expand All @@ -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);
},
Expand Down Expand Up @@ -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,
});

Expand All @@ -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);
},
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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);
},
Expand Down
21 changes: 0 additions & 21 deletions src/__mocks__/canvas-overlay.ts
View file

This file was deleted.

25 changes: 19 additions & 6 deletions src/base-gl-layer.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
Expand Down
52 changes: 28 additions & 24 deletions src/canvas-overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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"));

Expand Down Expand Up @@ -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;
Expand All @@ -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) {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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
Expand Down
21 changes: 21 additions & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export class Glify {
longitudeKey = 1;
latitudeKey = 0;
clickSetupMaps: Map[] = [];
contextMenuSetupMaps: Map[] = [];
hoverSetupMaps: Map[] = [];
shader = shader;

Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
Loading

0 comments on commit 291eabe

Please sign in to comment.