@silen/leaflet-canvas 7.1.0

package/dist/umd/index.js

@@ -0,0 +1,394 @@
+/**
+* leaflet-canvas v7.1.0 by sunshmo
+* @license MIT
+**/
+(function(root, factory) {
+    if ('object' == typeof exports && 'object' == typeof module) module.exports = factory(require("leaflet"));
+    else if ('function' == typeof define && define.amd) define([
+        "leaflet"
+    ], factory);
+    else if ('object' == typeof exports) exports["CustomCanvas"] = factory(require("leaflet"));
+    else root["CustomCanvas"] = factory(root["leaflet"]);
+})(self, function(__rspack_external_leaflet) {
+    return function() {
+        "use strict";
+        var __webpack_modules__ = {
+            leaflet: function(module1) {
+                module1.exports = __rspack_external_leaflet;
+            }
+        };
+        var __webpack_module_cache__ = {};
+        function __webpack_require__(moduleId) {
+            var cachedModule = __webpack_module_cache__[moduleId];
+            if (void 0 !== cachedModule) return cachedModule.exports;
+            var module1 = __webpack_module_cache__[moduleId] = {
+                exports: {}
+            };
+            __webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
+            return module1.exports;
+        }
+        !function() {
+            __webpack_require__.n = function(module1) {
+                var getter = module1 && module1.__esModule ? function() {
+                    return module1['default'];
+                } : function() {
+                    return module1;
+                };
+                __webpack_require__.d(getter, {
+                    a: getter
+                });
+                return getter;
+            };
+        }();
+        !function() {
+            __webpack_require__.d = function(exports1, definition) {
+                for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                    enumerable: true,
+                    get: definition[key]
+                });
+            };
+        }();
+        !function() {
+            __webpack_require__.o = function(obj, prop) {
+                return Object.prototype.hasOwnProperty.call(obj, prop);
+            };
+        }();
+        !function() {
+            __webpack_require__.r = function(exports1) {
+                if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+                    value: 'Module'
+                });
+                Object.defineProperty(exports1, '__esModule', {
+                    value: true
+                });
+            };
+        }();
+        var __webpack_exports__ = {};
+        !function() {
+            __webpack_require__.r(__webpack_exports__);
+            __webpack_require__.d(__webpack_exports__, {
+                CustomCanvas: function() {
+                    return CustomCanvas;
+                },
+                customCanvas: function() {
+                    return customCanvas;
+                }
+            });
+            var leaflet__rspack_import_0 = __webpack_require__("leaflet");
+            var leaflet__rspack_import_0_default = /*#__PURE__*/ __webpack_require__.n(leaflet__rspack_import_0);
+            var CustomCanvas = leaflet__rspack_import_0.Renderer.extend({
+                options: {
+                    tolerance: 0,
+                    attribution: ''
+                },
+                getEvents: function() {
+                    var events = leaflet__rspack_import_0.Renderer.prototype.getEvents.call(this);
+                    events.viewprereset = this._onViewPreReset;
+                    return events;
+                },
+                _onViewPreReset: function() {
+                    this._postponeUpdatePaths = true;
+                },
+                onAdd: function(map) {
+                    leaflet__rspack_import_0.Renderer.prototype.onAdd.call(this, map);
+                    this._draw();
+                },
+                _initContainer: function() {
+                    var container = this._container = document.createElement('canvas');
+                    leaflet__rspack_import_0.DomEvent.on(container, 'mousemove', this._onMouseMove, this);
+                    leaflet__rspack_import_0.DomEvent.on(container, 'click dblclick mousedown mouseup contextmenu', this._onClick, this);
+                    leaflet__rspack_import_0.DomEvent.on(container, 'mouseout', this._handleMouseOut, this);
+                    container._leaflet_disable_events = true;
+                    this._ctx = container.getContext('2d');
+                },
+                _destroyContainer: function() {
+                    leaflet__rspack_import_0.Util.cancelAnimFrame(this._redrawRequest);
+                    delete this._ctx;
+                    leaflet__rspack_import_0.DomUtil.remove(this._container);
+                    leaflet__rspack_import_0.DomEvent.off(this._container);
+                    delete this._container;
+                },
+                _updatePaths: function() {
+                    if (this._postponeUpdatePaths) return;
+                    var layer;
+                    this._redrawBounds = null;
+                    for(var id in this._layers){
+                        layer = this._layers[id];
+                        layer._update();
+                    }
+                    this._redraw();
+                },
+                _update: function() {
+                    if (this._map._animatingZoom && this._bounds) return;
+                    leaflet__rspack_import_0.Renderer.prototype._update.call(this);
+                    var b = this._bounds, container = this._container, size = b.getSize(), m = leaflet__rspack_import_0.Browser.retina ? 2 : 1;
+                    leaflet__rspack_import_0.DomUtil.setPosition(container, b.min);
+                    container.width = m * size.x;
+                    container.height = m * size.y;
+                    container.style.width = "".concat(size.x, "px");
+                    container.style.height = "".concat(size.y, "px");
+                    if (leaflet__rspack_import_0.Browser.retina) this._ctx.scale(2, 2);
+                    this._ctx.translate(-b.min.x, -b.min.y);
+                    this.fire('update');
+                },
+                _reset: function() {
+                    leaflet__rspack_import_0.Renderer.prototype._reset.call(this);
+                    if (this._postponeUpdatePaths) {
+                        this._postponeUpdatePaths = false;
+                        this._updatePaths();
+                    }
+                },
+                _initPath: function(layer) {
+                    this._updateDashArray(layer);
+                    this._layers[leaflet__rspack_import_0.Util.stamp(layer)] = layer;
+                    var 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: function(layer) {
+                    this._requestRedraw(layer);
+                },
+                _removePath: function(layer) {
+                    var order = layer._order;
+                    var next = order.next;
+                    var 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[leaflet__rspack_import_0.Util.stamp(layer)];
+                    this._requestRedraw(layer);
+                },
+                _updatePath: function(layer) {
+                    this._extendRedrawBounds(layer);
+                    layer._project();
+                    layer._update();
+                    this._requestRedraw(layer);
+                },
+                _updateStyle: function(layer) {
+                    this._updateDashArray(layer);
+                    this._requestRedraw(layer);
+                },
+                _updateDashArray: function(layer) {
+                    if ('string' == typeof layer.options.dashArray) {
+                        var parts = layer.options.dashArray.split(/[, ]+/), dashArray = [];
+                        var 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: function(layer) {
+                    if (!this._map) return;
+                    this._extendRedrawBounds(layer);
+                    this._redrawRequest = this._redrawRequest || leaflet__rspack_import_0.Util.requestAnimFrame(this._redraw, this);
+                },
+                _extendRedrawBounds: function(layer) {
+                    if (layer._pxBounds) {
+                        var padding = (layer.options.weight || 0) + 1;
+                        this._redrawBounds = this._redrawBounds || new leaflet__rspack_import_0.Bounds();
+                        this._redrawBounds.extend(layer._pxBounds.min.subtract([
+                            padding,
+                            padding
+                        ]));
+                        this._redrawBounds.extend(layer._pxBounds.max.add([
+                            padding,
+                            padding
+                        ]));
+                    }
+                },
+                _redraw: function() {
+                    this._redrawRequest = null;
+                    if (this._redrawBounds) {
+                        this._redrawBounds.min._floor();
+                        this._redrawBounds.max._ceil();
+                    }
+                    this._clear();
+                    this._draw();
+                    this._redrawBounds = null;
+                },
+                _clear: function() {
+                    var bounds = this._redrawBounds;
+                    if (bounds) {
+                        var 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: function() {
+                    var layer;
+                    var bounds = this._redrawBounds;
+                    this._ctx.save();
+                    if (bounds) {
+                        var 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(var 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: function(layer, closed) {
+                    if (!this._drawing) return;
+                    var i, j, len2, p;
+                    var 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: function(layer) {
+                    if (!this._drawing || layer._empty()) return;
+                    var 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: function(ctx, layer) {
+                    var 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: function(e) {
+                    var point = this._map.mouseEventToLayerPoint(e);
+                    var layer, clickedLayer;
+                    for(var 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: function(e) {
+                    if (!this._map || this._map.dragging.moving() || this._map._animatingZoom) return;
+                    var point = this._map.mouseEventToLayerPoint(e);
+                    this._handleMouseHover(e, point);
+                },
+                _handleMouseOut: function(e) {
+                    var layer = this._hoveredLayer;
+                    if (layer) {
+                        leaflet__rspack_import_0.DomUtil.removeClass(this._container, 'leaflet-interactive');
+                        this._fireEvent([
+                            layer
+                        ], e, 'mouseout');
+                        this._hoveredLayer = null;
+                        this._mouseHoverThrottled = false;
+                    }
+                },
+                _handleMouseHover: function(e, point) {
+                    if (this._mouseHoverThrottled) return;
+                    var layer, candidateHoveredLayer;
+                    for(var 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) {
+                            leaflet__rspack_import_0.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(leaflet__rspack_import_0.Util.bind(function() {
+                        this._mouseHoverThrottled = false;
+                    }, this), 32);
+                },
+                _fireEvent: function(layers, e, type) {
+                    this._map._fireDOMEvent(e, type || e.type, layers);
+                },
+                _bringToFront: function(layer) {
+                    var order = layer._order;
+                    if (!order) return;
+                    var next = order.next;
+                    var 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: function(layer) {
+                    var order = layer._order;
+                    if (!order) return;
+                    var next = order.next;
+                    var 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: function() {
+                    return this.options.attribution;
+                }
+            });
+            leaflet__rspack_import_0_default().CustomCanvas = CustomCanvas;
+            function customCanvas(options) {
+                return leaflet__rspack_import_0.Browser.canvas ? new CustomCanvas(options) : null;
+            }
+            leaflet__rspack_import_0_default().customCanvas = customCanvas;
+            __webpack_exports__["default"] = leaflet__rspack_import_0_default();
+        }();
+        return __webpack_exports__;
+    }();
+});

package/examples/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>leaflet-canvas</title>
+    <link
+      rel="stylesheet"
+      href="//cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css"
+    />
+    <style>
+      #map {
+                                                                    height: 500px;
+                                                                  }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <script src="//cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet-src.js"></script>
+    <script src="../dist/umd/index.js"></script>
+    <script src="./index.js"></script>
+  </body>
+</html>

package/examples/index.js

@@ -0,0 +1,145 @@
+let selectedLayer;
+const map = L.map('map', {
+	renderer: L.customCanvas(),
+});
+
+const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+const osm = new L.TileLayer(osmUrl, { minZoom: 8, maxZoom: 20 });
+
+map.setView(new L.LatLng(51.75, 19.46667), 12);
+map.addLayer(osm);
+
+const drawGroup = new L.FeatureGroup();
+map.addLayer(drawGroup);
+
+const geoJson = L.geoJson(
+	{
+		type: 'FeatureCollection',
+		features: [
+			{
+				type: 'Feature',
+				properties: {},
+				geometry: {
+					type: 'Polygon',
+					coordinates: [
+						[
+							[19.458847045898438, 51.75944673648409],
+							[19.46846008300781, 51.760296746815754],
+							[19.475669860839844, 51.745738110429116],
+							[19.462108612060547, 51.742868336510526],
+							[19.458847045898438, 51.75944673648409],
+						],
+					],
+				},
+			},
+			{
+				type: 'Feature',
+				properties: {},
+				geometry: {
+					type: 'Polygon',
+					coordinates: [
+						[
+							[19.475669860839844, 51.745738110429116],
+							[19.489574432373047, 51.74765119176804],
+							[19.489402770996094, 51.75604653513805],
+							[19.485111236572266, 51.76157173231003],
+							[19.46846008300781, 51.760296746815754],
+							[19.475669860839844, 51.745738110429116],
+						],
+					],
+				},
+			},
+		],
+	},
+	{
+		attribution: 'leaflet-canvas',
+		onFillContent: (ctx, layer) => {
+			const img = document.createElement('img');
+			img.src =
+				'data:image/png;base64,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';
+
+			const { _pxBounds } = layer;
+			const minX = _pxBounds.min.x;
+			const minY = _pxBounds.min.y;
+			const maxX = _pxBounds.max.x;
+			const maxY = _pxBounds.max.y;
+
+			const width = maxX - minX;
+			const height = maxY - minY;
+
+			img.onload = () => {
+				ctx.drawImage(img, minX, minY, width, height);
+			};
+		},
+		onEachFeature: (feature, layer) => {
+			layer.on('click', handleLayerClick);
+			drawGroup.addLayer(layer);
+		},
+	},
+);
+
+geoJson.addData({
+	type: 'FeatureCollection',
+	features: [
+		{
+			type: 'Feature',
+			properties: {},
+			geometry: {
+				type: 'Polygon',
+				coordinates: [
+					[
+						[19.473352432250977, 51.77230143349548],
+						[19.475584030151367, 51.77447893277896],
+						[19.46906089782715, 51.773947845080215],
+						[19.469404220581055, 51.77192965482512],
+						[19.473352432250977, 51.77230143349548],
+					],
+				],
+			},
+		},
+		{
+			type: 'Feature',
+			properties: {},
+			geometry: {
+				type: 'LineString',
+				coordinates: [
+					[19.458847045898438, 51.75944673648409],
+					[19.457130432128906, 51.76571518651952],
+					[19.48373794555664, 51.767839887322125],
+					[19.485111236572266, 51.76157173231003],
+					[19.516525268554688, 51.76390911220752],
+				],
+			},
+		},
+		{
+			type: 'Feature',
+			properties: {},
+			geometry: {
+				type: 'Point',
+				coordinates: [19.457130432128906, 51.80075996280693],
+			},
+		},
+	],
+});
+
+function highlightFeature(layer) {
+	if (selectedLayer) {
+		geoJson.resetStyle(selectedLayer);
+	}
+	selectedLayer = layer;
+
+	layer.setStyle({
+		weight: 5,
+		color: '#666',
+		dashArray: '',
+		fillOpacity: 0.7,
+	});
+
+	layer.bringToFront();
+}
+
+function handleLayerClick(event) {
+	const layer = event.target;
+
+	highlightFeature(layer);
+}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@silen/leaflet-canvas",
+  "version": "7.1.0",
+  "description": "Allows rendering to canvas using custom HtmlElement elements.",
+  "exports": {
+    ".": {
+      "types": "./dist/es/index.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
+  "unpkg": "./dist/umd/index.js",
+  "jsdelivr": "./dist/umd/index.js",
+  "browser": "./dist/umd/index.js",
+  "files": [
+    "dist",
+    "examples"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sunshmo/libs.git",
+    "directory": "leaflet-canvas"
+  },
+  "buildOptions": {
+    "lib": [
+      {
+        "format": "umd",
+        "syntax": "es5",
+        "umdName": "CustomCanvas",
+        "output": {
+          "cleanDistPath": true,
+          "externals": [
+            "leaflet"
+          ],
+          "target": "web",
+          "distPath": {
+            "root": "./dist/umd"
+          }
+        }
+      },
+      {
+        "format": "esm",
+        "syntax": "es2021",
+        "dts": true,
+        "output": {
+          "cleanDistPath": true,
+          "externals": [
+            "leaflet"
+          ],
+          "distPath": {
+            "root": "./dist/es"
+          }
+        }
+      },
+      {
+        "format": "cjs",
+        "syntax": "es2021",
+        "dts": true,
+        "output": {
+          "cleanDistPath": true,
+          "externals": [
+            "leaflet"
+          ],
+          "distPath": {
+            "root": "./dist/cjs"
+          }
+        }
+      }
+    ]
+  },
+  "keywords": [
+    "canvas",
+    "GeoJSON",
+    "leaflet"
+  ],
+  "bugs": {
+    "url": "https://github.com/sunshmo/libs/issues"
+  },
+  "homepage": "https://github.com/sunshmo/libs/tree/main/leaflet-canvas#readme",
+  "author": "sunshmo",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/leaflet": "^1.9.12"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.9.4"
+  }
+}