From cb7659eedfdcfbf8622dbcfc7e6f2296e7b4dbbd Mon Sep 17 00:00:00 2001 From: Andrew Pinkham Date: Fri, 23 Feb 2018 17:37:14 -0500 Subject: [PATCH 1/2] leaflet: add methods and properties The goal is to make writing plugins easier for developers by adding private methods and properties. --- types/leaflet/index.d.ts | 27 +++++++++++++++++++ types/leaflet/leaflet-tests.ts | 47 ++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/types/leaflet/index.d.ts b/types/leaflet/index.d.ts index eabb98c710..922b9ab686 100644 --- a/types/leaflet/index.d.ts +++ b/types/leaflet/index.d.ts @@ -182,6 +182,10 @@ export class Point { y: number; } +export interface Coords extends Point { + z: number; +} + export type PointExpression = Point | PointTuple; export function point(x: number, y: number, round?: boolean): Point; @@ -388,6 +392,7 @@ export interface InteractiveLayerOptions extends LayerOptions { } export class Layer extends Evented { + _map: Map; constructor(options?: LayerOptions); addTo(map: Map|LayerGroup): this; remove(): this; @@ -439,6 +444,17 @@ export interface GridLayerOptions { keepBuffer?: number; } +export interface InternalTiles { + [key: string]: { + active?: boolean, + coords: Coords, + current: boolean, + el: HTMLElement, + loaded?: Date, + retain?: boolean, + }; +} + export class GridLayer extends Layer { constructor(options?: GridLayerOptions); bringToFront(): this; @@ -449,6 +465,11 @@ export class GridLayer extends Layer { isLoading(): boolean; redraw(): this; getTileSize(): Point; + + _tileCoordsToKey(coords: Coords): string; + + _tiles: InternalTiles; + _tileZoom?: number; } export function gridLayer(options?: GridLayerOptions): GridLayer; @@ -468,10 +489,16 @@ export interface TileLayerOptions extends GridLayerOptions { [name: string]: any; } +export type DoneCallback = (error?: Error, tile?: HTMLElement) => void; + export class TileLayer extends GridLayer { constructor(urlTemplate: string, options?: TileLayerOptions); + createTile(coords: Coords, done: DoneCallback): HTMLElement; setUrl(url: string, noRedraw?: boolean): this; + _abortLoading(): void; + _getZoomForUrl(): number; + options: TileLayerOptions; } diff --git a/types/leaflet/leaflet-tests.ts b/types/leaflet/leaflet-tests.ts index c4f73e5b84..a22ab91248 100644 --- a/types/leaflet/leaflet-tests.ts +++ b/types/leaflet/leaflet-tests.ts @@ -510,3 +510,50 @@ lg = new L.LayerGroup([new L.Layer(), new L.Layer()], { pane: 'overlayPane', attribution: 'test' }); + +// adapted from GridLayer documentation +const CanvasLayer = L.GridLayer.extend({ + createTile(coords: L.Coords, done: L.DoneCallback) { + const tile = (L.DomUtil.create('canvas', 'leaflet-tile') as HTMLCanvasElement); + const size = this.getTileSize(); + tile.width = size.x; + tile.height = size.y; + return tile; + } +}); + +// adapted from GridLayer documentation +const AsyncCanvasLayer = L.GridLayer.extend({ + createTile(coords: L.Coords, done: L.DoneCallback) { + const tile = (L.DomUtil.create('canvas', 'leaflet-tile') as HTMLCanvasElement); + const size = this.getTileSize(); + tile.width = size.x; + tile.height = size.y; + setTimeout(() => done(undefined, tile), 1000); + return tile; + } +}); + +export class ExtendedTileLayer extends L.TileLayer { + options: L.TileLayerOptions; + createTile(coords: L.Coords, done: L.DoneCallback) { + const newCoords: L.Coords = (new L.Point(coords.x, coords.y) as L.Coords); + newCoords.z = coords.z; + return super.createTile(newCoords, done); + } + _abortLoading() { + // adapted from TileLayer's implementation + for (const i in this._tiles) { + if (this._tiles[i].coords.z !== this._tileZoom) { + const tile = this._tiles[i].el; + tile.onload = L.Util.falseFn; + tile.onerror = L.Util.falseFn; + if (tile instanceof HTMLImageElement && !tile.complete) { + tile.src = L.Util.emptyImageUrl; + L.DomUtil.remove(tile); + this._tiles[i] = undefined; + } + } + } + } +} From ae08714357b9827fd5ff3569202255d1cab29d45 Mon Sep 17 00:00:00 2001 From: Andrew Pinkham Date: Tue, 6 Mar 2018 10:37:08 -0500 Subject: [PATCH 2/2] Protect internal props; createTile on GridLayer --- types/leaflet/index.d.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/types/leaflet/index.d.ts b/types/leaflet/index.d.ts index 922b9ab686..41b4fbd84c 100644 --- a/types/leaflet/index.d.ts +++ b/types/leaflet/index.d.ts @@ -392,7 +392,6 @@ export interface InteractiveLayerOptions extends LayerOptions { } export class Layer extends Evented { - _map: Map; constructor(options?: LayerOptions); addTo(map: Map|LayerGroup): this; remove(): this; @@ -425,6 +424,8 @@ export class Layer extends Evented { getEvents?(): {[name: string]: (event: LeafletEvent) => void}; getAttribution?(): string | null; beforeAdd?(map: Map): this; + + protected _map: Map; } export interface GridLayerOptions { @@ -444,6 +445,8 @@ export interface GridLayerOptions { keepBuffer?: number; } +export type DoneCallback = (error?: Error, tile?: HTMLElement) => void; + export interface InternalTiles { [key: string]: { active?: boolean, @@ -466,10 +469,11 @@ export class GridLayer extends Layer { redraw(): this; getTileSize(): Point; - _tileCoordsToKey(coords: Coords): string; + protected createTile(coords: Coords, done: DoneCallback): HTMLElement; + protected _tileCoordsToKey(coords: Coords): string; - _tiles: InternalTiles; - _tileZoom?: number; + protected _tiles: InternalTiles; + protected _tileZoom?: number; } export function gridLayer(options?: GridLayerOptions): GridLayer; @@ -489,15 +493,12 @@ export interface TileLayerOptions extends GridLayerOptions { [name: string]: any; } -export type DoneCallback = (error?: Error, tile?: HTMLElement) => void; - export class TileLayer extends GridLayer { constructor(urlTemplate: string, options?: TileLayerOptions); - createTile(coords: Coords, done: DoneCallback): HTMLElement; setUrl(url: string, noRedraw?: boolean): this; - _abortLoading(): void; - _getZoomForUrl(): number; + protected _abortLoading(): void; + protected _getZoomForUrl(): number; options: TileLayerOptions; }