Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outro #172

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open

Outro #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
488af80
fix click/hover on lines: use minDistance and optimize functions
trafficonese Jul 1, 2024
8cc35a3
use Set and chosenWeightFn
trafficonese Jul 1, 2024
747a6ae
fix: check _map is assigned to avoid errors on often redraw from scratch
utilmind Nov 29, 2024
a4b26b6
Merge branch 'master' into master
trafficonese Dec 3, 2024
54a19a9
feat: contextmenu handler
charlieforward9 Dec 4, 2024
c1abf7f
Merge remote-tracking branch 'upstream/master'
trafficonese Dec 6, 2024
cf6e661
Merge branch 'master' of https://github.com/trafficonese/Leaflet.glify
trafficonese Dec 6, 2024
9141f37
feat: allow hex colors and numeric arrays with alpha
trafficonese Dec 8, 2024
a520644
refactor: move to color
trafficonese Dec 8, 2024
c649325
test: add color tests
trafficonese Dec 8, 2024
cbbf3e0
test: cleanup test logs (expected console.warn/error)
trafficonese Dec 8, 2024
9ced88b
test: extend color tests with instances
trafficonese Dec 8, 2024
6240309
stash
trafficonese Dec 8, 2024
c1f43e0
feat: also check for correct RGBA object, otherwise return gray
trafficonese Dec 8, 2024
043626a
test: add color function tests, border-tests
trafficonese Dec 8, 2024
914d49d
test: multipolygon border & hole
trafficonese Dec 8, 2024
bca05a1
test: shapes drawOnCanvas, click/hover - tests
trafficonese Dec 8, 2024
9050182
fix: reset example.ts
trafficonese Dec 8, 2024
a8d8ebd
fix: CanvasOverlay mock
charlieforward9 Dec 9, 2024
291eabe
Merge pull request #169 from Agriculture-Intelligence/fix/canvas-over…
charlieforward9 Dec 12, 2024
a95f1f0
Merge branch 'beta' into master
charlieforward9 Dec 12, 2024
796eb4e
Merge pull request #165 from utilmind/master
charlieforward9 Dec 12, 2024
0bd9217
fix: zoom rerendering
charlieforward9 Dec 13, 2024
143e56e
Merge pull request #168 from trafficonese/hexcolors
charlieforward9 Jan 2, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions example.ts
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
2 changes: 1 addition & 1 deletion jest.config.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"collectCoverage": false,
"collectCoverage": true,
"collectCoverageFrom": ["src/**/*", "!src/**/*.d.ts"],
"coverageDirectory": "__coverage__",
"coverageProvider": "v8",
Expand Down
21 changes: 0 additions & 21 deletions src/__mocks__/canvas-overlay.ts

This file was deleted.

29 changes: 21 additions & 8 deletions src/base-gl-layer.ts
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,16 +34,18 @@ 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;
color?: ColorCallback | IColor | string | number[] | null;
className?: string;
opacity?: number;
preserveDrawingBuffer?: boolean;
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 @@ -146,7 +148,7 @@ export abstract class BaseGlLayer<
return this.settings.opacity;
}

get color(): ColorCallback | IColor | null {
get color(): ColorCallback | IColor | string | number[] | null {
return this.settings.color ?? null;
}

Expand All @@ -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
94 changes: 51 additions & 43 deletions src/canvas-overlay.ts
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 All @@ -98,6 +106,7 @@ export class CanvasOverlay extends Layer {
}
pane.appendChild(this.canvas);

map.on("zoom", this._reset, this);
map.on("moveend", this._reset, this);
map.on("resize", this._resize, this);

Expand All @@ -122,6 +131,7 @@ export class CanvasOverlay extends Layer {
pane.removeChild(this.canvas);
}

map.off("zoom", this._reset, this);
map.off("moveend", this._reset, this);
map.off("resize", this._resize, this);

Expand All @@ -136,18 +146,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,48 +163,50 @@ 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 zoomScale =
(size.x * 180) / (20037508.34 * (bounds.getEast() - bounds.getWest())); // resolution = 1/zoomScale
const zoom = _map.getZoom();
const topLeft = new LatLng(bounds.getNorth(), bounds.getWest());
const offset = this._unclampedProject(topLeft, 0);
if (canvas) {
this._userDrawFunc({
bounds,
canvas,
offset,
scale: Math.pow(2, zoom),
size,
zoomScale,
zoom,
});
}
const { map, canvas } = this;
if (map) {
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 topLeft = new LatLng(bounds.getNorth(), bounds.getWest());
const offset = this._unclampedProject(topLeft, 0);
if (canvas) {
this._userDrawFunc({
bounds,
canvas,
offset,
scale: Math.pow(2, zoom),
size,
zoomScale,
zoom,
});
}

while (this._redrawCallbacks.length > 0) {
const callback = this._redrawCallbacks.shift();
if (callback) {
callback(this);
while (this._redrawCallbacks.length > 0) {
const callback = this._redrawCallbacks.shift();
if (callback) {
callback(this);
}
}
}

this._frame = null;
}

_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 +216,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 +255,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
Loading