efront 3.18.2 → 3.18.3

package/coms/zimoli/maps.js

@@ -27,8 +27,43 @@ class Vector extends Array {
     length = 3;
 }
 
-
-
+var defaultImage = function (ratio = 2) {
+    var image = document.createElement('canvas');
+    image.width = 256 * ratio;
+    image.height = 256 * ratio;
+    image.src = true;
+    var { width, height } = image;
+    var w = width / 14;
+    var h = height / 8;
+    var ctx = image.getContext("2d");
+    ctx.beginPath();
+    for (var cx = 0, dx = width; cx < dx; cx += w) {
+        for (var cy = 0, dy = height; cy < dy; cy += h) {
+            ctx.moveTo(cx, cy);
+            ctx.lineTo(cx, cy + h / 6);
+            ctx.lineTo(cx + w / 2, cy + h / 3);
+            ctx.lineTo(cx + w / 2, cy + h * 2 / 3);
+            ctx.lineTo(cx, cy + h * 5 / 6);
+            ctx.lineTo(cx, cy + h);
+            ctx.moveTo(cx + w / 2, cy + h / 3);
+            ctx.lineTo(cx + w, cy + h / 6);
+            ctx.moveTo(cx + w / 2, cy + h * 2 / 3);
+            ctx.lineTo(cx + w, cy + h * 5 / 6);
+        }
+    }
+    ctx.strokeStyle = "rgba(255,255,255,.2)";
+    ctx.lineWidth = ratio;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(width, 0);
+    ctx.lineTo(width, height);
+    ctx.strokeStyle = "rgba(255,255,255,.8)";
+    ctx.lineWidth = ratio * 2;
+    ctx.stroke();
+    image.complete = true;
+    return image;
+}
 var rotate = function (vector, theta, points) {
 
 };
@@ -46,7 +81,7 @@ class EarthAxis {
         [0, 0, 1, 0],
         [0, 0, 0, 1]
     ];
-    rotate(direction, ) {
+    rotate(direction,) {
     }
     to2d(Points) {
         return []
@@ -76,7 +111,7 @@ function maps(config = {}) {
     canvas.width = 800;
     canvas.height = 600;
     this.canvas = canvas;
-    var context = this.context = canvas.getContext("2d");
+    this.context = canvas.getContext("2d");
     this.loadings = [];
     if (isObject(config)) {
         for (var k in config) {
@@ -85,137 +120,235 @@ function maps(config = {}) {
             }
         }
     }
-    onappend(canvas, () => this.refresh());
     var map = canvas.map = this;
-    onmousedown(canvas, function (event) {
-        event.preventDefault();
-        var saved_point = {
-            x: event.clientX,
-            y: event.clientY
-        };
-        var cancelmove = onmousemove(window, function (event) {
-            var { clientX, clientY } = event;
-            var deltaX = clientX - saved_point.x
-            var deltaY = clientY - saved_point.y;
-            saved_point.x = clientX;
-            saved_point.y = clientY;
-            map.Move(deltaX, deltaY);
-        });
-        var cancelup = onmouseup(window, function () {
-            cancelup();
-            cancelmove();
-        });
-    });
+    var move = map.move;
+    var saved_event;
+    moveupon(canvas, {
+        start(event) {
+            event.preventDefault();
+            move.reset();
+            saved_event = event;
+        },
+        move(event) {
+            if (event.moveLocked) return;
+            if (!onclick.preventClick) return;
+            if (event.touches && saved_event.touches) {
+                if (event.touches.length !== saved_event.touches.length) {
+                    event.moveLocked = true;
+                    saved_event = event;
+                    return;
+                }
+
+                switch (event.touches.length) {
+                    case 1:
+                        break;
+                    case 2:
+                    default:
+                        event.moveLocked = true;
+                        var [xy1, xy2] = saved_event.touches;
+                        var [mn1, mn2] = event.touches;
+                        var { left, top } = getScreenPosition(canvas);
+                        top += canvas.clientTop;
+                        left += canvas.clientLeft;
+                        map.touch(
+                            [xy1.clientX - left, xy1.clientY - top, xy2.clientX - left, xy2.clientY - top],
+                            [mn1.clientX - left, mn1.clientY - top, mn2.clientX - left, mn2.clientY - top]
+                        );
+                        saved_event = event;
+                        return;
+
+                }
+            }
+            var deltax = event.clientX - saved_event.clientX,
+                deltay = event.clientY - saved_event.clientY;
+            event.moveLocked = true;
+            move.call(this.map, deltax, deltay);
+            saved_event = event;
+        },
+        end() {
+            move.smooth();
+            saved_event = null;
+        },
+    })
     onmousewheel(canvas, function (event) {
+        event.preventDefault();
         var hwidth = this.width / 2;
         var hheight = this.height / 2;
         var layerx = event.layerX || event.offsetX || hwidth;
         var layery = event.layerY || event.offsetY || hheight;
-        var scale = map.Scale();
-        if (event.deltaY < 0) {
-            scale += 0.125;
-        } else {
-            scale -= 0.125;
-        }
-        map.Scale(scale, layerx, layery);
+        map.Scale(Math.pow(0.99, 20 * Math.atan(event.deltaY / 20)), layerx, layery);
+        map.refresh();
     });
+    var reshape = function () {
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        console.log(canvas.map)
+        canvas.map.refresh();
+        canvas._default = canvas.map.defaultImage();
+    };
+    if (canvas.isMounted) reshape();
+    else once("append")(canvas, reshape);
+    bind('resize')(canvas, reshape);
 
     return canvas;
 };
 maps.prototype = {
-    url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     direction: 1,
     zoom: 10,
     scale: 1,
+    maxZoom: 19,
+    minZoom: 3,
     center: [0, 0],
+    maxLat: 85.05112877980659646937,
+    minLat: -85.05112877980659646937,
+    maxLng: 180,
+    minLng: -180,
     canvas: null,
     context: null,
+    _default: null,
+    defaultImage() {
+        if (this._default) return this._default;
+        return this._default = defaultImage();
+    },
+    pattern: null,
+    cache: [],
+    move: inertia(function (a, b) {
+        this.Move(a, b);
+        this.refresh();
+    }),
+    touch([x1, y1, x2, y2], [m1, n1, m2, n2]) {
+        var l1 = Math.sqrt(Math.pow(m1 - m2, 2) + Math.pow(n1 - n2, 2));
+        var l2 = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
+        var scale = l1 / l2;
+        this.Scale(scale, (m1 + m2) / 2, (n1 + n2) / 2);
+        this.refresh();
+    },
     Move(deltaX, deltaY) {
-        var { canvas, context } = this;
-        var imagedata = context.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight);
-        context.putImageData(imagedata, deltaX, deltaY);
+        var map = this;
+        var { canvas, context, minLat, maxLat, minLng, maxLng } = this;
+        var zoom = map.Zoom();
+        var scale = map.Scale();
+        var [lng, lat] = map.Center();
+        var [x, y] = [this.lng2x(lng, zoom) * 256 * scale, this.lat2y(lat, zoom) * 256 * scale];
+        deltaX = Math.round(deltaX);
+        deltaY = Math.round(deltaY);
+        if (this.direction < 0) deltaY = -deltaY;
+        var x0 = x, y0 = y;
+        x -= deltaX;
+        y -= deltaY;
+        var y1 = this.lat2y(minLat, zoom) * 256 * scale;
+        var y2 = this.lat2y(maxLat, zoom) * 256 * scale;
+        if (y1 > y2) [y1, y2] = [y2, y1];
+        var hh = canvas.height / 2;
+        y1 += hh;
+        y2 -= hh;
+        if (y < y1) {
+            deltaY = y0 - y1;
+            y = y1;
+        }
+        if (y > y2) {
+            deltaY = y0 - y2;
+            y = y2;
+        }
+        var hw = canvas.width / 2;
+        if (maxLng - minLng !== 360) {
+            var x1 = this.lng2x(minLng, zoom) * 256 * scale;
+            var x2 = this.lng2x(maxLng, zoom) * 256 * scale;
+            if (x1 > x2) [x1, x2] = [x2, x1];
+            x1 += hw;
+            x2 -= hw;
+            if (x <= x1) {
+                deltaX = x0 - x1;
+                x = x1;
+            }
+            if (x >= x2) {
+                deltaX = x0 - x2;
+                x = x2;
+            }
+        }
+        if (!deltaX && !deltaY) return false;
+
+        var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
         if (deltaX < 0) {
             var x_empty = -deltaX;
-            var x_start = canvas.offsetWidth + deltaX;
+            var x_start = canvas.width + deltaX;
         } else {
             x_start = 0;
             x_empty = deltaX;
         }
         if (deltaY < 0) {
             var y_empty = -deltaY;
-            var y_start = canvas.offsetHeight + deltaY;
+            var y_start = canvas.height + deltaY;
         } else {
             y_start = 0;
             y_empty = deltaY;
         }
-        context.clearRect(x_start, 0, x_empty, canvas.offsetHeight);
-        context.clearRect(0, y_start, canvas.offsetWidth, y_empty);
-        var map = this;
-        var [lng, lat] = map.Center();
-        var zoom = map.Zoom();
-        var scale = map.Scale();
-        if (scale === 1) {
-            map.Center(x2lng(lng2x(lng, zoom) - deltaX / 256, zoom), y2lat(lat2y(lat, zoom) - deltaY / 256, zoom));
-        } else {
-            map.Center(x2lng(lng2x(lng, zoom) - (deltaX / 256 / scale).toFixed(6), zoom), y2lat(lat2y(lat, zoom) - (deltaY / 256 / scale).toFixed(6), zoom));
-        }
+        context.clearRect(x_start, 0, x_empty, canvas.height + 2);
+        context.clearRect(0, y_start, canvas.width + 2, y_empty);
+        context.putImageData(imagedata, deltaX, deltaY);
+        map.Center(this.x2lng(x / 256 / scale, zoom), this.y2lat(y / 256 / scale, zoom));
     },
     Zoom(level) {
         if (isFinite(level)) {
             this.zoom = +level;
-            this.refresh();
         }
         return this.zoom;
     },
     Layer() {
 
     },
-    Scale(scale, x, y) {
-        if (isFinite(scale)) {
+    Scale(deltaS, layerX, layerY) {
+        if (isFinite(deltaS)) {
+            this.move.reset();
             var map = this;
             var { canvas, context } = map;
             var {
-                width,
-                height
+                offsetWidth: width,
+                offsetHeight: height
             } = canvas;
-            if (x === undefined) {
-                x = width >> 1;
+            var dw = width / 2;
+            var dh = height / 2;
+            if (layerX === undefined) {
+                layerX = dw;
             }
-            if (y === undefined) {
-                y = height >> 1;
+            if (layerY === undefined) {
+                layerY = dh;
             }
-
             var zoom = map.Zoom();
-            var saved_value = zoom;
-            if (scale >= 2) {
-                zoom += 1;
-                scale -= 1;
-            } else if (scale <= 1) {
-                zoom -= 1;
-                scale += 1;
+
+            var deltaScale = deltaS
+            var scale = map.scale * deltaS;
+            var delta = Math.floor(Math.log2(scale));
+            if (delta !== 0) {
+                zoom += delta;
+                scale /= Math.pow(2, delta);
             }
-            if (!zoom || zoom < 3) {
-                zoom = 3;
+            if (!zoom || zoom <= map.minZoom && deltaScale < 1) {
+                deltaScale = Math.pow(2, map.minZoom - map.zoom) / map.scale;
+                zoom = map.minZoom;
                 scale = 1;
-            } else if (zoom > 23) {
+            }
+            else if (zoom >= map.maxZoom && deltaScale > 1) {
+                deltaScale = Math.pow(2, map.maxZoom - map.zoom) / map.scale;
+                zoom = map.maxZoom;
                 scale = 1;
-                zoom = 23;
             }
-            var dest_scale = Math.pow(2, zoom - saved_value);
-            if (dest_scale !== 1) {
-                var dwidth = width * dest_scale;
-                var dheight = height * dest_scale;
+            var deltaS = deltaScale;
+            var dwidth = width * deltaS;
+            var dheight = height * deltaS;
+            var tempCanvas = map.canvas.cloneNode();
+            tempCanvas.getContext("2d").putImageData(context.getImageData(0, 0, width, height), 0, 0);
+            context.clearRect(0, 0, width, height);
 
-                var dw = dwidth >> 1;
-                var dh = dheight >> 1;
-                var tempCanvas = this.canvas.cloneNode();
-                tempCanvas.getContext("2d").putImageData(context.getImageData(0, 0, width, height), 0, 0);
-                context.clearRect(0, 0, width, height);
-                context.drawImage(tempCanvas, 0, 0, width, height, x - dw, y - dh, dwidth, dheight);
-                this.center = [this.center[0] - (dw >> 1), this.center[1] - (dh >> 1)]
-            }
-            this.scale = +scale;
-            // if (zoom !== saved_value) map.Zoom(zoom);
+            var dx = (layerX - dw) * deltaS - (layerX - dw);
+            var dy = (layerY - dh) * deltaS - (layerY - dh);
+            if (this.direction < 0) dy = -dy;
+            context.drawImage(tempCanvas, 0, 0, width, height, layerX - layerX * deltaS, layerY - layerY * deltaS, dwidth, dheight);
+            var [lng, lat] = map.center;
+            map.center = [this.x2lng(this.lng2x(lng, zoom) + dx / 256 / scale, zoom), this.y2lat(this.lat2y(lat, zoom) + dy / 256 / scale, zoom)];
+            map.scale = +scale;
+            map.Zoom(zoom);
         }
         return this.scale;
     },
@@ -225,9 +358,9 @@ maps.prototype = {
         var zoom = map.Zoom();
         var centerx = map.lng2x(centerlng, zoom);
         var centery = map.lat2y(centerlat, zoom);
-        var { offsetWidth, offsetHeight } = this.canvas;
-        var x = centerx + (layerx - offsetWidth / 2) / 256;
-        var y = centery + (layery - offsetHeight / 2) / 256;
+        var { width, height } = this.canvas;
+        var x = centerx + (layerx - width / 2) / 256;
+        var y = centery + (layery - height / 2) / 256;
         var lng = +map.x2lng(x, zoom).toFixed(6), lat = +map.y2lat(y, zoom).toFixed(6);
         return [lng, lat];
     },
@@ -237,7 +370,6 @@ maps.prototype = {
     Center(lng, lat) {
         if (isFinite(lng) && isFinite(lat)) {
             this.center = [+lng, +lat];
-            this.refresh();
         } else if (isObject(lng)) {
             if ("issearching" in lng) return;
             lng.issearching = true;
@@ -253,6 +385,21 @@ maps.prototype = {
     },
     getURL(x, y, z) {
         if (this.url) {
+            var minY = this.lat2tile(this.minLat, z);
+            var maxY = this.lat2tile(this.maxLat, z);
+            var minX = this.lng2tile(this.minLng, z);
+            var maxX = this.lng2tile(this.maxLng, z);
+            if (minY > maxY) [minY, maxY] = [maxY, minY];
+            if (minX > maxX) [minX, maxX] = [maxX, minX];
+            if (y > maxY || y < minY) return;
+            if (this.maxLng - this.minLng !== 360) {
+                if (x >= maxX || x < minX) return;
+            }
+            else {
+                var dx = maxX - minX;
+                if (x >= maxX) x = minX + (x - minX) % dx;
+                if (x < minX) x = maxX - (minX - x - 1) % dx - 1;
+            }
             return String(this.url).replace(/\$?\{([\w\-]+)\}/g, function (m, a) {
                 switch (a) {
                     case "x": return x;
@@ -272,109 +419,141 @@ maps.prototype = {
         image.src = src;
     },
     getImage(x, y, z) {
+        var { cache } = this;
+        var id = `${x}-${y}-${z}`;
+        var url = this.getURL(x, y, z);
+        if (!url) return this.defaultImage();
+        if (this.cache[id]) return this.cache[id];
         var image = new Image;
+        image._src = url;
         image.crossOrigin = "anonymous";
-        this.loadImage(image, this.getURL(x, y, z));
+        this.loadImage(image, url);
+        var cache = this.cache;
+        cache.push(image);
+        image._id = id;
+        cache[id] = image;
+        if (cache.length > 1000) {
+            cache.splice(0, 500).forEach(this.destroyImage);
+        }
         return image;
     },
-    getGrid(gridOnly) {
-        var [lng, lat] = this.Center();
-        var z = this.Zoom();
-        var x = this.lng2tile(lng, z);
-        var y = this.lat2tile(lat, z);
-        var x0 = this.lng2x(lng, z);
-        var y0 = this.lat2y(lat, z);
+    getGrid(gridMash) {
         var {
-            offsetWidth,
-            offsetHeight
+            width,
+            height
         } = this.canvas;
-        var halfWidth = offsetWidth / 2;
-        var halfHeight = offsetHeight / 2;
-        var marginX = (halfWidth + 256 * (x + 1 - x0)) % 256 - 256;
+        var halfWidth = width / 2;
+        var halfHeight = height / 2;
+        var [lng, lat] = this.center;
+        var z = this.zoom;
+        var startlng = this.x2lng(this.lng2x(lng, z) - halfWidth / 256, z);
+        var lng0 = startlng;
+        if (this.maxLng - this.minLng === 360) {
+            if (lng0 > this.maxLng) lng0 = this.minLng + (lng0 - this.minLng) % (this.maxLng - this.minLng);
+            if (lng0 < this.minLng) lng0 = this.maxLng - (this.minLng - lng0) % (this.maxLng - this.minLng);
+        }
+        var x = this.lng2tile(lng0, z);
+        var x0 = this.lng2x(lng0, z);
+        var y = this.lat2tile(lat, z);
+        var y0 = this.lat2y(lat, z);
+        var marginX = (256 * (x + 1 - x0)) % 256 - 256;
         var marginY = (halfHeight + 256 * (y + 1 - y0)) % 256 - 256;
-        var countX = Math.ceil((offsetWidth - marginX) / 256);
-        var countY = Math.ceil((offsetHeight - marginY) / 256);
+        var countX = Math.ceil((width - marginY) / 256) + 1;
+        var countY = Math.ceil((height - marginY) / 256);
         var grids = [];
         var startx = Math.round(x0 - (halfWidth - marginX) / 256);
         var starty = Math.round(y0 - (halfHeight - marginY) / 256);
-        if (gridOnly !== false) {
-            for (var cx = startx, dx = cx + countX; cx < dx; cx++) {
+        grids.startx = startx;
+        grids.starty = starty;
+        if (gridMash !== false) {
+            var minX = this.lng2tile(this.minLng, z);
+            var maxX = this.lng2tile(this.maxLng, z);
+            var x1 = this.lng2x(this.minLng, z);
+            var x2 = this.lng2x(this.maxLng, z);
+            if (minX > maxX) [minX, maxX, x1, x2] = [maxX, minX, x2, x1];
+            for (var cx = startx, dx = countX + cx; cx < dx;) {
                 for (var cy = starty, dy = cy + countY; cy < dy; cy++) {
-                    grids.push([cx, cy]);
+                    grids.push([x, cy, cx]);
+                }
+                if (x + 1 > maxX) {
+                    cx += x2 - maxX;
+                    x = minX;
+                    cx -= x1 - minX;
+                }
+                else {
+                    x++;
+                    cx++;
                 }
             }
         }
         grids.zoom = z;
-        grids.startx = startx;
-        grids.starty = starty;
         grids.left = marginX;
         grids.top = marginY;
         return grids;
     },
-    refresh() {
-        this.freeze();
+    refreshid: 0,
+    async refresh() {
+        var id = ++this.refreshid;
         var grid = this.getGrid();
         var { zoom } = grid;
-        grid.map(([x, y]) => {
-            this.drawLayer(x, y, zoom);
-        });
+        for (var [x, y, r] of grid) {
+            var c = this.cache[`${x}-${y}-${zoom}`];
+            this.drawImage(r, y, zoom, c && c.complete ? c : this.defaultImage());
+        }
+        return queue.call(grid, ([x, y, r = x]) => {
+            if (id !== this.refreshid) return false;
+            return this.drawLayer(x, y, zoom, r);
+        }, 2);
     },
     drawImage(x, y, z, image) {
         var { startx, starty, zoom, left, top } = this.getGrid(false);
         if (zoom !== z) return;
-        var { width, height } = image;
-        left = (x - startx) * 256 + left;
-        top = (y - starty) * 256 + top;
+        var width = 256;
+        var height = 256;
+        left = (x - startx) * width + left;
+        top = (y - starty) * height + top;
         if (this.direction < 0) {
-            top = this.canvas.offsetHeight - top - 256;
+            top = this.canvas.height - top - height;
         }
         var scale = this.Scale();
         if (scale !== 1) {
-            var { offsetHeight, offsetWidth } = this.canvas;
-            var centerx = offsetWidth / 2;
-            var centery = offsetHeight / 2;
+            var { height: cheight, width: cwidth } = this.canvas;
+            var centerx = cwidth / 2;
+            var centery = cheight / 2;
             left = (left - centerx) * scale + centerx;
             top = (top - centery) * scale + centery;
             width = scale * width;
             height = scale * height;
         }
-        var round = Math.round;
-        left = round(left);
-        top = round(top);
-        width = round(width);
-        height = round(height);
-        this.context.clearRect(left, top, width, height);
-        // console.log(grids)
+        if (this.direction > 0) this.context.clearRect(left, top, width, height);
         this.context.drawImage(image, left, top, width, height);
     },
     destroyImage(image) {
         if (!image.complete) image.abort && image.abort();
+        delete this.cache[image._id];
         image.onload = null;
         image.onabort = null;
-        image.removeAttribute("src");
     },
     abortLoading(image) {
         for (var cx = this.loadings.length - 1; cx >= 0; cx--) {
             if (this.loadings[cx] === image) this.loadings.splice(cx, 1);
         }
     },
-    drawLayer(x, y, z) {
-        var image = this.getImage(x, y, z);
-        if (image.src && image.complete) {
-            this.drawImage(x, y, z, image);
-            this.destroyImage(image);
-        } else {
-            image.onload = () => {
-                this.abortLoading(image);
-                this.drawImage(x, y, z, image);
-                this.destroyImage(image);
-            };
-            this.loadings.push(image);
-        }
-    },
-    lng2layer(lng, zoom) {
-    },
-    lat2layer(lat, zoom) {
+    drawLayer(x, y, z, r) {
+        return new Promise((ok) => {
+            var image = this.getImage(x, y, z);
+            if (image.src && image.complete) {
+                this.drawImage(r, y, z, image);
+                setTimeout(ok, 1);
+            } else {
+                image.onload = () => {
+                    this.abortLoading(image);
+                    this.drawImage(r, y, z, image);
+                    ok();
+                };
+                this.loadings.push(image);
+            }
+        });
     },
     lng2tile,
     lat2tile,

package/coms/zimoli/maps.less

@@ -0,0 +1,8 @@
+&{
+    display: block;
+}
+&>img{
+    position: absolute;
+    user-select: none;
+    pointer-events: none;
+}

package/coms/zimoli/maps_test.html

@@ -0,0 +1,2 @@
+<menu -src="(m,i) in menus" @active="open(maps[i])"></menu>
+<map #mp @click="locat"></map>