@progress/kendo-charts 1.21.0 → 1.23.0-dev.202201120958

package/dist/es/map/layers/tile.js

@@ -0,0 +1,481 @@
+import {
+    geometry as g,
+    throttle
+} from '@progress/kendo-drawing';
+
+import {
+    Class,
+    addClass,
+    deepExtend,
+    round,
+    limitValue,
+    hashKey,
+    setDefaultOptions
+} from '../../common';
+
+import { Layer } from './layer';
+
+import TemplateService from '../../services/template-service';
+
+var math = Math,
+    template = TemplateService.compile,
+    Point = g.Point;
+
+function roundPoint(point) {
+    return new Point(round(point.x), round(point.y));
+}
+
+function renderSize(size) {
+    var newSize = size;
+
+    if (typeof(size) !== "string") {
+        newSize += "px";
+    }
+
+    return newSize;
+}
+
+export var TileLayer = (function (Layer) {
+    function TileLayer(map, options) {
+        Layer.call(this, map, options);
+
+        if (typeof this.options.subdomains === 'string') {
+            this.options.subdomains = this.options.subdomains.split('');
+        }
+
+        var viewType = this._viewType();
+        this._view = new viewType(this.element, this.options);
+    }
+
+    if ( Layer ) TileLayer.__proto__ = Layer;
+    TileLayer.prototype = Object.create( Layer && Layer.prototype );
+    TileLayer.prototype.constructor = TileLayer;
+
+    TileLayer.prototype.destroy = function destroy () {
+        Layer.prototype.destroy.call(this);
+        this._view.destroy();
+        this._view = null;
+    };
+
+    TileLayer.prototype._beforeReset = function _beforeReset () {
+        var map = this.map;
+        var origin = map.locationToLayer(map.extent().nw).round();
+        this._view.viewOrigin(origin);
+    };
+
+    TileLayer.prototype._reset = function _reset () {
+        Layer.prototype._reset.call(this);
+        this._updateView();
+        this._view.reset();
+    };
+
+    TileLayer.prototype._viewType = function _viewType () {
+        return TileView;
+    };
+
+    TileLayer.prototype._activate = function _activate () {
+        Layer.prototype._activate.call(this);
+
+        if (!this.support.mobileOS) {
+            if (!this._pan) {
+                this._pan = throttle(this._render.bind(this), 100);
+            }
+
+            this.map.bind('pan', this._pan);
+        }
+    };
+
+    TileLayer.prototype._deactivate = function _deactivate () {
+        Layer.prototype._deactivate.call(this);
+
+        if (this._pan) {
+            this.map.unbind('pan', this._pan);
+        }
+    };
+
+    TileLayer.prototype._updateView = function _updateView () {
+        var view = this._view,
+            map = this.map,
+            extent = map.extent(),
+            extentToPoint = {
+                nw: map.locationToLayer(extent.nw).round(),
+                se: map.locationToLayer(extent.se).round()
+            };
+
+        view.center(map.locationToLayer(map.center()));
+        view.extent(extentToPoint);
+        view.zoom(map.zoom());
+    };
+
+    TileLayer.prototype._resize = function _resize () {
+        this._render();
+    };
+
+    TileLayer.prototype._panEnd = function _panEnd (e) {
+        Layer.prototype._panEnd.call(this, e);
+        this._render();
+    };
+
+    TileLayer.prototype._render = function _render () {
+        this._updateView();
+        this._view.render();
+    };
+
+    return TileLayer;
+}(Layer));
+
+setDefaultOptions(TileLayer, {
+    tileSize: 256,
+    subdomains: ['a', 'b', 'c'],
+    urlTemplate: '',
+    zIndex: 1
+});
+
+export var TileView = (function (Class) {
+    function TileView(element, options) {
+        Class.call(this);
+        this.element = element;
+        this._initOptions(options);
+        this.pool = new TilePool();
+    }
+
+    if ( Class ) TileView.__proto__ = Class;
+    TileView.prototype = Object.create( Class && Class.prototype );
+    TileView.prototype.constructor = TileView;
+
+    TileView.prototype._initOptions = function _initOptions (options) {
+        this.options = deepExtend({}, this.options, options);
+    };
+
+    TileView.prototype.center = function center (center$1) {
+        this._center = center$1;
+    };
+
+    TileView.prototype.extent = function extent (extent$1) {
+        this._extent = extent$1;
+    };
+
+    TileView.prototype.viewOrigin = function viewOrigin (origin) {
+        this._viewOrigin = origin;
+    };
+
+    TileView.prototype.zoom = function zoom (zoom$1) {
+        this._zoom = zoom$1;
+    };
+
+    TileView.prototype.pointToTileIndex = function pointToTileIndex (point) {
+        return new Point(math.floor(point.x / this.options.tileSize), math.floor(point.y / this.options.tileSize));
+    };
+
+    TileView.prototype.tileCount = function tileCount () {
+        var size = this.size(),
+            firstTileIndex = this.pointToTileIndex(this._extent.nw),
+            nw = this._extent.nw,
+            point = this.indexToPoint(firstTileIndex).translate(-nw.x, -nw.y);
+
+        return {
+            x: math.ceil((math.abs(point.x) + size.width) / this.options.tileSize),
+            y: math.ceil((math.abs(point.y) + size.height) / this.options.tileSize)
+        };
+    };
+
+    TileView.prototype.size = function size () {
+        var nw = this._extent.nw,
+            se = this._extent.se,
+            diff = se.clone().translate(-nw.x, -nw.y);
+
+        return {
+            width: diff.x,
+            height: diff.y
+        };
+    };
+
+    TileView.prototype.indexToPoint = function indexToPoint (index) {
+        var x = index.x,
+            y = index.y;
+
+        return new Point(x * this.options.tileSize, y * this.options.tileSize);
+    };
+
+    TileView.prototype.subdomainText = function subdomainText () {
+        var subdomains = this.options.subdomains;
+        return subdomains[this.subdomainIndex++ % subdomains.length];
+    };
+
+    TileView.prototype.destroy = function destroy () {
+        this.element.empty();
+        this.pool.empty();
+    };
+
+    TileView.prototype.reset = function reset () {
+        this.pool.reset();
+        this.subdomainIndex = 0;
+        this.render();
+    };
+
+    TileView.prototype.render = function render () {
+        var this$1 = this;
+
+        var size = this.tileCount(),
+            firstTileIndex = this.pointToTileIndex(this._extent.nw),
+            tile, x, y;
+
+        for (x = 0; x < size.x; x++) {
+            for (y = 0; y < size.y; y++) {
+                tile = this$1.createTile({
+                    x: firstTileIndex.x + x,
+                    y: firstTileIndex.y + y
+                });
+                if (!tile.visible) {
+                    tile.show();
+                }
+            }
+        }
+    };
+
+    TileView.prototype.createTile = function createTile (currentIndex) {
+        var options = this.tileOptions(currentIndex);
+        var tile = this.pool.get(this._center, options);
+
+        if (!tile.element.parentNode) {
+            this.element.append(tile.element);
+        }
+
+        return tile;
+    };
+
+    TileView.prototype.tileOptions = function tileOptions (currentIndex) {
+        var index = this.wrapIndex(currentIndex),
+            point = this.indexToPoint(currentIndex),
+            origin = this._viewOrigin,
+            offset = point.clone().translate(-origin.x, -origin.y);
+
+        return {
+            index: index,
+            currentIndex: currentIndex,
+            point: point,
+            offset: roundPoint(offset),
+            zoom: this._zoom,
+            size: this.options.tileSize,
+            subdomain: this.subdomainText(),
+            urlTemplate: this.options.urlTemplate,
+            errorUrlTemplate: this.options.errorUrlTemplate
+        };
+    };
+
+    TileView.prototype.wrapIndex = function wrapIndex (index) {
+        var boundary = math.pow(2, this._zoom);
+        return {
+            x: this.wrapValue(index.x, boundary),
+            y: limitValue(index.y, 0, boundary - 1)
+        };
+    };
+
+    TileView.prototype.wrapValue = function wrapValue (value, boundary) {
+        var remainder = math.abs(value) % boundary;
+        var wrappedValue = value;
+
+        if (value >= 0) {
+            wrappedValue = remainder;
+        } else {
+            wrappedValue = boundary - (remainder === 0 ? boundary : remainder);
+        }
+
+        return wrappedValue;
+    };
+
+    return TileView;
+}(Class));
+
+export var ImageTile = (function (Class) {
+    function ImageTile(id, options) {
+        Class.call(this);
+        this.id = id;
+        this.visible = true;
+        this._initOptions(options);
+        this.createElement();
+        this.show();
+    }
+
+    if ( Class ) ImageTile.__proto__ = Class;
+    ImageTile.prototype = Object.create( Class && Class.prototype );
+    ImageTile.prototype.constructor = ImageTile;
+
+    ImageTile.prototype.destroy = function destroy () {
+        if (this.element) {
+            this.element.remove();
+            this.element = null;
+        }
+    };
+
+    ImageTile.prototype._initOptions = function _initOptions (options) {
+        this.options = deepExtend({}, this.options, options);
+    };
+
+    ImageTile.prototype.createElement = function createElement () {
+        var el = document.createElement("img");
+        addClass(el, "k-layer");
+        el.style.position = "absolute";
+        el.style.display = "block";
+        el.style.width = this.options.size;
+        el.style.height = this.options.size;
+
+        this.element = el;
+
+        // todo
+        // add on error handler
+
+        // this.element =
+        // $('<img style=\'position: absolute; display: block;\' alt=\'\' />')
+        // .css({
+        //     width: this.options.size,
+        //     height: this.options.size
+        // })
+        // .on('error', proxy(function(e) {
+        //     if (this.errorUrl()) {
+        //         e.target.setAttribute('src', this.errorUrl());
+        //     } else {
+        //         e.target.removeAttribute('src');
+        //     }
+        // }, this));
+    };
+
+    ImageTile.prototype.show = function show () {
+        var element = this.element;
+        element.style.top = renderSize(this.options.offset.y);
+        element.style.left = renderSize(this.options.offset.x);
+
+        var url = this.url();
+
+        if (url) {
+            element.setAttribute('src', url);
+        }
+
+        element.style.visibility = 'visible';
+        this.visible = true;
+    };
+
+    ImageTile.prototype.hide = function hide () {
+        this.element.style.visibility = 'hidden';
+        this.visible = false;
+    };
+
+    ImageTile.prototype.url = function url () {
+        var urlResult = template(this.options.urlTemplate);
+        return urlResult(this.urlOptions());
+    };
+
+    ImageTile.prototype.errorUrl = function errorUrl () {
+        var urlResult = template(this.options.errorUrlTemplate);
+        return urlResult(this.urlOptions());
+    };
+
+    ImageTile.prototype.urlOptions = function urlOptions () {
+        var options = this.options;
+
+        return {
+            zoom: options.zoom,
+            subdomain: options.subdomain,
+            z: options.zoom,
+            x: options.index.x,
+            y: options.index.y,
+            s: options.subdomain,
+            quadkey: options.quadkey,
+            q: options.quadkey,
+            culture: options.culture,
+            c: options.culture
+        };
+    };
+
+    return ImageTile;
+}(Class));
+
+setDefaultOptions(ImageTile, {
+    urlTemplate: '',
+    errorUrlTemplate: ''
+});
+
+export var TilePool = (function (Class) {
+    function TilePool() {
+        Class.call(this);
+        this._items = [];
+    }
+
+    if ( Class ) TilePool.__proto__ = Class;
+    TilePool.prototype = Object.create( Class && Class.prototype );
+    TilePool.prototype.constructor = TilePool;
+
+    TilePool.prototype.get = function get (center, options) {
+        if (this._items.length >= this.options.maxSize) {
+            this._remove(center);
+        }
+
+        return this._create(options);
+    };
+
+    TilePool.prototype.empty = function empty () {
+        var items = this._items;
+
+        for (var i = 0; i < items.length; i++) {
+            items[i].destroy();
+        }
+
+        this._items = [];
+    };
+
+    TilePool.prototype.reset = function reset () {
+        var items = this._items;
+
+        for (var i = 0; i < items.length; i++) {
+            items[i].hide();
+        }
+    };
+
+    TilePool.prototype._create = function _create (options) {
+        var items = this._items;
+        var tile;
+        var id = hashKey(options.point.toString() + options.offset.toString() + options.zoom + options.urlTemplate);
+
+        for (var i = 0; i < items.length; i++) {
+            if (items[i].id === id) {
+                tile = items[i];
+                break;
+            }
+        }
+
+        if (tile) {
+            tile.show();
+        } else {
+            tile = new ImageTile(id, options);
+            this._items.push(tile);
+        }
+
+        return tile;
+    };
+
+    TilePool.prototype._remove = function _remove (center) {
+        var items = this._items;
+        var maxDist = -1;
+        var index = -1;
+
+        for (var i = 0; i < items.length; i++) {
+            var dist = items[i].options.point.distanceTo(center);
+
+            if (dist > maxDist && !items[i].visible) {
+                index = i;
+                maxDist = dist;
+            }
+        }
+
+        if (index !== -1) {
+            items[index].destroy();
+            items.splice(index, 1);
+        }
+    };
+
+    return TilePool;
+}(Class));
+
+setDefaultOptions(TilePool, {
+    maxSize: 100
+});

package/dist/es/map/location.js

@@ -0,0 +1,201 @@
+import {
+    Class,
+    deepExtend,
+    deg,
+    rad,
+    round,
+    defined
+} from '../common';
+
+import {
+    datums
+} from './datums';
+
+function toSquare(value) {
+    return value * value;
+}
+
+
+var math = Math,
+    abs = math.abs,
+    atan = math.atan,
+    atan2 = math.atan2,
+    cos = math.cos,
+    sin = math.sin,
+    tan = math.tan;
+
+export var Location = (function (Class) {
+    function Location(lat, lng) {
+        Class.call(this);
+
+        this.initProperties();
+
+        if (arguments.length === 1) {
+            this.lat = lat[0];
+            this.lng = lat[1];
+        } else {
+            this.lat = lat;
+            this.lng = lng;
+        }
+    }
+
+    if ( Class ) Location.__proto__ = Class;
+    Location.prototype = Object.create( Class && Class.prototype );
+    Location.prototype.constructor = Location;
+
+    Location.prototype.initProperties = function initProperties () {
+        deepExtend(this, {
+            DISTANCE_ITERATIONS: 100,
+            DISTANCE_CONVERGENCE: 1e-12,
+            DISTANCE_PRECISION: 2,
+            FORMAT: '{0:N6}{1:N6}'
+        });
+    };
+
+    Location.prototype.toArray = function toArray () {
+        return [
+            this.lat,
+            this.lng
+        ];
+    };
+
+    Location.prototype.equals = function equals (loc) {
+        return loc && loc.lat === this.lat && loc.lng === this.lng;
+    };
+
+    Location.prototype.clone = function clone () {
+        return new Location(this.lat, this.lng);
+    };
+
+    Location.prototype.round = function round$1 (precision) {
+        this.lng = round(this.lng, precision);
+        this.lat = round(this.lat, precision);
+        return this;
+    };
+
+    Location.prototype.wrap = function wrap () {
+        this.lng = this.lng % 180;
+        this.lat = this.lat % 90;
+        return this;
+    };
+
+    Location.prototype.distanceTo = function distanceTo (dest, datum) {
+        return this.greatCircleTo(dest, datum).distance;
+    };
+
+    Location.prototype.destination = function destination (distance, initialBearing, initialDatum) {
+        var bearing = rad(initialBearing);
+        var datum = initialDatum || datums.WGS84;
+        var fromLat = rad(this.lat);
+        var fromLng = rad(this.lng);
+        var dToR = distance / datum.a;
+        var lat = math.asin(sin(fromLat) * cos(dToR) + cos(fromLat) * sin(dToR) * cos(bearing));
+        var lng = fromLng + atan2(sin(bearing) * sin(dToR) * cos(fromLat), cos(dToR) - sin(fromLat) * sin(lat));
+
+        return new Location(deg(lat), deg(lng));
+    };
+
+    Location.prototype.greatCircleTo = function greatCircleTo (initialDest, initialDatum) {
+        var this$1 = this;
+
+        var dest = Location.create(dest);
+        var datum = initialDatum || datums.WGS84;
+
+        if (!dest || this.clone().round(8).equals(dest.clone().round(8))) {
+            return {
+                distance: 0,
+                azimuthFrom: 0,
+                azimuthTo: 0
+            };
+        }
+
+        // See http://en.wikipedia.org/wiki/Vincenty's_formulae#Notation
+        // o == sigma
+        // A == alpha
+
+        var a = datum.a;
+        var b = datum.b;
+        var f = datum.f;
+        var L = rad(dest.lng - this.lng);
+        var U1 = atan((1 - f) * tan(rad(this.lat)));
+        var sinU1 = sin(U1);
+        var cosU1 = cos(U1);
+        var U2 = atan((1 - f) * tan(rad(dest.lat)));
+        var sinU2 = sin(U2);
+        var cosU2 = cos(U2);
+        var lambda = L;
+        var prevLambda;
+        var i = this.DISTANCE_ITERATIONS;
+        var converged = false;
+        var sinLambda;
+        var cosLambda;
+        var sino;
+        var cosA2;
+        var coso;
+        var cos2om;
+        var sigma;
+
+        while (!converged && i-- > 0) {
+            sinLambda = sin(lambda);
+            cosLambda = cos(lambda);
+            sino = math.sqrt(toSquare(cosU2 * sinLambda) + toSquare(cosU1 * sinU2 - sinU1 * cosU2 * cosLambda));
+            coso = sinU1 * sinU2 + cosU1 * cosU2 * cosLambda;
+            sigma = atan2(sino, coso);
+
+            var sinA = cosU1 * cosU2 * sinLambda / sino;
+            cosA2 = 1 - toSquare(sinA);
+            cos2om = 0;
+
+            if (cosA2 !== 0) {
+                cos2om = coso - 2 * sinU1 * sinU2 / cosA2;
+            }
+
+            prevLambda = lambda;
+            var C = f / 16 * cosA2 * (4 + f * (4 - 3 * cosA2));
+            lambda = L + (1 - C) * f * sinA * (sigma + C * sino * (cos2om + C * coso * (-1 + 2 * toSquare(cos2om))));
+            converged = abs(lambda - prevLambda) <= this$1.DISTANCE_CONVERGENCE;
+        }
+
+        var u2 = cosA2 * (toSquare(a) - toSquare(b)) / toSquare(b);
+        var A = 1 + u2 / 16384 * (4096 + u2 * (-768 + u2 * (320 - 175 * u2)));
+        var B = u2 / 1024 * (256 + u2 * (-128 + u2 * (74 - 47 * u2)));
+        var deltao = B * sino * (cos2om + B / 4 * (coso * (-1 + 2 * toSquare(cos2om)) - B / 6 * cos2om * (-3 + 4 * toSquare(sino)) * (-3 + 4 * toSquare(cos2om))));
+
+        var azimuthFrom = atan2(cosU2 * sinLambda, cosU1 * sinU2 - sinU1 * cosU2 * cosLambda);
+        var azimuthTo = atan2(cosU1 * sinLambda, -sinU1 * cosU2 + cosU1 * sinU2 * cosLambda);
+
+        return {
+            distance: round(b * A * (sigma - deltao), this.DISTANCE_PRECISION),
+            azimuthFrom: deg(azimuthFrom),
+            azimuthTo: deg(azimuthTo)
+        };
+    };
+
+    // IE < 9 doesn't allow to override toString on definition
+    Location.prototype.toString = function toString () {
+        // return kendo.format(this.FORMAT, this.lat, this.lng);
+        return String(this.lat) + "," + String(this.lng);
+    };
+
+    Location.fromLngLat = function fromLngLat (lngAndLat) {
+        return new Location(lngAndLat[1], lngAndLat[0]);
+    };
+
+    Location.fromLatLng = function fromLatLng (lngAndLat) {
+        return new Location(lngAndLat[0], lngAndLat[1]);
+    };
+
+    Location.create = function create (a, b) {
+        if (defined(a)) {
+            if (a instanceof Location) {
+                return a.clone();
+            } else if (arguments.length === 1 && a.length === 2) {
+                return Location.fromLatLng(a);
+            }
+
+            return new Location(a, b);
+        }
+    };
+
+    return Location;
+}(Class));