@silen/leaflet-canvas 7.1.0

package/dist/es/index.js

@@ -0,0 +1,319 @@
+/**
+* leaflet-canvas v7.1.0 by sunshmo
+* @license MIT
+**/
+import leaflet, { Bounds, Browser, DomEvent, DomUtil, Renderer, Util } from "leaflet";
+const CustomCanvas = Renderer.extend({
+    options: {
+        tolerance: 0,
+        attribution: ''
+    },
+    getEvents () {
+        const events = Renderer.prototype.getEvents.call(this);
+        events.viewprereset = this._onViewPreReset;
+        return events;
+    },
+    _onViewPreReset () {
+        this._postponeUpdatePaths = true;
+    },
+    onAdd (map) {
+        Renderer.prototype.onAdd.call(this, map);
+        this._draw();
+    },
+    _initContainer () {
+        const container = this._container = document.createElement('canvas');
+        DomEvent.on(container, 'mousemove', this._onMouseMove, this);
+        DomEvent.on(container, 'click dblclick mousedown mouseup contextmenu', this._onClick, this);
+        DomEvent.on(container, 'mouseout', this._handleMouseOut, this);
+        container._leaflet_disable_events = true;
+        this._ctx = container.getContext('2d');
+    },
+    _destroyContainer () {
+        Util.cancelAnimFrame(this._redrawRequest);
+        delete this._ctx;
+        DomUtil.remove(this._container);
+        DomEvent.off(this._container);
+        delete this._container;
+    },
+    _updatePaths () {
+        if (this._postponeUpdatePaths) return;
+        let layer;
+        this._redrawBounds = null;
+        for(const id in this._layers){
+            layer = this._layers[id];
+            layer._update();
+        }
+        this._redraw();
+    },
+    _update () {
+        if (this._map._animatingZoom && this._bounds) return;
+        Renderer.prototype._update.call(this);
+        const b = this._bounds, container = this._container, size = b.getSize(), m = Browser.retina ? 2 : 1;
+        DomUtil.setPosition(container, b.min);
+        container.width = m * size.x;
+        container.height = m * size.y;
+        container.style.width = `${size.x}px`;
+        container.style.height = `${size.y}px`;
+        if (Browser.retina) this._ctx.scale(2, 2);
+        this._ctx.translate(-b.min.x, -b.min.y);
+        this.fire('update');
+    },
+    _reset () {
+        Renderer.prototype._reset.call(this);
+        if (this._postponeUpdatePaths) {
+            this._postponeUpdatePaths = false;
+            this._updatePaths();
+        }
+    },
+    _initPath (layer) {
+        this._updateDashArray(layer);
+        this._layers[Util.stamp(layer)] = layer;
+        const order = layer._order = {
+            layer: layer,
+            prev: this._drawLast,
+            next: null
+        };
+        if (this._drawLast) this._drawLast.next = order;
+        this._drawLast = order;
+        this._drawFirst = this._drawFirst || this._drawLast;
+    },
+    _addPath (layer) {
+        this._requestRedraw(layer);
+    },
+    _removePath (layer) {
+        const order = layer._order;
+        const next = order.next;
+        const prev = order.prev;
+        if (next) next.prev = prev;
+        else this._drawLast = prev;
+        if (prev) prev.next = next;
+        else this._drawFirst = next;
+        delete layer._order;
+        delete this._layers[Util.stamp(layer)];
+        this._requestRedraw(layer);
+    },
+    _updatePath (layer) {
+        this._extendRedrawBounds(layer);
+        layer._project();
+        layer._update();
+        this._requestRedraw(layer);
+    },
+    _updateStyle (layer) {
+        this._updateDashArray(layer);
+        this._requestRedraw(layer);
+    },
+    _updateDashArray (layer) {
+        if ('string' == typeof layer.options.dashArray) {
+            const parts = layer.options.dashArray.split(/[, ]+/), dashArray = [];
+            let dashValue, i;
+            for(i = 0; i < parts.length; i++){
+                dashValue = Number(parts[i]);
+                if (isNaN(dashValue)) return;
+                dashArray.push(dashValue);
+            }
+            layer.options._dashArray = dashArray;
+        } else layer.options._dashArray = layer.options.dashArray;
+    },
+    _requestRedraw (layer) {
+        if (!this._map) return;
+        this._extendRedrawBounds(layer);
+        this._redrawRequest = this._redrawRequest || Util.requestAnimFrame(this._redraw, this);
+    },
+    _extendRedrawBounds (layer) {
+        if (layer._pxBounds) {
+            const padding = (layer.options.weight || 0) + 1;
+            this._redrawBounds = this._redrawBounds || new Bounds();
+            this._redrawBounds.extend(layer._pxBounds.min.subtract([
+                padding,
+                padding
+            ]));
+            this._redrawBounds.extend(layer._pxBounds.max.add([
+                padding,
+                padding
+            ]));
+        }
+    },
+    _redraw () {
+        this._redrawRequest = null;
+        if (this._redrawBounds) {
+            this._redrawBounds.min._floor();
+            this._redrawBounds.max._ceil();
+        }
+        this._clear();
+        this._draw();
+        this._redrawBounds = null;
+    },
+    _clear () {
+        const bounds = this._redrawBounds;
+        if (bounds) {
+            const size = bounds.getSize();
+            this._ctx.clearRect(bounds.min.x, bounds.min.y, size.x, size.y);
+        } else {
+            this._ctx.save();
+            this._ctx.setTransform(1, 0, 0, 1, 0, 0);
+            this._ctx.clearRect(0, 0, this._container.width, this._container.height);
+            this._ctx.restore();
+        }
+    },
+    _draw () {
+        let layer;
+        const bounds = this._redrawBounds;
+        this._ctx.save();
+        if (bounds) {
+            const size = bounds.getSize();
+            this._ctx.beginPath();
+            this._ctx.rect(bounds.min.x, bounds.min.y, size.x, size.y);
+            this._ctx.clip();
+        }
+        this._drawing = true;
+        for(let order = this._drawFirst; order; order = order.next){
+            layer = order.layer;
+            if (!bounds || layer._pxBounds && layer._pxBounds.intersects(bounds)) layer._updatePath();
+        }
+        this._drawing = false;
+        this._ctx.restore();
+    },
+    _updatePoly (layer, closed) {
+        if (!this._drawing) return;
+        let i, j, len2, p;
+        const parts = layer._parts, len = parts.length, ctx = this._ctx;
+        if (!len) return;
+        ctx.beginPath();
+        for(i = 0; i < len; i++){
+            for(j = 0, len2 = parts[i].length; j < len2; j++){
+                p = parts[i][j];
+                ctx[j ? 'lineTo' : 'moveTo'](p.x, p.y);
+            }
+            if (closed) ctx.closePath();
+        }
+        this._fillStroke(ctx, layer);
+    },
+    _updateCircle (layer) {
+        if (!this._drawing || layer._empty()) return;
+        const p = layer._point, ctx = this._ctx, r = Math.max(Math.round(layer._radius), 1), s = (Math.max(Math.round(layer._radiusY), 1) || r) / r;
+        if (1 !== s) {
+            ctx.save();
+            ctx.scale(1, s);
+        }
+        ctx.beginPath();
+        ctx.arc(p.x, p.y / s, r, 0, 2 * Math.PI, false);
+        if (1 !== s) ctx.restore();
+        this._fillStroke(ctx, layer);
+    },
+    _fillStroke (ctx, layer) {
+        const options = layer.options;
+        if (options.fill) {
+            ctx.globalAlpha = options.fillOpacity;
+            ctx.fillStyle = options.fillColor || options.color;
+            ctx.fill(options.fillRule || 'evenodd');
+        }
+        if (options.stroke && 0 !== options.weight) {
+            if (ctx.setLineDash) ctx.setLineDash(layer.options && layer.options._dashArray || []);
+            ctx.globalAlpha = options.opacity;
+            ctx.lineWidth = options.weight;
+            ctx.strokeStyle = options.color;
+            ctx.lineCap = options.lineCap;
+            ctx.lineJoin = options.lineJoin;
+            ctx.stroke();
+        }
+        if ('function' == typeof options.onFillContent) options.onFillContent(ctx, layer);
+    },
+    _onClick (e) {
+        const point = this._map.mouseEventToLayerPoint(e);
+        let layer, clickedLayer;
+        for(let order = this._drawFirst; order; order = order.next){
+            layer = order.layer;
+            if (layer.options.interactive && layer._containsPoint(point)) {
+                if (!('click' === e.type || 'preclick' === e.type) || !this._map._draggableMoved(layer)) clickedLayer = layer;
+            }
+        }
+        this._fireEvent(clickedLayer ? [
+            clickedLayer
+        ] : false, e);
+    },
+    _onMouseMove (e) {
+        if (!this._map || this._map.dragging.moving() || this._map._animatingZoom) return;
+        const point = this._map.mouseEventToLayerPoint(e);
+        this._handleMouseHover(e, point);
+    },
+    _handleMouseOut (e) {
+        const layer = this._hoveredLayer;
+        if (layer) {
+            DomUtil.removeClass(this._container, 'leaflet-interactive');
+            this._fireEvent([
+                layer
+            ], e, 'mouseout');
+            this._hoveredLayer = null;
+            this._mouseHoverThrottled = false;
+        }
+    },
+    _handleMouseHover (e, point) {
+        if (this._mouseHoverThrottled) return;
+        let layer, candidateHoveredLayer;
+        for(let order = this._drawFirst; order; order = order.next){
+            layer = order.layer;
+            if (layer.options.interactive && layer._containsPoint(point)) candidateHoveredLayer = layer;
+        }
+        if (candidateHoveredLayer !== this._hoveredLayer) {
+            this._handleMouseOut(e);
+            if (candidateHoveredLayer) {
+                DomUtil.addClass(this._container, 'leaflet-interactive');
+                this._fireEvent([
+                    candidateHoveredLayer
+                ], e, 'mouseover');
+                this._hoveredLayer = candidateHoveredLayer;
+            }
+        }
+        this._fireEvent(this._hoveredLayer ? [
+            this._hoveredLayer
+        ] : false, e);
+        this._mouseHoverThrottled = true;
+        setTimeout(Util.bind(function() {
+            this._mouseHoverThrottled = false;
+        }, this), 32);
+    },
+    _fireEvent (layers, e, type) {
+        this._map._fireDOMEvent(e, type || e.type, layers);
+    },
+    _bringToFront (layer) {
+        const order = layer._order;
+        if (!order) return;
+        const next = order.next;
+        const prev = order.prev;
+        if (!next) return;
+        next.prev = prev;
+        if (prev) prev.next = next;
+        else if (next) this._drawFirst = next;
+        order.prev = this._drawLast;
+        this._drawLast.next = order;
+        order.next = null;
+        this._drawLast = order;
+        this._requestRedraw(layer);
+    },
+    _bringToBack (layer) {
+        const order = layer._order;
+        if (!order) return;
+        const next = order.next;
+        const prev = order.prev;
+        if (!prev) return;
+        prev.next = next;
+        if (next) next.prev = prev;
+        else if (prev) this._drawLast = prev;
+        order.prev = null;
+        order.next = this._drawFirst;
+        this._drawFirst.prev = order;
+        this._drawFirst = order;
+        this._requestRedraw(layer);
+    },
+    getAttribution () {
+        return this.options.attribution;
+    }
+});
+leaflet.CustomCanvas = CustomCanvas;
+function customCanvas(options) {
+    return Browser.canvas ? new CustomCanvas(options) : null;
+}
+leaflet.customCanvas = customCanvas;
+const src = leaflet;
+export default src;
+export { CustomCanvas, customCanvas };